Comment créer un superbe en-tête de thème Astra?

Les en-têtes sont essentiels pour tout contenu de votre page Web, car ils servent non seulement les lecteurs mais également les moteurs de recherche. Des en-têtes époustouflants et bien écrits ont le potentiel d'attirer les lecteurs vers votre publication et d'augmenter les clics. Les en-têtes peuvent aller de H1 à H6, selon la hiérarchie de votre contenu. Le titre principal de votre page ou de votre article est H1, tandis que H2 correspond aux sous-titres qui composent les sections de vos documents. Les en-têtes H3 à H6 fournissent des sous-titres supplémentaires dans votre document sous H2. Avant de passer à la façon dont le thème Astra peut vous aider à créer de superbes en-têtes dans votre contenu, considérons l'importance des en-têtes

Table des matières:

• Pourquoi les en-têtes sont-ils importants pour vos pages Web?
• 1. Identification du sujet
• 2. Accessibilité
• 3. Optimisation des moteurs de recherche
• 4. Rend les pages numérisables
• 5. Convivialité des appareils mobiles
• Comment créer un en-tête magnifique avec le thème Astra?
• Avantages et inconvénients de l'utilisation du thème Astra pour les en-têtes
• Mots finaux

Pourquoi les en-têtes sont-ils importants pour vos pages Web?

Voici pourquoi vous devez vous assurer d'inclure des en-têtes dans votre texte

1. Identification du sujet

Les en-têtes jouent un rôle essentiel pour que les moteurs de recherche et les lecteurs choisissent les mots-clés qu'ils recherchent dans l'article. L'en-tête principal du texte aide à identifier le sujet de la matière et les sous-titres permettent au lecteur d'accéder à son domaine d'intérêt.

2. Accessibilité

Aujourd'hui, les gens utilisent principalement des lecteurs d'écran pour parcourir n'importe quel contenu. Les en-têtes de tout contenu sont facilement récupérés par les lecteurs d'écran et sont essentiels pour utiliser efficacement les lecteurs d'écran. Ils permettent également aux lecteurs de passer d'une rubrique à une autre pour accéder au sujet souhaité.

3. Optimisation des moteurs de recherche

Lorsque les en-têtes rendent votre sujet identifiable, les moteurs de recherche classent votre page pour les requêtes de recherche. Plus vos en-têtes sont bien rédigés et remplis de mots-clés appropriés, plus les moteurs de recherche augmenteront votre classement.

Voici un guide sur l'utilisation des fonctionnalités gratuites du thème Astra pour créer de superbes en-têtes pour vos pages. Suivez la procédure pour créer un en-tête de votre choix.

4. Rend les pages numérisables

En utilisant des en-têtes, vous rendez les pages aussi numérisables que possible. Il est de notoriété publique que personne ne lit l'article en entier, surtout ligne par ligne. C'est pourquoi il est important que les pages aient des en-têtes. De tous les en-têtes, l'en-tête le plus important est le premier car il donne le ton à l'ensemble de la publication ou de la page.

Vient ensuite le sous-titre car il divise le contenu en morceaux qui sont meilleurs pour la consommation. Non seulement cela, la structure de l'article est indiquée par les en-têtes et sous-en-têtes. En bref, le bon ensemble d'en-têtes signifie que vous pouvez attirer le public avec votre contenu engageant.

5. Convivialité des appareils mobiles

Avec le temps, le mobile devient plus dominant que jamais. Il ne fait aucun doute que les sites recevront plus de trafic depuis les mobiles que jamais. Donc, si vous mettez votre contenu correctement, vous gagnerez forcément des spectateurs aussi bien sur mobile que sur ordinateur.

En bref, les en-têtes optimisent la page Web non seulement pour les lecteurs, mais également pour les moteurs de recherche.

Comment créer un en-tête magnifique avec le thème Astra?

Tout d'abord, pour accéder à Astra Header Builder, connectez-vous à votre tableau de bord WordPress et, dans la barre latérale gauche, accédez à Apparence > Options Astra > Header Builder comme indiqué dans l'image ci-dessous :

Cliquez dessus et cela vous mènera à la section Header Builder dans le personnalisateur WordPress. L'interface devrait ressembler à ce que nous avons ici :

Comme vous pouvez le voir, le générateur d'en-tête est divisé en trois sections verticales, l'une empilée l'une sur l'autre. Vous avez l'"en-tête principal" au milieu avec un "au-dessus de l'en-tête" en haut et "au-dessous de l'en-tête" en bas.  

Chaque en-tête a son propre ensemble de « paramètres d'en-tête », auxquels vous pouvez accéder en cliquant sur l'icône d'engrenage à gauche de l'en-tête.

À partir de là, vous pouvez personnaliser la hauteur de l'en-tête, la taille de la bordure, l'arrière-plan, le remplissage et la marge.

