How to Use Transformed Motion Shapes as Backgrounds with Divi

How to Use Transformed Motion Shapes as Backgrounds with Divi

Divi’s new scroll effects are made for you to easily take your web design experience to the next level. Of course, you can apply it to elements within your section directly, but you can choose to add motion to underlying elements too. Going for an underlying approach allows you to keep content static while having background motion going on. In this tutorial, we’ll use transformed motion shapes as our underlying elements to create an animated section. We’ll handle two different examples but the possibilities are truly endless. 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.

Example #1

Desktop

Mobile

transformed motion shapes

Example #2

Desktop

transformed motion shapes

Mobile

transformed motion shapes

Download The Transformed Motion Shapes Layout for FREE

To lay your hands on the free transformed motion shapes 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!

General Steps

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.

  • Color 1: #ffffff
  • Color 2: #97c6fc
  • Gradient Type: Linear
  • Gradient Direction: 306deg
  • Start Position: 50%
  • End Position: 50%

transformed motion shapes

[…]

 



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