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:

fashion catalogue

And like this on phone and tablet:

fashion catalogue

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.

fashion catalogue

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.

fashion catalogue

Add Another Layer

Continue by adding another empty layer on top of it.

fashion catalogue

Select Layer 1 & Polygonal Lasso Tool

Select Layer 1 and start using the Polygonal Lasso Tool.

fashion catalogue

Make a Shape

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

fashion catalogue

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.

fashion catalogue

Select Rectangular Marquee Tool & Click Somewhere on Image

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

fashion catalogue

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)

fashion catalogue

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’.

fashion catalogue

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.

fashion catalogue

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

fashion catalogue

Custom Padding

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

fashion catalogue

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

fashion catalogue

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

Divider Module

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

fashion catalogue

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

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

fashion catalogue

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

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

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

fashion catalogue

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.

fashion catalogue

Custom Padding

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

fashion catalogue

First Row

Column Structure

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

fashion catalogue

Background Color

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

fashion catalogue

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.

fashion catalogue

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

fashion catalogue

Divider Module

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

fashion catalogue

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

fashion catalogue

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

fashion catalogue

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

fashion catalogue

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

fashion catalogue

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

fashion catalogue

Open the Border subcategory and use the following border:

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

fashion catalogue

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

fashion catalogue

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

fashion catalogue

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

fashion catalogue

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

fashion catalogue

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

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.

fashion catalogue

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

fashion catalogue

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.

fashion catalogue

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

fashion catalogue

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.

fashion catalogue

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

fashion catalogue

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

fashion catalogue

Second Row

Background Color

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

fashion catalogue

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.

fashion catalogue

Column Structure

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

fashion catalogue

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’.

fashion catalogue

Divider Module Modifications

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

fashion catalogue

Second Text Module Modifications

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

fashion catalogue

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

fashion catalogue

Third Text Module Modifications

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

fashion catalogue

And a right Module Alignment as well.

fashion catalogue

Fifth Text Module Modifications

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

fashion catalogue

Sixth Text Module Modifications

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

fashion catalogue

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.

fashion catalogue

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.

fashion catalogue

Custom Padding

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

fashion catalogue

First Row

Column Structure

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

fashion catalogue

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

fashion catalogue

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.

fashion catalogue

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.

fashion catalogue

Second Row

Column Structure

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

fashion catalogue

Sizing

This row will need a modified Sizing subcategory as well:

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

fashion catalogue

Image Module

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

fashion catalogue

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’.

fashion catalogue

Hide Section for Desktop

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

fashion catalogue

Result

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

fashion catalogue

And the following on phone and tablet:

fashion catalogue

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

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

The post How to Create a Scrolling Fashion Catalogue with Divi appeared first on Elegant Themes Blog.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: