Below are useful snippets, tips & tricks and other Divi related matters.

These tips are in no particular order. They are gathered as a result of experience with creating better looking and performing websites and used as a memo facility for ourselves but also made available for others to benefit from. These tips will be added to fairly frequently, so keep looking – there maybe something that helps you.

How to: Open a different image in a Lightbox by clicking an image in Divi

An example of this particular scenario can be seen on the Home page. If you click the ‘Padlock’ image, another image will open. To achieve this, a ‘Code’ module has been used. Paste the code below into the Code Module

Change the path/file name of both the image to be displayed on the page AND the image to open in the lightbox. Adjust the width of the image to be displayed on the page. You can add a ‘title’ to the code between the inverted commas (title=””) if you wish and this will be displayed on hovering over the image and in the lightbox as a caption.

 

How to: Open Toggle from text link

The Toggle Modules can be opened directly by clicking a link on a page or even in the Dashboard. This is achieved by adding a CSS ID to each module e.g. lightbox-link and then adding that to the text link URL e.g. ……..iconnik/tips-tricks/#lightbox-link 

Tips & Tricks

Note: CSS ID tags (anchor tags) are added to Sections, Rows and Modules in the Advanced section and the name given to the CSS ID must be unique, without any spaces and without the # in the Section, Row or Module. The # is only added to the text link URL. An example of an anchor tag taking you to a section on another page in a new tab can be seen by clicking Testimonials

For this to work, it is necessary to add the following code to Divi | Integration, in the body section:

 
An example of this could be that you want to create a help page or FAQ somewhere on your site and link text to a toggle module on a different page. e.g. you could create a panel on the dashboard using a plugin such as White Label CMS and create a series of ‘How To’ links to assist editors (a little HTML knowledge is required to create the text, links, bullets etc in a Dashboard Panel in WL CMS). By clicking the link, the user will be sent to the appropriate page, the individual toggle will be opened and then the page will scroll down so the opened toggle is aligned with the top of the page.
 
If the scroll to an anchor tag on another page is inaccurate in Divi (not aligning to top of page), see our tip to fix this ……iconnik/tips-tricks/#idtag which is another example of this ‘Open Toggle from Text Link’.
 
How to: Change Toggle icon shape and colour

To change the Divi Toggle Module icon shape and to change the icon colour when the Toggle is open and closed, apply the following CSS to your child style.css

The above changes the icon to a down pointing green arrow when the toggle is closed and an up pointing red arrow when open.

You can use any unicode sybol in the “content:” in the above CSS – here’s a decent selection displayed in categories. http://xahlee.info/comp/unicode_index.html  To use unicode in CSS, just replace the unicode notation part  “U+” with a backslash, so “U+25bc” becomes “\25bc”

 

How to: Place floating 'Follow' Social Links on Divi

At the time of writing the Monarch plugin from Elegant Themes doesn’t allow you to add Social Follow icons to a floating sidebar (the floating sidebar is limited to Sharing icons). In some cases, a site maybe pretty static but does have social links. For example a client may not wish to maintain a blog so there is little content to share from the website but he/she does maintain a Facebook page. In these cases it makes sense to  make the ‘Social Follow’ links more prominant by adding them to appear on the left side of the screen as a  floating sidebar. An example of this can be seen at Hay4U.co.uk. This can be achieved by using the below CSS in which you can also adjust the size, font and the vertical icon position:

  1. In  a row (new or existing), add the ‘Social Media Follow’ module to one of your module slots. It doesn’t matter whether it’s 1, 1/2, 1/3 or 1/4 or whether it’s first or last.
  2. Within the new module, set your social media links and colors.
  3. Put the following code in your Divi child.css stylesheet.

If you want the icons even bigger you should  change every instance of 40px in the above CSS to the same value as well as raise the font-size (trial and error). Make sure the module is set to global and place it on every page that you want it to appear

You may also wish to play around with the spacing in the Visual Builder if this needs adjusting as a result of placing the module in the row

How to: Open Social Media links in new tab

To do this, simply add the following code to Divi | Integration in the ‘Add code to the < head > of your blog’ section:

 

How to: Create a Left Diagonal at the top of section

