Divi Changes Everything. Give It A Test Drive!

Elegant Themes Tutorial Layouts

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’s Position Options to Create Image Bundles

Divi’s Position Options to Create Image Bundles

Whether you or looking for a fresh new look for an image gallery or just wanting a nice display for product images, this tutorial should help. Normally, when adding images to a Divi website, we may limit the design to one image per column. While this is traditionally...

read more
Vertical Navigation Menu

Vertical Navigation Menu

Vertical navigation menus can come in handy for certain websites that need more menu items at the forefront. Horizontal menus can be difficult to fit all the menu links needed, especially on smaller browser widths. In this tutorial, we are going to show you how to...

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
Scrollable Portfolio Navigation List

Scrollable Portfolio Navigation List

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

read more
Elegant Themes Dropdown Menu

Elegant Themes Dropdown Menu

Ever since Divi’s Theme Builder has come out, the way we design headers and footers throughout our websites with Divi has become easier than ever. Everything can be customized and you can obtain the exact menu you have in mind without ever having to leave the...

read more
Mobile Viewports Using Rotated Copy

Mobile Viewports Using Rotated Copy

When designing a website, you have an important choice to make at the very beginning: “What device am I going to design for first?” Often, the answer is desktop. But just because you design for desktop first, doesn’t mean your mobile design can’t be as thorough. By...

read more
WooCommerce Product Category Page

WooCommerce Product Category Page

Category pages are an important part of any eCommerce site. Clients browse product categories to find what they need. That’s why your category pages need to look just as good as your product pages. With Divi’s Theme Builder, creating category page templates is easier...

read more
Divi Mobile Contact Bar

Divi Mobile Contact Bar

With the world living on mobile devices, it makes sense to provide clickable contact links on your website that take advantage of the mobile experience. These contact links, like a click-to-call link, can jumpstart a call on your mobile phone in a single click....

read more
Boost Your CTA with Scroll Effects

Boost Your CTA with Scroll Effects

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

read more
Fixed Audio Bar in Divi Header

Fixed Audio Bar in Divi Header

If you’re hosting a podcast website with Divi, chances are high you’re using the built-in Audio Module already. Now, if you’re looking for a special way to put your latest episode in the spotlight, you’re going to love this tutorial. Today, we’ll show you how to...

read more
3-Step Sales Funnel with Divi

3-Step Sales Funnel with Divi

Sales funnels are the most important and effective methods of selling through a website. A well-designed sales funnel will help capture leads, improve conversions, and increase profits. Building effective sales funnels is easy to do with Divi. In this article, we’ll...

read more
Author Page Template

Author Page Template

Author pages used to be difficult to customize. With the Divi Theme Builder, that’s no longer an issue. You can personalize not only author pages but also category pages, search results pages and more. In this post, we’ll show you how to create a dynamic author page...

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
Implement a Dark Mode Toggle

Implement a Dark Mode Toggle

Dark mode continues to grow in popularity as a convenient option for users to experience the web with less strain on the eyes. Let’s face it, we all tend to spend more time looking at screens than we probably should, so any additional comforts to the user experience...

read more
Dynamic Product Benefit Grid

Dynamic Product Benefit Grid

The way you design your product page has an immediate impact on your visitors’ behaviour. A well-designed and customized product page design can make it easier for visitors to decide if they want to purchase your product. If you’re looking for a way to make your...

read more
Dynamic Site Title and Tagline

Dynamic Site Title and Tagline

Knowing how to add a dynamic site title and tagline to a Divi Global Header will come in handy when building Divi websites. And there are a few good reasons that one would do it. For one, not every site has a logo. A site title is a good logo replacement. Another...

read more
Save 10% off Divi Theme Today!

Pin It on Pinterest