Divi: cómo incluir un botón de desplazamiento hacia abajo en el módulo de encabezado de ancho completo

¿Le gustaría agregar a su módulo de encabezado de ancho completo de Divi un botón de desplazamiento hacia abajo?

El módulo de encabezado de ancho completo de Divi incluye un botón que le dice al usuario que puede desplazarse hacia abajo. Una vez que hacen clic en él, se les redirige automáticamente a la siguiente sección. Es un botón simple con múltiples íconos para elegir, y su color y tamaño son totalmente personalizables. 

En este artículo, veremos cómo personalizarlo y veremos cuatro botones de desplazamiento hacia abajo que puede incluir en su módulo de encabezado de ancho completo. También veremos cómo personalizarlo con CSS para obtener aún más opciones de diseño.

¡Empecemos!

Descripción general de los botones de desplazamiento hacia abajo

Primero, veamos los diseños que crearemos en este artículo.

Ejemplo 1

Ejemplo 2

Descarga DIVI ahora!!!

Ejemplo 3

Ejemplo 4

Descarga DIVI ahora!!!

Botones de desplazamiento hacia abajo Diseño de encabezado de ancho completo

Primero, crearemos nuestro diseño de encabezado de ancho completo. Lo estoy construyendo desde cero usando diseños de la paquete de diseño de terapia gratuito disponible en Divi . Cree una nueva página y agregue un módulo de encabezado de ancho completo a una nueva sección de ancho completo.

Ver también: Divi: Cómo crear un organigrama con el módulo de Blurb

Divisor de sección de ancho completo

Agregaremos un divisor para este encabezado de ancho completo. Abra la configuración de la sección de ancho completo .

Luego, desplácese hacia abajo hasta Divisor . Haga clic en la pestaña Fondo y elija el octavo estilo de separador. Establezca el color en #e8e5f8 e ingrese 0vw para la altura. Cierra la configuración de la sección.

• Divisores: Bajo
• Estilo: octavo estilo
• Color: #e5e8f0
• Altura: 10vw

Texto de cabecera

A continuación, abra el módulo Encabezado de ancho completo y agregue el título, subtítulo y texto del botón. Elimine el texto ficticio del contenido del cuerpo y dejarlo vacío.

• Título: Comience su viaje para sentirse mejor hoy.
• Subtítulo: Leslie Saindon, terapeuta licenciada
• Botón #1: Hacer una cita
• mono: ninguno

Imágenes de encabezado

Desplazarse hasta Imágenes y elige una imagen de encabezado. Elijo una imagen provista con el Paquete de diseño de terapia.

Fondo del encabezado

Desplazarse hasta Antecedentes. Eliminar color de fondo y seleccionar pestaña Gradiente de fondo.

• Paradas de gradiente:
  • 25%: #2e5b61
  • 100 %: RGBA (46, 91, 97, 0,5)

permitir Coloque el degradado sobre la imagen de fondo. .

• Gradiente cuadrado sobre la imagen de fondo: SÍ

Imagen de fondo del encabezado de ancho completo

Luego seleccione elFicha Imagen de fondo y elija una imagen de pantalla completa. Estoy usando otra imagen del paquete de diseño de terapia.

• Posición de la imagen de fondo: centro superior

Diseño de encabezado de ancho completo

Luego seleccione elpestaña de diseño y activar Hacer pantalla completa .

• Hacer pantalla completa: SÍ

Icono de desplazamiento hacia abajo del encabezado de ancho completo

Entonces activa Mostrar botón de desplazamiento hacia abajo. Le daremos estilo a este botón en nuestros ejemplos, por lo que lo dejaremos en la configuración predeterminada por ahora.

• Mostrar botón de desplazamiento hacia abajo: SÍ

Imagen de cabecera

Luego, desplácese hacia abajo hasta Imagen y cambie las esquinas redondeadas superiores izquierdas a 200 px para escritorios. Establezca el resto de las esquinas redondeadas en 0px. Cambie las esquinas redondeadas a 100 píxeles para tabletas y teléfonos.

• Esquinas redondeadas de la imagen:
  • Escritorio: 200 px arriba a la izquierda, 0 px todos los demás
  • Tableta y teléfono: 100 px arriba a la izquierda, 0 px todos los demás

Texto del título del encabezado

Luego, desplácese hacia abajo hasta Texto del título. Utilice H1 para el nivel de rumbo. Elija Cormorant Garamond para la fuente del título, establezca el grosor en Negrita y el color en #e1ecea.

• Título:
  • Nivel de título: H1
  • Fuente: Cormorant Garamond
  • Peso de fuente: Negrita
  • Color del texto: #e1ecea

Luego establezca el taille para los tres tamaños de pantalla. Use 90 píxeles para computadoras de escritorio, 40 píxeles para tabletas y 24 píxeles para teléfonos. Cambie la altura de la línea a 1.1 em.

• Tamaño del texto del título: 90 px, 40 px, 24 px
• Altura de la línea del título: 1,1 cm

Texto de subtítulo de encabezado de ancho completo

Luego, desplácese hacia abajo hasta Texto del subtítulo. Cambia la fuente a Inter, el peso a negrita y el color a #e1ecea.

• Subtítulo:
  • Fuente: Inter
  • Peso de fuente: Negrita
  • Color del texto: #e1ecea

Selecciona el taille a 22 px para computadoras de escritorio, 20 px para tabletas y 16 px para teléfonos. Cambialo altura de la fila a 1,6 em.

• Tamaño del texto del subtítulo: 22 px, 20 px, 16 px
• Altura de línea de subtítulos: 1,6 em

botón de encabezado

