CHAPITRE IX

Ajouter un menu, un footer et publier ses pages Elementor

Pour l’instant on a vu comment designer notre page. 

On est parti d’un modèle et on a créé une page avec des fonctionnalités assez poussées en terme de design. 

Maintenant avant de pouvoir la publier, il nous reste à ajouter un menu et un pied de page

Voila ou nous en sommes : 

créer page site elementor page rendu final

On va donc ajouter un menu et un pied de page.

Sommaire chapitre 9:

Créer un menu

Les menu (Header) et les pieds de pages (Footer) ne sont pas disponible dans les templates Elementor depuis la bibliothèque.

Ces templates sont réservés à la version Pro

créer page site elementor page bloc template

On va donc devoir en créer un nous même de zéro. 

Si on reprend l’exemple de la page de Nathan, voila à ce qu’on veut :

  • Un logo de site à gauche
  • Un menu avec 4 liens au milieu sous forme de boutons
  • Les icônes de réseaux sociaux à droite
créer page site elementor page menu

Créer la structure du menu

On fait comme précédemment et on va regarder quelle est la grille sous-jacente à ce menu. 

  • On a une section qui fait tout le tour (pointillé bleu).
  • Dans laquelle il y a 5 colonnes (pointillés gris) avec le logo, un espace vide, les onglets du menu, un espace vide et les réseaux sociaux.
  • Et à l’intérieur de la colonne du milieu, on a 4 onglets et 3 icônes dans celle de droite. 

On va donc utiliser des sous-sections (rectangle gris):

créer page site elementor menu

Donc sur la première section, on clique sur + pour ajouter une nouvelle section de 5 colonnes :

créer page site elementor menu ajouter colonnes

Et on ajoute une sous-section au milieu et une sous-section à droite.

Et on fait clic droit sur les sous-colonnes et on les duplique au milieu pour en avoir 4 et à droite pour en avoir 3

créer page site elementor menu dupliquer colonnes

Ensuite on déplace les bords des colonnes pour rééquilibrer l’espace en élargissant la colonne du milieu

créer page site elementor menu largeur colonnes

Et on obtient donc la bonne structure : 

créer page site elementor menu grille

Ajouter le contenu du header :

Maintenant on fait glisser tous ses éléments : images pour le logo, boutons pour les boutons du menu avec un fond blanc et une typographie similaire à la page de Nathan :

créer page site elementor menu contenu boutons

Et pour les icônes des Twitter et YouTube, il existe un widget qui s’appelle icônes réseaux sociaux qu’on va utiliser :

créer page site elementor menu widget incones réseaux sociaux

On le fait glisser dans une colonne de la sous-section de droite et on supprime les autres colonnes de la sous-section pour n’en garder qu’une 

créer page site elementor menu effacer icone

Ensuite dans le premier Onglet Contenu, on va réorganiser l’ordre des icônes en les faisant glisser les unes au dessus des autres : 

créer page site elementor menu ordre icones réseaux sociaux

On supprime Google Plus et on clique sur Facebook pour le remplacer par Youtube :

créer page site elementor menu icone facebook

Bibliothèque d’icône > Youtube :

créer page site elementor menu icone youtube

Et dans le second onglet Style, on va modifier la couleur et la taille pour avoir la même chose que sur la page de Nathan : 

créer page site elementor menu design icones

On étire un peu la colonne contenant Book & Products pour avoir tout sur une ligne et on termine ainsi avec le contenu du menu qu’on va maintenant paramétrer

créer page site elementor menu design bouton

Paramétrer les boutons :

On va maintenant paramétrer le comportement des boutons

Encore une fois la page de Nathan va offrir un bon exemple. 

On a la page active qui est soulignée avec un trait bleu ciel et lorsque l’on passe la souris sur les autres onglet on a un trait gris souligné dessous : 

créer page site elementor menu soulignement bouton
Souligné en bleu, le menu actif, en gris le menu sur lequel on passe la souris.

Pour avoir cet effet, on va faire apparaitre une bordure inférieure bleue sous l’onglet actif et on va faire apparaitre une bordure inférieure grise uniquement au passage de la souris. 

On prend le premier bouton Home et dans l’onglet Style, sous Normal on va mettre : 

  1. Une bordure continue donc Type de bordure > Continue
  2. Ensuite une épaisseur uniquement en bas donc Largeur > Délier les valeurs > Bas : 4
  3. Ensuite pour ne pas arrondir les bords, dans Rayon de la bordure > 0

Et on obtient un simple trait noir épais sous le texte du bouton :

