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

widgets Elementor

Elementor – Les widgets free, pro et addons

4.7
(6)

Le page builder Elementor permet d’ajouter aux pages web des dizaines de widgets, des éléments d’interface pré-construits.

Petit inventaire des possibilités.

A quoi servent les widgets ?

Les widgets sont des éléments préconfigurés et configurables, en termes de fonctionnalités et de style.

Il en existe des centaines !

Les widgets Elementor

Plusieurs dizaines sont fournis directement avec la version gratuite d’Elementor :

  • Widget Section interne – Crée des sections imbriquées pour la mise en page
  • Widget Titre – Ajoute des titres personnalisables aux sections
  • Widget Image – Insère et personnalise des images
  • Widget Editeur de texte – Modifie et met en forme du texte
  • Widget Vidéo – Intègre des vidéos de sources diverses
  • Widget Bouton – Ajoute des boutons cliquables personnalisés
  • Widget Séparateur – Insère des lignes de séparation horizontales
  • Widget Espaceur – Ajuste les espaces entre les éléments
  • Widget Google Maps – Intègre des cartes interactives
  • Widget Icône – Insère et personnalise des icônes
  • Widget WP Forms – Ajoute des formulaires de contact personnalisés
Elementor widgets basiques
Elementor widgets basiques

Les widgets Elementor pro

Plusieurs dizaines d’autres se rajoutent avec la version Elementor Pro :

  • Posts – galerie de posts – Affiche les articles de blog
  • Portfolio – galerie d’images – Présente des projets ou œuvres
  • Gallery – galerie d’images – Affiche une collection d’images
  • Form – formulaires – Crée des formulaires personnalisés
  • Login – Connexion utilisateur – Formulaire de connexion
  • Slides – diaporama – Crée des présentations animées
  • Nav menu – menu de navigation – Crée des menus de navigation personnalisés
  • Animated headline – titre animé – Titres avec effets d’animation
  • Price list – liste de prix – Affiche une liste de produits et prix
  • Price table – tableau de prix – Compare les offres et prix
  • Flip box – un bloc avec titre et texte, qui se retourne (flip) au survol – Animation de retournement d’élément
  • Call to action – appel à l’action : achetez ceci, téléchargez ce PDF, etc – Incite à réaliser une action
  • Media carousel – diaporama d’images – Carousel de médias variés
  • Testimonial carousel – diaporama de témoignages – Carousel d’avis clients
  • Reviews – avis – Affiche des évaluations et commentaires
  • Table of contents – table des matières, sommaire – Navigation facile dans le contenu
  • Countdown – compteur – Compte à rebours pour un événement
  • Share buttons – boutons de partage – Partage de contenu sur les réseaux sociaux
  • Blockquote – citation – Met en valeur une citation
  • Lottie – animations décoratives – Intègre des animations Lottie
  • Facebook button – bouton Facebook – Bouton J’aime et partager
  • Facebook comments – commentaires Facebook – Intègre les commentaires Facebook
  • Facebook embed – intégration d’élément Facebook – Intègre des publications Facebook
  • Facebook page – encart de page Facebook – Affiche une page Facebook
  • Hotspot – étiquetage et commentaire sur des images – Ajoute des points interactifs sur les images
  • Paypal button – bouton Paypal – Intègre un bouton de paiement PayPal
  • Code highlight – mise en forme de code informatique – Affiche du code avec mise en forme
  • Video playlist – Liste de vidéos – Crée des listes de lecture vidéo
  • Template – modèle – Insère un modèle de page préconçu
Elementor widgets pro
Elementor widgets pro

Les widgets des add-ons pour Elementor

Parmi les 900 extensions d’Elementor disponibles, nombreuses sont celles qui ajouteront également leurs widgets.

Par exemple, le thème Astra en version Astra Pro est fourni avec les Ultimate Add-ons for Elementor :

Ultimate addons for Elementor
Ultimate addons for Elementor

Les widgets des extensions tierces

Enfin, des centaines d’extensions tierces reconnaissent le succès mondial d’Elementor et sa place de leader des page builders pour WordPress, et fournissent elles aussi leurs widgets.

(Vous en trouverez une liste dans l’article sur les intégrations d’Elementor).

Par exemple, le plugin de réservation de rendez-vous WP Amelia fournit ses fonctionnalités soit sous forme de shortcodes, soit sous forme de widgets Elementor :

Elementor widgets wp Amelia
Elementor widgets wp Amelia

Ajouter un widget

Vous devez être dans l’éditeur visuel Elementor d’une page, d’un article ou d’un autre type de contenu éditable par Elementor.

