Download a FREE Colorful Spatter Animation Hero Section for Divi

Download a FREE Colorful Spatter Animation Hero Section for Divi

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 way to approach it is by adding a colorful spatter animation to your hero section’s background. The focus will still remain on the written copy and CTA you provide. In this tutorial, we’ll show you how to create a beautiful colorful spatter animation section with Divi’s built-in settings. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

spatter animation

Download The Spatter Animation Hero Section Layout for FREE

To lay your hands on the free spatter animation hero section layout, 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating!

Add New Section

Gradient Background

Start by adding a new section to the page you’re working on. Open the section settings and apply a gradient background of your choice.

  • Color 1: #070a49
  • Color 2: #6f00f7
  • Gradient Type: Linear
  • Gradient Direction: 148deg

spatter animation

Sizing

Move on to the section’s design tab and add a min height to the sizing settings. This will turn our section fullscreen.

spatter animation

[…]

 



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top