Black Friday is Coming! Reserve Your Free Prize & Huge Discount!

Elegant Themes Tutorial Layouts

Sticky Promo Video with a Show/Hide Toggle

Sticky Promo Video with a Show/Hide Toggle

A promo video is a wonderful marketing tool for promoting your products and services to all those visitors who would rather just watch a video than explore your page for information. And, if you are confident that your video will help boost conversions, it is a good...

read more
Pick Up Divi Sticky Header

Pick Up Divi Sticky Header

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

read more
Comments Toggle for Your Blog Post Template

Comments Toggle for Your Blog Post Template

Comments are an important part of any blog post template. However, for some visitors, a lengthy comments section can become a problem whenever they are trying to scroll through the rest of the content on the post. Creating a comments toggle is a great solution to this...

read more
Sticky Sidebar for Your Blog Post Template

Sticky Sidebar for Your Blog Post Template

When creating any kind of website, chances are high you’ll want to occasionally blog on that website too. Besides needing a blog page that features all your blog posts in a list form, you’ll want to have a blog post template that you can automatically assign to the...

read more
Custom Testimonial Tabs

Custom Testimonial Tabs

For many businesses, testimonials are one of the key arguments to get new clients. That means paying a bit of extra attention to testimonials on your website will never go to waste. Within Divi, there are many different ways to share testimonials, using the Divi...

read more
Add Sticky Product Images to Your Product Page Template

Add Sticky Product Images to Your Product Page Template

When it comes to buying products online, great product images are essential to closing the sale. That’s why most product pages have those product images at the top of the page so it is the first thing buyers see. However, as the user scrolls down the page to view more...

read more
Display Post Estimated Reading Time and Word Count

Display Post Estimated Reading Time and Word Count

Some people (including me) appreciate a little heads up on the length of a blog post or, more importantly, how much time is it going to take to read. A great way to do this is to display an estimated reading time and/or word count at the top of your blog posts. You...

read more
Sticky CTA Menu as you Scroll

Sticky CTA Menu as you Scroll

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

read more
Stack Rows on Scroll with Divi’s Sticky Options

Stack Rows on Scroll with Divi’s Sticky Options

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

read more
Combine a Scroll Progress Bar with a Fixed Navigation Menu

Combine a Scroll Progress Bar with a Fixed Navigation Menu

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

read more
Reveal a Column CTA in a Sticky State

Reveal a Column CTA in a Sticky State

At a certain point when you’re creating a page design, you might run into a list of services, courses, or something similar that you want to share in an interactive way. The design you’re using for your list content plays a very important role in how your visitors...

read more
Vertical Sticky Timeline Layout

Vertical Sticky Timeline Layout

Creating a vertical sticky timeline can be extremely useful for categorizing content by year and/or month as the user scrolls down the page. The sticky date elements remain fixed beside the content for a convenient UX boost that users will appreciate. The keys to this...

read more
Change Your Sticky Logo on Scroll

Change Your Sticky Logo on Scroll

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

read more
Absolute-Positioned Bottom Bar on Your Hero Section

Absolute-Positioned Bottom Bar on Your Hero Section

The way you structure elements inside your hero section can get tricky sometimes. You want to have a good balance, without having to drastically reduce the amount of content you want to share. Luckily, some streamlined approaches have proven their worth across the...

read more
Sticky Email Optin in Divi

Sticky Email Optin in Divi

Divi’s sticky position options allow you to make any element on your page sticky. This allows you to fix elements on the page at certain intervals as the user scrolls down the page so they stay visible longer. And for you bloggers out there, it makes a lot of sense to...

read more
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
Custom Image Overlays

Custom Image Overlays

Image overlays are great for engaging visitors by revealing additional content and design elements when hovering over the image. Because this is such a popular design feature, there are many plugins out there dedicated to creating image overlays. However, depending on...

read more
Custom Show More Toggles

Custom Show More Toggles

Show more toggles can come in handy for a lot of different applications on a website. Traditionally, show more toggles are used to show more text when clicking a show more link (like read more toggles). This is helpful for keeping the initial design more compact and...

read more
Show Images From Multiple Instagram Accounts

Show Images From Multiple Instagram Accounts

Instagram is an excellent way to increase your brand awareness. You can even differentiate your content and post different images on each channel. However, featuring multiple Instagram feeds on your website can be tricky. Smash Balloon is a handy plugin that will help...

read more
Create a Sticky Header with Divi’s Sticky Options

Create a Sticky Header with Divi’s Sticky Options

The way we use the Divi Theme Builder when setting up a website has sped up our workflow and made everything easier. Although we were able to create customized headers from day one ever since the Divi Theme Builder came out, one thing has been requested continuously,...

read more
Add Advanced Text Animations

Add Advanced Text Animations

Divi’s built-in animations provide tons of possibilities when it comes to adding that extra edge to your website. These animations, however, allow you to add one animation to one container at a time. While in most cases this is usually more than enough, there are...

