Comment créer le template footer avec Oxygen Builder ?

Qu’est ce qu’un template Oxygen ?

Les templates sont des modèles de pages ou de blocs qui peuvent être utilisés sur plusieurs types de postes.

Si, dans votre projet web, le header et le footer sont identiques pour tous les types de poste qui le composent, il faudra donc créer un template que l’on appellerait « Template principal”.

Ce template regrouperait le header et le footer afin qu’ils puissent être affichés sur tous les types de postes de votre site.Il est également possible de faire un template pour que les articles aient la même apparence. On peut aussi créer un template pour configurer l’apparence de la page 404, ou la page des résultats de recherche, ou même une page particulière, tout ce qui compose votre site.

Qu’est ce qu’un footer dans un site web ?

Le footer est le pied de page, que l’on retrouve souvent à l’identique sur l’ensemble d’un site web. C’est l’un des éléments les plus importants pour l’utilisateur car il suivra ce dernier tout au long de sa navigation tout comme le header. Ainsi, c’est un élément dont il faut prendre soin malgré sa simplicité.

Sur un plan esthétique, le footer permet de fermer proprement toutes les pages de votre site, mais sur le plan utilitaire il sert principalement à placer des liens vers des pages annexes, des liens vers les réseaux sociaux, des informations importantes devant figurer sur toutes les pages, c’est ici aussi que l’on retrouve souvent des liens d’accès aux pages de recrutement si le site en question est celui d’une entreprise.

Que doit contenir le Footer ?

Puisque le footer est la dernière chose que voit le visiteur à la fin d’une page, afin de poursuivre sa navigation, le pied de page se doit d’être intéressant et visuellement attrayant pour attirer l’attention. Un footer est une sorte de filet de sécurité qui permet de rattraper le visiteur avant qu’il ne clique ailleurs.
Il ne faut donc pas négliger cette petite zone de son site.

Durant la construction de votre footer, soyez donc vigilant sur ce qu’il contiendra. N’y mettez que ce qui est nécessaire. Ne perdez pas de vue que le but d’un footer est d’afficher des éléments qui n’iraient nulle part ailleurs dans votre site.

Ce qui n’irait nulle part ailleurs dans votre site seraient par exemple :

la page contact
la FAQ
des informations sur la société
le plan du site
les mentions légales
la politique de confidentialité
les copyrights
une page de recrutement
des liens vers les réseaux sociaux
un call to action (“appel à l’action” en français), comme l’inscription à la newsletter
etc

Comment créer un footer avec Oxygen Builder ?

Dans l’article décrivant comment créer le header avec Oxygen Builder, nous avons créé le template principal où nous avons déjà créé le header. Si vous avez déjà un template avec votre header, ajoutez-y le footer (n’oubliez pas entre les deux d’ajouter le bloc “inner content” qui permettra au contenu des pages et autres types de postes de s’incorporer au template)

Sinon, créez votre template principal qui contiendra votre header et votre footer de la manière suivante :

Avant tout, accédez à la liste de vos templates Oxygen

Puis, créez un nouveau template

Voici l’interface de création et de paramétrage d’un nouveau template

Pour voir plus clair au niveau des noms quand vous avez plusieurs templates au milieu des blocs réutilisables dans votre liste, utilisez les crochets et dans ces derniers écrivez ce que vous créez.
Par exemple, nous créons ici un template, alors entre crochets nous devons mettre “[Template]”.

Et pour la suite du nom, il faudra tout simplement l’écrire en fonction d’où le template va s’appliquer. Celui que nous sommes en train de créer s’appliquera sur tous les types de postes de votre site, ce sera donc le template principal. Ainsi, le nom complet du template sera : “[Template] Template principal”.

Si le template ne s’appliquait que sur les articles, alors nous aurions écrit : “[Template] Articles”.

Afin d’accéder au bouton “Edit with Oxygen”, enregistrez votre tout nouveau template.

Où trouver et comment configurer le bloc footer dans Oxygen Builder ?

Le bloc footer se trouve dans l’onglet “+” en haut à gauche de l’éditeur.

Ce bouton va vous servir à ajouter tous les blocs, blocs pré-faits, ou pages pré-faites de votre choix.

Contrairement au header, il n’existe pas de bloc footer. Il vous faut le créer de toute pièce dans un bloc “section” mais pour bien faire les choses sémantiquement parlant et pour le référencement SEO, il faut bien baliser la section en sélectionnant la balise “footer”.

Si nous ne faisions pas cette petite manipulation, les moteurs de recherches penseraient que votre site ne possède aucun footer et prendrait ce morceau de template comme du “simple contenu” présent sur tous les types de postes de votre site.

Petite alternative pour aller plus vite, vous pouvez choisir un footer parmi les footer pré-faits d’Oxygen Builder et le modifier à votre guise.

Voici le chemin d’accès vers les footer pré-faits. Choisissez le footer qui se rapproche le plus du vôtre puis modifiez-le jusqu’à devenir parfait à vos yeux.

Pour ma part, j’ai choisi le footer nommé “Footer Logo Centered” comportant trois colonnes qui me permettront d’y mettre :

