Divi Changes Everything. Give It A Test Drive!

Tutorials

Custom Image Overlays

Custom Image Overlays

Image overlays are great for engaging visitors by revealing additional content and design elements when hovering over the image. Because this is such a popular design feature, there are many plugins out there dedicated to creating image overlays. However, depending on...

read more
Custom Show More Toggles

Custom Show More Toggles

Show more toggles can come in handy for a lot of different applications on a website. Traditionally, show more toggles are used to show more text when clicking a show more link (like read more toggles). This is helpful for keeping the initial design more compact and...

read more
Show Images From Multiple Instagram Accounts

Show Images From Multiple Instagram Accounts

Instagram is an excellent way to increase your brand awareness. You can even differentiate your content and post different images on each channel. However, featuring multiple Instagram feeds on your website can be tricky. Smash Balloon is a handy plugin that will help...

read more
Create a Sticky Header with Divi’s Sticky Options

Create a Sticky Header with Divi’s Sticky Options

The way we use the Divi Theme Builder when setting up a website has sped up our workflow and made everything easier. Although we were able to create customized headers from day one ever since the Divi Theme Builder came out, one thing has been requested continuously,...

read more
Add Advanced Text Animations

Add Advanced Text Animations

Divi’s built-in animations provide tons of possibilities when it comes to adding that extra edge to your website. These animations, however, allow you to add one animation to one container at a time. While in most cases this is usually more than enough, there are...

read more
Change the Style of Multiple Elements on Hover or Click

Change the Style of Multiple Elements on Hover or Click

Eventually, in the world of web design, coders and non-coders alike will look to add more advanced customizations and functionality to their Divi websites. Usually, this involves using Javascript/JQuery to change the style of elements on the page for different...

read more
Clickable Accordion Using Sticky Page Headings

Clickable Accordion Using Sticky Page Headings

Divi’s new sticky position options open the door for many new and exciting design possibilities. In this tutorial, we are going to show you how to combine Divi’s sticky position options with smooth scrolling anchor links to create an accordion-like way to index and...

read more
Custom eCommerce Mega Menu

Custom eCommerce Mega Menu

When building an eCommerce website using Divi and WooCommerce, there are tons of ways to customize the overall look and feel of your website. Divi’s WooCommerce modules in combination with the Divi Theme Builder allow you to build templates for your product pages,...

read more
Split Screen Blog Post Template

Split Screen Blog Post Template

When creating a website, chances are high you’re going to include a blog page and blog posts on it. Of course, the most important part of a blog strategy is creating high-quality blog post content, but the design part of it all plays a big part in your strategy’s...

read more
Global Presets to Streamline Blog Post Design

Global Presets to Streamline Blog Post Design

Creating content for your blog is hard enough without having to worry about design. That’s why it is important for your site to have the design elements readily available (or pre-designed) so that you can be more focused on creating amazing content. Sure, a...

read more
Text Mask with Background Animation on Scroll

Text Mask with Background Animation on Scroll

Text Mask designs are surprisingly easy to create using Divi’s built-in options. The builder has all the ingredients for created a text mask effect including options for text styles, backgrounds, and blend modes. In fact, we’ve created text mask designs using blend...

read more
Add Post Category Menu Widgets To Global Footer

Add Post Category Menu Widgets To Global Footer

When you’re building a custom footer inside Divi’s Theme Builder, there are several ways to approach adding the footer items. You could go for a module-based footer, where you add page footer items inside Text Modules with proper links, but you could also decide to...

read more
Responsive Table with Horizontal Scroll

Responsive Table with Horizontal Scroll

Creating a responsive table can be a challenge, especially if you have a table with a lot of columns. A great way to solve this problem is to add horizontal scroll capability to the table. A table with horizontal scroll solves two main problems. First, it allows the...

read more
Moving Image Shadows on Scroll

Moving Image Shadows on Scroll

In the world of web design, we usually think of shadows as something we can add in Photoshop or as a CSS property (like box-shadow or text-shadow). But with Divi, we can think outside the box (or box-shadow). With just a few adjustments to Divi’s built-in filter and...

read more
Animate Your SVG Logo Inside Your Global Header

Animate Your SVG Logo Inside Your Global Header

Your logo is a central part of your brand’s identity. That’s why it’s almost always included in any website header you come across. When adding a logo to your header, you can choose to upload a PNG file or go for an SVG integration instead. For a more customized...

read more
Slide-In Column Contact Form

Slide-In Column Contact Form

When thinking of ways to include CTAs in your page design, you might consider including a slide-in contact form in your hero section. This approach allows people to immediately get in touch with you without having to navigate any further on your website.

