Agregar contenido teaser a su sitio web puede ser una estrategia de marketing efectiva. Esto funciona especialmente bien para promocionar cosas como libros electrónicos. Les das un adelanto del contenido para dejarlos con ganas de más. En el tutorial de hoy, le mostraremos cómo exhibir contenido teaser dentro de una tableta desplazable en Divi . Para hacer esto, aprovecharemos las opciones integradas de Divi para transformar una columna en un contenedor desplazable (diseñado para parecerse a una tableta) que puede incluir cualquier tipo de contenido que desee. Puede usarlo para promocionar los primeros capítulos de cualquier libro electrónico, mostrar diseños de ejemplo de su cartera o cualquier otro tipo de contenido.
¡Empecemos!
Aquí hay un vistazo rápido a la tableta con contenido teaser desplazable que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, 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!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Creación del contenedor de tableta desplazable con una columna Divi
Añadir fila
Para comenzar, cree una fila de dos columnas con una sección normal.
Configuración de la columna 1
Color de fondo
Abra la configuración de la columna 1 y agregue un fondo blanco a la columna.
- Color de fondo: #ffffff
Relleno y Borde
Luego agregue un borde y relleno a la columna de la siguiente manera:
- Relleno: 25px (arriba, abajo, izquierda, derecha)
- Esquinas redondeadas: 20px
- Ancho del borde: 30px
- Color del borde: #000000
Sombra de la caja
Para darle un poco de profundidad al diseño de la tableta, agregue la siguiente sombra de cuadro:
- Sombra de caja: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: 5px
- Posición vertical de la sombra del cuadro: 5px
- 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 determinada. Esto hará que el contenido desborde la altura de la columna. También queremos mantener constante la relación de aspecto de la tableta, 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 actualice lo siguiente:
En CSS personalizado, agregue el siguiente CSS para la pantalla de escritorio del elemento principal:
|
01
02
|
height:650px;max-width: 488px; |
Luego active las pestañas receptivas y pegue el siguiente CSS personalizado para la pantalla del teléfono del elemento principal:
|
01
02
03
04
|
max-height: 500px;max-width: 375px;float:none;margin: 0 auto; |
Desbordamiento vertical: desplazamiento
Como se mencionó anteriormente, la columna ahora tiene una altura establecida que hará que el contenido inevitablemente desborde la columna verticalmente. Para asegurarse de que el contenido desbordado se pueda ver desplazándose por la columna, establezca la opción de desbordamiento vertical de visibilidad en «desplazamiento».
- Desbordamiento vertical: desplazamiento
En este punto, la columna (o tableta) está lista para algún contenido. Puede usar cualquier módulo Divi dentro de esta columna para crear su contenido de vista previa. En este ejemplo, estamos agregando contenido de libro electrónico simulado que consistirá en un módulo de publicidad (para mostrar la llamada a la acción inicial), un módulo de imagen (para mostrar la portada del libro) y un módulo de texto (para mostrar algunos capítulos de texto).
El CTA de desplazamiento con fondo de portada de libro
La primera pieza de contenido teaser que vamos a agregar es un módulo de publicidad que servirá como un llamado a la acción de «desplazarse para obtener una vista previa». Usaremos un icono de publicidad, un título y un fondo con la portada de un libro como imagen de fondo y una superposición de degradado de color.
Dentro de la columna de la tableta, agregue un módulo de publicidad.
Actualice el siguiente contenido:
- Título: Desplácese a Vista previa
- Icono de uso: SÍ
- Icono: ver captura de pantalla
- Degradado de fondo Color izquierdo: transparente
- Degradado de fondo Color derecho: #ffffff
- Posición inicial: 20%
- Posición final: 85%
- Coloque el degradado sobre la imagen de fondo: SÍ
Luego agrega la imagen de la portada del libro. Para obtener los mejores resultados, agregue una imagen que tenga un tamaño aproximado de 600 px por 850 px .
En la pestaña de 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: centro
- Color del texto del título: #000000
Podemos ajustar la altura de la publicidad para que coincida con la altura de la columna para que llene la tableta usando el 100% de la altura. Este valor de porcentaje de altura solo funciona porque nuestra columna tiene una altura establecida. Luego, podemos mover el ícono y el título a la parte inferior de la columna agregando un relleno 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 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 de imagen debajo del módulo de publicidad.
Luego cargue la misma imagen utilizada para el fondo de la propaganda.
El contenido de vista previa de texto
Nuestra última pieza de contenido teaser será el texto que incluirá algunos capítulos simulados 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 HTML dentro de la pestaña de texto del cuerpo:
|
01
02
03
04
05
06
07
|
<h3>Chapter 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>Chapter 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 de diseño, actualice el estilo del encabezado y el espaciado de la siguiente manera:
- Título 3 Fuente: Montserrat
- Encabezado 3 Peso de fuente: Ultra negrita
- Encabezado 3 Alineación de texto: Centro
- Encabezado 3 Altura de línea: 1,3 em
- Relleno: 10% (superior e inferior)
Parte 3: algunos toques finales
Actualizar configuración de fila
Una vez que el contenido esté en su lugar, debemos hacer algunos ajustes en la fila para que el diseño sea más receptivo. Abra la configuración de la fila y actualice lo siguiente:
- Ancho: 100% (escritorio), 90% (tableta y teléfono)
- Ancho máximo: 1080 px (escritorio), 488 px (tableta y teléfono)
Agregar contenido adicional a la columna 2
En este punto, podemos agregar contenido adicional a la columna 2 según sea necesario. Para este ejemplo, agregué un módulo de texto y un módulo de botones y les di un estilo similar al diseño presentado en nuestro paquete de diseño de libros electrónicos.
Resultado final
Ahora veamos el resultado final.
Consulte el contenido desplazable disponible dentro de la tableta.
Y así es como se apila el diseño en la pantalla de la tableta y el teléfono.
Pensamientos finales
Quizás lo mejor de este diseño de tableta desplazable 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. Con suerte, esto será útil la próxima vez que necesite mostrar contenido teaser en su sitio web.
Espero escuchar de usted en los comentarios.
¡Salud!