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 aux lecteurs mais également aux moteurs de recherche. Des en-têtes époustouflants et bien rédigés 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 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 d'expliquer comment 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 superbe en-tête avec le thème Astra ?
• Avantages et inconvénients de l'utilisation du thème Astra pour les en-têtes
• Derniers mots

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 du document, et les sous-titres orientent le lecteur vers 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 n’importe quel contenu sont facilement captés par les lecteurs d’écran et sont essentiels pour une utilisation efficace des lecteurs d’écran. Ils permettent également aux lecteurs de passer d'une rubrique à l'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 comportent des en-têtes. Parmi tous les en-têtes, l’en-tête le plus important est le premier car il donne le ton à l’ensemble du message ou de la page.

Vient ensuite le sous-titre car il divise le contenu en morceaux meilleurs pour la consommation. De plus, la structure de l'article est indiquée par les en-têtes et les 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 mobile que jamais. Ainsi, si vous corrigez votre contenu, vous attirerez forcément des téléspectateurs sur mobile ainsi 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 superbe en-tête 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 de 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, les unes sur les autres. Vous avez « l'en-tête principal » au milieu avec un « au-dessus de l'en-tête » en haut et « en dessous de l'en-tête » en bas. 

Chaque en-tête possède 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 fonctionnelles. 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 principal
• Bouton 1
• Bouton 2 (pro)
• Recherche
• Compte
• HTML1
• HTML2
• Menu secondaire
• Sociale
• Widget 1
• Widget 2
• Widget 3 (pro)
• Widget 4 (pro)
• Panier

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 vous déplacer entre 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. Ci-dessous, vous trouverez également la possibilité de modifier le type d'en-tête. Les utilisateurs gratuits n'ont accès qu'à l'option « En-têtes transparents ». Cependant, si vous utilisez Astra Pro, vous pouvez activer les « en-têtes collants ».

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 de périphérique situé 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 de l'écran que les visiteurs peuvent activer 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 fini 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 propose de nombreux outils et options pour vous aider à créer des en-têtes plus complexes et plus étonnants.

Voici un aperçu rapide des différentes options dont vous disposez :

En-tête principal

L'en-tête par défaut dans Astra est l'en-tête principal. Il affichera un logo ainsi qu'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

Mise en page

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 dans ce paramètre se déplace vers la gauche du menu de navigation. C'est un style typique de positionnement d'un logo.

Logo droit

Le logo dans ce paramètre se déplace vers le côté droit du menu de navigation.

Logo du Centre

Le logo dans 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 côtés et s'adaptera à la taille de la page de votre navigateur.

Largeur du contenu

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

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 affichera uniquement le menu hamburger et le logo. Vous pouvez personnaliser la disposition du logo concernant le menu dans les widgets responsive.

Empiler

Dans l'option pile, le logo se déplacera au-dessus du menu hamburger. Opter pour la stack 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 les uns avec les autres et peuvent être une bonne option dans le cas d’un petit logo.

Thèmes de couleurs

Les en-têtes principaux peuvent être présentés en différentes couleurs en utilisant le thème Astra. Les couleurs globales seront disponibles gratuitement, mais vous devez utiliser le plugin complémentaire 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 simple 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 l'arrière-plan de l'en-tête transparent. Par exemple, si l’image se trouve dans la partie supérieure de la page, elle montera pour devenir l’arrière-plan de 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 et ensuite la 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, choisir la bordure en bas, les couleurs et la disposition du logo.

Activation sur un site Web complet

Si vous souhaitez des 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 existe encore certaines 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 Archives, 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 depuis 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 », choisir « Vos derniers messages ».

Affichage de votre page d'accueil > Vos derniers messages

Si vous souhaitez désactiver les paramètres de l'en-tête transparent sur cette page d'index du 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 toutes les publications, cochez la case.

Couleurs et arrière-plan

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

• Arrière-plan
• Titre du site
• Menu
• Sous-menu
• Contenu

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

Avantages

• L'opportunité 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

Inconvénients

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

Derniers mots

Astra est l'un des meilleurs thèmes du marché. 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.