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.
Add a new section
Scroll down the layout and add a new section where you want to display the book reviews.
Add a new line
Column structure
Continue adding a new row using the following column structure:
1 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%
Column 2 Background Color
Also add a custom background color to the second column.
- Column 2 Background Color: #9400ff
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
Spacing
We are also changing the line spacing settings.
- Upper margin: 100px
- Bottom margin: 100px
- Top Padding: 0px
- Bottom padding: 0px
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.
Image Alignment
Select the alignment of the left image on the Design tab.
- Image alignment: left
sizing
We are also changing the width of this module for different screen sizes.
- Width: 20% (desktop and tablet), 30% (phone)
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
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.
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: ★★★★.
Background color
Change the bottom of the module then.
- Background color: # 9400ff
Text 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
sizing
Continue by changing the width of the module.
- Width: 35%
Spacing
And add a custom spacing.
- Left margin: 50px
- Right margin: 50px
- Top Padding: 20px
- Bottom padding: 20px
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)
Transformer 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)
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.
Text settings
Switch to the Design tab and change the text settings accordingly:
- Text Font: Montserrat
- Text size: 18px
Text link settings
Change the color of the link text too.
- Link text color: #9400ff
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.
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
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)
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.
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)
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;
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.
sizing
Go to the Design tab of the Image module and change the width.
- Width: 79% (desktop), 40% (tablet and phone)
Advanced Primary Element
Here we will try to align the image in the center.
- align-self: 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.
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!