Créer le template d’un header avec Oxygen Builder

Qu’est ce qu’un template Oxygen ?

Oxygen Builder fonctionne avec un système de templates, ce sont des modèles de pages ou de blocs pouvant être utilisés sur plusieurs types de postes.

Si dans un projet web, le header et le footer sont identiques pour tous les types de postes qui le composent, je créerai donc un template, nommé “Template principal” où seront construits mon header et mon footer.

Il est possible de faire en sorte, via les réglages du template en question, que le template s’affiche pour tous les types de postes, ou à des types de postes spécifiques.

Je peux également faire un template pour que mes fiches de produits aient la même apparence, configurer l’apparence de la page listant les résultats de recherche, de la page 404, d’une page particulière, tout ce qui compose votre site web.

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

Un header représente le haut d’une page dans un site web. C’est ce qui va principalement servir, pour vos visiteurs, d’élément principal de navigation entre les pages, articles et autres types de postes. Mais aussi le header peut permettre de donner des informations sur le site en question : son nom, si c’est un blog, une boutique ou autre, des horaires, des flash infos pour les utilisateurs, etc.

Il est évident de constater que le header est un des éléments les plus importants d’un site web. Il est présent sur tous les types de postes du site et doit être le plus pratique possible pour une expérience utilisateur fluide et efficace.

Que doit contenir le Header ?

Le header réunit l’ensemble des informations qui peuvent se trouver sur votre site web. Il est très déconseillé de le négliger, de peur de voir fuir les visiteurs. Comme énoncé plus tôt, le header va servir d’élément de navigation entre les différentes pages de votre site, il va diriger vos visiteurs.

Certains éléments sont indispensables dans un header comme :

Comment créer un header avec Oxygen Builder ?

Commençons par le fait que l’on va devoir créer le “Template principal” qui regroupe le header et le footer de votre site web.

Tout d’abord, accédons à la liste des templates Oxygen
Puis, ajoutons un nouveau template
Voici l’interface de création et de paramétrage d’un nouveau template

En ce qui concerne le nom du template, pour une meilleure visibilité quand vous en aurez plusieurs de listés entre les blocs réutilisables, écrivez entre crochet ce que vous créez, ici, c’est un template donc => “[Template]”.

Et pour la suite, écrivez simplement le nom du template en fonction d’où il s’applique. Ici il s’applique sur la totalité du site, donc “Template principal”.
S’il s’appliquait seulement sur la page 404 vous auriez écrit : “[Template] page 404”.
Une fois avoir enregistré votre nouveau template vous pouvez appuyer sur le bouton “Edit with Oxygen”.

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

Le bloc header se trouve en cliquant sur le bouton “+” en haut à gauche de l’éditeur.

C’est par ce bouton que l’on ajoute au contenu n’importe quel élément de notre choix
En cliquant sur l’onglet “Helpers”, en premier bloc proposé nous avons le bloc fait pour fabriquer un header : “Header Builder”.
Le bloc “Header Builder” se compose d’un autre bloc, nommé “Header Row”, composé de trois parties à l’intérieur de lui-même : partie gauche, partie centrale, partie droite.
Ceci permet de mieux répartir les éléments du header.
Voici les paramètres de « Header Builder »

Nous avons donc : 

Puis pour l’onglet “Advanced” (onglet présent dans tous les blocs) nous avons la possibilité de styliser le bloc comme on veut. 

Voici les paramètres du bloc “Header Row”

Plusieurs paramètres sont ici aussi très intéressants.

Avec tous ces paramètres vous avez de quoi configurer au pixel près votre header.
Cependant, nous vous conseillons de faire ces réglages après avoir installé les éléments qui composent votre header car vous aurez un meilleur aperçu visuel de ce que vous faites.

Comment ajouter une image dans un header avec Oxygen Builder ?

Nous allons ajouter une image, ici cette image sera un logo, sur le côté gauche du header, et cette image devra être cliquable pour amener l’utilisateur à la page d’accueil s’il clique dessus.

Pour ce faire : 

Astuce : pour savoir où se trouve exactement votre bloc et pour pouvoir le déplacer plus facilement, vous pouvez ouvrir l’onglet “structure” qui se situe en haut à droite de votre interface.

C’est dans cet onglet que vous pouvez voir la structure entière de votre page. II permet aussi de déplacer les éléments, les renommer ou les supprimer.
Ici, l’image est bien placée car elle est bien dans la colonne de gauche du bloc “Header Row”, c’est ce que nous voulions.
Voici les paramètres du bloc image. Pour l’instant il n’y a pas d’image ajoutée, pour choisir l’image que nous voulons que le bloc montre il faut régler le premier paramètre.
N’oubliez surtout pas de bien nommer votre image. Son nom doit décrire ce qu’elle affiche.
Si c’est un logo, nommez-le “logo de *nom de ce qu’il représente*”.
Bien nommer ses images permet à votre site d’avoir une bonne accessibilité et vous avantagerait en référencement SEO.
Toujours à propos du nom de l’image, il faut obligatoirement remplir les onglets “Texte alternatif” et “Description”. Si vous avez bien renommé votre image (le nom de l’image est directement utilisé pour l’onglet “Titre”), vous pouvez simplement copier/coller le texte dans l’onglet “Titre” vers ces deux onglets.

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

Vous verrez qu’entre le logo et le bord gauche de votre header il y a une petite distance. Elle est déterminée par la taille standard que prendra votre page, c’est donc normal. Cette taille de page est modifiable dans les paramètres globaux d’Oxygen Builder.

