Les bases du fonctionnement de l’interface Elementor sur une page

L’interface Elementor : les premières fenêtres

1. Le bouton vous permet d’accéder au menu général, notamment pour paramétrer les réglages d’Elementor et pour revenir à l’éditeur WordPress
2. Le bouton en forme de pavé revient au menu principal affichant tous les éléments que vous pouvez utiliser
3. Les éléments correspondent à la liste de tous les blocs que vous pouvez utiliser pour alimenter la page Elementor
4. Le sous-menu affiche des raccourcis dans l’ordre de gauche à droite :
   1. L’engrenage affiche les paramètres de la page
   2. Le feuilleté affiche / cache le navigateur
   3. L’horloge affiche l’historique de vos modification, vous pouvez revenir en arrière en cas d’erreur
   4. Le mobile permet de prévisualiser votre site sur PC, tablette et mobile
   5. Affiche un aperçu de votre page dans un nouvel onglet
   6. Le bouton principal permet d’enregistrer vos changements
5. Vous disposez d’un aperçu live de votre page. Vous pouvez également interagir avec les éléments directement ici.

Le concept d’Elementor : les blocs imbriqués

Pour comprendre comment sont imbriqués les éléments, vous pouvez ouvrir le « navigateur » afin de mieux visualiser la structure du code.

En bas à gauche, cliquer sur le logo feuilleté et vous afficherez le navigateur Elementor.

Dans Elementor (et dans le web en général) chaque élément que vous insérez dans la page est obligatoirement inclus dans au moins une section et une colonne. On appelle ça des conteneurs.

Le « navigateur » d’Elementor vous permet de voir l’arborescence de votre site. C’est à dire les blocs parents et tous les blocs qui sont contenus dans ce bloc parent.

Vous pouvez interagir et accéder aux options de chaque élément depuis cette interface en faisant un clic droit sur l’élément en question dans le navigateur.

La première chose à faire, est donc d’ajouter une section. Il vous suffit de cliquer sur le bouton « + » pour ajouter une section et sélectionner le nombre de colonnes.

Les options d’éléments et de blocs

Pour chaque élément, vous avez dans le menu latéral 3 onglets :

1. L’onglet « Contenu » régit les options généraux de l’élément. C’est ici que vous pourrez modifier les textes, images, etc.
2. L’onglet « Style » contient toutes les options concernant l’esthétisme de l’élément. Les couleurs, la typographie, les bordures, l’ombrage, etc.
3. L’onglet avancé est sensiblement identique pour tous les éléments. Ce sont des paramètres génériques comme la marge externe, marge interne, les bordures, l’arrière plan, les transitions, etc..