The web design trends that emerge every year help expand design possibilities for designers and DIY users everywhere. More and more, asymmetrically positioned elements, bright colors, and font families traditionally used in print are being appreciated. In this post, we’re going to provide you with a tutorial that uses these elements. The design that we’ll recreate can be used for any website but works especially well for eCommerce websites. While keeping your product images in the spotlight, we’re going to recreate a design that fits 2018 perfectly.

Result

On Desktop

On desktop, we’re going to recreate the following stunning result:

ecommerce

On Tablet

We will need an alternative for tablet and phone which is more simple and effective at the same time. Therefore, we’re recreating the following design:

ecommerce

On Phone

We’re using the same design for phone as we did for tablet:

What You Need

  • One product image with 1600 height and 1187 width
  • Another product image with 1600 width and 1200 height
  • You can download the exact product image (and modify it with Photoshop) by going to the following link
  • The triangle image which you can save below:

ecommerce

Modify Primary Menu

Disable Fixed Navigation

The first thing you can do, depending on your preference, is disabling the Fixed Navigation Bar option to keep the primary menu at the top of your page at all times. To do that, go to your WordPress Dashboard > Divi > Theme Options > General > Disable Fixed Navigation Bar.

ecommerce

Primary Menu Bar Settings

Then, you’ll need to make some changes to the Primary Menu Bar by going to your WordPress Dashboard > Appearance & Customize. Once you’re there, navigate to your Primary Menu bar and apply the following settings to your primary menu to achieve the exact same result:

  • Make Full Width: Yes
  • Menu Height: 66
  • Logo Max Height: 54
  • Text Size: 24
  • Letter Spacing: -1
  • Font: Default Theme Font
  • Font Style: Uppercase & Underline
  • Text Color: #140056
  • Active Link Color: #140056
  • Background Color: rgba(255,255,255,0)
  • Dropdown Menu Background Color: rgba(255,255,255,0)

ecommerce

ecommerce

Disable Search Icon

Another thing you can do is disable the search icon by going to Header & Navigation > Header Elements > Disabling the ‘Show Search Icon’ option. But again, this depends on what your preferences are. There’s no harm in leaving the search icon to show.

ecommerce

Recreate Desktop Version

Create New Section

Background Color

Now that we’ve modified the primary menu, we can get started with the desktop layout that we’re going to recreate. Open a new or existing page, add a new section and choose ‘#f2f2f2’ as its background color.

ecommerce

Spacing

Move on to the Design tab of that same section and make sure the top and bottom padding are set to ‘0px’. That way, there won’t be any distance between the section and the row you’ll add afterwards.

ecommerce

Visibility

Lastly, open the Visibility subcategory within the Advanced tab and disable this section on phone and tablet. As you could notice at the beginning of this post, we’re recreating a simpler hero section for these screen sizes to maintain a responsive design across all screen sizes.

ecommerce

Add New Row

Column Structure

Now that we’re done with the section settings, we can go ahead and add a new row to it with the following column structure:

ecommerce

Sizing

Without adding any modules yet, open the row settings, go to the Sizing subcategory of the Design tab and enable the ‘Make This Row Fullwidth’ option. This will allow us to take up the majority of the screen for all of the modules we’ll be adding.

ecommerce

Spacing

Then, open the Spacing subcategory and apply the following custom padding to your row:

  • Top: 0px
  • Right: 0px
  • Bottom: 135px
  • Left: 0px

ecommerce

Add First Text Module to First Column

Text Settings

The row settings are all done! We can now add the different modules we need to create the stunning result. The first thing you’ll need to do is add a Text Module to the first column of the row. The ‘Creative Vibes’ copy you can read is split into two Text Modules. This allows us to use different underline colors for each Text Module. Once you add the first copy to your Text Module, move on to the Design tab and apply the following settings to the Text subcategory:

  • Text Font: Adamina
  • Text Font Weight: Bold
  • Text Font Style: Underline
  • Text Underline Color: #769cc9
  • Text Underline Style: Solid
  • Text Size: 73px
  • Text Color: #140056
  • Text Line Height: 1em
  • Text Orientation: Center

ecommerce

ecommerce

Spacing

Then open the Spacing subcategory and add ‘120px’ to the top margin. This will create enough space between your primary menu bar and this Text Module.

ecommerce

Add Second Text Module to First Column

Text Settings

You can simply clone the previous Text Module, remove the top margin and change the Text Underline color into ‘#f5d2cc’, or you can build the same Text Module from scratch again using the following text settings:

  • Text Font: Adamina
  • Text Font Weight: Bold
  • Text Font Style: Underline
  • Text Underline Color: ##f5d2cc
  • Text Underline Style: Solid
  • Text Size: 73px
  • Text Color: #140056
  • Text Line Height: 1em
  • Text Orientation: Center

ecommerce

ecommerce

Add Image Module to First Column

Save The Transparent Image

To make this tutorial a bit easier, we’ve provided you with the transparent triangle image that is placed in the first column as well. Save the following image on your computer and go from there:

ecommerce

Upload Image