Update: in Divi version 3.0.101 ( updated 8th Feb 2018 ) ET added the new Shape Divider options to sections which negates the need to use the method/CSS below. See the release info on the ET Blog

The ‘Left Diagonal’ is demonstrated on this site at the top of the ‘Contact Us’ section. To achieve this effect, in the relevant section add a CSS Class in the advanced tab of the section e.g. left-diagonal

In the child theme style.css, add the following code:

 

How to: Enlarges module and add a box shadow on hover

This hover effect will enlarge a module and give it a box shadow when you mouse over it. See an example on the home page, Testimonials

  1. Apply a CSS Class to the module (advanced tab) e.g. nm-module-hover
  2. Copy the code below to the child-theme style.css
  3. Change the enlargement (transform:) and box-shadow effects as required

How to: Automatically tick 'Remember Me' on Login

To automatically tick the ‘Remember Me’ tick box on the login screen, add the following code to functions.php in your child theme

 

How to: Fix - style.css not updating in chrome
 

In chrome, sometimes changes to the child theme style.css do not update in the browser. An example on this website was where some text was added to the contact form via the child style.css file and then at a later date, the text was removed from style.css yet on the mobile platform, the text still appeared even though it didn’t on the desktop . This is because the css is cached in the browser itself, so even though the cache and minified css has been deleted on the server via the caching plugin (WPFC in this case), it still persists in the mobile browser even after clearing the browser cache on Android.

To fix this, go into the child.css file (Appearance | Editor | style.css) and in the top section, change the version number e.g from 1.0.1 to 1.0.2  

Tips & Tricks

Chrome then recognises that the style.css has changed and reloads it.

Voila, changes are now reflected in the browser.

 

How to: Fix - Link to CSS ID tag from another page is inaccurate in Divi

Sometimes when using the CSS ID of a section (anchor tag) to link directly to it from another page, the page’s final scroll position can be inaccurate. To fix this, go to Divi | Theme Options | Navigation, select the ‘General Settings’ tab and enable the ‘Alternative scroll-to-anchor method’. This fixes the accuracy issue and the ID tag is scrolled to from the top of the page as opposed to going direct to the ID tag section.

Tips & Tricks

 

How to: Divi Mobile Menu improvements

The default Divi Mobile menu can have the colour of text and background changed and whether to show the logo or not within the Divi Theme customizer under Mobile Styles | Mobile Menu.  But to make your mobile menu more unique, you can also apply the following CSS:

 

Remove ‘Select Page’ and raise Hamburger

The default mobile menu shows ‘Select Page’ to the left of the hamburger menu icon with the logo above this (if the ‘Show Logo’ is selected in the Divi Theme customizer under Mobile Styles | Mobile Menu).  This, in my view,  takes to much space and the ‘Select Page’ is unnecessary as users know that the ‘hamburger’ icon is the mobile menu. So to reduce space and make it look more attractive, we need to remove the ‘Select Page’ and place the hamburger next to the logo. To do this add the following CSS to your child style.css file

Change Opened Hamburger to another symbol

If you wish, you can change the opened drop-down mobile menu hamburger to another unicode symbol e.g. a cross. Below is the CSS to do this and to change the colour / font weight of the icon when the drop-down menu is open

You can use any unicode sybol in the “content:” in the above CSS – here’s a decent selection displayed in categories. http://xahlee.info/comp/unicode_index.html  To use unicode in CSS, just replace the unicode notation part  “U+” with a backslash, so “U+4d” becomes “\4d”

 

Change mobile dropdown top border

Divi seems to place a border at the top of the drop-down menu. To change the width, type and colour, apply the following CSS

 

Make mobile dropdown menu full width

And finally you can make the mobile drop-down menu full width if you wish with this CSS

 

How to: Use an SVG Pattern as a background

There are many ways to fill the background in Divi including using solid colors, gradients, images or videos. but if you want to use a repeating pattern of some kind, one way to do so is to use an SVG pattern. SVG images are typically smaller than bitmap images and remain sharp on high resolution screens. An example can be seen on this Tips & Tricks page and also on the Home page as the background to the Testimonials.

