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

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

eleven Amazing Beauty Blogs Made with WordPress

Beauty blogs are one of those kinds of websites which have a lot of relevant content aimed in a specific target audience. The bloggers at the rear of these sites are usually very energetic and try to keep their visitors as up-to-date as possible with all of kinds of tips revolving around elegance; from makeup to skincare, health plus more. One thing you might not really have known is that many of these beauty blogs use WordPress because their articles management system. For this post, we’ ve created a list of 11 amazing beauty blogs made with Wp for you to discover and maintain in mind while designing your next attractiveness blog.

1. Remarques

beauty blog

The first beauty blog in the row can be called Remarques. You can find all kinds of content on this blog but the particular main topics that are discussed are usually beauty-related, such as makeup, skincare and hair. The first thing we observe is that the homepage and menus are nicely balanced. The posts upon the homepage are carefully selected and beautifully presented. Rather than filling the homepage with all kinds of posts, the particular menu items contain a preview of the last three articles that can be found in that specific category. This allows visitors to quickly find the content they’ re looking for without becoming overwhelmed.

2. Manface

beauty blog

The next beauty blog on the list, Manface, is focused on all sorts of beauty elements that are relevant to men. It is definitely a go-to for men who else want to explore different tips plus products; from skincare to body, curly hair and fragrance. In comparison with Remarques, the previous beauty blog we’ ve distributed in this post, this website shares a lot more of their content on the homepage. The menu, on the additional hand, is rather simple yet easy to navigate through.

3 or more. The Formulation

beauty blog

Next up, we also possess The Formula blog which looks incredible. This website puts its design focus on giving that black and white balance to their website which these people absolutely manage to pull off. The internet site is simple yet provides all the information a visitor could be searching for. The menu items seem such as they are just hyperlinked, but once you hover over them they catch you by surprise by showing a drop-down menu. They also have a beautiful way of showing the title along with the category a post belongs to.

 4. Barefoot Golden-haired

beauty blog

Then, we also have the Barefoot Blonde beauty blog. This website definitely emphasizes the person behind the beauty blog and uses Instagram posts on the top of the page along with the social icons to continue the particular storytelling process elsewhere as well. Besides that will, the entire website focuses on the visual part of each post and allows visitors to share the write-up without having opened it yet.

5. Very Good Lighting

beauty blog

Up following, we have the Very Good Lighting beauty blog for men. This blogging website gives the men out there almost all the tips they need for encounter, body and hair. One of the particular very pleasant things about this web site is the scrolling animation that will keep you interacted with the content that will you come across on their website. Within overall, this beauty blog is quite easy to navigate through and provides its visitors with the content they’ ve created in a very simple and user-friendly way.

6. Beauty is Boring

beauty blog

The next beauty blog we want to put in the limelight is Beauty is Boring. This site uses primarily black and white colors throughout their website. However, they do manage to mix that beautifully with the images they will use throughout the website. This beauty blog has a very recognizable way of creating their posts. Although each publish is different, they use the same kind of visualities. In late each article, and even on their homepage, they share all the items that had been used in a post and where they can be purchased; super easy for people who want to get to this right away.

7. Maskcara

Another simple yet elegant beauty blog is definitely Maskcara. The website starts with the slideshow of featured posts that instantly makes sure the visitors are up-to-date regarding all the new content that’ s getting provided on the blog. This elegance blog has everything you’ d anticipate a beauty blog to have and finishes the homepage by showing site visitors the latest Instagram posts from the particular beauty blogger.

8. Jaclyn Hill Makeup

beauty blog

The well-known beauty blogger, Jaclyn Hill, has a pretty awesome web site as well. Something we’ ve seen in some of the previous beauty blogs, all of us see with this blog as well; the combination of black and white colors throughout the web design. That’ s not really this type of coincidence. Most of these websites provide makeup tutorials that are currently pretty colorful. By using black and white colors throughout their website, they make certain their web design matches the colours that are being used within the tutorials.

9. Nikkie Lessons

beauty blog

Speaking about well-known beauty bloggers and make-up artists; Nikkie Tutorials definitely belongs on that list as well. Like the particular Jaclyn Hill website, this website is definitely mostly used to share the video content material from her YouTube channel. The site design is sober but it looks quite elegant at the same time. The particular right sidebar bio’ s purpose is to make people immediately recognize the beauty blogger’ s identity and brand.

10. Amelia Liana

beauty blog