Once you’ve saved the image, add an Image Module to your first column (this is the last module within this row) and upload the triangle image file you’ve saved.

ecommerce

Gradient Background

You can give this triangle whatever kind of gradient background or background color you want. But to match it with the color palette we’re using, we’re applying the following settings:

  • First Color: #f5d2cc
  • Second Color: rgba(118,156,201,0.32)
  • Gradient Type: Linear
  • Gradient Direction: 224deg
  • Start Position: 42%
  • End Position: 76%

ecommerce

Spacing

Move on to the Design tab, open the Spacing subcategory and add ’10px’ to the top margin. This will create enough distance for the triangle to show up beneath the product image we’ll add in the upcoming steps. The reason why we’re using percentage instead of pixels is to make it match with different screen sizes. The percentage option takes that into consideration and makes sure the distance is calculated correctly.

ecommerce

Add First Image Module to Second Column

Image Dimensions

Now that we’ve finished adding modules to the first column and modifying them according to our design, we can move on to the second column. For this column, the first thing we’ll need is one of the product images with the following dimensions:

  • Width: 1600px
  • Height: 1187px

The product images that we’ve used for this example are a free resource which you can find here. Each one of the images has a Photoshop file which you can modify to your own needs, changing the products is one of those things you can do.

Upload Image

Once you have your product image in place, go ahead, add a new Image Module and upload your Product Image.

ecommerce

Spacing

Then, move on to the Design tab, open the Spacing subcategory and add ‘-20%’ to the top margin. As you can recall, we’ve used a transparent background color for our Primary Menu Bar in the first part of this tutorial. By doing so, we allow this Image Module to appear right beneath the primary menu bar without being covered by a primary menu background color.

ecommerce

Add Second Image Module to Second Column

Image Dimensions

Right below the image we’ve added in the previous step of this tutorial, we’re going to add another product image. This time, we’re using the following dimensions for the image:

  • Width: 1600px
  • Height: 1200px

Upload Image

Go ahead, add an Image Module and upload the product image you’ve chosen.

ecommerce

Spacing

Then, move on to the Design tab and open the Spacing subcategory. We’re going to make this module overlap both the previous image and the first column to create a more complex design. To achieve that, use the following custom margin:

  • Top: -50%
  • Right: 350px
  • Left: -350px

ecommerce

Border Styles

We’re also using top and right Border Styles with the same color as the section background:

  • Border Width: 15px
  • Border Color: #f2f2f2
  • Border Style: Solid

ecommerce

Recreate Tablet & Phone Version

Create New Section

Background Color

The tablet & phone version were creating for this example is much more straightforward and appropriate for tablet and phone screen sizes. Although the desktop version might be more appealing, it’s just not functional on a tablet or phone screen. Add a new section right below the previous one and add ‘#f2f2f2’ as its background color.

ecommerce

Spacing

Then, open the Spacing subcategory of this section and add ’50px’ to the top and bottom padding to create the needed space between the section and the row that is about to follow.

ecommerce

Visibility

Lastly, disable this new section on desktop, as we already have a desktop version for this hero section.

ecommerce

Add New Row

Column Structure

Continue by adding a new row with one column:

ecommerce

Background Color

Open the row settings and add the following color to the row’s background: ‘rgba(237,237,237,0.73)’. We’re using this color on top of the background image so the text becomes more readable.

ecommerce

Background Image

Switch over to the background image tab and add one of your product images as the background along with the following options:

  • Background Image Size: Actual Size
  • Background Image Position: Center Left
  • Background Image Repeat: No Repeat
  • Background Image Blend: Overlay (this makes the overlay happen)

ecommerce

Sizing

Continue by opening the Sizing subcategory and enable the ‘Make This Row Fullwidth’ option.

ecommerce

Spacing

Lastly, make sure the following settings apply to the Spacing subcategory as well:

  • Top: 0px
  • Right: 0px
  • Bottom: 120px
  • Left: 0px

ecommerce

Clone First Text Module of Desktop Version

Text Settings

You can basically clone the two previous Text Modules you’ve created for the desktop version and add these to this new row (or create them from scratch). If you choose to clone and modify the Text Modules, the only thing you’ll need to change is Text Size for both tablet and phone:

  • Tablet: 70px
  • Phone: 60px

ecommerce

Clone Second Text Module of Desktop Version

Text Settings

Do the same thing for the Text Size of the second Text Module as well and you’re done:

  • Tablet: 70px
  • Phone: 60px

ecommerce

Result

Let’s take a final look at the result we’ve recreated on different screen sizes.

On Desktop

ecommerce

On Tablet

ecommerce

On Phone

Final Thoughts

Well, that’s all for this tutorial! This eCommerce hero section will save you time and stimulate your creativity to create your own designs using this technique. You can use this eCommerce hero section for any type of website, but it specifically matches an eCommerce website that focuses on showcasing product images in a creative and trendy way. If you have any questions or suggestions make sure you leave a comment in the comment section below!

The post Recreate a Trendy Hero Section for Your Next eCommerce Divi Project appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!