créer page site elementor menu design titres onglets

On va rapprocher au maximum la bordure du texte. 

Donc toujours dans l’onglet Style, en dessous dans marge interne, on va délier les valeurs et mettre 0 sur la marge du bas

créer page site elementor menu marge onglet

Et enfin on va mettre une couleur à la bordure, juste au dessus toujours dans l’onglet Style, dans un bleu clair : 

créer page site elementor menu couleur soulignement
On obtient le bouton lorsque l'onglet est actif.

Maintenant on veut que lorsque la souris passe dessus, le bord bleu souligné devienne gris. 

On va donc dans l’onglet Style dans Au Survol, pour paramétrer le style lorsque la souris passe sur le bouton. 

Puis Couleur de la bordure > Gris :

créer page site elementor menu couleur bordure

On obtient ainsi le premier bouton de notre menu, le bouton Home (donc l’onglet actif) souligné en bleu et lorsqu’on passe la souris dessus, le trait devient gris. 

créer page site elementor menu couleur survol

Maintenant pour les autres c’est extrêmement simple, il s’agit du même mais la bordure est transparente et lorsque la souris passe dessus elle devient grise. 

Donc on duplique le premier bouton Home, on le glisse à côté et on le renomme.

Puis dans l’onglet Style sous Normal > Couleur de la bordure, on met transparent :

créer page site elementor menu couleur bordure

Ensuite on supprime le premier bouton, pour ne garder que celui-ci qui est bien paramétré. 

Et il ne reste plus qu’à le dupliquer à son tour et le faire glisser sous les autres onglets, le renommer et supprimer les anciens boutons. 

Et on obtient son menu avec l’onglet actif souligné en bleu et les autres onglets qui sont soulignés gris au passage de la souris : 

créer page site elementor menu design titre onglets

Ajouter les liens dans son menu :

Il nous reste alors à ajouter les liens sur les boutons. 

Dans le Tableau de bord on va dans Pages > Toutes les pages. 

Et par exemple on va prendre la page Blog

créer page site elementor menu page blog url

Sous la barre de droite Permaliens, on récupère l’url de la page : 

créer page site elementor menu permalien page

Et dans le bouton dans l’onglet contenu, on colle le lien

créer page site elementor menu lien bouton

Et on fait ça pour l’ensemble des pages de son menu : les pages dans les onglets, les réseaux sociaux et l’image qui généralement renvoi vers la Homepage

On a ainsi créé notre menu

Passons rapidement au Footer qui va être un équivalent du menu dans sa création.

Créer le Footer

Voici à quoi ressemble le footer de la page de Nathan : 

créer page site elementor footer modèle

Première chose, on repère la grille, ensuite on la reproduit, on met ses éléments dedans, on design puis on paramètre

Dessiner la grille de sa section :

Pour avoir la grille on a la section qui fait tout le tour, ensuite les colonnes principales et les sous-colonnes à l’intérieur de chaque colonne. 

Ce qui nous donne : 

créer page site elementor footer grille

On va donc reproduire la même chose avec : 

  • Une section 
  • Une colonne 1
  • Une colonne 2 contenant 4 sous-section de 1, 2, 1 et 2 colonnes 
  • Une colonne 3

Donc on crée en dessous une nouvelle section de 3 colonnes et on y fait glisser nos sous-sections. 

Reproduire la grille avec Elementor :

Donc on crée en dessous une nouvelle section de 3 colonnes et on y fait glisser nos sous-sections

Ce qui nous donne : 

créer page site elementor footer ajouter section

Ajouter les éléments dans la grille :

Ensuite on fait glisser l’ensemble des éléments qu’on trouve dans le footer au bon endroits de notre grille. 

Tout ce qu’on peut réutiliser, on va le dupliquer et le faire glisser, par exemple le bouton de contact ou les boutons du menu.

Le logo on le récupère sur le site de Nathan.

Ensuite on ajoute les éléments qui manquent comme le séparateur dans la première colonne.

Ce qui nous donne : 

créer page site elementor footer ajouter contenu

Designer ses éléments de footer :

Maintenant que tous les éléments sont là, on va les designer. 

Donc on commence par le fond de section qui va être dans un bleu foncé. 

Dans Section > Style >Type d’arrière plan > Classique > Couleur :

créer page site elementor footer couleur section

Ensuite il suffit de faire les colonnes une par une et de designer chaque éléments.

Pour la première colonne on passe le titre en blanc, on change la taille.

Ensuite on passe le séparateur en couleur blanche et semi-transparente. 

