Présentation du tuto
Dans ce premier tuto de la série Tip Elementor , nous allons nous concentrer sur un sujet qui concerne la première page, le premier visuel qu’aura l’internaute en arrivant sur ton site : le header accompagné de son menu. Traditionnellement et dans beaucoup de design on trouve en effet une image fullscreen et un menu fixé en haut de de page, superposé sur cette bannière. C’est ce que tu vas apprendre à faire dans ce tuto.
Etape 1 : Définir notre espace de travail
Une première étape indispensable : se situer sur une page/un article. Cliques ensuite sur l’icône du “+” sur fond rouge pour ajouter une section. Pour rappel, une section (ou une section interne) est symbolisée lors du survol par un encadré bleu, avec un petit encart au centre supérieur et composée de 3 icônes :
-
"+" pour rajouter rapidement une autre section au-dessus
-
Les 6 petits points pour accéder à tous les réglages
-
Le "x" pour supprimer la section. Attention : pas de confirmation
Une fois la section créée, on peut lui donner un ID , une sorte de carte d’identité qui identifie de manière unique le bloc sur la page. Cette étape est facultative, mais elle peut être utile si on veut venir personnaliser ce bloc ultérieurement en CSS.
Etape 2 : Intégrer et Définir la hauteur de notre section interne
Depuis la liste des blocs, on ajoute une section interne dans notre section précédente. On supprime l’une des deux colonnes (clic droit sur l’icône blanche sur fond gris qui apparait lors du survol de la colonne, puis “Effacer”). Toujours dans la section interne, on retourne dans la partie “Mise en page” et on sélectionne “Pleine largeur” dans la liste déroulante intitulée “Largeur du contenu“.
La section interne étant maintenant en pleine largeur, on s’attaque à sa hauteur : dans la liste déroulante “Hauteur” , on sélectionne “Hauteur min“. Ensuite, via le slider qui apparaît, on sélectionne la valeur “VH” (viewport height / hauteur de la zone d’affichage) et non “PX” comme définit de base. Enfin on glisse le slider pour atteindre 100.
À cette étape, on finit une section interne qui va prendre toute la largeur de l’écran du visiteur , mais également toute sa hauteur (100 vh signifiant 100% du viewport height / hauteur de la zone d’affichage). Également, le petit symbole “+” au centre de la section nous montre que l’on va pouvoir librement placer d’autres blocs par la suite.
Etape 3 : Tester notre structure avec un fond de couleur
Une petite pause test s’impose ! Avant d’aller plus loin, on s’assure que notre fond s’appliquera bien sur toute la section et pas uniquement sur la section interne. Pour ce faire, sélectionne la section principale (pas la section interne qu’on a réglée juste avant, mais sa parente) et rends toi dans la partie Style. Dans l’accordéon “Arrière-plan”, sélectionne le petit pinceau dans “Type d’arrière-plan”, puis ouvre le sélecteur sur la ligne “Couleur”. Si tout va bien, l’intégralité de la section doit se colorer.
Etape 4 : Intégrer une section interne pour le menu et l'adapter
Maintenant que notre bloc principal (Section) est prêt, et contient bien une première section interne (celle en pleine hauteur), on va rajouter une autre section interne au dessus de la précédente. Elle nous servira pour le menu. Comme pour la précédente, si l’on veut un menu simple, on supprime une des deux colonnes et on applique la “Pleine largeur“.
NOTE : La suppression d’une des colonnes ne vaut que si l’on veut un menu en pleine largeur. Par exemple, si l’on souhaite avoir sur la même ligne un logo à gauche et le menu à droite, on garde les deux colonnes et il suffira de régler la largeur des colonnes (mais c’est un autre sujet).
Si ce n’est pas déjà fait , pensez bien à “Publier” ou “Mettre à jour” votre page. Sinon vos modifications ne sont pas enregistrées !
Etape 5 : Intégrer notre bloc de menu (Simple Menu)
NOTE : cette partie nécessite un plugin tiers pour Elementor, Essential Addons for Elementor
Nous avons maintenant deux sections internes (une pleine hauteur et l’autre intégrée au dessus). Après avoir installé le plugin Essential Addons et l’avoir activé, cherches le bloc “Simple Menu” dans la liste des blocs Elementor puis insère le dans la section interne du haut. À partie de la deux choses peuvent se produire :
Dans ce cas tout est bon, le menu crée devrait automatiquement s'afficher. Si tu as plusieurs menu, tu pourras choisir lequel afficher dans la liste déroulante, dans les options du bloc Simple Menu.
Aïe, aïe, aïe petit oubli ... Pas de panique, tu peux toujours aller créer un menu après. Pour cela, deux possibilités, soit tu clic sur le petit lien sous la liste déroulante qui est présent dans les options du bloc Simple Menu, soit tu retourne dans le back-end de WordPress, puis dans Apparence > Menu.
Une fois que la barre de menu s’affiche bien, on peut toute de suite retirer l’espèce de gouttière blanche tout autour du bloc. Il s’agit d’une marge interne par défaut, qui est appliquée par Elementor sur chaque objet de type Colonne. Pour cela on sélectionne la colonne , on va dans l’onglet Avancé puis dans “Marge interne” on inscrit 0 dans les quatre boîtes de texte.
Etape 6 : Insérer notre image de fond sur la section
Nous avons notre menu qui est affiché, donc passons à l’intégration de notre image définitive de fond. Pour cela, on re sélectionne la section principale (et pas les sections internes) et on va dans l’onglet STYLE. Dans le premier accordéon “Arrière-plan” on sélectionne cette fois “Image” et on choisit l’image qui sera mis en fond. Quelques réglages sont importants :
Représente le point d'ancrage de l'image (Centré/Centré la place en plein milieu).
Permet principalement de fixer l'image pour offrir certains effets au défilement.
Option importante , car la valeur par défaut n'est pas optimale. Permet ou évite la répétition de l'image en cas de taille d'image inapropriée
Sans doute l'option la plus importante pour le contexte, permet de savoir si l'image va s'étirer dans le contenant, s'afficher complétement (ou personnaliser totalement la valeur).
Arrivés ici, nous avons notre barre de menu et notre image bien intégrée dans le fond. Pour finaliser le tout, on sélectionne le bloc de menu (Simple Menu) et dans l’onglet STYLE on ouvre le sélecteur de couleur, et on joue cette fois-ci sur le slider de transparence (sous celui de couleur) pour le placer à 0.
CONCLUSION : on résume tout !
Section et sections internes
Pour bien construire avec Elementor (et de manière générale un site), il faut bien comprendre les structures.
- En premier lieu se trouve la page/l'article
- Dans chaque page/article, on intègre des sections (via le bouton "+" sur fond rouge)
- Dans chaque section on peut placer des blocs mais surtout des section internes (qui permettent de travailler horizontalement/en colonne).
Pleine largeur et pleine hauteur
Pour chaque section / section interne , on peut définir une largeur absolue (px/vw/%/rem) ou une largeur “fluide” (tout le contenant). Ces valeurs simples permettent de nombreuses variantes de design.
Menu & affichage du menu
Comme vu à de nombreuses reprises, un menu sous WordPress se créer dans le back-end (création + ajout des liens qui seront dans le menu) et on l’affiche ensuite via Elementor (bloc). Bien logiquement , si l’on à aucun menu de crée , on ne peut pas en afficher !
IMAGE VS BACKGROUND
Il ne faut pas confondre le bloc Image avec la fonction “Arrière-plan”. Un bloc image à des propriétés particulières et va se placer sous ou au-dessus des autres blocs. Un arrière-plan s’applique, lui, à tous les blocs et possède des options pour l’adapter au contenant.
