Ya sea que esté vendiendo un libro físico o un libro electrónico, tener una página de destino efectiva 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 ancla que facilitan la navegación a través de las diferentes partes o capítulos. Para colmo, también desea poner un CTA en el centro de atención que impulsará 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 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!
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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos a Recrear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección regular
Espaciado
Comience creando una nueva página y agréguele una sección regular. Abra la configuración de la sección y elimine todo el relleno superior e inferior personalizado.
- Relleno superior: 0px
- Relleno inferior: 0px
Añadir fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo blanco.
- Color de fondo: #ffffff
Fondo degradado de la columna 3
Agregue un fondo degradado a la tercera columna también.
- Color 1: #6a30ff
- Color 2: #a202ff
- Columna 3 Tipo de gradiente: Lineal
- Dirección del gradiente de la columna 3: 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 la siguiente configuración de tamaño:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Pase a 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
- Acolchado 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)
- Relleno izquierdo de la columna 1: 7vw
ID de CSS de la columna 2
Como puede notar 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 vamos a hacer es permitir que la columna se pueda desplazar agregando las siguientes líneas de código CSS al elemento principal de la columna 2:
|
01
02
03
|
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 las filas, ¡podemos comenzar a agregar los módulos! Comience con un módulo de texto en la columna 1 y agregue contenido de su elección.
Configuración de texto
Vaya a la configuración de texto del módulo y realice algunos cambios.
- Fuente del texto: Lato
- Color: #666666
- Tamaño del texto: 1.6vw (Escritorio), 3vw (Tableta), 4vw (Teléfono)
- Altura de línea de texto: 2vw
Agregue el 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, ve a la pestaña de diseño y cambia 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)
- Altura: 0px
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
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
En el 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 del texto: Lato
- Peso de fuente de texto: ligero
- Color del texto: #666666
- Tamaño del texto: 1.3vw (escritorio), 2vw (tableta), 3.3vw (teléfono)
Espaciado
Agregue un poco de relleno superior e inferior personalizado también.
- Acolchado superior: 1vw
- Acolchado inferior: 1vw
Clonar 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).
Cambiar contenido
Modifica el contenido de cada uno de los duplicados.
Cambiar enlaces
Junto con el identificador de anclaje al final de la URL del enlace del módulo. En este caso, eso significa agregar ‘#chapter-2’ al primer duplicado y ‘#chapter-3’ al segundo.
Agregar módulo de texto a la columna 2
Agregar contenido
En la siguiente columna, que es desplazable. Aquí, vamos a usar 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 del texto: Lato
- Tamaño del texto: 0.8vw (Escritorio), 1.6vw (Tablet), 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 con la configuración de texto H2 también.
- Encabezado 2 Fuente: Lato
- Encabezado 2 Peso de fuente: Pesado
- Título 2 Color del texto: #5802ed
- Título 2 Tamaño del texto: 2vw (Escritorio), 2.5vw (Tableta), 2.9vw (Teléfono)
- Encabezado 2 Altura de línea: 2.3vw
Espaciado
Continúe yendo a la configuración de espaciado y agregando los siguientes márgenes personalizados y valores de relleno:
- 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
Dale forma al módulo de texto agregando una sutil sombra de cuadro.
- Fuerza de desenfoque de sombra de cuadro: 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 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 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 del texto: Lato
- Peso de fuente de texto: Pesado
- Color del texto: #ffffff
- Tamaño de texto: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
- Altura de 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 copia
Continúe agregando un módulo de botones a la tercera columna con alguna copia de su elección.
Alineación
Cambie la alineación del botón a continuación.
- 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 de botones: 0px
- Peso de fuente: ultra negrita
- Estilo de fuente: Mayúsculas
Espaciado
Y agregue algunos márgenes personalizados y valores de relleno para diseñar y colocar el módulo.
- Margen superior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
- Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno izquierdo: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)
- Relleno derecho: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)
Barra de desplazamiento de estilo
Configuración de la página abierta
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 totalmente de usted. No diseñarlo no cambia nada sobre la funcionalidad. Si decide diseñar 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!
|
01
02
03
04
05
06
07
08
09
|
#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 sorprendente 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 regalos de Divi, 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 los beneficios de este contenido gratuito.