When opting for a fixed header on your website, you’ll automatically find yourself using Divi’s built-in position options. The fixed position option inside Divi allows you to stick any element to a specific location on your page. When using a fixed position, however,...
Win An iMac & A Divi AI Membership For Free!
Elegant Themes Tutorials
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...
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...
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...
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...
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...
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...
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...
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,...
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...
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...
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...
Expanding Layers Scroll Effect for Engaging App Illustrations
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...
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...
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...
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...
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,...
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...
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...
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...
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...
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...
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....
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....
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...
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...
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...
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...
Float Elements within a Section to Create a Dynamic Scrolling Effect
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...
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...
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...
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...
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...
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...
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...
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...
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...
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....
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...
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...
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...
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,...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
Add a Closable Slide-In Call to Action to Any Corner of Your Page
Having a slide-in call to action on your site is one of the least obtrusive ways to get your visitors attention. Most of the time they will simply ignore CTA or close it to continue browsing the page, but sometimes you will win them over. A slide-in call to action...
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...
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...
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...
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...
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...
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...
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...
Blend Your Header & Body Using Post Content Module & Section Dividers
By now, we’ve all gotten used to Divi’s built-in section divider. They help add that extra touch to the websites we build. They also serve as a smooth transition between two different sections, but with Divi’s Theme Builder, the approach to creating that transition is...
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...
Reveal Your Global Header While Scrolling Up & Hide While Scrolling Down
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,...
Multipurpose Sales Banner Design for Divi
A Free Divi layouts based on an ET Tutorial
5 Free Border Images for Divi
A free Divi layout based on an Et Tutorial
10 Free Fluid Section Backgrounds
A free Divi layout based on an ET Tutorial
Add One-Sided Box Shadows in Divi
A free Divi layout based on an ET Tutorial.
Unique Column Layouts in Divi
A free Divi layout based on an ET Tutorial
Vibrant Section Titles with Divi
A free Divi layout based on an ET Tutorial
Responsive Five Column Showcase Layout
A free Divi layout based on an ET Tutorial
Horizontal Pricing Tables with Divi
A free Divi layout based on an ET Tutorial
Add Motion to Your Section Dividers
A free Divi layout based on an ET Tutorial
Sleek Header Design with Parallelograms
A free Divi layout based on na ET Tutorial
Bold & Colorful Websites with Divi
A free Divi layout based on an ET Tutorial
Flat Web Design with Divi
A free Divi layout based on an ET Tutorial
Unique Feature Section in Divi with Icons
A free Divi layout based on an ET Tutorial
Minimal Website Layout for Divi
A free Divi layout based on an ET Tutorial
Divi’s Text Module for Creative List Designs
A free Divi layout based on an ET Tutorial
Divi Blog Page Grid Layout with Backgrounds
A free Divi layout based on an ET Tutorial
Creative Product Comparison Chart with Divi
A free Divi layout based on an ET Tutorial
Design an Attractive Subscribe Section with Divi
A free Divi layout based on an ET Tutorial
Add a Payment Calculator to Your Divi Site
A free Divi layout based on an ET Tutorial
Geometric Grid Layout in Divi
A free Divi layout based on an ET Tutorial
Creatively Use Symbols in Your Divi Web Design
A free Divi layout based on an ET Tutorial
Stunning Gallery Testimonials with Divi
A free Divi layout based on an ET Tutorial
Abstract Lines to Frame Your Content in Divi
A free Divi layout based on an ET Tutorial
Selectively Show Section Background Image
A free Divi layout based on an ET Tutorial.
Creatively Highlight your Membership Deals
A free Divi layout based on an ET Tutorial.
Think Outside The Box With Divi Box Shadows
A free Divi layout based on an ET Tutorial
Use Empty Sections to Create Unique Design Elements
A free Divi layout based on an ET Tutorial
Creative Navigation Header
A free Divi layout based on an ET Tutorial
Full Screen Divi Layout with Animated Scroll Button
A free Divi layout based on an ET Tutorial
Unique Diagonal Layout with Divi
A free Divi layout based on an ET Tutorial
Full Screen Sections with Scroll Links
A free Divi layout based on an ET Tutorial
Indirectly Apply Divi Section Dividers To Modules
A free Divi layout based on an ET Tutorial
Indirectly Apply Divi Section Dividers To Rows
A free Divi layout based on an ET Tutorial
Effective Use of Letter Spacing Layout
A free Divi layout based on an ET Tutorial
6 Abstract Gradient Hero Sections
A free Divi layout based on an ET Tutorial
Product Layout with Image Perspective
A free Divi layout based on an ET Tutorials