Enfin on passe change la typographie des copyrights pour copier au maximum notre modèle. 

On se retrouve avec : 

créer page site elementor footer design titre bouton

Et on continue avec la seconde colonne

Ici il s’agit de bouton qu’on est allé récupérer sur le menu. 

Sur la page de Nathan, le bouton a une écriture blanche avec un fond transparent et une bordure inférieure blanche semi-transparente qui devient blanche épaisse au passage de la souris

créer page site elementor footer souligner au survol

Donc déjà on passe le texte en blanc légèrement transparent et on enlève la couleur blanche de fond pour ne mettre que du transparent : 

Dans l’onglet Style, on met en couleur du texte : blanc semi-transparent 

Couleur de l’arrière plan : transparent 

Dans Typographie on va essayer de coller au maximum avec la page de Nathan avec du Times New Roman et un graisse à 100 pour avoir des lettres très fines. 

Ce qui nous donne : 

créer page site elementor footer designer boutons

Puis au niveau de la bordure inférieure, on va lui mettre, comme sur la page de Nathan : 

  • Une largeur très fine donc à 1
  • Une couleur blanche semi-transparente
  • Et une marge interne de 2 en bas pour l’éloigner légèrement du texte.

Ce qui nous donne : 

créer page site elementor footer design texte

Il ne nous reste maintenant plus qu’à gérer le comportement lorsque la souris passe sur le bouton

La bordure devient alors simplement plus blanche. 

Donc sur le bouton, toujours dans l’onglet Style, on va dans Au Survol et dans couleur de la bordure, on met un blanc :

créer page site elementor footer bouton au survol

Maintenant on duplique notre bouton et on change simplement le texte du contenu du bouton pour s’éviter d’avoir à paramétrer chaque bouton. 

Ainsi on obtient le contenu de notre deuxième et troisième colonne

créer page site elementor footer

Peaufiner le design : Alignement et espaceurs

Il ne nous reste plus qu’à peaufiner le design. 

Premièrement on va régler la largeur des colonnes.

La première colonne est plus étroite. 

Donc on place la souris à l’intersection des colonnes et on les fait glisser à gauche ou à droite pour régler la largeur : 

créer page site elementor footer ajouter marges

Ensuite on va ajouter les espaceurs en haut et en bas : 

créer page site elementor footer espaceurs

On va dans les colonnes et on va régler l’espace des widgets pour les resserrer entre eux. 

Colonne > Mise en page > Espace des Widgets : 5

créer page site elementor footer réglage colonnes
Les boutons sous la colonne catégorie vont se resserrer en hauteur.

Puis on va gérer les marges internes de chaque colonne. 

Donc on clique sur la colonne principale (une des 3 colonnes dans la première section) et dans l’onglet Avancé, on va mettre : 

  • Colonne 1 : Marge 20
  • Colonne 2 : Marge 10
  • Colonne 3 : Marge 10
créer page site elementor footer marges colonnes

Et dans la section qui contient le footer on va dans l’onglet Mise en page et on va mettre dans Largeur du contenu > Encadré : 1100

créer page site elementor footer largeur contenu

On fait les derniers ajustements : 

Le logo, on va lui mettre une marge interne uniquement à droite pour le laisser collé à gauche mais réduire sa taille : 

créer page site elementor footer logo

On ajoute un petit espaceur dans la colonne du milieu pour écarter les blocs de boutons :

créer page site elementor footer espaceur

Et on obtient notre pied de page qui ressemble à celui de Nathan. 

Il faudra maintenant ajouter les liens vers chacune des pages comprise dans le pied de page. 

créer page site elementor footer

Créer des modèles de menu et pied de page

On va voir comment enregistrer des modèles et comment les importer sur une page.

Enregistrer une section comme modèle :

Maintenant qu’on a créé notre menu et notre pied de page, on va les sauvegarder en tant que modèle afin de pouvoir les réutiliser sur toutes les nouvelles pages que l’on crée. 

Pour sauvegarder une section c’est très simple. 

On fait clique droit sur la section > Enregistrer comme modèle

créer page site elementor menu enregistrer

Ensuite il suffit de nommer l’élément qu’on souhaite enregistrer, pour pouvoir le retrouver ensuite dans sa bibliothèque

créer page site elementor enregistrer dans sa bibliothèque

Et l’élément est bien sauvegardé dans la bibliothèque de modèles

créer page site elementor bibliothèque de modèle

Importer un modèle sur une page :

Pour importer un modèle dans une page, il suffit juste de créer une nouvelle section et de cliquer sur l’icône du dossier pour accéder à la bibliothèque