Notez également comment chaque en-tête est divisé en trois sections. Vous pouvez ajouter et supprimer des éléments d'en-tête de ces sections pour les rendre plus intéressantes. Au moment de la rédaction de ce tutoriel, vous avez accès à 12 éléments d'en-tête :

• Titre et logo du site
• Menu primaire
• Bouton 1
• Bouton 2 (pro)
• Chercher
• Compte
• HTML 1
• HTML2
• Menu secondaire
• Social
• Widget 1
• Widget 2
• Widget 3 (pro)
• Widget 4 (pro)
• Chariot

Maintenant, pour ajouter un nouvel élément d'en-tête, passez votre souris sur cette section et cliquez sur le bouton "+". Cela fera apparaître une liste des éléments disponibles. Choisissez celui que vous souhaitez utiliser et il sera ajouté à la section d'en-tête.

De même, cliquez simplement sur le bouton « x » à côté de l'élément d'en-tête pour supprimer un élément d'en-tête.

Vous pouvez également déplacer les éléments d'en-tête entre les sections d'en-tête par simple glisser-déposer.

Tous les éléments d'en-tête que vous avez utilisés apparaîtront dans le menu de gauche, juste sous l'onglet Général. Sous ici, vous trouverez également la possibilité de modifier le type d'en-tête. Les utilisateurs gratuits n'ont que l'option "En-têtes transparents". Cependant, si vous utilisez Astra Pro, vous pouvez activer « Sticky Headers ».

De là, vous pouvez accéder aux paramètres spécifiques de l'élément d'en-tête.

Juste à côté de l'onglet Général, nous avons l'onglet Conception. À partir de là, vous obtenez quelques options de conception de base pour modifier la largeur et la marge de l'en-tête. Des paramètres plus avancés sont disponibles pour les utilisateurs d'Astra Pro.

L'Astra Header Builder vous permet également d'affiner l'apparence de l'en-tête du site sur différentes tailles d'écran comme un ordinateur de bureau, un mobile ou une tablette. Pour choisir une taille d'écran différente et la personnaliser, utilisez le sélecteur d'appareil dans le coin inférieur gauche de l'écran.

Comme vous pouvez le voir, sur un écran plus petit, vous obtenez une zone supplémentaire appelée "Hors toile". Cela vous permet d'économiser de l'espace sur l'en-tête et de déplacer certains éléments hors écran que les visiteurs peuvent basculer si et quand cela est nécessaire.

Et cela conclut notre guide rapide sur la façon de créer un en-tête à l'aide du thème Astra. Une fois que vous avez terminé d'ajouter tous les éléments d'en-tête et d'apporter les modifications de conception nécessaires, cliquez sur le bouton de publication, et c'est tout.  

Votre en-tête Astra nouvellement créé est maintenant opérationnel sur votre site Web WordPress.

Astra Header Builder : un aperçu rapide des options disponibles

Dans le didacticiel ci-dessus, nous avons créé un en-tête très basique à l'aide d'Astra Header Builder pour vous donner une idée du fonctionnement de la fonctionnalité. Cependant, Astra Header Builder contient des tonnes d'outils et d'options pour vous aider à créer des en-têtes plus complexes et plus époustouflants.

Voici un bref aperçu des différentes options qui s'offrent à vous :

En-tête principal

L'en-tête par défaut dans Astra est l'en-tête principal. Il affichera un logo et également un menu de navigation personnalisable avec divers paramètres d'en-tête principaux dans Astra.

Installez simplement Astra et accédez à la section En-tête pour choisir l'option d'en-tête principale et accéder à la personnalisation. En-tête > En-tête principal

Vous pouvez utiliser les paramètres de personnalisation suivants

Disposition

Les paramètres de mise en page géreront la position du logo de votre page. Il existe trois positions différentes disponibles dans Astra pour le logo

Logo gauche

Le logo de ce paramètre se déplace vers le côté gauche du menu de navigation. C'est un style typique de positionnement d'un logo.

Logo droit

Le logo de ce paramètre se déplace vers la droite du menu de navigation.

Logo du centre

Le logo de ce paramètre se déplace au centre au-dessus du menu de navigation. C'est une bonne option dans le cas d'un menu long.

Largeur

Les paramètres de largeur gèrent la largeur de l'en-tête du texte. Vous pouvez personnaliser la largeur de votre en-tête comme

Pleine largeur

Dans les paramètres pleine largeur, votre en-tête sera étiré des deux extrémités et s'adaptera à la taille de la page de votre navigateur.

Largeur du contenu

Dans les paramètres de largeur de contenu, l'en-tête s'ajuste en fonction de la largeur de conteneur définie, et vous pouvez le définir en sélectionnant les éléments suivants

Global> Conteneur> Largeur

Frontière

En sélectionnant la bordure, vous pouvez ajouter une bordure sous votre en-tête et personnaliser sa couleur et sa largeur.

En-tête mobile

