ideal design for ebook divi

Today I’m going to show you how to make an ideal design for ebook Divi for eye-catching book reviews using Divi’s Ebook Layout Pack and Divi’s built-in options only. It’s a great way to add social proof to your landing pages, boost credibility, and elegantly share short reviews from internet users.

ideal design for ebook divi

Let’s start the ideal design for ebook divi

Upload ebook pack landing page layout

The first thing to do is to create a new page using the Ebook Layout Pack landing page layout that you will find in the pre-designed 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 row

Column structure

Continue by adding a new row using the column structure.

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 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 custom gutter width: Yes
  • Gutter width: 1

Spacing

We are also changing the line spacing settings.

  • Top 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

Frontier

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 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 are going to use symbols. Go ahead, copy the following symbols and paste them into the content area of ​​a new text module.

Background color

Then change the bottom of the module.

  • Background color: # 9400ff

Text settings

Switch to the Design tab and change 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

Sizing

Continue by changing the width of the module.

  • Width: 35%

Spacing

And add 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)

Transform Translate

Finally, we’ll 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)
  • Low: -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 content of your choice and a link to the review and the book.

Text settings

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

  • Text Font: Montserrat
  • Text size: 18px

Text link parameters

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 revision H3.

H3 text parameters

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

  • Heading 3 Font: Montserrat
  • Heading 3 Font weight: bold
  • Heading 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 text module 4 to column 1

Add content

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

Spacing

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

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

Read more: How to transform letters in the background on divi

Add image module to column 2

Change CSS settings for column 2

We’ll use the flex properties to align the image to the center:

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 that came with the Divi overview book, but you can also add your book cover.

Sizing

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

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

Advanced Element Principal

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 row as many times as you want, depending on how many reviews you want to show on your landing page.

Final thoughts for the ideal design for ebook divi

In this tutorial, we’ve shown you how to design awesome book reviews for your next eBook publishing pages. It helps you add social proof to your page and convince visitors of your book’s credibility.

 

For website maintenance service contact us.

Leave a comment

echo "";