Win An iMac & A Divi AI Membership For Free!

Elegant Themes Tutorials

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
Synchronize Expanding Copy on Scroll

Synchronize Expanding Copy on Scroll

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

read more
Column-Colliding Hero Section on Scroll

Column-Colliding Hero Section 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...

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
Mark a New Section with Subtle Motion Shapes

Mark a New Section with Subtle Motion Shapes

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

read more
Progressively Flash Steps to a Process with Scroll Effects

Progressively Flash Steps to a Process with Scroll Effects

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

read more
Breakaway Image Transition with Scroll Effects

Breakaway Image Transition with Scroll Effects

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

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
Position Buttons Absolutely to Create Unique Button Layouts

Position Buttons Absolutely to Create Unique Button Layouts

Divi’s built-in position options are a convenient design tool for the precise positioning of any Divi element, including buttons. Most of the time, we rely on the default static position of a button that keeps with the flow of the document (or page). However, if we...

read more
Tell Your About Story on Scroll

Tell Your About Story on Scroll

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

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
Scroll Motion Effects You Can Add to Headlines

Scroll Motion Effects You Can Add to Headlines

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

read more
Add Slide-In Product Info to Your Product Page

Add Slide-In Product Info to Your Product Page

The way you design your product pages says a lot about your shop in general. Your product page’s design is an important part of the purchase experience, so going the extra mile is often worth it. If you’re looking to create a product page that is a bit more...

read more
Add a Dropdown Contact Form to Your Global Header

Add a Dropdown Contact Form to Your Global Header

When you’re building a custom header for your website, using Divi’s theme builder, you’ll find yourself looking for the ideal way to add a CTA. One way you can go about it is by adding a dropdown contact form. This will help you keep the overall look and feel of your...

read more
Dynamic HTML Sitemap

Dynamic HTML Sitemap

An HTML sitemap page can be useful for users looking to navigate your Divi site from a panoramic view. Basically, an HTML sitemap (like the name suggests) is a map of your site in HTML. The sitemap page usually contains an organized list of links to all the relevant...

read more
Add Highlighted Quotes Throughout Your Gutenberg Post

Add Highlighted Quotes Throughout Your Gutenberg Post

When writing a blog post, you’ll often find yourself wanting to quote someone or highlight a sentence used in a regular paragraph. Now, within the Gutenberg editor, you can add a quote block right off the bat, but it doesn’t provide you with as much design freedom as...

read more
Fixed Header with Divi’s Position Options

Fixed Header with Divi’s Position Options

With Divi’s new position options, turning your header into a fixed one is easier than ever. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website. In this tutorial, we’ll...

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
Two-Sided Sidebar Blog Post Template

Two-Sided Sidebar Blog Post Template

Although sidebars have been around for a long time, they’re still frequently used around the web. They help show different elements that are connected to the post, such as recommended posts and email optin forms, without neglecting the main focus, which is the actual...

read more
Highlight a Hovered Blurb Module by Blurring the Other Ones

Highlight a Hovered Blurb Module by Blurring the Other Ones

Whatever kind of website you’re building, chances are high that at some point, you’ll want to display a list of different services, steps and more. One of the easiest ways to approach creating such a list attractively is using Divi’s Blurb Module. Blurb Modules allow...

read more
Interactive Image Collage Using Divi’s Position Options

Interactive Image Collage Using Divi’s Position Options

Divi’s new position options open the door for creating unique image collage layouts using the absolute position property. This allows you to make more precise placements for each element of your design. And once you combine that with the countless combinations of...

read more
Frame a Product in Your Background Image

Frame a Product in Your Background Image

With Divi’s WooCommerce modules out there, there are tons of designs you can accomplish using Divi. In today’s Divi tutorial, we’ll try to inspire you with another design idea you can accomplish using Divi’s built-in options only. More specifically, we’ll show you how...

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
Change The Divi Shop Module’s Mobile Column Breakpoint

Change The Divi Shop Module’s Mobile Column Breakpoint

By default, as soon as you switch over to a mobile device, the shop module turns into a one-column layout. Now, if you’re looking to highlight each product individually, that’s great, but with the bigger smartphone screen sizes nowadays, you might want to allow two...

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
Replace Client Logos with Testimonials on Hover/Click

Replace Client Logos with Testimonials on Hover/Click

Looking for a way to add interaction to client logos and matching testimonials? With Divi’s responsive content feature, it’s now easier than ever to show different content in a module’s default state and on hover. In today’s Divi tutorial, we’ll demonstrate that by...

read more
Reveal Content on Hover with Expanding Corner Tabs

Reveal Content on Hover with Expanding Corner Tabs

It’s always fun to discover new and creative ways to engage users with your content using unique hover effects. One great way to do this is to reveal content on hover using expanding corner tabs. This allows the user to hover over a tab in the corner of a column or...

read more
Classic Typewriter-Inspired Blog Post Template

Classic Typewriter-Inspired Blog Post Template

Looking for a classic but creative way to display blog posts on your website? If so, you’ll love this Divi freebie. We’ve designed a classic typewriter-inspired blog post template that automatically applies to all blog posts on your website! Throughout this post,...

