CHAPITRE VII

Elementor : apprendre à utiliser un constructeur de page pour son site

Maintenant qu’on a vu comment installer Elementor et comment s’organise le plan de travail, on va aller voir en détail comment paramétrer les 3 types d’éléments qu’on va retrouver sur une page : 

Les Sections : qui forment l’architecture de la page

Les colonnes : qui forment l’architecture des sections

Les widgets : qui sont les éléments de contenu et qui se trouvent à l’intérieur des colonnes. 

Sommaire chapitre 7 :

Paramétrer les Sections de sa page

Donc maintenant qu’on comprend bien le principe de grilles, on va voir les paramètres qu’on trouve dans chaque éléments. 

Et on commence par la Section

Les paramètres rapides d'une Section :

Au dessus de la section on a 3 icônes

constructeur wordpress elementor plugin parametre rapide section

Icône + permet d'ajouter une section

La première permet d’ajouter une section au dessus :

constructeur wordpress elementor plugin ajouter section au dessus

Icône x permet de supprimer la section

Cette icône permet d’effacer la section et l’ensemble des colonnes et widgets qu’elle contient. 

constructeur wordpress elementor plugin effacer section

Icône ::: permet d'accéder aux paramètres

Cette icône permet d’accéder aux paramètres de la section dans le panneau de gauche : 

constructeur wordpress elementor plugin accéder aux paramètres

Ou de saisir la section pour la déplacer sur la page : 

constructeur wordpress elementor plugin deplacer section

Le clic droit offre des paramètres de structure :

En faisant clic droit sur une des trois icônes, on a des paramètres rapides. 

On va pouvoir Dupliquer la section, la copier, coller, coller le style ou l’enregistrer comme modèle pour la réutiliser sur une autre page. 

Enfin la supprimer :

constructeur wordpress elementor plugin clic droit

Donc maintenant qu’on a vu l’accès aux paramètres rapide, on va pouvoir utiliser ces paramètres pour designer notre section. 

On va donc cliquer sur la section sur l’îcone ::: pour accéder au panneau de design

constructeur wordpress elementor plugin accéder aux paramètres

Le design d'une Section :

Donc on va se concentrer sur ce panneau de design

Il aura toujours la même structure que l’on soit sur une section, une colonne ou un élément

On va y retrouver à peu près les même choses. 

Pour l’exemple on va partir d’une autre section qui va nous permettre de bien comprendre comment chaque paramètres influent sur le résultat final : 

constructeur wordpress elementor plugin design
On va utiliser comme exemple une section avec deux colonnes contenant un titre, texte et bouton.

En haut on a 3 onglets : 

  • Mise en page : Ici on retrouve tous les paramètres de base sur le contenu et le paramétrage du contenu
  • Style : Ici tout ce qui est relatif aux polices, couleurs, arrière plan 
  • Avancé : Tout ce qui est relatif aux marges internes, externes, arrondis, etc. 
constructeur wordpress elementor plugin onglets paramètres

On commence donc avec l’onglet Mise en page

Onglet Mise en page :

constructeur wordpress elementor plugin onglet design

Ici on va retrouver donc deux choses : 

  1. Le contenu 
  2. L’agencement de ce contenu

Dans une section, le contenu sont les colonnes

Car il y a toujours une ou plusieurs colonnes à l’intérieur d’une section. 

Donc ici on va pouvoir paramétrer le contenu de notre section et son agencement. Donc comment s’organisent les colonnes sur la page. 

Première chose, la Largeur du contenu

constructeur wordpress elementor plugin largeur section

Pleine largeur signifie que les colonnes vont s’étaller sur toute la largeur de la page

Encadré signifie qu’on va pouvoir leur mettre des marges pour les restreindre dans une largeur maximale

On va choisir encadré

Pour l’instant on est à 800 px de largeur : 

constructeur wordpress elementor plugin largeur section
Largeur de la colonne à 800 px

Si par exemple ou passe le cadre à 1100px, on voit que les colonnes vont s’étendre en largeur car on leur donne plus de place

constructeur wordpress elementor plugin design
Largeur de la colonne à 1100 px

