Un título simple es un bloque de texto en un estilo. Un encabezado dual divide ese título en dos partes que puedes diseñar por sí solo, de modo que las primeras palabras y las segundas palabras obtienen cada una su propio color, fondo y tipografía. Así es como se construye un título de dos tonos Complementos maestros en un color al lado Para Elementor en otro, sin tocar CSS personalizado.
El Widget de doble encabezado en Complementos maestros para Elementor incluye ambas partes, un subtítulo opcional y un ícono opcional en un solo widget. Esta guía cubre todas las configuraciones en las pestañas Contenido y Estilo, utilizando el mismo widget que se envía gratis con complementos maestros.
Esto es lo que terminarás con un encabezado de dos colores con un ícono encima y un subtítulo debajo:
Antes de comenzar #
- Elementor instalado y activo
- Complementos maestros para Elementor instalados y activos (guía de instalación)
- Una página o plantilla abierta en el editor Elementor
Paso 1: agregue el widget de encabezado dual #
En el editor Elementor, abra el panel de widgets y busque Doble título. Arrástrelo a su página. Los widgets de complementos maestros llevan la insignia “MA”, por lo que son fáciles de detectar en la lista. Una vez que está en la página, el editor abre el archivo Editar encabezado dual panel a la izquierda con tres pestañas: Contenido, Estilo y Avanzado.
Paso 2: establezca el contenido #
El Contenido tab es donde escribes el texto y eliges el diseño básico. Qué hace cada campo:
- Estilo preestablecido elige un look ya preparado para las dos partes. Cambiar ajustes preestablecidos cambia la forma en que se ubican juntos el primer y segundo título.
- Alineación establece todo el bloque a izquierda, centro o derecha.
- Primer título es la primera parte del título (por ejemplo, “Complementos maestros”).
- Segundo título es la segunda parte (“Para Elementor”). Esta suele ser la parte que resaltas con un color diferente.
- Url de encabezado hace que todo el título sea un enlace, útil para las secciones de héroes.
- Subtítulo es la línea de descripción que se encuentra debajo del título.
- Habilitar icono enciende un icono encima del encabezado.
- Etiqueta de encabezado establece la etiqueta HTML, H1 a H6. Utilice H1 para el título principal de una página y H2 para los títulos de las secciones para que la página mantenga una estructura de encabezado limpia.
Paso 3: agregue un ícono (opcional) #
Voltear Habilitar icono a Sí y un Icono aparece el campo. Elija cualquier icono de la biblioteca o cargue su propio SVG. Paquetes de complementos maestros 8 bibliotecas de iconos premium, entonces hay miles para elegir sin salir de Elementor. El icono se encuentra encima del encabezado y sigue la misma alineación que configuró anteriormente.
Paso 4: diseñe el primer y segundo título #
Cambiar al Estilo pestaña. Aquí es donde el encabezado dual gana su nombre. Obtienes secciones separadas para Primer título y Segundo título, cada uno con sus propios controles:
- Color del texto por esa parte del título
- Antecedentes color detrás de esa parte (esto es lo que crea el aspecto en caja de dos tonos)
- Tipografía para familia de fuentes, tamaño, peso y espaciado
- Acolchado y Margen para controlar el espaciado alrededor de cada parte
Dado que las dos secciones son independientes, puedes darle a la primera parte un fondo oscuro y a la segunda uno rojo, o combinar exactamente los colores de tu marca. Establezca el fondo del segundo encabezado con un acento de marca y obtendrá el efecto de palabra resaltada que la gente usa en las secciones de héroe. Una cosa a tener en cuenta: si las dos partes usan un relleno diferente, pueden verse desiguales, así que establezca ambos lados con el mismo valor cuando desee que las cajas se alineen.
Paso 5: diseñe el subtítulo #
El Descripción la sección estiliza la línea de subtítulo debajo del título. Obtienes Color del texto, Tipografía, y lo mismo Acolchado y Margen controles. Deje caer el color a un gris más suave para obtener un subtítulo normal o combínelo con uno de los colores del encabezado para unir el bloque.
Paso 6: diseña el icono #
Si encendió el ícono, el Estilo icono la sección lo controla. Establecer el Tamaño del icono en píxeles con el control deslizante y elija un Color del icono para ambos el normalidad y Flotar estados. Un color flotante separado es un buen toque cuando todo el encabezado es un enlace.
Cuando el encabezado parezca correcto, haga clic Publicar (o Actualizar) para guardar la página.
Donde ayuda el widget de encabezado dual #
- Secciones de héroes, donde un título de dos colores llama la atención sobre la parte que importa.
- Títulos de sección para eso es necesario una palabra resaltada, como “Nuestra Mejor Trabaja”.
- Páginas de aterrizaje, emparejar un título en negrita con un subtítulo compatible en un widget.
- Precios o bloques de funciones, donde el estilo en caja de dos tonos enmarca el titular.
Preguntas frecuentes #
¿qué es el widget de encabezado dual en Elementor?
Es un widget de complementos maestros que divide un encabezado en dos partes que puedes diseñar por separado. Cada parte tiene su propio color, fondo y tipografía, por lo que puedes crear un título de dos colores sin escribir ningún CSS.
¿cómo hago un encabezado de dos colores en Elementor?
Agregue el widget Master Addons Dual Heading, escriba su texto en Primer encabezado y Segundo encabezado, luego abra la pestaña Estilo y establezca un color o fondo de texto diferente para cada parte. Eso te da un encabezado de dos colores.
¿Puedo agregar un subtítulo y un ícono al encabezado?
Sí. El campo Sub Encabezado agrega una línea de descripción debajo del título y el interruptor Habilitar icono coloca un icono encima. Ambos tienen sus propios controles de estilo en la pestaña Estilo para color, tamaño y tipografía.
¿Qué etiqueta de encabezado debo usar?
Establezca la etiqueta de encabezado en H1 para el título principal de una página y en H2 para los títulos de las secciones. Hacer coincidir la etiqueta con el rol del encabezado mantiene limpia la estructura de su página, lo que ayuda tanto a los lectores como a los motores de búsqueda.
¿necesito Elementor Pro para el widget de encabezado dual?
No. El widget Dual Heading funciona con la versión gratuita de Elementor, por lo que todo su contenido y configuración de estilo están disponibles sin Elementor Pro.