à gauche : le menu comportant les liens secondaires comme les mentions légales, la page de politique de confidentialité, etc.
au centre : le logo du site (ramenant à la page d’accueil si on clique dessus)
à droite : les icônes de réseaux sociaux avec leurs liens respectifs.

Comment ajouter une image dans un footer avec Oxygen Builder ?

Commençons par la colonne centrale qui comportera le logo du site.

Si vous n’avez pas pris de footer pré-faits, la méthode est simple.

ajoutez, via le bouton “+”, un bloc section sous le bloc “inner content” afin qu’il soit toujours affiché en bas de votre page

Voici le chemin d’accès au bloc “section”

Pour suivre notre exemple du bloc pré-fait comportant trois colonnes (mais vous pouvez faire totalement autre chose), nous allons ajouter dans le bloc “section”, le bloc “colonnes” puis choisir la disposition en trois colonnes.

Chemin d’accès au bloc “colonnes”

Pour ajouter trois colonnes, vous avez le choix entre deux configurations : trois colonnes égales ou trois colonnes dont la centrale est plus imposante.

Revenons donc à l’ajout de notre logo.

Le bloc image se situe au même onglet que pour les blocs “section” et “colonnes”.

Voici les paramètres du bloc image. Pour l’instant, aucune image n’a été ajoutée pour notre footer.

Réglons le premier paramètre afin de pouvoir afficher l’image que nous voulons à notre footer.

Media Library permet de choisir une image parmi celles de la base de données Médias de WordPress.
Media Library est ce qui est préférable d’utiliser car nous allons directement ajouter l’image qui nous intéresse dans votre WordPress et ainsi, nous pourrons être sûr que cette image ne sera pas supprimée et sera donc bien affichée dans notre footer contrairement à si on choisissait d’utiliser une image via son URL avec l’onglet “image URL”.
- Pour choisir une image, cliquez sur le bouton “Browse” puis, pour incorporer votre image à la base de données de votre WordPress, cliquez sur “Téléverser une image”.

Très important : nommez bien votre image afin d’avoir une bonne accessibilité et un bon avantage en termes de référencement SEO. Le nom de l’image doit décrire ce qu’elle affiche. Ici, c’est un logo, donc il faut le nommer “logo de *nom de ce qu’il représente*”.

Il faut obligatoirement remplir les champs “texte alternatif” et “description”.
Si votre image a bien été nommée avant d’être ajoutée à votre WordPress, vous aurez juste à copier coller le champ “Titre” qui utilise directement le nom de votre image, à ces deux autres champs.

cliquez sur “Select Image” pour définitivement ajouter votre image à WordPress et au bloc “Image” dans votre footer.
L’onglet “Size” va nous permettre de choisir une taille standard d’affichage de l’image.
Si nous voulons que notre image soit petite, nous choisirons la taille “thumbnail” par exemple.
Avec l’onglet “Width” du bloc image, définissez la taille de votre image dans le footer, en rem.

Dans cet exemple, nous n’aurons pas besoin de remplir les autres paramètres du bloc “image”.

Enfin, pour que votre image devienne cliquable, il vous suffit de cliquer sur le bouton présent sur tous les blocs d’Oxygen qui permet ceci et y ajouter le lien que vous souhaitez.

Ce bouton n’a qu’une seule fonction, ajouter un lien à un bloc et donc le rendre cliquable

Après avoir cliqué sur ce fameux bouton d’ajout de lien, une fenêtre apparaîtra et vous devrez soit choisir un lien interne soit ajouter vous-même un autre lien.
Dans notre exemple, le logo doit mener à la page d’accueil, alors choisissons tout simplement le lien qui mène vers la page d’accueil de votre site.

Comment ajouter des icônes dans un footer avec Oxygen Builder ?

Nous voulons, dans la colonne de droite de notre footer, qu’apparaissent les logos des réseaux sociaux et y intégrer les liens vers les pages facebook, instagram et autres pages liées à notre site.

Encore une fois, le bloc des icônes se trouve dans l’onglet “+”.

Et vous avez deux possibilités :

Soit prendre le bloc “icon” pour ajouter une icône de façon individuelle
Soit utiliser le bloc “Social icons” qui permet d’ajouter un groupe d’icônes de réseaux sociaux

Pour notre exemple, nous allons prendre la première option car si vous maîtrisez la première vous saurez aussi bien gérer la seconde.

Ajoutons le bloc “Icon”.

Le paramétrage du bloc “icon” d’Oxygen Builder est assez intuitif

avec l’onglet “Icon Style” vous avez le choix entre trois styles :
“Outline” affichant des bordures
“Solid” affichant un fond
“None” est le style par défaut

avec “Color” vous avez le choix de la couleur de votre icône

“Icon Size” concerne la taille de votre icône

“Icon set” est le paramètre le plus important.

Il permet de choisir votre icône parmi deux grandes bibliothèques d’icônes bien connues : FontAwesome et LineariconsChoisissez une des deux bibliothèques puis, dans l’onglet “Icon”, tapez le mot-clé de votre icône
Par exemple, tapez “facebook” pour avoir une icône Facebook, et choisissez celle qui vous intéresse.