Et inversement si on met une valeur basse comme ici 400 px, on va les contraindre dans un cadre plus fin et donc les resserrer

constructeur wordpress elementor plugin largeur section
Largeur de la colonne à 400 px

Ensuite Ecart des colonnes on verra ça dans l’onglet Avancé

Mais ça permet de faire un réglage rapide avec les marges internes

Pareil pour Hauteur on verra ça dans l’onglet Avancé :

constructeur wordpress elementor plugin hauteur section

Position du contenu c’est comment se positionne le contenu à l’intérieur de la section

constructeur wordpress elementor plugin position contenu

Par exemple en haut

constructeur wordpress elementor plugin position haut

Ou en bas

constructeur wordpress elementor plugin position bas

Enfin la balise HTML

C’est pour permettre aux moteurs de recherche de comprendre de quel type de section il s’agit. 

Si un moteur arrive bien à lire notre page, il aura tendance à mieux la référencer donc la faire remonter dans les résultats de recherche.

Donc ce n’est pas obligatoire mais si on veut faire les choses bien il faut l’indiquer : 

constructeur wordpress elementor plugin balise seo

Voici comment choisir : 

  • div : lorsque ca ne correspond à rien d’autre dans la liste.
  • header : si c’est une section d’ouverture de la page (souvent la première section contenant le titre de la page).
  • footer : Si cette section correspond au pied de page.
  • main : C’est un contenu principal de la page, souvent il s’agit de l’introduction ou du résumé en haut de la page. Attention : une seule balise main par page.
  • article : comme son nom l’indique, il s’agit d’une section de type article donc avec généralement un titre, du contenu, des images mais qui peut vivre par lui même et qui a du sens si on l’extrait du reste de la page. 
  • section : Il s’agit d’une partie logique de la page. Par exemple un bandeau contact ou un bandeau recherche ou un bandeau avec des retours clients. Comme on a pu les construire sur notre Homepage avec le theme. 
  • aside : il s’agit d’une partie indépendante avec les autres sections par exemple une citation extraite d’un texte peut être mise avec la balise aside. 
  • nav : il s’agit d’un menu ou d’un élément de navigation. 

On va passer à l’onglet Style

Onglet Style :

constructeur wordpress elementor plugin style onglet

Ici on va gérer tout ce qui concerne l’arrière plan, la typographie etc. 

Commençons par l’arrière-plan : 

On a Normal et Au survol. 

Pour Normal, on va faire nos paramètres d’arrière plan. Au survol c’est lorsque la souris passe sur la section, on va pouvoir changer par exemple les paramètres (couleur, taille etc).

constructeur wordpress elementor plugin normal au survol

On reste sur Normal. 

Ensuite on a le Type d’arrière plan

Ici on va pouvoir mettre 3 type d’arrière plan à notre section : 

constructeur wordpress elementor plugin normal

Premier c’est le Classique

Une couleur ou une image

constructeur wordpress elementor plugin couleur arrière plan section
constructeur wordpress elementor plugin image arrière plan section

Le second c’est Dégradé qui va nous permettre de définir deux couleurs pour faire un dégradé

constructeur wordpress elementor plugin couleur dégradé arrière plan

Et enfin on a le troisième type qui est Vidéo d’arrière plan, qui va nous permettre, en collant un lien YouTube et en définissant la seconde du début et de fin, d’afficher une vidéo en arrière plan

constructeur wordpress elementor plugin vidéo arrière plan section

Si on met une image en arrière plan on va avoir plusieurs paramètres intéressants : 

Déjà la position de l’image, c’est à dire comment la centrer par rapport à la section :

constructeur wordpress elementor plugin arriere plan

Ensuite, sous le nom étrange de Fichier Joint, on va pouvoir définir si l’image reste fixe ou est mobile lorsque l’on scroll le long de la page. 

Si on met fixe, ça donne un effet parallax avec le fond qui est fixe et tous les éléments qui bougent au dessus : 

constructeur wordpress elementor plugin fichier joint

Puis la répétition, si par exemple on a une petite image, on peut la répéter pour créer un motif

Il faut faire très attention avec la répétition ç’est souvent très mal utilisé et le rendu est terrible. 

