Using Divi’s Exclusive Black Friday UI Kit Layout to List Products & Features Beautifully

November 24, 2018

One of the exclusive landing pages we’re providing you with as Lifetime Members and new Black Friday customers this year is the stunning UI Kit Landing Page. This layout contains some of Divi’s finest built-in design combinations and high-quality mockups that’ll take your website to the next level. In this post we’ll show you how to get your hands on it and use it effectively.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully Theme Builder Layout

Get the Exclusive Black Friday UI Kit Landing Page

Before getting into this use case, you will need to lay your hands on the exclusive Black Friday UI Kit Landing Page which you can get by becoming a new Elegant Themes Member, upgrading your existing account, or by already being a Lifetime Member with us. If you are indeed already a Lifetime Member you can log in to our members area and download all of our exclusive landing pages here. Everyone else will need to use the button below to buy or upgrade before they can follow along with the rest of our tutorial.

Claim The Deal Before It Disappears!

Using Divi’s Column Structures to List Products & Features Beautifully

For the remainder of this post, we’ll assume you’ve either taken advantage of our Black Friday deal or that you are already a Lifetime Member and have access to the Black Friday UI Kit Landing Page.

Once you’ve downloaded the new UI Kit Landing Page from our members area you can watch the video below to see just how easy it is to set up. We would also encourage you to follow along with this tutorial to get your site ready for further customization.

