The right way to Create Overlapping Animations on Extend with Divi

A large a part of your site’s good fortune is determined by whether or not or no longer you’re ready to provoke your guests. No longer best along with your merchandise or services and products, but in addition with the way in which you keep in touch and the way well-designed your site is. As a result of let’s face it, web pages are ceaselessly first impressions. And very similar to another more or less first influence, you need it to go away a excellent aftertaste.

Now, when you’re in search of a singular strategy to put a few of your content material within the highlight, developing refined overlapping animations could be simply what you’re in search of. Those refined overlapping animations are more or less like a slideshow in your guests. They don’t must scroll or click on on anything else, the content material simply displays up in a sublime means.

Let’s get to it!

Preview

Sooner than we dive into the educational, let’s take a snappy take a look at the end result throughout other display screen sizes.

Desktop

Cellular

Way

We’ll get started off by means of including the entire design parts we want in a vertical order, with out the overlap
As we’re including the entire design parts, we’ll additionally upload customized animations with a undeniable animation extend
Those animation delays will best make sense whenever you’ve long past during the ultimate a part of the educational which makes a speciality of overlaps
Crucial a part of this instructional is the use of formed Divider Modules with the similar background colour because the phase to make row content material ‘disappear’ on extend
You’ll be able to practice this option to any more or less design you’re running on as soon as you recognize the other steps which can be vital to make the method paintings

Let’s Get started Growing!

Upload New Phase

Background Colour

Get started by means of developing a brand new web page or opening an current one and upload a typical phase to it. Open the phase settings and upload a background.

Background Colour: #f3f3ec

Upload Row #1

Column Construction

Proceed by means of including a brand new row in your phase the use of the next column construction:

Sizing

With out including any modules but, open the row settings and make allowance the row to take in all the width of the display screen. The explanation why we’re doing that is to do away with the entire default pixel spacing. Within the upcoming steps, we’ll upload the entire house we want the use of a viewport unit as a substitute.

Make This Row Fullwidth: Sure
Use Customized Gutter Width: Sure
Gutter Width: 1

Upload Textual content Module to Column

Upload H2 Content material

Let’s get started including modules! The primary module we want is a Textual content Module with some H2 content material. Keep in mind that this module will ‘disappear’ after a couple of seconds, so you need to stay it brief, related and rememberable.

H2 Textual content Settings

Then, pass to the design tab and alter the H2 textual content settings.

Heading 2 Font: Poppins
Heading 2 Textual content Colour: #333333
Heading 2 Textual content Dimension: 5vw

Spacing

Create the gap you need the use of some left and proper padding within the spacing settings.

Left Padding: 15vw
Proper Padding: 39vw

Upload Divider Module to Column

Visibility

Directly to the following module, which is a Divider Module. We’re the use of this module to make the Textual content Module ‘disappear’. There are 4 issues we’ll want for that; a background colour (this is in the similar colour because the phase so you’ll be able to’t realize it), sufficient padding (to ensure you’ll be able to overlap the entire content material within the earlier module), a vertical overlap (to hide up all the module space), and an animation extend (to present the primary module time to have its shine sooner than taking on). Whenever you upload the Divider Module, be sure you disable the ‘Display Divider’ choice.

Display Divider: No