read more
Slide Down Push Menu

Slide Down Push Menu

Large headers with a lot of navigation links can take up a lot of valuable real estate on your site (especially above the fold). That’s why menus that popup and slide-in are becoming more and more popular. Most of the time, menus that slide in to view stay above the...

read more
Animated Clock with Scroll Effects

Animated Clock with Scroll Effects

The web is full of sites that need design accents related to time (speed optimization, upcoming events, etc.). In most cases, a clock icon or graphic can work great. But, creating an animated clock design will definitely give a unique “spin” to the design of your...

read more
Reading Progress Bar for Blog Posts

Reading Progress Bar for Blog Posts

Adding a Reading Progress Bar (or scroll indicator) to your blog post template is a smart way to showcase a user’s reading progress for a given article. The idea is to display a fixed progress bar at the top of the post that directly correlates with the user’s scroll...

read more
Text and Images that Change on Scroll

Text and Images that Change on Scroll

Divi scroll effects are great for creating interesting layouts. Create a layout with text and images that change on scroll. This design can be used for a services page or any type of page you require. We kept it clean and simple for the scroll effect to take the...

read more
Showcase Blog Post Categories in Your Divi Header

Showcase Blog Post Categories in Your Divi Header

When creating your global header, chances are high you’re going to include a blog menu item. If you don’t have many blog post categories on your website, going for one blog menu item might be enough. However, if you have a set of different categories and you want to...

read more
Fixed Sidebar in Your Blog Post Template

Fixed Sidebar in Your Blog Post Template

Choosing to add a sidebar to your blog posts is entirely up to you. Some bloggers choose to not use a sidebar at all. This tutorial is for those of you who prefer using a sidebar but want to make it look a little different. Usually, sidebars are statically positioned,...

read more
Dynamic Post Info Bar Post Template

Dynamic Post Info Bar Post Template

Adding dynamic content to your blog post template is essential for providing things like the post title, metadata, featured image, etc. Normally, these dynamic elements are placed as normal static elements within the design of the layout. However, it may be helpful to...

read more
Virtual Summit Landing Page

Virtual Summit Landing Page

Promoting a virtual event involves a number of promotional strategies. Creating an inviting landing page is one of them. Creating a landing page for your virtual summit is the perfect way to make your audience curious. With the right combination of sections, you can...

read more
Vertically Stack Woo Gallery Images

Vertically Stack Woo Gallery Images

By default, as soon as you add gallery images to your WooCommerce products, they’ll appear horizontally below your product’s featured image on the frontend of your product page design. In some specific designs, vertically stacking these woo gallery images might be...

read more
Sliding Push Sidebar in Divi

Sliding Push Sidebar in Divi

Sidebars can be great, but they can also be a waste of space. That’s why creating a sliding push sidebar can be a perfect option for those looking to have a sidebar that doesn’t distract the user from the main content of the page. Moreover, this kind of a sidebar...

read more
Add a Label to a Menu Item

Add a Label to a Menu Item

When building your website’s header, paying special attention to your visitors’ behavior can help boost clickthrough rates. Not only should your header look good, but it should also help guide visitors to the most important pages on your website. A frequently used...

read more
Column Outlines to Emphasize Design Grid

Column Outlines to Emphasize Design Grid

Divi’s built-in element structure can be used in traditional ways to define and style different sections, rows, columns and modules. But, they can also be used creatively to enhance the design structures on your page. In this tutorial, we’ll show you how to use column...

read more
Divi’s Position Options to Create Image Bundles

Divi’s Position Options to Create Image Bundles

Whether you or looking for a fresh new look for an image gallery or just wanting a nice display for product images, this tutorial should help. Normally, when adding images to a Divi website, we may limit the design to one image per column. While this is traditionally...

read more
Vertical Navigation Menu

Vertical Navigation Menu

Vertical navigation menus can come in handy for certain websites that need more menu items at the forefront. Horizontal menus can be difficult to fit all the menu links needed, especially on smaller browser widths. In this tutorial, we are going to show you how to...

read more
Colorful Spatter Animation Hero Section

Colorful Spatter Animation Hero Section

The way you design your page’s hero section sets the expectations for the rest of your page. If you’re designing a landing page that celebrates something, whether it is an anniversary or a sale, it can definitely help to bring the festive mood into your design. One...

read more
Scrollable Portfolio Navigation List

Scrollable Portfolio Navigation List

Portfolio pages are the perfect excuse to get creative with your web design. In this tutorial, we’ll show you how to put together an eye-catching scrollable portfolio navigation list to spice up any portfolio page. Using Divi’s scroll effects, the menu items come to...

