Adding custom image upload sizes in Divi and WordPress

Adding custom image upload sizes in Divi and WordPress

In today’s digital battlefield, creating a visually appealing website is akin to setting up a virtual storefront that is inviting and engaging. Central to this visual appeal are the images that illustrate your content and brand story. However, the...
Divi Machine Classifieds – Part 8: Final Thoughts

Divi Machine Classifieds – Part 8: Final Thoughts

The Grand Finale: Reflecting on the Divi Machine Classifieds Course As we pull back the curtains on our epic Divi Machine Classifieds tutorial series, we’re filled with a sense of pride, joy, and, to be honest, a little disbelief at everything we’ve...
Divi AI is here and we want to talk about it

Divi AI is here and we want to talk about it

Divi AI is here and ready to join your portfolio of AI tools to help enable you to get more done ♫ Harder Better Faster Stronger ♫ …do it. Ok, I’m done…for now. But in all seriousness, AI is busy transforming the way all of us work and those of us...
Mastering the Art of Formatting ChatGPT’s Responses

Mastering the Art of Formatting ChatGPT’s Responses

Teach Chat GPT some manners… Spending all this time on teaching ChatGPT just who we need them to need not end there, we can have ChatGPT conform to various types of output to make us look smarter. Think of it as giving ChatGPT a fancy accent when the words fall...
Crafting an AI Persona for ChatGPT to get better responses

Crafting an AI Persona for ChatGPT to get better responses

🤖 ChatGPT: Who am I? 👨‍💻 You: Well, who do we want to be, ChatGPT? Turns out, we humans aren’t the only ones prone to suffering from an identity crisis, our AI overlords can be susceptible to this human trait also. What this leads to is that the ChatGPT could...
Divi Theme Builder: Creating a Search Results Page Template

Divi Theme Builder: Creating a Search Results Page Template

Once you were lost, but now you are found… There is no need to dump your visitors on a boring uninspired page when they do the deed of merely searching your site for a relevant blog post or something else. Luckily Divi allows you to dump the bland and go...
How to add a custom animated SVG hamburger icon to Divi

How to add a custom animated SVG hamburger icon to Divi

Custom SVG hamburger icons are… iconic. Yeah, I know, that was terrible. But you know what is not terrible? Custom animated Divi hamburger icons in an SVG bun! Previously we nailed creating an SVG logo from scratch in Illustrator and you can use the skills...
How to add a Ken Burns effect in Divi (without a plugin)

How to add a Ken Burns effect in Divi (without a plugin)

The name is Burns, Ken Burns. Besides being an awesome name and no relation to Mr. Burns of Simpsons fame, Ken Burns is also an effect that looks spicy when used on background images in Divi. Say buh-bye to silly static background or overused parallax images, and say...
How to create and use SVG images in Divi (2 methods)

How to create and use SVG images in Divi (2 methods)

Pixel perfect images in Divi at any scale You’ve done it. I’ve done it. You are working on a project and you are using your googler skills to track down some images for said project. Like parting clouds to break the storm, you find the perfect image but...
How to optimize images for a Divi website

How to optimize images for a Divi website

How to accurately optimize Divi images? Divi’s visual builder that makes it extremely easy to add images to a website. However, these images need to be optimized to the right dimensions so that they can work well with the design In this article, we will teach you how...
2 Things you should change on every Divi site you build

2 Things you should change on every Divi site you build

Default is boring 💤… Let’s face it, the Divi default color palette and fonts resemble the pack of crayons you are given as a kindergartner. Not just that, it is a huge time waster to go and manually set font or get your non-elastic gray matter to recall...
How to Rollback to a previous Divi version

How to Rollback to a previous Divi version

Switch back to the previous version of Divi with a single click If you ever update Divi and experience a problem or a conflict with your website setup, you can now easily restore the previous version of Divi with a single click. Follow along as we show you how to roll...
How to vertically align text & images in Divi

How to vertically align text & images in Divi

Vertically align text and images in Divi using custom CSS Text and image content looks stylish when vertically aligned. The problem is that Divi does not make vertical alignment very easy – so we must use some custom CSS. Follow us in this Divi tutorial as we...
How to add CSS to the Divi Theme?

How to add CSS to the Divi Theme?

Style your Divi website with custom CSS One of the reasons why we love the Divi theme is because it contains numerous ways of adding CSS to your website. Follow along as we show you seven ways of adding CSS to your Divi website to spice it up! Note that if you are not...
How to un-Divify your Divi Sites Tutorial Series

How to un-Divify your Divi Sites Tutorial Series

