How to Create a Scrolling Fashion Catalogue with Divi

In this post, we’ll be showing you how you can create a scrolling fashion catalogue. Using this method will help you connect with your audience as you would by handing them a paper catalogue. Creating an online scrolling fashion catalogue may help increase the results you get from the catalogue. By including direct links to shop items, for example, the buying process will be enhanced as well.

Result

The result we’ll show you how to create, step by step, looks like this on desktop:

And like this on phone and tablet:

How to Create a Scrolling Fashion Catalogue with Divi

Subscribe To Our Youtube Channel

Add Transparent Shapes to Images with Photoshop

The first thing we’ll be showing you is how to add a transparent part to an image with Photoshop. There’s a free alternative for Photoshop called  GimpShop, but in this part of the tutorial, we’ll be using Photoshop only. We’ll need two images with each two different shapes; one for desktop and one for mobile and tablet. In this part, we’ll simply show you how to add a transparent shape to the image. Afterwards, you can make all the images you need yourself.

Open Photoshop

Start by opening Photoshop on your computer.

Open Image

Next, open the first image you’d like to edit. The method remains the same for all three images you’ll be using throughout this tutorial. That’s why we’ll only explain it once.

Double-Click on Image & Create Layer

Once you’ve opened the image you want to edit, double-click on the image and create a new layer for it.

Add Another Layer

Continue by adding another empty layer on top of it.

Select Layer 1 & Polygonal Lasso Tool

Select Layer 1 and start using the Polygonal Lasso Tool.

Make a Shape

While having the Polygonal Lasso Tool activated, go ahead and create the transparent shape within your image.

Make Layer 1 Invisible & Press Delete While Having Selected Layer 0

Once you’ve selected the area you want to become transparent, go ahead make Layer 1 invisible, select Layer 0 again and press the Delete button on your keyboard.

Select Rectangular Marquee Tool & Click Somewhere on Image

Once you’ve done that, select the Rectangular Marquee Tool and click somewhere on your image.

Save Image as PNG

Lastly, you’ll need to save the image as a PNG and repeat the same process for all four images you’ll use throughout the layout.

Primary Menu Bar Settings

The Primary Menu Bar settings we need for the layout we’re creating are the following:

• Hide Logo Image: Enable
• Menu Height: 30
• Text Size: 15
• Letter Spacing: -1
• Font: Lato
• Font Style: Bold & Uppercase
• Text Color: #FFFFFF
• Active Link Color: #FFFFFF
• Background Color: rgba(255,255,255,0)
• Dropdown Menu Background Color: rgba(255,255,255,0)

Edition Intro

Once you’ve modified the Primary Menu Bar, you can go ahead and add a new page, use the Divi Builder and switch over to Visual Builder.

Add New Section

Within that page, start by adding a standard section.

Section Background Color

The background of that color needs to be ‘#d6d6d6’.

Custom Padding

Move on to the Design tab of that section. Within the Spacing subcategory, add ’24px’ to the top padding and 0px to the bottom one.

Add One-Column Row

Once that’s done, you can go ahead and add a one-column row to the section.

Sizing

Go to the Design tab and modify the Sizing subcategory:

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

Custom Padding

Scroll down and add ‘0px’ to the top padding of the row.

First Text Module

Once that’s done, you can add a Text Module to the row. After having entered the text you want to appear, go to the Design tab and make sure the following changes apply to the Text subcategory:

• Text Font: Old Standard TT
• Font Style: Uppercase
• Text Font Size: 72 (Desktop), 41 (Tablet), 29 (Phone)
• Text Color: #000000
• Text Letter Spacing: 11px
• Text Line Height: 1em
• Text Orientation: Center

Open the Spacing subcategory and add ’30px’ to the top and bottom padding.

Divider Module

Right below the Text Module, add a Divider Module and enable the ‘Show Divider’ option.

Go to the Design tab and choose ‘#FFFFFF’ as the divider color.

Next, choose ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position within the Styles subcategory.

Then, open the Sizing subcategory and make the following settings apply:

• Divider Weight: 10px
• Height: 23px
• Width: 100%
  

Second Text Module

Right below the Divider Module, add another Text Module. Choose whatever icon you want within your Character Map (Windows) or Character Palette (Mac) and place it in the Content tab. For this example, we’ve used the following symbol: ‘↓’. Then, go to the Design tab and make the following settings apply:

• Text Font Size: 42px
• Text Color: #000000
• Text Orientation: Center

Desktop Fashion Catalogue (New Section)

Now, add another standard section. This section will contain two rows that’ll display a different part of the catalogue on desktop.

Section Settings

Background Color

Use ‘#FFFFFF’ as the background color of this section.

Custom Padding

Then, go to the Design tab and add ’15px’ to the top padding.

First Row

Column Structure

Once you’ve made the changes to the setting, add a row with the following column structure:

Background Color

Open the row settings and add ‘rgba(255,255,255,0.14)’ as the background color.

Background Image

Add one of the images you’ve made in the Photoshop part of this post and use ‘Hue’ as the Background Image Blend.

Sizing

Lastly, make the following changes to the Sizing subcategory:

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

First Text Module

Once you’ve completed the row settings, add a Text Module to the second column. Use the following settings for the Text subcategory:

• Text Font: Bitter
• Text Font Size: 63px
• Text Color: #000000
• Text Orientation: Center

Divider Module

Right below the first Text Module, add a Divider Module and enable the ‘Show Divider’ option.

