Table des matières
Le thème Astra et son plugin premium Astra Pro permettent de concevoir un pied de page (footer) élaboré par une interface WYSIWYG assez facile à utiliser quoique bourrée d’options.
Les enjeux du footer
Le footer se place tout en bas de la page sur quasiment toutes les pages d’un site Internet – même si on peut le désactiver sur certaines, comme les landing pages, les pages d’atterrissage sur lesquelles on a tendance à limiter l’info affichée pour concentrer l’attention sur le processus de vente.
Moins visible que le header, mais omniprésent, le pied de page est une zone de choix pour afficher des informations essentielles mais techniques :
- l’adresse d’une entreprise
- le copyright
- des liens vers les pages obligatoires :
- les mentions légales
- les conditions générales de vente ou d’utilisation (CGV et CGU)
- la politique de confidentialité
- la politique des cookies
- un mini-menu vers les pages principales
On y place aussi parfois un rappel de l’identité de l’entreprise – nom et logo, comme une signature – et des propositions commerciales.
Le pied de page est porteur d’un enjeu de référencement SEO puisqu’il contient des liens présents sur chaque page ; mais ces liens ont moins de valeur et diffusent moins de « jus de lien » (l’autorité de la page) car ils ne sont pas directement liés au contenu de la page et n’ont donc pas de valeur thématique : des pages sur des thèmes très différents ont les mêmes liens en footer.
Il faut donc gérer ces liens avec tact et parcimonie, pour éviter l’effet « fat footer », le pied de page obèse qui multiplie des dizaines de liens – cette pratique d’optimisation du référencement ne fonctionne plus depuis que Google fait la différence entre les liens à valeur thématique et les liens plus techniques du footer.
L’interface du constructeur de pied de page
On clique sur Personnaliser dans la barre du haut sur une des pages de notre site WordPress, et on arrive dans le Customizer.
On clique ensuite dans le menu de gauche sur Constructeur de pied de page.
L’interface montre 3 zones :
- A gauche, l’onglet Général est activé : il présente un menu dont les items sont les éléments actuellement insérés dans le footer ; si on ajoute des éléments au footer, ils viennent s’ajouter à ce menu
- A droite, la zone principale montre la page du site et permet d’observer les modifications en cours ; on peut naviguer pour constater les effets suivant le type de page
- En bas à droite, on a une sorte de maquette du pied de page : on constate qu’il se compose de 3 barres horizontales superposées, chacune se divisant en colonnes ; à gauche de chaque barre on a une icone en forme de roue crantée : si on clique, on a accès à des options et on peut notamment changer le nombre de colonnes : 1, 2, 3, 4…
Commençons par étudier cette zone.
La maquette du pied de page
Elle se compose donc de 3 barres horizontales qui permettent d’y insérer des éléments :
- la barre du milieu est le pied de page principal
- celle du haut est le pied de page du dessus
- celle du bas est le pied de page du dessous
Si on ne met rien dans une de ces barres, alors elle n’apparait pas sur le site. Dès qu’on y met au moins un élément, elle s’affiche avec les propriétés de taille et d’aspect qu’on définit en cliquant sur la roue crantée à sa gauche.
Pour insérer un élément dans un de ces pieds de page, on clique sur une zone blanche et cela fait apparaitre un menu. En version Astra Pro, ce menu propose ces éléments :
- des boutons
- un sélecteur de langue
- un footer menu, menu de pied de page
- un widget « social », permettant de définir des icones de réseaux sociaux
- et des widgets
Il suffit de cliquer sur un de ces choix pour l’insérer à l’endroit où on a cliqué.
Pour le déplacer, on clique dessus en maintenant la souris appuyée et on le dépose à un autre emplacement dans l’une des 3 barres.
Parmi les éléments intégrables, il faut savoir que le Footer menu doit être créé d’abord via l’interface habituelle de WordPress, dans l’admin, Apparence > Menu.
Sur cette page de définition des menus, après avoir ajouté des items, des pages, on peut cocher la case « menu de pied de page » qui se trouve en bas de l’écran. Dans ce cas, ce menu défini comme menu de pied de page apparaitra automatiquement si on a intégré le widget Footer menu via le constructeur de pied de page.
Si on n’a pas défini ce Footer menu via Apparence > Menu, on peut toujours le définir par le constructeur de pied de page : on intègre donc ce Footer menu dans un des trois pieds de page, puis on clique dessus, cela, fait apparaitre des options dans la colonne de gauche, on clique sur « Configurer le menu ici », et on choisit le menu auquel on veut attribuer la fonction de Footer menu. Ou s’il n’y en a pas, on peut en créer un par l’une ou l’autre méthode.
A propos des widgets intégrables : un widget est un élément composite qui permet d’en réunir d’autres.
Si on intègre un widget et qu’on clique dessus, cela donne accès à une interface dans la colonne de gauche : il suffit de cliquer sur le signe « + » pour obtenir une liste d’éléments intégrables, qui viennent de la gamme de blocs WordPress, par exemple :
- un titre
- un paragraphe
- une citation
- une image
- un widget Elementor
- un widget WordPress
- une liste d’articles ou de catégories
- etc (il y en a des dizaines)
Un widget de pied de page permet donc de conserver différents éléments ensemble. On peut l’intégrer à la maquette ou l’en supprimer, il restera disponible tel quel.
A propos de l’élément HTML : il permet d’intégrer soit du HTML, soit un shortcode.
Les paramètres de chaque pied de page
Cliquons maintenant sur une des roues crantées à gauche de chaque pied de page : cela donne accès à deux onglets en colonne de gauche, onglet Général et onglet Design.
L’onglet Général permet de définir :
- le nombre de colonnes de ce pied de page
- le comportement qu’il adoptera quand l’écran est petit : soit il garde ses éléments en ligne, soit il les empile (par exemple ses 3 colonnes deviendront 3 lignes sur tablette ou sur mobile)
- sa hauteur (cette valeur ne fonctionnera que si le pied de page contient au moins un élément)
- sa largeur (soit la largeur de l’écran, soit la largeur du conteneur principal, défini dans les paramètres globaux du Customizer : Global > Conteneur)
- l’alignement vertical de ses éléments sur la hauteur de ce pied de page : par exemple vous pouvez dire aux éléments d’un pied de page haut de 100 pixels de s’aligner en haut, en bas ou au milieu)
L’onglet Design permet quant à lui de définir les réglages concernant l’apparence : couleur de fond, marges (margin et padding en CSS), etc.
L’onglet Design
Remontons maintenant au premier niveau du constructeur de pied de page dans le menu de gauche, et cliquons sur l’onglet Design.
On voit là qu’Astra fait une différence entre le pied de page compris de manière globale comme étant l’addition de ses composants, et les pieds de page principal, supérieur et inférieur.
On peut donc attribuer une couleur de fond au pied de page global, et mettre les pieds de page particuliers soit en transparence soit avec une autre couleur, ou divers effets de dégradés.
On peut aussi attribuer des marges internes et externes (margin et padding CSS) à tout le footer, et ces marges s’imposeront aux pieds de page particuliers, qui via leur propre onglet Design pourront eux aussi prendre des valeurs de marge interne et externe.
Conclusion
Voilà, je pense qu’on a fait le tour, si vous avez des questions n’hésitez pas à les poser en commentaire et je m’efforcerai d’y répondre.
En résumé, Astra et Astra Pro proposent des réglages très riches pour gérer le footer, avec un fonctionnement très semblable à celui du header.
Qu'avez-vous pensé de cet article ?
Cliquez sur une étoile pour donner votre avis
Avis moyen 4.4 / 5. Nombre d'avis donnés 9
Soyez le premier à donner votre avis