Donc bien pour des motifs mais à ne surtout par faire avec des photos : 

constructeur wordpress elementor plugin image non répété

Et dernier paramètre, la taille, c’est à dire comment est ce que l’image s’insère dans l’arrière plan de la section : est ce qu’elle apparait en entier, est ce qu’elle recouvre toute la section, etc. : 

constructeur wordpress elementor plugin taille image arriere plan

Ensuite on continue dans l’onglet Style, on a Superposition d’arrière-plan

constructeur wordpress elementor plugin superposition arriere plan

On va pouvoir ajouter un filtre par dessus notre arrière plan. 

On a plusieurs paramètres : 

Déjà la couleur

1. On sélectionne une couleur 

constructeur wordpress elementor plugin couleur superposition
La couleur simple.

Ensuite son opacité : plus ou moins transparente

constructeur wordpress elementor plugin opacité superposition arriere plan
On règle la transparence avec l'Opacité.

Et enfin son mode de fusion.

C’est à dire comment est ce que ce premier plan va fusionner avec l’arrière plan

Soit il le recouvre, soit il se mélange avec. Tester nous permet de comprendre les différents modes de fusion. Par exemple le mode Color passe tout l’arrière plan dans la couleur sélectionnée : 

constructeur wordpress elementor plugin mode fusion arriere plan
On choisit le mode de fusion entre les deux plans.

On peut également mettre une seconde image en superposition. Pas très utile mais ça peut faire des effets intéressant si on prend une image avec un fond transparent.

Par exemple ici on ajoute une image d’une femme sur un Kayak avec un fond transparent et l’image vient se superposer à la vidéo :

constructeur wordpress elementor plugin arriere plan section
On peut ajouter une image par dessus l'arrière plan.

Et on peut mettre un dégradé avec les mêmes possibilités de paramétrage que pour la couleur simple : 

constructeur wordpress elementor plugin superposition dégradé
Enfin le dégradé de couleur classique, on peut régler la transparence et la position.

On a ensuite la Bordure :

constructeur wordpress elementor plugin bordures

On va pouvoir ajouter une bordure à notre élément, ici à la section

Donc on sélectionne le type de bordure, par exemple continue et on indique une largeur et une couleur en pixels.

On a bien la bordure qui apparait autour de la section :

constructeur wordpress elementor plugin bordure

On va pouvoir ensuite dans Rayon de la bordure, arrondir les coins.

Par exemple on met 50 et on a bien un coin arrondi

constructeur wordpress elementor plugin arrondie bordure

On continue avec Forme de séparation

L’idée est d’ajouter un motif sur la bordure supérieure ou inférieure de notre section pour faire une séparation qui n’est pas une ligne droite. 

Avoir un côté légèrement déstructuré permet de rendre le site plus original. 

Donc premièrement on sélectionne si on veut travailler sur le bord du haut ou du bas

constructeur wordpress elementor plugin forme de séparation sections

Puis on choisit le motif dans la liste, exemple ici Pinceau de vagues :

constructeur wordpress elementor plugin forme separation sections

On choisit la même couleur que l’arrière plan de la section précédente, ici du blanc

constructeur wordpress elementor plugin couleur forme separation

Et on se retrouve avec un bord supérieur qui n’est plus une ligne droite mais bien avec un motif (ici de pinceau de vagues) : 

constructeur wordpress elementor plugin motif section
Les motifs permettent de faire des transitions plus originales entre les sections.

Enfin on va voir l’onglet avancé :

Onglet Avancé :

constructeur wordpress elementor plugin onglet avancé

Ici on va principalement gérer les marges externes, les marges interne et la superposition.

Pour le mode responsive on va voir ça a part parce que c’est ultra important d’avoir un site responsive et qu’il y a plusieurs manière de le gérer.

Donc première chose à voir c’est les marges (externes).

Les marges sont l’espace à mettre autour de la section

constructeur wordpress elementor plugin onglet avancé section
La marge de 50 laisse un espace de 50px avec la section précédente :

Une grande marge signifie qu’il y aura un grand espace autour de la section:

constructeur wordpress elementor plugin marge sections
Et en augmentant jusqu'à 200, l'espace s'agrandit avec la section précédente.