An excellent source of SVG paterns can be found at Hero Patterns. Here, over 90 patterns are available free and the foreground colour, background colour and opacity can be changed to suit your requirements. Go to the website and select a pattern you like and click on it. A pop-up appears in which you can change the foreground/background colours and opacity. Once you are happy with your design, click in the box at the top containing the code and copy all of the code.

Lets suppose you want to apply this pattern to a Divi section background. First make sure no other backgrounds are selected in the section. e.g. if you were previously using a gradient background, hover over the gradient preview in the Section | Content | Background Color | Gradient tab on Divi Builder and click the bin icon to delete it. Now in the Section settings, select Advanced | Main Element and into the box paste the CSS you previously copied from Hero Patterns. Congratulations, you now have a pattern, but if you preview it you will see that the shapes are huge because it is stretching a relatively small image to fill the screen. To overcome this, we need to add a little more CSS above that which you previously pasted into the Main Element box. The code to add is:

Now the pattern will look the same as that which you originally designed on the Hero Pattern’s website as you will see in the preview. If you are happy go ahead and update the page, or if not and want to revert to your original background, simply exit the page without saving

How to: Paste snippets or code into a blog or page

There are many plugins and different online apps that will assist with this, but the method we use, on the basis of simplicity and reliability, is to use Pastebin to generate the highlighted syntax and then to embed the iFrame linked to Pastebin to show it on the page.

  1. Go to Pastebin and register a FREE account
  2. Hit the ‘New Paste’ button at the top of the page
  3. Paste into the box the code you want to display on your page
  4. Select the type of Syntax Highlighting required e.g. CSS, HTML, PHP
  5. Select the expiry (default is never) and leave exposure as ‘Public’
  6. Hit the ‘Create New Paste’ button
  7. On the next screen, select ‘Embed’. This will give you two embed codes – Javascript & iFrame
  8. Copy the code from the iframe embedding section
  9. Go to your page/blog and in the module in which you want to show the code, select ‘text’ as opposed to ‘visual’ editor
  10. Paste the iframe code from Pastebin wherever you desire the iframe to be displayed
  11. If you hit the preview button, you may get a warning (chrome especially). Dont worry, save the module, update and then view the page
  12. Voila, the iframe is showing in its default settings as below:

You can tweak the appearance somewhat if you wish. We center the iframe, add a box shadow, limit the width and set the height.

 

In practice, we use the same line of iframe code and then simply change the URL to Pastebin. See our standard line above and this produces the iframe shown above. This results in a standardized appearance, albeit the height may need to be adjusted depending on the length of the code to be displayed.

If we adjust the height to 100px, the iframe changes to that shown below:

You can play around with the inline CSS to suit your own requirements. For example you could change the width to 50% and the iframe would wrap the code displayed, as shown below:

To see and obtain the box shadow CSS (change offset, blur, transparency, color etc), you can use a box-shadow generator such as www.cssmatic.com. To remove the center alignment, simply change the <p align=“center”> to <p> and the iframe will be left aligned.

 

 

How to: Change ‘Read More’ text on the Blog Module to an Animated Button

This creates a button with ‘Continue Reading’ (or any other text) that is placed below each post excerpt in the blog module on the right (or can be left).

The button expands to the left on hover which allows it sufficient space to display the unicode icon to the right. See below:

Tips & Tricks

Create Button text and hover icon

  • Go to Divi | Theme Options and select the ‘Integration’ tab. In the ‘body’ section, copy this code:

Change the ‘Continue Reading’ text & symbol in line 5 starting:
var newVal = ‘Continue Reading…..
to whatever you want. The &#x39 is Unicode for the symbol and the span style changes the color, size, weight and position of the symbol. You can see a complete set and Unicode reference codes available here: Divy Icon Font

Now to create the button in CSS.

  • In your child theme, go to Appearance | Editor to access style.css
  • Copy the code below to the stylesheet

  • Depending on the text wording, font, size etc used in the first part above, you almost certainly will need to edit the ‘width’ value for both the normal button and on hover. This is trial and error till it looks good. Tip: Use “Inspect” in your browser, find the icon and look at the CSS for both Active and Hover – you can play around with the ‘Width’ settings in both states to find the best values, then apply them to your CSS.
  • You can change colors, margins and other properties to suit your needs
  • You can float right (button on right side) or left by changing to ‘float: left’

