The number of Divi’s column constructions permit you to create mainly any design you be mindful. And even supposing the use of the column constructions of their unique shape is the simplest factor to do, you’ll be able to additionally take it one step additional by way of combining the design parts in a 6-column row with viewport gadgets.

One of the vital issues that you must create, for instance, is a collage. You gained’t have to make use of any symbol enhancing device in any respect! On best of that, you’ll be able to additionally permit every one of the most photographs to open in a separate lightbox. On this publish, we’ll display you the right way to do all the above the use of Divi’s integrated choices simplest.

Let’s get to it!

Preview

Earlier than we dive into the academic, let’s take a snappy take a look at the result on other display sizes.

viewport units

Manner

  • We’re doing away with all gutter width between the phase, row and columns so we will upload customized margin and padding to every module manually (the use of viewport gadgets)
  • Viewport gadgets be certain that the location of design parts stays the similar right through all desktop display sizes
  • We’re going to regulate the spacing settings of every design part in my view to check the full collage design
  • Due to the responsive choices in Divi, we will be certain that the above-mentioned settings don’t practice to pill and contact

Let’s Get started Developing

Backend Preview

This the outcome from a backend point of view:

viewport units

Upload New Phase

The very first thing it is very important do is create a brand new web page or open an present one and upload a typical phase to it.

viewport units

Upload New Row

Column Construction

Proceed by way of including a brand new row the use of the next column construction:

viewport units

Sizing

With out including any modules but, open the row settings and alter the sizing settings. That is a very powerful step on this educational. By means of doing away with all of the default margin and padding values between the phase, row and modules, we’re ready to manually upload spacing to each design part the use of viewport gadgets.

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

viewport units

Spacing

Upload some customized left and proper padding to the row as neatly.

  • Left Padding: 6.5vw
  • Proper Padding: 6.5vw

viewport units

Upload Name Textual content Module to Column 6

Upload Content material

Time to begin including modules! We’ll get started by way of including a identify Textual content Module to column 6. Come with some heading 2 reproduction of selection.

viewport units

Heading Textual content Settings

Then, move to the design tab and alter the heading textual content settings of the module.

  • Heading 2 Font: Battambang
  • Heading 2 Font Weight: Daring
  • Heading 2 Textual content Measurement: 4.2vw (Desktop), 10vw (Pill), 8vw (Telephone)
  • Heading 2 Letter Spacing: -1px

viewport units

Spacing

Upload some customized spacing values subsequent to make this row overlap the sixth and fifth column of the row.

  • Most sensible Margin: 10vw
  • Left Margin: -8vw (Desktop), 0vw (Pill & Telephone)
  • Proper Margin: -50vw (Pill & Telephone)

viewport units

Upload Description Textual content Module to Column 6

Upload Content material

The following module we’ll want in column 6 is an outline Textual content Module. Upload some content material of selection.

viewport units

Spacing

Then, move to the spacing settings and push this module to the left as neatly.

  • Most sensible Margin: 2vw
  • Left Margin: -8vw (Desktop), 0vw (Pill & Telephone)
  • Proper Margin: -50vw (Pill), -3vw (Telephone)

viewport units

Upload Button Module to Column 6

Upload Replica

The following and closing module wanted in column 6 is a Button Module. Upload some reproduction of selection.

viewport units

Button Settings

Then, move to the design tab and alter the button settings.

  • Use Customized Types for Button: Sure
  • Button Textual content Colour: #ffffff
  • Button Border Width: 1px
  • Button Border Colour: #000000
  • Button Border Radius: 0px
  • Button Letter Spacing: -2px

viewport units

viewport units

Spacing

And once more, we’ll want to make this module overlap column 5 and six by way of the use of customized margin values within the spacing settings.

  • Most sensible Margin: 2vw (Desktop), 5vw (Pill), 10vw (Telephone)
  • Left Margin: -8vw (Desktop), 0vw (Pill & Telephone)
  • Proper Margin: -50vw (Pill & Telephone)
  • Left Padding: 30px
  • Proper Padding: 30px

viewport units

Upload Symbol Module #1 to Column 1

Symbol Dimensions

Time to begin including all of the other symbol modules! The instance we’re recreating is 100% responsive when you’re simplest the use of photographs with 880px width and 1320 top. So, when you’re having a look to create the very same instance from scratch, you should utilize photographs with that exact set of measurement. Should you, then again, wish to make this paintings for any more or less set of symbol dimensions, you’ll have to regulate the viewport gadgets of every Symbol Module manually to suit the full design.

Add Symbol

Every one of the most 3 first columns will rely two Symbol Modules. Upload the primary Symbol Module to column 1.

