Cómo agregar CTA de barra lateral adhesiva a una plantilla de publicación de blog en Divi
Publicado: 2019-11-27Los CTA de barra lateral adhesiva son extremadamente efectivos para captar la atención de los visitantes sin ser autoritarios ni distraerlos. El truco consiste en incluir uno o dos elementos en la barra lateral que se “peguen” o permanezcan fijos en el lateral del contenido de la publicación mientras 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 es 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 gran 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 optar por agregar cualquier módulo Divi que desee.
¡Empecemos!
Descargue la plantilla de CTA Sticky Sidebar GRATIS
Para poner sus manos sobre la plantilla de publicación de 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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 Divi Theme. Asegúrese 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, estará listo para comenzar.
Vistazo
Aquí hay un vistazo rápido a las CTA de la barra lateral adhesivas que se han agregado a una plantilla de publicación de blog en Divi.
Cómo agregar CTA de barra lateral adhesiva a su plantilla de publicación de blog en Divi
Adición de la plantilla del generador de temas
El primer paso incluye importar nuestra plantilla prediseñada a nuestro sitio. Vamos a utilizar la plantilla de publicación del Divi Theme Builder Pack # 1.
Para comenzar, vaya a Divi> Theme Builder. 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 alguna plantilla instalada actualmente 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 importada la plantilla, estamos listos para comenzar a agregar nuestras nuevas CTA de barra lateral adhesiva al diseño de la plantilla. Para hacer esto, haga clic en el icono de edición del área personalizada del cuerpo.
Agregar un diseño de barra lateral doble para contener los CTA 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 al tiempo que proporcionamos dos secciones a cada lado para nuestras CTA de barra lateral adhesivas.
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 de la canaleta: 2
- Ancho: 100% (escritorio), 90% (tableta)
- Ancho máximo: 1500px
Esto nos dará el espacio que necesitamos para nuestra configuración de barra lateral dual.
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 de la izquierda
Ahora estamos listos para la primera llamada a la acción. Agregue un módulo de llamado a la acción en la columna del extremo izquierdo.
Aplicar 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 texto corporal
- Fuente del cuerpo: Montserrat
- Peso de la fuente del cuerpo: Semi negrita
- Alineación del texto del cuerpo: derecha
- Color del texto del cuerpo: # 444444
- Tamaño del texto del cuerpo: 22px (escritorio), 18px (tableta)
- Altura de la línea del cuerpo: 1.3em
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: 80 px
- Peso de la fuente del botón: 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 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 el CTA de la barra lateral a la columna de la 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 este CTA en la columna de la derecha, vamos a agregar un margen superior a la columna para establecer una posición de inicio del CTA de la barra lateral en un punto más abajo de la página.
Primero, abra la configuración 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:
Escritorio
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 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, necesitamos agregar algo de CSS personalizado. Para hacer esto, cree un nuevo módulo de código debajo del módulo de contenido de la publicación (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 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 del CTA. Si tiene un CTA que tiene una altura mayor / menor, deberá ajustar los 130px 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 usa la plantilla.
Y así es como los CTA de la barra lateral adhesiva se pegarán en el desplazamiento. Puede ver cómo esto funcionaría mejor para contenido de publicaciones más largas.
Y aquí está en la pantalla móvil.
Pensamientos finales
Estos CTA de barra lateral adhesivos 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 desordenada. Además, puede colocar la llamada a la acción más abajo en la página para que aparezca gradualmente y se pegue en el desplazamiento, haciendo que se destaque un poco más para los visitantes. Y no lo olvide. 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 una llamada a la acción en un lado. Parece tener muchas aplicaciones.
Espero que esto ayude a mejorar la forma en que muestra las llamadas a la acción en sus plantillas de publicaciones en el futuro.
Para obtener más inspiración, consulte nuestras publicaciones similares sobre elementos adhesivos.
Espero tener noticias tuyas en los comentarios.
¡Salud!