Note: You may need to ‘Clear’ the ‘Static CSS File Generation’ in Divi | Theme Options | Builder and clear your Cache and Minified CSS/JS if you have an active caching plugin installed for the above to functionality to work.

Problem:

This looks great on the first page of your blog, but when clicking on ‘Older Entries’, the ‘Continue Reading’ text (or whatever text you have used above) reverts to ‘Read More’ in the button and without any icon.This is an issue caused since Divi 3.0.72 when AJAX pagination was used. This can be fixed – see out separate Tips & Tricks entry ‘How to: Fix Blog Module pagination issues‘ below.

Grid Layout amendments:

The above works very well on a Fullwidth blog layout, but if you intend to use a grid layout then a few additions are required.

Firstly the grids will alter in size particularly if you have a small amount of text. So to look tidier on desktops where the grids appears side by side we need to equalize the height of each grid box. We do not change the mobile display with this CSS since on mobiles the grid is stacked vertically, so there is no need to .To fix the height of the grid boxes, add the following CSS to your child theme:

The reference in the above CSS to ‘position: relative’ is required to position the button in the CSS below

Secondly, the position of the button created above is relative to the bottom of the excerpt text, so looks messy. We need to make the button appear in the same position in the grid. To do this, add the following CSS. This effects Desktop only since we are not altering the position of the button on mobile. 

Play around with height and the bottom & right values to position the button to meet your needs. You could also replace ‘right:10px;’ with ‘left:10px;’ if you require the button to be placed on the left.

Grid layout box shadow & increase size of grid boxes on hover

The grid layout on our blog on desktop also has shadows around the grid boxes and increases the box size on hover, creating the effect of popping up off the page as you hover over any grid box. To achieve this effect, replace the CSS in the section above under ‘Firstly’ with this:

Play around with the transition, transform and RGBA values to create the effect you want.

 

How to: Fix Blog Module pagination issues

in Divi 3.0.72, AJAX pagination was introduced which caused a problem with the text in the button described in Tips & Tricks ‘How to: Change ‘Read More’ text on the Blog Module to an Animated Button’ to revert to ‘Read More’ on any page other than the main blog page i.e. on page 2, 3 etc. Furthermore, this also caused a related issue of page numbers not being displayed in the URL. This problem can be fixed by switching off AJAX in the blog module. However, there is no facility to do this in the existing blog module, so we need to create a custom blog module that provides this functionality.

Custom Blog Module

Eduard Ungureanu from ET has created a ‘Custom blog Module’ that adds the functionality of switching off AJAX pagination to the blog module. See Eduard’s github for Ajax Pagination.This process requires access to you child theme via FTP. So here goes:

  1. Create a new folder inside your child theme called custom-modules
  2. Inside the new folder create a new PHP file called cbm.php
  3. Put the PHP code below in the cbm.php file
  4. Put the PHP code further below in functions.php

Create a new folder & copy cbm.php to it

Via FTP (Filezilla or whatever application you use), create a new folder in your child theme (wp-content | themes | Divi-child) called ‘custom-modules’

Tips & Tricks

Copy the code below to a text editor e.g. Notepad++ and save the file as cbm.php

Copy the cbm.php file to your new custom-modules folder via FTP

Tips & Tricks

Add code to functions.php

Now in wp-admin, go to Appearance | Editor and select the functions.php file. Add the following code to your functions.php

That it. You will now have a Custom Blog Module available in your child theme and will notice that there is the new option of ‘Use Ajax Pagination’ with a ‘Yes/No’ switch towards the bottom of the Blog Module Settings | Content, just below the original ‘Show Pagination’. Turn the ‘Use Ajax Pagination’ switch to NO. See below:

Tips & Tricks

Many thanks to Eduard Ungureanu for both creating this code and for pointing me towards it via Divi Support. This Ajax Pagination switch should be built into Divi (IMHO)

How to: Style WP-Pagenavi

