Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to create stunning gallery testimonials using Divi’s Wedding Planner Layout Pack. This tutorial will help you link testimonials to your portfolio on the same spot. This allows you to get one step closer to convincing visitors of your skills and converting them into leads. We’ll also apply a subtle effect on hover for the images you display.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a look at the end result on different screen sizes.

gallery testimonials

On Hover

gallery testimonials

Open Wedding Planner Layout Pack’s Landing Page

Start by opening the landing page you’ve created using Divi’s stunning Wedding Planner Layout Pack.

gallery testimonials

Modify Testimonials Section

Remove Second Row

This layout already includes a testimonial section. Instead of creating a new section, we’re going to modify this section to create the gallery testimonials. Scroll down until you come across the section and delete the second row.

gallery testimonials

Remove Image Module in Column 1

There’s one row left in that section now. Continue by deleting the Image Module you can find in the first column of that row.

gallery testimonials

Change Row #1 Settings

Column Structure

We’ll need to make some modifications to the settings of this row to make it look the way we want to. Start by changing the column structure into one column instead of two.

gallery testimonials

Background Color

Next, add a white background color to your row.

gallery testimonials

Background Image

We’ll reuse a background pattern which you can find in your Media Library called ‘divider.png’. After you’ve selected this pattern as your background image, apply the following settings to it:

  • Background Image Size: Actual Size
  • Background Image Repeat: Repeat

gallery testimonials

gallery testimonials

Row Alignment

We’ll create these gallery testimonials on both the left and right side of your page. We’ll start with the left side and for that, we’ll need to apply a left Row Alignment to our row.

gallery testimonials

Spacing

Open the Spacing settings next and add some custom margin and padding to your row:

  • Top Margin: 50px
  • Top & Bottom Padding: 0px

gallery testimonials

Box Shadow

Lastly, we’re also going to play around with the box shadow of this row to create a nice effect:

  • Box Shadow Horizontal Position: 60px
  • Box Shadow Vertical Position: 80px
  • Box Shadow Spread Strength: 37px
  • Shadow Color: #ded5d8
  • Box Shadow Position: Outer Shadow

gallery testimonials

Change Text Module Settings

Remove Background Color

The Text Module you can find in this row already has a ton of settings we want to keep. However, we’ll also need to make some modifications to make it match with our end result. The first thing you’ll need to do once you open the Text Module’s settings is deleting the background color that has been applied to it.

gallery testimonials

Spacing

This Text Module has some custom margin applied to it as well. Go ahead and delete all of the custom margin since we won’t need it.

gallery testimonials

Clone Text Module & Place Below Previous Text Module

Locate Text Module on Page

The next element we’ll need in our row is the Text Module containing the names of the testifier(s). We’re going to save ourselves some time and reuse one of the Text Modules you can already find on the page. Go ahead and locate the following Text Module and clone it:

gallery testimonials

Place in Row

Place the cloned Text Module right below the previous Text Module in your testimonial row.

gallery testimonials

Change Content

Change the content to the names you want to appear in your testimonial.

gallery testimonials

Change Text Settings

Then, open the text settings and make the following changes:

  • Heading 6 Text Alignment: Right
  • Heading 6 Text Size: 77px

gallery testimonials

Change Spacing

We’re going to make this Text Module overlap the row box shadow and section background by applying the following spacing settings:

  • Top Margin: -50px
  • Right Margin: -150px
  • Bottom Padding: 20px

gallery testimonials

Change Opacity

We’re also going to increase the opacity of our Text Module to ‘17%’ to make it a bit more striking.

gallery testimonials

Add Row #2

Column Structure

We’ve finished the testimonial row. The next step is adding the accompanying gallery. For this, we’re going to use a new row with the following column structure:

gallery testimonials

Row Alignment

We want to push this gallery to the left side of the page as well by using left Row Alignment.

gallery testimonials

Sizing

To create the gallery, we’re simply going to use an Image Module for each one of the columns. To erase the space between columns and create a coherent result, apply the following settings to the Sizing of your row:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

gallery testimonials

Spacing

Open the Spacing settings next and apply the following custom margin and padding to your row:

  • Bottom Margin: 80px
  • Left Margin: 50px
  • Top & Bottom Padding: 0px

gallery testimonials

Add Image Module to Column 1

Upload Image

Although we’ll need four Image Modules in total, we’re going to start by creating one and cloning it to the other columns afterwards to save ourselves effort and time. Add an Image Module to the first column of your row and upload an image of your choice.

gallery testimonials

Open in Lightbox

Give users the possibility to view the image in a bigger format by enabling the ‘Open in Lightbox’ option in the link settings of your Image Module.

gallery testimonials

Filter

We’re also going to decrease the brightness of our Image Module to ‘47%’ in the Filters settings. Applying this setting is part of the subtle hover effect we’ll add to our gallery images.

gallery testimonials

CSS ID

We’re going to use a CSS ID to remove the filter on hover later on this post, so go ahead and add ‘image-hover’ to the CSS ID of your Image Module.

gallery testimonials

Clone Image Module 3 Times and Change Images

You can now clone the Image Module three times and place it in the remaining columns. Change the image for each one the columns according to your needs.

gallery testimonials

Create Testimonial on Opposite Side

Clone Both Existing Rows

To create the exact same gallery testimonial on the opposite side, we’ll need to make some changes. Start by cloning both rows.

gallery testimonials

Change Row Alignment of Both Rows

Then, change the row alignment of both rows into right. You’ll notice that the second row doesn’t follow yet. That’s because we’ll need to modify the spacing settings in one of the next steps.

gallery testimonials

Change Box Shadow of Row #1

Instead of using ’60px’ for the Horizontal Repeat of your first row, use ‘-60px’ instead.

gallery testimonials

Change Spacing of Row #2

Remove the left margin of your second row and add ’50px’ to the right instead. Once you do, you’ll notice that your row has been pushed to the right side as well.

gallery testimonials

Change Text Orientation & Spacing of Second Text Module

The Text Module containing the names of the people testifying needs to be pushed to the left as well. To do that, start by using left Text Alignment in the Heading 6 text settings.

gallery testimonialsRemove the right margin as well and add ‘-150px’ to the left margin instead.

gallery testimonials

Add Hover Effect

Open Page Settings

The last thing left to do for this tutorial is adding the CSS code lines that’ll enable the hover effect. To do that, open your page setting by clicking on the following icon at the bottom of your page:

gallery testimonials

Remove Filter on Hover with CSS Code

The only thing we’re going to do is remove the filter we’ve applied to our Image Module on hover using the following CSS code lines and we’re done:

#image-hover:hover {
filter: none;
}

gallery testimonials

Preview

Now that we’ve gone through all the steps, let’s take a final look at the end result on different screen sizes.

gallery testimonials

On Hover

gallery testimonials

Final Thoughts

In this use case blog post, we’ve shown you how to create stunning gallery testimonials using Divi’s Wedding Planner Layout Pack. These gallery testimonials help you link testimonials to your portfolio and get one step closer to converting visitors into leads and eventually into clients. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post How to Create Stunning Gallery Testimonials with Divi appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!