viewport units

Spacing

Then, move to the spacing settings and building up the scale of the picture the use of viewport gadgets.

  • Most sensible Margin: 0.5vw (Pill & Telephone Simplest)
  • Backside Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Margin: -5vw (Desktop), 0.5vw (Pill & Telephone)
  • Proper Margin: -2vw (Desktop), 0.5vw (Pill & Telephone)

viewport units

Upload Symbol Module #2 to Column 1

Add Symbol

Add the second one Symbol Module in column 1 as neatly.

viewport units

Spacing

And alter the spacing settings of this module as neatly.

  • Most sensible Margin: 0.4vw (Desktop), 0.5vw (Pill & Telephone)
  • Backside Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Margin: -8.1vw (Desktop), 0.5vw (Pill & Telephone)
  • Proper Margin: 3.7vw (Desktop), 0.5vw (Pill & Telephone)
  • Left Padding: 3vw (Desktop), 0vw (Pill & Telephone)
  • Proper Padding: 3vw (Desktop), 0vw (Pill & Telephone)

viewport units

Upload Symbol Module #3 to Column 2

Add Symbol

Directly to the second one column! Upload a brand new Symbol Module and add a picture.

viewport units

Spacing

Proceed by way of the use of customized margin and padding values within the spacing settings to scale back the scale of the picture.

  • Most sensible Margin: 0.5vw (Pill & Telephone Simplest)
  • Backside Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Margin: -0.5vw (Desktop), 0.5vw (Pill & Telephone)
  • Proper Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Padding: 3vw (Desktop), 0vw (Pill & Telephone)
  • Proper Padding: 3vw (Desktop), 0vw (Pill & Telephone)

viewport units

Upload Symbol Module #4 to Column 2

Add Symbol

Upload a 2d Symbol Module to column 2 as neatly.

viewport units

Spacing

And alter the spacing settings right here as neatly.

  • Most sensible Margin: 0.5vw
  • Backside Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Margin: -0.5vw (Desktop), 0.5vw (Pill & Telephone)
  • Proper Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Padding: 3vw (Desktop), 0vw (Pill & Telephone)
  • Proper Padding: 3vw (Desktop), 0vw (Pill & Telephone)

viewport units

Upload Symbol Module #5 to Column 3

Add Symbol

Directly to the following and closing column. Upload the primary Symbol Module.

viewport units

Spacing

Alternate the spacing settings of the Symbol Module subsequent. Those values will assist building up the scale of the picture as you’ll be able to realize within the print display underneath.

  • Most sensible Margin: 0.5vw (Pill & Telephone Simplest)
  • Backside Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Margin: -2.5vw (Desktop), 0.5vw (Pill & Telephone)
  • Proper Margin: -17.5vw (Desktop), 0.5vw (Pill & Telephone)

viewport units

Upload Symbol Module #6 to Column 3

Add Symbol

Upload the following and closing Symbol Module in column 3.

viewport units

Spacing

And alter its complete place by way of including customized margin values. For responsive functions, we’re including this module to column 3 as a substitute of column 2.

  • Most sensible Margin: -26.7vw (Desktop), 0.5vw (Pill & Telephone)
  • Backside Margin: 0.5vw (Pill & Telephone Simplest)
  • Left Margin: -20.5vw (Desktop), 0.5vw (Pill & Telephone)
  • Proper Margin: 17.3vw (Desktop), 0.5vw (Pill & Telephone)

viewport units

Allow Lightbox for Symbol Module #1

After getting all of the photographs in position, you’ll be able to move forward and permit the lightbox possibility within the first Symbol Module’s settings.

  • Open in Lightbox: Sure

viewport units

Replica Lightbox Possibility & Follow to All Photographs in Phase

When you’ve enabled the lightbox possibility for the primary Symbol Module, you’ll be able to reproduction this feature and paste it to all of the different Symbol Modules within the phase.

viewport units

viewport units

Upload Border Radius to Symbol Module #1

Upload some rounded corners to the primary Symbol Module as neatly.

viewport units

Lengthen Border Radius to All Photographs in Phase

And lengthen those rounded corners to all of the Symbol Modules within the phase to avoid wasting time.

viewport units

viewport units

Preview

Now that we’ve long gone thru all of the steps, let’s take a last take a look at the result on other display sizes.

viewport units

Ultimate Ideas

The alternatives you have got with Divi’s new 6-column row are unending. On this publish, we’ve proven you the right way to create a surprising and distinctive collage the use of the 6-column row and viewport gadgets. If in case you have any query or ideas, remember to go away a remark within the remark phase underneath!

The publish How to Get Creative with Divi’s 6-Column Row & Viewport Units seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]