Friday , October 18 2019
Home / Uncategorized / How to use the new Divi column structures to create stunning section transitions

How to use the new Divi column structures to create stunning section transitions



Every week we provide you with new free Divi layout packages that you can use for your next project. For one of the layout packages, we also share a use case that will help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we'll show you how to use the new Divi column structures to create stunning section transitions. We will combine different column structures with some of Divi's integrated options to bring the design of our page to the next level.

We're going now!

Preview

Let's start by taking a look at the three different examples we will create from scratch using only the integrated Divi options. These examples are equally valid on smaller screens.

section transitions

Use the landing page of Divi & # 39; s Makeup Artist Layout Pack

We will use the landing page of Divi & # 39; s Makeup Artist Layout Pack. If you want to check the layout package, go to the following blog post. Although we are demonstrating this tutorial using a specific layout package, you can easily use the techniques on other layouts as well.

Section Transition n. 1

section transitions

Add new section

Locate

Open the landing page for the Artist Layout Makeup Pack with Divi & # 39; s Visual Builder. So, add a new regular section right under the hero section:

section transitions

Spacing

Remove all the default spaces in the next section:

  • Upper filling: 0 px
  • Lower filling: 0 px

section transitions

Add new line

Column structure

Continue by adding a new line to the section with the following column structure:

section transitions

sizing

Also increase the line width:

  • Make This Row Fullwidth: Yes
  • Use custom channel width: yes
  • Gutter width: 0

section transitions

Spacing

Remove the next default top and bottom fill:

  • Upper filling: 0 px
  • Lower filling: 0 px

section transitions

Filter

To make the row more vivid, saturation in the filter settings increases:

section transitions

Add the divider module # 1 to column 1

Hide divider

To create the first square in our project, we will add a divider module to column 1. Disable the & # 39; Show Divider & # 39; option.

section transitions

Gradient background

Next, add a gradient background to the divider module:

  • Color 1: rgba (255,255,255,0)
  • Color 2: rgba (176,182,219,0,34)

section transitions

Spacing

To create the square, change the Spacing values:

  • Upper margin: -120 px
  • Upper padding: 120 px
  • Bottom padding: 120 px

section transitions

Clone Divider Module & Place in Column 2

Once you have finished editing the DIvider module, clone it and place it in the second column.

section transitions

Change gradient background

Some changes must be made to this duplicate, starting with the gradient background:

  • Color 1: rgba (228,237,234,0,58)
  • Color 2: rgba (255,255,255,0)

section transitions

Change spacing

Also change the Spacing settings. This will increase the distance between this divider module and the one in the first column.

  • Top margin: 142px
  • Upper padding: 120 px
  • Bottom padding: 120 px

section transitions

Clone Divider Module # 1 Twice and Place in Column 3 & 5

Clone the Divider Module twice purple and place the duplicates in columns 3 and 5.

section transitions

Clone Divider Module # 2 and Place in Column 4

Clone the green divider module and place it in column 4.

section transitions

Hide divider module in columns 3, 4 and 5 on tablet and phone

Open the divisor in column 3

Of course, we want these section transitions to look just like the smaller screen sizes. That's why we hide some of the modules we used. Start by opening the divider module settings in column 3.

Hide on tablet and phone

Go to the Advanced tab and disable the form on your phone and tablet.

section transitions

Copy styles of visibility

We will also have to hide the partitions in columns 4 and 5. To speed up the process, copy the visibility settings of the divisor in column 3:

section transitions

Paste styles of visibility

And paste them into the divider modules in columns 4 and 5.

section transitions

Section Transition n. 2

section transitions

Add new section

Locate

To create the transition of the second section, add a new section here:

section transitions

Top Divider

Open the section settings and add the following divider at the top:

  • Dividing style: find in the list
  • Dividing color: #ffffff
  • Divider height: 236px
  • Divider flap: vertical
  • Divider arrangement: at the top of the section content

section transitions

Lower divider

In the same way, also add a bottom divider:

  • Dividing style: find in the list
  • Dividing color: #ffffff
  • Divider height: 236px
  • Divider arrangement: at the top of the section content

section transitions

Spacing

Change the following Spacing settings:

  • Upper margin: 100px
  • Bottom margin: 100px
  • Upper filling: 0 px
  • Lower filling: 0 px

section transitions

Add new line

Column structure

It's time to add a line to the new section! Choose the following column structure:

section transitions

sizing

