Divi Changes Everything. Give It A Test Drive!

Scroll

Transparent Header Sticky on Scroll

Transparent Header Sticky on Scroll

When it comes to setting up a global header for your website, there are many ways to approach it. One of the more subtle approaches is a transparent header. Transparent headers are placed on top of your pages’ hero sections, which can lead to beautiful designs that...

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
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
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
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
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
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
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
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
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 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
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
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
Save 10% off Divi Theme Today!

Pin It on Pinterest