How to Beautifully Stack Portfolio Items with Divi’s Transform Options

Last Updated on September 18, 2022 by 21 Comments

How to Beautifully Stack Portfolio Items with Divi’s Transform Options
Blog / Divi Resources / How to Beautifully Stack Portfolio Items with Divi’s Transform Options

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!

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

21 Comments

  1. I do not get it – where is the beef?
    By the way, just tried transformation feature and do not get nice animations yet. For example spinning on mouse over does flickering a lot, which I cannot use anywhere….

  2. I do not get it – where is the beef?
    By the way, just tried transformation feature and do not get nice animations yet. For example spinning on mouse over does flickering a lot, which I cannot use anywhere….

  3. Interesting! Did not play with the new transform tool yet but it looks really good!

  4. Ah ha! I see screenshots in the post. Apologies if I whinged earlier about lack of images.

  5. Ah ha! I see screenshots in the post. Apologies if I whinged earlier about lack of images.

  6. Thanks I.m begining with Divi so good idea to have a demo

  7. Thank you for the detailed article. Can I please request a step by step video with examples if possible?

  8. That’s all good but demo?

  9. Hi,
    Great stuff buddy.
    Great post, I have read this post here I got very useful information. This is a very useful article for online review readers. Keep it up such a nice posting like this. I started a Blog and Hopefully, it will be successful like you.

    Thanks for the share.

  10. I would like to know if its possible to do transform actions on page scroll only using the divi builder?

  11. Yep, a lot of work without seeing the demos in action first – jason file is a good idea too.

  12. Is all transform things are compatible with all modern browsers?
    Thank you

  13. Agree, its a good idea

  14. I agree with Trish. Please list of URL to a demo. Thanks.

  15. As per a previous post, could we please have demos and/or a JSON file???

    Thank you ๐Ÿ™‚

    • +1

    • Or at least provide the assets so we aren’t looking for images to fit the design.

    • +1

  16. It would be nice if you added a link to a live example.

  17. Thanks for this post, Divi is increasingly appealing features and possibilities, this new feature is amazing, plus would still use photoshop to crop the images in the off-screen parts. This feature with Hover effects makes it worth the loading of multiple image files by looking SEO

  18. Looks great.. again please stop posting static pictures of how things will look.. I assume you use divi on this site? Maybe just post the actual item as if you were on the internet, and as if this was a web site ๐Ÿ˜‰

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today