read more
Change the Style of Multiple Elements on Hover or Click

Change the Style of Multiple Elements on Hover or Click

Eventually, in the world of web design, coders and non-coders alike will look to add more advanced customizations and functionality to their Divi websites. Usually, this involves using Javascript/JQuery to change the style of elements on the page for different...

read more
Clickable Accordion Using Sticky Page Headings

Clickable Accordion Using Sticky Page Headings

Divi’s new sticky position options open the door for many new and exciting design possibilities. In this tutorial, we are going to show you how to combine Divi’s sticky position options with smooth scrolling anchor links to create an accordion-like way to index and...

read more
Custom eCommerce Mega Menu

Custom eCommerce Mega Menu

When building an eCommerce website using Divi and WooCommerce, there are tons of ways to customize the overall look and feel of your website. Divi’s WooCommerce modules in combination with the Divi Theme Builder allow you to build templates for your product pages,...

read more
Split Screen Blog Post Template

Split Screen Blog Post Template

When creating a website, chances are high you’re going to include a blog page and blog posts on it. Of course, the most important part of a blog strategy is creating high-quality blog post content, but the design part of it all plays a big part in your strategy’s...

read more
Global Presets to Streamline Blog Post Design

Global Presets to Streamline Blog Post Design

Creating content for your blog is hard enough without having to worry about design. That’s why it is important for your site to have the design elements readily available (or pre-designed) so that you can be more focused on creating amazing content. Sure, a...

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
Add Post Category Menu Widgets To Global Footer

Add Post Category Menu Widgets To Global Footer

When you’re building a custom footer inside Divi’s Theme Builder, there are several ways to approach adding the footer items. You could go for a module-based footer, where you add page footer items inside Text Modules with proper links, but you could also decide to...

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
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
Slide-In Column Contact Form

Slide-In Column Contact Form

When thinking of ways to include CTAs in your page design, you might consider including a slide-in contact form in your hero section. This approach allows people to immediately get in touch with you without having to navigate any further on your website.

read more
Slide Down Push Menu

Slide Down Push Menu

Large headers with a lot of navigation links can take up a lot of valuable real estate on your site (especially above the fold). That’s why menus that popup and slide-in are becoming more and more popular. Most of the time, menus that slide in to view stay above the...

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
Reading Progress Bar for Blog Posts

Reading Progress Bar for Blog Posts

Adding a Reading Progress Bar (or scroll indicator) to your blog post template is a smart way to showcase a user’s reading progress for a given article. The idea is to display a fixed progress bar at the top of the post that directly correlates with the user’s scroll...

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
Showcase Blog Post Categories in Your Divi Header

Showcase Blog Post Categories in Your Divi Header

When creating your global header, chances are high you’re going to include a blog menu item. If you don’t have many blog post categories on your website, going for one blog menu item might be enough. However, if you have a set of different categories and you want to...

read more
Fixed Sidebar in Your Blog Post Template

Fixed Sidebar in Your Blog Post Template

Choosing to add a sidebar to your blog posts is entirely up to you. Some bloggers choose to not use a sidebar at all. This tutorial is for those of you who prefer using a sidebar but want to make it look a little different. Usually, sidebars are statically positioned,...

read more
Dynamic Post Info Bar Post Template

Dynamic Post Info Bar Post Template

Adding dynamic content to your blog post template is essential for providing things like the post title, metadata, featured image, etc. Normally, these dynamic elements are placed as normal static elements within the design of the layout. However, it may be helpful to...

read more
Virtual Summit Landing Page

Virtual Summit Landing Page

Promoting a virtual event involves a number of promotional strategies. Creating an inviting landing page is one of them. Creating a landing page for your virtual summit is the perfect way to make your audience curious. With the right combination of sections, you can...

read more
Vertically Stack Woo Gallery Images

Vertically Stack Woo Gallery Images

By default, as soon as you add gallery images to your WooCommerce products, they’ll appear horizontally below your product’s featured image on the frontend of your product page design. In some specific designs, vertically stacking these woo gallery images might be...

read more
Sliding Push Sidebar in Divi

Sliding Push Sidebar in Divi

Sidebars can be great, but they can also be a waste of space. That’s why creating a sliding push sidebar can be a perfect option for those looking to have a sidebar that doesn’t distract the user from the main content of the page. Moreover, this kind of a sidebar...

read more
Add a Label to a Menu Item

Add a Label to a Menu Item

When building your website’s header, paying special attention to your visitors’ behavior can help boost clickthrough rates. Not only should your header look good, but it should also help guide visitors to the most important pages on your website. A frequently used...

read more
Column Outlines to Emphasize Design Grid

Column Outlines to Emphasize Design Grid

Divi’s built-in element structure can be used in traditional ways to define and style different sections, rows, columns and modules. But, they can also be used creatively to enhance the design structures on your page. In this tutorial, we’ll show you how to use column...

read more
Divi Black Friday Sale is coming...Win an iMac!

Pin It on Pinterest