read more
Welcome Gate for Your Page in Divi

Welcome Gate for Your Page in Divi

A welcome gate is an effective way to boost conversions of any call to action on your site. In fact, welcome gates are a popular feature with plugins like OptinMonster for creating high-converting email optins. The basic idea behind a welcome gate is to hide the...

read more
Add a Bottom-Page Contact Form to All Pages

Add a Bottom-Page Contact Form to All Pages

When you’re busy setting up all pages you want to include on your website, chances are high you’ll want to include a contact form at the end of each page to make your visitors’ journey easier. With Divi, you can, of course, add a contact form to the page itself, but...

read more
Dynamic Author Box for Your Blog Post Template

Dynamic Author Box for Your Blog Post Template

Mentioning the post author in your blog posts is essential. Now, with Divi’s Theme Builder you can add a site-wide dynamic author box to your posts. You can also style the author box using Divi’s built-in options, this can leads to beautiful web design. In this...

read more
Style Divi’s Comments Module Inside a Blog Post Template

Style Divi’s Comments Module Inside a Blog Post Template

Designing a blog post template is pretty easy with the Divi theme builder. But there’s one thing that tends to get overlooked when designing blog templates, and that’s the comments section. Thankfully, Divi has a customizable comments module that can easily be added...

read more
Dynamically Add a Coupon Code Bar to Specific Product Pages

Dynamically Add a Coupon Code Bar to Specific Product Pages

When you’re running an online shop you’ve made with Divi and WooCommerce, you’ll occasionally want to show coupon codes on your website to increase the sense of urgency. Across the web, you’ll notice that many online shops share the coupon codes in a bar that’s stuck...

read more
Place Your Header Below Each Page’s First Section

Place Your Header Below Each Page’s First Section

Create and customize a header to match it with different needs you might have. In today’s tutorial, we’ll show you how to automatically place a custom header below each page’s first Divi section. This approach allows visitors to see the hero section of your pages...

read more
Fun Product Page Template for Kids’ Products

Fun Product Page Template for Kids’ Products

Kids’ product websites have a unique style. They tend to be fun, colorful and inspire a smile. Your WooCommerce store for kids’ products is now easier to create with the Divi theme builder and customizable woo modules. Why not make it a little more special with a...

read more
Add a Scroll Triggered Popup to Your Blog Posts

Add a Scroll Triggered Popup to Your Blog Posts

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

read more
Add Two Side-by-Side Buttons to Your Divi Global Header

Add Two Side-by-Side Buttons to Your Divi Global Header

Having clear calls to action on your pages is a necessity for most websites. And what better way to draw attention to some of your most important CTAs than by placing them in your header? In today’s tutorial, we’ll show you how to add two side-by-side buttons to your...

read more
Inline Login Form for a Custom Global Header

Inline Login Form for a Custom Global Header

Creating an inline login form for your header can be a wonderful boost to user experience. They are perfect for membership sites and online stores because it makes it really easy for users to login at any time or on any page of the site. In this tutorial, we are going...

read more
Dynamic Careers Job Listing Section

Dynamic Careers Job Listing Section

In a previous Divi tutorial, we’ve shown you how to create a completely dynamic open job position template with Divi’s Theme Builder and the Advanced Custom Fields plugin. In today’s tutorial, we’ll show you how you can dynamically feature the open job positions on...

read more
Dynamic Job Opening Post Template

Dynamic Job Opening Post Template

When you’re using the Divi Theme Builder in combination with dynamic content, you’ll quickly find yourself replacing plugins with self-made templates. In today’s tutorial, we’ll show you how to create a completely dynamic job opening post template using the Divi Theme...

read more
Dynamic Portfolio Project Template with Divi & ACF

Dynamic Portfolio Project Template with Divi & ACF

Looking for a way to streamline the way you create portfolio items on your website? If so, you’ll love this post. In this tutorial, we’ll show you how to create a dynamic portfolio project template with Divi’s Theme Builder and the ACF plugin. Building a portfolio...

read more
Pop Out Social Media Follow Buttons Bar

Pop Out Social Media Follow Buttons Bar

Social Media Follow buttons continue to be a popular addition to any website. Companies and individuals use these links to redirect users to their social media pages in hopes that visitors will follow them or subscribe to their channel. Normally, you see these buttons...

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
Dynamic Simple UX-Friendly Blog Post Template

Dynamic Simple UX-Friendly Blog Post Template

When sharing new blog posts on your website, it’s important to make the reading experience as easy as possible for your visitors. That means getting rid of as many distractions as possible, while still matching the branding on of your website. It’s also important to...

read more
Create a Mobile Collapsing Nested Menu

Create a Mobile Collapsing Nested Menu

A while back, we shared a mobile menu hack that helps you create a collapsing nested menu. We know many of you have used it, but with the new Divi Theme Builder, the approach becomes slightly different. In today’s tutorial, we’ll show you how to apply a mobile...

read more
Win an iMac

Pin It on Pinterest