Center Sidebar Section Titles on DIVI

To have the sidebar section titles to be centered (not left aligned), add this css code in the custom css field of the theme options:

h4.widgettitle {
text-align: center;
}

Read More

Custom hamburger icon including MENU with icon

This CSS snippet is written for the DIVI theme by Elegant Themes. To have another hamburger icon that includes custom text. Just a simple "menu" text beneath the hamburger icon. Add this in the custom css section in the theme options:

.mobile_menu_bar.mobile_menu_bar_toggle::after {
content: "Menu";
position: absolute;
top: 38px;
right: 2px;
font-size: 12px;
}

Read More

Add Yelp icon to the social media icons in DIVI

To add Yelp icon to the social media icons in DIVI, add the following code to includes/social_icons.php before </ul>:

<li class="et-social-icon et-social-yelp">
<a href="yelp link goes here‎" class="icon">
<span><?php esc_html_e( 'Yelp', 'Divi' ); ?></span>
</a>
</li>

then add the following code to custom css box in Divi>theme options:

.et-social-yelp a.icon:before { content: url("Yelp icon url here"); }

Read More

Add Whatsapp icon next to the phone icon in the DIVI primary header

To add the whatsapp icon next to the phone icon in the primary menu.

Please add the following code to includes/social_icons.php before </ul>:

<li class="et-social-icon et-social-whatsapp">
<a href="#‎" class="icon">
<span><?php esc_html_e( 'Whatsapp', 'Divi' ); ?></span>
</a>
</li>

then add the following code to custom css box in Divi>theme options:

.et-social-whatsapp a.icon:before { content: url("whatsapp icon url here"); }

Read More

Increase pricing text size on WooCommerce products

Looking to increase the size of the pricing text on the woocommerce pages?

You can use the following CSS rule in your themes custom CSS:

.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price, .woocommerce-page ul.products li.product .price del {

font-size: 18px;

}

Read More

How to make DIVI people module the same height

Looking to make the People module the same size, even though the other box has less text compare to the other one like the picture below?

To correct this and make same height, in the row settings > design tab > set equalize column heights.

Then for each person module > advanced tab > custom css > main element window add the following:

height:100%;

This will produce the below:

Read More