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