¿Le gustaría agregar contenido teaser a una tableta desplazable en Divi?
Agregar contenido teaser a su Sitio web puede ser una estrategia Marketing eficaz. Esto funciona particularmente bien para promover Cosas como libros electrónicos. Les das una vista previa del contenido para que quieran más.
En el tutorial de hoy, le mostraremos cómo exhibir contenido teaser en una tableta desplegable en Divi.
Para hacer esto, aprovecharemos las opciones integradas de Divi para convertir una columna en un contenedor desplegable (diseñado para parecerse a una tableta) que puede incluir cualquier tipo de contenido que desee.
Puedes usarlo para promover los primeros capítulos de cualquier libro electrónico, ver diseños de muestra de su portafolio o cualquier otro tipo de contenido.
Vamos a empezar!
vista
Aquí hay un vistazo rápido a la tableta con contenido desplazable que crearemos en este tutorial.
Crear una nueva página con Divi Builder
En el panel de control de WordPress, vaya a “Páginas > Agregar nuevo”
Asigne un título que tenga sentido para usted, luego haga clic en "Usar DiviBuilder"
A continuación, haga clic “Empezar a construir”
Diseño de tableta con contenido teaser desplazable en Divi
Crear el contenedor de tabletas desplegable con una columna Divi
Agregar una fila
Para comenzar, cree una fila de dos columnas con una sección normal.
Configuración de columna 1
Color de fondo
Abra la configuración de la columna 1 y agregue un fondo blanco a la columna.
- Fondo: #ffffff
Borde y Margen
Ir a la pestaña Diseño opción desplegable Distanciamiento y cambie la configuración de la siguiente manera:
- Relleno (Superior, Inferior, Izquierda y Derecha): 25px (superior, inferior, izquierda, derecha)
Luego despliega la opción Frontera y cambie la configuración en consecuencia:
- Esquinas redondeadas: 20px
- Ancho del borde: 30px
- Color del borde: #000000
Caja de sombra
Para darle algo de profundidad al diseño de la tableta, despliegue la opción Shadow Box y agregue la siguiente sombra de cuadro:
- Sombra de caja: ver captura de pantalla
- Posición de la sombra del cuadro (horizontal y vertical): 5 px
- Color de sombra: #555555
Alto y ancho de columna personalizado con CSS
La clave para hacer que el contenido de la columna sea desplazable es darle una altura definida. Esto hará que el contenido desborde la altura de la columna.
También queremos que la relación de aspecto de la tableta se mantenga constante, por lo que también es una buena idea darle a la columna un ancho máximo.
Para darle a la columna una altura y un ancho personalizados, vaya a la pestaña Avanzado y actualiza lo siguiente:
Sous CSS personalizado, agregue el siguiente CSS para la pantalla del escritorio (elemento principal):
height:650px;
max-width: 488px;
Luego active la pestaña para otra pantalla y pegue el siguiente CSS personalizado para la pantalla del teléfono del elemento principal:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Desbordamiento vertical: desplazamiento
Como se mencionó anteriormente, la columna ahora tiene una altura definida que inevitablemente hará que el contenido de la columna se desborde verticalmente.
Para asegurarse de que el contenido desbordado se pueda ver desplazándose hacia abajo en la columna, establezca la opción de desbordamiento vertical de visibilidad en "Desplazarse". Para hacer esto, expanda la opción Visibilidad pestaña Avanzado
- Desbordamiento vertical: desplazamiento
Agregar contenido teaser a la columna desplegable
En este punto, la columna (o estantería) está lista para el contenido. Puede usar cualquier módulo Divi en esta columna para crear su contenido de vista previa.
En este ejemplo, estamos agregando contenido de libro electrónico ficticio que consistirá en un módulo propaganda (para mostrar la llamada a la acción inicial), un módulo Imagen (para mostrar la portada del libro) y un módulo Texto (para mostrar algunos capítulos del ebook).
Desplazamiento de CTA (llamada a la acción) con fondo de portada de libro
El primer elemento de contenido teaser que vamos a agregar es un módulo propaganda que servirá como llamada a la acción "desplazarse para obtener una vista previa".
Usaremos un ícono de presentación, un título y un fondo con una portada de libro como imagen de fondo y una superposición de degradado de color.
En la columna de la tableta, agregue un módulo propaganda.
Actualice el contenido de la siguiente manera:
- Título: Desplácese para leer un extracto
Opción desplegable “Imagen e Icono”
- Icono de uso: Sí
- Icono: ver captura de pantalla
Luego despliega la opción Antecedentes y agrega un degradado
- Color del lado izquierdo: rbga(0,0,0,0,0.0)
- Color del lado derecho: #ffffff
- Posición inicial: 20%
- Posición final: 85%
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Luego agrega la imagen de la portada del libro. Para obtener los mejores resultados, agregue una imagen de aproximadamente 600 px por 850 px .
En la pestaña Diseño, actualice los siguientes estilos para el icono y el título:
- Color del icono: #000000
- Tamaño de fuente del icono: 80 px (computadora de escritorio y tableta), 70 px (teléfono)
- Fuente del título: Montserrat
- Alineación del texto del título: centrado
- Color del texto: #000000
Luego, podemos mover el ícono y el título hacia abajo en la columna agregando un margen superior.
Para cambiar el tamaño y el espacio de la propaganda, actualice lo siguiente:
- Altura: 100%
- Margen: 25px (inferior)
- Relleno: 400 px (escritorio y tableta), 270 px (teléfono)
La imagen de la portada del libro.
La siguiente pieza de contenido teaser será una imagen de la portada del libro. Para agregar una imagen, simplemente agregue un módulo Imagen debajo del módulo Blurb.
Luego cargue la misma imagen utilizada para el fondo publicitario.
El contenido de la vista previa del texto.
Nuestra última pieza de contenido teaser será el texto que incluirá algunos capítulos ficticios de nuestro libro electrónico. Para agregar el texto, agregue un nuevo módulo de Texto debajo de la imagen anterior.
Luego pegue el siguiente código HTML en la pestaña de texto del cuerpo:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
En la pestaña Diseño, actualice el estilo del encabezado y el espaciado de la siguiente manera (Título 3):
- Fuente: Montserrat
- Peso de fuente: ultra negrita
- Alineación de texto: centrado
- Altura de la línea: 1,3 cm
- Acolchado: 10% (Superior e Inferior)
Unos toques finales
Actualizar parámetros de línea
Con el contenido en su lugar, necesitamos hacer algunos ajustes en la fila para que el diseño responda mejor. Abra Configuración de línea y actualice lo siguiente:
- Ancho: 100% (escritorio), 90% (tableta y teléfono)
- Ancho máximo: 1 px (escritorio), 080 px (tableta y teléfono)
Agregar contenido adicional a la columna 2
En este punto, podemos agregar contenido adicional a la columna 2 si es necesario. Para este ejemplo, agregamos un módulo de texto y un módulo de botón y los personalizamos de manera similar al diseño que se muestra en nuestro paquete de diseño de libros electrónicos.
¡¡¡Descarga DIVI ahora!!!
Resultado final
Ahora veamos el resultado final.
Consulte el contenido desplegable disponible dentro de la tableta portátil.
Y así es como el diseño se apila en la pantalla de la tableta y el teléfono.
Conclusión
Quizás lo mejor de este diseño de tableta con desplazamiento es su versatilidad. Debido a que la tableta es esencialmente una columna Divi, puede usar cualquier cantidad de módulos Divi (texto, imagen, botón) para diseñar el contenido que desea presentar.
Espero que esto te ayude la próxima vez que necesites mostrar contenido teaser en tu Sitio web.
Si quieres saber más sobre Divi, no dudes en visitar nuestro catálogo de Divi tutoriales. También puedes consultar Cómo crear la página del Blog con el módulo Divi Blog
Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
