Comment changer les couleurs de l’en-tête et du menu dans le thème Astra ?

 

Vous souhaitez changer les couleurs de l’en-tête et du menu de votre thème Astra ? C’est ce que nous allons couvrir dans ce tutoriel. Alors, commençons.

À l’occasion du Black Friday 2022, Astra offre jusqu’à 50 % de réduction sur son thème et ses templates .
Offre :
Jusqu’à 50% de réduction et un Macbook Air à gagner
Code de réduction : Auto-appliqué
Validité : du 22 novembre au 2 décembre 2022

Cliquez ici pour profiter de l’offre

Comment changer la couleur de l’en-tête Astra?

Étape 1: Installez et activez le plugin Astra Pro.

Étape 2: Accédez à Apparence > Options Astra et activez le module Couleurs et arrière-plan.

Activer les couleurs et le module de fond d'Astra

Étape 3: Accédez au front-end de votre site Web et activez le WordPress Customizer.

Étape 4: Maintenant, allez dans Header > Primary Header dans le panneau WordPress Customizer.

Étape 5 : Faites défiler vers le bas jusqu’à ce que vous voyiez l’option Arrière-plan. Vous pouvez modifier la couleur d’arrière-plan de l’en-tête ici.

Changer la couleur d'arrière-plan de l'en-tête dans Astra

D’accord! Mais qu’en est-il de la version gratuite du thème Astra ? Pouvez-vous changer la couleur de l’en-tête dans cette version ?

Comment changer la couleur d’arrière-plan de l’en-tête dans le thème Astra gratuit ?

Étape 1: Accédez au front-end de votre site Web et activez le WordPress Customizer.

Étape 2: Maintenant, allez à la section CSS supplémentaire.

Option CSS supplémentaire

Étape 3: Ici, insérez le code ci-dessous. .main-header-bar { background-color: #000000; } Vous devrez remplacer le code hexadécimal #00ff00 par le code hexadécimal de la couleur que vous souhaitez définir comme couleur d’arrière-plan de votre en-tête. Gardez à l’esprit que je ne suis pas un codeur. Donc, le code ci-dessus pourrait ne pas fonctionner pour vous. Et même si c’est le cas, cela pourrait cesser de fonctionner si les développeurs du thème Astra modifient la classe CSS « main-header-bar » qui définit actuellement l’en-tête Astra. Je ne suis pas vraiment favorable à l’écriture de code pour personnaliser l’apparence de WordPress. C’est parce qu’il devient vraiment difficile de maintenir ce code pour les années à venir. Donc, je vous suggérerais d’investir un peu dans le plugin Astra Pro, ce qui vous permettra de faire très facilement toutes sortes de personnalisations. Avec le plugin Astra Pro installé, vous pouvez simplement cliquer sur certains paramètres pour personnaliser votre site Web comme vous le souhaitez. Bien! Venons-en maintenant aux menus…

Lecture complémentaire connexe :

Comment changer la couleur du menu dans le thème Astra ?

Étape 1: Installez et activez le plugin Astra Pro.

Étape 2: Accédez à Apparence > Options Astra et activez le module Couleurs et arrière-plan.

Étape 3: Accédez au front-end de votre site Web et activez le WordPress Customizer.

Étape 4: Maintenant, allez dans Header > Primary Menu dans le panneau WordPress Customizer.

Étape 5 : Faites défiler vers le bas jusqu’à ce que vous voyiez les options du menu. Ici, vous pouvez changer la couleur de fond du menu. Vous pouvez également modifier le lien du menu/la couleur du texte ici.

Changer la couleur du menu dans Astra

D’accord! Mais qu’en est-il de la couleur de fond du menu mobile ?

Comment changer la couleur d’arrière-plan du menu mobile dans le thème Astra ?

Étape 1: Installez et activez le plugin Astra Pro.

Étape 2: Accédez à Apparence > Options Astra et activez le module Couleurs et arrière-plan.

Étape 3: Accédez au front-end de votre site Web et activez le WordPress Customizer.

Étape 4: Maintenant, allez dans Header > Primary Menu dans le panneau WordPress Customizer.

Étape 5 : Faites défiler vers le bas jusqu’à ce que vous voyiez les options du menu. Ici, cliquez sur la petite icône du bureau jusqu’à ce qu’elle se transforme en icône mobile. Maintenant, vous pouvez changer la couleur d’arrière-plan du menu mobile. Vous pourrez également modifier le lien du menu mobile/la couleur du texte ici.

Changer la couleur du menu mobile dans le thème Astra

Lectures complémentaires intéressantes :

Didacticiel vidéo

Télécharger la boîte à outils des créateurs de sites Web

Choses à garder à l’esprit…

Bien que cela semble être une bonne idée de trouver un code CSS pour personnaliser votre site Web dès maintenant, il devient difficile de maintenir ce code à long terme. Il est donc toujours préférable d’investir un peu dans votre site Web et d’obtenir les outils nécessaires pour personnaliser votre site Web sans écrire de code. Cela vous évitera bien des maux de tête pour les années à venir.

Laisser un commentaire