Since it’s nearly Christmas…

 

We’ve searched high and low throughout the internet and integrated some additional useful and cool features into a Divi Child Theme. If you are unfamiliar with the Divi theme for WordPress we highly recommend you learn more by clicking here). Installing this Divi child theme alongside your main Divi theme will allow you to add many micro animations, change your logo on scroll, add interesting dividers to your sections, add interactive particle animations to your sections, include a call to action in your top bar, add additional social icons to your header and footer and lots more.

The below sections will help you get the most out of these additional features. Download the theme by entering your details below.

 

FULL LPD Divi Child Theme feature list:

 

– Adds additional social icons to your header and footer (LinkedIn and Instagram, although more can be added)
– Prevents your navigation menu from overlapping onto two lines by introducing the mobile menu earlier
– Changes your logo on scroll if you are using the fixed header option
– Allows you to add icons to your menu items without using Font Awesome or anything else
– Adds a call to action in your top bar for you to link to offers or important pages
– Introduces a number of dividers for use between your sections
– Adds 12 micro animations to be used with the blurb module
– Allows you to add a sticky element to the bottom right hand corner of your website
– Allows 5/6/7/8/9/10 column layouts so you are no longer limited to four
– Removes the default footer bottom bar content and replaces it with a dynamic date and “Created by [your name]”
– Integrates the use of shortcodes, allowing you to do things like putting modules within modules or using specialty layouts instead of the default 1-4 column footers

 

 

 

 Getting Started

 

After installing your theme, before you start playing around you’ll need to be familiar with assigning elements a css id/class within the original Divi or visual builder. If you already know how to do this, you can skip this section. If you are unfamiliar with how to do this please follow the guide as you’ll not be able to access a number of features without this.

Note: When we refer to navigating to a file within the child theme folder, you can do this after installing the theme by going to your hosting cpanel > File manager. Once you’re in find wp-content > themes > LPD-extra-divi-child. You can edit your files through your File manager by clicking edit at the top menu.

Adding classes and IDs to your existing Divi elements is pretty straight forward, but depending on how you’ve been using the theme you may never have had the need to do it.

When in the visual or Divi builder, open the settings option for your chosen section, row or element. Click the “Advanced” tab and then “CSS IDs & Classes”. You’ll want to enter content into the “CSS ID” or “CSS Classes” boxes depending on the instructions for each of the below sections.

 

LPD Divi child theme feature implementation guide

 

Header features

 

Adds Instagram and LinkedIn icons

Credit to Elegant Tweaks

 

On the surface Divi can only show four social icons – Google, Facebook, Twitter and RSS feed. Fortunately it is possible to show far more. Within this child theme we’ve added Instagram and LinkedIn for you but you can manually add more if you require. You’ll need to follow the process below to manually add your URLs for these platforms too.

Open up the social_icons.php file which is found in the “includes” folder within the child theme. Search for the below:

 

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

 

Replace the “#” in both the LinkedIn section of the code and the Instagram. If you want to add more networks (see below for all of the options) you can quite easily. Simply copy and paste the code above and replace et-social-linkedin with the class below and ‘LinkedIn’ with the same network (e.g. use et-social-tumblr and ‘Tumblr’).

Available network icons:

et-social-tumblr
et-social-instagram
et-social-skype
et-social-flikr
et-social-myspace
et-social-dribbble
et-social-youtube
et-social-vimeo

 

Mobile menu – Implemented earlier (at 1200px) instead of the norm (980px)

Credit to Geno Quiroz

 

Useful if you’ve got a number of menu items in your top navigation. Normally your mobile menu is introduced at 980px, meaning on screens between 1200px and 980px your menu goes on to two lines and doesn’t look very nice.

If you want to amend this, open the style.css in the theme folder and search for “Mobile Menu”. Change the ( max-width:1200px ) to a lower or higher value depending on your menu. Delete this section to return the normal Divi functionality. You can style it by editing “.mobile_menu_bar:before”.

 

Change your logo on scroll if using a fixed header

Credit to Geno Quiroz

 

It’s nice to sometimes change your logo on scroll. For instance if you are using a transparent header over a full width slider and have a white out first of your logo, you may want your logo to change to your normal brand colours when a user scrolls.

To implement this you will need to upload your logo as normal in Divi > Theme Options. Next you’ll need to upload your second logo to the media library and copy the link on the right hand side. In the theme folder you will need to find the header.php and scroll to “2nd Logo” (it’s quite obvious) and replace the “#” with the link you copied a few steps ago.

If your second logo is not formatted correctly you’ll need to go into your style.css file within the child theme and play around with the margins and padding of “#logo2”.

If you want to remove this functionality entirely just delete the two sections above (one within the header.php file – it is clearly labelled – and one within the style.css – again, easy to find).

 

Add icons to menu items

Credit to Divi Space

 

A good way of spicing up your menu items is to integrate icons. You can add icons to specific menu items by locating your menu (through “Appearance”) and then at the top select “Screen options” and enable “CSS Classes”.

Click the drop down for each menu item and you’ll see the box CSS classes. Add “menu-icons” followed by the class below for your chosen icon (e.g. for a lightbulb: “menu-icons menu-icon-7”).

