Descargue un diseño de página de destino de Divi de vista previa de libro GRATUITO que incluye enlaces de anclaje y CTA

Ya sea que venda un libro físico o un libro electrónico, tener una página de destino eficaz puede hacer maravillas. Puede acercarse a esta página de destino de la manera tradicional o puede convertirla en una página de destino de vista previa del libro. Una página de inicio de vista previa del libro permite a las personas leer ciertas partes o capítulos de su libro con anticipación. También está equipado con enlaces de anclaje que facilitan la navegación por las diferentes partes o capítulos. Para colmo, también desea poner una llamada a la acción en el centro de atención que dirigirá el tráfico a donde sea que esté vendiendo su libro.

En este tutorial, recrearemos una impresionante página de inicio de vista previa de un libro desde cero con Divi. También podrá descargar el diseño JSON de forma gratuita si desea agregarlo a su sitio web de inmediato.

¡Hagámoslo!

Avance

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

Escritorio

Móvil

Descargue el diseño de la página de destino de la vista previa del libro GRATIS

Para poner sus manos en el diseño de la página de destino de la vista previa del libro gratuito, 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección regular

Espaciado

Comience creando una nueva página y agregue una sección regular. Abra la configuración de la sección y elimine todo el acolchado superior e inferior personalizado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Añadir fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Color de fondo

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

• Color de fondo: #ffffff

Columna 3 Fondo degradado

Agrega también un fondo degradado a la tercera columna.

• Color 1: # 6a30ff
• Color 2: # a202ff
• Columna 3 Tipo de degradado: lineal
• Columna 3 Dirección de gradiente: 166 grados

Dimensionamiento

Luego, vaya a la configuración de tamaño y permita que la fila ocupe todo el ancho de la pantalla agregando las siguientes configuraciones de tamaño:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Continúe con la configuración de espaciado y elimine el relleno personalizado superior e inferior de la fila. Agregue también algunos valores de relleno a la primera y tercera columna.

• Acolchado superior: 0vw
• Acolchado inferior: 0vw
• Relleno superior de la columna 1: 15vw (escritorio), 10vw (tableta y teléfono)
• Acolchado inferior de la columna 2: 15vw (escritorio), 10vw (tableta y teléfono)
• Columna 1 Relleno izquierdo: 7vw

ID de CSS de la columna 2

Como puede observar en la vista previa de esta publicación, hay una barra de desplazamiento adjunta a la segunda columna. Si desea diseñar esta barra de desplazamiento más adelante en la publicación, continúe y agregue una ID de CSS a la segunda columna.

• ID de CSS de la columna 2: barra de desplazamiento de estilo

Elemento principal de la columna 2

Lo siguiente que haremos es permitir que la columna sea desplazable agregando las siguientes líneas de código CSS al elemento principal de la columna 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

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

Agregar contenido

Ahora que hemos modificado todas las configuraciones de fila, ¡podemos comenzar a agregar los módulos! Comience con un módulo de texto en la columna 1 y agregue algún contenido de su elección.

Configuración de texto

Vaya a la configuración de texto del módulo y realice algunos cambios.

• Fuente de texto: Lato
• Color: # 666666
• Tamaño del texto: 1.6vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Altura de la línea de texto: 2vw

Agregar módulo divisor a la columna 1

Visibilidad

El siguiente módulo que agregaremos es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Luego, vaya a la pestaña de diseño y cambie el color.

• Color: # 5802ed

Dimensionamiento

Juega con los valores de tamaño también.

• Peso del divisor: 4px
• Ancho: 3vw (escritorio), 6vw (tableta), 9vw (teléfono)
• Alto: 0px

Espaciado

Y agregue un poco de acolchado superior e inferior personalizado para crear espacio.

• Margen superior: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Margen inferior: 7vw

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

Agregar contenido

Pasemos al tercer módulo, que es otro módulo de texto. Aquí, hemos agregado un símbolo (►) seguido del título del primer capítulo al cuadro de contenido.

Añadir enlace

Estamos vinculando todo este módulo a una ID de anclaje que agregaremos más adelante en esta publicación.

• URL del enlace del módulo: https://yourwebsite.com/pagetitle/#chapter-1

Configuración de texto

Continúe yendo a la configuración de texto y diseñe el contenido exactamente de la manera que desee.

• Fuente de texto: Lato
• Peso de la fuente del texto: Ligero
• Color del texto: # 666666
• Tamaño del texto: 1.3vw (escritorio), 2vw (tableta), 3.3vw (teléfono)

Espaciado

Agregue un poco de acolchado superior e inferior personalizado también.

• Acolchado superior: 1vw
• Acolchado inferior: 1vw

Clonar el módulo de texto n. ° 2 dos veces

Una vez que haya terminado de modificar el módulo de texto, clónelo dos veces (o hasta tantos capítulos como desee compartir).

