Cómo diseñar reseñas de libros llamativas para su página de destino Divi Ebook


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo diseñar reseñas de libros llamativas para su próxima página de inicio de libros electrónicos utilizando el Paquete de diseño de libros electrónicos de Divi y las opciones integradas de Divi únicamente. Esta es una excelente manera de agregar pruebas sociales a sus páginas de destino, aumentar la credibilidad y compartir las reseñas breves de las personas de una manera elegante.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

reseñas de libros

Móvil

reseñas de libros

Descargue el diseño de la sección The Book Reviews GRATIS

Para poner sus manos en el diseño de la sección de reseñas gratuitas de libros, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

Cargue el diseño de la página de destino del paquete de diseño de Ebook en una página nueva

Lo primero que deberá hacer es crear una nueva página utilizando el diseño de la página de destino del Ebook Layout Pack que puede encontrar dentro de los diseños prefabricados.

reseñas de libros

Agregar nueva sección

Desplácese hacia abajo en el diseño de la página y agregue una nueva sección donde quiera que aparezcan las reseñas de libros.

reseñas de libros

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

reseñas de libros

Columna 1 Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un fondo degradado a la primera columna.

  • Color 1: #ffffff
  • Color 2: # f4f4f4
  • Posición de inicio de la columna 1: 12%
  • Posición final de columna 1: 12%

reseñas de libros

Color de fondo de la columna 2

Agregue un color de fondo personalizado a la segunda columna también.

  • Color de fondo de la columna 2: # 9400ff

reseñas de libros

Dimensionamiento

Pase a la pestaña de diseño y elimine todo el espacio personalizado entre columnas con la siguiente configuración:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1

reseñas de libros

Espaciado

También estamos modificando la configuración del espacio entre filas.

  • Margen superior: 100 px
  • Margen inferior: 100 px
  • Relleno superior: 0px
  • Relleno inferior: 0px

reseñas de libros

Agregar módulo de imagen a la columna 1

Subir imagen 1: 1

Una vez que la configuración de la fila esté en su lugar, puede comenzar a agregar varios módulos, comenzando con un Módulo de imagen en la primera columna. Cargue una imagen de su elección, pero asegúrese de que la relación de imagen sea 1: 1. Esto significa que la altura y el ancho deben tener el mismo valor.

reseñas de libros

Alineamiento de imagen

Seleccione la alineación izquierda de la imagen en la pestaña de diseño.

  • Alineación de imagen: izquierda

reseñas de libros

Dimensionamiento

También estamos cambiando el ancho de este módulo en diferentes tamaños de pantalla.

  • Ancho: 20% (escritorio y tableta), 30% (teléfono)

reseñas de libros

Espaciado

Para permitir una superposición en el lado izquierdo de la fila, estamos agregando un valor de margen izquierdo negativo en la configuración de espaciado del Módulo de imagen.

  • Margen izquierdo: -30px

reseñas de libros

Frontera

Para completar el diseño de la imagen, también estamos agregando '50vw' a cada una de las esquinas en la configuración del borde. Esto asegurará que la imagen mantenga su forma circular en diferentes tamaños de pantalla.

reseñas de libros

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar símbolos de estrella al cuadro de contenido

En el siguiente módulo, que es el módulo de texto de calificación. Para mostrar las clasificaciones de estrellas, vamos a utilizar símbolos. Continúe y copie los siguientes símbolos y péguelos en el cuadro de contenido de un nuevo Módulo de texto: ★★★★ ✰.

reseñas de libros

Color de fondo

Cambie el fondo del módulo a continuación.

  • Color de fondo: # 9400ff

reseñas de libros

Configuraciones de texto

Pase a la pestaña de diseño y modifique la configuración de texto también.

  • Fuente de texto: Montserrat
  • Peso de fuente de texto: pesado
  • Tamaño del texto: 45 px (escritorio), 30 px (tableta), 25 px (teléfono)
  • Altura de la línea de texto: 1em
  • Alineación de texto: centro

reseñas de libros

Dimensionamiento

Continúe cambiando el ancho del módulo.

  • Ancho: 35%

reseñas de libros

Espaciado

Y agregue un espacio personalizado.

  • Margen izquierdo: 50 px
  • Margen derecho: 50 px
  • Relleno superior: 20px
  • Relleno inferior: 20px

reseñas de libros

Sombra de la caja

Para resaltar el cuadro de calificación, agregaremos una sombra de cuadro sutil.

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.3)

reseñas de libros

Transformar Traducir

Y por último, pero no menos importante, reposicionaremos el módulo de texto usando algunos valores de traducción de transformación personalizados. Puede posponer este paso hasta que también haya agregado todos los módulos a su columna.

  • Derecha: 360 px (Escritorio), -84 px (Tableta), -70 px (Teléfono)
  • Botto ,: -113px (escritorio), 190px (tableta), 141px (teléfono)

reseñas de libros

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

El siguiente módulo que necesitamos en la columna 1 es otro módulo de texto. Agregue el contenido de su elección y enlace al revisor y al libro.

reseñas de libros

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Montserrat
  • Tamaño de texto: 18px

reseñas de libros

Configuración de texto de enlace

Cambie el color del texto del enlace también.

  • Color del texto del enlace: # 9400ff

