Théories fumeuses, affirmations gratuites, croyances sans fondement :
arrêtez de croire et de faire n’importe quoi en SEO !

 Blog WordPress
Installation + licence Elementor Pro

J’installe + configure Elementor Pro + 1 à 10 licences

Formation
à Elementor

Je vous forme par téléphone + partage d’écran

Créez votre site
avec Elementor Pro

Elementor Pro = meilleur constructeur de page WordPress

Créez votre site
avec Elementor Cloud

Hébergez-le sur
Elementor Cloud

editeur visuel Elementor 1

Elementor – L’éditeur visuel et la section – Guide complet

4.6
(14)

L’éditeur visuel du page builder Elementor fourmille d’options.

Voici un panorama des principaux réglages possibles.

Editer une page, un article ou autre type de contenu avec Elementor

Pour éditer une page, un article ou un autre type de contenu avec Elementor, il faut d’abord que vous ayez défini ce type de contenu comme éditable dans les Réglages d’Elementor, accessibles depuis la page Réglages du menu Elementor dans l’administration de WordPress.

Ensuite, dans l’administration de WordPress, il faut se rendre sur la page, l’article ou le contenu qu’on veut éditer  (ou en créer un nouveau) et cliquer sur « Modifier avec Elementor« .

Modifier avec Elementor
Modifier avec Elementor

On peut y accéder directement en cliquant sur le lien « Modifier avec Elementor ».

On peut aussi y accéder depuis le front-end quand on est connecté : un bouton « Modifier avec Elementor » est présent dans la barre d’administration.

On arrive ainsi dans l’éditeur visuel.

L’éditeur visuel d’Elementor

L’éditeur visuel se présente en deux colonnes :

  • à gauche, les réglages des différents éléments d’Elementor, l’interface pour choisir des widgets, etc (on peut la redimensionner en largeur en survolant son bord droit puis en le déplaçant)
  • à droite, une prévisualisation de la page web qu’on édite, avec un ajout d’Elementor : une zone qui permet d’ajouter des éléments
Editeur visuel Elementor
Editeur visuel Elementor

Voyons ces deux colonnes l’une après l’autre, elles sont bourrées de possibilités.

La colonne de gauche de l’éditeur visuel

Mais revenons à la colonne de gauche de l’éditeur visuel. Elle se compose de 3 zones :

La barre du haut

La barre du haut, en rouge, permet d’accéder à deux zones :

Elementor barre du haut

Les réglages du site

En cliquant sur l’icône du menu hamburger à gauche, on accède aux réglages généraux du site et aux options de navigation.

Dans les réglages, on a les réglages du site, le constructeur de thème (qui est une fonctionnalité d’Elementor Pro) et les préférences du compte.

Réglages du site

Si on clique Réglages du site, on accède à une série de réglages globaux qui vont déterminer le design du site – ils sont équivalents aux réglages graphiques des thèmes WordPress.

A noter : Elementor, basé sur le langage CSS, permet de définir les tailles des éléments dans différentes unités : pixels, em, rem, vw, vh.

Dans les réglages du site on a notamment :

Les couleurs globales

C’est un réglage très pratique : au lieu d’avoir à chercher des dizaines de fois la même couleur pour l’attribuer à divers éléments, on définit des couleurs globales, qui seront ensuite disponibles partout dans les réglages graphiques.

Si on change une couleur globale, elle se mettra à jour partout où elle est utilisée.

Les polices globales

De la même manière, vous pouvez définir des styles typographiques globaux utilisables à travers tout votre site – du moins, à travers tous vos contenus édités avec Elementor.

Typographie

Vous pouvez définir les styles de tous les éléments HTML : les titres H1 H2 H3 H4 H5 H6, les paragraphes, les liens.

Vous gérez à la fois les couleurs et les paramètres typographiques : police de caractère, taille, graisse, espacement, transformation, style, décoration…

Boutons

Vous pouvez styler vos boutons : couleur de fond et de texte, couleur et épaisseur de contour, bordure, marge, ombre…

Images

Vous pouvez mettre un contour à vos images ou arrondir leurs angles avec un rayon de bordure, attribuer une opacité ( = une transparence) et attribuer des filtres CSS (pour faire des effets de fusion par superposition par exemple), ou encore leur ajouter une ombre.

Champs de formulaires

Vous avez à peu près les mêmes paramètres que précédemment pour régler l’apparence des formulaires. La typo, les ombres, les marges…

Identité du site

Vous avez ensuite les réglages de l’identité du site qui permet de définir le titre et la description du site (options de base de WordPress, aussi disponibles dans ses réglages), un logo et une favicon (la petite image qui s’affiche dans l’onglet du navigateur).

Arrière-plan

Ce paramètre définit la couleur de l’arrière-plan (background) du site : soit une couleur unie, soit un dégradé ; il permet aussi de définir une autre couleur uniquement sur mobile.

