Skip to Main Content

How to create an ideal design for eBook previews with Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Today, I'm going to show you how to design a design for catchy book reviews using Divi's Ebook Layout Pack and built-in Divi options only. It's a great way to add social evidence to your landing pages, increase credibility, and elegantly share the short reviews of users.

Let's start the design

Transfer the landing page layout of the ebooks pack

The first thing to do is to create a new page using the presentation of the landing page of the Ebook Layout Pack that you will find in the predefined layouts.

Add a new section

Scroll the layout and add a new section to where you want to display 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 the custom space between the columns by using the following parameters:

  • 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 the 1 column

Upload 1: 1 Image

Once your line parameters 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 image ratio is 1: 1. This means that the height and width must have the same value.

Image Alignment

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

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

  • Alignment of the image: 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 an 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 image design, we also add '50vw' to each of the corners in the border settings. This will ensure that the image retains 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. Continue, copy the following symbols and paste them into the content area of ​​a new text module: ★★★★.

Background color

Change the bottom of the module then.

  • Background color: # 9400ff

Text settings

Go 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 evaluation box, we will add a subtle shadow.

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

Transformer Translate

Finally, we will reposition the text module using custom translation conversion values. You can postpone this step until you have also added all 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 the 1 column is another text module. Add the content of your choice and a link to the review and the book.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Text settings

Go 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 item 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

Go 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

Access the spacing settings for 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 the 2 column

Change the CSS settings of the 2 column

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

display: flex;

Download the cover image of the book

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

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]

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.

Last thoughts

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

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
3 shares
Share3
tweet
Save
WhatsApp