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 containi