Then, we all also have Amelia Liana. This beauty blog immediately gives you summer vibes by looking on the colors of the particular website only. The website comes with an awesome menu that shows you the three latest post in a very attractive way while hovering over the menu items. That allows users to instantly find the latest posts that they need to meet up with. Besides that, the website also shares three ways to navigate through the posts while becoming on the homepage; by latest, popular of. Another well-thought-out extra touch this particular website offers is two video slideshows. You can find them at the end of the homepage and they will allow visitors to look into the latest videos and vlogs.

Made with Divi

11. One particular Turn Kill

beauty blog

Lastly, we have One Turn Kill, a blog that is made with the Divi theme. This website is not only aimed at beauty, it also handles other topics such as looks and home decor. The particular website is a bundle of all kinds of stuff that might come within handy when trying to find inspiration. One of the nice things about this internet site is that it starts with a slideshow that will showcases featured posts along with a good intro to what the post will be all about. This inspires visitors to click on the slide and read the blog post entirely.

Final Thoughts

Throughout this awesome article, we’ ve discussed some great beauty blogs that are made with WordPress. These websites can give you inspiration for a next beauty blog website you need to create to get yourself or for a client. Should you have any questions or suggestions; make sure you leave a comment in the particular comment section below!

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

Showcased Image by Pro Symbols / shutterstock. com

The post eleven Amazing Beauty Blogs Made with Wp appeared first on Elegant Themes Blog.

The way to Create Irregularly Shaped Section Transitions with Divi

One of the best ways to boost the type of your own website is by using different section transitions. In the previous post, we’ ve shown you how you can do that will using the Divi built-in options only.  However, if you’ re looking to develop something a little bit more advanced or personalized, you can create irregularly shaped section transitions as well. Since of their complexity, the best way to approach this really is by using images with a transparent border.

In this post, we’ ll display you ways to do that. We’ lso are not only going to demonstrate exactly what to do within the Divi Constructor, but we’ re also going to show you how you can generate these transparent borders on images along with a few steps using Photoshop.

Example Result

Let’ s check out a layout sample along with stunning irregularly shaped section transitions:

ecommerce website design

As you can notice, you can use these types of transparent borders throughout your whole web site and within different sections. It’ t important to remember that, depending on just how large your transparent border is, a person should have enough place left within the sections to fit the different content you’ re trying to share. It’ ll also create a nice balance among the various sections.

How to Create Irregularly Shaped Section Transitions with Divi

Subscribe To Our Youtube Channel

Create Transparent Borders with Photoshop

You can achieve as original shapes as you want with Photoshop. You could furthermore opt for a free alternative called GimpShop. For this tutorial, we’ lmost all use Photoshop though.

Open Photoshop

Start by opening photoshop on your computer.

Open Picture

Once you’ ve accomplished that, open the image you’ d like to work on.

irregularly shaped section transitions

Double-Click on Picture & Create Layer

Once your image is uploaded within Photoshop, double-click on the image layer that a new layer for it (Layer 0).

irregularly shaped section transitions

Add Another Layer

In order to add the transparent border, you’ lmost all be needing another layer as properly so go ahead and add this by clicking on the icon which we marked in the print screen below. When you create the layer (Layer 1), ensure it’ s placed above the layer that contains your image.

irregularly shaped section transitions

Choose Brush & Size

Whilst having the Layer 1 activated, go ahead and click on the brush icon.

irregularly shaped section transitions

Once you do, you can alter the size and pattern that’ s being used for the brush in order to your own preference. There are a lot of free Photoshop brushes on the web so depending on what type of web site you’ re creating, choose a fitting one. Also, be sure that the opacity is set at a 100%.

irregularly shaped section transitions

Start Using The Brush on The Borders

When you have your brush in place, start using it on the side you want to be transparent. Make sure you protect the whole border with your clean so it’ ll all become transparent afterwards.

irregularly shaped section transitions

CTRL (Windows) or Command (Mac) + Choose New Layer

Once performed, you can press CTRL (for Windows) or Command (for Mac) in your keyboard and click on Layer 1 simultaneously. You’ ll see that Photoshop can select everything you’ ve added in order to that layer, which is, in this case, the shaped border.

irregularly shaped section transitions

Make New Layer Invisible

Next, make Level 1 invisible by removing the eye since marked in the print screen beneath.

irregularly shaped section transitions

Choose Image & Delete New Layer

Then, click on the level that contains your image and press the delete button on your keyboard. Once you do that, you’ ll see that the border will become transparent.

irregularly shaped section transitions

Select Rectangular Marquee Tool & Click on on Image