créer page site elementor importer modèle bibliothèque

Dans la bibliothèque, on sélectionne l’onglet Mes modèles

créer page site elementor bibliotheque mes modeles

On choisit le modèle que l’on veut importer, ici par exemple le menu qu’on vient d’enregistrer et on clique sur le bouton Insérer :

créer page site elementor insérer un modèle

On choisit Oui

créer page site elementor importer modele réglages

Et on a bien notre menu qui est importé sur notre page :

créer page site elementor menu importé page

Il peut y avoir des problèmes d’affichage au moment de l’importation, avec la page qui se remet en template Par Défaut

créer page site elementor template

Dans ce cas, dans réglage de la page, il suffit simplement de garder sous Modèle de page : Elementor Canevas

créer page site elementor canevas

Maintenant qu’on a notre page finale : 

créer page site elementor homepage finale

On va pouvoir la publier et la mettre en HomePage de notre site. C’est a dire la page d’accueil lorsque quelqu’un va taper notre url.

Publier une page Elementor et la lier au menu

La première chose à faire est donc d’enregistrer notre page en cliquant sur le bouton vert dans Elementor : Mettre à jour

créer page site elementor mettre à jour

Retourner dans l'Editeur WordPress :

La publication d’une page et le fait de la lier à un menu se fait sur le Tableau de bord. 

Donc on va retourner sur notre Tableau de bord WordPress. 

Pour ça on clique sur l’icône hamburger (les trois barres horizontales) : 

créer page site elementor icone hamburger

Puis sur Revenir à l’Editeur WordPress

créer page site elementor revenir editeur wordpress

Mettre la page en ligne :

Sur notre page (à laquelle on accede depuis Tableau de bord > Pages > Toutes les pages), on va mettre la page en Public. 

Donc dans Etat et Visibilité on choisit Public

Puis on clique sur le bouton Mettre à jour

créer page site elementor page public

Et maintenant que notre page est en ligne, on va aller la lier à notre menu

Lier sa page au Menu :

Donc on va aller dans Tableau de bord > Apparence > Menu

Et dans la liste des pages, on coche la page qu’on souhaite ajouter au menu, donc celle qu’on vient de créer, et on clique sur le bouton Ajouter au Menu

créer page site elementor ajouter au menu

Puis dans Structure du menu juste à droite, on place la page ou on veut qu’elle apparaisse dans le menu. 

Ici c’est notre HomePage donc en premier : 

créer page site elementor ajouter homepage menu

On ouvre et on renomme notre page. Ici Home, puisque ça va être notre HomePage : 

créer page site elementor renommer label menu

Et enfin on supprime la page Home qui existait déjà pour avoir notre nouveau menu

créer page site elementor menu wordpress

Puis on enregistre en cliquant sur le bouton Enregistrer le menu

créer page site elementor enregistrer le menu

Donc on vient de lier notre page au bouton Home du menu

Maintenant il ne nous reste plus qu’à indiquer à WordPress d’utiliser cette page en tant que page d’accueil

Mettre sa page Elementor en page d'accueil du site :

On a déjà vu comment mettre une page en page d’accueil

Il suffit d’aller dans Réglage > Lecture et sous La page d’accueil affiche, de choisir Une page statique puis de sélectionner la page à afficher, ici la page de Nathan Barry qu’on a créé :

créer page site elementor définir homepage

On enregistre en cliquant sur Enregistrer les modifications

créer page site elementor enregistrer modifications

Et si on tape l’url de notre site, on a bien la page qu’on vient de créer sur Elementor qui s’affiche en page d’accueil

créer page site elementor homepage
Bazinga !

Conclusion

On est maintenant complètement capable de créer un site de A à Z

On a appris ici à créer des pages totalement personnalisables, avec les éléments que l’on souhaite avoir dedans, un design propre et des animations de boutons et d’éléments à l’intérieur. 

Maintenant on va pouvoir créer l’ensemble de ses pages, les lier à un menu et les publier

 

Il nous reste avant de terminer ce cours sur la création d’un site, une dernière chose à voir : L’optimisation de ses pages pour un affichage mobile

Avoir un site responsive, c’est à dire qui s’affiche aussi bien sur les écrans d’ordinateurs que sur mobile est primordial puisque le trafic mobile va représenter une part très importante de notre trafic. 

C’est également un prérequis en SEO (Search Engine Optimization) puisque Google va privilégier les sites avec un bon affichage mobile (et inversement pénaliser ceux avec un mauvais affichage). 

Commençons donc avec ce dernier chapitre.