Tener una llamada a la acción deslizable en su sitio es una de las formas menos molestas para llamar la atención de sus visitantes. La mayoría de las veces simplemente ignorarán el CTA o lo cerrarán para continuar navegando por la página, pero a veces los ganará. 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 una llamada 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 usar 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á tener los cuatro implementados a la vez. Observe cómo se puede cerrar cada uno haciendo clic en el icono «x» y luego puede optar por volver a abrir el CTA haciendo clic en el icono «más».

llamada a la acción deslizable

Creación de una llamada 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 hasta Divi> Generador de temas. Luego haga clic en el cuadro «Agregar nueva plantilla» para crear una nueva plantilla.

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

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

barra de botones de seguimiento de redes sociales

Luego seleccione la opción «Construir desde cero».

barra de botones de seguimiento de redes sociales

Crear 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 integrada en Divi o WordPress. Agregaremos esto a nuestra plantilla antes de crear nuestro primer llamado a la acción deslizable.

Agregar fila de una columna

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

barra de botones de seguimiento de redes sociales

Agregar módulo de contenido de publicación

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

llamada a la acción deslizable

Configuración de fila

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

  • Ancho: 100%
  • Ancho Máx .: 100%
  • Relleno: 0px arriba, 0px abajo

llamada a la acción deslizable

Creación de la llamada a la acción deslizante superior izquierda

Ahora que nuestro módulo de contenido de publicación está en su lugar, estamos listos para comenzar a agregar nuestra primera llamada a la acción deslizable 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 nueva sección completa. 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.

llamada a la acción deslizable

Agregar fila de una columna

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

llamada a la acción deslizable

Configuraciones de 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:

  • Gradiente de fondo Color izquierdo:
  • Gradiente de fondo Color correcto:
  • Mostrar gradiente arriba de la imagen: SÍ
  • Imagen de fondo: [insertar imagen]
  • Ancho: 320 px
  • Margen: quedan 320 px
  • 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 y el índice Z:

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

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

01
02
03
position: fixed;
top: 80px;
left: -320px;

llamada a la acción deslizable

La clase CSS es necesaria para que podamos dirigir 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: -320 px» debe mover toda la sección (que tiene 320 px de ancho) fuera de la ventana del navegador. Pero tenemos el margen izquierdo de 320 px para volverlo a ver. 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 el CTA se deslice dentro y fuera de la vista.

Configuración de fila

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

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

llamada a la acción deslizable

Agregar llamada al módulo de acción

Dentro de la fila, agregue un Módulo de Llamado a la Acción.

llamada a la acción deslizable

Llamado a la acción Configuración

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

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

llamada a la acción deslizable

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

llamada a la acción deslizable

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: 15 px
  • Ancho del borde del botón: 0px
  • Espacio entre letras de botones: 1 px
  • Fuente del botón: Lato
  • Peso de fuente del botón: pesado
  • Estilo de fuente del botón: TT
  • Relleno de botones: 12 píxeles superior, 12 píxeles inferior, 32 píxeles izquierda, 32 píxeles derecha
  • relleno: 40px arriba, 40px abajo, 40px izquierda, 40px derecha

llamada a la acción deslizable

Agregue el icono 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 usa para abrir y cerrar la llamada a la acción deslizable. Para crear esto, agregue un módulo publicitario debajo del módulo de llamada a la acción.

llamada a la acción deslizable

Configuración de publicidad

Actualice la siguiente configuración de diseño.

Contenido
  • eliminar el título predeterminado y el texto del cuerpo
  • Use el icono: SÍ
  • Icono: plus (ver captura de pantalla)

llamada a la acción deslizable

Diseño
  • Color del icono: # 000000
  • Usar tamaño de fuente de icono: SÍ
  • Tamaño de fuente del icono: 40 px
  • Ancho: 40px
  • Altura: 40 px
  • Esquinas redondeadas: 50%
  • Transformar Rotar eje Z: 135deg

llamada a la acción deslizable

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.

01
02
03
position: absolute;
bottom: 0px;
right: -40px;

Agregue el siguiente CSS personalizado a la imagen de Blurb.

01
margin-bottom: 0px;

llamada a la acción deslizable

Resultado

Aquí está el resultado hasta ahora.

llamada a la acción deslizable

Tenga en cuenta que aún necesitamos agregar algo de 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 deslizante 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 un llamado a la acción deslizable para la esquina superior derecha.

Sección duplicada

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

llamada a la acción deslizable

Actualizar configuración de sección

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

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

A continuación, actualice el CSS personalizado en el elemento principal reemplazando «izquierda» por «derecha». Aquí está el fragmento completo:

01
02
03
position: fixed;
top: 80px;
right: -320px;

css personalizado

Actualizar la configuración del módulo Blurb

Luego abra la configuración del módulo de publicidad y actualice el fragmento de CSS personalizado en el elemento principal reemplazando «derecha» por «izquierda». Aquí está el fragmento completo:

01
02
03
position: absolute;
bottom: 0px;
left: -40px;

css personalizado

Resultado

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

llamada a la acción superior derecha

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

Sección duplicada

Para crear una llamada a la acción deslizable en la esquina inferior izquierda de la plantilla de página, duplique la sección CTA superior izquierda en la parte superior del diseño de página. Etiquete la sección duplicada «CTA inferior izquierda» y luego muévala debajo de la sección de contenido de la publicación.

sección duplicada

Actualizar configuración de sección

Luego abra la configuración de la sección, actualice el elemento principal CSS reemplazando «top: 80px» por «bottom: 0px». Aquí está el fragmento final:

01
02
03
position: fixed;
bottom: 0px;
left: -320px;

fragmento de código

Actualizar la configuración del módulo Blurb

Luego actualice el elemento principal CSS del módulo Blurb reemplazando «bottom: 0px» por «top: 0px». Aquí está el fragmento final:

01
02
03
position: absolute;
top: 0px;
right: -40px;

llamada a la acción deslizable

Resultado

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

llamada a la acción deslizable

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

Sección duplicada

Para crear la llamada a la acción deslizable inferior derecha, duplique la sección superior derecha de CTA y mueva la sección duplicada debajo de la sección de contenido de la publicación.

llamada a la acción deslizable

Actualizar configuración de 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:

01
02
03
position: absolute;
bottom: 0px;
right: -320px;

llamada a la acción deslizable

Actualizar la configuración del módulo Blurb

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

01
02
03
position: absolute;
top: 0px;
right: -40px;

llamada a la acción deslizable

Resultado

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

llamada a la acción deslizable

Agregar los jQuery personalizados y fragmentos de código CSS utilizando un módulo de código

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

Agregar módulo de código

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

llamada a la acción deslizable

Pegar código

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
<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>

llamada a la acción deslizable

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

You have Successfully Subscribed!