Making Divi feel more Bespoke There is no denying that Divi defaults have a very distinct look and feel. We are not saying it looks bad, but due to the massive popularity of Divi, you can spot a Divi site by looking out for a few key things like the buttons, mobile...
How to Get Started with Advanced Custom Fields (ACF) in Divi

How to Get Started with Advanced Custom Fields (ACF) in Divi

Divi Custom Post Types, but with BLING Advanced Custom Fields go together with Divi Customer Post Types like macaroni and cheese baby! It is just SO much better with it and you should never again build a site with Custom Post Types that does not include this enhancing...
How to Add a Custom Post Type to Divi without a Plugin

How to Add a Custom Post Type to Divi without a Plugin

A Recipe for Success Let’s think of Divi Custom Post Types as a defining factor in building Divi Websites that are truly bespoke. Yeah, wow, I went for the jugular there, but it is not without purpose. I used to shun Custom Post Types myself, but once you see...
Hand-Coded Design to Divi Layout: Part 1 – The Hero Section

Hand-Coded Design to Divi Layout: Part 1 – The Hero Section

Time to Stress Test Divi. So while browsing /r/WebDev on Reddit a post caught my eye and it got me thinking. It was this awesome hero section for a burger joint with a fullscreen hamburger menu on desktop where the background of that menu was filled with big bold text...
Changing Content as you Scroll Through Tabs with Divi

Changing Content as you Scroll Through Tabs with Divi

Want a section to change content while standing still on scroll? Not sure what we are talking about – or maybe you do – whatever the case, scroll down to see what we are talking about. CreateImpressNo PluginPossibleTry it Can you believe this is done all...
How to Add a Call to Action (CTA) Button to the Divi Menu

How to Add a Call to Action (CTA) Button to the Divi Menu

Learning how to add a CTA (or Call To Action) button to the Divi menu is a great way to catch a visitor’s attention and drive them to well…answer your call to action. This might be to request a quote, get in touch, or check out your collection of pet...
How to Reverse Loop Layout Columns in Divi Machine

How to Reverse Loop Layout Columns in Divi Machine

UPDATED: April 22nd, 2022 Today we have a quick Code Snippet for you that will allow you to Reverse Loop Layout Columns in Divi Machine. This is another Code Snippet that was inspired by a request that we received from one of our awesome customers, maybe it was you 😉...
Add Two Divi Button Modules Inline Next to Each Other

Add Two Divi Button Modules Inline Next to Each Other

If you’ve ever wanted to place Two Divi Button Modules Inline nice and snug next to each other but were left scratching your head as to how to get that done, you certainly are not alone! It is one of those things that we scratch our heads and think...
How to Show the Title on Hover with the Divi Portfolio Module

How to Show the Title on Hover with the Divi Portfolio Module

Last week we showed you How to Add a Filtered Portfolio Triggered by any Divi Module and today we will take that a step further by showing you How to Show the Title on Hover with the Divi Portfolio Module. This neat little trick is a great way to add some additional...
How to Capitalize a Character when Hovered in Divi

How to Capitalize a Character when Hovered in Divi

So we noticed a pretty interesting request on the Divi Web Designers group on Facebook and thought we’d answer in style with another tutorial. If you are not a member yet, check it out, it is a community of over 23 thousand Divi warriors just like you! Oh yes,...
The Divi Speed Update Review & Safe Update Guide

The Divi Speed Update Review & Safe Update Guide

It has finally happened folks! The Divi developers have finally released its much-anticipated Divi Speed Update for the Divi Theme and we couldn’t be more excited for this positive change. So much so, that we are going to briefly touch on each of the...
How to Fix the WordPress White Screen of Death

How to Fix the WordPress White Screen of Death

You know the feeling, it’s a Saturday morning and you’re just about to start your day. You head over to make that quick change on your website but all you see is an ugly white screen with no additional information. What do I do now? This awful pain known...
How To Change Your Divi Website’s Domain Name

How To Change Your Divi Website’s Domain Name

People often say the only constant in life is change, and sometimes you might need to change the domain name of your Divi site as it evolves or grows. This can be pretty intimidating because what if it all goes south and now your community or customers have an ugly...
7 Things to Try When the Divi Builder is Not Loading

7 Things to Try When the Divi Builder is Not Loading

The Divi Builder is a component in the Divi Theme few of us can live without, but what do you do When the Divi Builder is Not Loading or experiencing some other issue preventing you from creating some internet magic? Most of us have been there when working a client...
Adding Custom Breakpoints to Divi