Voici les paramètres d’une des icônes du footer que j’ai créé pour l’exemple.

Pour finir, rendons ces petites icônes cliquables.
Comme présenté plus tôt, il faut cliquer sur le bouton d’ajout de lien et ajouter le lien de votre choix en rapport avec l’icône visée.

Si vous souhaitez ajouter, au survol de votre icône avec la souris, un petit effet pour faire comprendre à vos visiteurs que les icônes sont cliquables, avec par exemple l’icône qui grossit.

La méthode est la suivante :

Sélectionnez votre icône
cliquez sur le bouton “state” dans la barre de l’id de votre icône et sélectionnez “:hover”

“:hover” est une pseudo-classe qui permet d’ajouter des effets de style quand le bloc est survolé par la souris

Ici, nous allons aller dans l’onglet “advanced” puis cliquer sur “effect” puis “transform”
pour agir sur la taille d’une icône, choisissez dans l’onglet “transform type” : “Scale”
pour grossir l’image vous devrez entrer une valeur supérieure à 1 (à l’inverse, pour rapeticir une image vous devrez écrire une valeur inférieure à 1) dans les onglets « Scale X » et “Scale Y”.

Réglages d’une des icônes pour qu’elle s’agrandisse légèrement au survol de la souris

pour rendre la transformation de grossissement plus fluide, rendez-vous dans la version originale de votre icône.

Note : en allant sur la version originale de votre icône vous pourrez tester ce que donne votre hover sur votre icône la survolant avec votre souris

allez ensuite dans l’onglet “effect” puis “transition”
dans l’onglet “transition duration” entrez une valeur supérieure à 0.300ms pour que la transition ne soit pas trop rapide, et le tour est joué

Voici le résultat de ce que donne le paramètre “scale” avec le paramètre “transition”

Comment ajouter un menu de navigation dans un footer avec Oxygen Builder ?

Le menu de navigation des liens secondaires est important pour un footer car c’est dans ce dernier qu’on s’attend à avoir exclusivement les liens vers la politique de confidentialité, les mentions légales, parfois la page contact, les conditions générales d’utilisations et/ou de vente.

Ainsi, pour ajouter ce petit menu, il faut d’abord le créer.

Pour créer un menu, retournez sur votre interface d’administration WordPress, survolez l’onglet “Apparence” puis cliquez sur l’onglet “Menus”.

Chemin d’accès à l’édition des menus de votre site WordPress

Cliquez ensuite sur le bouton au centre de l’interface “créer un nouveau menu”.

inscrivez le nom de votre menu. Celui du footer sera le menu des liens utiles donc nommons-le “Menu liens utiles”
en bas à droite de votre interface, cliquez sur le bouton “créer le menu” pour pouvoir ensuite y ajouter les pages voulues
dans la colonne de gauche se trouvent tous les types de poste de votre site, sélectionnez celles qui vous intéressent pour votre menu
une fois votre sélection terminée, cliquez sur le bouton “enregistrer le menu” en bas à droite de votre interface

N’oubliez pas de cliquer sur le bouton “ajouter au menu” pour bien ajouter votre sélection à votre menu

Pour ajouter des pages en sous page, il suffit simplement, sous la page parente, de décaler la page fille comme ci-dessous.

Décaler un élément sous un autre va créer une hiérarchie. Ci-dessus, la page fille est la Page 4 et la page parente est la Page 3.

Revenons à notre footer.

Pour y intégrer le menu que vous avez créé, ajoutez le bloc nommé “menu”.

Tout d’abord, bien choisir le bon menu à afficher dans votre footer

Pour ce qui concerne le style de votre menu, vous pouvez le modifier avec les onglets présentés sur la photo ci-dessus.

le texte : la taille, la couleur, la police, l’alignement, s’il doit être souligné ou non, etc
les espacements : padding et margin (respectivement : espacements internes et espacements externes)
le hover (effet(s) au survol) et active (effet(s) quand l’élément est cliqué) sur la couleur du texte, les paramètres principaux du texte, la couleur de fond, les bordures
“dropdown” modifie les menus déroulants : choisir si cette option est active ou pas, montrer ou non la petite flêche, la couleur de fond, les hovers, le padding, etc
les réglages du menu en responsive : à partir de quelle taille d’écran devient-il un menu “burger”, le style du menu, le style de l’icône, des dropdowns…

Voici, à gauche, à quoi ressemble un menu dit “burger”

Et voici le rendu final du footer, très simple, que j’ai créé pour cet exemple.

Si vous souhaitez faire un footer multilignes il vous suffira tout simplement d’ajouter autant de sections que vous souhaitez au-dessus ou au-dessous de la section principale.

C’est sur ces derniers mots que se termine cet article.

Nous espérons que cet article sur la construction d’un footer avec Oxygen Builder vous aura aidé.

Si vous ressentez que vous avez besoin d’approfondir vos connaissances sur Oxygen Builder, ou si vous faites face à une problématique spécifique, n’hésitez pas à nous contacter. Nous vous répondrons dans les meilleurs délais.

Nous vous souhaitons une bonne navigation !