3 col icon and text with borders

Hey lill,

I guess you could just use a three-column row and for each item use a button module.

You can use the built-in button settings to add an icon, text and border

You'll also be able to link the button to the relevant resource if that's what you're planning to do (otherwise it's possible to disable clicks on the button if you just want them as unlinked list items).

For styling the buttons, go into the button settings and enable:

Button Settings > Design > Button > Use Custom Styles for Buttons

Then set:

Button Settings > Design > Button > Button Icon Placement = Left
Button Settings > Design > Button > Only Show Icon On Hover for Button = NO

And select your icon at:

Button Settings > Design > Button > Button Icon

If you have particular icons you need to use, rather than Divi's built-in ones, you'd need to apply them using custom code or you can use my Divi Booster plugin to upload your icons to Divi:

https://divibooster.com/adding-custom-icons-to-divi/

Hope that helps!

 

Hi lill,

One way to do it would be to create a two-column row with a text module in each row. In each text module, add a bullet list.

Now, add this CSS to your site (e.g. in "WP Admin > Divi > Theme Options > General > Custom CSS"):

Code:

Log In or Sign Up to view this code.

Finally, in the module settings each of the text modules, set "Text Settings > Advanced > CSS ID & Classes > CSS Class" to "orange-bullets".

That should give you larger, orange bullets on those two bullet lists.

In this approach you have to manage the left and right columns as separate lists (rather than having a single list that automatically splits into two columns), but if it's only on one page hopefully managing that is not a big issue.

 

You’re welcome, lill.

 

Hi lill,

This post explains how to make show the hamburger menu on desktops:

https://divibooster.com/show-divi-header-menu-button-on-large-screens/

If you use the CSS code at the end of the post, but change the first line to this:

Code:

Log In or Sign Up to view this code.

I think that should do what you need.

 

Hi lill,

Yes, that code will apply to any menu module on the page. Probably the easiest way to sort it out in your case is to add "header' to the start of any CSS rules you want to affect only the header menu. So your example above would become:

Code:

Log In or Sign Up to view this code.

Note that any CSS selectors with a comma in them actually target a list of elements and you'd need to add "header" to the start of each of these. I've inserted a newline in the above and added "header" to the start of each - hopefully this is clear.

Also note that you'll probably need to do the same to some of the other CSS rules you've added for the header as this example CSS only hides the normal menu - it won't be the one making the hamburger visible on the footer links.