#07 Building a Divi Community Page

Here’s the CSS code I’ve used to make some changes to the Email Optin Module: @media (min-width:768px) { p.et_pb_newsletter_field.et_pb_contact_field_last.et_pb_contact_field_last_tablet.et_pb_contact_field_last_phone { flex-basis: 48.5%; } }...

#06 Custom Scripts & Mobile Adjustments

This time, instead of adding custom CSS to our child theme’s style.css file – I’ve included the code inside the Divi Builder. To align modules vertically inside a column (as in the fist section of the home page), I made sure that the “Equal...

#05 Building a Home Page in Divi

This is the CSS code we used for the home page: /* Reverse columns on mobile */ @media (max-width:980px) { .dl-reverse-column { display:flex; flex-direction:column-reverse; } .dl-reverse-column .et_pb_column:first-of-type { margin-bottom:0; } } /* Homepage */...

#04 Divi Child Theme and Footer Template

This is the code we’ve added in the style.css file: /* Theme Name: Webdesign Playground Description: This is my child theme Author: Ania R. Template: Divi Version: 1.0 License: GNU General Public License v2 or later License URI:...

#03 Creating a single post template

This is the custom CSS code I’ve added for the Single Post Template: /* Singe Post Video Image */ .wp-block-embed.is-type-video { background: url(https://playground.divilover.com/wp-content/uploads/2021/02/laptop-bg3.png) no-repeat; background-size: 100% auto;...

#02 Styling SVG Icons in the Divi Menu

Here’s the CSS code used: /* Navigation Style */ .dl-menu svg { height: 60px; margin-bottom:12px; } .dl-menu a, .dl-menu .et_mobile_menu li a { display: flex; flex-direction: column; text-align:center; } .dl-menu.et_pb_menu .et-menu>li { padding: 0; }...

#01 Adding SVG Icons to Divi Menu

Here’s the code we’ve added to the Theme Options -> Integration tab (Body section). <script> jQuery(document).ready(function($) { $(‘.dl-community>a’).prepend(‘<svg xmlns=”http://www.w3.org/2000/svg”...