Elementor est un constructeur de pages basé sur les “conteneurs”.
Chaque conteneur peut contenir des “blocs” (titre, texte, image, FAQ…) ou d’autres conteneurs, être défini en hauteur et largeur, avoir ses propres bordures, marges, etc.
Ils se manipulent par glisser-déposer, copier-coller, peuvent être dupliqués….
Je te détaille tout ça !
Modifier une page créée avec Elementor.
Il existe deux façons d’accéder à une page créée avec Elementor.
Depuis ton dashboard
Via le menu “Pages”.
Depuis la page elle-même
Lorsque tu parcours ton site en étant connecté(e) en tant qu’admin ou rédacteur, tu dispose d’une barre d’administration en haut de chaque page.
Lorsque celles-ci ont été créées avec Elementor, tu peux voir un bouton “Modifier avec Elementor”.
Il est possible que des “modèles” soient également liés à ta page (en-tête, pied de page, boucle…), si c’est le cas, ils apparaitront juste en dessous, mais attention de cliquer sur “Modifier avec Elementor” pour ouvrir la page en cours !
Ajouter un conteneur sur une page.
Un conteneur est à la base de la création de tes pages, sans conteneur, tu ne pourras ajouter aucun widget.
Créer/ajouter un conteneur
Depuis ta page, il te suffit de cliquer sur “+”, puis de sélectionner “Flexbox” et la structure de ton conteneur. C’est tout !
Pour ce qui concerne les différentes structures de conteneurs, ça se passera dans les “Fonctions avancées” !
Ajouter un widget sur une page.
Quel que soit l’élément que tu souhaites ajouter sur ta page (container, widget), tu peux le faire de deux façons différentes.
Glisser/déposer
Depuis le panneau Elementor, clique et dépose l’élément sur ta page à l’endroit où tu souhaites l’utiliser.
Par clic
Sélectionne dans ta page, l’endroit où tu souhaites placer ton widget, puis cliques sur celui-ci dans le panneau de gauche.
Supprimer un élément sur une page.
S’il est simple d’ajouter un élément sur une page avec Elementor, il l’est tout autant d’en supprimer. Là encore, deux méthodes.
Avec le clic droit
Après avoir sélectionné l’élément, il te suffit de faire un clic droit, puis “Effacer”.
Attention, les containers sont comme des poupées russes, supprimer un container supprime également tout son contenu !
Avec le navigateur
Il arrive parfois qu’un widget occupe tout un container. Dans ce cas, et pour ne pas supprimer le container, le Navigateur te permet de choisir plus précisément l’élément à supprimer puis, avec un clic droit, de l’effacer.
Déplacer un widget sur une page.
Envie de remettre de l’ordre dans ta page ou tout simplement de déplacer un widget ?
Déplacer un widget par glisser/déposer
La méthode la plus intuitive lorsque l’on travaille sur une page, tu attrapes ton widget et tu le déposes à son nouvel emplacement.
Déplacer un widget avec le Navigateur
Lorsque ta page comporte des éléments imbriqués les uns dans les autres, le “glisser/déposer” n’est pas toujours efficace. Ton widget peut se retrouver à coté de l’emplacement prévu. Rien de très grave mais tu as autre chose à faire que d’essayer de bien viser 20 fois de suite…
Pour aller plus vite, tu peux utiliser le navigateur pour déplacer ton widget.
Dupliquer un container/widget sur une page.
Dupliquer un widget au même emplacement
Elementor dispose d’une fonction “Dupliquer” accessible avec le clic droit. L’élément dupliqué se positionne juste après l’élément d’origine.
Tu peux également faire un clic droit avec le Navigateur.
Copier un widget/conteneur
Si tu veux copier un élément à un autre emplacement, tu peux aussi faire un copier/coller !
Afficher/masquer un widget sur mobile.
Je t’en ai déjà parlé plusieurs fois sur le blog mais un site doit être Responsive (accessible sur tous formats d’écrans). Et ce qui est efficace et/ou joli sur desktop (beaucoup d’images, des carrousels…) ne le sera pas forcément sur mobile ou tablette.
Elementor permet d’adapter le contenu de tes pages en masquant/affichant les widgets et conteneurs selon la taille des écrans qui seront utilisés.
Il te suffit de sélectionner ton élément, de cliquer sur l’onglet “Avancé”, puis responsive et de choisir les écrans sur lesquels tu souhaites le masquer. Easy, non ?
Personnaliser un widget.
Si ton site dispose de réglages globaux (couleurs, typographies, bordures, marges…) qui s’appliquent par défaut à tous tes éléments, il est possible de les outrepasser et de personnaliser chaque widget/conteneur individuellement.
Chacun dispose de 3 onglets :
- Contenu
- Style
- Avancé
“Style” concerne les typographies, couleurs, alignements, boutons (si le widget en a un), etc.
Tandis que l’onglet “Avancé” est relatif au positionnement, mouvements, arrière plans, responsive…
Modifier les marges d'un conteneur
Là encore, pour conserver une mise en page uniforme et agréable à lire, les marges internes des conteneurs sont paramétrées pour s’adapter aux différentes tailles d’écran.
Si tu ajoutes des conteneurs imbriqués, elles seront trop importantes. Mais tu peux corriger cela en 2 clics ! Après avoir sélectionné ton conteneur, dans l’onglet “Avancé”, tu peux passer les marges à 0px.
Modifier les ecarts dans un conteneur
Par défaut, les écarts entre tes widgets sont de 20px, mais il peut arriver que tu souhaites augmenter ou réduire ces écarts.
