Creative hero sections make websites memorable and special. This polaroid hero section design evokes a sense of vintage wanderlust. By using column transform options, the polaroids can be arranged in any way you want, as if they were spread on a table.

You can recreate this polaroid hero section design with your own square images. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

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

Desktop

creating-a-polaroid-hero-section-with-divis-transform-options Creating a Polaroid Hero Section with Divi’s Transform Options

Mobile

creating-a-polaroid-hero-section-with-divis-transform-options-1 Creating a Polaroid Hero Section with Divi’s Transform Options

Download The Polaroid Hero Section Design for FREE

To lay your hands on the free polaroid hero section design, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating

Add New Section

Start by adding a new section to the page you’re working on.

Bottom Divider

Add a mint green bottom divider.

  • Divider Placement: Bottom
  • Divider Style: #12
  • Divider Color: Mint Green #d2f2d0
  • Divider Height: 23vw

creating-a-polaroid-hero-section-with-divis-transform-options-2 Creating a Polaroid Hero Section with Divi’s Transform Options

Spacing

Adjust the section’s spacing.

  • Top Margin: 7vw
  • Bottom Margin: 0px
  • Top and Bottom Padding: 0px

creating-a-polaroid-hero-section-with-divis-transform-options-3 Creating a Polaroid Hero Section with Divi’s Transform Options

Add New Row

Column Structure

Continue by adding a new row to your section. Choose the following column structure:

creating-a-polaroid-hero-section-with-divis-transform-options-4 Creating a Polaroid Hero Section with Divi’s Transform Options

Sizing

Now, adjust the row’s sizing.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 90vw
  • Max Width: 100%

creating-a-polaroid-hero-section-with-divis-transform-options-5 Creating a Polaroid Hero Section with Divi’s Transform Options

Spacing

Next, adjust the top and bottom padding in the spacing settings.

  • Top and Bottom Padding: 0px

creating-a-polaroid-hero-section-with-divis-transform-options-6 Creating a Polaroid Hero Section with Divi’s Transform Options

Display

Add one line of CSS code to the row’s main element to keep columns next to each other on smaller screen sizes.

  • Custom CSS – Main Element: display: flex;
display: flex;

creating-a-polaroid-hero-section-with-divis-transform-options-7 Creating a Polaroid Hero Section with Divi’s Transform Options

Add Image Module to Column 1

Upload Square Image

Add an image module to column 1 and upload a square image.

creating-a-polaroid-hero-section-with-divis-transform-options-8 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-9 Creating a Polaroid Hero Section with Divi’s Transform Options

Alignment

Now, adjust the module alignment.

  • Module Alignment: Center

creating-a-polaroid-hero-section-with-divis-transform-options-10 Creating a Polaroid Hero Section with Divi’s Transform Options

Sizing

Then, make the module fullwidth.

  • Force Fullwidth: Yes

creating-a-polaroid-hero-section-with-divis-transform-options-11 Creating a Polaroid Hero Section with Divi’s Transform Options

Add Text Module to Column 1

Add Content

Add a text module and insert some content. We’ll use the word “polaroid.”

creating-a-polaroid-hero-section-with-divis-transform-options-12 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-13 Creating a Polaroid Hero Section with Divi’s Transform Options

Text

Style the text font.

  • Text Font: Advent Pro
  • Text Alignment: Center
  • Text Color: Very Dark Grey #474747
  • Text Size:
    • Desktop: 1vw
    • Tablet + Phone: 2vw
  • Text Letter Spacing: 0.1vw
  • Text Line Height: 1.8em

creating-a-polaroid-hero-section-with-divis-transform-options-14 Creating a Polaroid Hero Section with Divi’s Transform Options

Sizing

Use ‘100%’ for the width in the sizing settings.

  • Width: 100%

creating-a-polaroid-hero-section-with-divis-transform-options-15 Creating a Polaroid Hero Section with Divi’s Transform Options

Spacing

Now adjust the spacing.

  • Top Margin: 1vw

creating-a-polaroid-hero-section-with-divis-transform-options-16 Creating a Polaroid Hero Section with Divi’s Transform Options

Clone Modules Twice & Place Duplicates in Remaining Columns

creating-a-polaroid-hero-section-with-divis-transform-options-17 Creating a Polaroid Hero Section with Divi’s Transform Options

Change Image & Copy of Duplicates

Change the images in each duplicate image module. If your design calls for it, change the text content as well.

Column 1 Settings

Background

Continue by opening the column 1 settings of the row. Set the background to white to create the polaroid effect.

  • Background Color: White #ffffff

creating-a-polaroid-hero-section-with-divis-transform-options-18 Creating a Polaroid Hero Section with Divi’s Transform Options

Spacing

Add some bottom padding to create the wider polaroid bottom border.

  • Bottom Padding: 2vw

creating-a-polaroid-hero-section-with-divis-transform-options-19 Creating a Polaroid Hero Section with Divi’s Transform Options

Border

