Tutorials

Divi & WordPress related tutorials to help YOU! My fellow Divi Web Designers.

Divi Tutorials

My collection of Divi tutorials based off of my actual website designs with tips & tricks to help you out in building awesome websites with Divi!

How to Keep the Text on Divi Slider Module Static

How to Keep the Text on Divi Slider Module Static

In this Divi tutorial, I'll show you how to customize the Divi slider module by keeping the text static so that the slides rotate behind fixed text on the Divi slider. By default, the text, content and call to action for every Divi slider will fade in on every slide...

Divi Custom CSS Not Working (Quick Fix!)

Divi Custom CSS Not Working (Quick Fix!)

So you've just wrote some custom CSS in your Child Theme Stylesheet or Custom CSS area in Divi but when you save, it doesn't reflect on the website...😣 Don't worry, this is very common and unless the code is written incorrectly, it's typically a very quick fix! Here's...

How to Apply CSS to Only One Page in Divi

How to Apply CSS to Only One Page in Divi

This quick Divi tutorial will show you how to apply CSS to only one page in Divi! There are numerous reasons you might want to do this and there are quite a few different ways to go about changing elements on only one page in Divi with CSS, but the quickest and...

How to Change the Divi Logo on Scroll

How to Change the Divi Logo on Scroll

In this tutorial, I'll show you How to Change the Divi Logo on Scroll so when you have fixed navigation enabled, a different logo appears in the menu when you scroll down in Divi. You can change the Divi logo on scroll in these simple steps: In the Divi Theme Options...

How to Indent Bullet Lists in Divi

How to Indent Bullet Lists in Divi

In this tutorial, I'll show you how to How to Indent Bullet Lists in Divi and the beauty with this trick is, it'll also work for Indenting Numbered Lists in Divi as well! We're going to go from this: To this: And the best part is, once you have this code in your...

How to Make a Fullwidth Section in Divi

How to Make a Fullwidth Section in Divi

In this tutorial, I'll show you how to How to Create a Fullwidth Section in Divi where the content in the row extends 100% across the screen. By default, all Divi "sections" are actually fullwidth so technically the "row" is what needs to be made fullwidth. So perhaps...

How to Vertically Center Text in Divi

How to Vertically Center Text in Divi

In this tutorial, I'll show you how to How to Vertically Center Text in Divi and more importantly, how to make it automatically center when you click the "Equalize Column Heights" option in Divi. To create a Vertically Center Text in Divi follow these simple 5 steps:...

How to Access your Divi Child Theme Stylesheet through FTP

How to Access your Divi Child Theme Stylesheet through FTP

In this tutorial, I'm going to explain how you can access and connect directly to your Divi Child Theme Stylesheet through FTP. This is part 5 of my beginner tutorial series where I'm answering the top 5 questions for YOU who are just getting started with Wordpress....

Where to Put Your Custom CSS in Divi

Where to Put Your Custom CSS in Divi

In this tutorial, I'm going to show you Where to Put Your Custom CSS in Divi. This is part 4 of my beginner tutorial series where I'm answering the top 5 questions for YOU who are just getting started with Wordpress. This is important because when you're starting out,...

Divi Child Theme Explained + FREE CHILD THEME

Divi Child Theme Explained + FREE CHILD THEME

In this beginners tutorial, I'm going to explain what a Divi Child Theme is. This is part 3 of my beginner tutorial series where I'm answering the top 5 questions for YOU who are just getting started with Wordpress. This basic 101 explanation will walk you through...

How to Create a Divi Mobile Menu Collapse Effect

How to Create a Divi Mobile Menu Collapse Effect

In this tutorial I'll show you How to Create a Mobile Menu Collapse Effect in Divi. It's a great way to customize the Divi mobile menu on your site and is VERY important for UX (user experience) when you have a lot of menu items. There are a lot of tutorials out there...

How to Remove Divi Menu Drop Shadow

How to Remove Divi Menu Drop Shadow

In this tutorial, I'll show you How to Remove the Divi Menu Drop Shadow. Out of the box, the Divi menu has a little line below the menu and expands to a full drop shadow when you scroll down (if you have fixed navigation set.) It's usually unseen against a dark...

How to Add Icons to Divi Blog Posts by Category

How to Add Icons to Divi Blog Posts by Category

In this tutorial, I'll show you How to Add Icons to Divi Blog Posts by Category. It's a super cool way to add some life to blog posts that would otherwise look very boring. Especially when you have posts without a featured image. By the end of this tutorial, you'll...

