Descargue una vista previa del libro gratuito El aspecto de la página de destino de Divin, incluidos los enlaces de anclaje y los CTA

Ya sea que venda un libro físico o un libro electrónico, si tiene una página de destino efectiva, puede hacer maravillas. Puede abordar esta página de destino tradicionalmente o puede convertirla en una página de vista previa de tarjeta. Una página de destino para la vista previa del libro permite a los usuarios leer de antemano ciertas partes o capítulos de su libro. Está equipado con enlaces de anclaje que hacen navegación a través de diferentes partes o capítulos sin problemas. Además, desea poner un CTA en el centro de atención, lo que impulsará el tráfico donde sea que venda su libro.
En este tutorial, recrearemos desde cero una increíble página de destino para la vista previa del libro con Div. También podrá descargar el JSON Look de forma gratuita si desea agregarlo inmediatamente a su sitio. 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 gratis el diseño de la página de destino para la vista previa del libro para poner su mano en la apariencia de la página de destino gratuita para obtener una vista previa del libro, primero debe descargarlo con 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!
Suscríbase a nuestro canal de YouTube Agregue una nueva sección de espacio regular. Comience creando una nueva página y agregue una sección normal. Abra la configuración de la sección y elimine todo el revestimiento personalizado desde arriba e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue la fila La estructura de la columna Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

El color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo blanco.

Color de fondo: #ffffff
Columna 3 Gradiente de fondo Agregue un fondo de gradiente a la tercera columna.

Color 1: # 6a30ff
Color 2: # A202FFF
Tipo de gradiente de columna 3: lineal
Columna 3 Dirección de gradiente: 166deg
Dimensión Luego, acceda 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:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
Cambio de espaciado a la configuración de espaciado y retire el llenado personalizado e inferior de la fila. Agregue algunos valores de llenado y a la primera y tercera columna. La parte superior de la parte superior: 0VW

Revestimiento inferior: 0 VW
Columna 1 Con revestimiento más alto: 15 VW (escritorio), 10 VW (tableta y teléfono)
Columna 2 Reinicio inferior: 15 VW (escritorio), 10 VW (tableta y teléfono)
Columna 1 Reinicio izquierdo: 7VW
CSS ID de columna 2 Como puede ver en la vista previa de esta publicación, hay una barra de desplazamiento conectada a la segunda columna. Si desea estilizar esta barra de desplazamiento más adelante en la publicación, continúe y agregue un ID CSS a la segunda columna.
ID de columna 2 CSS: Estilo-Scrollbar

Columna 2 Elemento principal Lo siguiente que haremos es permitir que la columna se descargue agregando las siguientes líneas de código CSS al elemento principal de la columna 2: Overflow-Y: Scroll;
Altura: 57.87VW;

Behavior de desplazamiento: suave;
Agregue el módulo de texto no. 1 En la columna 1 Agregar contenido ahora que hemos cambiado todas las configuraciones, ¡podemos comenzar a agregar los módulos! Comience con un módulo de texto en la columna 1 y agregue un contenido de su elección.
Configuración de texto Acceda a la configuración de texto del módulo y realice algunos cambios.

Texto de fuente: Lato

Color: # 666666
Tamaño de texto: 1.6VW (escritorio), 3VW (tableta), 4VW (teléfono)
La altura de la línea de texto: 2VW
Agregue un módulo divisor a la visibilidad de la columna 1 La siguiente forma en que agregamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

Colorear luego acceda a la pestaña de diseño y cambia el color.
Color: # 5802ed

La dimensión está jugando con valores de dimensionamiento.
Peso del divisor: 4 PX

Ancho: 3VW (escritorio), 6VW (tableta), 9VW (teléfono) Altura: 0px
Espacio y agregue algunos rellenos personalizados e inferiores para crear espacio.
Margen superior: 1VW (escritorio), 3VW (tableta), 4VW (teléfono)
Margen inferior: 7VW

Agregue el módulo de texto no. 2 En la columna 1 agregue contenido al tercer módulo, que es otro módulo de texto. Aquí, agregué un símbolo (►) seguido del título del primer capítulo en el cuadro de contenido.
Agregue un enlace que conectamos todo el módulo a una ID de anclaje que agregaremos a esta publicación más adelante.
URL del módulo: https://yourwebsite.com/pagtitle/#chapter-

Configuración de texto Continúe accediendo a la configuración de texto y estilizando el contenido exactamente como lo desee.

Texto de fuente: Lato
El peso de la fuente de texto: luz


Color de texto: # 666666
Tamaño de texto: 1.3VW (escritorio), 2VW (tableta), 3.3VW (teléfono)
Espacio agregue un relleno personalizado, superior e inferior.
Revestimiento superior: 1VW
Revestimiento inferior: 1 VW

