Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso , le mostraremos cómo agregar vistas previas de libros a su sitio web utilizando el paquete de diseño de autor de Divi y el complemento gratuito 3D Flipbook . Agregar vistas previas a su sitio web ayuda a los visitantes a tomar decisiones. Pueden probar su producto y estar convencidos del contenido que está compartiendo. Para compartir una vista previa de un libro, necesitará un archivo PDF que contenga la cantidad de páginas de su (e) libro que está dispuesto a compartir de forma gratuita.
Parte 1: Descargue e instale el complemento 3D FlipBook interactivo gratuito
Paso 1: Descarga el complemento
Para crear la vista previa del libro, necesitaremos descargar el complemento gratuito Interactive 3D FlipBook yendo a la siguiente página y haciendo clic en el botón de descarga.
Paso 2: Cargue e instale el complemento
Una vez que haya descargado el complemento y lo haya ubicado en su computadora, continúe y cárguelo en sus complementos yendo a Complementos> Agregar nuevo. Después de cargar, asegúrese de activar también el complemento.
Parte 2: Cargue el archivo PDF de vista previa de su libro
Paso 1: agregar un nuevo libro animado en 3D
Lo primero que deberá hacer, después de cargar e instalar el complemento 3D Flipbook, es agregar los archivos PDF de vista previa de su libro. Puede agregar tantas vistas previas de libros como desee. Vaya a 3D Flipbook > Todos los libros > Agregar nuevo .
Paso 2: Cargue el archivo PDF de vista previa de su libro
Cargue cada archivo PDF como un libro separado. Esto incluye darle un título también.
Parte 3: generar código abreviado n.º 1: enlace de activación de Lightbox
Paso 1: Ir a Generar código corto
Le mostraremos dos formas de incluir estas vistas previas de libros. El primero está al hacer clic y el segundo aparecerá en la página misma. Comenzaremos con la vista previa del libro al hacer clic. Vaya a Flipbook 3D > Generador de código abreviado .
Paso 2: elija el archivo PDF
Dentro de la pestaña 3D Flip Book, seleccione el archivo PDF que desea usar.
Paso 3: cambiar el modo de vista
Luego, cambie a la pestaña Modo de vista y seleccione ‘Enlace de activación de Lightbox’.
Paso 4: copia el código abreviado
El shortcode se actualizará automáticamente de acuerdo con los cambios que realice. Adelante, copia este shortcode. Lo necesitaremos en la siguiente parte de este tutorial.
Parte 4: Agregue el enlace de activación de Lightbox a la sección Hero de la página de inicio
Paso 1: vaya a la página de inicio y habilite Visual Builder
¡Es hora de agregar la vista previa del libro al hacer clic en su página de inicio! Continúe y abra la página con Visual Builder.
Paso 2: eliminar el módulo de imagen del libro en la primera columna de la sección Hero
Luego, elimine el módulo de imagen en la primera columna de la sección principal. Debido a la forma en que funciona el shortcode, en su lugar usaremos un módulo de código.
Paso 3: agregue el módulo de código en su lugar
Continúe y agregue un nuevo módulo de código a la primera columna.
Paso 4: Agrega tu código corto
A continuación, agregue el código abreviado que ha creado al cuadro de contenido de este módulo de código.
Paso 5: Agregue HTML de imagen entre código corto
Y justo en el medio del código abreviado, tiene espacio para agregar código HTML adicional. Usaremos este código HTML para agregar una imagen. Copie el siguiente código HTML y reemplace la URL con su propia URL de imagen:
|
01
|
<img src="place your image url here"/> |
Paso 6: cambiar el tamaño del módulo de código
Por supuesto, queremos que esta imagen sea receptiva. Es por eso que cambiaremos el Ancho para tabletas y teléfonos a ‘52%’ en la subcategoría Tamaño. ¡Continúe y haga clic en la imagen después de guardar y salir de Visual Builder para ver el resultado!
Parte 5: generar código abreviado n.º 2: pantalla completa
Paso 1: Ir a Generar código corto
¿Quiere incluir la vista previa del libro en la página misma sin tener que hacer clic en algún lugar? ¡Ningún problema! También puedes hacer eso fácilmente. Vuelva a 3D Flipbook > Generador de código abreviado .
Paso 2: elija el archivo PDF
Seleccione de nuevo el archivo PDF de su elección.
Paso 3: cambiar el modo de vista
Luego, vaya a la pestaña Modo de visualización y, en lugar de elegir la opción ‘Enlace de activación de Lightbox’, elija ‘Pantalla completa’.
Paso 4: copia el código abreviado
Copie el código abreviado que se ajusta automáticamente a los cambios que realice.
Parte 6: crear una sección de vista previa del libro usando la vista previa del libro en pantalla completa
Paso 1: vaya a la página de inicio y habilite Visual Builder
A continuación, agregaremos esta vista previa del libro a nuestra página. Vaya a su página de inicio y habilite Visual Builder.
Paso 2: agregue una nueva sección debajo de la sección Hero
Justo debajo de la sección principal, agregue una nueva sección normal.
Paso 3: Agregar fondo degradado de sección
Para que coincida con la sección del héroe, vamos a utilizar el siguiente fondo degradado para esta sección:
- Color 1: #f4f4f4
- Color 2: rgba (148.166.191, 0,34)
- Dirección del gradiente: 90 grados
- Posición inicial: 60%
- Posición final: 60%
Paso 4: agregue una fila de dos columnas a la sección
Una vez que haya terminado con la configuración de la sección, agregue una fila de dos columnas.
Paso 5: cambiar el tamaño de fila
Antes de agregar cualquier módulo, abra la configuración de la fila y habilite la opción ‘Hacer esta fila de ancho completo’ dentro de la subcategoría Tamaño de la pestaña Diseño.
Paso 6: Clonar módulos de texto, cambiar contenido y colocar en la columna 1
Vamos a ahorrarnos algo de tiempo clonando módulos que ya están en la página en lugar de crearlos desde cero. Localice los siguientes dos módulos de texto en su página y arrástrelos a la primera columna de la fila que acaba de crear:
Paso 7: agregue el módulo de texto a la columna 2
Agregaremos la vista previa del libro a la segunda columna de esta fila al agregarle un nuevo módulo de texto.
Paso 8: Agregar código abreviado al módulo de texto
Coloque el código abreviado que ha copiado dentro del cuadro Contenido de este módulo de texto y ¡ahí tendrá su resultado!
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo agregar vistas previas de libros a su sitio web con Author Layout Pack de Divi y el complemento 3D Flipbook . Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tienes alguna pregunta; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!