Divi’s sticky options allow you to effortlessly add interaction to the pages you create and design. If you’re looking for a way to mention multiple items without just creating a static list, you’ll enjoy this tutorial. Today, we’re showing you how to build an...
A hero section is the eyecatcher of your website. It usually sets the tone for the rest of the website and shows visitors what they can expect. That’s why it can be helpful to make sure all focus is on the few elements you share in your hero section, such as the copy...
Discover another trick you can apply with Divi’s built-in sticky options. More specifically, how to “pick up” your header once you scroll past it. The header will be automatically placed below each page’s first section. This tutorial will be all about interaction....
Traditionally, sticky menus are visible at the top (or bottom) of a page the moment the page loads. However, building a sticky CTA menu as the user scrolls down the page can be a creative and effective way to keep those important CTAs clickable at all times. In some...
There are a ton of ways you can use the sticky options to enhance the user experience people have on your website and make your website shine. For example, you can stack rows on scroll with Divi’s sticky options. As soon as a row touches the top of your viewport,...
Progress Bar Indicators can add a nice touch to your website, boosting UX with a useful (and fun) interaction. Normally, progress bars stand alone at the top of the page without much connection to the actual content of the page. The user simply has a visual indicator...
Ever since the Divi sticky options have come out, endless interaction design possibilities have been added to our Divi toolboxes. Besides being able to turn a header sticky on scroll, you’re also able to change the style of your elements in a sticky state. This allows...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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....
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...
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...
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....
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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,...
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...
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...
Showcasing any app or product on your website doesn’t have to be limited to static images or graphics. With Divi’s scroll effects, you can bring app illustrations to life by adding subtle and effective animation that engage visitors. In this tutorial, we are going to...
When the emphasis of a certain section is on the copy, it’s important to make sure the copy doesn’t go unnoticed. There are many techniques you can use to put your copy in the spotlight, but in this tutorial, we’ll show you how to synchronize expanding copy on scroll...
Divi’s scroll effects bring a ton of new design possibilities to the websites you create. The subtle interactions you choose to add can really help elevate the overall look and feel of your website. It all gets even better as soon as you synchronize scroll effects. In...
Combining scroll effects with parallax background images can create quite a magical design for your visitors. Since the parallax effect already puts the image in motion as the user scrolls down the page, adding additional scroll effects (like horizontal motion and...
There are many ways you can make your visitor aware of the fact that they’re moving on to another section on your page. Within Divi, there’s a wide range of section dividers you can use right off the bat. But if you’re looking for a more animated way to make it clear,...
Companies often educate their visitors about their services by offering a helpful illustration of the steps to their process. For example, a web design agency may show their process of web development, or a bakery may feature their steps for creating the perfect...
Divi’s Scroll Effects allow us to create exceptional transition animations that can wow visitors with an eye-catching design. Images, in particular, can showcase the power of these scroll effects in surprising ways. In this tutorial, we are going to explain...
Every time a new Divi feature comes out, we try to share some cool and useful tutorials that’ll help you think outside the box and get creative with Divi. Today’s tutorial does exactly that. We’ll show you how you can create a responsive envelope animation with Divi’s...
Your about page is one of the most important pages on your website. It allows people to get to know you better and decide if they’re comfortable to take the next step. If you’re looking for a smooth way to include storytelling in your about page, you’ll love this...
Using Divi’s scroll effects to stack and animate text on scroll is a unique design technique that can be used to bring life to your page headings. The trick is to use Divi’s position options to stack letters absolutely so that they sit directly on top of each other....
Divi’s new scroll effects bring tons of new design possibilities to the pages you build. You can add a customized scroll effect to each container and synchronize the effects accordingly. This design freedom easily helps you highlight certain content in an elegant way....
Floating elements within a section can provide an effective and unique way to reveal content as the user scrolls down the page. With Divi, you can float elements simply by giving them a fixed position using the built-in position options available. And when you combine...
Adding a scroll triggered popup to your blog posts seems like a really smart thing to do. You may have seen them before when reading other blogs. As the user scrolls to a certain point of the post (usually the end), a box containing some call to action suddenly...
When you’re creating your global header, there are many things you need to take into account. The elements you place in your header need to help your visitors navigate easily. To reduce the time people spend navigating, many web designers opt for a fixed top header,...