Without adding modules, open the row settings and change the width:

  • Make This Row Fullwidth: Yes
  • Use custom channel width: yes
  • Gutter width: 1

section transitions

Spacing

Also remove all default top and bottom pads:

  • Upper filling: 0 px
  • Lower filling: 0 px

section transitions

Add the divider module # 1 to column 1

Background color

Next, add a divider form to the first column. Open your settings and add a background color:

  • Background color: rgba (176,182,219,0,34)

section transitions

Divider color

The color of the divider also changes:

section transitions

Divider style

Next, go to the Styles settings and use the following divider style:

section transitions

Divider weight

The weight of the divider should be as follows:

section transitions

Spacing

Last but not least, increase the size of the divider module using the custom padding:

  • Upper padding: 50px
  • Bottom padding: 50px

section transitions

Clone Divider Module & Place in Column 2

Once you're done with the divider module in the first column, clone it and place the duplicate in the second column.

section transitions

Change background color

Change the background color of this duplicate accordingly:

  • Background color: # e4edea

section transitions

Clone Divider Module # 1 and Place in Column 3 & 5

Continue by cloning the purple divider module twice and placing the duplicates in columns 3 and 5.

section transitions

Clone Divider Module # 2 and Place in Column 4

Clone the green divider module and place the duplicate in column 4.

section transitions

Hide divider module in columns 3, 4 and 5 on tablet and phone

Hide on tablet and phone

We will do the same thing we did for the first example of the section's transition. Open the divider module settings in column 3 and hide it on your phone and tablet.

section transitions

Copy styles of visibility

Copy these styles of visibility.

section transitions

Paste styles of visibility

And paste them into the divider modules in columns 4 and 5.

section transitions

Section Transition n. 3

section transitions

Add new section

Locate

To add the last section transition to your page, add a new section here:

section transitions

Top Divider

Open the section settings and add a top divider:

  • Dividing style: find in the list
  • Dividing color: #ffffff
  • Divider height: 150px
  • Divider arrangement: at the top of the section content

section transitions

Lower divider

Add one later:

  • Dividing style: find in the list
  • Dividing color: #ffffff
  • Divider height: 150px
  • Divider flap: vertical
  • Divider arrangement: at the top of the section content

section transitions

Spacing

So go to Spacing settings and make some changes:

  • Upper margin: 100px
  • Bottom margin: 100px
  • Upper filling: 0 px
  • Lower filling: 0 px

section transitions

Add new line

Column structure

The line we need in this section has the following column structure:

section transitions

sizing

Without adding any form, open the line settings and increase the width of your line:

  • Make This Row Fullwidth: Yes
  • Use custom channel width: yes
  • Gutter width: 1

section transitions

Spacing

Remove all the default top and bottom pads below:

  • Upper filling: 0 px
  • Lower filling: 0 px

section transitions

Add the divider module # 1 to column 1

Hide divider

Continue by adding a divider module to the first column. Disable the & # 39; Show Divider & # 39; option.

section transitions

Background color

Add a background color to the divider instead:

  • Background color: rgba (176,182,219,0,34)

section transitions

Spacing

Increase the size of the form using the upper and lower spacing:

  • Upper padding: 100 px
  • Lower padding: 100 px

section transitions

Clone Divider Module & Place in Column 2

Change background color

Clone the divider module in the first column and place the duplicate in the second column. Open your settings and change the background color:

  • Background color: rgba (228,237,234,0,58)

section transitions

Clone Divider Module # 1 and Place in Column 3 & 5

Clone the purple divider module twice and place it in columns 3 and 5.

section transitions

Clone Divider Module # 2 and Place in Column 4

Clone the green divider module and place the duplicate in column 4.

section transitions

Hide divider module in columns 3, 4 and 5 on tablet and phone

Hide on tablet and phone

Hide the divider module in column 3 on tablet and phone.

section transitions

Copy styles of visibility

Copy these styles of visibility.

section transitions

Paste styles of visibility

And paste them on the divider module in columns 4 and 5 and you're done!

section transitions

Preview

Now that we have followed all the steps, let's take a final look at the three different examples we have created.

section transitions

Final thoughts

In this post on the use case, we showed you how to use the new Divi column structures to create stunning section transitions. This tutorial is part of the Divi initiative in the design process, in which we try to put something in your design toolbox every week. If you have any questions, be sure to leave a comment in the comments section below!


Source link

Leave a Reply

Your email address will not be published.