Sommaire
Bienvenue dans cette nouvelle partie de votre tutoriel dédié à vous apprendre à créer vous même votre site internet sans l’aide de personne.
Nous avons bien avancé depuis le début de cette serie de tutoriel et maintenant, si vous avez bien tout suivi, vous êtes censé savoir choisir un nom de domaine, installer wordpress sur un serveur, choisir un thème et l’installer, créer des pages, créer un menu, ajouter un logo et enfin choisir les couleurs de votre site.
Nous sommes donc actuellement en plein dans le design de notre site. Et dans un site internet, le haut de page appelé aussi header ou en-tête doit être travaillé et designé avec soin car c’est lui qui reflète l’identité de votre site et aussi l’identité de de votre produit ou service.
Le header, c’est la partie haute de votre site internet, le header est normalement présent sur toutes les pages de votre site internet. Dans le header, nous retrouvons généralement votre logo, le menu principal de votre site, le bouton de connexion à la zone membre si il y en a une, le panier d’achats si le site est un site e-commerce …
Il est également possible de mettre dans le header d’un site des informations tel qu’un numéro de téléphone, une adresse mail ou encore des liens vers les différents réseaux sociaux liés au site internet.
Dans ce tutoriel, je vous explique donc les fonctions les plus importantes et les plus utilisées pour designer un header.
C’est à dire, définir les couleurs du header, changer de place votre logo et votre menu, donner des effets dynamiques à votre header …
Certains paramètres du thème Enfold ( thème avec lequel nous travaillons ) ne seront donc pas traités. Cependant, je vous invite à faire des essais pour voir à quoi ces paramètres non traités correspondent, vous pouvez vous amuser, il n’y a aucun risque pour votre site.
D’un thème à l’autre, les paramètres et options changent, vous devez donc absolument vous entrainer à tester les paramètres qui se présentent à vous et à observer sur quoi ils agissent. C’est comme cela que vous ferez des progrès avec wordpress.
Maintenant, attaquons le tutoriel.
– À gauche du tableau de bord wordpress, cliquez sur Enfold
– Cliquez maintenant sur “ style général”
– Dans logo Area, choisissez la couleur de fond de votre header en changent le paramètre “ Logo Area Couleur de fond”
– Toujours dans “ style général ”, choisissez la couleur de la police du menu en changent les paramètres de :
– “ Logo Area couleur de la police “ : Couleur de la police pour l’élément du menu correspondant à la page sur laquelle nous sommes.
– “ Logo Area secondary font color “ : Couleur de la police pour les éléments du menu correspondant aux autres pages.
– Changer la couleur du trait visible sous l’élément du menu correspondant à la page sur laquelle nous sommes.
– Toujours dans “ style général ”, régler le paramètre “ Couleur primaire “ pour changer la couleur du trait.
– À gauche du tableau de bord wordpress, cliquez sur Enfold
– Cliquez maintenant sur “ header ”
– Dans la section “ modèle d ”, vous pouvez :
– Choisir la position du menu et du logo “ Position du Menu et du Logo “
– Choisir de mettre ou non un séparateur entre chaque élément du menu “ Separator between menu items ”
– Choisir le style de votre header “ Header Style “
– Choisir ou non le titre de la page et le fil d’ariane en dessous du header “ Titre d’en-tête et fil d’ariane “ (pour un meilleur référencement, il est conseillé de laisser le fil d’ariane, “display only breadcrumbs”)
– Choisir la taille de votre header “Taille de l’En-Tête”
– À gauche du tableau de bord wordpress, cliquez sur Enfold
– Cliquez maintenant sur “ header ”
– Dans la section “ comportement d ”, vous pouvez :
– Choisir si votre header va coller au haut de votre écran ou disparaitre lorsque l’utilisateur descendra dans la page “ En-tête collant “
– Choisir si votre header diminuera de taille ou non lorsque l’utilisateur descendra dans la page “ Rétrécissement En-tête”
– À gauche du tableau de bord wordpress, cliquez sur Enfold
– Cliquez maintenant sur “ header ”
– Dans la section “ Élements supplémentaire ”, vous pouvez :
– Décider si vous voulez laisser l’icône du moteur de recherche à droite de votre menu “Ajouter l’icône de recherche au menu principal”
– Choisir si vous souhaitez faire apparaitre les logos des réseaux sociaux sur lequel vous avez un compte dans l’entête “En-Tête Social Icons”
– Ajouter un numéro de téléphone ou une adresse email au-dessus de votre menu “Numéro de téléphone/Extra Info dans En-Tête”.
Raphaël