by Craig Longmuir | Oct 20, 2019 | Divi Code Snippets, Divi Theme Builder |
The release of Divi version 4.0 allows you to create your own custom header using the Divi Theme Builder and Divi modules without the need for editing theme files or using a 3rd party header plugin. There are no built-in options to make your custom header template... 
by Craig Longmuir | Feb 16, 2019 | Divi Code Snippets, Divi Tutorials, Divi video tutorials |
The 1st Divi accordion module item is set to be open by default and there is no option to set it to be closed. If you would like all your accordion items to be closed by default there is a simple trick that makes the 1st (open) item of your accordion invisible. This... 
by Craig Longmuir | Aug 19, 2018 | Divi Code Snippets |
By making one of your Divi menu items appear as a button it will really stand out on your navigation menu and increase your Click-Through-Rate, so if that’s something you want, use this css trick to drive people to the page you really want them to visit. If you... 
by Craig Longmuir | Aug 16, 2018 | Divi Code Snippets, Divi Tutorials |
The blurb module is one of the most popular of all 46 Divi modules and this little bit of customization will allow you to increase your click-through rates to the content you are highlighting by adding an animated button when the user hovers over your module.All that... 
by Craig Longmuir | Jul 10, 2018 | Divi Code Snippets
Team member and staff page are win-win Seeing as I work alone on Divi Theme Examples, a team member page would look a bit rubbish, but if you have a talented team of staff in your business and want your customers to get to now them a bit better, then a team member... 
by Craig Longmuir | Dec 17, 2017 | Divi Code Snippets |
Divi Theme Fitness examples We are about to hit the excesses of the festive season which means way too much food & alcohol and way to little exercise. Good times ahead, but, once the New Years Eve hangover has subsided, it will be time to start thinking about the... 
by Craig Longmuir | Nov 20, 2017 | Divi Code Snippets |
17 of the best examples of contact pages built with Divi The contact page is an important, yet often overlooked, page in any website so it really pays off to spend the extra time creating a great looking, informative, functional and easy to use page. If a user has... 
by Craig Longmuir | Oct 17, 2017 | Divi Code Snippets, Divi Tutorials |
Use text links or buttons to control Divi sliders By default, the slides in the Divi slider module can be controlled using the left and right navigation arrows or the circle buttons/slide indicators at the bottom of the slider. These can be toggled on or off in the... 
by Craig Longmuir | Sep 11, 2017 | Divi Code Snippets |
Examples of Divi Websites with black or dark designs Black websites can look kind of tacky, kind of dated, kind of hard to look at… but when designed well they can also look really cool and set just the right mood for your niche. Getting it right with a black... 
by Craig Longmuir | Sep 9, 2017 | Divi Code Snippets, Divi Tutorials |
Divi has an infamous jumping header that shifts up slightly as the page is loading. In this quick step-by-step tutorial, I will show you how to fix the jumping header issue in Divi with a few lines of CSS. What is the Divi jumping header? When a Divi web page is... 
by Craig Longmuir | Jul 17, 2017 | Divi Code Snippets, Divi Tutorials |
Divi Scroll to next section This quick tutorial will show you how to set up a scroll to section effect using the Divi dot navigation and some Javascript code from Christian Behrends added into a code module in the Divi builder. SCROLL YOUR MOUSE ! STEP 1 – Use... 
by Craig Longmuir | Aug 15, 2016 | Divi Code Snippets |
Divi demo sites created by Elegant Themes The talented team behind Elegant Themes* not only creates the leading WordPress Theme available today, but they can also use it to create some stunning Divi demo sites. Take a look at the following sites and get inspired to... 
by Craig Longmuir | Jun 19, 2016 | Divi Code Snippets |
Add extra columns into your Divi mega menu with some custom CSS. I was revamping the layout of my Divi layouts Demo Zone install and decided to make use of the built-in Divi mega menu feature to help organize the many demo pages. As a default, the Divi mega menu when... 
by Craig Longmuir | Feb 5, 2016 | Divi Code Snippets |
Timeline for Divi using CSS After reading the latest blog post at Elegant Themes, titled, 9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds*, i was a bit disappointed to see that No. 6, Add Connected Bullet Lists, wasn’t working for me after pasting... 
by Craig Longmuir | Nov 6, 2015 | Divi Code Snippets |
When you add any of the optional elements into your Divi secondary header navigation they will appear left aligned as shown in the 1st navigation menu below. If you want to move the secondary menu telephone, email and social icons to the center of your navigation as... 
by Craig Longmuir | Oct 22, 2015 | Divi Code Snippets |
The Divi slider module allows you to add content sliders to your Divi website. The module allows you to add text, images, and videos to your slides that can be controlled via left & right navigation arrows or dot navigation. As with all Divi mdules, there are... 
by Craig Longmuir | Oct 5, 2015 | Divi Code Snippets |
Customizing and animating the Divi toggle icon takes just a few lines of custom CSS in your ePanel or Divi Child Theme and you will get a really cool effect as you may have seen in some sites, such as Brewlife. This example changes the colour of the icon when it is... 
by Craig Longmuir | Sep 2, 2015 | Divi Code Snippets |
By default, the Number Counter module in Divi has the option to either display a number with a percent sign or just the number on its own. There is no option to change the % sign to anything else within the module settings. We can swap the % sign for a $ sign by... 
by Craig Longmuir | Aug 11, 2015 | Divi Code Snippets |
When you add any of the optional elements into your secondary header navigation they will appear left aligned as in the top image below. If you want to move the secondary menu social icons to the right in your navigation as in the lower image below, you can use a few... 
by Craig Longmuir | Aug 11, 2015 | Divi Code Snippets |
Divi has a navigation menu style for desktop and a different one for the smaller tablet and mobile devices. When your website screen size is reduced, a mobile breakpoint is activated which causes the navigation menu to change to the mobile-style. The mobile menu comes... 
by Craig Longmuir | Jun 5, 2015 | Divi Code Snippets |
The main navigation menu in Divi will add a down arrow icon to any parent navigation items that have sub-menu links within, to let your users know that there are more menu links available. The image below shows the default sub-menu drop-down icon on the left as a blue... 
by Craig Longmuir | Apr 23, 2015 | Divi Code Snippets |
The Divi Blurb module is a pre-designed element for Divi that includes a text title, content area and option to use either an image or icon. When the option to “Use Icon” is selected you will be able to choose from 380 icons that are included within Divi.... 
by Craig Longmuir | Mar 13, 2015 | Divi Code Snippets |
The Divi Countdown Timer module is a visual timer that counts down to a date you set in the module. By default, the countdown will add days, hours, minutes and seconds to the output of the module. There is no option within the module to hide the days, hours, minutes... 
by Craig Longmuir | Feb 22, 2015 | Divi Code Snippets |
With the latest release of Divi, there was an option added to your blog module called Offset number, which basically allows you to set a number of posts that that blog module skips/doesn’t show. This means that you can style and set a number of posts to show in... 
by Craig Longmuir | Jan 20, 2015 | Divi Code Snippets |
When you add a Full-Width Slider module in Divi and add a Slide image, that image is not displayed on mobile devices by default. There is an option to in the module settings to enable the image or video in the module settings along with 2 other switches to control... 
by Craig Longmuir | Jan 16, 2015 | Divi Code Snippets |
The Divi contact form module comes with a CAPTCHA that is enabled by default when you add a contact form module to your page. CAPTCHA is an acronym for “completely automated public Turing test to tell computers and humans apart” and is a challenge-response... by Craig Longmuir | Nov 21, 2014 | Divi Code Snippets, Divi Tutorials |
The ideal size for the default gallery images is 400x284px or larger, but if you use larger images you should use the same aspect ratio. The aspect ratio by default would be 400px width by 284px height which would give 100:71. So an image 1000px wide should be 710... 
