Image overlays continue to be a popular design asset when displaying images on your website. Not only do they offer a creative way to showcase images, but also they can make viewing images more fun and engaging for visitors, especially when you add custom animations...
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...
Divi’s sticky options allow you to effortlessly add interaction to the pages you create and design. If you’re looking for a way to mention multiple items without just creating a static list, you’ll enjoy this tutorial. Today, we’re showing you how to build an...
Designing business cards that flip on click can be a creative addition to any team member section or page on your website. Business cards are already a familiar and intuitive method for supplying concise information about a person working for a company. So it makes...
Learn how to create a seamless hover grid. The design is initially plain and clean. As soon as someone hovers one of the items, the background image is revealed and the module styles change along with it. This results in a beautiful hover experience.
One of the main goals of most websites is form submission. It is how companies get sales leads, email subscribers, and more. Effective web design can make form submission more engaging for visitors and one way to boost the engagement, even more, is to add additional...
Although websites that have scroll interactions isn’t for every type of business, knowing how to go the extra mile is particularly helpful to leave a good impression. With Divi, many things are already possible without having to touch a single line of code. Today’s...
Creating shapes using CSS in web design is not a new concept by any means. In fact, the classic method of creating CSS shapes has been largely overshadowed by other HTML graphic solutions like Canvas and SVG. However, CSS shapes (at least the basic ones) are much...
If you’re looking for a way to add a CTA that follows your visitors while they’re navigating through your website, you might consider going for a sticky footer bar. A sticky footer bar is used at the bottom of your browser and you can include any call to action of...
An engaging hero section is one of the more important aspects of any website. Adding smooth transitions and animations to showcase the hero section content is one way you can boost the quality of your hero section. In Divi, basic hero section transitions can be...
The versatility of Divi’s sticky options goes further than just using the settings for a sticky header. You can use it to trigger changes in your design as well. In this tutorial, for instance, we’ll use Divi’s sticky options to trigger image transition. The image...
A hero section is the eyecatcher of your website. It usually sets the tone for the rest of the website and shows visitors what they can expect. That’s why it can be helpful to make sure all focus is on the few elements you share in your hero section, such as the copy...
The way you design your header sets the tone for the rest of your website. That’s why it’s important to think of the way you add elements and interactions. Of course, you’ll want to include the basics like a logo and menu items, but chances are high you’ll want to...
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...
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....
Sticky sidebars for your product pages can be useful for boosting both user experience and revenue. It is a great way to keep essential product info, that important Add to Cart button, and/or other promotional offers in view as the user scrolls through the product...
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...
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...
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...
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...
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...
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...
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,...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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,...
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...
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...
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...
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,...
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...
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...
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...
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...
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...
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...
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...
