Tener una llamada a la acción deslizable 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 el CTA o lo cerrarán para continuar navegando por la página, pero a veces los conquistarás. Una llamada 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 parte de la página sin tener que usar un complemento.
¡Empecemos!
Aquí hay un vistazo rápido a los cuatro CTA deslizables que agregaremos a las cuatro esquinas de la plantilla de página. Por supuesto, no necesitará tener los cuatro desplegados a la vez. Observe cómo se puede cerrar cada uno haciendo clic en el ícono «x» y luego puede elegir volver a abrir el CTA haciendo clic en el ícono «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 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 página creada con Divi Builder con fines de prueba para poder asignar la nueva plantilla a esa página para mostrar el resultado.
Después de eso, estás listo para ir.
Creación de una llamada a la acción deslizable que se puede cerrar para cada esquina de la plantilla de su página en Divi
Creación de una nueva plantilla
Desde el Panel de WordPress, navega a Divi > Generador de temas. 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 nuestra primera llamada a la acción deslizable.
Agregar fila de una columna
Para comenzar, agregue una fila de una columna a la sección normal.
Agregar módulo de contenido de publicación
Luego agregue un módulo de contenido de publicación a la fila.
Configuración de fila
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 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 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.
Ajustes 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:
- Degradado de fondo Color izquierdo:
- Gradiente de fondo Color derecho:
- Mostrar degradado encima de la imagen: SÍ
- Imagen de fondo: [insertar imagen]
- Ancho: 320px
- Margen: 320px a la izquierda
- Relleno: 0px arriba, 0px abajo
- Estilo de animación: Diapositiva
- Dirección de animación: Derecha
- Retardo de animación: 2000ms
Luego salte a la pestaña avanzada y agregue la siguiente clase CSS y el índice Z:
- Clase CSS: diapositiva en cta
- Índice Z: 999
Y agregue el siguiente fragmento de CSS personalizado al elemento principal:
|
01
02
03
|
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 pegajosa). 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 volver a mostrarlo. La razón por la que está construido 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 CTA se deslice hacia dentro y fuera de la vista.
Configuración de fila
Ahora actualicemos la configuración de la fila de la siguiente manera:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 100%
- Relleno: 0px arriba, 0px abajo
Agregar módulo de llamada a la acción
Dentro de la fila, agregue un Módulo de llamada a la acción.
Configuración de llamadas 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 #]
Luego, 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 del título: 1,3 em
- 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
- Espaciado entre letras de 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: 12 px arriba, 12 px abajo, 32 px izquierda, 32 px derecha
- relleno: 40px arriba, 40px abajo, 40px izquierda, 40px derecha
Agregue un icono de abrir y cerrar con un módulo de 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 de publicidad debajo del módulo de llamada a la acción.
Ajustes de publicidad
Actualice la siguiente configuración de diseño.
Contenido
- eliminar el título predeterminado y el texto del cuerpo
- Icono de uso: SÍ
- Icono: más (ver captura de pantalla)
Diseño
- Color del icono: #000000
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 40px
- Ancho: 40px
- Altura: 40px
- Esquinas redondeadas: 50%
- Transformar Rotar 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.
|
01
02
03
|
position: absolute;bottom: 0px;right: -40px; |
Agregue el siguiente CSS personalizado a la imagen de Blurb.
|
01
|
margin-bottom: 0px; |
Resultado
Aquí está el resultado hasta ahora.
Tenga en cuenta que todavía necesitamos agregar algo de código para agregar la funcionalidad de cerrar y abrir al hacer clic en el ícono «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 superior derecha
Con la primera llamada a la acción deslizable creada, podemos acelerar el proceso de creación del resto de las CTA duplicando la sección ya creada. A continuación, crearemos una llamada 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 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 derecho
- dirección de animación: izquierda
Luego actualice el CSS personalizado en el elemento principal reemplazando «izquierda» con «derecha». Aquí está el fragmento completo:
|
01
02
03
|
position: fixed;top: 80px;right: -320px; |
Actualizar la configuración del módulo de Blurb
Luego abra la configuración del módulo de publicidad y actualice el fragmento de CSS personalizado en el elemento principal reemplazando «derecha» con «izquierda». Aquí está el fragmento completo:
|
01
02
03
|
position: absolute;bottom: 0px;left: -40px; |
Resultado
Ahora verá una llamada a la acción deslizable en la parte superior derecha de la plantilla de la página.
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 la página. Etiquete la sección duplicada como «CTA inferior izquierda» y luego muévala debajo de la sección de contenido de la publicación.
Actualizar la configuración de la sección
Luego abra la configuración de la sección, actualice el CSS del elemento principal reemplazando «superior: 80px» con «inferior: 0px». Aquí está el fragmento final:
|
01
02
03
|
position: fixed;bottom: 0px;left: -320px; |
Actualizar la configuración del módulo de Blurb
Luego, actualice el CSS del elemento principal del módulo Blurb reemplazando «bottom: 0px» con «top: 0px». Aquí está el fragmento final:
|
01
02
03
|
position: absolute;top: 0px;right: -40px; |
Resultado
Ahora echa un vistazo a la llamada a la acción deslizable en la parte inferior izquierda de 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 deslizable en la parte inferior derecha, duplique la sección CTA superior derecha y mueva 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 CSS del elemento principal reemplazando «top: 80px;» con “abajo: 0px;”. Aquí está el fragmento final:
|
01
02
03
|
position: absolute;bottom: 0px;right: -320px; |
Actualizar la configuración del módulo de Blurb
Luego abra la configuración del módulo de publicidad y actualice el CSS del elemento principal reemplazando «bottom: 0px;» con «arriba: 0px;». Aquí está el fragmento final:
|
01
02
03
|
position: absolute;top: 0px;right: -40px; |
Resultado
Ahora echa un vistazo a la llamada a la acción deslizable en la parte inferior derecha de la página en vivo.
Adición de fragmentos de código jQuery y CSS personalizados mediante un módulo de código
Para el paso final, debemos agregar 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 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.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
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> |
Pensamientos finales
Con Divi, crear una llamada a la acción deslizable no es nada difícil. Y dado que puede usar el generador de temas para agregar un llamado a la acción a una plantilla de página, tendrá más control sobre qué páginas mostrarán esos CTA. 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 cargar la página. También podrías usar clientes potenciales de Divi y habilitar pruebas divididas para mejorar las conversiones de esos CTA y descubrir qué esquina tendrá la mejor conversión.
Espero escuchar de usted en los comentarios.
¡Salud!