¿Le gustaría personalizar el módulo de encabezado de ancho completo de Divi equilibrando los botones primario y secundario?
El modulo Divi Encabezado de ancho completo hace que sea fácil agregar hermosas secciones de héroes a su Sitio web. El módulo viene con dos botones, texto de título, texto de subtítulo, texto del cuerpo, logotipo e imagen, lo que hace que las opciones de personalización sean infinitas.
En el artículo de hoy, le mostraremos cómo recrear secciones de héroe usando el Encabezado Divi de ancho completo. Comenzaremos nuestro diseño usando 3 paquetes de diseño prefabricados y diseñaremos nuestras secciones con un enfoque en el balance de botones primarios y secundarios.
Queremos que el botón principal se destaque porque es nuestra principal llamada a la acción, al mismo tiempo que mantenemos el botón secundario visible y accesible sin sobrepasar al botón principal.
Principios del diseño de botones primarios y secundarios
Guía de ayuda de botones primarios y botones secundarios visitantes de su Sitio web a determinadas acciones. Los botones primarios suelen ser la acción más común o deseada y los botones secundarios son una acción menos común. Esto ayuda a guiar el visitantes a donde quieren ir.
Para hacer esto, los botones primarios deben resaltar visualmente y los botones secundarios no deben resaltar tanto. Esto significa que los botones principales deben ser más distintivos y tener más peso visual para llamar más la atención.
Ahora que entendemos cómo funcionan los botones primario y secundario, ¡vamos al tutorial!
vista
He aquí un vistazo a los tres encabezados de ancho completo que diseñaremos hoy.
Comencemos creando una nueva página con Divi Builder
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Lea también: Divi: Cómo usar máscaras y patrones de fondo para una sección de héroe
Diseño del primer ejemplo.
Ahora que nuestra página está configurada, comencemos con el encabezado de ancho completo de una página de destino de UX.
Configurando nuestra página
Antes de que podamos comenzar a personalizar, necesitaremos cargar el paquete de diseño predefinido UX de la biblioteca Divi. Cuando active Visual Builder, verá aparecer tres opciones, seleccione Examinar diseños.
Paquete de diseño de carga
Para cargar el paquete de diseño de UX en tu página:
- En la pestaña "Diseños prefabricados", use la función de búsqueda para encontrar el paquete de diseño de UX.
- Una vez que lo encuentres, haz clic en él. Esto mostrará los detalles del diseño y las páginas disponibles.
- Cliquez sur Aterrizajey haga clic "Usar este diseño".
Recrearemos la sección superior del diseño como un módulo. Encabezado de ancho completo.
Eliminar la primera sección
Dado que vamos a recrear la primera sección usando el módulo Encabezado de ancho completo, necesitaremos eliminar esta sección. Coloca el cursor sobre la sección y haz clic en el icono de la papelera.
Agregar una sección de ancho completo
Antes de que podamos agregar el encabezado de ancho completo, debemos agregar una sección de ancho completo.
Haga clic en la flecha "+" para mostrar las secciones Divi y luego haga clic en "Ancho completo". Esto abrirá automáticamente la biblioteca Divi Fullwidth Module.
Agregar un encabezado de ancho completo
En la biblioteca de módulos Divi Fullwidth, haga clic en " Encabezado de ancho completo".
Agregar contenido
Antes de comenzar a personalizar el módulo, agreguémoslo. contenido requerido para este módulo.
Agregar contenido de texto
En la pestaña Texto, agregue el contenido subsiguiente:
- Título: Mejore su conocimiento de diseño de UX
- Subtítulo: Curso de Diseño UX
- Botón #1: Resumen del curso
- Botón #2: Más información
- Cuerpo: predeterminado
Añadir Imágenes
Ahora que tenemos nuestro contenido texto en su lugar, necesitamos agregar dos imágenes a nuestro diseño.
- En la pestaña Imágenes, agregue la imagen del logotipo (las estrellas) y la imagen del encabezado (la foto de la persona que sostiene un teléfono).
Cambiar color de fondo
En la pestaña Antecedentes, configure este parámetro:
- Color de fondo: #131517
Personalizar encabezado de ancho completo
Ahora que nuestro contenido está configurado, agreguemos algo de estilo a través del Diseño.
Icono de desplazamiento hacia abajo
Agreguemos el icono de desplazamiento hacia abajo, la flecha hacia abajo.
- Mostrar botón de desplazamiento hacia abajo: SÍ.
- Seleccione el icono de flecha hacia abajo.
- Color del icono de desplazamiento hacia abajo: #000
Imagen
Agreguemos curvas a nuestras imágenes redondeando las esquinas.
En la pestaña Imagen, configure los siguientes ajustes:
- Esquinas redondeadas de la imagen : Haga clic en el botón de enlace de la cadena para desvincular las esquinas, luego escriba 1000 px en los cuadros de entrada de abajo a la izquierda y abajo a la derecha. Esto redondeará las esquinas inferior izquierda e inferior derecha de nuestras imágenes.
Texto del título
Aquí, vamos a personalizar el texto del título de este módulo. en la pestaña Texto del título, configure estos ajustes:
- Título:
- Fuente: PT Sans
- Peso de fuente: Negrita
- Tamaño del texto: 5 rem
- Altura de la línea: 1,2 cm
El cuerpo del texto
Aquí es donde personalizamos el texto del cuerpo de este módulo. en la pestaña Cuerpo de texto, configure estos ajustes:
- Fuente del cuerpo: Mukta
- Tamaño del cuerpo del texto: 18px
Texto del subtítulo
Aquí es donde personalizamos el texto del título para este módulo. en la pestaña Texto del subtítulo, configure estos ajustes:
- Subtítulo:
- Fuente: Mukta
- Peso de fuente: Negrita
- Estilo: mayúscula
- Color del texto: #13d678
- Espaciado entre letras: 3px
botón uno
Aquí es donde podemos definir estilos personalizados para el botón uno: el botón principal. en la pestaña BotónUno, configure estos ajustes:
- Usar estilo personalizado para el botón uno: SÍ
- Botón uno:
- Color del texto: #ffffff
- Color de fondo: #13d678
- Ancho del borde: 0 píxeles
- Radio del borde: 100px
- Fuente: Mukta
- Peso de fuente: Negrita
- Mostrar icono de botón uno: SÍ
- Icono: Flecha derecha
- Mostrar solo el ícono al pasar el mouse sobre el botón uno: No
botón dos
Ahora, vamos a personalizar el segundo: el botón secundario. en la pestaña Botón dos, configure estos ajustes:
- Usar estilo personalizado para el botón: SÍ
- Botón dos
- Color del texto: #ffffff
- Color de fondo: #303030
- Ancho del borde: 0 píxeles
- Radio del borde: 100 píxeles
- Fuente: Mukta
- Peso de fuente: Negrita
- Mostrar el icono del botón dos: Sí
- Icono del botón dos: Flecha derecha
- Mostrar solo el icono en el botón flotante dos: SÍ
Agregar enlaces de botón
¡No olvide agregar enlaces a sus botones! en la pestaña Enlace, configure los siguientes ajustes:
- URL del enlace del botón n.° 1: pegue aquí la URL del botón 1.
- URL del enlace del botón n.° 1: pegue aquí la URL del botón 2.
Guarda tu trabajo
Ahora que tenemos nuestro encabezado de ancho completo completamente diseñado, ¡asegúrese de guardar su diseño!
- Haga clic en la flecha verde en la parte inferior derecha de la ventana del módulo.
- Guardar
- Salga de VisualBuilder.
Lea también: Divi: Cómo crear una sección de Fluid Hero
Diviértete experimentando
Las formas de personalizar el módulo Divi Fullwidth Header son infinitas. Aprovechar el botón principal y el botón secundario puede ayudar a dirigir su visitantes a la página que desea que vean o que realicen la acción (como enviar una solicitud) que desea que realicen.
Echemos un vistazo a dos ejemplos más de encabezados de ancho completo que tienen un botón principal que se destaca.
Encabezado de ancho completo del paquete "Centro de retiro"
Estilos de botones
Echemos un vistazo a los estilos únicos de botón primario y secundario.
botón uno
En la pestaña Button One, configure los siguientes ajustes:
- Usar estilos personalizados para el botón uno: SÍ
- Botón uno:
- Tamaño del texto: 14px
- Color del texto: #ffffff
- Color de fondo: #0a0a0a
- Ancho del borde: 0 píxeles
- Radio del borde: 10px
- Espaciado entre letras: 3px
- Peso de fuente: Negrita
- Estilo de fuente: TT
- Mostrar solo el ícono al pasar el mouse por botón uno: SÍ
- Relleno del botón uno: 15 px (superior e inferior), 25 px (izquierda y derecha)
botón dos
En la pestaña Botón dos, configure los siguientes ajustes:
- Usar estilo personalizado para el botón: SÍ
- Botón dos:
- Tamaño del texto: 14px
- Color del texto: #ffffff
- Color de fondo: #0a0a0a
- Ancho del borde: 0 píxeles
- Radio del borde: 10px
- Peso de fuente: Negrita
- Estilo de fuente: TT
- Relleno del botón dos: 10 px (inferior), 10 px (izquierda y derecha)
¡Y ahí lo tienes! Dos botones únicos, uno que destaca y otro que ocupa el segundo asiento.
Encabezado de ancho completo del paquete "Planificación financiera"
Estilos de botones
Echemos un vistazo a los estilos únicos de botón primario y secundario.
botón uno
En la pestaña Botón uno, configure los siguientes ajustes:
- Usar estilo personalizado para el botón uno: SÍ
- Botón uno:
- Tamaño del texto: 18px
- Color del texto: #ffffff
- Color de fondo: #1b4ffe
- Relleno: 15px () Superior e Inferior); 25px (izquierda y derecha)
botón dos
En la pestaña Botón dos, configure los siguientes ajustes:
- Usar estilo personalizado para el botón dos: SÍ
- Botón dos:
- Color del texto: #1b4ffe
- Color de fondo: transparente
- Color del icono: #1b4ffe
Descarga DIVI ahora!!!
Conclusión
El módulo de encabezado de ancho completo de Divi facilita la creación de impresionantes secciones de héroe en tu Sitio web.
El uso estratégico de los botones principales y secundarios mejorará su experiencia de usuario y ayudará a los visitantes del sitio web a realizar las acciones que desean realizar.
Las opciones de personalización son infinitas con el encabezado de ancho completo, ¡así que diviértete experimentando!
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.
...