Click upon the Rectangular Marquee Tool and press somewhere randomly on the image.

Save Image as PNG

Lastly, you’ ll need to save the image as a PNG so you may use it on your website.

Add Backgrounds to Divi

Once a person create the various images you want to use within your Divi website (by making use of the Photoshop technique above), the rest of it is straightforward. The images you’ ve created serve as the history of a particular section. We’ re only going to show you exactly how to build the hero section of our example since the same method applies for the different sections too.

Add New Standard Section

Add a new page, switch to Visual Builder and include a new standard section to that page.

Upload Background Image

Once you’ ve positioned all the modules you want in order to appear in the hero section, you may go ahead and add the picture you’ ve created in the previous element of this post.

irregularly shaped section transitions

Add Background Color

Once you’ ve done that, you can decide what color may appear in the transparent a part of your own image. In this example, we’ ve used ‘ #dddddd’ as the background color. You can immediately see that will the color will appear right inside the transparent part of the picture.

irregularly shaped section transitions

Make Sure There’ s Enough Padding

Depending on the quantity of segments and the size of your transparent boundary you’ ve used in your leading man section, you might have to include some custom padding. Have fun with the different section padding values and see what type gives you the best result.

irregularly shaped section transitions

Add Same Background Color to Next Section

To ensure the different sections mix well with one another, make use of the exact same background color you’ ve used in your own hero section within your next section as well. That doesn’ t always mean you need to use a one color background color for your next section, a person can use a gradient background since well as long as the colours of both sections blend beautifully.

Instance

As described before, you can create as numerous image borders as you want and use them in a creative method throughout your website. To give you a taste of it, we’ ve developed the following example preview:

ecommerce website design

Final Thoughts

In this post, we’ ve shown you how you can easily make make use of of irregularly shaped section transitions. Applying this method, you can basically create any kind of kind of section transition you wish. Besides showing you how to generate these irregular shapes with a few steps in Photoshop, we’ ve also demonstrated you ways you can then make this work within the Divi Builder. When you have any questions or suggestions; make certain you leave a comment in the particular 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!

The publish How to Create Irregularly Shaped Section Transitions with Divi appeared first upon Elegant Themes Blog.

Methods to Create a Timeline with Divi’s Blurb Module

In this post, we’ ll be demonstrating how you can easily create a simple yet sophisticated timeline with Divi’ s your Blurb Modules. We’ ll be combining the different options that modules and rows provide to own result you can view below. The particular example we’ ll be sharing will be based on the built-in Divi options only, which means you won’ to need to add any additional CSS code! We’ re also making sure that it looks good on desktop as well as on mobile.

Outcome

The appearance of a timeline is achieved along with two design elements; the queue that passes across all three Blurb Modules and the particular numbers. The desktop version seems like this particular:

timeline

And the mobile version looks like this:

timeline

Let’ s get started!

How to Create a Timeline with Divi’ s Blurb Module

Subscribe To Our Youtube Channel

Add Standard Section

Section Background Color

Start by adding a new standard section and using ‘ rgba(0, 0, 0, 0. 12)’ as its history color.

timeline

Section Padding

Go in order to the Design tab and use a top padding of ‘ 300px’.

timeline

Add Three-Column Row (Timeline)

Column Backgrounds

Once you’ ve produced the section, add a three-column line to it. Within the Content tab of this row, use ‘ #e09900’ as the Column 1 background color, ‘ #0c71c3’ because the Column 2 background color and ‘ #8300e9’ as the Line 3 background color.

timeline

Dimension

Shift on to the Design tab plus use the following settings for the particular Sizing subcategory:

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

timeline

Custom Margin & Padding

Next, include the following Custom Padding and Custom Margin to the row:

  • Top Padding: 1px
  • Bottom Padding: 0px
  • Bottom Margin: -200px

And add ‘ 3px’ towards the top and bottom padding of each column.

timeline

Disable on Tablet & Phone

Lastly, disable the row on both pill and phone.

timeline

Add Another Three-Column Row (Blurb Modules)

Column Gradient History

Once you created the first three-column row, you can move ahead and create the second 1 right below it (they share the same section). Each one of the columns needs a gradient background with the particular same settings but with a different first color:

  • Initial Color:  #e09900 (Column 1),  #0c71c3 (Column 2),  #8300e9 (Column 3)
  • Second Color: rgba(255, 255, 255, 0)
  • Gradient Type: Linear
  • Gradient Direction: 180deg
  • Start Position: 73%
  • End Position: 92%

