Design a Fluid Hero Section in Divi

A website’s hero section is one of the best candidates for fluid design. Unlike traditional responsive design that adjusts at different breakpoints, fluid design scales seamlessly with the browser viewport and keeps the design consistent on any device.

In this tutorial, we are going to show you how to create an entire fluid hero section in Divi. The key to creating this fluid design is adding a fluid root font size to each of the modules used and then incorporating the em length unit (which is relative to the root body font size) throughout the module’s settings.

#tutorial #divi

Design a Fluid Hero Section in Divi

How to Emphasize Your Sticky Button in a Gorgeous CTA Section with Divi

When the Divi sticky options feature was released, the release post on our blog was accompanied by live demos that show you the versatility of this new feature. To help you understand sticky options better, and start using them in your design, we’ll show you how to recreate one of the live demo designs in this tutorial. The design we’re recreating focuses on emphasizing your sticky button. It’s is a text-based CTA section that allows you to highlight your call to action in a beautiful way. You’ll be able to download the JSON file for free as well!

#cta #divi #gorgeous

How to Emphasize Your Sticky Button in a Gorgeous CTA Section with Divi

How to Create a Responsive Table with Horizontal Scroll in Divi

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 designer to keep the spacing necessary for the table content (really narrow columns will cause the content to smush together too much). And second, it allows the user to view the easy-to-read table content on mobile devices.

In this tutorial, we are going to show you how to user Divi to build a completely custom table with horizontal scroll. We’ll show you how to add the horizontal scroll functionality to the columns that overflow the table container. Plus, we’ll even add some horizontal scroll buttons to the table to boost the UX. All this without a plugin!

#divi #horizontal

How to Create a Responsive Table with Horizontal Scroll in Divi

How to Seamlessly Include a Slide-In Column Contact Form in Your Divi Hero Section

When thinking of ways to include CTAs in your page design, you might consider including a 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.

If you’re looking for a seamless way to make this work inside Divi, you’re going to love this post. In this tutorial, we’ll show you how to add a slide-in column contact form to your hero section using Divi’s built-in options only. You’ll be able to download the JSON file for free as well!

#divi #slide-in column

How to Seamlessly Include a Slide-In Column Contact Form in Your Divi Hero Section

How to Automatically Scroll Horizontally When Scrolling Vertically with Divi & GSAP

The more you explore websites on the web, the more you come across some really customized on-page experiences. You might have been wondering how to achieve certain advanced functionality and the answer is often this: by using an animation JavaScript library. A popular animation library nowadays is GSAP. But just because you want to use a JavaScript Library for something, doesn’t mean you have to manually go through the HTML and CSS part as well. Divi can take over the larger part of your web design process; building and designing, which leaves you with more time to focus on custom functionality and animation. In today’s tutorial, for instance, we’re going to show you how to scroll horizontally when actually scrolling vertically using Divi and GSAP. This results in an advanced animation effect that you can customize however you want. You’ll be able to download the JSON file for free as well!

#divi #gsap

How to Automatically Scroll Horizontally When Scrolling Vertically with Divi & GSAP

How to Create Custom HTML5 Video Controls for a Video in Divi

HTML5 Videos are a convenient and effective way to display videos on any website. In fact, Divi uses the HTML5 video format to display videos in Divi using the Video Module. However, by default, these videos contain built-in controls (like play, mute, volume, etc.) that have a standard design that is dependant on your browser. But, if you want to enhance the design of these controls, you can actually build and style your own external controls for your HTLM5 video.

In this tutorial, we are going to show you how to create custom HTML5 video controls for a video in Divi. To do this, we will create and style the video and custom control buttons using the Divi Builder. Then we’ll add some custom Javascript to make it all work.

#html5 #divi #divi builder #javascript

How to Create Custom HTML5 Video Controls for a Video in Divi

How to Limit Scroll Effects to Column Containers with Divi

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 module scroll effects to column containers. This means that whatever kind of scroll effect you add, the module’s motion effect won’t surpass the column container. This results in a beautiful boxed and interactive design. We’ll recreate an example from scratch and you’ll be able to download the JSON file for free as well!

