Tradicionalmente, los menús fijos son visibles en la parte superior (o inferior) de una página en el momento en que se carga la página. Sin embargo, crear un menú de CTA fijo a medida que el usuario se desplaza hacia abajo en la página puede ser una forma creativa y efectiva de mantener esas CTA importantes en las que se puede hacer clic en todo momento. En cierto modo, es lo mejor de ambos mundos. Permite que la CTA mantenga su ubicación principal en el diseño original. Y mantiene una versión reducida de la CTA (el botón) visible en una estructura de menú fija con la que los usuarios están familiarizados.
En este tutorial, le mostraremos cómo crear un menú fijo de CTA a medida que se desplaza hacia abajo en la página en Divi . Esto funcionará muy bien para los usuarios de computadoras de escritorio y móviles al agregar una forma intuitiva, pero única, de atraer a los visitantes para que tomen medidas.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo 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!
https://youtu.be/kpjbG8frPTQ
Suscríbete a nuestro canal de Youtube
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Llamada a la acción n.º 1 del edificio
Para comenzar a crear nuestra primera CTA, vamos a utilizar un módulo de publicidad con un botón de CTA personalizado que se pegará en la parte superior e inferior de la página a medida que el usuario se desplaza.
Para comenzar, cree una nueva fila de una columna dentro de la sección normal.
Agregar publicidad
Dentro de la columna de la fila, agregue un módulo de publicidad.
Abra la configuración de publicidad y agregue una imagen de su elección en lugar del ícono predeterminado. Estoy usando una imagen del paquete de diseño de criptomonedas.
En la pestaña de diseño, actualice los estilos de texto de la siguiente manera:
- Título Nivel de encabezado: H2
- Fuente del título: Titillium Web
- Peso de la fuente del título: semi negrita
- Alineación del texto del título: Centro
- Tamaño del texto del título: 36 px (escritorio), 28 px (teléfono)
- Altura de la línea de título: 1,5 em
- Altura de la línea del cuerpo: 2em
Agregar fila para el botón CTA
Debajo de la fila que contiene la propaganda que acabamos de crear, agregue una nueva fila de una columna.
Es importante obtener la configuración de fila correcta para que la funcionalidad de los botones adhesivos se alinee correctamente.
Abra la configuración de la fila y actualice lo siguiente:
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 1400px (escritorio), 100% (tableta)
Agregar botón de llamada a la acción
Dentro de la nueva fila, agregue un módulo de llamada a la acción. La actualización lo siguiente:
- Solo vamos a necesitar el elemento de botón dentro de este módulo para poder deshacernos del Título y el texto del cuerpo.
- Asegúrese de agregar una URL de enlace de botón (‘#’ servirá por ahora) para que el botón sea visible cuando diseñe el diseño. Siempre puedes actualizar esto más tarde.
- Desactive la opción «Usar color de fondo».
(NOTA: todavía no podrá ver el botón blanco sobre un fondo blanco, pero eso cambiará en el próximo paso)
En la pestaña de diseño, actualice los siguientes estilos de botones:
- Tamaño del texto del botón: 14 px (escritorio), 11 px (teléfono)
- Color del texto del botón: #1b1f50
- Color de fondo del botón: #09d5fe
- Ancho del borde del botón: 0px
- Espaciado entre letras de botones: 2px
- Fuente del botón: Titillium Web
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: TT
- Relleno de botones: 1em arriba, 1em abajo
Continúe actualizando el diseño de la siguiente manera:
- Ancho: 33,33%
- Alineación del módulo: centro
- Relleno: 0px arriba, 0px abajo
El 33,33 % del ancho del botón permitirá que el botón ocupe exactamente 1/3 de la ventana del navegador cuando esté en la posición fija. Combinar esto con otros dos botones (cada uno con el mismo 33,33 % de ancho) dará como resultado una barra de menú completa de CTA.
En la pestaña Avanzado, agregue el siguiente fragmento de CSS personalizado a la Descripción de la promoción (tiene espacios innecesarios que no necesitamos):
|
01
|
display:none; |
Luego agregue otro fragmento del Botón de promoción:
|
01
|
display:block; |
Hacer el botón pegajoso
Para hacer que el botón sea fijo, vamos a utilizar la opción de posición fija para pegar el botón y la parte superior e inferior de la ventana del navegador. También vamos a agregar un desplazamiento para el encabezado fijo predeterminado de Divi.
Actualice lo siguiente:
- Posición pegajosa: adhiérase a la parte superior e inferior
- Desplazamiento superior fijo: 54 px (escritorio), 0 px (tableta)
- Desplazamiento de los elementos pegajosos circundantes: NO
Con nuestra posición fija en su lugar, ahora podemos apuntar al estilo del botón en el estado fijo. En este caso, queremos mover el botón hacia la izquierda para dejar espacio para botones adhesivos adicionales más adelante.
Actualice el siguiente estilo de transformación en el estado fijo:
- Transformar Traducir eje X (pegajoso): -100%
Esto moverá el botón una distancia igual al ancho exacto del botón (que es 33,33 %) una vez que se pegue a la parte superior o inferior de la página.
Llamada a la acción del edificio n.° 2
Ahora que tenemos una sección completa con un botón CTA fijo que funciona, podemos duplicar la sección anterior y hacer ajustes menores al botón.
Primero, duplica la sección.
Abra la configuración del módulo Llamado a la acción en la nueva sección y actualice las opciones de transformación de la siguiente manera:
- Transformar Traducir eje X (Sticky): 0px
En realidad, esto es solo restaurarlo al estado predeterminado porque no queremos mover este botón, ya que debe permanecer en el centro.
Llamada a la acción del edificio n.º 3
Para construir la tercera sección de CTA, duplique la sección anterior.
Luego abra la configuración del módulo Llamado a la acción en la nueva sección y actualice las opciones de transformación de la siguiente manera:
- Transformar Traducir eje X (Adherible): 100%
Esto moverá el botón hacia la derecha una distancia igual al ancho exacto del botón (que es 33,33 %) una vez que se pegue a la parte superior o inferior de la página.
Actualizar texto y colores del botón
Para pulir el diseño, actualice el texto y los colores del botón CTA para que coincidan con el diseño de su sitio. Aquí están los ajustes para este ejemplo:
Para la llamada a la acción n.º 2…
- Texto del botón: Ver nuestros planes
- Color del texto del botón: #ffffff
- Color de fondo del botón: #1b1f50
Para la llamada a la acción n.° 3…
- Texto del botón: Chatea con nosotros
- Color del texto del botón: #ffffff
- Color de fondo del botón: #4328b7
Agregar margen temporal a la sección superior e inferior para probar la funcionalidad
En un sitio web normal, estos CTA residirían en algún lugar del medio de la página, por lo que hay espacio adicional para desplazarse hacia arriba y hacia abajo en la página. Por ahora, podemos agregar un margen temporal a las secciones superior e inferior de la página.
En la sección superior, agregue un margen superior de 90vh.
En la sección inferior, agregue un margen inferior de 90vh.
Resultado final
Ahora veamos el resultado final.
Pensamientos finales
Este tutorial le muestra una forma creativa de mantener esos CTA importantes a la vanguardia para que los usuarios puedan hacer clic en ellos cuando lo deseen. También agrega una microinteracción sutil que atrae aún más la atención hacia ellos sin distraerlos del contenido principal de la página. Con suerte, esto ayudará a que fluyan esos jugos creativos para que pueda experimentar con más diseños para hacerlo aún mejor.
Espero escuchar de usted en los comentarios.
¡Salud!