Desplácese hacia abajo hasta Configuración Botón uno y activar Usar estilos personalizados para el botón uno . Cambia el tamaño a 14px, el color del texto a #2e5b61 y el color de fondo a #e1ecea.

• Usar estilos personalizados para el botón uno: SÍ
• Botón uno
  • Tamaño del texto: 14px
  • Color del texto: #2e5b61
  • Fondo: #e1ecea

Cambiar el ancho de la frontera a 0px y el radio de la frontera a 50px. Use Inter para la fuente y cambie el peso a semi-negrita.

• Botón uno:
  • Ancho del borde: 0px
  • Radio del borde: 50px
  • Fuente: Inter
  • Peso: Negrita

Para el Acolchado de botones , use 20 px para Arriba y Abajo y 40 px para Izquierda y Derecha.

• Relleno del botón uno: 20 px arriba y abajo, 40 px a la izquierda y a la derecha

Lea también: Divi: Cómo crear una sección de Fluid Hero

Ejemplos de botones de desplazamiento hacia abajo

Ahora que tenemos nuestro encabezado de ancho completo, veamos cómo personalizar los botones de desplazamiento hacia abajo. Veremos cuatro ejemplos con varias combinaciones de iconos, colores y tamaños.

Los botones de desplazamiento hacia abajo incluyen tres parámetros. Cada configuración se puede ajustar de forma independiente para cada tamaño de pantalla. Los parámetros incluyen:

• Selección de iconos – elige entre 11 iconos. Incluyen varios diseños de flechas con o sin fondo, incluidos sin círculo, con círculo y sólido.
• Color – el selector de color Divi estándar.
• Tamaño español – el ajuste de tamaño Divi estándar.

También incluye un campo CSS en la pestaña Avanzado. 

Usaremos todos estos parámetros.

Ver también: Divi: 5 superposiciones de máscaras y patrones aplicables a una imagen de fondo

Ejemplo 1

Para nuestro primer ejemplo, usaremos un icono sin círculo y sin fondo. Seleccione el primer ícono, cambie el color a #e1ecea y cambie el tamaño a 66 px para computadoras de escritorio, 60 px para tabletas y 50 px para teléfonos.

• Icono: 1er icono
• Color: #e1ecea
• Tamaño: 66 px (escritorio y tableta), 50 px (teléfono)

Esto crea una flecha hacia abajo de color verde claro que funciona bien con el resto del diseño y se destaca lo suficiente como para informar al usuario.

Ejemplo 2

Para nuestro segundo ejemplo, usaremos un ícono dentro de un círculo. Seleccione el séptimo icono y cambie el color a #e8c553. Vamos a ampliar el icono de este. Cambie el tamaño a 78 px para computadoras de escritorio, 70 px para tabletas y 60 px para teléfonos.

• Icono: 7mo icono
• Color: #e8c553
• Tamaño: 78 px (escritorio), 70 px (tableta), 60 px (teléfono)

Este color es una variación del amarillo en el paquete de diseño, pero es más claro y funciona mejor en el fondo verde. El icono tiene esquinas afiladas, pero el círculo coincide con el diseño redondeado del diseño.

Ejemplo 3

Para nuestro tercer ejemplo, usaremos un ícono que tiene un círculo alrededor y un fondo. Esto colorea el fondo y crea el ícono con una abertura que revela la imagen de fondo del Sitio web. 

Para obtener los mejores resultados, debemos prestar mucha atención al tamaño del ícono y al color de fondo del botón.

Seleccione el octavo icono y cambie su color a #0e4951. Establezca el tamaño en 60 px para computadoras de escritorio, 56 px para tabletas y 50 px para teléfonos.

• Icono: octavo icono
• Color: #0e4951
• Tamaño: 60 px (escritorio), 56 px (tableta), 50 px (teléfono)

El verde es un tono más oscuro de verde en el fondo. El tono más oscuro se destaca contra el verde y aún coincide con el resto del diseño.

Ejemplo 4

¿Qué sucede si desea combinar colores para tener un color de fondo detrás del ícono recortado? Podemos hacer esto con CSS. 

Para este ejemplo, usaremos CSS para crear una forma de fondo detrás del ícono que se mostrará a través del ícono recortado. El icono en sí utilizará la configuración estándar.

Selecciona el undécimo icono y cambia el color a #e1ecea. Estableceremos el ícono más pequeño para este y crearemos una forma de fondo grande. Cambie el tamaño a 50 px para computadoras de escritorio, 40 px para tabletas y 30 px para teléfonos.

• Icono: 11^º
• Color: #e1ecea
• Tamaño: 50 px (escritorio), 40 px (tableta), 30 px (teléfono)

Luego ve a la pestaña Avanzado y desplácese hasta el campo Botón de desplazamiento hacia abajo e ingrese este CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Este formato CSS agrega relleno en la parte superior, derecha, inferior e izquierda. Usé este relleno para crear un óvalo de fondo que combina bien con el diseño del encabezado utilizando las guías de diseño de diseño.

Resultados de los diversos ejemplos.

Ejemplo 1

Ejemplo 2

Descarga DIVI ahora!!!

Ejemplo 3

Ejemplo 4

Descarga DIVI ahora!!!

Conclusión

Esta es nuestra descripción general de los cuatro botones de desplazamiento hacia abajo que puede incluir en su módulo Divi de encabezado de ancho completo. El botón de desplazamiento incluye varios iconos para elegir y puede configurar su color y tamaño. 

Al usar el campo CSS, puede personalizar aún más el botón. Las combinaciones de opciones de diseño de botones y CSS le brindan muchas posibilidades de diseño con sus botones de desplazamiento hacia abajo.

Espero que esto sea útil para su próximo blog. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo

También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.

No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...