Cómo diseñar reseñas de libros atractivos para su página de destino de libro electrónico Divic

Cada semana, le proporcionamos Divin de diseño y paquetes de diseño gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de apariencia, también compartimos un caso de uso que lo ayudará a llevar el sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa continua de diseño de la divicidad, le mostraremos cómo diseñar atractivas revisiones de libros para su futura página de destino de tarjeta electrónica, utilizando solo el paquete de diseño y el div. Div. Esta es una excelente manera de agregar evidencia social a sus páginas de destino, aumentar la credibilidad y compartir las breves revisiones de las personas de una manera elegante.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la aparición de las reseñas de libros gratuitas de forma gratuita para poner su mano en las reseñas de libros gratuitas, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Cargue el aspecto de la página de destino de la página del libro electrónico en la nueva página.
Agregue una nueva sección, desplácese hacia abajo en el aspecto de la página y agregue una nueva sección donde quiera las reseñas de los libros.

Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Columna 1 Gradiente de fondo sin agregar módulos, abra la configuración de línea y agregue un fondo de gradiente en la primera columna.

Color 1: #ffffff
Color 2: # F4F4F4
Columna 1 Posición de inicio: 12%
Columna 1 Posición final: 12%
Columna 2 Color de fondo Agregue un color de fondo personalizado a la segunda columna.

Columna 2 Color de fondo: # 9400ff
Dimensión Mover a la pestaña Diseño y eliminar todo el espacio personalizado entre las columnas utilizando la siguiente configuración:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio también cambiamos la configuración de espaciado de las filas. El matrimonio superior: 100 PX

Margen inferior: 100 px
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de imagen a la columna 1 Carga Imagen 1: 1 Una vez que su configuración de línea esté en su lugar, puede comenzar a agregar diferentes 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.
Alineación de la imagen Seleccione la alineación de la imagen a la izquierda en la pestaña Diseño.

Alineación de imágenes: izquierda

La dimensión también cambia el ancho de este módulo en diferentes tamaños de pantalla.
Ancho: 20% (escritorio y tableta), 30% (teléfono)

Espacio para permitir una superposición en el lado izquierdo de la fila, agregamos un valor negativo del margen izquierdo en la configuración de espacio del módulo de imagen.
Margen izquierdo: -30px

Borde 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 no. 1 En la columna 1 Agregue símbolos de estrella al cuadro de contenido, pase al siguiente módulo, que es el módulo de evaluación de texto. Para presentar los valores en las estrellas, usaremos 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: ★★★ ✰.

Color de fondo y luego cambia el fondo del módulo.

Color de fondo: # 9400ff

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto.
Texto de fuente: Montserrat

Texto de la fuente de peso: duro
Tamaño de texto: 45 px (escritorio), 30 px (tableta), 25 px (teléfono) Altura de línea de texto: 1em
Alineación de texto: Centro
La dimensión continúa cambiando el ancho del módulo.
Ancho: 35%
Espaciado y agregue una distancia personalizada.

Margen izquierdo: 50 PX
Margen derecho: 50 PX

Revestimiento superior: 20 px
Finamiento inferior: 20 PX
Box Shadow Para resaltar el cuadro de evaluación, agregaremos un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0,3)

Transformar la traducción y por último, pero no menos importante, reposicionaremos el módulo de texto utilizando algunos valores de traducción personalizados para la transformación. Puede posponer este paso hasta que haya agregado todos los módulos a su columna.
Derecha: 360px (escritorio), -84px (tableta), -70px (teléfono)
Boto ,:1113px (escritorio), 190px (tableta), 141px (teléfono)

Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido La siguiente forma que necesitamos en la columna 1 es otro módulo de texto. Agregue el contenido deseado y conecte al revisor y al libro.

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Montserrat

Tamaño del texto: 18 PX

Configuración del enlace de texto Cambiar y el color del texto del enlace.
Color de texto de enlace: # 9400ff
Espacio entonces, acceda a la configuración de espaciado y reposicione el elemento utilizando valores de margen personalizados.

Margen superior: -100px (escritorio), 0px (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)
Agregue el módulo de texto no. 3 En la columna 1 Agregue el contenido H3, pase al siguiente módulo, que es un módulo de texto que contiene el título de revisión H3.
Configuración de texto H3 Cambiar a la pestaña de diseño y cambiar la configuración de texto H3.Rubrica 3 Fuente: Montserrat
Título 3 Fuente de peso: Bold

Rúbrica 3 Color de texto: # 000000

Espacio agregue 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)

Agregue el módulo de texto # 4 a la columna 1 Agregar contenido al siguiente y último módulo que necesitamos en la columna 1, que es otro módulo de texto con una revisión real.
Acceso 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)
Agregue el módulo de imagen a la columna 2 Cargue la imagen de portada del libro en la segunda columna, necesitaremos dos módulos, comenzando con un módulo de imagen que lleva la portada del libro. Para este tutorial, utilizamos las portadas de libros que se unen con el paquete de diseño del libro de la división, pero puede agregar la propia portada del libro.
Dimension Switch a la pestaña de diseño del módulo de imagen y cambie el ancho.
Ancho: 79% (escritorio), 40% (tableta y teléfono)
La espartación modifica y se establece la espacios.

Margen superior: 60 PX

Margen inferior: 60 px
Box Shadow y agregue un tono de caja para enfatizar la portada del libro.

Box Shadow Posición vertical: 40 PX
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -20px

Color de la sombra: RGBA (0.0,0,0,8)
Agregue un módulo de botón a la columna 2 Agregue una copia a continuación y el último módulo que necesitamos en la columna 2 es el módulo del botón. Agregue una copia de su elección e inicie sesión en la página donde las personas pueden comprar su libro. Ley en la pestaña Diseño y cambie la alineación del botón.
Alineación de botones: centro
Configuración del botón Setters en botones para que coincida con el paquete Look Look.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 16 PX

El color del texto del botón: #ffffff
El color de fondo del botón: # 000000

El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Montserrat
Botón de peso de fuente de fuente: en negrita
Espacio y complete el primer diseño de revisión del libro agregando algunos valores de llenado personalizados al botón.
Revestimiento superior: 16 px
Revestimiento inferior: 16 PX
ENLIZACIÓN IZQUIERDA: 38 PX
Revestimiento derecho: 38 PX


Clone el turno hasta que desee terminar la primera revisión del libro, puede clonar toda la fila tantas veces como desee, dependiendo de cuántas reseñas desee aparecer en su página de destino.
Sube diferentes imágenes Cambiar la revisión del revisor.
Cambie la portada del libro junto con la portada del libro si es necesario.
Copiar cambio y cambiar toda la copia.
Busque y reemplace el color de fondo de la columna 2 en una fila, como puede ver en la vista previa de esta publicación, utilizamos una paleta de colores diferente para esta segunda revisión. Para ser más fácil para nosotros mismos, abriremos la configuración de las filas y hará clic con el fondo de la columna 2, luego haremos clic en Buscar y reemplazar.

¡Cambia el color púrpura que se usa en una fila y ya terminaste! Asegúrese de repetir estos pasos para cada uno de los duplicados del libro que agregue a su página dentro: esta fila

Reemplace con: # 31D190

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Pensamientos finales En esta publicación, le mostré cómo diseñar increíbles reseñas de tarjetas cortas para sus futuras páginas de destino para libros electrónicos. Esto le ayuda a agregar evidencia social a su página y convencer a los visitantes de la credibilidad de su libro. Este tutorial de casos es parte de nuestra iniciativa de diseño de la divicidad, en la que intentamos poner algo adicional en la 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.