timeline

Make Row Fullwidth

Then, go to the Style tab and enable the ‘ Create This Row Fullwidth’ option.

timeline

Row Custom Padding

Open the spacing subcategory and use the following Custom Cushioning & Custom Margin for the row:

  • Top Padding: 0px
  • Right Padding: 60px
  • Bottom Padding: 100px
  • Left Padding: 60px
  • Top Margin: -100px

Include ‘ 5px’ to the top padding of every column as well.

timeline

Blurb Module

Once you’ ve completed the row settings, you can add the Blurb Module to the first line of the row you’ ve just created. Within the Image & Symbol subcategory of the content tab, enable the ‘ Use Icon’ option and select an icon of choice.

timeline

Scroll down the same tab and use ‘ #f4f4f4’ as the background color.

timeline

Go to the Design tab and make the particular following adjustments to the Image & Image subcategory:

  • Icon Color:  #e09900
  • Image/Icon Placement: Remaining
  • Use Icon Font Dimension: Yes
  • Icon Font Dimension: 50px

timeline

Within the Text subcategory, make sure the left Text Orientation is certainly enabled.

timeline

The options for the Header Textual content subcategory would be the following:

  • Header Font: Crete Round
  • Header Text Alignment: Left
  • Header Font Size: 32px
  • Header Line Height: 1em

timeline

Then, open up the Body Text subcategory and make use of the following settings:

  • Body Text Alignment: Remaining
  • Body Font Size: 12px
  • Body Line Height: 1 . 7em

timeline

We’ ll be using a border with the following settings as well:

  • Use Border: Yes
  • Border Color: #000000
  • Border Width: 2px
  • Boundary Style: Dotted

timeline

Next, open the Dimension subcategory and use ‘ 279px’ with regard to the Content Width and ‘ 100%’ for the Width.

timeline

Lastly, add ’ 30px’ to the top, right, bottom plus left padding.

timeline

Text Module

As soon as you’ ve added and modified the Blurb Module, go ahead and put in a Text Module right below it. The Text Module will need a gradient history too:

  • First Color:  #e09900
  • Second Color:  rgba(255, 255, 255, 0)
  • Gradient Type: Radial
  • Radial Direction: Middle
  • Start Position: twenty percent
  • End Position: 24%

timeline

Proceed on towards the Design tab and make use of the following settings for the Text subcategory:

  • Text Font Size: 21px
  • Text Color: #FFFFFF
  • Text Line Height: 1. 7em
  • Text Alignment: Center

timeline

Open the Sizing subcategory, use a width of ‘ 48%’ and select the right Module Alignment.

timeline

Lastly, make use of a top margin of ‘ -100px’ and add ’ 50px’ to the particular top and bottom padding.

timeline

Clone Blurb & Text Module

Once you’ ve completed the first column, you may clone both modules make them within the other two columns. The only items you’ ll have to change will be the blurb icon, blurb color and the particular first gradient color of the Text Module into ‘ #0c71c3’ for the second column and ‘ #8300e9’ with regard to the last column.

Turn off on Tablet & Phone

Once you’ ve completed this 2nd row, make sure you disable this for phone and tablet as nicely.

timeline

Replicated Three-Column Row (Tablet & Phone)

The timeline version on pill and phone is slightly different. Replicated the row with blurbs you’ ve created in the previous a part of this post and follow the next actions to make it fit on phone and tablet.

Add Line Gradient Background

The row on tablet and phone will require the following gradient background:

  • First Color:  rgba(0, 0, zero, 0. 7)
  • Second Color:  rgba(255, 255, 255, 0)
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Placement: 1%
  • End Position: 0%

timeline

Row Padding

Delete most the custom padding and margin which was used in the desktop version plus add ‘ 100px’ to the best padding.

timeline

Disable on Desktop

Lastly, instead of disabling the row on phone and tablet, disable it upon desktop instead.

timeline

Result

After getting followed all the measures in the post, you should be able to attain the next result on desktop:

timeline

And the subsequent result on tablet and phone:

timeline

Final Ideas

On this page, we’ ve demonstrated you how you can create a basic timeline of your Blurb Module by using nothing else than the built-in Divi options. Two factors that help determine the Blurb Modules as a schedule are the line that connects just about all three Blurb Modules and the numbers. When you have any questions or suggestions; make sure you leave a comment in the comment section below!

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

The particular post How to Create a Schedule with Divi’ s Blurb Module appeared first on Elegant Themes Blog.