Welcome back to Divi small layouts #2. This is a series of small layouts focused on learning new code tricks and discovering new design ideas. If you like it, please comment on this post or leave your project URL via email or comments too.

Divi small layouts #2

Preview

Download

How this layout idea arose

I was creating a website for a supermarket consultant company and they asked me for a design idea about how to display daily supermarket owners challenges paired with the solution their software accomplish.

So, I thought about a two columns design layout. On the left the challenges and on the right the solution.

I showed something like the demo above to my client. And they’ve approved.

Soooooo… somebody already liked it. It is worth putting into your design arsenal anyway.

How to achieve this layout? You name it. Either download the JSON file or follow along with this tutorial.

Let’s start!

To achieve this layout I used a section with 5 rows inside of it. 1-row contemplate the title with a small divider created with the after pseudo element. The other 4 rows contemplate problems 1-4 and solutions 1-4.

Thinking of the possibilities now, this kind of layout design is good for an F.A.Q page too.

To achieve the small divider after the Challenges and Solution titles, you need to create a Text Module and add the custom CSS class of title to it. Then, paste the following code inside Divi > Theme Options > Custom CSS.

.title:after {
content: "";
display: block;
width: 25px;
height: 5px;
background: #3F51B5;
margin: 10px 5px;
}

Ok, let’s continue. Another cool thing about this layout are the dividers after every <p> tag inside the “Challenges” column.

To achieve this effect you need to create a class and select all the <p> from that class. Create a Text Module and add the class challenges to it.

Paste the following code inside Divi > Theme Options > Custom CSS.

.challenges p:after {
content: "";
display: block;
width: 100%;
height: 2px;
background: #3F51B5;
margin: 15px 0 0 0;
}

Ok, now let’s talk about the “solution” column. I just created an Accordion Module and played with it’s Advanced Design Settings. No big deal here.

One last important thing about this layout is the 1px solid bottom line between rows. You’ll need to create a border-bottom with CSS to achieve this dashed border type. Paste the following code inside Row Module CSS > Custom CSS > Main Element:

border-bottom: 1px dashed #3F51B5;

Conclusion

That’s it. Another Divi small layout for you. Hope this post has given you some design ideas for your project pages.

I’m always glad to see you commenting with links to similar layout ideas.

Send me a message or add a comment below. Hope to help you somehow.

See ya!