Mise en page

Ces réglages mettent en forme la maquette : la largeur du contenu principal, la marge des widgets, les codes CSS des éléments.

On définit également les « points de rupture » (breakpoints), qui gèrent le côté responsive / adaptable du site : on dit par exemple que la version mobile commence en-dessous de 767 pixels de large, ou que la version ordinateur commence au-dessus de 1024 pixels.

Visionneuse

La visionneuse est une fonctionnalité qui s’applique aux images et permet de les agrandir si l’utilisateur clique dessus (en anglais, ça s’appelle une lightbox).

On peut l’activer ou pas, mettre un effet de zoom, afficher les images en plein écran, etc.

CSS personnalisé

Cette option est une fonctionnalité d’Elementor Pro.

Préférences de compte

Ces réglages vous laissent définir quelques options concernant l’interface d’Elementor.

Les widgets

Toujours dans la barre du haut, en cliquant sur l’icône aux 9 carrés à droite on accède aux très nombreux et très utiles widgets

La barre du bas

La barre du bas de la colonne de gauche de l’interface d’édition Elementor présente 5 icones. 

Elementor barre du bas
La barre du bas de l’éditeur visuel d’Elementor

Réglages de la page

L’icone en forme de roue crantée en bas à droite mène aux réglages de la page

  • son titre
  • son état (publié, brouillon, en attente de relecture, privée…)
  • un bouton qui permet de masquer le titre, de ne pas l’afficher
  • un menu déroulant qui permet de lui attribuer un modèle de page (template) : celui-ci est soit défini par votre thème, soit par une des formules d’Elementor.
Reglages de la page
Réglages de la page

Dans le deuxième onglet, Style, on peut donner à cette page particulière un background / arrière-plan différent de celui qu’on a défini dans les réglages généraux. De même, on peut modifier les marges.

Navigateur

Le navigateur d’Elementor s’ouvre sous forme de fenêtre superposée à la page dans la zone droite de l’éditeur visuel, et liste les éléments à intégrer dans la page.

Navigateur Elementor
Navigateur Elementor

On peut déplacer et réorganiser ces éléments par glisser-déposer – quand les éléments prennent beaucoup de place à l’écran, cette méthode va plus vite.

Depuis peu, on peut même sélectionner plusieurs éléments (en appuyant sur Ctrl sur Windows ou Cmd sur Mac, et en cliquant simultanément sur les éléments à sélectionner).

Il suffit de cliquer dans la petite croix en haut à droite du navigateur pour le fermer.

Historique

L’historique donne accès aux révisions, qui correspondent aux différents états d’édition de la page quand on a cliqué sur le bouton « Mettre à jour ». On peut ainsi revenir en arrière pour annuler des modifications.

L’onglet Actions permet d’annuler les annulations…

Mode responsive

Comme son nom l’indique, le fait de cliquer sur cette icone va permettre de gérer l’aspect du site selon les différents formats d’écran, en mode responsive : ordinateur, tablette, téléphone mobile.

Le clic fait apparaitre une barre en haut de la zone de prévisualisation de l’éditeur visuel, avec 3 icones pour sélectionner le type d’écran. Si on clique, le contenu de la page se redimensionne et montre comment elle s’affichera sur ce format d’écran.

Avec les boutons – et +, on peut changer le niveau de zoom.

Plus d’infos sur le mode responsive d’Elementor.

Prévisualiser

Cliquer sur cette icone en forme d’œil va ouvrir la page qu’on est en train d’éditer, dans un nouvel onglet, en mode prévisualisation. Elle restera ouverte et se mettra automatiquement à jour à chaque modification.

L’éditeur visuel permet d’avoir une bonne idée de l’aspect d’une page, mais notamment à cause de la place que prend l’interface d’Elementor, et aussi à cause de l’impossibilité de faire le rendu graphique de certains éléments sans recharger la page, cet éditeur n’est pas capable de faire un rendu visuel à 100% exact, d’où la pertinence de cette prévisualisation, qui fonctionne même si la page est sauvegardée en mode brouillon.

Mettre à jour

Le bouton vert « Mettre à jour » a lui-même des options : si on clique sur la petite icone en forme de flèche à sa droite, on voit qu’on peut sauvegarder en mode brouillon ou en mode template / modèle.

La colonne de droite de l’éditeur visuel

La colonne de droite de l’éditeur visuel montre une prévisualisation de la page qu’on édite.

En bas, on voit une petite zone entourée d’un contour en pointillés.

Glissez un widget ici

Cette zone permet :

  • en cliquant sur l’icône + : d’ajouter une section
  • en cliquant sur l’icône « dossier » : d’ajouter un template, c’est à dire un bloc de contenu tout fait, qu’on éditera ensuite

