Today I'm going to show you how to design a design for eye-catching book reviews using Ebook Divi Layout Pack and Divi built-in options only. It's 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 start the design

Upload ebook pack landing page layout

The first thing to do is to create a new page using the landing page layout of theEbook Layout Pack that you will find in Premade Layouts.

Ebook landing layoutAdd a new section

Scroll down the layout and add a new section where you want to display the book reviews.

Insert a divi ebook layout section

Add a new line

Column structure

Continue adding a new row using the following column structure:

Add a divi layout1 Column Gradient Background

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

  • 1 color: #ffffff
  • 2 color: #f4f4f4
  • Column 1 Starting Position: 12%
  • Column 1 Final Position: 12%

Divi background

Column 2 Background Color

Also add a custom background color to the second column.

  • Column 2 Background Color: #9400ff

Line 2 background

sizing

Switch to the Design tab and remove all custom space between columns using the following settings:

  • Use a custom gutter width: Yes
  • Gutter width: 1

Parameter line sizing

Spacing

We are also changing the line spacing settings.

  • Upper margin: 100px
  • Bottom margin: 100px
  • Top Padding: 0px
  • Bottom padding: 0px

Divi spacing

Add an image module to column 1

Upload 1: 1 Image

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

Add a divi image

Image Alignment

Select the alignment of the left image on the Design tab.

  • Image alignment: left

Image alignment

sizing

We are also changing the width of this module for different screen sizes.

  • Width: 20% (desktop and tablet), 30% (phone)

Divi image modification

Spacing

To allow overlap on the left side of the line, we add a negative left margin value in the Spacing settings of the Image module.

  • Left margin: -30px

Left margin adjustment image

Border

To complete the design of the image, we also add '50vw' to each of the corners in the border settings. This will ensure that the image maintains its circular shape across different screen sizes.

Divi image rounded settings

Add text module # 1 to column 1

Add star symbols to the content area

Let's move on to the next module, which is the ranking text module. To highlight the number of stars, we will use symbols. Go ahead, copy the following symbols and paste them into the box contents of a new text module: ★★★★.

Add etoile diviBackground color

Change the bottom of the module then.

  • Background color: # 9400ff

Divi star settingsText settings

Switch to the Design tab and change the text settings as well.

  • Text Font: Montserrat
  • Font weight of the text: Heavy
  • Text size: 45px (desktop), 30px (tablet), 25px (phone)
  • Height of the line of text: 1em
  • Alignment of the text: center

Divi text parametersizing

Continue by changing the width of the module.

  • Width: 35%

Divi star width adjustmentSpacing

And add a custom spacing.

  • Left margin: 50px
  • Right margin: 50px
  • Top Padding: 20px
  • Bottom padding: 20px

Add star divi

Shadow box

To highlight the rating box, we're going to add a subtle shadow.

  • Box Shadow Blur Force: 50px
  • Shadow color: rgba (0,0,0,0,3)

Text setting shaded diviTransformer Translate

Finally, we'll reposition the text module using custom translation conversion values. You can postpone this step until you have also added all of the modules to your column.

  • Right: 360px (desktop), -84px (tablet), -70px (phone)
  • Bottom: -113px (desktop), 190px (tablet), 141px (phone)

Divi module transformation

Add text module # 2 to column 1

Add content

The next module we need in column 1 is another text module. Add the contents of your choice and a link to the reviewer and the book.

Divi author note text module

Text settings

Switch to the Design tab and change the text settings accordingly:

  • Text Font: Montserrat
  • Text size: 18px

Divi font type

Text link settings

Change the color of the link text too.

  • Link text color: #9400ff

Divi module color

Spacing

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

  • Top margin: -100px (desktop), 0px (tablet and phone)
  • Left margin: 200px (desktop), 50px (tablet), 20px (phone)
  • Right margin: 50px (tablet), 20px (phone)

Add text module # 3 to column 1

Add H3 content

Let's move on to the next module, which is a text module containing the title of the H3 revision.

Text module header styles ebook divi review

H3 text settings

Switch to the Design tab and change the H3 text settings.

  • Heading 3 Font: Montserrat
  • Title 3 Font weight: bold
  • Title 3 Text color: #000000

Text module header styles ebook divi review

Spacing

Also add a custom margin.

  • Top margin: 80px (desktop), 50px (tablet and phone)
  • Left margin: 50px (desktop and tablet), 20px (phone)
  • Right margin: 50px (desktop and tablet), 20px (phone)

Divi text module settings spacing configuration

Add the 4 text module to the 1 column

Add content

Let's move on to the next and last module we need in the 1 column, which is another text module with the actual revision.

Add a divi module text

Spacing

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

  • Upper margin: 20px
  • Bottom margin: 50px
  • Left margin: 50px (desktop and tablet), 20px (phone)
  • Right margin: 50px (desktop and tablet), 20px (phone)

Edit divi buildr text

Add an image module to column 2

Change the CSS settings of the 2 column

We will use the flex properties to align the image in the center:

display: flex;

Customize column alignment 2

Download the book cover image

In the second column we will need two modules, starting with an image module with the cover of the book. For this tutorial, we are using the book covers provided with the Divi overview book, but you can also add your own book cover.

Add divi ebook imagesizing

Go to the Design tab of the Image module and change the width.

  • Width: 79% (desktop), 40% (tablet and phone)

Adjust divi image size

Advanced Primary Element

Here we will try to align the image in the center.

  • align-self: center;

Align the image in the center

Clone the design as many times as you want

Once you've created the first book review, you can clone the entire line as many times as you want, depending on how many reviews you want to see on your landing page.

Duplicate the divi section

Latest Thoughts

In this tutorial, we showed you how to design awesome book reviews for your next ebook publishing pages. This helps you add social proof to your page and convince visiteurs the credibility of your book. If you have any questions or suggestions, be sure to drop a comment in the comment section below!