Add a border to finish the polaroid visual.

  • 4-Side Border Width: 1vw
  • Top Border Width: 2vw
  • Right Border Width: 2vw
  • Bottom Border Width: 1vw
  • Left Border Width: 2vw
  • Border Color: White #ffffff

creating-a-polaroid-hero-section-with-divis-transform-options-20 Creating a Polaroid Hero Section with Divi’s Transform Options

Box Shadow

Complete the column 1 settings by adding a subtle box shadow.

  • Box Shadow: #1

creating-a-polaroid-hero-section-with-divis-transform-options-21 Creating a Polaroid Hero Section with Divi’s Transform Options

Extend Column 1 Settings

Use the extend styles option to extend the column settings.

  • Go back to the main row settings window and click on the three dots to the right of the first column tab.
  • Select ‘extend item styles’ and select ‘throughout this row.’

creating-a-polaroid-hero-section-with-divis-transform-options-22 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-23 Creating a Polaroid Hero Section with Divi’s Transform Options

Column 1 Transform Styles

Now, adjust the transform settings in the first column.

  • Transform Translate: x-axis -11vw, y-axis -6vw
  • Transform Rotate: 341 deg, 1st option

creating-a-polaroid-hero-section-with-divis-transform-options-24 Creating a Polaroid Hero Section with Divi’s Transform Options

Column 2 Transform Styles

Next, adjust the transform settings for the second column.

  • Transform Translate: x-axis -22w, y-axis 0vw
  • Transform Rotate: 10 deg, 1st option

creating-a-polaroid-hero-section-with-divis-transform-options-25 Creating a Polaroid Hero Section with Divi’s Transform Options

Column 3 Transform Styles

Finally, adjust the transform settings for column three.

  • Transform Scale: 68% both axes
  • Transform Translate: x-axis -46w, y-axis 12vw
  • Transform Rotate: 31 deg, 1st option

creating-a-polaroid-hero-section-with-divis-transform-options-26 Creating a Polaroid Hero Section with Divi’s Transform Options

Add New Section

Background

Add a new section and apply a mint green background to the section.

  • Background Color: Mint Green #d2f2d0

creating-a-polaroid-hero-section-with-divis-transform-options-27 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-28 Creating a Polaroid Hero Section with Divi’s Transform Options

Bottom Divider

Give the section a bottom divider.

  • Divider Placement: Bottom
  • Divider Style: #12
  • Divider Color: White #ffffff
  • Divider Height: 23vw

creating-a-polaroid-hero-section-with-divis-transform-options-29 Creating a Polaroid Hero Section with Divi’s Transform Options

Spacing

Remove the default top padding.

  • Top Padding: 0px

creating-a-polaroid-hero-section-with-divis-transform-options-30 Creating a Polaroid Hero Section with Divi’s Transform Options

Add New Row

Column Structure

Continue by adding a new row with 3 columns.

creating-a-polaroid-hero-section-with-divis-transform-options-31 Creating a Polaroid Hero Section with Divi’s Transform Options

Copy and Paste Row Styles

Using the wireframe view, copy and paste the row styles from the first section

  • First, click on the three dots to the right of the row menu inside the first section. Select ‘copy row styles’.
  • Then, click on the three dots on the right of the row menu in the second section. Select ‘paste row styles’.

creating-a-polaroid-hero-section-with-divis-transform-options-32 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-33 Creating a Polaroid Hero Section with Divi’s Transform Options

Copy and Paste Column Settings

Now, copy the column settings in the first row and paste them onto columns 1 and 2 in the new row.

  • First, open the row settings in the first row.
  • Second, click on the three dots on the right side of the first column tab and select ‘copy item styles’.
  • Then, scroll down to the new row and open the settings tab.
  • Finally, click on the three dots on the right side of the first column and select ‘paste item styles’.

creating-a-polaroid-hero-section-with-divis-transform-options-34 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-35 Creating a Polaroid Hero Section with Divi’s Transform Options

Column 1 Transform Styles

Now, adjust the transform styles in column 1.

  • Transform Scale: 75% both axes
  • Transform Translate: x-axis -8w, y-axis -14vw
  • Transform Rotate: 35 deg 1st option

creating-a-polaroid-hero-section-with-divis-transform-options-36 Creating a Polaroid Hero Section with Divi’s Transform Options

Column 2 Transform Styles

Then, modify the transform styles in column 2.

  • Transform Translate: x-axis -17w, y-axis 2vw
  • Transform Rotate: 346 deg 1st option

creating-a-polaroid-hero-section-with-divis-transform-options-37 Creating a Polaroid Hero Section with Divi’s Transform Options

Add Image Modules

Duplicate and Drag Image Modules

Now, go back to wireframe view to duplicate and drag two image modules.

  • First, duplicate the first image module in the first section twice.
  • Then, drag them to the first and second columns of the second section.
  • Change the image in each module for a new square image.

creating-a-polaroid-hero-section-with-divis-transform-options-38 Creating a Polaroid Hero Section with Divi’s Transform Options

Add Text Modules

Duplicate and Drag Text Modules