How to Create a Transparent Divi Primary & Secondary Menu

How to Create a Transparent Divi Primary & Secondary Menu

In this tutorial, I'll show you How to Create a Transparent Divi Primary & Secondary Menu. To take it a step further, I'll show you how to do this for ONLY the homepage. I get this look requested often by clients. I'll also show you how to make sure the...

How to Create a Google Review Link

How to Create a Google Review Link

In this tutorial, I show you How to Create a Google Review Link. We're going to do this in 2 methods by creating a link that opens up all reviews for customers to see and a direct Google Review link that a website user can click to quickly leave a Review. It's a very...

How to Create a Direct Download Button in Divi

How to Create a Direct Download Button in Divi

In this tutorial I show you How to Create a Direct Download Button in Divi. It's a great way to allow website users to click a button, link or any other element in Divi to immediately download a file. I often use this on client sites for customers downloading pdf's or...

How to Create a Divi Popup using Divi Overlays

How to Create a Divi Popup using Divi Overlays

In this tutorial, I show you How to Create a Divi Popup effect using the most popular Divi Popup Builder and Popup Maker Divi Overlays. As shown in the video, this is the popup plugin I use to create an effect where a button, menu item or ANY element in your Divi...

How to Customize a Password Protected Page in WordPress

How to Customize a Password Protected Page in WordPress

In this tutorial I show you How to Customize a Password Protected Page in Wordpress. By default and depending on what theme you're using, the front end of the password protected page usually looks terrible. Luckily, with just a few lines of CSS and some creativity,...

How to Create a Diagonal Shape Background in Top Header of Divi

How to Create a Diagonal Shape Background in Top Header of Divi

In this quick, fun tutorial I show you how to create a Diagonal Background Shape in the Top Header of Divi. It's a very simple, sleek way to add some life to your Divi header by giving your top header menu a different look. It's also a great way to leave some room for...

Where did the “Make This Row Fullwidth” button in Divi go?

Where did the “Make This Row Fullwidth” button in Divi go?

In a recent Divi update (I believe it was from 3.21 to 3.22) the button under Design > Sizing that allowed us to "Make This Row Fullwidth" has disappeared.Have no fear though, the solution now is just to adjust the width to 100% and the max with to 100% under...

How to Create a Custom Text Underline Effect

How to Create a Custom Text Underline Effect

In this quick, fun tutorial, I'm going to show you how to create a custom text underline effect. I use this effect all the time when wanting accent a phrase or certain words inside a line of text or paragraph. It can be extremely handy for link conversion, UE (user...

How to Keep Columns on Mobile in Divi

How to Keep Columns on Mobile in Divi

In this tutorial, I show you how to Keep Columns on Mobile in Divi. In short, we're going to make it so that the columns stay next to each other on tablet and phones vs stacking on top of each other like you'd normally see. Super handy effect for things like icons,...

Creating a Logo/Text Cutout Effect in Divi

Creating a Logo/Text Cutout Effect in Divi

Welcome to my first tutorial of 2019!In this tutorial, I show you how to create a cutout effect with a logo or text in Divi. Effect is based off of this site (as of 1/29/19). So crank up some Limp Bizkit if you feeling like throwing back to 1999 and let's get to...

Divi Theme vs Divi Builder Plugin

Divi Theme vs Divi Builder Plugin

If you're new to Divi, the difference between The Divi Theme and Divi Builder Plugin can be a little unclear. Here's a brief explanation that'll help you understand how they're different and how you can use them on different Wordpress sites! When you purchase a...

How to Replace Text with an Icon in the Divi Menu

How to Replace Text with an Icon in the Divi Menu

In this tutorial, I show you how to Replace Text with an Icon in the Divi Menu. More specifically, how to create a little home icon in the Divi menu that links back to the home page. This is an addition to the method used in my previous tutorial on How to Add Icons to...

How to Create a Grayscale to Color Logo Hover Effect in Divi

How to Create a Grayscale to Color Logo Hover Effect in Divi

In this tutorial, I walk you through how to create a little effect where your logos (or whatever you choose to apply this on) go from grayscale to full color on hover. I've used this trick on several sites and it's very handy when displaying logos for pages like...

How to Create a Logo Swap Effect in Divi

How to Create a Logo Swap Effect in Divi

