Los CTA de la barra lateral adhesiva son extremadamente efectivos para captar la atención de los visitantes sin ser autoritarios ni distraer. El truco es incluir uno o dos elementos en la barra lateral que se “peguen” o permanezcan fijos en el costado del contenido de la publicación a medida que el usuario se desplaza hacia abajo en la página. Esta es una alternativa refrescante a un diseño de barra lateral tradicional porque brinda la sensación de un diseño moderno de ancho completo (sin barra lateral) con el beneficio de mostrar CTA importantes en el costado de la página cuando sea necesario.
En este tutorial, le mostraremos cómo agregar CTA de barra lateral adhesiva a una plantilla de publicación de blog utilizando Divi Theme Builder . La aplicación de este diseño es de largo alcance. Funcionará para casi cualquier página o plantilla de publicación. Además, no tienes que limitarte a las llamadas a la acción; puede elegir agregar cualquier módulo Divi que desee.
¡Empecemos!
Para poner sus manos en la plantilla de publicación cta de la barra lateral adhesiva de este tutorial, primero deberá descargarla 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 a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json en Divi Theme Builder usando la opción de portabilidad de Theme Builder .
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá instalar y activar el tema Divi . Asegúrate de tener la última versión de Divi.
También necesitará al menos una publicación creada con Divi Builder con fines de prueba para mostrar el resultado deseado.
Después de eso, estás listo para ir.
Vistazo
Aquí hay un vistazo rápido a los CTA de la barra lateral adhesiva que se agregaron a una plantilla de publicación de blog en Divi.
Agregar la plantilla del generador de temas
El primer paso incluye importar nuestra plantilla prefabricada a nuestro sitio. Vamos a utilizar la plantilla de publicación del Divi Theme Builder Pack #1.
Para comenzar, vaya a Creador de temas»>Divi > Generador de 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. En caso de que tenga plantillas actualmente instaladas en su sitio, asegúrese de desmarcar cualquier opción que pueda anular sus plantillas actuales. Luego haga clic en el botón importar.
Creación de la plantilla de publicación de blog
Una vez que se ha importado la plantilla, estamos listos para comenzar a agregar nuestras nuevas CTA de la barra lateral fija al diseño de la plantilla. Para ello, haga clic en el icono de edición del área del cuerpo personalizada.
Adición de un diseño de barra lateral doble para mantener las llamadas a la acción de la barra lateral
En el Editor de diseño de plantilla, busque la fila que contiene el módulo de contenido de la publicación y cambie el diseño de la columna a una estructura de columna de un quinto, tres quintos, un quinto (1/5 3/5 1/5). Esto nos permitirá mantener la columna centrada para el contenido de la publicación y proporcionar dos secciones a cada lado para nuestras llamadas a la acción de la barra lateral adhesiva.
Después de cambiar la estructura de la columna, arrastre el módulo de contenido de la publicación a la columna central.
Actualización de la configuración de la fila
Abra la configuración de la fila y actualice las siguientes opciones de diseño:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 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.
Actualización de la configuración de la columna 1
A continuación, abra la configuración de la columna 1 y asigne a la columna una Clase CSS personalizada:
- Clase CSS: sticky-cta
Agregar un CTA de la barra lateral a la columna izquierda
Ahora estamos listos para la primera llamada a la acción. Agregue un módulo de llamada a la acción en la columna del extremo izquierdo.
Dar estilo a la CTA de la barra lateral
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 de cuerpo de texto
- Fuente del cuerpo: Montserrat
- Peso de la fuente del cuerpo: semi negrita
- Alineación del texto del cuerpo: derecha
- Color del cuerpo del texto: #444444
- Tamaño del texto del cuerpo: 22 px (escritorio), 18 px (tableta)
- Altura de la línea del cuerpo: 1,3 em
Botón
- Tamaño del texto del botón: 14px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #6148df
- Ancho del borde del botón: 0px
- Radio del borde del botón: 80px
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: TT
- Relleno de botones: 12 px arriba, 12 px abajo, 22 px izquierda, 22 px derecha
Ancho, alineación, relleno y bordes
- Ancho: 100%
- Ancho máximo: 320px
- Alineación del módulo: derecha
- Relleno: 10 px a la izquierda, 10 px 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 CTA de la barra lateral 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 del extremo derecho. Luego actualice la configuración para el duplicado de la siguiente manera:
- Alineación del texto del cuerpo: izquierda
- Alineación del módulo: izquierda
Actualizar la configuración de la columna 3
Para esta CTA en la columna de la derecha, agregaremos un margen superior a la columna para establecer una posición de inicio de la CTA de la barra lateral en un punto más abajo en la página.
Primero, abra la configuración para 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:
Escritorio
|
01
|
margin-top: 50% |
Tableta
|
01
|
margin-top: 0% |
Esto nos dará un punto de partida diferente para la llamada a la acción fija en la columna de la derecha, que es igual al 50 % del ancho de la fila. Siéntase libre de ajustar este valor según sea necesario para su propia publicación de blog.
Agregar el CSS personalizado a la plantilla con un módulo de código
Para obtener nuestro posicionamiento «fijo» para nuestros CTA de la barra lateral, debemos agregar algo de CSS personalizado. Para hacer esto, cree un nuevo módulo de código debajo del módulo de contenido de publicación (o en cualquier lugar de la página).
Luego pegue el siguiente CSS en el cuadro de código:
|
01
02
03
04
05
06
07
08
09
10
11
|
<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 la CTA verticalmente centrada en la página mientras se desplaza. El 50vh es básicamente la mitad de la altura de la ventana del navegador y el 130px es aproximadamente la mitad de la altura de la CTA. Si tiene un CTA que tiene mayor/menor altura, deberá ajustar los 130 px hacia arriba o hacia abajo.
Guardar ajustes
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 una publicación de blog que use la plantilla.
Y así es como los CTA de la barra lateral pegajosa se mantendrán en el desplazamiento. Puede ver cómo esto funcionaría mejor para contenido de publicación más largo.
Y aquí está en la pantalla móvil.
Pensamientos finales
Estos CTA de barra lateral adhesiva son una alternativa refrescante a la barra lateral tradicional. Se adaptan bien al diseño minimalista porque son menos intrusivos y no le dan a la publicación una sensación de desorden. Además, puede colocar el CTA más abajo en la página para que aparezca gradualmente y se mantenga en el desplazamiento, lo que hace que se destaque un poco más para los visitantes. Y no lo olvides. Puede reemplazar el CTA con cualquier módulo Divi o combinación de módulos para crear prácticamente cualquier cosa que desee. También puede optar por mantener solo un CTA en un lado. Parece tener muchas aplicaciones.
Espero que esto ayude a mejorar la forma en que muestra las CTA en sus plantillas de publicación en el futuro.
Para obtener más inspiración, consulte nuestras publicaciones similares sobre elementos adhesivos .
Espero escuchar de usted en los comentarios.
¡Salud!