Inversement une marge négative va se faire chevaucher deux sections : 

constructeur wordpress elementor plugin marges section
La marge négative fait que la section déborde de 140px sur la section précédente.

Donc les marges externes vont créer de l’espacement et du chevauchement

Et en cas de chevauchement on va justement indiquer une valeur dans Index-Z juste en dessous. 

constructeur wordpress elementor plugin index-z

Il s’agit de la superposition des plans, la valeur 1 va permettre d’indiquer quel plan est au dessus de l’autre. 

Par défaut une section sera toujours au dessus de la section qui la précède : 

constructeur wordpress elementor plugin chevauchement index z
Par défaut la section contenant nos colonnes chevauche celle qui la précède.

Mais si maintenant on va sur la section précédente > Onglet Avancé > Index-Z = 1, on voit que la section précédente va passer au dessus de notre section : 

constructeur wordpress elementor plugin index z
En indiquant un valeur index-z = 1 on fait passer la section au premier plan.

C’est donc de cette manière qu’on gère le chevauchement des section sur le plan z.

On passe maintenant aux marges internes : elle vont servir à créer un espacement à l’intérieur de la section avec son contenu. 

Par exemple si on met zéro marge interne, voici à quoi ressemble la section : 

constructeur wordpress elementor plugin colonnes
Les colonnes sont totalement collée au bord supérieur et inférieur de la section.

Et donc en ajoutant des marges interne on va écarter le contenu du bord de la section : 

constructeur wordpress elementor plugin marges internes
Les marges interne vont aérer la section en créant de l'espace autour du contenu.

Si on continue, on a Effet de mouvements

A utiliser avec parcimonie car c’est très lourd pour l’oeil et peut être vraiment désagréable. 

Par contre si on l’utilise légèrement, peut être pas sur toute une section mais sur quelques éléments, ça peut très bien rendre. 

Il va nous permettre d’appliquer une animation d’entrée à notre section :

constructeur wordpress elementor plugin animation entrée

Ensuite on va choisir la vitesse de l’animation :

constructeur wordpress elementor plugin vitesse animation entrée

Et on a une pré-visualisation de comment la section va apparaitre lorsque l’utilisateur arrive dessus : 

constructeur wordpress elementor plugin animation entrée

Et puisqu’on va voir le Responsive un peu plus tard (l’adaptation des pages sur un affichage mobile, tablette et ordinateur), on arrive à la fin du paramétrage des sections. 

On va retrouver à peu près les mêmes paramètres sur les colonnes et sur les contenus

On va voir ça tout de suite : 

Paramétrer les Colonnes de sa page

Donc on vient de voir les paramètres des sections

Au niveau des paramètres des colonnes, on va retrouver à peu près la même chose aux mêmes endroits. 

Paramètres rapides d'une colonne :

On retrouve la même chose que pour les sections. 

Pour la déplacer il suffit de saisir l’icone et de la faire glisser

constructeur wordpress elementor plugin colonnes

Et le clic droit sur l’icône de la colonne offre les mêmes options :

  • Dupliquer
  • Ajouter une colonne
  • Copier, etc.
constructeur wordpress elementor plugin colonnes

On va voir maintenant les paramètres de design de la colonne : 

Le design d'une colonne :

Donc on clique sur l’icône de la colonne et ça se passe dans le panneau de gauche

constructeur wordpress elementor plugin configuration colonnes

On retrouve les mêmes trois onglets que pour la section

  • Mise en page
  • Style
  • Avancé 

On va commencer donc par l’onglet Mise en page

Onglet Mise en page :

Ici on va pouvoir définir si on le souhaite la largeur de la colonne en pourcentage. 

Cela s’utilise uniquement si on a plusieurs colonnes.

On va pouvoir dire a Elementor : sur la zone de largeur que prennent les colonnes (définie pour rappel dans Section > Mise en page > Largeur du contenu), quelle pourcentage de cette largeur est ce qu’on souhaite que la colonne prenne. 

Pour comprendre on va dupliquer la colonne pour en avoir 2. 

Donc clic droite > Dupliquer