[youtube https://www.youtube.com/watch?v=Dwbjf9k_Pdo?feature=oembed&w=719&h=404]

In this use case post, we’re going to show you how to stunningly list your features and/or products using Divi’s new column structures. The design we’ll handle looks great with the UI Kit Landing Page and allows you to use the space on your page in an effective and beautiful way.

Preview

Let’s take a look at the outcome on different screen sizes.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-1 Theme Builder Layout

Hover & Animation

We’ll also add some subtle hover and animation settings to the various design elements. This will give the following interaction:

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully Theme Builder Layout

Let’s Get Started!

Add New Page Using UI Kit Landing Page

The first thing you will need to do is create a new page using the UI Kit Landing Page which you have downloaded and uploaded. If you’re not sure how to do that, make sure you check the video in the previous part of this post that will guide you there step by step.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-2 Theme Builder Layout

Locate Features Section on Page

Once you’ve uploaded the layout, scroll down until you come across the features section on the page.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-3 Theme Builder Layout

Remove Existing Rows

Remove the last two rows you can find in this section. We’ll replace the content of these rows with our feature/product list.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-4 Theme Builder Layout

Add New Row Below Row Containing Row

Column Structure

Add a new row to the section using the following column structure:

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-5 Theme Builder Layout

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings in the design tab.

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

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-6 Theme Builder Layout

Spacing

To make sure this design looks great across all screen sizes, we’re going to use different custom margin and padding values:

  • Top Margin: 100px
  • Bottom Margin: 100px
  • Top Padding: 87px
  • Column 1 Top Padding: 100px (Desktop), 0px (Tablet & Phone)
  • Column 2 Top Padding: 100px (Desktop), 0px (Tablet & Phone)
  • Column 3 Top Padding: 100px (Desktop). 0px (Tablet & Phone)
  • Column 3 Bottom Padding: 50px (Tablet & Phone)
  • Column 4 Left Padding: 10px (Phone Only)
  • Column 4 Right Padding: 10px
  • Column 5 Left Padding: 5px (Desktop & Tablet), 10px (Phone)
  • Column 5 Right Padding: 5px (Desktop & Tablet), 10px (Phone)
  • Column 6 Left Padding: 10px
  • Column 6 Left Padding: 10px (Phone Only)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-7 Theme Builder Layout

Add Text Module to Column 1

Add Content

Time to start adding modules! Add a Text Module to the first column with a number.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-8 Theme Builder Layout

Default Background Color

Add a background color to this module.

  • Background Color: #0f0f0f

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-9 Theme Builder Layout

Hover Background Color

And change the background color on hover.

  • Background Color: #ff5400

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-10 Theme Builder Layout

Background Image

You can also add one of the icon images, which you can find in your Media Library, to the background:

  • Background Image Size: Actual Size
  • Background Image Position: Center
  • Background Image Repeat: No Repeat

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-11 Theme Builder Layout

Default Text Settings

Continue by modifying the text settings.

  • Text Font: Muli
  • Text Font Weight: Light
  • Text Color: #ffffff
  • Text Size: 80px (Desktop & Phone), 40px (Phone)
  • Text Line Height: 1em

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-12 Theme Builder Layout

  • Text Shadow Color: ##ffffff
  • Text Orientation: Left

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-13 Theme Builder Layout

Default Spacing

Add some custom padding to create a square.

  • Top Padding: 200px
  • Left Padding: 50px (Phone Only)
  • Right Padding: 50px (Phone Only)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-14 Theme Builder Layout

Hover Spacing

Modify the spacing settings on hover.

  • Left Padding: 100px

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-15 Theme Builder Layout

Border

To match the UI Kit Landing Page, we’re also adding some subtle rounded corners. Add ’20px’ to each one of the corners.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-16 Theme Builder Layout

Box Shadow

Use the following box shadow to add some color the module as well:

  • Box Shadow Horizontal Position: 20px
  • Box Shadow Vertical Position: -50px
  • Box Shadow Spread Strength: 17px
  • Shadow Color: #593aff

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-17 Theme Builder Layout

Animation

Last but not least, add a very subtle slide animation to the Text Module.

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Intensity: 3%

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-18 Theme Builder Layout

Add Divider Module to Column 2

Visibility

The next module we’ll need is a Divider Module. Go ahead and add one to the second column. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-19 Theme Builder Layout

Color

Change the divider color next.

  • Color: #ffffff

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-20 Theme Builder Layout

Spacing

To overlap the Text Module in the first column, we’re going to use some custom margin values which we’ll adjust according to the different screen sizes.

  • Top Margin: 30px
  • Left Margin: -200px (Desktop & Tablet), 0px (Phone)
  • Right Margin: 200px (Desktop & Tablet), 0px (Phone)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-21 Theme Builder Layout

Add Text Module #1 to Column 3

Add Content

On to the next column! Here, the first module we’ll need is a title Text Module. Go ahead and add the title of your first feature or product.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-22 Theme Builder Layout

Heading Text Settings

Then, go to the heading text settings and make some changes to match the UI Kit Layout Pack.

  • Heading 3 Font: Muli
  • Heading 3 Font Weight: Light
  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 30px (Desktop & Tablet), 18px (Phone)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-23 Theme Builder Layout

Spacing

To push this module to the left, we’re going to use some custom spacing values.

  • Top Margin: 20px
  • Bottom Margin: 20px
  • Left Margin: -180px (Desktop & Tablet), 0px (Phone)
  • Left Padding: 20px (Desktop & Tablet), 50px (Phone)
  • Right Padding: 20px (Desktop & Tablet), 50px (Phone)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-24 Theme Builder Layout

Add Text Module #2 to Column 3

Add Content

The next module we’ll need is a description Text Module. Go ahead and enter the description of your feature or product.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-25 Theme Builder Layout

Text Settings

Change the text settings next.

  • Text Color: rgba(255,255,255,0.5)
  • Text Line Height: 2.2em

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-26 Theme Builder Layout

Spacing

Push this module to the left as well by using some custom spacing values.

  • Left Margin: -180px (Desktop & Tablet), 0px (Phone)
  • Left Padding: 20px (Desktop & Tablet), 50px (Phone)
  • Right Padding: 20px (Desktop & Tablet), 50px (Phone)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-27 Theme Builder Layout

Clone & Place Button Module in Column 3

The last module we’ll need in column 3 is a Button Module. To save time, we’re going to clone an existing button on the page and place the duplicate right below the other two modules we’ve added.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-28 Theme Builder Layout

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-29 Theme Builder Layout

Change Content

Change the content of the button module.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-30 Theme Builder Layout

Change Spacing

We’re pushing this module to the left as well. As you can notice, all the modules in column 3 are taking up the space of two columns. This kind of approach allows us to create another column structure that matches the outcome we want.

  • Top Margin: 50px
  • Left Margin: -160px (Desktop & Tablet), 50px (Phone)
  • Right Margin: 50px (Phone Only)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-31 Theme Builder Layout

Add Image Module to Column 4

Upload Image

On to the next column! Add an Image Module to column 4 and upload an image of choice. For this example, we’ve used 500×500 image dimensions but feel free to play around with other image sizes as well.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-32 Theme Builder Layout

Box Shadow

Add a subtle box shadow to this module.

  • Shadow Color: #ffffff

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-33 Theme Builder Layout

Animation

And to top it off, add a slide animation to the image as well.

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Delay: 100ms
  • Animation Intensity: 3%

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-34 Theme Builder Layout

Add Text Module #1 to Column 4

Add Content

Right below the Image Module, go ahead and add a title Text Module with some content of choice.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-35 Theme Builder Layout

Default Background Color

Change the background color of this module.

  • Background Color: #0f0f0f

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-36 Theme Builder Layout

Hover Background Color

And use another background color on hover.

  • Background Color: #593aff

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-37 Theme Builder Layout

Heading Text Settings

Continue by changing the heading text settings to match the UI Kit Landing Page.

  • Heading 4 Font: Muli
  • Heading 4 Font Weight: Light
  • Heading 4 Text Color: #ffffff
  • Heading 4 Text Size: 23px (Desktop & Tablet), 18px (Phone)

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-38 Theme Builder Layout

Default Spacing

Add some custom spacing values next.

  • Top Padding: 50px
  • Left Padding: 30px
  • Right Padding: 30px

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-39 Theme Builder Layout

Hover Spacing

And change these values on hover to create a nice transition.

  • Bottom Marign: 50px
  • Top Padding: 20px
  • Bottom Padding: 20px

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-40 Theme Builder Layout

Add Text Module #2 to Column 4

Add Content

The second and last module we’ll need in column 4 is a description Text Module. Enter some content of choice.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-41 Theme Builder Layout

Background Color

Change the background color next.

  • Background Color: #0f0f0f

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-42 Theme Builder Layout

Text Settings

And modify the text settings.

  • Text Color: rgba(255,255,255,0.5)
  • Text Line Height: 2.2em

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-43 Theme Builder Layout

Spacing

To create a clean look and feel, add some custom padding to this module.

  • Bottom Padding: 50px
  • Left Padding: 30px
  • Right Padding: 30px

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-44 Theme Builder Layout

Border

Last but not least, add ’20px’ to the bottom two corners of the module.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-45 Theme Builder Layout

Clone All Modules in Column 4 Twice & Place in Remaining Columns

Change Image & Content

Now that you have all the modules you need in column 4, you can go ahead and clone all of these modules twice and place the duplicates in the two remaining columns. Change the content and images to create variety.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-46 Theme Builder Layout

Clone Row as Many Time as Wanted (According to Number of List Items)

We finished our first list item! Now you can go ahead and clone this row as many times as you want, depending on the number of features and/or products you want to showcase.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-47 Theme Builder Layout

Change Content of Clone

For each one of the duplicates, you’ll need to change the content.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-48 Theme Builder Layout

Find & Replace Color

You can also use Divi’s Find & Replace feature to quickly change the color palette of a list item.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-49 Theme Builder Layout

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-50 Theme Builder Layout

Change Hover Background Color

Make sure that once you change the color palette, you change the hover background color of the number Text Module as well.

  • Background Color: #593aff

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-51 Theme Builder Layout

Change Background Image

Last but not least, you can also choose another icon in the list depending on the feature and/or product you’re allowing to show up.

using-divis-exclusive-black-friday-ui-kit-layout-to-list-products-features-beautifully-52 Theme Builder Layout

Final Thoughts

This use case is part of our Black Friday Deal where we share 6 FREE limited edition landing pages with Black Friday customers and lifetime members. By joining our empowered community during these days and becoming a member, you’ll get:

  • 25% OFF EVERYTHING
  • All of the 6 landing pages for free
  • Access to our awesome themes and plugins
  • Bonus Prizes

Seize the opportunity and become a member today!

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

how-to-start-a-podcast-with-wordpress Theme Builder Layout

How to Start a Podcast with WordPress

Let’s talk about podcasting. Because it seems like everybody already is. Podcasting is taking over content creation and media and spreading like wildfire. Nearly everyone wants to get a part of the billion dollar industry, so we want to give you a definitive look at...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.