Las barras laterales pegajosas son extremadamente efectivas para atraer la atención de visitantes sin ser intrusivo ni distraer. El truco consiste en incluir uno o dos elementos en la barra lateral que “permanezcan visibles” o fijos al costado de la contenido de la publicación cuando el usuario se desplaza por la página. Esta es una alternativa refrescante al diseño de barra lateral tradicional, ya que da la impresión de un diseño moderno de ancho completo (sin barra lateral), con la ventaja de presentar llamadas a la acción importantes al costado de la página cuando es necesario.
En este tutorial, le mostraremos cómo agregar llamadas pegajosas a la acción a una plantilla de publicación de blog usando Divi Theme Builder. La aplicación de este diseño es considerable. Funcionará para casi cualquier página o plantilla de publicación. Además, no tiene que limitarse a las llamadas a la acción; puede optar por agregar los módulos Divi de su elección.
Lo que necesitas para empezar
Para comenzar, debes para instalar y activar el tema Divi . Asegúrese de tener la última versión de Divi.
También necesitará al menos un mensaje creado con Divi Builder para que la prueba muestre el resultado deseado.
Después de eso, estás listo para irte.
vista
Aquí hay una descripción general rápida de los ACT adhesivos que se han agregado a una plantilla de publicación de blog en Divi.
Cómo agregar llamadas a la acción fijas en la plantilla de publicación de su blog en Divi
Agregar la plantilla del generador de temas
El primer paso es importar nuestra plantilla predefinida en nuestro sitio. Vamos a utilizar la plantilla de publicación Divi Theme Builder Pack # 1.
Para comenzar, navega a Divi > Generador temas. Haga clic en el icono de portabilidad en la parte superior derecha de la página. En el modal de portabilidad, seleccione la pestaña de importación y elija el archivo divi-theme-builder-pack-1-post-template.json de la carpeta. Si tiene plantillas actualmente instaladas en su sitio, asegúrese de desmarcar cualquier opción que pueda sobrescribir sus plantillas actuales. Luego haga clic en el botón importar.
Cree la plantilla de publicación de blog
Una vez importada la plantilla, estamos listos para agregar nuestras nuevas CTA a la barra lateral que se adhiere al diseño de la plantilla. Para hacer esto, haga clic en el icono de edición para el área del cuerpo personalizada.
Se agregó un diseño de barra lateral dual para contener los CTA de la barra lateral
En el Editor de diseño de modelo, busque la fila que contiene el módulo Publicar. contenido y reemplace el diseño de la columna con una estructura de columna de un quinto por tres quintos por un quinto (1/5 3/5 1/5). Esto nos permitirá mantener la columna centrada para el contenido de la publicación y al mismo tiempo proporciona dos secciones a cada lado para nuestras CTA adhesivas.
Después de cambiar la estructura de la columna, arrastre el módulo de publicación de contenido a la columna central.
Actualizar parámetros de línea
Abra la configuración de línea y actualice las siguientes opciones de diseño:
- Use un ancho de canal personalizado: SÍ
- Ancho de canal: 2
- Ancho: 100% (escritorio), 90% (tableta)
- Ancho máximo: 1500px
Esto nos dará el espacio que necesitamos para nuestra configuración de barra lateral doble.
Actualizar la configuración de la columna 1
Luego abra la configuración de la columna 1 y dele a esta columna una clase CSS personalizada:
- Clase CSS: sticky-cta
Agregar una barra lateral de CTA a la columna de la izquierda
Ahora estamos listos para la primera llamada a la acción. Agregue una llamada al módulo de acción en la columna de la izquierda.
Estilizar la barra lateral de CTA
Actualice la configuración de la siguiente manera:
Contenido
- Botón: «Haga clic aquí»
- Cuerpo: “Tu contenido va aquí. Edite o elimine este texto en línea o en la configuración de contenido del módulo. "
- URL del enlace del botón: #
Diseño del texto del cuerpo
- Fuente del cuerpo: Montserrat
- Peso de fuente: semi-negrita
- Texto del cuerpo: alineación correcta
- El color del cuerpo del texto: # 444444
- Tamaño del texto del cuerpo: 22px (escritorio), 18px (tableta)
- Altura del cuerpo: 1.3em
Bouton
- Tamaño del texto del botón: 14px
- Color de texto del botón: #ffffff
- Color de fondo del botón: # 6148df
- Ancho del borde del botón: 0px
- Radio del botón: 80px
- Peso de fuente: negrita
- Estilo de fuente del botón: TT
- Relleno de botones: 12px en la parte superior, 12px en la parte inferior, 22px a la izquierda, 22px a la derecha
Ancho, alineación, relleno y bordillos
- Ancho: 100%
- Ancho máximo: 320px
- Alineación del módulo: derecha
- Relleno: 10px a la izquierda, 10px a la derecha
- Ancho del borde superior: 10px
- Color del borde superior: #eeeeee
- Ancho del borde inferior: 10px
- Color del borde inferior: #eeeeee
Agregar la barra lateral de CTA a la columna derecha
Para crear el CTA para la columna de la derecha, copie el que acabamos de crear y péguelo en la columna de la derecha. Luego actualice la configuración del duplicado de la siguiente manera:
- Alineación del cuerpo del texto: izquierda
- Alineación del módulo: izquierda.
Actualice la configuración de la columna 3
Para este CTA en la columna de la derecha, agregaremos un margen superior a la columna para establecer una posición inicial de la barra lateral de CTA en un punto inferior de la página.
Comience abriendo los parámetros de la columna 3 y agregue la misma clase CSS que agregamos a la columna 1:
- Clase CSS: sticky-cta
Luego agregue el siguiente CSS personalizado al elemento principal:
oficina
margin-top: 50%
tableta
margin-top: 0%
Esto nos dará un punto de partida diferente para el CTA fijo en la columna de la derecha, que es el 50% del ancho de la fila. Siéntase libre de ajustar este valor según sea necesario para su propia publicación de blog.
Agregue CSS personalizado a la plantilla con un módulo de código
Para obtener nuestro posicionamiento "fijo" para nuestros CTA de la barra lateral, necesitamos agregar CSS personalizado. Para hacer esto, cree un nuevo módulo de código debajo del módulo de publicación de contenido (o en cualquier lugar de la página).
Luego, pegue el siguiente CSS en el cuadro de código:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
El desplazamiento superior en este código es un cálculo que coloca el CTA centrado verticalmente en la página cuando se desplaza. El 50vh es la mitad de la altura de la ventana del navegador y el 130px es la mitad de la altura de la CTA. Si su CTA es mayor o menor, deberá ajustar los 130 píxeles hacia arriba o hacia abajo.
Guardar configuración
Una vez que haya terminado, guarde el diseño de la plantilla.
Y luego guarde la configuración del generador de temas
Resultado final
Para ver el resultado final, visite un artículo de blog usando la plantilla.
Y así es como los CTA pegajosos se quedarán atascados en el desplazamiento. Puede ver cómo funcionaría mejor para contenido más largo.
Consideraciones finales
Estas llamadas a la acción laterales adhesivas son una alternativa refrescante a la barra lateral tradicional. Funcionan bien para el diseño minimalista porque son menos intrusivos y no hacen que la publicación se sienta abarrotada. Además, puede colocar el CTA más abajo en la página para que aparezca gradualmente y se adhiera al desplazamiento, haciéndolo más visible para las personas. visitantes. Y no olvides. Puede reemplazar el CTA con cualquier módulo Divi o combinación de módulos para crear casi cualquier cosa que desee. También puede optar por mantener solo un CTA en un lado. Parece tener muchas aplicaciones.