Move on to the Design tab and use ‘#000000’ as the divider color.

Within the Styles subcategory, use ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position.

Scroll down the same tab and make the following settings apply to the Sizing subcategory:

• Divider Weight: 3px
• Height: 23px
• Width: 57%
• Module Alignment: Left

Lastly, add a top margin of ’30px’ and a bottom margin of ’50px’.

Second Text Module

Once the Divider is in place, go ahead and add the second Text Module that’ll contain a title. First of all, use ‘#000000’ as its background color in the Content tab.

Then, move on to the Design tab and make the following settings apply to the Text subcategory:

• Text Font: Bitter
• Text Font Size: 92px
• Text Color: #000000
• Text Line Height: 1em
• Text Orientation: Left

Open the Border subcategory and use the following border:

• Use Border: Yes
• Border Color: #000000
• Border Width: 3px
• Border Style: Solid

Furthermore, use a Width of ‘77%’ and a left Module Alignment.

Lastly, add ’15px’ to the top, right, bottom and left padding of the Text Module.

Third Text Module

Add another Text Module right below the previous one. This one will represent the description. Go to the Design tab and use the following settings for the Text Subcategory:

• Text Font: Lato
• Text Font Size: 16px
• Text Color: #000000
• Text Line Height: 1em
• Text Orientation: Left

Open the Sizing subcategory, use ‘70%’ for the Width and select the left Module Alignment.

Lastly, add a top margin of ’20px’.

Fifth Text Module

The fifth Text Module serves as a minimalistic button. Within the Content tab, use the ‘→’ symbol + the text and put a link behind it.

Then, go to the Design tab. Use the following settings for the Text subcategory:

• Text Font: Bitter
• Text Font Size: 23px
• Text color: #000000
• Text Line Height: 1em
• Text Orientation: Left

Scroll down the same tab until you come across the Sizing subcategory. Within that subcategory, use a Width of ‘49%’ and a right Module Alignment.

Lastly, add a top margin of ’80px’.

Sixth Text Module

The sixth and the last module we’ll be needing is almost the same as the previous one. Use the ‘→’ + text and put a link behind it.

The settings for the Text Subcategory are the following:

• Text Font: Bitter
• Text Font Size: 23px
• Text Color: #e02b20
• Text Line Height: 1em
• Text Orientation: Left

Change the Width to ‘39%’ and use the right Module Alignment as well.

Second Row

Background Color

Open the row settings and add ‘rgba(255,255,255,0.14)’ as the background color.

Background Image

Add one of the images you’ve made in the Photoshop part of this post and use ‘Hue’ as the Background Image Blend.

Column Structure

The second row you need to add to the standard section is just the opposite of the previous one.

Clone Modules

The modules we’ve used in the previous row are the same ones we need for this row so go ahead, clone them and place them in the first column instead of the second one. We’ll need to make some alignment changes in the next part of this post.

First Text Module Modifications

Open the first Text Module and add a top margin of ’20px’.

Divider Module Modifications

Then, open the Divider Module and change the Module Alignment within the Sizing subcategory to right.

Second Text Module Modifications

Set the Text Orientation of the second Text Module to right.

And choose a right Module Alignment in the Sizing subcategory as well.

Third Text Module Modifications

The third Text Module will need a right Text Orientation too.

And a right Module Alignment as well.

Fifth Text Module Modifications

The only thing you’ll have to do for the fifth Text Module is change the Width into ‘82%’.

Sixth Text Module Modifications

Same counts for the sixth Text Module but use ‘87%’ instead.

Hide Section for Tablet & Phone

Once you’ve finished the two rows, you can go ahead and disable the whole section on phone and tablet.

Tablet & Phone Catalogue (New Section)

To make everything look great on tablet and phone as well, we’re going to create a new standard section.

Section Settings

Background Color

Add ‘#FFFFFF’ as the background color of that section.

Custom Padding

Move on to the Design tab and add a top padding of ’15px’.

First Row

Column Structure

Then, add a two-column row to the section.

Sizing

Go to the Sizing subcategory of that row and make the following changes:

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

Image Module

Instead of using a background image, we’re going to use an Image Module instead. That way, we’ll be sure that the text and image won’t overlap. Go ahead and add an image module to the first column of the row and upload an image.

Clone Modules of First Row in Desktop Version

Then, clone all of the modules that you’ve used in the first row of the desktop version and place them within the second column.

Change Second Text Module Font Size

There’s only one thing that needs to be changed; the font size of the second Text Module. Change it into 65px.

Second Row

Column Structure

Then, go ahead and add another two-column row to the section.

Sizing

This row will need a modified Sizing subcategory as well:

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

Image Module

Add the Image Module to the first column as well and upload an image.

Clone Modules of Second Row in Desktop Version

Then, go ahead and clone the modules that are placed within the second row of the desktop version. Once you’ve cloned them, place them in the second column of this row.

Change Second Text Module Font Size

The text size of the second Text Module needs to be changed as well. Go ahead and give it a font size of ’65px’.

Hide Section for Desktop

Once you’ve finished both rows, you can go ahead and disable the entire section on desktop.

Result

Et voilà, after following all the steps in this post, you should achieve the following result on desktop:

And the following on phone and tablet:

Final Thoughts

In this post, we’ve shown you how you can create a nice scrolling fashion catalogue. To make our design work, we’ve first shown you how to make a transparent shape within your image with Photoshop. Afterwards, we’ve used these images within our Divi tutorial to create the design. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by Rvector / shutterstock.com