After the images, do the same with the text modules. Duplicate from the first section and drag into the second section.

  • In the wireframe view, duplicate the text module from the first column in the first section twice.
  • Now, drag the new text modules to columns 1 and 2 in the second section.
  • If you wish to change the content, do so now.

creating-a-polaroid-hero-section-with-divis-transform-options-39 Creating a Polaroid Hero Section with Divi’s Transform Options

Add Text Module to Column 3

Add Content

Click on the plus symbol in the third column and add a text module. Insert some H2 and paragraph content.

creating-a-polaroid-hero-section-with-divis-transform-options-40 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-41 Creating a Polaroid Hero Section with Divi’s Transform Options

Text

Style the text as follows.

  • Text Font: Advent Pro
  • Text Alignment: Center
  • Text Color: Dark Grey #848484
  • Text Size:
    • Desktop: 1vw
    • Tablet + Phone: 1.9vw
  • Text Letter Spacing: 0.1vw
  • Text Line Height:
    • Desktop: 1.2em
    • Tablet + Phone: 1.3em

creating-a-polaroid-hero-section-with-divis-transform-options-42 Creating a Polaroid Hero Section with Divi’s Transform Options

Heading Text

Now, style the H2 text.

  • Heading: H2
  • H2 Font: Adamina
  • H2 Font Weight: Bold
  • H2 Font Color: Very Dark Grey #444444
  • H2 Font Size:
    • Desktop: 2vw
    • Tablet + Phone: 3vw
  • H2 Letter Spacing: 4px
  • H2 Line Height:
    • Desktop: 1.7vw
    • Tablet + Phone: 1.5vw

creating-a-polaroid-hero-section-with-divis-transform-options-43 Creating a Polaroid Hero Section with Divi’s Transform Options

Sizing

Then, adjust the sizing.

  • Width:
    • Desktop: 60%
    • Tablet: 91%
    • Phone: 100%
  • Module Alignment: Center

creating-a-polaroid-hero-section-with-divis-transform-options-44 Creating a Polaroid Hero Section with Divi’s Transform Options

Spacing

Finally, adjust the spacing.

  • Top Margin: -12vw

creating-a-polaroid-hero-section-with-divis-transform-options-45 Creating a Polaroid Hero Section with Divi’s Transform Options

Add Button Module to Column 3

Add Copy

Click on the plus symbol below the text and add a button module. Add some copy to the button.

creating-a-polaroid-hero-section-with-divis-transform-options-46 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-47 Creating a Polaroid Hero Section with Divi’s Transform Options

Alignment

Change the button alignment.

  • Alignment: Center

creating-a-polaroid-hero-section-with-divis-transform-options-48 Creating a Polaroid Hero Section with Divi’s Transform Options

Custom Button Styles

Style the button accordingly.

  • Button Text Size:
    • Desktop: 1vw
    • Tablet: 2.4vw
    • Phone: 2.3vw
  • Button Border Width: 0px
  • Button Text Color: Black #000000
  • Button Letter Spacing: 4px
  • Button Font: Advent Pro
  • Button Font Weight: Bold

creating-a-polaroid-hero-section-with-divis-transform-options-49 Creating a Polaroid Hero Section with Divi’s Transform Options

Spacing

Apply a top margin value.

  • Top Margin: 2vw

creating-a-polaroid-hero-section-with-divis-transform-options-50 Creating a Polaroid Hero Section with Divi’s Transform Options

Add Divider Module to Column 3

Visibility

Below the button, add a divider and style the as follows.

  • Visibility: Yes

creating-a-polaroid-hero-section-with-divis-transform-options-51 Creating a Polaroid Hero Section with Divi’s Transform Options

creating-a-polaroid-hero-section-with-divis-transform-options-52 Creating a Polaroid Hero Section with Divi’s Transform Options

Line

Give the divider a bright green color.

  • Line Color: #55f252

creating-a-polaroid-hero-section-with-divis-transform-options-53 Creating a Polaroid Hero Section with Divi’s Transform Options

Sizing

Change the sizing settings of the divider and you’re done!

  • Divider Weight
    • Desktop: 7px
    • Tablet + Phone: 4px
  • Width:
    • Desktop: 10%
    • Tablet + Phone: 30%
  • Module Alignment: Center

creating-a-polaroid-hero-section-with-divis-transform-options-54 Creating a Polaroid Hero Section with Divi’s Transform Options

Preview

Let’s take a look again at the finished design of the polaroid hero section across different screen sizes.

Desktop

creating-a-polaroid-hero-section-with-divis-transform-options Creating a Polaroid Hero Section with Divi’s Transform Options

Mobile

creating-a-polaroid-hero-section-with-divis-transform-options-1 Creating a Polaroid Hero Section with Divi’s Transform Options

It’s a Wrap!

In this post, we showed you how to recreate a polaroid hero section using Divi’s transform options. This is a great way to showcase multiple images in your page’s hero section. We hope this design will inspire your own creative hero section designs! If you have any questions, make sure you leave a comment in the comment section below.


Source

SEO News and More

SEO News and More

Share This