WP Pagenavi is an established and reputable plugin that turn the standard older entries/next entries into something far more eye-pleasing and useful. The default settings of Pagenavi are pretty good, but if you want to add your own styles to it to match your sites design then Pagenavi lends itself well to this

Below are a list of Pagenavis CSS selectors that you can use in your child style.css file

  • .wp-pagenavi a.page – Targets page numbers specifically
  • .wp-pagenavi a.first – Targets the “first” link specifically (not listed above)
  • .wp-pagenavi a.last – Targets the “last” link specifically
  • .wp-pagenavi span – Targets the current page number along with the extend part (the thing with three dots)
  • .wp-pagenavi span.current – Specifically targets the current page number
  • .wp-pagenavi span.extend – Specifically targets the extend (three dots thing)
  • .wp-pagenavi span.pages – Specifically targets page number display (i.e. Page 1 of 4)
  • .wp-pagenavi a.previouspostslink – Specifically targets the previous link
  • .wp-pagenavi a.nextpostslink – Specifically targets the next link

Example:

So here is what the default Divi page navigation looks like:

Tips & Tricks

And here is what it looks like using Pagenavi and the above CSS:

Tips & Tricks

How to: Prevent span tags being stripped from text editor

When using span tags in the text editor with Tiny MCE Advanced plugin active (may apply to MCE generally), span tags were being stripped when switching from text editor to visual editor. To prevent this, the following code was added to ‘functions.php’

An example of this was in writing the ‘How to: Change ‘Read More’ text on the Blog Module to an Animated Button’ where the ‘span style’ and ‘span data-icon’ tags were used to insert and style an icon between two words (unicode & icon):

<p>The button expands to the left on hover which allows it sufficient space to display the unicode <span style=”color: #933300; font-size: 12pt; font-weight: 500;vertical-align:bottom;”><span data-icon=”&#x39;”></span></span> icon to the right. See below:</p>

Updating from the text editor produced the desired result but as soon as switching to the visual editor (without making any changes at all), the ‘span style’ and ‘span data-icon’ tags were stripped

Please be aware that if copying the above example to use the ‘span style’ and ‘span data-icon’ tags that the inverted commas within the span tags will need to be retyped in your text editor (they do not reproduce properly in the above font)

 

How to: Make Divi Footer Sticky or Fixed

The default behaviour of a footer in Divi is that it is at the bottom of the page and doesn’t show until you scroll to the bottom. However, if you have a very short page (less than the screen height) the footer will show immediately below the content which could be half way up the page. To get around this, you can make the footer  ‘sticky’ on individual pages which will apply the footer to the very bottom of the page even if the content only fills half the page.

Sticky Footer – Individual Pages

Select the page in Divi builder that you want to apply the sticky footer to. Click the page settings hamburger icon

Tips & Tricks

Into the ‘Custom CSS’ field, paste the code below

That it, you now have a sticky footer on the page you apply this CSS to

 

Fixed Footer – All Pages

A fixed footer always displays regardless of how far down the page you are viewing. If you wish to have a Fixed Footer throughout the site on all pages, apply the CSS below to you child theme style.css file

Notes:
1. The fixed footer may cover existing content at the bottom of some pages. To get around this, increase the padding-bottom of the last (bottom) section within Divi builder by at least the same height as your footer.
2. You can avoid the fixed header showing on mobile/tablet which takes up a load of the screen height by using a media query:

@media (min-width: 981px) {

/* Your CSS */
}

How to: Create a masonry search results page

The default search results page is bland, to say the least. The tutorial below will show you how to create  a three grid masonry page with a search results title at the top which shows the search term entered, shadow on the normal state and *an inset shadow on hover. The page will look like this:

Tips & Tricks

Of course the first thing is to create a ‘search module’ on your blog page via the Divi builder and adjust the settings according to your needs, particularly paying attention to the width on Desktop, Tablet and Mobile.

Tips & Tricks

The module allows most settings to be amended to your needs and you can also alter the background colour of the input area by placing the below code in your child style.css:

/* Blog Search Module – Input background colour */
.et_pb_search_0 input.et_pb_s {
background: rgba(0, 255, 8, 0.1);} /* ammend rgba to your own needs */

