Welcome to part two of the blog post on indirectly applying section dividers to rows and modules! In part one of this post, weβve applied section dividers to rows and created a unique and stunning design step by step. In the second part of this post, weβll do the same thing but for modules.
For this approach, weβll create two versions: one for desktop and one for tablet and phone. Although the tablet and phone version isnβt really required, it will help you add a section divider to each one of the modules individually on smaller screen sizes.
Letβs get to it!
Preview
Approach
- Weβre using more or less the same approach as we did in part 1 of this post
- The divider and section background have the same color
- That way, the divider and section background will blend until the divider comes in contact with another background color
- In this case, weβre applying the section dividers to Blurb Modules
- Unlike for rows, this will require placing the divider on top of section content
- To make sure it doesnβt overlap the content of our module, weβll add extra top padding to the module (in balance with the divider height)
- You can choose to go with the desktop version only, but if you want to apply the section divider to each module as well, youβll have to create a separate tablet and phone version
- The tablet and phone version will place each module in a new section and have a section divider dedicated to that module in question
Recreate Desktop Version
Add New Section
Background Color
Weβll start creating the desktop version first. This version contains one section only. After adding a regular section, use β#abd7f2β as its background color.
Top Divider
Go to the Design tab next and add the following Divider (containing the same color as your section):
- Divider Style: Find in List
- Divider Color:Β #abd7f2
- Divider Height: 182px
- Divider Arrangement: On Top of Section Content
Visibility
Since weβll create a separate version for tablet and phone, weβll need to disable this entire section on phone and tablet in the Visibility subcategory of the section settings.
Add New Row
Column Structure
Once youβre done with your section settings, add a row with the following column structure:
Add Blurb Module to Column 1
Choose Icon
Weβll add a Blurb Module to the first column of this row. After modifying the settings of this Blurb Module, weβll reuse it for the remaining columns. Add your content, open the Image & Icon subcategory and select your icon of choice.
Background Color
Then, add β#a95abcβ as the background color of your Blurb Module.
Icon Settings
Move on to the Design tab and change the appearance of your icon:
- Icon Color: #ffffff
- Icon Placement: Top
- Use Icon Font Size: Yes
- Icon Font Size: 52px
Title Text Settings
Next, change your title text settings:
- Title Font Weight: Ultra Bold
- Title Text Alignment: Center
- Title Text Color: #ffffff
- Title Text Size: 27px
Body Text Settings
Weβll also make some modifications to the body text of our Blurb Module:
- Body Text Alignment: Center
- Body Text Color: #ffffff
Spacing
As you can notice in the print screen below, weβll need quite some top padding for this Blurb Module. This will prevent the divider from overlapping the content your Blurb Module contains:
- Top Padding: 150px
- Right Padding: 20px
- Bottom Padding: 50px
- Left Padding: 20px
Border
Weβll apply some rounded corners of β20pxβ to the bottom left and bottom right next.
Box Shadow
To create some depth, you can also enable the first box shadow option within your settings.
Clone Blurb Module & Place in Column 2
Change Background Color
Weβre done modifying the Blurb Module in column 1. We can now clone this module, place it in the second column and change its background color to β#3c85c1β.
Clone Blurb Module & Place in Column 3
Change Background Color
Clone the Blurb Module once again, place it in column 3 and use β#7277f9β as the background color.
Recreate Tablet & Phone Version
Add New Section
Background Color
The tablet and phone version requires a more delicate approach. The section divider remains part of the section, although it doesnβt show up at the beginning of the section. On smaller screen sizes, Blurb Modules will show up vertically instead of horizontally. Thatβs why weβll add a separate section for each one of the Blurb Modules. Add a new regular section and, again, use β#abd7f2β as its background color.
Top Divider
Weβre using the same top divider as we did for the desktop version:
- Divider Style: Find in List
- Divider Color:Β #abd7f2
- Divider Height: 182px
- Divider Arrangement: On Top of Section Content
Spacing
Weβll add some custom padding to this section next:
- Top Padding: 20px
- Bottom Padding: 0px
Visibility
This section is part of the tablet and mobile version so naturally, weβll disable this section on Desktop within the Visibility subcategory.
Add New Row
Column Structure
Instead of using a row with two columns, weβll use one column.
Clone Column 1 Blurb Module of Desktop Version & Place in Column
Change Sizing
We already have the desktop Blurb Module that we can clone and place in this column. The only thing weβll need to modify is the Sizing:
- Width: 63% (Tablet), 99% (Phone)
- Module Alignment: Center
Clone Entire Section Twice
Change Background Color of Blurb Modules
Now, clone this section twice. Change the background color of your second Blurb Module to β#3c85c1β.
Likewise, change the background color of your third Blurb Module to β#7277f9β.
Divider Style #2
Top Divider Style
You can apply different divider styles to this, or any other, design. Find the following divider style on the list:
Divider Style #3
Top Divider Style
You can also go with the following divider style:
Divider Style #4
Top Divider Style
Or the last divider style which requires an increased Divider Horizontal Repeat of β17xβ.
Preview
Now that weβve gone through all the steps, letβs take a final look at the different section dividers that weβve applied to the Blurb Modules in this tutorial:
Final Thought
Thatβs it for this two-part post! In the first part, weβve shown you how to indirectly add section dividers to rows. We accompanied that post with a stunning design that weβve recreated step by step. In this second part, weβve changed the scenario and applied section dividers to modules instead. To have the same effect on tablet and phone as on desktop, weβve created two versions. If you have any questions, make sure you leave a comment in the comment section below!
Amazing design idea! love to try π
Definitely do! Thanks for the comment π
Wow, thatΒ΄s is a very nice feature, Thank you
You’re welcome, Frank! π
awesome work love it.. inspirational
Happy to hear it’s inspiring you, Jason!
Really a good information on the divider design. Always this blog gives information on new plugin and themes. Thanks for sharing.
Good to hear you enjoyed it, Zebie! π
Nice tute! Have to try this one. Well done.
Thank you, Allie! Definitely do try it out! π
Just completed part one and two. The examples show where Divi shines for creativity.
One thing though. Where you use the content twice, one version for desktop and another for tablet and mobile, you are straying into the territory of of DRY (Don’t Repeat Yourself). It is something I would try to avoid. The use has to remember to update twice, where changes to blurb content is required at a later date. Also probably would be flagged in terms of html validation and could get penalties under SEO and ranking. Not so bad for once off occurrences perhaps.
Donjete, can you point this out to Nick. He and the team might come with some clever solution whereby enter text once / make design change for different devices as many times as necessary.
Thanks for the comment and feedback! π
It’s quite optional to create a separate tablet and mobile version, though. You can stick with the desktop version for those devices as well if you want to avoid repetitive content (but I admit that you’ll have to sacrifice the design possibilities a bit.)
thanks for the tutorial on these styles, it shows how flexible the dividers are.
They really are! Thank you for the comment, Leisa! π