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.
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)
- 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.