Ajouter une section

La section

Une section est un conteneur – c’est à dire un élément qui contient d’autres éléments (un texte, une image etc).

Une section contient une ou plusieurs colonnes, dont on peut définir la largeur. On peut ainsi avoir :

  • une seule colonne
  • deux colonnes égales (largeur 50% chacune)
  • deux colonnes inégales (largeur 33% et largeur 67%, ou l’inverse)
  • trois colonnes, ou quatre, cinq, six…

La section se signale par un contour bleu clair, et 3 icones au milieu de son contour du haut :

  • l’icône + permet de rajouter une section avant la présente section
  • l’icone avec les 6 petits carrés permet de sélectionner la section pour faire apparaitre ses options dans la colonne de gauche
  • l’icone x, en forme de croix, supprime la section 

Une fois ajoutée, la section est d’abord vide, mais on peut déjà paramétrer ses réglages en cliquant sur l’icone du milieu, aux 6 petits carrés.

Une fois cette section créée, on peut y glisser-déposer des widgets. Il en existe des dizaines de types.

Copier-coller les éléments et les styles

Dans la colonne de droite, tous les éléments sont susceptibles d’être copiés-collés :

  • les sections
  • les colonnes
  • les widgets
  • les styles

Copier-coller les éléments

Pour copier-coller un élément, il faut bien le localiser et ne pas se tromper : en fait, les éléments sont souvent emboîtés les uns dans les autres, de sorte que si on ne fait pas attention, on ne va pas copier le bon niveau.

Par exemple, si un widget texte est inclus dans une colonne incluse dans une section interne incluse dans une section, et si on clique dans ce widget, puis qu’on fait clic-droit, copier, cela ne va copier que le widget texte.

Pour copier un élément de manière précise et exacte, il vaut donc mieux le survoler puis aller cliquer du droit sur son icone :

  • l’icône de la section, les 6 petits carrés au milieu de son bord supérieur
  • l’icône de la colonne, à gauche de cette colonne
  • l’icône du widget, à droite du widget

Pour coller l’élément, c’est simple, il suffit de faire clic-droit, et coller. Sauf que la question se pose : où l’élément sera-t-il collé ?

Réponse : toujours après l’élément au-dessus duquel on a fait le clic-droit.

Si donc on a deux sections, et qu’on veut cloner la première après la deuxième, on va la copier, puis survoler la deuxième, faire clic-droit et coller.

A noter : quand on copie un élément qui contient d’autres éléments, on copie tous les éléments inclus dans l’élément copié, et idem quand on colle.

Si on copie-colle une section qui contient deux colonnes qui contiennent 3 widgets chacun, on va donc copier-coller d’un coup 9 éléments. Si on voulait repartir d’une section vierge, il faudra donc supprimer un par un les éléments.

Dupliquer les éléments

Pour dupliquer un élément, c’est très simple : on le survole, puis clic droit, puis dupliquer.

L’élément en question sera dupliqué juste après son original. On peut ensuite le déplacer en le prenant par la poignée et en l’amenant où on veut par glisser-déposer.

Copier-coller les styles

Plutôt que de copier-coller des éléments, on peut copier-coller des styles, c’est à dire l’ensemble des réglages affectés à cet élément.

Cela évite le problème signalé ci-dessus : si je veux juste copier-coller une section qui contient 8 éléments, sans copier les éléments, cela va plus vite de créer une nouvelle section et de copier-coller le style de la première, que de supprimer 8 éléments.

Pour copier-coller un style, on clique du droit sur l’icône de l’élément qu’on veut reproduire (icône de widget, de colle ou de section), on sélectionne copier, on clique du droit sur l’icône de l’élément sur lequel on veut appliquer le style copié, et enfin on sélectionne l’option coller le style. Cela ne collera que les réglages, pas les contenus.

Déplacer les éléments

Pour déplacer un élément, une section, une colonne, un widget, facile : il suffit de la saisir par son icône, puis de la déplacer où on veut.

Quand on le saisit par un clic maintenu, l’élément en question se réduit à une barre bleue qu’on voit se déplacer dans la maquette ; il suffit de relâcher le clic pour déposer l’élément à l’endroit voulu.

Effacer les éléments

Pour effacer un élément, une section, une colonne, un widget, on clique du droit sur son icone puis on sélectionne effacer.

Qu'avez-vous pensé de cet article ?

Cliquez sur une étoile pour donner votre avis

Avis moyen 4.6 / 5. Nombre d'avis donnés 14

Soyez le premier à donner votre avis

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Besoin d’un hébergeur ?

Convivial, sympa, fiable, et pas cher,
O2Switch me semble être la meilleure offre actuellement sur le marché français.
C’est pourquoi j’y héberge tous mes sites.

Hébergement O2Switch
Hébergement O2Switch
Panier
Retour en haut