Blurb Controlled Tabs
Showing several columns of Divi Blurb Modules on the home page is a common way to present information such as services, or simply to lead visitors to other areas of the site. But if there is a fair bit of content, long blurb columns of text can look awkward.
This free Divi layout offers a different way to present multiple streams of content. Blurb Modules hold images and headings to introduce each topic. Tab Modules below house the introductory content corresponding to each blurb. A bit of Javascript links the blurbs to the tabs, so that clicking on each blurb opens the corresponding tab content below.
The layout reverts to the standard Toggle layout on mobile devices.
Installation and Usage Instructions
PLEASE NOTE: You will need to have the WordPress Divi Theme installed and activated on your site in order to use this layout. A good knowledge of working with Divi, and of editing CSS is also recommended in order to modify this layout.
- Install the layout
Download and unzip the layout file(s) onto your computer. Create a new page on your site and use the Divi portability function to import the layout json file into your page. NOTE: Do not upload the layout to your Divi Library.
- Move the supplied code (optional)
The imported file includes the layout css and javascript in code modules at the top of the page. You can leave them here, or you can copy the css to your child theme css file, to the Divi Theme Options > Custom CSS box, or to the Divi page specific css box. You can copy the javascript to the Divi > Theme Options > Integration section in the “Add code to the < head > of your blog” code box. When you have copied the code module contents you can then delete the section containing these modules.
- Add your images and content
The section following the code section consists of a page heading on a parallax image background. Edit the section settings to upload your background image. The image size used in the demo is 1920 x 600px. Edit the text module to your heading text. You can of course also edit the text formatting to match your site style.
The next section includes the blurbs. You can edit the section settings to change the background colour of the section to match your site colours. Edit the contents of each blurb and upload your images. The images must be square in order for the border-radius to make them round. The image size used in the demo is 300 x 300px. Change the blurb titles to your titles. In the blurb design settings you can change the blurb border colour, and the text colour and other styling.
The final section included in the layout includes the tabs. The content of each tab corresponds to one of the blurbs in the previous section (the first tab corresponds to the first blurb, etc.) Edit the tab content to add your text. Note that the tab titles (Tab One, Tab Two etc. in the demo) are not shown in the desktop layout – but they are shown in the mobile version. The tab content layout includes an H2 title, horizontal rule, text and link (styled as a button). You can use this layout or change it as you desire. If you use this layout, because these options are not available in the standard tab module, you will need to edit the css code included with the layout in order to edit the colours and heading font size. The css is annotated to show you what you need to edit.
thank you!
Is there a way to make this layout still show up on Mobile?
In the css code module, REMOVE the following
@media only screen and (max-width: 979px) { /* hide blurbs on mobile */.dd-round-blurbs {
display: none;
}
}
and ADD
@media only screen and (max-width: 979px) { /* hide tab controls on mobile */#dd-tabs ul.et_pb_tabs_controls {
display: none;
}
}
Hello, very nice module.
How can I add the js and css files the child theme’s function file? I have tried and it does not work.
I don’t know what you have tried, but the recommended way to include js and css files in functions.php is to enqueue them
I did enqueue it in my child theme functions file. This is what I have in it:
/*****************Call Theme Styles*******************/
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
/*****************************************************/
/***************Load JS File************************/
function mycustomscript_enqueue() {
wp_enqueue_script( ‘sfcs-script’, get_stylesheet_directory_uri() . ‘/ds-script.js’ );
}
add_action( ‘wp_enqueue_scripts’, ‘mycustomscript_enqueue’ );
/*****************************************************/
When I add the code to Divi >> theme options >> integration it works, but when I add it the ds.scripts.js file it does not work all the way. When I click on any of the blurbs, it does not call the tabs.
You must have an error in your js file.
Well, I had given up on this, so I went back this week and with the Divi’s support, I figured out that when I was playing around with similar scripts, I had left and old js inside the theme integration area, and that must have been conflicting with it since once I removed it, it worked like it is supposed to.
Great, glad you were finally able to get it working!
I got it working. I deleted the page I was working on, cleared browser cache, started all over again and it is working now.
I love the circles, but for my site, I would like to change to almost square. Previously, I did the change in the blurb setting, but when I hovered over it, it would go back to a circle. Can you help me make that change?
It happened again after I created a new page and started all over. I deleted the other new page and it was working fine until I went to blurb settings to change the radius from 50% to 25%, then the blurbs stopped opening the tabs. This time I kept all the CSS and JQuery in the top section.
Sorry you are having trouble. It works for me with 25% border radius.
You would also need to edit the border radius in the supplied css:
.dd-round-blurbs .et_pb_main_blurb_image {
margin-bottom: 0;
background-color: #ffffff;
border-radius: 50%;
}
When I use this layout on a tablet neither the blurbs nor the tabs are displayed. Is there a way to make this layout functional on all devices?
It should be functional on all devices, sorry you are having problems. The blurbs do not display on mobile or tablet – they change to tabs. If you want to keep the blurbs on mobile see the previous comment (in reply to marissa)
Hi there! Love the controlled tabs. Instead of 4 Blurbs, I have 3 Blurbs (Only 3 Columns). How do I go about centering the tab buttons on mobile devices.
Here’s a screenshot as a reference.
Remove the float: left from the li and add display: inline-block, and set the up to text-align: center
Hi there! I am just a newbie, how can I add 2 more columns?
Change the row column structure to 6 – copy one of the modules to the 2 new rows. Edit the modules – under the Advanced tab, change the CSS ID’s to dd-open-tab-five and dd-open-tab-six. Add 2 new tabs to the Tab Module. Add the following to the javascript code module, on the third to last line:
//tab 3$('#dd-open-tab-five a').on('click', function(event){
$('#dd-tabs .et_pb_tab_4 a').click();
});
//tab 4
$('#dd-open-tab-six a').on('click', function(event){
$('#dd-tabs .et_pb_tab_5 a').click();
});
Hello, great tutorial, thanks a lot !
I have a question : is it possible to display the small arrow on the first blurb? This arrow appears when we fly over it but I would like it to be displayed directly (without being forced to fly over the first blurb).
Sure, just edit the css and change the opacity under .dd-round-blurbs .et_pb_blurb_container:before from 0 to 1
Thank you ! but in this case, the small arrow appears directly on all the blurbs … What I would like is that this little arrow appears directly on the first (without having to fly over it).
Sorry, I guess I don’t understand what you want! But you are free to use the layout and modify it however you like.
Any way to have two rows with four columns instead of one row with four columns?
I haven’t tried it, but I would think so.