INFO – menu-icon-1
CHAT – menu-icon-2
CLOSED PADLOCK – menu-icon-3
CART – menu-icon-4
PEOPLE – menu-icon-5
LANDSCAPE IMAGE ICON – menu-icon-6
LIGHTBULB – menu-icon-7
TEL – menu-icon-8
ENVELOPE – menu-icon-9
CREDIT CARD – menu-icon-10
SHOPPING CART – menu-icon-11
LOCATION PIN – menu-icon-12
CALENDAR – menu-icon-13
CONTACTS BOOK – menu-icon-14
HEART – menu-icon-15
COGS – menu-icon-16
WALLET – menu-icon-17
BRIEFCASE – menu-icon-18
STAR – menu-icon-19
HOME – menu-icon-20
LINK CHAIN – menu-icon-21
LIKE THUMBS UP – menu-icon-22
HOURGLASS – menu-icon-23
PIE CHART – menu-icon-24
FACEBOOK – menu-icon-25
TWITTER – menu-icon-26

 

Call to action in header

Credit to Elegant Themes

 

This child theme automatically adds a call to action to your top bar and organise your contact information and social icons accordingly.

You can edit this content to refer to your latest offers or sign up pages by finding the header.php file in the theme folder. Open this and search for ”This is the call to action.” You’ll see:

 

<div class="cta"> Want to Learn More ... <a href="#">Click Here</a></div>

Change “Want to learn more” to what ever you want and replace the “#” to your destination URL. If you like you can remove this entirely by deleting the code where it indicates within the file.

 

Content features

 

Dividers

Credit to Elegant Themes

 

A great way to improve the design of your site is by implementing some custom divider sections. This theme offers 4 designs. To implement them, add the below into the “CSS Class” of your sections:

Diagonal shadow – Add: diagonal-shadow
Zigzag – Add: zigzag
Upwards arrow – Add: upwardsarrow
Half circle – Add: halfcircl

See the link above to see what these look like!

 

Micro animations for blurb icons

Credit to Geno Quiroz

 

Fortunately it’s really easy to implement any of these animation effects. Simply enter the builder and find the blurb that you would like to style with the animation. Enter it’s settings and go to the “Advanced” tab and then “CSS IDs & Classes”. You’ll need to add the details below depending on what animation you require to the “CSS Class” box. Please note these animations will only work with blurb icons (you can add them to buttons too, as per below).

Pulse – Add: mp_m_blurb_pulse
Grow – Add: mp_m_blurb_grow
Push – Add: mp_m_blurb_push
Bounce – Add: mp_m_blurb_bounce
Rotate – Add: mp_m_blurb_rotate
Bob – Add: mp_m_blurb_bob
Buzz – Add: mp_m_blurb_buzz
Push down – Add: mp_m_blurb_down
Push up – Add: mp_m_blurb_up
Spin – Add: mp_m_blurb_spin
Drop – Add: mp_m_blurb_drop
Horizontal wobble – Add: mp_m_blurb_horizontal_wobble

 

5/6/7/8/9/10 Column Layouts

Credit to Jason Champagne

Increase the amount of columns you can use within Divi so you are no longer limited to 4. Simply add the number of modules to a row within the builder that you wish to have on a horizontal line (e.g. add 6 Divi Blurb modules for a 6 column layout). Then add the following CSS classes into the Row’s Advanced Settings:

ten-columns
nine-columns
eight-columns
seven-columns
six-columns
five-columns

 

Sticky button/element

Credit to DiviSoup

 

Allows you to add a sticky element to the bottom right (or anywhere if you amend) of the screen. Really useful for contact details, lead magnets or offers.

Simply add “sticky-button” to the “CSS ID” section of the element’s advanced settings. To make this work you’ll probably need to find “#sticky-button” in the style.css file and amend the width and height lines. If you want to change the element’s position on screen you can amend the right and bottom lines.

 

Footer features

 

Footer

 

We’ve edited the footer so that we can remove the horrible one that comes as standard. The year will update dynamically and the “Created by [you]” can be edited to include your name and URL. Simply find the footer.php file and find “<a target=”_blank” title=”” href=”#”>Your name</a>”. Replace the “#” with your URL and obviously “Your name” with… your name.

 

The Extra stuff

 

Show any Divi Library item as a shortcode

Credit to Creaweb2b

 

Probably one of the most useful features we’ve integrated with this child theme. It allows you to take any section, element or row that you’ve created in the Divi Library (WordPress menu: Divi > Library) and add it anywhere on your website using a shortcode. This means you can do things that Divi doesn’t normally accommodate, like add a map module within an accordion or add blurb modules to your WordPress sidebars. Most excitingly (we think) is the possibility of adding specialty sections to your 1-column footer instead of the default 1-4 column layout.

To accomplish any of the above, first create your section or element within the Divi Library and save it. Navigate back to your Divi Library (where you can see a list of all of your saved Divi library elements). Hover over the element that you’d like to turn into a shortcode and at the bottom left of your screen you’ll see a link pop up (use the Google Chrome browser to definitely be able to see this). Within the link you’ll see a series of numbers (for example: /post.php?post=4547&action…).

Replace the “#” below with this number and paste the shortcode any where that you’d like it to appear!

 

[showmodule id="#"]

In this example you’d copy and paste:

 

[showmodule id="4547"]

Final thoughts

 

A big shout out and thank you to all of the sources listed above for providing these snippets and the relevant details to implement these additional features! We recommend you check out their various blogs and tutorials if you are interested in learning more.

As always, we are here if you have any trouble with the functionality within this Divi Child Theme. Get in touch with us! If you’re finding it difficult to DIY your website you might find it useful to view our services or book a no obligation phone meeting with us by clicking here.