Voici le bouton des paramètres globaux d’Oxygen Builder.

Si vous ne voulez pas que votre header ait ces espaces, alors allez dans l’onglet “Structure” puis sélectionnez “Header Builder”, dans l’onglet “Advanced” cliquez sur “Size & Spacings”.

L’onglet “Header container width” permet de choisir si le container dans le header doit prendre la taille de la page (et ainsi afficher ces espaces) ou s’il doit prendre toute la largeur du header. Ou encore utiliser une taille personnalisée.
Le container dans le header prend la largeur de la page (“page width”).

Enfin, pour rendre votre image cliquable, il suffira tout simplement de cliquer sur le bouton qui permet d’ajouter un lien dans un bloc et d’y ajouter ce lien.

Ce bouton est présent sur une grande majorité de blocs et a pour seule fonction d’ajouter un lien au bloc en question (et donc de le rendre cliquable).
Une fois avoir cliqué sur le bouton d’ajout de lien à votre logo, une fenêtre comme ci-dessus apparaîtra et vous devrez choisir ou écrire le lien qui vous intéresse. Ici, nous voulions que le logo amène à la page d’accueil donc il faut choisir cette dernière.

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

Dans la partie colonne de droite du header, nous allons intégrer des icônes de réseaux sociaux.

Encore une fois : 

Et pour les icônes vous avez deux possibilités : 

Pour notre exemple, nous allons prendre la première option.
Ajoutons le bloc “Icon”.

Le bloc “Icon” d’Oxygen Builder est très simple d’utilisation.
Voici les paramètres de mon icône d’exemple Facebook.

Maintenant, rendons cette petite icône cliquable avec, comme précédemment, le bouton d’ajout de lien. 

Puis ajoutez le lien de votre choix en rapport avec votre icône.

Si vous voulez ajouter un effet au survol de votre icône avec la souris pour bien faire comprendre à l’utilisateur que votre icône est cliquable, un changement de couleur par exemple. 

Le procédé est le suivant :

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

D’ici, on va simplement aller au paramètre de la couleur de l’icône et y choisir la couleur que nous voulons.

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

Le menu de navigation est LE bloc qui compose le header. C’est le plus important. On va donc le placer au centre.

Pour créer un menu, il suffit de retourner sur votre interface d’administration WordPress, survoler l’onglet “Apparence” et cliquer sur l’onglet “Menus”.

Chemin d’accès à l’édition des menus de votre site.
Pour créer un nouveau menu, cliquez sur le bouton au centre de l’interface “créer un nouveau menu”.
La sélection des éléments qui composent votre menu se passe dans la colonne de gauche puis enregistrez avec le bouton “Enregistrer le menu” à droite.

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

Le fait de décaler un élément sous un autre élément va créer une hiérarchie entre ces derniers. Ici, la page parente est la Page 3 et la page fille est la Page 4.

Revenons à notre header.

Pour intégrer dans le header le menu que nous venons de créer, ajoutons le bloc nommé “menu”.

En premier lieu, choisissez bien le bon menu à afficher dans le bloc.

En ce qui concerne le style, vous pouvez modifier avec les onglets sous le choix du menu, respectivement :

C’est la fameuse hiérarchie entre les éléments démontrée plus haut dans l’article
Voici ce qu’est un menu dit “burger”.
Voici le rendu final, très simple, du header.

Comment faire un header sticky avec Oxygen Builder ?

Nous n’avons fait que l’évoquer au tout début de cet article, voyons maintenant ce qu’est un header sticky un peu plus en détail.

Tout d’abord, “Sticky” veut dire “collant” en français. Un header sticky est un header qui va rester “collé” en haut de votre interface de navigation quand vous allez “descendre” dans une page.

Pour rendre votre header sticky, il vous faut simplement aller sur votre bloc “Header Builder”, aller dans l’onglet sticky et cliquer sur “Enable sticky header”.

Cela active l’option sticky sur votre header et vous donnera accès aux paramètres de style qui concernent le sticker header.

L’activation d’un header sticky est très simple, il ne reste plus qu’à configurer le style si besoin.

En ce qui concerne les paramètres de style : 

Lorsque des éléments se chevauchent, la propriété z-index détermine l’ordre des différentes couches que forment les éléments. Un élément en couvrira un autre si sa valeur de z-index est supérieure à celle du deuxième élément.

Donc, si nous voulons être sûrs que notre sticky header passe au-dessus de tous les blocs, nous avons juste à écrire un nombre énorme qui ne sera jamais dépassé, comme 99.

Comment faire un overlay dans le header avec Oxygen Builder ?

Un overlay header est un header en transparence sur le contenu.

Comme par exemple, au lieu que notre header soit au dessus de l’image , on veut qu’il apparaisse en transparence dessus.

Voici notre header au-dessus de l’image
Et c’est ce header que nous voulons : header en transparence sur l’image. Ce header est un Overlay Header (Header en transparence).

La tâche est simple, il suffit de : 

Cliquez sur “Always” pour activer l’overlay header pour toutes tailles d’écran. Si vous ne voulez plus que votre header soit Overlay, choisissez “Never”.

Puis configurez l’apparence de votre header comme précédemment afin qu’il comme vous le voulez.

C’est sur ces mots que se termine cet article.
Nous espérons que cet article sur 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 !