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 blog image in Lightbox
The default behaviour of an image that is added to a text module (including a blog) is that it does not open in a Lightbox. A Lightbox is a method that displays images in full size (or as large as the screen size allows) and centred while dimming and disabling the rest of the web page until the Lightbox is closed by either clicking the close ‘X‘ or by clicking away from the image. To see the difference, the images in (1) and (2) below opens in a Lightbox, but the image in (3) has not had its settings adjusted and retains the default behaviour. Altering this behaviour is very simple and takes only a few seconds to ‘adjust’. To do this ……
- Add media in normal way to the text module within the blog using the “Add Media’ button, selecting an existing image or uploading a new image
- Click the image within the text module, then the ‘pencil’ icon to open the ‘Image Details’
- In Image Details | Display Settings | Link To, select: ‘Media File’ or ‘Image URL’ (1) (depending whether you are in a text module on a Page or Post) from the drop-down menu.
Note: if you select ‘Image URL’, when it is saved it will change to ‘Custom URL’ and the URL of the selected image will be displayed.
- At the bottom of the ‘Image Details’ box, under ‘Link CSS Class’ (2), enter:
- Update the Image details, Save & Exit the module, Update the page
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
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:
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:
- 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.
- Within the new module, set your social media links and colors.
- 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
- Apply a CSS Class to the module (advanced tab) e.g. nm-module-hover
- Copy the code below to the child-theme style.css
- 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
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.
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