Los CTA de barra lateral adhesiva son extremadamente efectivos para captar la atención de los visitantes sin ser dominantes ni distractores. El truco consiste en incluir uno o dos elementos en la barra lateral que se «peguen» o permanezcan fijos en el lado 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 proporciona la sensación de un diseño moderno de ancho completo (sin barra lateral) con el beneficio de mostrar CTA importantes en el lado 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 gran alcance. Funcionará para casi cualquier página o plantilla de publicación. Además, no tiene que limitarse a los CTA; puede elegir agregar cualquier módulo Divi que desee.

¡Empecemos!

Lo que necesitas para empezar

Para comenzar, deberá instalar y activar Divi Theme . 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 partir.

Vistazo

Aquí hay un vistazo rápido a las CTA de barra lateral adhesivas que se han agregado a una plantilla de publicación de blog en Divi.

CTA de barra lateral fija

Cómo agregar CTA de barra lateral fija a la plantilla de publicación de tu blog en Divi

Agregar la plantilla del generador de temas

El primer paso incluye la importación de nuestra plantilla prefabricada a nuestro sitio. Vamos a utilizar la plantilla de publicación del Divi Theme Builder Pack # 1.

Para comenzar, navegue a Divi> Generador de temas. Haga clic en el icono de portabilidad en la parte superior derecha de la página. En el modo 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.

Barra lateral adhesiva

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 barra lateral adhesivas al diseño de la plantilla. Para hacer esto, haga clic en el icono de edición del área del cuerpo personalizado.

CTA de barra lateral fija

Agregar un diseño de barra lateral doble para mantener las 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 y un quinto (1/5 3/5 1/5). Esto nos permitirá mantener la columna centrada para el contenido de la publicación mientras proporcionamos dos secciones a cada lado para nuestras CTA de barra lateral adhesivas.

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 fila

Abra la configuración de la fila y actualice las siguientes opciones de diseño:

  • Usar ancho de canal personalizado: SÍ
  • Ancho de canal: 2
  • Ancho: 100% (escritorio), 90% (tableta)
  • Ancho Máx .: 1500px

Barra lateral adhesiva

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 dele a la columna una Clase CSS personalizada:

  • Clase CSS: sticky-cta

CTA de barra lateral fija

Agregar un CTA de 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.

Barra lateral adhesiva

Estilo de la barra lateral 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: #

Barra lateral adhesiva

Body Text Design
  • 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: 22 px (escritorio), 18 px (tableta)
  • Altura de la línea del cuerpo: 1.3em

CTA de barra lateral fija

Botón
  • Tamaño del texto del botón: 14 px
  • 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 fuente del botón: negrita
  • Estilo de fuente del botón: TT
  • Acolchado de botones: 12 píxeles superior, 12 píxeles inferior, 22 píxeles izquierda, 22 píxeles derecha

Barra lateral adhesiva

Ancho, alineación, relleno y bordes
  • Ancho: 100%
  • Ancho Máx .: 320px
  • Alineación del módulo: derecha
  • Relleno: 10 píxeles a la izquierda, 10 píxeles a la derecha
  • Ancho del borde superior: 10px
  • Color del borde superior: #eeeeee
  • Ancho del borde inferior: 10px
  • Color del borde inferior: #eeeeee

CTA de barra lateral fija

Agregar el CTA de la barra lateral a la columna derecha

Para crear el CTA para la columna 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

CTA derecho

Actualizar la configuración de la columna 3

Para este CTA en la columna derecha, vamos a agregar un margen superior a la columna para establecer una posición inicial de la 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

01
margin-top: 50%

Tableta

01
margin-top: 0%

plantilla de publicación divi

Esto nos dará un punto de partida diferente para el CTA adhesivo en la columna 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.

margen

Agregar el CSS personalizado a la plantilla con un módulo de código

Para obtener nuestro posicionamiento «adhesivo» para nuestros CTA de barra lateral, necesitamos agregar algunos CSS personalizados. 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).

plantilla de publicación divi

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>

Barra lateral adhesiva

El desplazamiento superior en este código es un cálculo que posiciona 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 de la CTA. Si tiene un CTA que tiene una altura mayor / menor, deberá ajustar el 130px hacia arriba o hacia abajo.

Guardar ajustes

Una vez que haya terminado, guarde el diseño de la plantilla.

plantilla de publicación divi

Y luego guarde la configuración del generador de temas

Barra lateral adhesiva

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!