In this quick tutorial, I show you how to create a logo swap effect on your Divi site, just like the effect I currently have on mine. It's a subtle, buy very cool way to add some spice to your Divi designs. My effect is a simple color inverse but you can add ANY image...

Where to put your Favicon in Divi

Where to put your Favicon in Divi

In a recent Divi update (I believe it was version 3.9 or 3.10) the area where you put your favicon is gone. Have no fear though, you can still put a favicon in by going to the Theme Customizer > Site Identity > Site Icon area. Just make sure the file is 512px x...

How To Stop Words from Breaking on Mobile in Divi

How To Stop Words from Breaking on Mobile in Divi

In this quick tutorial, I show you how to stop your words from breaking on mobile in Divi. It's a very common occurrence so if you experience it, you're not alone! Luckily with just one line of CSS and perhaps a few custom tweaks, you'll be all set in no time. Hope...

How to Optimize Divi for Mobile with the Visual Builder

How to Optimize Divi for Mobile with the Visual Builder

In this tutorial, I walk you through how to optimize your Divi website for mobile using the Visual Builder. I often use custom CSS and media queries to adjust the responsive setting on my Divi websites but the visual builder provides some very handy built in features...

How To Put a Background Image in the Divi Header

How To Put a Background Image in the Divi Header

In this Divi tutorial, I show you how to put a background image or repeating texture in your Divi header! It's a nice little trick to have in your back pocket when a client wants an image in the header and with this method, we're not using any extra plugins or bloated...

How to Create a Fullwidth 2 Column Image & Text Section in Divi

How to Create a Fullwidth 2 Column Image & Text Section in Divi

In this tutorial, I show you how to create a Fullwidth 2 Column Layout with an Image and Text in Divi. There are numerous ways to do this but I've found what I think to be the most straight forward and simple solution. This is also accompanied by a free layout! See...

How to Add 5 or 6 Columns in Divi

How to Add 5 or 6 Columns in Divi

Ever wanted to build a page with more than 4 columns in Divi? By default, Divi unfortunately only gives us the option to have up to 4 columns in the Divi builder but in this tutorial, I show you how to add 5 or 6 columns! There are several ways to go about this and...

How to Set Up Google Analytics in Divi (without a plugin)

How to Set Up Google Analytics in Divi (without a plugin)

In this tutorial, I show you how to set up Google Analytics in your Divi website WITHOUT the use of an external plugin. Wordpress Google Analytics plugins have their uses. Case in point, if your client wants to be able to see a snapshot of their site stats and page...

How to Use Inspect Element to Edit CSS in Divi

How to Use Inspect Element to Edit CSS in Divi

In this tutorial, I show you how to use Google Chrome's Inspect Element Tool to help edit and customize your CSS in Divi. Inspect element is a robust and complex tool so we don't cover everything but I'll show you what you need to know editing and customizing...

How to Create a Call To Action Button for the Divi Menu

How to Create a Call To Action Button for the Divi Menu

In this tutorial, I show you How to Create a Call To Action Button for the Divi Menu. Have you ever wanted to put a button in your Divi menu? By default, Divi's menu options are slim but with just a little CSS magic, you can really make menu items come to life. This...

How to Create a Sleek Mailchimp SignUp in Divi

How to Create a Sleek Mailchimp SignUp in Divi

Welcome to the FINAL post in my Tutorial Tuesday series! Every Tuesday for past 12 weeks, I've dished out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. This tutorial walks you through "How to Create a Sleek...

How to Customize the Dropdown Menu in Divi

How to Customize the Dropdown Menu in Divi

Welcome to part 11 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this tutorial, I show you "How to Customize...

How to Customize the Top Header in Divi

How to Customize the Top Header in Divi

Want to level up your CSS game? Use coupon code "CSS10" for 10% OFF my Divi/CSS Course!This tutorial walks you through "How to Customize the Top Header in Divi." By default, Divi gives us the ability to put a phone number, email and...

How to Customize the Divi Gallery Like a Boss

How to Customize the Divi Gallery Like a Boss

Welcome to part 9 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this tutorial, I show you "How to Customize...

How to Create an Overlapping Logo in Divi

How to Create an Overlapping Logo in Divi

Welcome to part 8 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this tutorial, I show you "How to Create...

How to Vertically Align Content in Divi

How to Vertically Align Content in Divi

Welcome to part 7 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this tutorial, I show you "How To Vertically Center Content in...

How to Create Anchor Links in Divi

How to Create Anchor Links in Divi

