Crear un botón de desplazamiento personalizado en su encabezado de pantalla completa es un gran impulso de diseño para mejorar la experiencia del usuario, lo que le permite desplazarse a la siguiente sección de su página sin tener que desplazarse. Agregar una animación llamativa a su botón también puede mejorar sus conversiones. Divi ya tiene un botón de desplazamiento incorporado para facilitarle las cosas al agregar esta función en los encabezados de ancho completo. Pero hoy pensé en mostrarles cómo usar el módulo de botones para lograr la misma funcionalidad con algunas características de diseño moderno.
En este tutorial, le mostraré cómo convertir un módulo de botón en un botón de desplazamiento personalizado que aparece en la parte inferior de la pantalla cuando carga la página. También daré algunos consejos de diseño en el camino para inspirarme.
Empecemos.
Aquí hay un vistazo al diseño que construiremos juntos.
Mira cómo aparece la CTA para obtener más información al cargar la página y se desplaza a la siguiente sección cuando se hace clic.
Divi es todo lo que necesitas para este tutorial
Para este tutorial, todo lo que necesitas es Divi. Usaré una imagen de uno de los paquetes de diseño, algo de magia de diseño con el generador visual y algunos fragmentos CSS personalizados para agregar un toque final a nuestro botón de desplazamiento.
Diseño del encabezado de pantalla completa
Para diseñar el encabezado de pantalla completa, cree una nueva página e implemente el generador visual. Luego agregue una sección de ancho completo con un módulo de encabezado de ancho completo.
A continuación, actualice la configuración del encabezado de ancho completo de la siguiente manera:
Título: [ingresar título]
Botón #1 Texto: [ingresar texto]
Contenido: [ingresar contenido]
Color de fondo: #0a2f5e
Imagen de fondo: [ingresar imagen de 800×500]
Tamaño de imagen de fondo: Tamaño real
En la pestaña de diseño, cambie el diseño a la orientación centrada y seleccione para que sea de pantalla completa.
Orientación de texto y logo: Centro
Hacer pantalla completa: SÍ
Dale a tu encabezado un color de superposición para que puedas leer tu texto más fácilmente.
Color de superposición de fondo: rgba (10,47,94,0.8)
Luego, diseñe el texto del título, el texto del contenido y el botón n. ° 1 con la siguiente configuración:
Fuente del título: Poppins
Peso de la fuente del título: Semi negrita
Tamaño del texto del título: 4vw
Altura de la línea del título: 1,2 em
Fuente de contenido: Karla
Peso de fuente de contenido: Regular
Tamaño de texto de contenido: 16 px
Altura de línea de contenido: 1,5 em
Usar estilos personalizados para el botón uno: SÍ
Tamaño del texto del botón uno: 18 px
Color de fondo del botón uno: #4daaf2
Color del borde del botón uno: #4daaf2
Radio del borde del botón uno: 100 px
Fuente del botón uno: Karla
Peso del botón uno: Negrita
Eso lo hará para nuestro encabezado de ancho completo. ¡Ahora las cosas divertidas!
Para este botón de desplazamiento, quiero que quede alineado en el lado izquierdo de la página. Así que agregue una fila de tres columnas a su sección.
Luego agregue un módulo de botón a la columna de la izquierda.
Actualice la configuración del módulo de botones de la siguiente manera:
Texto del botón: Más información
URL del botón: #dos
La URL #dos servirá como un enlace de anclaje a la parte superior de la siguiente sección que incluirá el ID de CSS correspondiente «dos». Esta es la funcionalidad básica de crear un botón de desplazamiento personalizado.
Usar estilos personalizados para el botón uno: SÍ
Tamaño del texto del botón: 24 px (escritorio), 20 px (tableta)
Color del texto del botón: #0a2f5e
Degradado de fondo del botón a la izquierda: #ffffff
Degradado de fondo del botón a la derecha: #dddddd
Dirección del degradado: 90 grados
Posición inicial: 70 %
Posición final: 0 %
Ancho del borde del botón: 0px
Radio del borde del botón: 0px
Fuente del botón: Karla
Grosor del botón:
Icono del botón en negrita: [flecha hacia abajo]
Mostrar solo el icono al pasar el mouse sobre el botón: NO
Relleno personalizado: 1,5 em superior, 1,5 em inferior, 30 % a la izquierda
Animación:
Dirección de animación de diapositivas: Arriba
En la pestaña Avanzado, agregue el siguiente css personalizado al cuadro de entrada del elemento principal:
|
01
|
display: block !important; |
Esto permite que el botón abarque todo el ancho de la columna.
Luego agregue el siguiente css al cuadro de entrada Después:
|
01
|
position: absolute; right: 12%; |
Esto coloca el icono de la flecha a la derecha del botón.
Guarde su configuración.
Personalizar la configuración de la sección
Ahora tenemos que personalizar la configuración de la sección para que el botón quede sobre la sección de ancho completo de arriba y obtener el espacio correcto.
Actualice la siguiente configuración de la sección:
Color de fondo: rgba(255,255,255,0)
Margen personalizado: -112 px superior
Relleno personalizado: 0 px superior 0 px inferior
Ajustar el espacio entre filas
Ahora también debemos ajustar el espacio entre filas. Actualice la siguiente configuración de fila.
Hacer esta fila de ancho completo: SÍ
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 1
Relleno personalizado: 0px superior, 0px inferior
Ahora echa un vistazo a la página en vivo. Verá un botón emergente en la parte inferior izquierda de su encabezado de pantalla completa cuando se carga la página.
Ahora que tenemos nuestro botón listo para desplazarse, agreguemos otra sección para crear una sección de desplazamiento única.
Cree una sección normal con una estructura de columna de un tercio y dos tercios.
Esta estructura de columnas es clave porque nos permitirá crear una columna izquierda del mismo tamaño que la que está directamente arriba con nuestro botón.
Ajustes de sección
Antes de comenzar a agregar módulos, primero actualicemos nuestra configuración para la sección con lo siguiente:
Color de fondo: #eaedf2
Relleno personalizado: 0px arriba, 0px abajo
En la pestaña Avanzado, agregue el ID de CSS personalizado «dos». Esto le permitirá desplazarse hasta la parte superior de esta sección.
Configuración de fila
Para acelerar las cosas, copie el estilo de fila de la fila que contiene el botón en la sección anterior. Luego pegue el estilo de fila para su nueva fila.
En la pestaña de contenido, actualice el color de fondo de la columna 1 a #ffffff. Esto servirá como fondo de su cuadro de menú debajo de su botón.
Luego actualice el siguiente relleno para sus columnas:
Relleno personalizado: 10 % en
la columna inferior 2 Relleno personalizado: 10 % en la parte superior, 10 % en la izquierda, 6 % en la derecha
Ahora estamos listos para agregar nuestro módulo de barra lateral a nuestra columna izquierda. Pero antes de hacerlo, debe crear un menú personalizado.
Por cuestiones de tiempo, les daré una breve explicación de cómo crear un menú. Aquí va:
- Vaya a Apariencia > Menús
- Haga clic en Crear nuevo menú
- Añadir título de menú
- Haga clic en el botón Crear menú
- Seleccione páginas, publicaciones, etc. que desee incluir en su menú. O crea enlaces personalizados.
- Organizar la estructura del menú
- Menú Guardar
Siga estos pasos para crear un widget de menú de navegación para que podamos agregarlo a nuestra página a través del generador visual.
- Vaya a Apariencia > Widgets
- Cree una nueva área de widget ingresando el nombre del widget y haciendo clic en el botón Crear
- Arrastre el widget del menú de navegación a la nueva área de widgets que creó.
- Alterne, abra la configuración del widget y seleccione el menú que acaba de crear.
- Clic en Guardar
Ahora podemos volver a nuestra página e implementar el generador visual.
En la columna izquierda de nuestra sección inferior, agregue un módulo de barra lateral.
Actualice la barra lateral para incluir el área de widgets que acaba de crear:
Ahora puede hacer coincidir el diseño de los enlaces de su menú con el diseño actualizando las siguientes configuraciones de diseño:
Mostrar separador de borde: NO
Fuente del cuerpo: Karla
Fuente del cuerpo: Negrita
Color del texto del cuerpo: #0a2f5e
Tamaño del texto del cuerpo: 24 px (escritorio), 20 px (tableta)
Altura de la línea del cuerpo: 2,3 em
Relleno personalizado: 20 px arriba, 10 % abajo, 30 % a la izquierda
El relleno izquierdo del 30 % es útil para alinearse con el texto del botón de arriba, que también tiene un relleno izquierdo del 30 %.
Sombra de cuadro: [ver captura de pantalla]
Posición horizontal de sombra de cuadro: 0px
Posición vertical de sombra
de cuadro: 0px Fuerza de desenfoque de sombra de cuadro: 0px
Fuerza de propagación de sombra de cuadro: 1px
Color de sombra: #f1f1f1
Esta es una forma creativa de agregar un borde fuera de nuestro cuadro y agregar una ligera separación entre el botón de desplazamiento y el cuadro de menú.
Agregar contenido a la columna derecha
En la columna de dos tercios de la derecha de la sección, agregaremos algo de contenido para darle una idea de cómo usa este diseño para su propio sitio web.
Primero, agregue un módulo divisor con la siguiente configuración:
Color: #0a2f5e
Posición del divisor: Centrado verticalmente
Peso del divisor: 2 px
Altura: 18 px
Ancho: 100 px
Debajo del Módulo divisor, agregue un módulo de texto con el siguiente contenido:
|
01
|
<h2>01. About</h2> |
Luego actualice la configuración de diseño de la siguiente manera:
Fuente del encabezado 2: Poppins
Color del texto del encabezado 2: #0a2f5e
Tamaño del texto del encabezado 2: 18 px
Margen personalizado: -17 px
Relleno personalizado superior: 120 px a la izquierda
Sugerencia: para que el divisor quede a la izquierda y centrado verticalmente en el encabezado, haga coincidir la altura del divisor (18 px) con el valor en px del texto del encabezado (18 px). Luego use el margen personalizado para mover el encabezado hacia arriba la misma cantidad de píxeles (menos uno para tener en cuenta el ancho de la línea divisoria) usando el valor de píxel negativo (-17px). Después de eso, proporcione a su encabezado suficiente relleno izquierdo para dar cuenta de la longitud de 100 px de la línea divisoria (120 px).
Luego agregue otro módulo de texto debajo con la siguiente configuración:
Contenido:
|
01
02
|
<h3>Vivamus suscipit tortor eget felis porttitor volutpat.</h3><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p> |
Fuente de texto: Karla
Text Tamaño de texto: 16px
Altura de línea de texto: 1,6em
Fuente del encabezado 3: Poppins
Peso de la fuente del encabezado 3: Semi negrita
Color del texto del encabezado 3: #0a2f5e
Tamaño del texto del encabezado 3: 3vw (tableta), 40px (tableta)
Altura de la línea del encabezado 3: 1,2 em
Relleno personalizado: 5 % superior, 2 % inferior
Guardar ajustes.
Crear la última sección
Para crear la última sección, siga estos pasos:
- Duplica la última sección.
- Actualice el color de fondo de la sección a #ffffff
- Cambie la columna de fila a la estructura de dos tercios y un tercio.
- En la configuración de la fila, cambie el relleno superior personalizado al 10 %.
- Agregar columna 1 Relleno personalizado: 10 % a la izquierda, 6 % a la derecha
- Restaure el relleno personalizado de la columna 2 a su valor predeterminado.
- Guardar ajustes.
- Elimine el módulo de la barra lateral en la columna izquierda.
- Mueva todos los módulos de la columna de la derecha a la columna de la izquierda y actualice el contenido.
- Luego agrega una imagen en la columna de la derecha.
Aquí el resultado final…
Para cambiar la ubicación de su botón, simplemente arrástrelo a una de las tres columnas de la fila. ¡Simple como eso!
Considere la aplicación generalizada
Este botón de desplazamiento personalizado con el cuadro de menú definitivamente debería hacerle pensar en todas las diferentes aplicaciones. Para empezar, puede complementar el menú en el cuadro debajo del botón de desplazamiento con cualquier cosa. Este sería un gran lugar para un formulario de contacto, suscripción de correo electrónico u otro llamado a la acción de algún tipo.
Aquí hay un ejemplo de cómo se vería una opción de correo electrónico…
Se ve muy bien en el móvil también
Este diseño se escala bastante bien en dispositivos móviles. El botón de desplazamiento simplemente escalará el ancho completo de la pantalla en tabletas y teléfonos inteligentes.
Pensamientos finales
Realmente disfruté construyendo este diseño y explorando las posibilidades que trae a la mesa. El botón de desplazamiento personalizado solo es una excelente manera de hacer que sus secciones de pantalla completa sean más prominentes. Espero que este diseño lo ayude a inspirarse para crear botones y CTA aún más exclusivos para su propio sitio web.
Espero escuchar de usted en los comentarios.
¡Salud!