by Craig Longmuir | Jan 19, 2023 | Divi Code Snippets, Divi Tutorials, Divi video tutorials |
The Divi accordion module displays content in a collapsed vertical list. When an item in the accordion is opened, the previously opened item is closed. By default, the first Divi accordion item is open. If you would like to make your divi accordion module closed by... 
by Craig Longmuir | Dec 11, 2022 | Divi Code Snippets |
Divi has a built-in Blog module to display your blog posts. You can use multiple Blog modules on a page to display your posts with different styles and sizes. You can then use the post offset to ensure that posts are not duplicated between blog modules. What is the... 
by Craig | Oct 11, 2022 | Divi Code Snippets, Divi Tutorials |
Do you want to create a vertical menu on your Divi website? There is no default option to create a vertical menu in Divi but we can use custom CSS code to make the Divi Menu module display its menu items vertically. This would be useful if you want to manage your menu... 
by Craig Longmuir | Sep 30, 2022 | Divi Code Snippets, Divi Tutorials |
Divi comes with a built-in mega menu that has 4 columns by default. If you want to make your mega menu have extra columns you can add some custom CSS to Divi to achieve this. This post will show you how to add custom CSS to change the 4 columns Divi mega menu into a... 
by Craig | Sep 28, 2022 | Divi Code Snippets, Divi Tutorials |
Do you want to add a custom scrollbar for Divi? Customizing the appearance of the browser scrollbar can help your website stand out and highlight your brand colors. In this post, we will show you how you can add a custom-colored scrollbar in Divi by adding a few lines... 
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 | 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 | 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 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 the 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. If you are looking for a way to use anchor links to jump to sections on a Divi page, check out our Divi... 
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 | 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 | 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 will display one navigation menu style for desktops and a different one for tablets 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 reverse happens... 
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 | 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 in the module settings to display the slide image or video on the mobile slider in the module settings along with 2... 
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... 
by Craig Longmuir | Nov 20, 2014 | Divi Code Snippets |
By default, Divi will add bullet points to each of your widget list items in your footer area, As you add widgets into your footer section they will consist of the widget title and the widget contents displayed as a bullet point list. Some Divi footer designs may work... 
by Craig Longmuir | Nov 9, 2014 | Divi Code Snippets |
By default, the sidebar on your blog and post pages have a 1-pixel light grey vertical seperator line dividing the sidebar on the right and your main content on the left. This Divi dividing line looks clean and works well to subtly separate the two areas of content on... 