Un titre simple est un bloc de texte dans un style Un titre double divise ce titre en deux parties que vous pouvez styliser par eux-mêmes, de sorte que les premiers mots et les deuxièmes mots obtiennent chacun leur propre couleur, fond et typographie C'est comme ça que vous construisez un titre bicolore comme Additions maîtres dans une couleur à côté de Pour Elementor dans un autre, sans toucher au CSS personnalisé.
Le Widget double rubrique dans Modules complémentaires principaux pour Elementor regroupe les deux parties, un sous-titre facultatif et une icône facultative dans un seul widget. Ce guide couvre chaque paramètre des onglets Contenu et Style, en utilisant le même widget que celui livré gratuitement avec Master Addons.
Voici ce que vous allez finir avec, un titre bicolore avec une icône au-dessus et un sous-titre en dessous :
Avant de commencer #
- Élémenteur installé et actif
- Modules complémentaires principaux pour Elementor installés et actifs (guide d'installation)
- Une page ou un modèle ouvert dans l'éditeur Elementor
Étape 1 : Ajoutez le widget à double titre #
Dans l'éditeur Elementor, ouvrez le panneau du widget et recherchez Double rubrique. Faites-le glisser sur votre page Les widgets Master Addons portent le badge“MA”, ils sont donc faciles à repérer dans la liste Une fois qu'il est sur la page, l'éditeur ouvre le Modifier le double titre panneau à gauche avec trois onglets : Contenu, Style et Avancé.
Étape 2 : Définissez le contenu #
Le Contenu tab est l'endroit où vous tapez le texte et choisissez la mise en page de base. Ce que fait chaque champ :
- Style Préréglé choisit un look tout fait pour les deux parties La commutation des préréglages modifie la façon dont les premier et deuxième titres sont assis ensemble.
- Alignement définit l'ensemble du bloc à gauche, au centre ou à droite.
- Première rubrique est la première partie du titre (par exemple, “Master Addons”).
- Deuxième rubrique est la deuxième partie (“For Elementor”).C'est généralement la partie que vous mettez en surbrillance avec une couleur différente.
- URL de titre fait de l'ensemble du titre un lien, pratique pour les sections de héros.
- Sous-rubrique est la ligne de description qui se trouve sous le titre.
- Activer l'icône allume une icône au-dessus du titre.
- Étiquette de titre définit la balise HTML, H1 à H6. utilisez H1 pour le titre principal d'une page et H2 pour les titres de section afin que la page conserve une structure de titre propre.
Étape 3 : Ajouter une icône (facultatif) #
Retourner Activer l'icône à Oui et un Icône le champ apparaît Choisissez n'importe quelle icône dans la bibliothèque ou téléchargez votre propre SVG. Forfaits Master Addons 8 bibliothèques d'icônes premium(, il y a donc des milliers de choix sans quitter Elementor) L'icône se trouve au-dessus du titre et suit le même alignement que vous avez défini plus tôt.
Étape 4 : Stylez le premier et le deuxième titre #
Passer au Style onglet. C'est là que le double en-tête gagne son nom Vous obtenez des sections séparées pour Première rubrique et Deuxième rubrique1, chacun avec ses propres contrôles :
- Couleur du texte pour cette partie du titre
- Contexte couleur derrière cette partie (c'est ce qui crée le look bicolore en boîte)
- Typographie pour la famille de polices, la taille, le poids et l'espacement
- Rembourrage et Marge de contrôler l'écartement autour de chaque pièce
Puisque les deux sections sont indépendantes, vous pouvez donner à la première partie un fond sombre et à la seconde un fond rouge, ou faire correspondre exactement les couleurs de votre marque Réglez le fond de deuxième titre sur un accent de marque et vous obtenez l'effet de mot en surbrillance que les gens utilisent dans les sections de héros. Une chose à regarder : si les deux parties utilisent un rembourrage différent, elles peuvent paraître inégales, alors réglez les deux côtés sur la même valeur lorsque vous souhaitez que les boîtes s'alignent.
Étape 5 : Stylez le sous-titre #
Le Description la section stylise la ligne de sous-titre sous le titre Vous obtenez Couleur du texte, Typographie, et pareil Rembourrage et Marge contrôles. Déposez la couleur sur un gris plus doux pour un sous-titre normal, ou faites-la correspondre à l'une des couleurs de titre pour lier le bloc ensemble.
Étape 6 : Stylez l'icône #
Si vous avez allumé l'icône, le Style d'icône section le contrôle. Définissez le Taille de l'icône en pixels avec le curseur, et choisissez un Couleur d'icône pour les deux Normal et Survole états. Une couleur de vol stationnaire séparée est une belle touche lorsque tout le titre est un lien.
Lorsque le titre semble correct, cliquez Publier (ou Mise à jour) pour enregistrer la page.
Où le widget à double rubrique aide #
- Sections héros(en), où un titre bicolore attire le regard sur la partie qui compte.
- Titres de section il faut un mot en surbrillance, comme“Our Meilleur Travail”.
- Pages d'atterrissage: jumeler un titre en gras avec un sous-titre de support dans un widget.
- Tarification ou blocs de fonctionnalités« , où le style bicolore encadré encadre le titre ».
Foire aux questions #
Qu'est-ce que le widget Dual Heading dans Elementor ?
C'est un widget Master Addons qui divise un titre en deux parties que vous pouvez styliser séparément Chaque partie obtient sa propre couleur, son arrière-plan et sa typographie, de sorte que vous pouvez construire un titre en deux couleurs sans écrire de CSS.
Comment puis-je faire un titre bicolore en Elementor ?
Ajoutez le widget Master Addons Dual Heading, tapez votre texte dans First Heading et Second Heading, puis ouvrez l'onglet Style et définissez une couleur de texte ou un arrière-plan différent pour chaque partie Cela vous donne un titre bicolore.
Puis-je ajouter un sous-titre et une icône au titre ?
Oui. Le champ Sous-titre ajoute une ligne de description sous le titre, et la bascule Activer l'icône place une icône au-dessus. Les deux ont leurs propres commandes de style dans l'onglet Style pour la couleur, la taille et la typographie.
Quelle étiquette de titre dois-je utiliser ?
Définissez la balise d'en-tête sur H1 pour le titre principal d'une page et H2 pour les titres de section. Faire correspondre la balise au rôle de l'en-tête maintient la structure de votre page propre, ce qui aide à la fois les lecteurs et les moteurs de recherche.
Ai-je besoin d'Elementor Pro pour le widget Dual Heading ?
N° Le widget Dual Heading fonctionne avec la version gratuite d'Elementor, donc tous ses paramètres de contenu et de style sont disponibles sans Elementor Pro.
