The new Divi transform options have opened a ton of new doors towards creating visually-appealing web design. It brings us one step closer to not needing any image editing software when designing a website from scratch. We can transform it to look exactly the way we want to while still having a 100% responsive design.

In this post, we’re going to use the new transform options to beautifully stack portfolio items. This is a great approach for showcasing previously made websites, for instance. We’ll also make sure the images stay right where they are, no matter what screen size visitors are using. We hope this tutorial inspires you to get creative with Divi’s new transform options when customizing a website to your needs.

Let’s get to it!

Preview

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

stack portfolio items

Let’s Start Recreating!

Add New Section

Gradient Background

Start by adding a new section to your page. Open the section settings and add a gradient background to it.

  • Color 1: #f4f4f4
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 30%
  • End Position: 30%

stack portfolio items

Spacing

Then, go to the design tab and modify the custom padding values in the spacing settings.

  • Top Padding: 0px (Desktop), 18vw (Tablet), 40vw (Phone)
  • Bottom Padding: 0px (Desktop), 18vw (Tablet), 40vw (Phone)

stack portfolio items

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

stack portfolio items

Sizing

Without adding any modules yet, open the row settings and change the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

stack portfolio items

Spacing

Then, go to the spacing settings and remove the top and bottom default padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

stack portfolio items

Display

We’re also making sure both columns appear next to each other on smaller screen sizes. To do that, we’ll need to add one single line of CSS code to the main element of the row.

display: flex;

stack portfolio items

Add Image Module #1 to Column 1

Upload Image

We can now start adding the different modules! For the sake of being able to follow this tutorial, go ahead and save the following print screen to your computer:

Upload the print screen to an Image Module in the first column.

stack portfolio items

Sizing

Then, go to the design tab and enable the ‘Force Fullwidth’ option. Once you do, the image will take up the entire width of the column.

  • Force Fullwidth: Yes

stack portfolio items

Spacing

To shrink the size of the image, we’re going to add some custom left and right margin. You’ll notice that we’re using a viewport unit to make sure the size of the image remains intact, no matter the screen size.

  • Top Margin: -10vw
  • Left Padding: 11vw
  • Right Padding: 11vw

stack portfolio items

Border

Add ‘2vw’ to each one of the corners in the border settings next.

stack portfolio items

Box Shadow

Along with a box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

stack portfolio items

Transform Translate

Now we can start transforming the image! Add the following values to the transform translate tab of the transform options:

  • Bottom: -26vw
  • Right: -2vw

The values you add here depend on the width and height of your image so if you’re using a different image, you’ll have to modify the values accordingly. Make sure you’re using viewport units to make sure the position of the image remains the same across all screen sizes.

stack portfolio items

Transform Rotate

Move on to the transform rotate tab and rotate the image accordingly:

  • Left: 24deg
  • Center: 46deg
  • Right: -7deg

stack portfolio items

Translate Skew

Last but not least, enable translate skew with the following values:

  • Bottom: -4deg
  • Right: 24deg

stack portfolio items

Add Image Module #2 to Column 1

Upload Image

On to the next Image Module! Save the following print screen to your computer or use another print screen of your choice:

Continue by uploading the print screen to the second Image Module in column 1.

stack portfolio items

Sizing

Then, go to the sizing settings and enable the ‘Force Fullwidth’ option.

  • Force Fullwidth: Yes

stack portfolio items

Spacing

We’re shrinking the size of the image and making it overlap with the previous image by using some custom margin values in the spacing settings.

  • Top Margin: -81vw (Desktop), -50vw (Tablet & Phone)
  • Left Margin: 11vw
  • Right Margin: 11vw

stack portfolio items

Border

We’ll add ‘2vw’ to each one of the corners in the border settings next.

stack portfolio items

Box Shadow

And we’ll add a box shadow too. Notice how we’re using a darker box shadow for the second portfolio item image. This will help you create more depth between the portfolio items.

  • Box Shadow Blur Strength: 150px
  • Shadow Color: rgba(0,0,0,0.6)

stack portfolio items

Transform Translate

Then, go to the transform settings and modify the transform translate values:

  • Bottom: -8vw
  • Right: 0px

Again, these values really depend on how you want to position the print screen and what dimensions your print screen has. The smaller the image, the more you’ll have to push it to the left by using a larger negative value.

stack portfolio items

Transform Rotate

Move on to the transform rotate tab and play around with all three values.

  • Left: 24deg
  • Center: 46deg
  • Right: -7deg

stack portfolio items

Translate Skew

Last but not least, modify the translate skew values:

  • Bottom: -4deg
  • Right: 24deg

stack portfolio items

Add Image Module #3 to Column 1

Upload Image

On to the next and last Image Module we need in column 1. Save the following print screen to your computer or use any other print screen of your choice:

Add the print screen you’ve saved to a new Image Module.

stack portfolio items

Sizing

Then, go to the sizing settings and enable the ‘Force Fullwidth’ option.

  • Force Fullwidth: Yes

stack portfolio items

Spacing

Go to the spacing settings next and modify the margin values accordingly:

  • Top Margin: -107vw
  • Left Margin: 19vw
  • Right Margin: 19vw

stack portfolio items

Border

Continue by adding ‘2vw’ to each one of the corners of the Image Module.

stack portfolio items

Box Shadow

Add a box shadow next. Again, we’re using a stronger shadow color than the ones we’ve used for the two previous Image Modules.

  • Box Shadow Blur Strength: 200px
  • Shadow Color: rgba(0,0,0,0.82)

stack portfolio items

Transform Translate

Then, go to the transform settings and modify the transform translate values:

  • Bottom: -42vw
  • Right: 11vw

stack portfolio items

Transform Rotate

Move on to the transform rotate tab and make some changes there too.

  • Left: 24deg
  • Center: 46deg
  • Right: -7deg

stack portfolio items

Translate Skew

Last but not least, modify the translate skew values.

  • Bottom: -4deg
  • Right: 24deg

stack portfolio items

Add Title Text Module to Column 2

Add H2 Copy

On to the second column! Add a Text Module with some H2 content of your choice.

stack portfolio items

H2 Text Settings

Go to the H2 text settings next and make some changes.

  • Heading 2 Font: Roboto
  • Heading 2 Font Weight: Thin
  • Heading 2 Text Alignment: Left
  • Heading 2 Text Color: #000000
  • Heading 2 Text Size: 5vw (Desktop), 6vw (Tablet), 7vw (Phone)
  • Heading 2 Letter Spacing: -1px

stack portfolio items

Spacing

Continue by adding some custom margin values in the spacing settings.

  • Top Margin: 35vw (Desktop), 10vw (Tablet), 0vw (Phone)
  • Left Margin: -4vw
  • Right Margin: 4vw

stack portfolio items

Add Divider Module to Column 2

Visibility

The next module we need in column 2 is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

stack portfolio items

Color

Then, go to the design tab and change the divider color.

  • Color: #8193fa

stack portfolio items

Sizing

Modify the sizing settings too.

  • Divider Weight: 8px
  • Width: 28%

stack portfolio items

Spacing

And add some custom margin values.

  • Top Margin: 1vw
  • Left Margin: -4vw
  • Right Margin: 4vw

stack portfolio items

Add Description Text Module to Column 2

Add Content

The next module we need in column 2 is another Text Module. Add some paragraph content of your choice.

stack portfolio items

Text Settings

Then, go to the text settings and make some changes.

  • Text Font: Open Sans
  • Text Size: 0.6vw (Desktop), 1.2vw (Tablet), 1.8vw (Phone)
  • Text Line Height: 3.1em (Desktop), 2.7em (Tablet), 2.6em (Phone)
  • Text Orientation: Left

stack portfolio items

Spacing

Add some custom margin values next.

  • Top Margin: 1vw
  • Left Margin: -4vw
  • Right Margin: 4vw

stack portfolio items

Add Button Module to Column 2

Add Copy

The next and last module we need to complete the design is a Button Module. Add some copy of choice.

stack portfolio items

Button Settings

Then, go to the design tab and modify the button settings.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Color 1: #5627ba
  • Color 2: #8fb5fc
  • Gradient Direction: 122deg
  • Button Border Width: 0px
  • Font Weight: Ultra Bold
  • Font Style: Uppercase

stack portfolio items

stack portfolio items

Spacing

Change the custom margin and padding values too.

  • Top Margin: 2vw (Desktop), 3vw (Tablet), 5vw (Phone)
  • Bottom Margin: 6vw (Tablet), 8vw (Phone)
  • Left Margin: -4vw
  • Right Margin: 4vw
  • Top Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Bottom Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Left Padding: 3vw (Desktop), 5vw (Tablet), 7vw (Phone)
  • Right Padding: 3vw (Desktop), 5vw (Tablet), 7vw (Phone)

stack portfolio items

Box Shadow

Last but not least, add a subtle box shadow and you’re done!

  • Box Shadow Blur Strength: 40px
  • Shadow Color: rgba(0,0,0,0.3)

stack portfolio items

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome on different screen sizes.

stack portfolio items

Final Thoughts

In this post, we’ve shown you how to get creative with Divi’s new transform options. More specifically, we’ve stacked portfolio items to create a nice and visually-appealing design. We’ve also made sure that the images look great across all screen sizes. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post How to Beautifully Stack Portfolio Items with Divi’s Transform Options appeared first on Elegant Themes Blog.