Adding Custom Breakpoints to Divi

It is no secret that the talented devs over at Elegant Themes have put a lot of thought and effort into making Divi the premier tool for creating responsive websites that look fantastic across all devices. You can easily with a few clicks of mouse apply settings and...
How to Add Brands to your Divi WooCommerce Store (3 Methods)

How to Add Brands to your Divi WooCommerce Store (3 Methods)

Brands are super powerful because of the familiarity they bring, so learning how to add brands to your Divi WooCommerce store can be a great way to help build some trust with that brand recognition. Why wouldn’t we, we have poured all the effort and time into...
How to Password Protect a Page in WordPress and Divi

How to Password Protect a Page in WordPress and Divi

When building websites with WordPress and Divi, there might be times you want to Password Protect a Page in WordPress for various reasons. Luckily, WordPress has this ability built right into it, so we can Password Protect any Page in WordPress super easily without...
How to slide anything in Divi using Slick.js slider

How to slide anything in Divi using Slick.js slider

COMPLEXITY Intermediate TIME 10 Minutes ASSUMPTIONS Basic knowledge on Divi. Divi is already installed and configured Comfortable with FTP-ing into your site and uploading files A Child Theme is Installed and Active   VERSIONS Divi 4.9.4 In this tutorial, we will...

How to Create a Divi Mega Menu for your Divi WordPress site

Mega Menus on Divi WordPress sites are a big trend in modern web design and you’ve definitely seen them when shopping online without even realizing it. Online stores lite like Amazon and Starbucks heavily implement it to help users like us navigate through what could...

How to easily setup a Local Development Environment for Divi

UPDATE (June 29th 2021): As of version 6.0 of Local by Flywheel they have made the PRO features FREE to anybody using the software, we think that is pretty awesome! More on that here. One of the best tools you can use to be more efficient as a Divi designer is to set...

How to Create a Custom Divi WooCommerce Checkout Page

One of the most critical steps in any eCommerce transaction is creating as little friction as possible during the checkout process. Creating a custom Divi WooCommerce Checkout Page doesn’t just fortify your credibility with your visitors, it helps convert those...

Downloading and Importing WooCommerce Sample Data

COMPLEXITY Easy TIME 5 Minutes ASSUMPTIONS Basic knowledge of WordPress and WooCommerce. WooCommerce is already installed and configured.   VERSIONS Divi 4.9.2 WooCommerce 5.1.0 WordPress 5.7 There certainly is no shortage of online tutorials on how to do some...
How to Create a Custom Divi WooCommerce Category Page

How to Create a Custom Divi WooCommerce Category Page

COMPLEXITY Easy TIME 20 Minutes ASSUMPTIONS Basic knowledge on Divi and WooCommerce. Divi and WooCommerce is already installed and configured. You have some products with assigned categories in WooCommerce.   VERSIONS Divi 4.9 WooCommerce 5.0 One of the most...

Change a select option using jQuery in Divi

How to dynamically change a select option in a dropdown using jQuery Here is a nifty trick – if you have a select dropdown but want to have something a bit nicer in appearance and change the value of this drop down dynamically. Not sure what I am talking about?...
Add submitted page to email in Divi contact module

Add submitted page to email in Divi contact module

How to add the page name and url to the confirmation email that gets sent out using the Divi Contact module. Have you ever wanted to know what page the contact module is submitted from? Maybe you have a website with dynamic content such as real estate and you want to...
How to create a floating cart icon with Divi

How to create a floating cart icon with Divi

In this tutorial, we will show you how to create a floating cart icon with Divi and then take it a little further and use Divi BodyCommerce to customise the cart icon and integrate the slide in mini cart. See below a video of what you will create at the end of this 1....
How to make a divi sticky section on scroll

How to make a divi sticky section on scroll

Have you ever wanted a section to be sticky when scrolling to it and be fixed? For years we have been using jQuery to target a specific section and then add a class name. Once this class name has been added to add some custom CSS to make it fixed and set the position....
How to create two simultaneous menus with Divi Mobile

How to create two simultaneous menus with Divi Mobile

Do you want to create a desktop layout where you have two simultaneous divi menus running at the same time? In this tutorial we show you how simple it is to do this with Divi Mobile. We have the Divi centred menu and use Divi Mobile to create a slide-in menu from the...
How to add a Shopify Style Checkout in WooCommerce and Divi

How to add a Shopify Style Checkout in WooCommerce and Divi

We love WooCommerce and Divi and all the amazing things we can do. Both are highly customisable and have a massive helpful community – it just makes sense! One of the main issues with the WooCommerce checkout page. It is clunky, too much information and we think...
How to create a To Do Checklist using jQuery and CSS