Le menu de navigation, sur les appareils réactifs, se transforme en hamburger. Par conséquent, l'en-tête principal de ces appareils n'affichera que le menu hamburger et le logo. Vous pouvez personnaliser la disposition du logo concernant le menu dans les widgets réactifs.

Empiler

Dans l'option de pile, le logo se déplacera au-dessus du menu hamburger. Opter pour la pile peut s'avérer utile si vous avez un gros logo.

En ligne

Dans l'option en ligne, le logo et le menu seront alignés et peuvent être une bonne option dans le cas d'un petit logo.

Thèmes de couleur

Les en-têtes primaires peuvent être présentés dans différentes couleurs en utilisant le thème Astra. Les couleurs globales seront disponibles gratuitement, mais vous devez utiliser le plugin addon d'Astra Pro pour des fonctionnalités plus avancées. Pour utiliser les couleurs globales dans Astra, vous devez aller sous l'onglet Apparence, sélectionner personnaliser, puis global, et enfin choisir l'option couleurs. Apparence> Personnaliser> Global> Couleurs

Typographie

Les paramètres de typographie de la page ou du site s'appliquent automatiquement à l'en-tête principal avec Astra Theme. Vous pouvez sélectionner et personnaliser les paramètres de typographie en accédant à l'onglet Apparence, sous global.  

Apparence> Personnaliser> Global> Typographie

En-tête transparent

Les en-têtes transparents sont un moyen facile de créer des en-têtes beaux et attrayants pour votre page. L'arrière-plan de l'en-tête principal sera défini sur transparent et tirera le contenu de la page vers le haut. Le contenu de la page et l'en-tête principal fusionneront, ce qui signifie que la partie supérieure du contenu deviendra un arrière-plan de l'en-tête transparent. Par exemple, si l'image se trouve dans la section supérieure de la page, elle montera pour devenir un arrière-plan pour l'en-tête transparent.

Comment ajouter un en-tête transparent?

L'en-tête transparent se formule en deux étapes rapides pour rendre votre page attrayante 

Étape 1

Vous pouvez trouver l'option d'en-tête transparent sous le personnalisateur, puis le modifier

Apparence> Personnaliser> En-tête> En-tête transparent

Étape 2

Sous les options d'en-tête transparent, vous pouvez l'activer pour l'ensemble du site Web, choisissez la bordure en bas, les couleurs et la disposition du logo

Activation sur un site Web complet

Si vous souhaitez que les paramètres d'en-tête transparents pour l'ensemble du site Web, vous pouvez activer cette option en cochant la case. Si vous cochez la case, il y a encore des règles d'exclusion que vous pouvez activer pour des publications ou des pages spécifiques. Vous pouvez désactiver l'option d'en-tête transparent pour les pages suivantes

Désactiver sur les archives, la recherche et sur 404

Le paramètre d'en-tête transparent peut être désactivé sur ces pages spéciales en cochant la case.

Désactiver sur la page d'index du blog

La page d'accueil de votre blog devient la page d'index du blog si vous modifiez les paramètres de votre page d'accueil. Pour créer une page d'index de blog, vous pouvez accéder aux paramètres de la page d'accueil et sous l'onglet "Affichage de votre page d'accueil", choisissez "Vos derniers messages".

Affichage de votre page d'accueil> Vos derniers articles

Si vous souhaitez désactiver les paramètres de l'en-tête transparent sur cette page d'index de blog, vous pouvez cocher la case correspondante.

Désactiver sur les pages

Si vous souhaitez désactiver l'option d'en-tête transparent sur toutes les pages, cochez la case.

Désactiver sur les publications

Si vous souhaitez désactiver l'option d'en-tête transparent sur tous les messages, cochez la case.

Couleurs et fond

Vous pouvez personnaliser l'arrière-plan et les paramètres de couleur de votre en-tête transparent avec les options disponibles suivantes

• Contexte
• Titre du site
• Menu
• Sous-menu
• Contenu

Avantages et inconvénients de l'utilisation du thème Astra pour les en-têtes

Avantages

• Possibilité pour l'en-tête transparent est disponible
• Les en-têtes de pleine largeur et de largeur de contenu sont disponibles 
• La personnalisation des couleurs et de la typographie est disponible

Les inconvénients

• L'option d'en-tête collant n'est pas disponible
• Les fonctionnalités de couleur avancées ne sont pas disponibles

Mots finaux

Astra est l'un des meilleurs thèmes là-bas. Et, si vous l'utilisez, vous êtes sur la bonne voie pour maintenir votre site.

Le thème gratuit d' Astra vous permet de concevoir des en-têtes magnifiques et attrayants pour votre page Web. L'option et la personnalisation d'un en-tête transparent sont également disponibles, ce qui peut améliorer l'expérience du spectateur. Dans l'ensemble, de nombreux choix de personnalisation d'en-tête dans le thème Astra vous permettent de créer un en-tête époustouflant.