Pour rajouter un widget :

Elementor barre du haut

  • on clique sur l’icone qui représente 9 petits carrés dans un carré, en haut à droite de la colonne de gauche
  • on cherche le widget qu’on veut utiliser
  • on l’amène dans la maquette de la zone de prévisualisation à droite, par glisser-déposer
  • ensuite, pour l’éditer, on clique dessus et ses réglages apparaissent dans la colonne de gauche

Chaque widget a ses propres réglages. Etudions les principaux.

Le widget Texte

Imaginons qu’on veuille ajouter un widget « Editeur de texte » – c’est de loin le plus courant.

Elementor widget editeur de
Elementor widget éditeur de texte

On va donc le chercher dans la liste des widgets et on l’amène par glisser-déposer dans une section de la page dans la colonne de prévisualisation.

Ensuite, on clique sur lui.

On peut maintenant y écrire du texte, de deux manières :

  • soit directement dans la colonne de droite – on a alors accès à un petit nombre d’options de formatage typographique (gras, niveaux de titre, etc)
  • soit en passant par la colonne de gauche, dans l’onglet par défaut « contenu » – qui donne accès à l’éditeur de texte, avec des options de formatage plus complètes

L’éditeur de texte

Onglet Contenu

L’éditeur de texte se présente sous la forme d’un traitement de texte classique :

  • une zone dans laquelle on tape du texte
  • une barre typographique qui permet de mettre des mots en gras, italiques, souligné, de faire une liste, d’ajouter un lien, de mettre un paragraphe en titre H1 H2 H3 H4 H5 H6
  • une icone permet de mettre cette zone de texte en plein écran
  • la dernière icone permet de faire apparaitre une deuxième barre d’outils qui rajoute des options : texte barré, ligne horizontale, couleur du texte, collage de texte, effacement du style, citation, alignement du texte, caractère spécial, indentation, annuler ou rétablir (ctrl Z et ctrl Y), raccourcis clavier

En haut à gauche de la barre typographique, on a un bouton pour rajouter une image, fonction de base de WordPress.

En haut à droite, on a trois boutons :

  • visuel : édite le widget de texte en mode visuel
  • texte : édite le widget de texte en mode HTML (on est d’accord : ça aurait dû s’appeler HTML)
  • balises dynamiques : c’est une fonction d’Elementor Pro

En bas de la zone de texte, on a encore des options :

  • Lettrine, pour ajouter une lettrine, une lettre initiale mise en valeur
  • Colonnes, pour  mettre automatiquement le texte en colonnes
  • Ecart de colonnes, pour gérer l’espacement entre les colonnes, en 4 unités : pixels, %, em, rem

Onglet Style

Il permet de gérer :

  • L’alignement du texte (gauche, droite, milieu, justifié)
  • La couleur du texte
  • La typographie (police de caractère, graisse, etc)
  • L’ombre du texte

Onglet Avancé

Là c’est à nouveau la foire aux options…

Plusieurs types de réglages (mise en page, effets de mouvement, arrière-plan, bordure, et responsive) sont les réglages de base de nombreux widgets, donc pas besoin d’y revenir.

Par contre, le widget texte d’Elementor propose deux nouveaux groupes d’options :

Transformer

Là, Elementor se change en film hollywoodien !!

Il permet en effet d’attribuer des transformations dans tous les sens à votre texte, dans son état normal et au survol.

(A tel point que la colonne de visualisation n’arrive plus à suivre : pour voir certains effets compliqués, il faut sauver la page et aller la voir dans un autre onglet, ou utiliser le bouton en forme d’oeil « prévisualiser ».)

On peut ainsi effectuer :

  • une rotation du texte sur toutes les dimensions, x, y et z, y compris en 3D
  • un décalage horizontal ou vertical
  • un redimensionnement – plus petit, plus grand…
  • une distorsion
  • un retournement horizontal ou vertical

Par exemple on pourrait mettre un texte 20% plus petit et tourné à 15° en position normale, et au survol, il s’agrandit et revient à 0°.

Pour tous ces effets, on peut régler une durée de transition en millisecondes.

On peut aussi placer des points d’ancrage sur les dimensions Y et Z : une rotation va se faire par rapport au centre, ou depuis le bord du texte, etc.

Masque

On peut placer un masque sur la zone de texte :

  • on lui donne une forme (cercle, triangle, fleur, etc)
  • une taille
  • une position
  • et on répète la forme ou pas, sur X et / ou sur Y

Le widget Titre