constructeur wordpress elementor plugin paramètres colonnes
La nouvelle colonne s'ajoute automatiquement à droite.

Si maintenant on sélectionne la première colonne et on lui indique Largeur de la colonne = 30%, on voit bien que la répartition sur la largeur de la page des deux colonnes est de un tiers et deux tiers : 

constructeur wordpress elementor plugin colonnes

Ensuite l’alignement vertical et horizontal permettent de définir comment s’alignent les contenus qui sont dans la colonne :

constructeur wordpress elementor plugin alignement colonnes

Et si par exemple on aligne vers le bas (vertical) le contenu de la première colonne on se retrouve avec : 

constructeur wordpress elementor plugin alignement colonnes

Donc l’alignement va gérer la répartition du contenu à l’intérieur des colonnes.

Ensuite on a espace entre les widgets : 

constructeur wordpress elementor plugin espacements widgets colonnes

C’est tout simplement l’espace entre tous les éléments qui se trouvent dans la colonne (Titre, texte, images, boutons etc.). 

Si on met un espace de zéro, on va supprimer l’espacement entre les widgets : 

constructeur wordpress elementor plugin espacement widgets colonnes

Et on termine par la balise html qui sont équivalentes à celles vu dans la section. 

Elles vont nous permettre de bien faire comprendre notre page aux moteurs de recherche :

constructeur wordpress elementor plugin balise seo

On passe maintenant à l‘onglet Style

Onglet Style :

Comme pour la section on va pouvoir gérer l’arrière plan de nos colonnes, la superposition d’arrière plan et les bordures

constructeur wordpress elementor plugin design colonnes

On va aller plus rapidement car c’est exactement la même chose que pour les sections. 

On va en mode normal ou au survol (de la souris), définir : 

Une couleur

constructeur wordpress elementor plugin couleur colonnes

Un dégradé

constructeur wordpress elementor plugin couleur dégradé colonnes

Ou une image avec les mêmes paramètres de Position, Fixe ou Parallax (Fichier joint), Répéter et Taille

constructeur wordpress elementor plugin image fond colonnes

Et également une superposition d’arrière plan

constructeur wordpress elementor plugin arriere plan colonnes

On a les mêmes choses que pour la section, on va pouvoir superposer au dessus de l’arrière plan une couleur

constructeur wordpress elementor plugin arriere plan colonne
Par dessus l'arrière plan on ajoute une couleur blanche transparente.

Une autre image ou un dégradé

constructeur wordpress elementor plugin fonds arriere plan colonnes
Par dessus l'arrière plan on ajoute un dégradé.

Enfin, et toujours comme pour la section, on a la possibilité de gérer la bordure autour de la colonne normal et au survol :

constructeur wordpress elementor plugin bordures colonnes

On choisit le type de bordure, la couleur et dans Rayon de la bordure, on indique la l’épaisseur :

Et dernier onglet Avancé

Onglet Avancé :

constructeur wordpress elementor plugin onglet avancé colonnes

Comme pour les sections on va définir les marges (externes) et les marges internes et la position dans l’axe Z en cas de superposition. 

Les marges vont écarter les colonnes les unes des autres.

Par exemple avec 15 de marges sur chaque colonnes on obtient : 

constructeur wordpress elementor plugin onglet avancé colonnes

Les marges internes vont écarter le contenu du bord de la colonne : 

constructeur wordpress elementor plugin écartement colonnes
La colonne de gauche a une marge interne à 50, écartant le contenu du bord.

Et comme pour la section on ne va pas aborder le responsive tout de suite. 

On va donc passer à la dernière partie de la découverte d’Elementor : les widgets de contenu.

Concrètement, que va-t-on pouvoir mettre dans ses colonnes :

Les Widgets de contenu de sa page

Les widgets de contenus sont tout ce que nous allons pouvoir faire glisser dans une colonne

Les principaux sont les titres, les textes, les images, les espaceurs, les boutons, les vidéos etc. 

constructeur wordpress elementor plugin widgets

Ensuite on a une multitude de widgets qui vont être moins utilisés mais qui vont apporter des fonctionnalités supplémentaires.

constructeur wordpress elementor plugin widgets

