Découverte de la nouvelle extension Elementor : le nouveau builder surpuissant?

Il existe de nombreux builders pour WordPress. Parmi les plus connus, on peut citer PageBuilder, Beaver Builder… Mais depuis quelques semaines, un petit nouveau a fait son apparition et risque bien de tout révolutionner dans la création de site web… voici Elementor!

  1. Tour de chauffe sur Elementor
  2. Fonctionnement
  3. Interface d’Elementor
  4. Sections et colonnes
  5. Options de sections et colonnes
  6. Personnalisation de sections, colonnes et Widgets

Petit tour de l’extension Elementor pour WordPress

La première réaction que l’on peut avoir c’est :

Encore un builder Drag&Drop qui ne va rien apporter de plus, lourd et pas du tout ergonomique!

Et c’est bien là qu’on se trompe, Elementor est ergonomique et facile d’utilisation, bref c’est un vrai plaisir de travailler avec et qui devrait beaucoup plaire aux graphistes.

Découvrons les principaux avantages permettant de préférer ce builder :

  • Rapide d’utilisation : pas de temps d’attente après le drag & drop, les éléments sont directement visibles et modifiables.
  • Facile d’utilisation : les réglages sont bien séparés par catégorie puis sous-catégorie.
  • Gratuit et open source : une version payante existe, mais du fait qu’il soit open source, d’autres plugins font déjà leur apparition reprenant les fonctionnalités de la version payante.
  • Pas de code : il n’est absolument pas nécessaire de savoir coder pour utiliser cette extension.
  • Peu importe le thème ou la page : Elementor peut s’utiliser avec vos thèmes préférés ou vos thèmes customisés sans problème et peut être utilisé dans n’importe quel type de post (homepage, portfolio, article, page …).
  • Customisation du layout : personnalisation de la hauteur et de la largeur des colonnes, redimensionnement des colonnes, position du contenu dans les colonnes, réglage des marges intérieur et extérieur (padding et margin), espacement entre les colonnes.
  • Responsive : Elementor gère automatiquement le responsive tablette et mobile.
  • Optimisé SEO : Elementor, bien que se disant optimisé SEO, créé tout de même beaucoup de div et de class mais bien moins que DIVI, un plus pour l’optimisation SEO.
  • Enregistrement des layout : Une section vous plait particulièrement et vous souhaitez la réutiliser à d’autres endroits? Pas de soucis, vous avez la possibilité d’enregistrer vos propres templates pour les réutiliser.

Découvrons comment fonctionne Elementor pour WordPress

Pour commencer, créez une nouvelle page ou un article, donnez lui un titre puis cliquez sur le gros bouton « Modifier avec Elementor ».

Tutoriel elementor wordpress builder

Création de la page

Petite visite de l’interface de l’extension


elementor interface builder tuto wordpress

Interface du plugin Elementor

  1. Champ de recherche pour ajouter les widgets à vos pages
  2. Liste des widgets pouvant être inséré dans les pages. Cette zone sert également de fenêtre de réglages.
  3. Bouton permettant d’afficher / masquer l’interface d’Elementor pour prévisualiser la page.
  4. Footer de l’interface :
    •   : permet de visualiser la page dans un nouvel onglet, ou de revenir au tableau de bord.
    •  : permet de changer l’affichage pour voir le rendu sur mobile / tablette / ordinateur.
    •   : liens vers l’aide vidéo ou la documentation d’Elementor.
    •   : permet d’enregistrer ou de charger des modèles.
    • Bouton « Enregistrer » : permet d’enregistrer vos modifications.
  5. Section de page : c’est cette section qui recevra les différentes colonnes pour y ajouter vos widgets.
  6. Zone permettant d’ajouter une nouvelle section ou un modèle.

L’ajout et le fonctionnement des sections et des colonnes du plugin Elementor

Plusieurs méthodes sont disponibles pour créer de nouvelles sections à votre page.

Drag & Drop : il suffit simplement de glisser un widget dans la zone de création de section. L’ajout de colonnes se fera par la suite.

elementor tutoriel worpress widget

Drag & drop widget

Cliquez sur le bouton « Ajouter une nouvelle section » puis choisissez la structure que vous souhaitez donner à votre page (le choix de la structure n’est pas définitif, il vous sera toujours possible d’ajouter de nouvelles colonnes, ou de les redimensionner par la suite).