read more
Elegant Themes Dropdown Menu

Elegant Themes Dropdown Menu

Ever since Divi’s Theme Builder has come out, the way we design headers and footers throughout our websites with Divi has become easier than ever. Everything can be customized and you can obtain the exact menu you have in mind without ever having to leave the...

read more
Mobile Viewports Using Rotated Copy

Mobile Viewports Using Rotated Copy

When designing a website, you have an important choice to make at the very beginning: “What device am I going to design for first?” Often, the answer is desktop. But just because you design for desktop first, doesn’t mean your mobile design can’t be as thorough. By...

read more
WooCommerce Product Category Page

WooCommerce Product Category Page

Category pages are an important part of any eCommerce site. Clients browse product categories to find what they need. That’s why your category pages need to look just as good as your product pages. With Divi’s Theme Builder, creating category page templates is easier...

read more
Divi Mobile Contact Bar

Divi Mobile Contact Bar

With the world living on mobile devices, it makes sense to provide clickable contact links on your website that take advantage of the mobile experience. These contact links, like a click-to-call link, can jumpstart a call on your mobile phone in a single click....

read more
Boost Your CTA with Scroll Effects

Boost Your CTA with Scroll Effects

It is always fun to win a prize. That’s why companies market their products and services online by giving away free stuff. It could be a coupon for a free dessert with your first order, or a free e-book when you subscribe to an email list. But sometimes, even freebies...

read more
Fixed Audio Bar in Divi Header

Fixed Audio Bar in Divi Header

If you’re hosting a podcast website with Divi, chances are high you’re using the built-in Audio Module already. Now, if you’re looking for a special way to put your latest episode in the spotlight, you’re going to love this tutorial. Today, we’ll show you how to...

read more
3-Step Sales Funnel with Divi

3-Step Sales Funnel with Divi

Sales funnels are the most important and effective methods of selling through a website. A well-designed sales funnel will help capture leads, improve conversions, and increase profits. Building effective sales funnels is easy to do with Divi. In this article, we’ll...

read more
Author Page Template

Author Page Template

Author pages used to be difficult to customize. With the Divi Theme Builder, that’s no longer an issue. You can personalize not only author pages but also category pages, search results pages and more. In this post, we’ll show you how to create a dynamic author page...

read more
Combine Scroll Effects for Smooth Animations

Combine Scroll Effects for Smooth Animations

If you’re looking for a way to create smooth animations with Divi’s built-in scroll effects, you’re going to love this post. We’ll show you how to combine scroll snapping with Divi’s built-in motion effects to create full height sections that you can scroll between in...

read more
Implement a Dark Mode Toggle

Implement a Dark Mode Toggle

Dark mode continues to grow in popularity as a convenient option for users to experience the web with less strain on the eyes. Let’s face it, we all tend to spend more time looking at screens than we probably should, so any additional comforts to the user experience...

read more
Dynamic Product Benefit Grid

Dynamic Product Benefit Grid

The way you design your product page has an immediate impact on your visitors’ behaviour. A well-designed and customized product page design can make it easier for visitors to decide if they want to purchase your product. If you’re looking for a way to make your...

read more
Dynamic Site Title and Tagline

Dynamic Site Title and Tagline

Knowing how to add a dynamic site title and tagline to a Divi Global Header will come in handy when building Divi websites. And there are a few good reasons that one would do it. For one, not every site has a logo. A site title is a good logo replacement. Another...

read more
Blog Module Draggable/Swipe Carousel

Blog Module Draggable/Swipe Carousel

For many websites, blogging has become an important part of their SEO strategy. But besides creating high-quality content, it’s also important to simplify the post navigation process for your visitors. That way, they can hop from one post to another and spend more...

read more
Slashing Text Scroll Effect

Slashing Text Scroll Effect

Creating a Slashing Text Effect is a fun way to bring life to your content. The idea is to give the illusion that text is being slashed in half and breaking apart as the user scrolls down the page. In this tutorial, we’ll show you just how easy this design is to build...

read more
Fan Out Images on Scroll to Promote an Image Gallery

Fan Out Images on Scroll to Promote an Image Gallery

Knowing how to fan out images with Divi’s scroll effects can be a subtle and impressive design element to help promote an image gallery on a landing page. The idea is to engage users as they scroll down the page by fanning out images like a hand of playing cards. In...

read more
Transformed Motion Shapes as Backgrounds

Transformed Motion Shapes as Backgrounds

Divi’s new scroll effects are made for you to easily take your web design experience to the next level. Of course, you can apply it to elements within your section directly, but you can choose to add motion to underlying elements too. Going for an underlying approach...

read more
Full Split-Screen Layout with Unique Toggles

