Descargue un diseño de página de destino de Divi de vista previa de libro GRATUITO que incluye enlaces de ancla 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 forma 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 dirija el tráfico a cualquier lugar donde venda 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 formato 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

vista previa del libro

Móvil

vista previa del libro

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

Para tener en sus manos 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.

¡Empecemos a recrear!

(incrustar) https://www.youtube.com/watch?v=8kJWMMrzGp8 (/ incrustar)

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

vista previa del libro

Añadir fila

Estructura de columna

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

vista previa del libro

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

vista previa del libro

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 del gradiente: 166 grados

vista previa del libro

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%

vista previa del libro

Espaciado

Continúe con la configuración de espaciado y elimine el relleno superior e inferior personalizado 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

vista previa del libro

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 darle estilo a 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

vista previa del libro

Elemento principal de la columna 2

Lo siguiente que vamos a hacer 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;

vista previa del libro

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

Agregar contenido

Ahora que hemos modificado la configuración de todas las filas, 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.

vista previa del libro

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

vista previa del libro

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í

vista previa del libro

Color

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

  • Color: # 5802ed

vista previa del libro

Dimensionamiento

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

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

vista previa del libro

Espaciado

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

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

vista previa del libro

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í, agregamos un símbolo (►) seguido del título del primer capítulo al cuadro de contenido.

vista previa del libro

Añadir enlace

Vincularemos todo este módulo a un ID de ancla que agregaremos más adelante en esta publicación.

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

vista previa del libro

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)

vista previa del libro

Espaciado

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

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

vista previa del libro

Clonar el módulo de texto # 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).

vista previa del libro

Cambiar contenido

Modifica el contenido de cada uno de los duplicados.

vista previa del libro

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.

vista previa del libro

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.

vista previa del libro

Color de fondo

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

  • Color de fondo: #ffffff

vista previa del libro

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)

vista previa del libro

Configuración de texto H2

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

  • Fuente del título 2: Lato
  • Peso de fuente del título 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

vista previa del libro

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

vista previa del libro

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)

vista previa del libro

ID de CSS

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

  • ID de CSS: capítulo-1

vista previa del libro

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.

vista previa del libro

Cambiar contenido

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

vista previa del libro

Cambiar las ID de CSS

Junto con los ID de CSS.

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

vista previa del libro

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.

vista previa del libro

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

vista previa del libro

Espaciado

Agregue un poco de relleno personalizado izquierdo y derecho a continuación.

  • Izquierda: 2vw
  • Derecha: 2vw

vista previa del libro

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.

vista previa del libro

Alineación

A continuación, cambie la alineación del botón.

  • Alineación de botones: centro

vista previa del libro

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

vista previa del libro

vista previa del libro

Espaciado

Y agregue algunos valores de margen y relleno personalizados 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)

vista previa del libro

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. El estilo de la barra de desplazamiento de la columna o no depende totalmente 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.

vista previa del libro

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;
}

vista previa del libro

Avance

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

Escritorio

vista previa del libro

Móvil

vista previa del libro

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 un CTA 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 Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.