reseñas de libros

Espaciado

Luego, vaya a la configuración de espaciado y vuelva a colocar el elemento usando valores de margen personalizados.

  • Margen superior: -100 px (escritorio), 0 px (tableta y teléfono)
  • Margen izquierdo: 200 px (escritorio), 50 px (tableta), 20 px (teléfono)
  • Margen derecho: 50 px (tableta), 20 px (teléfono)

reseñas de libros

Agregue el módulo de texto n. ° 3 a la columna 1

Añadir contenido H3

En el siguiente módulo, que es un módulo de texto que contiene el título de revisión H3.

reseñas de libros

Configuraciones de texto H3

Pase a la pestaña de diseño y cambie la configuración de texto H3.

  • Título 3 Fuente: Montserrat
  • Título 3 Peso de la fuente: negrita
  • Título 3 Color del texto: # 000000

reseñas de libros

Espaciado

Agregue también un margen personalizado.

  • Margen superior: 80 px (escritorio), 50 px (tableta y teléfono)
  • Margen izquierdo: 50 px (escritorio y tableta), 20 px (teléfono)
  • Margen derecho: 50 px (escritorio y tableta), 20 px (teléfono)

reseñas de libros

Agregue el módulo de texto n. ° 4 a la columna 1

Agregar contenido

En el siguiente y último módulo que necesitamos en la columna 1, que es otro módulo de texto con la revisión real.

reseñas de libros

Espaciado

Vaya a la configuración de espaciado de este módulo y aplique la siguiente configuración:

  • Margen superior: 20 px
  • Margen inferior: 50 px
  • Margen izquierdo: 50 px (escritorio y tableta), 20 px (teléfono)
  • Margen derecho: 50 px (escritorio y tableta), 20 px (teléfono)

reseñas de libros

Agregar módulo de imagen a la columna 2

Subir imagen de portada del libro

En la segunda columna, vamos a necesitar dos módulos, comenzando con un Módulo de imagen que lleve la portada del libro. Para este tutorial, usaremos las portadas de los libros que vienen con el paquete de diseño de libros electrónicos de Divi, pero puede agregar su propia portada.

reseñas de libros

Dimensionamiento

Pase a la pestaña de diseño del Módulo de imagen y cambie el ancho.

  • Ancho: 79% (escritorio), 40% (tableta y teléfono)

reseñas de libros

Espaciado

Modifique la configuración de espaciado también.

  • Margen superior: 60 px
  • Margen inferior: 60 px

reseñas de libros

Sombra de la caja

Y agregue una sombra de cuadro para enfatizar la portada del libro.

  • Posición vertical de la sombra de la caja: 40 px
  • Caja Shadow Blur Fuerza: 80px
  • Fuerza de propagación de la sombra de la caja: -20 px
  • Color de sombra: rgba (0,0,0,0.8)

reseñas de libros

Agregar módulo de botón a la columna 2

Agregar copia

El siguiente y último módulo que necesitamos en la columna 2 es el Módulo de botones. Agregue una copia de su elección y enlace a la página donde las personas pueden comprar su libro.

reseñas de libros

Alineación de botones

Pase a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: centro

reseñas de libros

Configuraciones de botones

Modifique la configuración de los botones para que coincida con la apariencia del paquete de diseño.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 16 px
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 000000
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 0px
  • Fuente del botón: Montserrat
  • Peso de fuente del botón: negrita

reseñas de libros

reseñas de libros

Espaciado

Y termine el primer diseño de revisión de libros agregando algunos valores de relleno personalizados al botón.

  • Relleno superior: 16px
  • Relleno inferior: 16px
  • Relleno izquierdo: 38 px
  • Relleno derecho: 38px

reseñas de libros

Clone Row hasta tantas veces como desee

Una vez que haya terminado de crear la primera reseña de libro, puede clonar la fila completa tantas veces como desee, dependiendo de cuántas reseñas desee mostrar en su página de destino.

reseñas de libros

Subir imagen diferente

Cambiar la imagen del revisor.

reseñas de libros

Cambiar portada del libro

Junto con la portada del libro, si es necesario.

reseñas de libros

Cambiar copia

Y modifique toda la copia también.

reseñas de libros

Buscar y reemplazar el color de fondo de la columna 2 en fila

Como puede observar en la vista previa de esta publicación, estamos utilizando una paleta de colores diferente para esta segunda revisión. Para que sea más fácil para nosotros, vamos a abrir la configuración de la fila y hacer clic derecho en el fondo de la columna 2, luego haga clic en buscar y reemplazar.

reseñas de libros

¡Cambia el color púrpura que se usa dentro de la fila y listo! Asegúrese de repetir estos pasos para cada una de las reseñas de libros duplicados que agregue a su página.

  • Dentro: esta fila
  • Reemplazar con: # 31d190

reseñas de libros

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

reseñas de libros

Móvil

reseñas de libros

Pensamientos finales

En esta publicación, le mostramos cómo diseñar impresionantes reseñas de libros cortos para sus próximas páginas de aterrizaje de libros electrónicos. Esto le ayuda a agregar pruebas sociales a su página y convencer a los visitantes de la credibilidad de su libro. Este tutorial de caso de uso es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.