Full Split-Screen Layout with Unique Toggles

Split Screen layouts are a great way to add design to your Divi website that is beautifully balanced and unconventional. With Divi’s new position options, we can create a split-screen layout design using two adjacent Divi sections. This opens the door for building...

read more
Self-Scrolling Team Members Carousel

Self-Scrolling Team Members Carousel

When setting up your about page, you’ll most likely want to feature your team members on there as well. By doing so, you allow visitors to connect with the people behind your company. If you’re looking for a way to animate your team member section on scroll, you’ll...

read more
Responsive Fullscreen Contact Form Section

Responsive Fullscreen Contact Form Section

For many websites, the contact section of the page is the ideal destination for visitors. To state the obvious, most people/companies want their visitors to contact them for more business. That’s why it is important to optimize that section for better conversion. One...

read more
Motion Testimonial Layout

Motion Testimonial Layout

It’s no secret that testimonials are a crucial part of many businesses out there and their website. They add a sense of credibility to the services you provide or the products you offer. Paying special attention to the way you display your testimonials often pays off....

read more
Dynamic Product Swipe Cards on Mobile

Dynamic Product Swipe Cards on Mobile

When building a landing page for specific products, whether it’s a new launch or a sale you’re preparing for, chances are high you’ll use the Shop Module at some point. Divi’s Shop Module allows you to dynamically pull products from the WooCommerce plugin and style...

read more
Notification Box for COVID-19 Updates

Notification Box for COVID-19 Updates

There is always a need for notification boxes on a website. They are helpful additions that supply important information to users where they can see it. Unfortunately, the growing COVID-19 epidemic has left many websites with the pressing need to keep their users...

read more
Image Modules as Zoom-Out Parallax Backgrounds

Image Modules as Zoom-Out Parallax Backgrounds

When using a background image in your section, there are a couple ways to style that image right off the bat. You can use blend modes, gradient background overlays and enable parallax effects. Now, with Divi’s new scroll effects, you can take the animation one step...

read more
Floating Footer Drawer

Floating Footer Drawer

Footer drawers are useful additions to any website because they store additional content that is easily accessed by users. Footer drawers are containers of web content (like a Divi section) that can be toggled open and closed by the click of a button or on hover. It...

read more
Minimal Header & Footer

Minimal Header & Footer

When designing a global footer and header, it’s important to take the overall design style of the website into account. If you’re building a minimal website, with a lot of white space, for instance, your best bet is going with a minimal header and footer as well.

read more
Floating Contact Section with Scroll Effects

Floating Contact Section with Scroll Effects

Every website needs a contact section, but that doesn’t mean you need to go for a standard design. With Divi’s scroll effects, you can create a floating contact section that will stand out. Improve your user interaction with a vertical scrolling contact section layout...

read more
Scroll Animated Number Counters

Scroll Animated Number Counters

Animated number counters are popular throughout the web as a means to display numerical data to highlight the value of services, case studies, and more. Divi has a dedicated number counter module that can be used to generate animated number counters with ease....

read more
Scroll Animated Bar Counters

Scroll Animated Bar Counters

Bar counters are used throughout the web to effectively illustrate data or metrics with subtle color animation that represents a certain value. Divi has a dedicated bar counter module that can be used to generate animated bar counters with ease. They are popular...

read more
Responsive Slide-In Menu

Responsive Slide-In Menu

When setting up a website for a client of yourself, you’ll find yourself contemplating what type of header to build. The most used one around the web is the horizontal menu bar at the top, but there are other options as well, such as a slide-in menu. Slide-in menus...

read more
Module Overlaps on Scroll

Module Overlaps on Scroll

Using overlaps in your design has increased in popularity over the past few years. It gives your design a more abstract look and feel. At the same time, it helps you save space, which in turn limits the vertical scrolling that is required. Inside Divi, there are a...

read more
Fixed Footer Bar for Divi

Fixed Footer Bar for Divi

Fixed footer bars can be a convenient way to keep important information about your website at the forefront as the user engages with your page content on any device. Like with Divi, a footer bar usually exists as a static element at the very bottom of the page after...

read more
Limit Scroll Effects to Column Containers

Limit Scroll Effects to Column Containers

Divi’s scroll effects help bring an entirely new dimension to the design you’re creating. With every new Divi feature, we also try to share tutorials that’ll help you view your web design from a different perspective. In this tutorial, we’ll show you how to limit...

read more
Text Background Scroll Animation

Text Background Scroll Animation

Creating text background scroll animation is a unique way to add colorful moving textures to the text on your website as a user scrolls down the page. With Divi, the process is surprisingly easy once you learn a few key techniques. In this tutorial, we are going to...