On ne va pas tous les passer en revue, le mieux est de tester et comprendre comment ils marchent. 

On va s’attarder sur les principaux pour bien comprendre comment ils fonctionnent et les autres se paramètrent dans la même logique.

Pour accéder à la liste des Widgets il suffit de cliquer sur l’icone des 9 points en haut de la barre de paramètre : 

constructeur wordpress elementor plugin modifier section

Paramètres rapides des widgets :

Pour ajouter un widgets il suffit de le faire glisser dans une colonne :

constructeur wordpress elementor plugin widget titre

Ensuite on a les mêmes options que pour les sections et colonnes avec clic droit : 

  • Dupliquer
  • Copier – Coller
  • Supprimer, etc : 
constructeur wordpress elementor plugin clic droit titre

Pour déplacer un widget, il suffit également de le prendre et de le faire glisser au bon endroit : 

constructeur wordpress elementor plugin ajouter titre
Ici on ajoute un second titre en dessous du premier

Et on peut faire la même chose depuis la barre de navigation (accessible sur l’icone Navigateur en bas de la barre latérale gauche) : 

constructeur wordpress elementor plugin déplacer titre

On va maintenant regarder les widgets les plus utilisés et leurs paramètres principaux. 

Design des widgets principaux :

On va commencer avec le widgets de Titre :

Les Titres :

constructeur wordpress elementor plugin titre

Premier Onglet Contenu, on va pouvoir écrire le contenu du titre et déterminer la balise HTML pour les moteurs de recherche. 

Attention une seule H1 par page. 

constructeur wordpress elementor plugin titre balise seo

Ensuite dans l’onglet Style on va pouvoir gérer la Typographie (Police, graisse, écartement des lettres etc.), la couleur, l’ombre du texte

constructeur wordpress elementor plugin design titre

Et dans l’onglet Avancé on va pouvoir gérer les marges propre au Titre. 

On a vu qu’on utilisais en générale les marges de la colonne pour écarter les éléments contenus dans la colonne du bord de la colonne. 

En utilisant les marge de l’élément (du widget), on va pouvoir avoir des marges différentes dans la colonne. 

Par exemple un titre très serré et en dessous une image collée aux bords de la colonne. 

constructeur wordpress elementor plugin marges titres
Comme il s'agit du dernier niveau d'élément, il n'y a pas de différence entre les marges et les marges internes.

Ensuite on passe au Widget images

Les Images :

constructeur wordpress elementor plugin widget image

Le premier onglet Contenu va nous permettre d’importer notre image.

On peut mettre une taille mais elle va surtout être gérée dans l’onglet Style. 

On peut ajouter une légende en dessous de l’image. 

Et un url pour rendre l’image cliquable (par exemple vers une autre page du site) :

constructeur wordpress elementor plugin ajouter image

Dans Style, c’est là qu’on va pouvoir définir une largeur et une largeur max

La différence c’est que la largeur est fixe en pixels

La largeur max est fixe en pourcentage de la largeur de l’écran. 

L’image va donc grossir en fonction de la taille de l’écran jusqu’a atteindre

  • Soit les bords de la colonne (qui elle même a une largeur maximale fixe qu’on a défini dans Section > Largeur du contenu).
  • Soit la largeur max en pixel
  • Soit la largeur max en % de l’écran

On va aussi pouvoir définir en mode normal et au survol de la souris un changement sur l’image. Par exemple d’opacité. 

Et enfin mettre une bordure :

constructeur wordpress elementor plugin ajouter image

Et dans avancé on retrouve encore les mêmes choses : les marges internes et externes, un effet de mouvement si on souhaite mettre une animation à notre élément et la possibilité de mettre un arrière plan :

constructeur wordpress elementor plugin ajouter image

On va ajouter maintenant un widget de texte

Les textes :

constructeur wordpress elementor plugin widget texte

Comme pour les titres, le premier onglet Contenu va servir a écrire le contenu du texte. 

constructeur wordpress elementor plugin textes

Ensuite dans l’onglet Style on va gérer la police, la couleur, l’alignement

constructeur wordpress elementor plugin style texte