Welcome to part 6 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this tutorial, I show you "How to Create Anchor Links in Divi!"...

How To Customize the Back To Top Button in Divi

How To Customize the Back To Top Button in Divi

Welcome to part 5 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this Divi tutorial, I teach you "How to Customize the Back To Top...

How to Customize the Divi Menu Dropdown Icon

How to Customize the Divi Menu Dropdown Icon

Welcome to part 4 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. This tutorial will show you How to Customize the Divi Menu Dropdown...

How to Add Icons to Your Divi Menu

How to Add Icons to Your Divi Menu

Welcome to part 3 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this tutorial, which is perhaps the most requested tutorial I've...

How to Create Overlapping Footer Social Icons in Divi

How to Create Overlapping Footer Social Icons in Divi

Welcome to part 2 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. This tutorial walks you through "How to Create Overlapping Footer...

How to Create an Image Overlap Section with Divi

How to Create an Image Overlap Section with Divi

Welcome to part 1 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. This first tutorial walks you through "How to Create an Image...

WordPress Tutorials

My collection of WordPress related tutorials to help you out in your WordPress web design journey.

How to Create & Deploy WordPress Staging Sites

How to Create & Deploy WordPress Staging Sites

Here's a complete guide to creating and deploying WordPress staging sites! What is a staging site you might ask? I view it as a starting template that will save you serious time in the long run as you build sites over and over again. Additionally, you can have...

Best WordPress Hosting Companies

Best WordPress Hosting Companies

Choosing a host for your WordPress website is a very important decision. Your website hosting is the foundation of your website and the home of your online presence and the implications of website performance, speed, server reliability, optimization, security, etc are...

Make Your WordPress Website Fully HTTPS Secure (in 5 STEPS)

Make Your WordPress Website Fully HTTPS Secure (in 5 STEPS)

In this tutorial, I'll show you how to make your WordPress website fully HTTPS secure! Having a website that shows as "secure" is a must these days. Not only from a security standpoint but also because of how it reflects on you, your website and your clients websites....

SiteGround Site Tools Beginner Tutorial

SiteGround Site Tools Beginner Tutorial

In this tutorial I'll give you an overview of SiteGround's Site Tools Backend. Previously, SiteGround used cPanel but have upgraded to a slick new backend. This threw a lot of web designers and DIYers who knew cPanel for a loop but don't worry! The new backend...

How to Install WordPress on SiteGround Beginner Tutorial

How to Install WordPress on SiteGround Beginner Tutorial

In this tutorial I'll show you how to set up WordPress on SiteGround. There are many ways to set up WordPress but luckily, SiteGround makes it SUPER easy for us 🙂 This tutorial is a beginners guide to getting your WordPress website set up fast on SiteGround hosting....

How to Set Up SiteGround Hosting Beginner Tutorial

How to Set Up SiteGround Hosting Beginner Tutorial

In this tutorial I'll show you how to set up a SiteGround hosting account! Having your website on GREAT hosting is crucial and SiteGround has been my trusted host since 2015. They've been extremely reliable, the continue to innovate and their support is some of the...

Display Video as Featured Image/Thumbnail in WordPress

Display Video as Featured Image/Thumbnail in WordPress

In this super quick/super cool tutorial, I'll show you how to Display a Video as the WordPress Post Thumbnail or Featured Image. This is great for when you want to feature a video that people can preview or watch in a blog page instead of actually clicking into the...

Overview of WordPress (Beginners Guide 2020)

Overview of WordPress (Beginners Guide 2020)

In this beginners tutorial, I'm going to give you an overview of WordPress! This is part 2 of my beginner tutorial series where I'm answering the top 5 questions for YOU who are just getting started with Wordpress. In this overview, we'll cover the front end vs the...

How to Install & Set Up WordPress (Beginners Guide)

How to Install & Set Up WordPress (Beginners Guide)

In this beginners tutorial, I'll show you How to Install and Setup WordPress! This is part 1 of my beginner tutorial series where I'm answering the top 5 questions for YOU who are just getting started with Wordpress. I'll show you how to do this through cPanel which...

How to Download Media Files in WordPress

How to Download Media Files in WordPress

In this tutorial, I'll show you How to Download Media Files in Wordpress with no plugin needed. One feature I'm very surprised Wordpress doesn't include (at least at the time of writing this) is a way to download images, videos and other file types directly from the...

How to Make a Non Clickable Menu Item in WordPress