#divi #scroll effects

How to Limit Scroll Effects to Column Containers with Divi

How to Add a Styled & Inverted Cursor to Your Divi Page

One of the fastest ways to interact with visitors on your website is through their cursor. That’s where it usually all begins. User interaction on desktop is almost entirely based on the way visitors use their cursor to navigate through your pages. It’s also the one thing that allows them to trigger events, whether that’s a hover effect or a click. That’s why you’ll come across a ton of websites that customize the cursor with a specific goal in mind. Styling your cursor is helpful if you want to highlight a call to action, for instance. Today, we’ll show you how to do that within Divi. You’ll be able to download the JSON file for free as well!

#styled #divi

How to Add a Styled & Inverted Cursor to Your Divi Page

How to Build a Dynamically Positioned Popover with Popper.js and Divi

The popper.js library is a powerful positioning engine for tooltips and popovers. Today, we are going to harness the power of Popper.js in Divi to create a dynamically positioned popover when clicking a button. This will allow anyone to create a popover using Divi elements to display any content they want when clicking a button. Plus, the popover content will automatically adjust its position to preserve the most ideal visibility as the user interacts with your page.

#dynamically #divi #popper.js

How to Build a Dynamically Positioned Popover with Popper.js and Divi

Create a Floating Contact Section with Divi Scroll Motion Effects

Every website needs a contact section, but that doesn’t mean you need to go for a standard design. With Divi’s scroll effects, you can create a floating contact section that will stand out. Improve your user interaction with a vertical scrolling contact section layout that will invite visitors to engage with your contact form. In this post, we’ll show you how to create a full width floating contact section that you can add to any page. You could even add it at the top of a site-wide footer with the Divi Theme Builder.

Below, you’ll find a free downloadable folder with the JSON layout to upload to your own Divi Library. We’ve also included a PSD template to help you recreate the map background, plus an SVG of the map pin so you can personalize it with your own colors.

#divi #motion #effects

Create a Floating Contact Section with Divi Scroll Motion Effects

How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

In the past, we’ve shared different types of headers you can create with Divi and the Divi Theme Builder, but to help you take your header design even further, we’ll show you how to create a custom-animated hamburger menu as well.

#stagger-animated #menu #divi #anime.js

How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

Introducing Divi's Global Color System!

Today we are excited to release Global Colors for Divi, a new dynamic color system that allows you to create and control colors across your entire website. Now you can build your own dynamic color palette of global colors. When you change a global color, all elements using that color are updated. That means you can control your entire website’s color scheme from a single location while using the builder; adding and managing colors as you see fit.

#global colors #divi

Introducing Divi's Global Color System!

How to Change Your Sticky Logo on Scroll with Divi

To lay your hands on the free global header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

#divi #email

How to Change Your Sticky Logo on Scroll with Divi

How to Design Business Cards with Flip Animation on Click to Showcase Your Team in Divi

Business cards are already a familiar and intuitive method for supplying concise information about a person working for a company. So it makes sense to offer that same design on the web. Plus, the information provided on each card can become even more dynamic and interactive, allowing the user to copy info and/or click links within the business card.

In today’s live stream, we are going to show you how to design a unique business card in Divi that also has the functionality of flipping over on click to reveal the information about the person, just like a real business card.

#flip #design #divi

How to Design Business Cards with Flip Animation on Click to Showcase Your Team in Divi

How to Add a Dynamic Site Title and Tagline to a Divi Global Header

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 reason is to boost your brand by including vital info about your site where everyone will see it.

In this tutorial, we’ll show you how to add a dynamic site title and tagline to a Divi global header. This solution will pull the site title and tagline from the backend of WordPress dynamically. Plus, you will have all the powerful design options of Divi to customize the title and tagline however you want!

#divi #dynamic #divi global header

How to Add a Dynamic Site Title and Tagline to a Divi Global Header