How to create a To Do Checklist using jQuery and CSS

Introduction Today we will be doing a tutorial on how to create a to do checklist on your website using HTML, CSS and jQuery. We were asked via email and on Facebook to create a tutorial of how we created our checklist here. So here we go, below is what we are going...

SNIPPET: Change WooCommerce Text

Need to change the text of a string on your WooCommerce shop such as “Billing Details” or “Product” to be something else. Here is a snippet that will help. We have given a few examples so simply replace/remove as you need. Add this text to your...

SNIPPET: Add CSS to admin

Ever wanted to add some CSS to WordPress admin to customise the appearance? Maybe you want to style the admin to look like your agency or if you are like me, love a certain colour and want to see this more often. Simply add this php code to your functions.php file in...
Settings you may have missed in Divi BodyCommerce

Settings you may have missed in Divi BodyCommerce

Here are some cool features you may have missed Divi BodyCommerce has grown so fast and with all the cool features and settings you all have asked for, we thought you may have missed some so wanted a place where we can showcase them off for you. Below is a list of...

How to change your logo on scroll in the Divi theme

Today we are going to show you how a step by step guide on how to change your Divi logo on scroll, when your fixed header kicks in the logo will change to another. This method works on all browsers but requires more manual work. There are many ways to do this, for...
How to have a Better UX For Divi Mobile

How to have a Better UX For Divi Mobile

Summary In summary, this blog post will look at where to position your mobile menu, what to have and how it can work for better UX. As our phones are getting bigger, do we need to adjust our designs? Is the standard burger icon on the top right-hand corner the best...
How to clear my cache on WordPress Divi 2021?

How to clear my cache on WordPress Divi 2021?

Today we start a new series called “How to…?” with Dave from Divi Engine. The first installment is how to clear your cache for your Divi website. Watch the video below and some further reading under that if you require more information. What is...
How to create the new Elegant Theme’s drop down menu

How to create the new Elegant Theme’s drop down menu

Introduction We have had a few requests on how to create a mega menu like the ones on the new Elegant Themes website. It is quite simple really when you are using Divi Mega Menu, so here is a tutorial on how to do it. You can see a live example here This is what we...

Divi BodyCommerce Visual Builder Compatible Modules

We are working on making all our modules compatible with the Visual Builder and the new Divi Builder experience. We want this to be a smooth process with minimal errors, this is why we are doing this in stages. Please see below the modules we have added compatibility...
How to show Divi Mega Menu on desktop only

How to show Divi Mega Menu on desktop only

We have had a few customers wanting to show the Mega Menus on desktop only. By default, Divi Mega Menu shows it on desktop and mobile. This tutorial will show you how to hide it on mobile. Step 1: Create your Divi Mega Menu in the Divi Engine settings as usual. Here...
Woocommerce ajax add to cart tutorial on single/archive pages

Woocommerce ajax add to cart tutorial on single/archive pages

What is AJAX? Ajax is a client-side script that communicates to and from a server/database without the need for the page to reload. Ajax is fun and a great asset to a developer because it allows us to:Update a web page without reloading the pageSend data to the server...
Speed up your Divi website with Content delivery network

Speed up your Divi website with Content delivery network

What are Content delivery networks (CDN) A CDN places cached files of your site in different locations around the world (their data centres) so that the person using your website can get the closest copy and therefore download it faster. By having your files located...
How to make a divi sticky section on scroll

How to optimize css delivery in the Divi Theme

Eliminate render blocking CSS Have you ever heard this term? What is render blocking CSS? Render means to become or visible, so render blocking CSS are CSS files that stop the page from becoming visible or loading. Everyone of your CSS files delay the page from...
How to optimise your images for a Website

How to optimise your images for a Website

Images are one of the biggest factors in speeding up your site. I have come across some lovely looking sites that take ages to load because of the actual size of the images that the browser needs to download. As a rule of thumb, you don’t want them to be larger...
How a Divi theme Website is loaded and displayed

How a Divi theme Website is loaded and displayed

We are going to talk about how a Divi website is loaded, however this the same for any website really. It is important to understand this process in order to know how to speed up your website. How is a website is displayed? A request is made when the URL is entered or...
How to speed up a Divi website?

How to speed up a Divi website?

We love Divi. Having used Divi for around 3 years, creating website for some high profit clients – we have identified the short straws, one being the number of files Divi loads, it feels a bit bloated and the page speed is not fantastic. However there are ways to make...