How to Make a Non Clickable Menu Item in WordPress

In this tutorial, I'll show you How to Make a Non Clickable Menu Item in Wordpress. By default, when you add pages, posts or custom links to your Wordpress menu, they will be a link. But what if you want to have a menu item that just displays the items below it that...

How to Create a Google Review Link

How to Create a Google Review Link

In this tutorial, I show you How to Create a Google Review Link. We're going to do this in 2 methods by creating a link that opens up all reviews for customers to see and a direct Google Review link that a website user can click to quickly leave a Review. It's a very...

How to Customize a Password Protected Page in WordPress

How to Customize a Password Protected Page in WordPress

In this tutorial I show you How to Customize a Password Protected Page in Wordpress. By default and depending on what theme you're using, the front end of the password protected page usually looks terrible. Luckily, with just a few lines of CSS and some creativity,...

How to Set Up Google Analytics in Divi (without a plugin)

How to Set Up Google Analytics in Divi (without a plugin)

In this tutorial, I show you how to set up Google Analytics in your Divi website WITHOUT the use of an external plugin. Wordpress Google Analytics plugins have their uses. Case in point, if your client wants to be able to see a snapshot of their site stats and page...

How to Use Inspect Element to Edit CSS in Divi

How to Use Inspect Element to Edit CSS in Divi

In this tutorial, I show you how to use Google Chrome's Inspect Element Tool to help edit and customize your CSS in Divi. Inspect element is a robust and complex tool so we don't cover everything but I'll show you what you need to know editing and customizing...

How to MANUALLY Migrate Your WordPress Site

How to MANUALLY Migrate Your WordPress Site

In this tutorial, I walk you through How to MANUALLY Migrate your Wordpress Site from one host to another. There are several great duplicating, cloning and migration tools for transferring Wordpress sites but it's good to know how to do it manually just incase a...

Web Design Tutorials

My collection of miscellaneous web design tutorials with tips, tricks and other useful resources to help you in your web design journey.

7 Tips for a High Converting Website Homepage

7 Tips for a High Converting Website Homepage

Over a span of a decade in building sites for clients and having now overseen 1,200+ web design students all over the world, I've learned a lot about website conversions. Particularly when it comes to having a high converting homepage, which is often the most...

Google Analytics Beginners Tutorial

Google Analytics Beginners Tutorial

In this tutorial, I'll give you a quick overview and beginners tutorial of Google Analytics! At first glance, understanding your site traffic on Google Analytics can be a little overwhelming and confusing and I remember the first time I logged in, having NO idea what...

How to do Keyword Research (for FREE) using Google

How to do Keyword Research (for FREE) using Google

There are a lot of great keyword research tools out there but wouldn't it be nice to be able to do some basic research for free? Good news! You can do so using good old trusty Google. In this tutorial, I'll show you how! There are many other tactics, strategies and...

Loom Beginners Video Tutorial

Loom Beginners Video Tutorial

In this Loom Beginners Tutorial video, I'll walk you through how to use Loom - my preferred app for creating short, powerful videos. We'll look at the ways you can download the app, how to record videos and how to send them in creative ways to customers, clients and...

Free Website Design Device Mockups (PSD Template Download)

Free Website Design Device Mockups (PSD Template Download)

By popular request and demand, I'm dishing out my Website Design Device Mockup Templates as FREE DOWNLOADS for you! Here are 2 website device mockup templates. One is a 2 Device Mockup and one is a 4 Device Mockup template. Each are Photoshop (PSD) files. If you don't...

How to Circle (or Highlight) Items with Preview on Mac

How to Circle (or Highlight) Items with Preview on Mac

In this quick but very handy tutorial, I'll show you a trick that isn't directly related to Divi, Wordpress or even web design but has saved me soooo much time (and sanity) in my web design business which is How to Circle or Highlight Items in Preview on Mac. If you...

How to Create a Google Review Link

How to Create a Google Review Link

In this tutorial, I show you How to Create a Google Review Link. We're going to do this in 2 methods by creating a link that opens up all reviews for customers to see and a direct Google Review link that a website user can click to quickly leave a Review. It's a very...

Optimizing Images for Web with Adobe Bridge

Optimizing Images for Web with Adobe Bridge

In response to a recent tutorial request, here is a quick tutorial on Optimizing Images for Web with Adobe Bridge. While there are numerous tools out there to help you make your images web ready, Bridge is my preferred app because of the power you have to easily...