El módulo de texto Clone # 2 dos veces después de haber terminado de cambiar el módulo de texto, clon dos veces (o hasta que los capítulos deseen compartir).
Cambie el contenido Cambie el contenido de cada uno de los duplicados.
Cambie los enlaces con el código de anclaje al final de la URL del enlace del módulo. En este caso, esto significa agregar “# Capítulo-2” al primer duplicado y “# Capítulo-3” al segundo.

Agregue un módulo de texto a la columna 2 Agregar contenido Pase a la siguiente columna, que se puede llevar a cabo. 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 un contenido de su elección.

Color de fondo luego, acceda a la configuración de fondo y agregue un color de fondo blanco.

Configuración de texto Cambio y configuración de texto.

Texto de fuente: Lato

Tamaño de 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)

La configuración de texto H2 también se reproduce con la configuración de texto H2.
2 Sección de fuentes: Lato
2 Peso 2 Sección de peso: duro
Rúbrica 2 Color de texto: # 5802ed

Título 2 Dimensión de texto: 2VW (escritorio), 2.5VW (tableta), 2.9VW (teléfono)
Título 2 Altura de la línea: 2.3VW
El espacio continúa accediendo a la configuración de espaciado y agregando el siguiente margen personalizado y valores de llenado:
Margen superior: 2VW (escritorio), 7VW (tableta), 10VW (teléfono)
Margen inferior: 2 VW (escritorio), 7VW (tableta), 10VW (teléfono)
Margen izquierdo: 5VW

Margen derecho: 5VW
Revestimiento superior: 6VW
Revestimiento inferior: 6VW
Junta izquierda: 6VW
Junta derecha: 6VW
Modelo de sombra de caja El módulo de texto agregando un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px
Shadow Color: RGBA (0.0,0,09.09)
ID CSS Continúe agregando una ID CSS al módulo de texto. Asegúrese de usar el mismo CSS ID que el que ha conectado en la primera columna de la fila.

ID CSS: Capítulo-1
Clone el módulo de texto dos veces después de haber estilizado el módulo de texto, clonelo con la frecuencia que desee.
Cambie el contenido Cambie el contenido de cada duplicado del módulo de texto.

Cambiar IDS CSS con IDS CSS.
ID CSS: Capítulo-2

ID CSS: Capítulo 3

Agregue un módulo de texto a la columna 3 Agregue el contenido. ¡Nos movemos a la siguiente y última columna! Agregue un módulo de texto con un contenido de su elección.

Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto. Texto: Lato
Texto de la fuente de peso: duro
Color de texto: #ffffff

Tamaño de texto: 2VW (escritorio), 3VW (tableta), 4VW (teléfono)

La altura de la línea de texto: 2VW
Orientación de texto: centro
Espacio agregue algunos rellenos personalizados a la izquierda y a la derecha.
Izquierda: 2 VW
Derecha: 2 VW
Agregue un módulo de botón a la columna 3 Agregue una copia Continuar agregando un botón a la tercera columna con una copia de su elección.
Alineación Cambiar la alineación del botón a continuación.

Alineación de botones: centro
Configuración Modificar la configuración del botón y el botón.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1VW (escritorio), 1.5VW (tableta), 2.4VW (teléfono)

El color del texto del botón: # 5802ed
El color del fondo del botón: #ffffff

El ancho del nudo del botón: 0 PX
Botón Raza: 10VW
Distancia entre letras y botones: 0 PX
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
Espacio y agregue algunos valores de margen y llenado personalizados para estilizar y colocar el módulo.
Margen superior: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 7VW (tableta), 9VW (teléfono)


Revestimiento derecho: 3VW (escritorio), 7VW (tableta), 9VW (teléfono)
El estilo del estilo se abre la última parte de este tutorial está dedicado a calmar la barra de desplazamiento de la segunda columna. Ya sea que estilice la barra de varilla de columna o no, depende completamente de usted sin estilo, no cambia nada sobre la funcionalidad. Si decide estilizar la barra de desplazamiento, abra la configuración de la página. Agregue el código CSS y luego, acceda a la pestaña avanzada y agregue algunos CSS personalizados en el cuadro CSS personalizado y ¡ha terminado! #style-scroll ::-webkit-scroll {
Ancho: 1.1VW;
}
#style-scroll ::-webkit-scroll-tradition {
Antecedentes: #F1F1F1;

}

#style-scroll ::-webkit-scroll-pulgada {
Antecedentes: #333333;
}
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 he mostrado cómo crear una página sorprendente y eficiente de la vista previa del libro, con enlaces de anclaje a diferentes partes o capítulos de su libro y un CTA que se destaca. También distribuí el aspecto JSON gratuito, por lo que puede comenzar a agregarlo inmediatamente a cualquier sitio web que cree. 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.