Les réglages du widget Titre d'Elementor
Les réglages du widget Titre d’Elementor

Il a quasiment les mêmes réglages que le widget Texte, ci-dessus.

A noter : si vous voulez metrte un titre, puis un texte, il n’est pas optimum de placer un widget titre puis un widget texte, le widget texte suffira amplement : tapez-y un paragraphe, changez-le en titre, et le tour sera joué.

La différence tient en la qualité du code html : un widget vaut toujours mieux que deux, ça produit un code plus léger.

Le widget titre reste utile si, par exemple, vous voulez placer un titre avant une section interne, sans y ajouter aucun paragraphe.

Le widget Image

Les options du widget Image d'Elementor
Les options du widget Image d’Elementor

A noter d’abord : si vous voulez simplement ajouter une image dans le flux d’un article, entre des paragraphes, utiliser le widget image n’est pas la meilleure méthode : mieux vaut l’intégrer directement depuis le widget texte.

Pour ajouter une image avec le widget image, là encore vous devez être dans l’éditeur visuel Elementor d’une page, d’un article ou d’un autre contenu éditable.

Cliquez sur l’icône aux 9 petits carrés, en haut à droite de la colonne de gauche, sur fond rouge sombre.

Sélectionnez le widget image et amenez-le par glisser-déposer dans une section du prévisualiseur dans la colonne de droite.

Cliquez sur l’image, et cela ouvre les options dans la colonne de gauche.

Ces options sont réparties en trois onglets :

Contenu

D’abord, il faut choisir une image : cliquez sur l’image grise, qui est une image de remplacement en attendant la vraie image.

Cela ouvre une fenêtre en pop-up, qui vous permet :

  • soit de téléverser un fichier d’image
  • soit d’en choisir une déjà présente dans votre médiathèque WordPress

Quand c’est fait, vous pouvez choisir une taille d’image. WordPress a en effet prévu de générer différentes tailles d’images pour les différentes situations où ces images doivent êtres vues – intégrées dans un article, ou sous forme de vignettes dans des listes d’articles sur les pages catégorie ou tags, etc. Vous pouvez aussi choisir une taille personnalisée.

Vous avez ensuite l’alignement : à gauche, au milieu ou à droite.

Vous pouvez y ajouter ou pas une légende : celle du fichier joint, ou bien une autre légende personnalisée que vous allez définir.

Vous pouvez enfin mettre un lien sur cette image : vers l’image elle-même, auquel cas, au clic, elle s’ouvrira dans sa taille normale ; ou vers un lien personnalisé.

Style

Les unités : px, %, vw, vh

Vous pouvez d’abord régler la largeur de l’image.

Vous avez 3 unités possibles : les pixels, le pourcentage, et le « vw ».

Le pourcentage dépend de la largeur de l’élément qui contient l’image.

Par exemple, si vous avez défini une section qui fait 800 pixels de large, qui contient deux colonnes larges de 50% donc 400 pixels chacune, et si vous intégrez dans une de ces colonnes une image qui fait 50%, elle fera 200px.

Vw signifie viewport’s width : cela désigne la largeur de l’écran – qui va donc varier fortement, d’un petit mobile à un grand écran d’ordinateur.

(Pour mieux comprendre, reportez-vous à l’article sur les unités d’Elementor.)

Largeur max et hauteur de l’image

Vous pouvez ensuite régler la largeur maximum : cela limitera la largeur de l’image, si par exemple vous avez défini que son conteneur fait 100% de l’écran, et que cette largeur vous semble trop grande sur ordinateur.

Vous pouvez aussi régler la hauteur de l’image, en pixels ou en vh = viewport’s height, hauteur de l’écran, très variable également.

Les options suivantes peuvent être gérées en situation normale, et au survol de l’image par la souris.

Opacité

L’opacité gère la transparence de l’image, de 0 = totalement transparent à 100 = totalement opaque.

Filtres CSS

Les filtres CSS permettent de changer la colorimétrie de l’image : saturation des couleurs, luminosité, contraste etc. La petite icone en forme de flèche circulaire remet les valeurs par défaut.

Bordure / contour de l’image

Vous pouvez enfin définir une bordure, un contour, un rayon de bordure pour arrondir les coins de l’image, et une ombre de boite pour faire un effet spatial, comme si l’image projetait une ombre.

Avancé

Ces réglages sont identiques à ceux de la section. Reportez-vous à l’article sur les sections pour plus d’explications à ce sujet.

Le widget Section interne

Ajout d'une section interne comprenant 2 colonnes, dans une section d'Elementor
Ajout d’une section interne comprenant 2 colonnes, dans une section d’Elementor

