Cómo agregar un llamado a la acción deslizable que se pueda cerrar en cualquier rincón de la plantilla de su página en Divi

Tener un llamado a la acción deslizante en su sitio es una de las formas menos molestas de llamar la atención de sus visitantes. La mayoría de las veces simplemente ignorarán la llamada a la acción o la cerrarán para seguir navegando por la página, pero a veces los convencerás. Un llamado a la acción deslizable funcionará muy bien para promocionar casi cualquier cosa en una página de destino.

En este tutorial, vamos a diseñar un llamado a la acción deslizable que se puede cerrar y que se puede agregar a cualquier esquina de una página usando Divi Theme Builder. Una vez hecho esto, podrá promocionar sus productos y ofertas especiales en cualquier lugar de la página sin tener que utilizar un complemento.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido a las cuatro CTA deslizables que agregaremos a las cuatro esquinas de la plantilla de página. Por supuesto, no necesitará implementar los cuatro a la vez. Observe cómo cada uno se puede cerrar haciendo clic en el icono "x" y luego puede elegir volver a abrir el CTA haciendo clic en el icono "más".

Descargue la plantilla de página Divi de llamada a la acción deslizable GRATIS

Para poner sus manos en la Plantilla de página 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.

Descarga los archivos

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.

DESCARGAR

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 página creada con Divi Builder con fines de prueba a fin de asignar la nueva plantilla a esa página para mostrar el resultado.

Después de eso, estará listo para comenzar.

Creación de un llamado a la acción deslizable que se puede cerrar para cada rincón de la plantilla de su página en Divi

Crear una nueva plantilla

Desde el Panel de WordPress, navegue a Divi> Theme Builder. Luego haga clic en el cuadro "Agregar nueva plantilla" para crear una nueva plantilla.

Asigne la plantilla a las páginas en las que desea que se muestre la barra de promoción.

En la nueva plantilla, haga clic en el área "Agregar cuerpo personalizado" y luego seleccione "Crear cuerpo personalizado".

Luego seleccione la opción "Construir desde cero".

Creación de la sección de contenido de la publicación

La sección de contenido de la publicación es una parte necesaria de cualquier plantilla de página para mostrar el contenido real de la página o publicación creada en Divi o WordPress. Agregaremos esto a nuestra plantilla antes de crear nuestro primer llamado a la acción deslizante.

Agregar fila de una columna

Para comenzar, agregue una fila de una columna a la sección regular.

Agregar módulo de contenido de publicación

Luego agregue un módulo de contenido de publicación a la fila.

Configuración de filas

Después de eso, actualice la configuración de la fila de la siguiente manera:

• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px abajo

Creación de la llamada a la acción deslizable en la parte superior izquierda

Ahora que nuestro módulo de contenido de publicación está en su lugar, estamos listos para comenzar a agregar nuestro primer llamado a la acción deslizante en la esquina superior izquierda de la plantilla de página.

Agregar sección

Cada nueva llamada a la acción se creará con una sección completamente nueva. Esto le permitirá agregar cualquier diseño o módulo necesario para diseñar la llamada a la acción.

Agregue una nueva sección regular al diseño de la plantilla.

Agregar fila de una columna

Luego, asigne a la sección una fila de una columna.

Configuración de la sección

Arrastre (o mueva) la sección sobre la sección de contenido de la publicación y actualice la configuración de la sección de la siguiente manera:

• Color de degradado de fondo a la izquierda:
• Gradiente de fondo Color derecho:
• Mostrar degradado por encima de la imagen: SÍ
• Imagen de fondo: [insertar imagen]
• Ancho: 320px
• Margen: 320 px a la izquierda
• Relleno: 0px arriba, 0px abajo
• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Retraso de animación: 2000 ms

Luego salte sobre la pestaña avanzada y agregue la siguiente clase CSS e índice Z:

• Clase CSS: slide-in-cta
• Índice Z: 999

