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 design eye-catching book reviews for your upcoming ebook landing page using Divi’s Ebook Layout Pack and Divi’s built-in options only. This is a great way to add social proof to your landing pages, increase credibility and share people’s short reviews in an elegant way.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

book reviews

Mobile

book reviews

Download The Book Reviews Section Layout for FREE

To lay your hands on the free book reviews section layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating!

Upload Ebook Layout Pack Landing Page Layout to New Page

The first thing you’ll need to do is create a new page using the Ebook Layout Pack landing page layout that you can find within the premade layouts.

book reviews

Add New Section

Scroll down the page layout and add a new section wherever you want the book reviews to show up.

book reviews

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

book reviews

Column 1 Gradient Background

Without adding any modules yet, open the row settings and add a gradient background to the first column.

  • Color 1: #ffffff
  • Color 2: #f4f4f4
  • Column 1 Start Position: 12%
  • Column 1 End Position: 12%

book reviews

Column 2 Background Color

Add a custom background color to the second column as well.

  • Column 2 Background Color: #9400ff

book reviews

Sizing

Move on to the design tab and remove all the custom space between columns using the following settings:

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

book reviews

Spacing

We’re also modifying the row spacing settings.

  • Top Margin: 100px
  • Bottom Margin: 100px
  • Top Padding: 0px
  • Bottom Padding: 0px

book reviews

Add Image Module to Column 1

Upload 1:1 Image

Once your row settings are in place, you can start adding the various modules, starting with an Image Module in the first column. Upload an image of your choice but make sure the image ratio is 1:1. This means the height and width should carry the same value.

book reviews

Image Alignment

Select left image alignment in the design tab.

  • Image Alignment: Left

book reviews

Sizing

We’re also changing the width of this module across different screen sizes.

  • Width: 20% (Desktop & Tablet), 30% (Phone)

book reviews

Spacing

To allow an overlap on the left side of the row, we’re adding a negative left margin value in the spacing settings of the Image Module.

  • Left Margin: -30px

book reviews

Border

To complete the image design, we’re also adding ’50vw’ to each one of the corners in the border settings. This will make sure the image keeps its circular shape across different screen sizes.

book reviews

Add Text Module #1 to Column 1

Add Star Symbols to Content Box

On to the next module, which is the rating Text Module. To showcase the star ratings, we’re going to use symbols. Go ahead and copy the following symbols and paste them into the content box of a new Text Module: ★★★★✰.

book reviews

Background Color

Change the background of the module next.

  • Background Color: #9400ff

book reviews

Text Settings

Move on to the design tab and modify the text settings as well.

  • Text Font: Montserrat
  • Text Font Weight: Heavy
  • Text Size: 45px (Desktop), 30px (Tablet), 25px (Phone)
  • Text Line Height: 1em
  • Text Alignment: Center

book reviews

Sizing

Continue by changing the width of the module.

  • Width: 35%

book reviews

Spacing

And add some custom spacing.

  • Left Margin: 50px
  • Right Margin: 50px
  • Top Padding: 20px
  • Bottom Padding: 20px

book reviews

Box Shadow

To highlight the rating box, we’ll add a subtle box shadow.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.3)

book reviews

Transform Translate

And last but not least, we’ll reposition the Text Module using some custom transform translate values. You can postpone this step until you’ve added all modules to your column as well.

  • Right: 360px (Desktop), -84px (Tablet), -70px (Phone)
  • Botto,: -113px (Desktop), 190px (Tablet), 141px (Phone)

book reviews

Add Text Module #2 to Column 1

Add Content

The next module we need in column 1 is another Text Module. Add the content of your choice and link to the reviewer and book.

book reviews

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Montserrat
  • Text Size: 18px

book reviews

Link Text Settings

Change the link text color too.

  • Link Text Color: #9400ff

book reviews

Spacing

Then, go to the spacing settings and reposition the element using custom margin values.

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

book reviews

Add Text Module #3 to Column 1

Add H3 Content

On to the next module, which is a Text Module containing the H3 review title.

book reviews

H3 Text Settings

Move on to the design tab and change the H3 text settings.

  • Heading 3 Font: Montserrat
  • Heading 3 Font Weight: Bold
  • Heading 3 Text Color: #000000

book reviews

Spacing

Add some custom margin as well.

  • Top Margin: 80px (Desktop), 50px (Tablet & Phone)
  • Left Margin: 50px (Desktop & Tablet), 20px (Phone)
  • Right Margin: 50px (Desktop & Tablet), 20px (Phone)

book reviews

Add Text Module #4 to Column 1

Add Content

On to the next and last module we need in column 1, which is another Text Module with the actual review.

book reviews

Spacing

Go to the spacing settings of this module and apply the following settings:

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

book reviews

Add Image Module to Column 2

Upload Book Cover Image

In the second column, we’re going to need two modules, starting with an Image Module that carries the book cover. For this tutorial, we’re using the book covers that come with Divi’s Ebook Layout Pack, but you can add your own book cover instead.

book reviews

Sizing

Move on to the design tab of the Image Module and change the width.

  • Width: 79% (Desktop), 40% (Tablet & Phone)

book reviews

Spacing

Modify the spacing settings as well.

  • Top Margin: 60px
  • Bottom Margin: 60px

book reviews

Box Shadow

And add a box shadow to emphasize the book cover.

  • Box Shadow Vertical Position: 40px
  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -20px
  • Shadow Color: rgba(0,0,0,0.8)

book reviews

Add Button Module to Column 2

Add Copy

The next and last module we need in column 2 is Button Module. Add some copy of your choice and link to the page where people can purchase your book.

book reviews

Button Alignment

Move on to the design tab and change the button alignment.

  • Button Alignment: Center

book reviews

Button Settings

Modify the button settings to match the layout pack’s look and feel.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 16px
  • Button Text Color: #ffffff
  • Button Background Color: #000000
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Font: Montserrat
  • Button Font Weight: Bold

book reviews

book reviews

Spacing

And finish the first book review design by adding some custom padding values to the button.

  • Top Padding: 16px
  • Bottom Padding: 16px
  • Left Padding: 38px
  • Right Padding: 38px

book reviews

Clone Row up to as Many Times as Wanted

Once you’re done creating the first book review, you can clone the entire row up to as many times as you want, depending on how many reviews you want to show up on your landing page.

book reviews

Upload Different Image

Change the image of the reviewer.

book reviews

Change Book Cover

Along with the book cover, if necessary.

book reviews

Change Copy

And modify all the copy as well.

book reviews

Find & Replace Column 2 Background Color in Row

As you can notice in the preview of this post, we’re using a different color palette for this second review. To make it easy for ourselves, we’re going to open the row settings and right-click on the column 2 background, then click on find & replace.

book reviews

Change the purple color that is being used within the row and you’re done! Make sure you repeat these steps for each one of the duplicate book reviews you add to your page.

  • Within: This Row
  • Replace With: #31d190

book reviews

Preview

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

Desktop

book reviews

Mobile

book reviews

Final Thoughts

In this post, we’ve shown you how to design stunning short book reviews for your upcoming ebook landing pages. This helps you add social proof to your page and convince visitors of your book’s credibility. This use case tutorial is part of our ongoing Divi design initiative, where we try to put something extra in your design toolbox each and every week. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

The post How to Design Eye-Catching Book Reviews for Your Divi Ebook Landing Page appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!