Join The Most Empowered WordPress Community On The Web

Animation

Image Overlay with Split Text Shutter Animation

Image Overlay with Split Text Shutter Animation

Image overlays continue to be a popular design asset when displaying images on your website. Not only do they offer a creative way to showcase images, but also they can make viewing images more fun and engaging for visitors, especially when you add custom animations...

read more
Business Cards with Flip Animation on Click

Business Cards with Flip Animation on Click

Designing business cards that flip on click can be a creative addition to any team member section or page on your website. Business cards are already a familiar and intuitive method for supplying concise information about a person working for a company. So it makes...

read more
Create and Animate CSS Shapes in Divi

Create and Animate CSS Shapes in Divi

Creating shapes using CSS in web design is not a new concept by any means. In fact, the classic method of creating CSS shapes has been largely overshadowed by other HTML graphic solutions like Canvas and SVG. However, CSS shapes (at least the basic ones) are much...

read more
Hero Section with Custom Transitions and Animations

Hero Section with Custom Transitions and Animations

An engaging hero section is one of the more important aspects of any website. Adding smooth transitions and animations to showcase the hero section content is one way you can boost the quality of your hero section. In Divi, basic hero section transitions can be...

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
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
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
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
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
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
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
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
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
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
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
Animate Parallax Background Images with Scroll Effects

Animate Parallax Background Images with Scroll Effects

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...

read more
Envelope Animation with Divi’s Scroll Effects

Envelope Animation with Divi’s Scroll Effects

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...

read more
Stack and Animate Text using Scroll Effects

Stack and Animate Text using Scroll Effects

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....

read more
Gradient Background Animation in Divi (2 Ways)

Gradient Background Animation in Divi (2 Ways)

Gradient background animation can be a beautiful design technique for making background colors come to life on your website. It is a perfect solution for those who want something more lifelike than a static background color without having to resort to slow-loading...

read more
Add CSS Text Block Animations to Your Headline

Add CSS Text Block Animations to Your Headline

Your headline is one of your homepage’s most important parts. It’s usually the first piece of copy people read which makes it their first impression. Like any other first impression, you want it to be a good one. Now, if you’re looking for a creative way to showcase...

read more
8 Delayed Button Animations for your Header CTA

8 Delayed Button Animations for your Header CTA

Adding delayed button animations to any CTA can be an effective way to draw attention to visitors and, in turn, increase the likelihood of getting a click. In this tutorial, we will show you how to use Divi to create 8 delayed button animation for a custom header CTA....

read more
Animated Page Transitions with Divi’s Theme Builder

Animated Page Transitions with Divi’s Theme Builder

Normally, when visitors navigate from page to page on your Divi website, the transition happens instantly. Now, what if there’s a way to animate these page transitions? With Divi’s Theme Builder there sure is, without the need for any custom code! As soon as your...

read more
Animate Your Global Header

Animate Your Global Header

Your header is one of the most important parts of your website. It connects your pages, posts and calls to action. It’s also one of the things your visitors automatically go looking for, so they don’t waste any time finding what they’re looking for. If you’re looking...

read more
Recent Posts by Category Layout with Hover Effects

Recent Posts by Category Layout with Hover Effects

We are all used to seeing recent posts being displayed on a website. They are usually generated using the WordPress Recent Post widget or a plugin to show the most recently published articles on the blog. And they usually show up on the blog page, at the bottom of...

read more
Save 10% off Divi Theme Today!

Pin It on Pinterest