Hoy les mostraré cómo diseñar un diseño para reseñas de libros llamativas usando Ebook Divi Layout Pack y opciones integradas de Divi únicamente. Es una excelente manera de agregar pruebas sociales a sus páginas de destino, aumentar la credibilidad y compartir reseñas breves de las personas de una manera elegante.
Empecemos el diseño
Cargar el diseño de la página de destino del paquete de libros electrónicos
Lo primero que debe hacer es crear una nueva página utilizando el diseño de la página de destino delEbook Pack de Diseños que encontrarás en Diseños Prefabricados.
Añadir una nueva sección
Desplácese hacia abajo en el diseño y agregue una nueva sección donde desea mostrar las reseñas de libros.
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columna:
Fondo degradado de columna 1
Sin agregar más módulos, abra la configuración de línea y agregue un fondo degradado a la primera columna.
- Color 1: #ffffff
- Color 2: #f4f4f4
- Columna 1 Posición inicial: 12%
- Columna 1 Posición final: 12%
Color de fondo de la columna 2
También agregue un color de fondo personalizado a la segunda columna.
- Color de fondo de la columna 2: #9400ff
apresto
Cambie a la pestaña Diseño y elimine todo el espacio personalizado entre columnas usando la siguiente configuración:
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
espaciamiento
También estamos cambiando la configuración del espaciado entre líneas.
- Margen superior: 100px
- Margen inferior: 100px
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar un módulo de imagen a la columna 1
Subir 1: Imagen 1
Una vez que la configuración de la fila esté en su lugar, puede comenzar a agregar los diferentes módulos, comenzando con un módulo de imagen en la primera columna. Sube una imagen de tu elección, pero asegúrate de que la relación de aspecto sea 1: 1. Esto significa que la altura y el ancho deben tener el mismo valor.
Alineación de la imagen
Seleccione la alineación de la imagen de la izquierda en la pestaña Diseño.
- Alineación de la imagen: izquierda
apresto
También estamos cambiando el ancho de este módulo para diferentes tamaños de pantalla.
- Ancho: 20% (escritorio y tableta), 30% (teléfono)
espaciamiento
Para permitir la superposición en el lado izquierdo de la línea, agregamos un valor de margen izquierdo negativo en la configuración de Espaciado del módulo Imagen.
- Margen izquierdo: -30px
Frontera
Para completar el diseño de la imagen, también agregamos '50vw' a cada una de las esquinas en la configuración del borde. Esto asegurará que la imagen conserve su forma circular en diferentes tamaños de pantalla.
Agregue el módulo de texto # 1 a la columna 1
Agregar símbolos de estrella al área de contenido
Pasemos al siguiente módulo, que es el módulo de clasificación de texto. Para resaltar la cantidad de estrellas, usaremos símbolos. Adelante, copia los siguientes símbolos y pégalos en el cuadro. contenido de un nuevo módulo de texto: ★★★★.
Color de fondo
Cambie la parte inferior del módulo entonces.
- Color de fondo: # 9400ff
Configuraciones de texto
Cambie a la pestaña Diseño y cambie también la configuración del texto.
- Fuente del texto: Montserrat
- Peso de la fuente del texto: pesado.
- Tamaño del texto: 45px (escritorio), 30px (tableta), 25px (teléfono)
- Altura de la línea de texto: 1em
- Alineación del texto: centro.
apresto
Continúa cambiando el ancho del módulo.
- Ancho: 35%
espaciamiento
Y agregue un espaciado personalizado.
- Margen izquierdo: 50px
- Margen derecho: 50px
- Relleno superior: 20px
- Relleno inferior: 20px
Caja de sombra
Para resaltar el cuadro de calificación, agregaremos una sombra sutil.
- Box Shadow Blur Force: 50px
- Color de sombra: rgba (0,0,0,0,3)
Transformador Traducir
Finalmente, reposicionaremos el módulo de texto usando valores de conversión de traducción personalizados. Puede posponer este paso hasta que también haya agregado todos los módulos a su columna.
- Derecha: 360px (escritorio), -84px (tableta), -70px (teléfono)
- Abajo: -113px (escritorio), 190px (tableta), 141px (teléfono)
Agregue el módulo de texto # 2 a la columna 1
Agregar contenido
El siguiente módulo que necesitamos en la columna 1 es otro módulo de texto. Añade el contenido de su elección y un enlace al crítico y al libro.
Configuraciones de texto
Cambie a la pestaña Diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Montserrat
- Tamaño del texto: 18px
Configuración de enlace de texto
Cambia el color del texto del enlace también.
- Color del texto del enlace: #9400ff
espaciamiento
Luego vaya a la configuración de espaciado y cambie la posición del elemento usando valores de margen personalizados.
- Margen superior: -100px (escritorio), 0px (tableta y teléfono)
- Margen izquierdo: 200px (escritorio), 50px (tableta), 20px (teléfono)
- Margen derecho: 50px (tableta), 20px (teléfono)
Agregue el módulo de texto # 3 a la columna 1
Añadir contenido H3
Pasemos al siguiente módulo, que es un módulo de texto que contiene el título de la revisión H3.
Configuraciones de texto H3
Vaya a la pestaña Diseño y cambie la configuración del texto H3.
- Título 3 Fuente: Montserrat
- Título 3 Peso de la fuente: negrita
- Título 3 Color del texto: #000000
espaciamiento
También agregue un margen personalizado.
- Margen superior: 80px (escritorio), 50px (tableta y teléfono)
- Margen izquierdo: 50px (escritorio y tableta), 20px (teléfono)
- Margen derecho: 50px (computadora de escritorio y tableta), 20px (teléfono)
Agregue el módulo de texto 4 a la columna 1
Agregar contenido
Pasemos al siguiente y último módulo que necesitamos en la columna 1, que es otro módulo de texto con la revisión real.
espaciamiento
Vaya a la configuración de espaciado de este módulo y aplique la siguiente configuración:
- Margen superior: 20px
- Margen inferior: 50px
- Margen izquierdo: 50px (escritorio y tableta), 20px (teléfono)
- Margen derecho: 50px (computadora de escritorio y tableta), 20px (teléfono)
Agregar un módulo de imagen a la columna 2
Cambiar la configuración de CSS de la columna 2
Usaremos las propiedades flex para alinear la imagen en el centro:
pantalla: flexión;
Descarga la imagen de la portada del libro
En la segunda columna necesitaremos dos módulos, comenzando por un módulo de imagen con la portada del libro. Para este tutorial, usamos las portadas de libros que vienen con el libro de descripción general de Divi, pero también puede agregar su propia portada de libro.
apresto
Vaya a la pestaña Diseño del módulo Imagen y cambie el ancho.
- Ancho: 79% (escritorio), 40% (tableta y teléfono)
Elemento primario avanzado
Aquí intentaremos alinear la imagen en el centro.
- alinearse: centro;
Clona el diseño tantas veces como quieras.
Una vez que haya creado la primera reseña de libro, puede clonar la línea completa tantas veces como desee, dependiendo de cuántas reseñas desee ver en su página de destino.
Consideraciones finales
En este tutorial, le mostramos cómo diseñar increíbles reseñas de libros para sus próximas páginas de publicación de libros electrónicos. Esto te ayuda a agregar prueba social a tu página y convencer visitantes la credibilidad de su libro. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