Y agregue el siguiente fragmento de CSS personalizado el elemento principal:

position: fixed;
top: 80px;
left: -320px;

La clase CSS es necesaria para que podamos apuntar a la sección con código más adelante. El CSS personalizado colocará la sección en la parte superior izquierda de la plantilla de página en una posición fija (o fija). La posición "izquierda: -320px" debe mover toda la sección (que tiene 320px de ancho) fuera de la ventana del navegador. Pero tenemos el margen izquierdo de 320px para volver a verlo. La razón por la que esto se construye de esta manera es para que podamos activar y desactivar el valor del margen al hacer clic en el icono "x". Esto hará que la llamada a la acción se deslice hacia adentro y hacia afuera.

Configuración de filas

Ahora actualice la configuración de la fila de la siguiente manera:

• Usar ancho de canalón personalizado: SÍ
• Ancho de la canaleta: 1
• Ancho: 100%
• Relleno: 0px arriba, 0px abajo

Agregar módulo de llamado a la acción

Dentro de la fila, agregue un Módulo de llamada a la acción.

Configuración de llamada a la acción

Luego, actualice la configuración de la llamada a la acción.

Contenido

• Título: [ingrese el texto de su elección]
• Botón: [ingrese el texto de su elección]
• Cuerpo: [ingrese el texto de su elección]
• URL del enlace del botón: [ingrese la URL real o #]

A continuación, elimine el color de fondo predeterminado para revelar el fondo de la sección que agregamos anteriormente.

Configuración de diseño (texto, botón y relleno)

En la pestaña de diseño, actualice lo siguiente:

• Fuente del título: Lato
• Peso de la fuente del título: Pesado
• Altura de la línea de título: 1.3em
• Fuente del cuerpo: Lato
• Peso de la fuente del cuerpo: Negrita
• Usar estilos personalizados para el botón: SÍ
• Tamaño del texto del botón: 15px
• Ancho del borde del botón: 0px
• Espacio entre letras de los botones: 1 px
• Fuente del botón: Lato
• Peso de la fuente del botón: Pesado
• Estilo de fuente del botón: TT
• Relleno de botones: 12px en la parte superior, 12px en la parte inferior, 32px a la izquierda, 32px a la derecha
• relleno: 40px arriba, 40px abajo, 40px izquierda, 40px derecha

Agregue el ícono de abrir y cerrar con un módulo Blurb

Una vez finalizada la llamada a la acción, debemos crear el botón de icono que se utiliza para abrir y cerrar la llamada a la acción deslizable. Para crear esto, agregue un módulo de propaganda debajo del módulo de llamada a la acción.

Configuración de Blurb

Actualice la siguiente configuración de diseño.

Contenido

• eliminar el título y el texto del cuerpo predeterminados
• Usar icono: SÍ
• Icono: más (ver captura de pantalla)

Diseño

• Color del icono: # 000000
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 40px
• Ancho: 40px
• Alto: 40px
• Esquinas redondeadas: 50%
• Transformar Girar eje Z: 135 grados

Ajustes avanzados

En la pestaña avanzada, agregue la siguiente clase CSS:

• Clase CSS: slide-in_target

Luego agregue este CSS personalizado al elemento principal.

position: absolute;
bottom: 0px;
right: -40px;

Agrega el siguiente CSS personalizado a la imagen de Blurb.

margin-bottom: 0px;

Resultado

Aquí está el resultado hasta ahora.

Tenga en cuenta que todavía necesitamos agregar algún código para agregar la funcionalidad de cerrar y abrir al hacer clic en el icono "x". Agregaremos el código después de crear una llamada a la acción en cada una de las cuatro esquinas de la plantilla.

Creación de la llamada a la acción deslizable en la parte superior derecha

Con la primera llamada a la acción deslizable creada, podemos acelerar el proceso de creación del resto de los CTA duplicando la sección ya construida. A continuación, crearemos una llamada a la acción deslizante para la esquina superior derecha.

Sección duplicada

Implemente el modo de vista de estructura alámbrica y luego duplique la sección de CTA superior izquierda.

Actualizar la configuración de la sección

Luego actualice la nueva configuración de la sección de la siguiente manera:

• margen: 320px a la derecha
• dirección de la animación: izquierda

Luego actualice el CSS personalizado en el elemento principal reemplazando "izquierda" con "derecha". Aquí está el fragmento completo:

position: fixed;
top: 80px;
right: -320px;

Actualizar la configuración del módulo Blurb

A continuación, abra la configuración del módulo de propaganda y actualice el fragmento de CSS personalizado en el elemento principal reemplazando "derecha" por "izquierda". Aquí está el fragmento completo:

position: absolute;
bottom: 0px;
left: -40px;

Resultado

Ahora verá una llamada a la acción deslizante en la parte superior derecha de la plantilla de página.

Creación de la llamada a la acción deslizable inferior izquierda

Sección duplicada

Para crear un llamado a la acción deslizante en la esquina inferior izquierda de la plantilla de página, duplica la sección de CTA superior izquierda en la parte superior del diseño de la página. Etiqueta la sección duplicada como "CTA inferior izquierda" y luego muévela debajo de la sección de contenido de la publicación.

Actualizar la configuración de la sección

Luego abra la sección de configuración y actualice el elemento principal CSS reemplazando "top: 80px" con "bottom: 0px". Aquí está el fragmento final:

position: fixed;
bottom: 0px;
left: -320px;

Actualizar la configuración del módulo Blurb

A continuación, actualice el elemento CSS principal del módulo Blurb reemplazando "bottom: 0px" por "top: 0px". Aquí está el fragmento final:

position: absolute;
top: 0px;
right: -40px;

Resultado

Ahora echa un vistazo a la llamada a la acción deslizante inferior izquierda en la página en vivo.

Creación de la llamada a la acción deslizable inferior derecha

Sección duplicada

Para crear la llamada a la acción deslizante inferior derecha, duplica la sección de CTA superior derecha y mueve la sección duplicada debajo de la sección de contenido de la publicación.

Actualizar la configuración de la sección

Abra la configuración de la sección y actualice el elemento principal CSS reemplazando "top: 80px;" con "bottom: 0px;". Aquí está el fragmento final:

position: absolute;
bottom: 0px;
right: -320px;

Actualizar la configuración del módulo Blurb

Luego abra la configuración del módulo de propaganda y actualice el elemento principal CSS reemplazando "bottom: 0px;" con "top: 0px;". Aquí está el fragmento final:

position: absolute;
top: 0px;
right: -40px;

Resultado

Ahora echa un vistazo a la llamada a la acción deslizante inferior derecha en la página en vivo.

Adición de fragmentos de código CSS y jQuery personalizados mediante un módulo de código

Para el paso final, necesitamos agregar algo de jQuery y CSS personalizados para que podamos obtener la funcionalidad de abrir y cerrar para cada una de las CTA deslizables.

Agregar módulo de código

Agregue un módulo de código a una de las secciones del diseño.

Pegar código

Luego abra la configuración del código y pegue el siguiente código en el cuadro de código.

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

Pensamientos finales

Con Divi, crear un llamado a la acción deslizante no es nada difícil. Y dado que puede usar el creador de temas para agregar una llamada a la acción a una plantilla de página, tendrá más control sobre qué páginas mostrarán esas llamadas a la acción. Siéntase libre de aumentar el retraso de la animación para la sección de CTA para que el usuario vea la animación deslizante de CTA un poco más tarde (o antes) después de la carga de la página. También puede usar los clientes potenciales de Divi y habilitar las pruebas divididas para mejorar las conversiones de esos CTA y descubrir qué esquina tendrá la mejor conversión.

Espero tener noticias tuyas en los comentarios.

¡Salud!