tutoriel elementor wordpress sections

Ajout de section en choisissant sa structure

Le bouton « Ajouter un modèle » permet d’ouvrir une fenêtre vous proposant soit d’insérer une structure de page déjà faite, soit d’insérer une section ou un modèle de page que vous auriez enregistré.

Options de sections et de colonnes

tutoriel plugin elementor colonnes

Options de sections et de colonnes

Au survol de chaque éléments vous aurez différentes option :

  • 1 – 2 : Au survol d’une section ou d’une colonne :
    •   : Permet de dupliquer la section (elle se placera à la suite) ou la colonne (elle se placera à droite de celle copiée, dans la même section)
    •   : Uniquement disponible pour l’onglet « Colonne », il permet d’en ajouter une nouvelle dans la section.
    •   : Permet de supprimer la colonne ou la section.
    •   : Uniquement disponible pour les sections, il permet de la sauvegarder dans votre bibliothèque de modèle pour la réutiliser par la suite sur d’autres pages.
  • 3 :  Au survol d’un élément dans une colonne :
    •   : Permet d’afficher l’éditeur de contenu dans le panneau de gauche.
    •   : Permet de dupliquer le contenu (Il se place en dessous, dans la même colonne).
    •   : Permet de supprimer le contenu.
  • 4 : Cliquer sur le permet de revenir au choix des widgets dans le panneau de gauche.
  • 5 : Vous pouvez ajuster la largeur des colonnes comme vous le souhaitez en « cliquer glisser » voir image ci-dessous.
tutoriel colonnes elementor wordpress

Ajustement des colonnes

  • Si vous souhaitez déplacer une section, une colonne ou son contenu, survolez l’élément à déplacer, cliquez puis glissez jusqu’à l’emplacement souhaité comme montré sur l’image ci-dessous.
builder elementor tutoriel

Déplacement du contenu dans Elementor

La personnalisation de sections, de colonnes ou widget avec le plugin Elementor

En sélectionnant un élément (section, colonne ou widget), vous avez accès à l’éditeur dans le panneau de gauche.

Chaque partie créée par Elementor est entièrement personnalisable :

panneau edition elementor tutoriel wordpress

Panneaux d’édition des Sections, Colonnes et Widgets

  • Édition des sections :
    • Mise en page : vous pouvez y régler tout ce qui concerne la structure de la section (la taille, le positionnement, les écarts…).
    • Style : vous pouvez y régler les images / couleurs de fond de votre section, la bordure, et la typographie.
    • Avancé : vous pouvez régler les marges, les animation d’accueil, ajouter une classe CSS, ou ajouter du CSS directement (uniquement disponible pour la version PRO).
  • Édition des colonnes:
    • Contenu : gestion de l’image / couleur d’arrière plan et de la typographie.
    • Avancé : vous pouvez régler les marges, les animation d’accueil, rajouter une classe CSS, ou ajouter du CSS directement (uniquement disponible pour la version PRO).
  • Édition des widgets :
    • Contenu : sera différent en fonction des widget, c’est la que vous paramétrerez le contenu.
    • Style : sera différent en fonction du widget choisi,
    • Avancé : vous pouvez régler les marges, les animation d’accueil, rajouter une classe CSS, ou ajouter du CSS directement (uniquement disponible pour la version PRO).

Alors? Convaincu? Vous êtes maintenant capable de réaliser de magnifique site internet très facilement grâce à cette extension et n’avez qu’à laisser libre court à votre imagination.

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

[Total : 9    Moyenne : 5/5]

Commentaires 18

  1. stupar 20 février 2017
    • Antoine Pitula 24 février 2017
  2. Le Goascoz Virginie 4 mai 2017
    • Antoine Pitula 5 mai 2017
  3. Li_dfo 8 mai 2017
    • Antoine Pitula 9 mai 2017
  4. Kans 12 mai 2017
    • Antoine Pitula 12 mai 2017
  5. KLINGLER 12 mai 2017
    • Antoine Pitula 12 mai 2017
  6. Danielle 15 juin 2017
    • Antoine Pitula 15 juin 2017
  7. Valerie 28 juillet 2017
  8. GAELLE 5 août 2017
    • Antoine Pitula 7 août 2017
  9. GRILLON 7 août 2017
    • Antoine Pitula 7 août 2017

Laisser une réponse