Cambiar contenido

Modifica el contenido de cada uno de los duplicados.

Cambiar enlaces

Junto con el ID de anclaje al final de la URL del enlace del módulo. En este caso, eso significa agregar '# capítulo-2' al primer duplicado y '# capítulo-3' al segundo.

Agregar módulo de texto a la columna 2

Agregar contenido

A la siguiente columna, que es desplazable. Aquí, usaremos módulos de texto para agregar diferentes páginas de la vista previa del libro. Comience agregando el primer módulo de texto con algún contenido de su elección.

Color de fondo

Luego, vaya a la configuración de fondo y agregue un color de fondo blanco.

• Color de fondo: #ffffff

Configuración de texto

Modifique también la configuración del texto.

• Fuente de texto: Lato
• Tamaño del texto: 0.8vw (escritorio), 1.6vw (tableta), 2.1vw (teléfono)
• Altura de la línea de texto: 1.7vw (escritorio), 3.3vw (tableta), 3.8vw (teléfono)

Configuración de texto H2

Juega también con la configuración de texto H2.

• Fuente del encabezado 2: Lato
• Peso de fuente del encabezado 2: Pesado
• Título 2 Color del texto: # 5802ed
• Encabezado 2 Tamaño del texto: 2vw (escritorio), 2.5vw (tableta), 2.9vw (teléfono)
• Altura de la línea del rumbo 2: 2.3vw

Espaciado

Continúe yendo a la configuración de espaciado y agregando los siguientes valores de margen y relleno personalizados:

• Margen superior: 2vw (escritorio), 7vw (tableta), 10vw (teléfono)
• Margen inferior: 2vw (escritorio), 7vw (tableta), 10vw (teléfono)
• Margen izquierdo: 5vw
• Margen derecho: 5vw
• Acolchado superior: 6vw
• Acolchado inferior: 6vw
• Acolchado izquierdo: 6vw
• Acolchado derecho: 6vw

Sombra de la caja

Da forma al módulo de texto agregando una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 50px
• Color de sombra: rgba (0,0,0,0.09)

ID de CSS

Continúe agregando una ID de CSS al módulo de texto. Asegúrese de estar usando el mismo ID de CSS que el que estaba vinculando en la primera columna de la fila.

• ID de CSS: capítulo-1

Clonar el módulo de texto dos veces

Una vez que haya diseñado el módulo de texto, clónelo tantas veces como desee.

Cambiar contenido

Cambie el contenido de cada módulo de texto duplicado.

Cambiar las ID de CSS

Junto con los ID de CSS.

• ID de CSS: capítulo-2
• ID de CSS: capítulo-3

Agregar módulo de texto a la columna 3

Agregar contenido

¡A la siguiente y última columna! Agregue un módulo de texto con algún contenido de su elección.

Configuración de texto

Luego, vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Lato
• Peso de la fuente del texto: Pesado
• Color del texto: #ffffff
• Tamaño del texto: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Altura de la línea de texto: 2vw
• Orientación del texto: centro

Espaciado

Agregue un poco de relleno personalizado a la izquierda y a la derecha a continuación.

• Izquierda: 2vw
• Derecha: 2vw

Agregar módulo de botones a la columna 3

Agregar copia

Continúe agregando un módulo de botones a la tercera columna con alguna copia de su elección.

Alineación

A continuación, cambie la alineación de los botones.

• Alineación de botones: centro

Configuración de botones

Modifique también la configuración de los botones.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 1.5vw (tableta), 2.4vw (teléfono)
• Color del texto del botón: # 5802ed
• Color de fondo del botón: #ffffff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 10vw
• Espaciado entre letras del botón: 0px
• Peso de fuente: Ultra Bold
• Estilo de fuente: mayúsculas

Espaciado

Y agregue algunos valores personalizados de margen y relleno para diseñar y colocar el módulo.

• Margen superior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)
• Relleno derecho: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)

Barra de desplazamiento de estilo

Abrir configuración de página

La última parte de este tutorial está dedicada a diseñar la barra de desplazamiento de la segunda columna. Si le da estilo a la barra de desplazamiento de la columna o no, depende completamente de usted. No diseñarlo no cambia nada sobre la funcionalidad. Si decide darle estilo a la barra de desplazamiento, abra la configuración de la página.

Agregar código CSS

Luego, vaya a la pestaña avanzada y agregue algo de CSS personalizado al cuadro CSS personalizado y ¡listo!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear una página de inicio de vista previa de libro impresionante y efectiva con enlaces de anclaje a diferentes partes o capítulos de su libro y una llamada a la acción que se destaca. ¡También compartimos el diseño JSON de forma gratuita para que pueda comenzar a agregarlo a cualquier sitio web que esté creando de inmediato! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.