Et également le nombre de colonnes sur lesquelles répartir le texte : 

constructeur wordpress elementor plugin colonnes texte

Et enfin dans avancé on retrouve les marges et animations comme pour les titres : 

constructeur wordpress elementor plugin texte mise en page

Les boutons :

constructeur wordpress elementor plugin widgets boutons

Ensuite, très utilisé également le widget bouton sur lequel on va pouvoir ajouter un lien

constructeur wordpress elementor plugin boutons

Dans l’onglet Contenu on va pouvoir gérer le texte sur le bouton et ajouter son url dans liens. 

Ensuite on va trouver les options d’alignement et la possibilité d’ajouter une icône avant le texte. 

En ce qui concerne le Type, qui va changer la couleur et la Taille, on va pouvoir gérer ça précisément dans les autres onglet donc on laisse par défaut pour l’instant. 

constructeur wordpress elementor plugin bouton widget

Puis dans l’onglet Style, on va pouvoir définir la couleur du texte et la couleur de l’arrière plan et ce en mode normal et lorsque la souris passe sur le bouton : 

constructeur wordpress elementor plugin design bouton

Et dans type de bordure, on va pouvoir faire des choses intéressantes. 

Si on choisit Type de bordure > Continue, on va faire apparaitre une bordure à laquelle on peut mettre une couleur et une épaisseur

Ensuite dans Rayon de la bordure, on va pouvoir arrondir les coins de la bordure.

Et enfin avec les marges internes on va pouvoir gérer la taille du bouton. Par exemple en déliant le marges. Avec les marges haut et bas on gère la hauteur et avec les marges gauche et droite la largeur : 

constructeur wordpress elementor plugin bordure bouton
Un rayon de la bordure à 50px arrondit totalement les coins.

Les espaceurs :

constructeur wordpress elementor plugin widget espaceur

Un espaceur ne sert qu’à une chose : faire de l’espace

On va l’utiliser lorsqu’on souhaite aérer des sections et ajouter des espaces vides entre deux widgets. 

Au niveau des paramètres il n’y en a qu’un seul : il s’agit de la taille de l’espace que l’on souhaite avoir :  

constructeur wordpress elementor plugin espaceur

Les séparateurs :

constructeur wordpress elementor plugin widget séparateur

Un séparateur est tout simplement une barre horizontale que l’on va ajouter pour séparer des éléments. 

Le seul usage est purement en terme de design : 

constructeur wordpress elementor plugin séparateur
On utilise un séparateur pour séparer plusieurs éléments d'une même colonne.

On peut gérer

  • Sa couleur
  • Sa transparence (dans couleur)
  • Sa largeur en pourcentage de la largeur de la colonne
  • Son écart qui représente l’espace vide autour de la barre 

Et si on se rend dans l’onglet Avancé, on va pouvoir gérer ses marges pour le faire monter ou descendre dans une direction spécifique : 

constructeur wordpress elementor plugin widget séparateur
Grace aux marges, on peut placer le séparateur exactement où on le souhaite.

Conclusion

Il s’agit donc des principaux Widgets utilisés pour effectuer toutes les fonctions basiques. 

Il existe une multitude de widgets dans sous Elementor qui peuvent être utilisés et pour lesquels on va retrouver exactement les mêmes onglets : 

  1. Contenu : pour gérer le contenu (texte, image etc.)
  2. Style : pour gérer l’apparence (couleur, transparence, ombre, changement au passage de la souris etc.)
  3. Avancé : pour gérer les marges internes et externes, le placement sur l’axe Z de l’espace etc. 

 Il existe même des plugins WordPress qui peuvent être installés pour ajouter plus de widgets à Elementor. 

Le site officielle d’Elementor les recommande ici : 

https://elementor.com/addons/

constructeur wordpress elementor plugin addons
Les addons vont ajouter de nouvelles fonctionnalités et widgets à Elementor

Donc maintenant qu’on a vu comment fonctionne Elementor et comment paramétrer les widgets pour avoir le design que l’on souhaite, on va voir comment créer et publier une page de notre site. 

On va donc créer notre HomePage (ou page d’accueil) avec Elementor la publier et en faire notre page principale.