Las llamadas a la acción de barra lateral adhesivas son extremadamente efectivas para captar la atención de los lectores sin ser invasivos y sin distraer.
El truco consiste en incluir uno o dos elementos en la barra lateral que se peguen en el lado del contenido de la entrada a medida que el usuario se desplaza hacia abajo por la página.
En este tutorial te muestro cómo agregar una llamada a la acción pegajosa a una plantilla de entrada de blog utilizando el Theme Builder de Divi.
Las llamada a la acción se van a situar en la sección que contiene al contenido principal de la entrada así que nos dirigimos hasta ahí y prestamos atención a la fila que estructura el contenido.
En primer lugar es necesario hacer una sencilla adaptación a la fila que contiene el contenido principal de la entrada.
Como en este caso es una fila con estructura de 1 sola columna vamos a los ajustes de la fila y añadimos dos columnas más, arrastrando luego la columna del contenido al medio.
Luego cambiamos la estructura de 3 columnas iguales a una estructura donde las columnas laterales sean angostas y la central (que tiene el texto de la entrada) sea más ancha.
Un vez configurada la fila vamos a los estilos.
Diseño:
Una vez configurada adecuadamente la fila vamos a insertar un módulo Llamada a la Acción de Divi en la columna 1.
También podrías usar cualquier otro módulo que resulte de tu conveniencia lógicamente.
En este caso no utilizo el Título del módulo llamada a la acción sino que voy a poner el texto en el Cuerpo.
Diseño:
Botón:
Separación (del módulo, no del botón):
Borde Superior e Inferior:
Por último copiamos el módulo Llamada a la acción y arrastramos la copia hacia la columna 3. En el módulo de la columna 3 cambiamos solo la alineación del texto a Izquierda.
Ahora nos queda hacer que las llamadas a la acción se queden adheridas en algún lugar de la pantalla. Para ésto vamos a los ajustes de la columna y en CSS Personalizado ponemos el siguiente CSS en el elemento principal:
position: sticky ;
position: -webkit-sticky ;
top: 30vh ;
Y para que la llamada a la acción de la columna 3 ingrese un poco más tarde que la primera le añadimos un margen superior así:
margin-top: 50%;
Es importante entender que lo que estamos haciendo adhesivo no son los módulos de llamada a la acción sino las columnas 1 y 3 que los contienen.
Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.
Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…