Tips & Tricks

Masonry layout

To create a three column masonry search page is simply a matter of applying some CSS which was originally provided by Elegant Themes in their Divi 100, day 78 blog. However, this has been tweaked to:

  • Provide a box shadow in the normal state
  • Provide an inset shadow on hover *
  • Fix the height of each ‘Title’ so the content lines up across the page on desktop 
  • Fix the height of each grid so they line up across the page on desktop 
  • Change the title colour, font size & weight, line height and top margin of the title text
  • Hide the footer on mobile and tablet

You can use the original CSS provided by ET from the link above or use the amended CSS below:

* Update: The inset shadow on hover has been commented out of the above CSS as it was causing a flicker.

Note that the above code removes the sidebar. If you want to retain the sidebar, simply delete or comment out the CSS under the /* Remove sidebar on all search results & archive pages */ comment (lines 3 to 26). If you do remove the sidebar, the content of the individual blog seems to fill the space as if the sidebar still exists, even though it doesn’t display. To get the blog content to fill the full width, copy the below CSS to you child style.css. 

The CSS below also includes placing a background colour and a border around you post, removing the sidebar and vertical divider line and removing the meta-data completely. It also changes margins on the post so that on mobile it fills the majority of the screeen width. If any of these are not required, either don’t copy the code or delete from you child style.css if you have copied it all.

You can also add the following Javascript to Divi | Integration | Body to  make sure the pagination links are located in the right place.

Personally, I dont think pagination is necessary on the search result page and you can get around this by changing the number of results shown on the search page to a large number, e.g. 100, in Divi | Theme Options | General.

Tips & Tricks

Congratulations, your search page now is a three column masonry layout. Play around with the CSS to meet your own needs, especially colours and height. Note: the height applies to desktop only because grid layout is stacked on mobile and so it is is unnecessary to equalize height.

Title and Search Term

The code for this was provided by Geno Queroz in his blog ‘Add a Title and Search Term to your Divi Search Results Page‘. You can copy the code and follow the method from his site or use a slightly tweaked version of his code below. However, please note his instructions are not for a 3 column masonry layout and will therefore push down the first column but leave the remaing two in their existing positions, so a tweak to change this bevaviour is required.

The first thing  to do is create a search.php template and add it to your child theme. You will need FTP access to your site to do this. In the main Divi theme (not your child theme) find the index.php file and copy it to your pc (drag it to desktop or wherever you wish). 

Tips & Tricks

Then rename it ‘search.php’ and copy it back to the same folder of your child theme

Tips & Tricks

Now go to your wp-admin | Appearance | Editor and you will see the search.php on the right hand column in your child theme. Open the file. Now this is where it varies from Geno’s instructions. At the end of line 5 (<div id=”content-area” class=”clearfix”>), hit return three times to insert three rows. In Row 6, type <div>. In Row 8 type </div>. It should now look like this:

Tips & Tricks

Copy the code below and paste it into Row 7 between the opening & closing div’s

It should now look like this:

Tips & Tricks

Apart from spanning the width of the page by placing the code in its own Div and above <div id=”left-area”>, the code also adds a colon after ‘Search Results for’ and changes the colour of the search term used to blue. You can change the text content and colour of the search term in line 10 if you wish . The colour of the other text, text weight and position (left, center, right) will be handled in the CSS below (which can be changed to your own needs) so in it’s existing form it will look like this:

Tips & Tricks

Copy the CSS below to your child theme style.css:

Voila. You now have a 3 column masonry search page with shadow on the grids in their normal state, inset shadow on hover, of a fixed size so they line up neatly and with text and a search term at the top.

Tips & Tricks

How to: Increase width of Slider text on mobile

The full width slider module squishes the width of the slide titles on mobile which wastes space on the left and right which consequently causes the text to be vertically elongated (extra lines of text)

This can be avoided by reducing the padding left & right of the Slide Module in the Divi Builder Settings by adding:

.et_pb_slide{
padding: 0px 0px !important;
}

The Divi Builder settings are accessed from the hamburger at the top/right of the builder:

Tips & Tricks

So the end result looks like this:

Tips & Tricks

 

Share This