Imaginons que vous ayez créé une section contenant deux colonnes.

Dans l’une de ces colonnes, vous pouvez ajouter une section interne, elle-même divisable en colonnes.

A noter : il faut éviter de multiplier ces emboitements à chaque fois qu’on peut s’en passer, car ils alourdissent le code et rendent la page plus longue à charger.

Si on ajoute une section interne, elle se compose par défaut de 2 colonnes. On peut modifier cela immédiatement :

  • on fait un clic-droit sur l’icone de la colonne
  • on clique sur supprimer ou sur dupliquer, et cela donne une section interne à 1 ou 3 colonnes

La section interne a exactement les mêmes réglages que la section tout court. Reportez-vous donc SVP à l’article sur la section pour plus de précisions.

On peut déplacer une section interne dans la zone de prévisualisation tout simplement la prenant par sa poignée – l’icone à 6 petits carrés en bleu clair, au milieu de son bord supérieur. On l’amène où on veut par glisser-déposer.

La petite croix x sert à la supprimer.

Le widget Bouton

Les réglages du widget Bouton sur Elementor
Les réglages du widget Bouton sur Elementor

Il a beaucoup de réglages en commun avec la section tout court. Reportez-vous donc SVP à l’article sur la section.

Il a aussi quelques réglages propres dans son onglet Contenu :

  • Son type : info, succès, avertissement, danger, ces types correspondent à des types standards en informatique, liés à des codes couleurs fréquemment utilisés dans les logiciels : bleu pour info, vert pour succès, orange pour avertissement, rouge pour danger.
  • Son texte : le texte du bouton, remplacez-le à votre guise.
  • Son lien : enlevez le # présent par défaut et coller ou tapez votre lien. Avec la roue crantée, vous avez des options supplémentaires : pour ouvrir le lien dans une nouvelle fenêtre ou le mettre en nofollow (pour dire aux moteurs de recherche de ne pas le suivre).
  • Son alignement : gauche, milieu, droite, ou justifié (= toute la largeur de l’élément qui contient le bouton).
  • Sa taille, de très petit à très grand.
  • Son icone : soit vous téléchargez un fichier SVG, soit vous choisissez une des nombreuses icones fournies par Elementor.
  • L’espacement entre l’icone et le texte du bouton.
  • ID du bouton : permet d’attribuer une classe CSS au bouton, pour le styler.

Le widget Séparateur

Dans l’onglet Contenu, vous choisissez

  • Son style : une ligne continue, des pointillés ou diverses formes plus ou moins décoratives.
  • Sa largeur en pixels ou en %.
  • Son alignement, gauche, milieu ou droite.

Vous pouvez enfin ajouter du texte au milieu, ou une icone.

Dans l’onglet Style, vous choisissez la graisse (= l’épaisseur) du trait, puis l’écart (= les marges avant et après le séparateur).

Si vous avez ajouté un texte ou une icone depuis l’onglet Contenu, vous pouvez styler leur apparence dans l’onglet Style.

Les options avancées sont les options standard de la section.

Le widget Espaceur

Le widget Espaceur est beaucoup plus simple que le widget Séparateur.

Il consiste en un espace vide dont on peut régler la hauteur

  • en pixel,
  • en viewport height (hauteur de l’écran)
  • ou en em (taille de l’élément conteneur).

Le widget Google Maps

Dans l’onglet Contenu, vous avez :

  • L’emplacement, qui correspond à l’adresse.
  • Le zoom, c’est à dire le niveau de zoom de la carte centrée sur cette adresse.
  • Et la hauteur de la carte, en pixels ou en viewport height = hauteur de l’écran.

Le widget Icone

Les réglages du widget Icône sur Elementor
Les réglages du widget Icône sur Elementor

Il permet d’abord de choisir une icône dans la bibliothèque d’Elementor, ou d’en télécharger une au format SVG.

On choisit ensuite sa « vue« , c’est à dire son style de rendu : normal, plein, ou encadré.

Puis sa forme, cercle ou carré.

On peut enfin lui ajouter un lien cliquable, avec ou sans options, et définir son alignement.

Dans l’onglet Style, on va définir les couleurs de l’icone et de son fonds, sa taille, sa marge interne, sa rotation, la largeur de sa bordure et le rayon de sa bordure pour arrondir les coins.

Qu'avez-vous pensé de cet article ?

Cliquez sur une étoile pour donner votre avis

Avis moyen 4.7 / 5. Nombre d'avis donnés 6

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