read more
Image Swap on Scroll

Image Swap on Scroll

Creating interactive design comes with many advantages. One of them is the fact that you can fit more visual content inside a single section and determine how the visual content shows up while visitors are scrolling. It elevates the overall user experience visitors...

read more
Divi Timeline Layout with Scroll Effects

Divi Timeline Layout with Scroll Effects

A timeline layout can come in handy for a lot of different applications on a website, especially if it looks great on mobile. You can use it for showcasing a sequence of milestones on an about page, featuring the steps of a process, and much more. And with Divi’s...

read more
Add Motion to Background Images on Scroll

Add Motion to Background Images on Scroll

With Divi’s new scroll effects, you can create any kind of design you want using Divi’s built-in options and add some beautiful scroll motion effects to take your design to the next level. In today’s tutorial, we’ll add a creative technique to your list which you can...

read more
3D Motion Scroll Effects

3D Motion Scroll Effects

Adding 3D Motion Scroll Effects can easily be done by combining a few powerful built-in Divi features: scroll effects and transform rotation. The idea is actually a simple one. Before we move elements horizontally or vertically using scroll effects, we rotate the...

read more
Zoom-Out Header Transition on Scroll

Zoom-Out Header Transition on Scroll

Creating a zoom-out header scroll effect can be an impressive design element to engage users with your content. The effect is similar to what you see on Apple’s macOS Catalina page. In this tutorial, we are going to show you how to create a zoom-out header transition...

read more
Seamless Service Transition with Scroll Effects

Seamless Service Transition with Scroll Effects

While designing your services page, you want to make sure your visitors notice all the different services you provide. In many cases, it’ll only be only one specific service they’re looking for, but if you provide a streamlined way in your service structure, chances...

read more
Section Divider Scroll Effects

Section Divider Scroll Effects

Creating section divider scroll effects is a simple and fun technique that can add life to your Divi website. A section divider continues to be a versatile design element, useful for adding a touch of creativity to your page content transitions. But with Divi’s scroll...

read more
Circle Counters that Animate on Scroll

Circle Counters that Animate on Scroll

Animated circle counters are a popular way to showcase information (like stats or metrics) on a web page with a fun interaction. In fact, you may already be familiar with Divi’s Circle Counter Module, which makes adding circle counters to your Divi site quick and...

read more
Blurb Expanding Section on Scroll

Blurb Expanding Section on Scroll

There are many ways you can use Blurb Modules throughout your page design and now, with Divi’s scroll effects, animating them on scroll becomes an effortless experience. In today’s tutorial, we’ll show you how to create an expanding circular blurb layout that you can...

read more
Horizontal Self-Scrolling List

Horizontal Self-Scrolling List

Divi’s scroll effects bring tons of new design possibilities to websites you create. With every new feature, we try to share cool Divi techniques you can use to make your pages stand out from the crowd. Today, we’ll show you how to create a horizontal self-scrolling...

read more
Reveal Image Gallery with a Sliding Puzzle Scroll Effect

Reveal Image Gallery with a Sliding Puzzle Scroll Effect

Image galleries are a favourite destination on most websites. And, in many cases, it may be best to keep those image galleries happy and static, letting the images work their magic. But, adding a sliding puzzle scroll effect to an image gallery (like we are going to...

read more
Slide-Out Email Optin Box on Scroll

Slide-Out Email Optin Box on Scroll

If you’re looking for a way to highlight your email optin box, you’ll love this post. We’ll show you, step by step, how to add motion to your email optin box. The motion email optin box appears and disappears as visitors are scrolling down the page. By doing this,...

read more
Clickable Table of Contents for a Blog Post

Clickable Table of Contents for a Blog Post

Adding a clickable table of contents to a blog post is a great way to improve user experience. In many cases, a blog post table of contents uses anchor links to help users navigate through the content. And, a table of contents (with anchor links) is really simple to...

read more
Swap Your Divi Header for Another on Scroll

Swap Your Divi Header for Another on Scroll

Your header inevitably remains one of your website’s most important elements. It influences your visitors’ navigation process and allows them to find what they’re looking for in a heartbeat. Now, if you’re looking for a way to swap your Divi header on scroll with...

read more
Combine Rotation Scroll Effects with Circular Elements

Combine Rotation Scroll Effects with Circular Elements

With Divi’s scroll effects, new doors have been opened to take your blurb layouts to a whole new level. In this tutorial, we are going to show you how to create a blurb module layout with rotating circular elements on scroll. This unique layout features a clever use...

read more
Save 10% off Divi Theme Today!

Pin It on Pinterest