Elementor
Elementor est un constructeur de page sur WordPress, il vous permet de créer les pages de votre site internet sans coder mais en utilisant des éléments visuels explicites dans leur fonction. Elementor fait partie des constructeurs de page WordPress les plus utilisés, disponible dans plus de 50 langues, open source et freemium(disponible gratuitement mais aussi avec une version pro ajoutant de nombreuses fonctionnalités). Ses caractéristiques ont probablement grandement contribué au succès de ce dernier.
Installation et utilisation
Son installation est relativement simple, en vous rendant dans la partie extension de WordPress et en recherchant Elementor puis en appuyant simplement sur installer et activer.
Une fois activé dans le menu WordPress à la gauche de votre écran vous pouvez trouver un menu Elementor avec les différents paramètres (clé API …). Créer une nouvelle page WordPress, indiquer un titre, une image mise en avant (facultative) … Mais avant de cliquer sur Publier pour finaliser la création, il vous faut dans la section “Attributs de page” paramètre “Modèle” sélectionné “Elementor pleine largeur”. Enfin “Publier” et lancé l’éditeur en cliquant sur “Modifier avec Elementor”.
Présentation de l’éditeur
Une fois arrivée dans la page d’éditions vous trouverez à votre gauche le menu principal avec la partie “éléments”, partie où vous pouvez retrouver les différents widgets d’Elementor mais aussi ceux d’autres mods installer. En bas à gauche vous pouvez accéder aux réglages principaux de la page, faire apparaître le menu de navigation et interagire avec celui-ci, il vous permettra de voir clairement les jeux d’emboîtement entre les sections, les colonnes et les widgets. Un historique des dernières sauvegardes est lui aussi accessible ici. Les deux derniers boutons vous permettent de tester la responsivité et de prévisualiser le résultat de votre site sur une nouvelle page sans l’éditeur. Enfin sur le reste de la page vous pouvez visualiser en direct le résultat (WYSIWYG).
Un Widget est un élément avec une fonction spécifique, un titre, une image, un texte ou bien un ensemble de fonction comme un carouselle où vous allez définir des images des titres, URL ou description associer aux images. Chaque Widget est disposé de trois parties en paramètre “contenu”, “style” « Avancé ». La partie “contenu” vous donne accès aux éléments principaux du widget, vous indique le texte, les images, le nombre de colonne d’une liste …. La partie “style” est le lieu où vous définissez la stylistique des éléments, couleur, police, largeur, hauteur, opacité, dégrader etc … Enfin la partie “Avancé” avec des éléments de mise en page; les marges, la position, le z-index, bordure ou bien effet de mouvement.
Élément principaux de l’éditeur
Le fonctionnement consistant en l’assemblage dans l’éditeur d’Elementor s’articule autour de trois composent les widgets, les colonnes et les sections.
Les widgets sont disposés dans des colonnes elle-même à l’intérieur d’une sectionner, les colonnes sont des éléments côte à côte avec une largeur pouvant être définie et changer en fonction du type d’appareils utilisé permettant de faire jouer la responsivité, quand la largeur de l’écran devient insuffisante pour une colonne c’est dernier ne sont plus côte à côte mais empiler.
Les sections et les colonnes disposent elles aussi des trois mêmes parties dans leur paramètre, la différence entre ces deux éléments réside dans le fait que la section est l’élément mère d’une colonne et ne peut pas être mis à côté d’une autre section mais uniquement empiler. Si vous avez besoin de scinder en plusieurs parties une colonne n’oubliez pas le Widget “sections interne”, c’est sous colonne dispose des même paramètre qu’une colonne classique. Dans l’exemple qui suit vous avez une section avec deux colonnes dont la première colonne est dotée du widget “section interne” qui permet l’apparition de colonne dans la colonne.
La prise en main est relativement simple, notamment grâce au caractère intuitif des widgets et le drag and drop (glisser déposer) qui vous permet de réaliser la structure de votre page simplement et rapidement. En revanche, chercher mes paramètres de style peut s’avérer fastidieux au début, particulièrement pour les Widget dont les fonctionnalités vous sont inconnues.
Il est possible d’ajouter des suites de widgets(bibliothèque de widget) comme CrocoBlock permettant de réaliser toujours plus avec davantage de paramètre de personnalisation, mais si certain paramètre nous offre pas assez de liberté vous pouvez vous essayer au CSS personnaliser, dans la partie “Avance” du widget il est évidemment nécessaire de maitriser les bases de ce langage.
Modèles et élément globale
Les modèles sont des partie/sections de pages réalisés dans une autre page que l’on appelle le modèle pouvant être utilisé dans plusieurs pages évitant ainsi de refaire une partie commune a plusieurs pages, vous n’avez qu’à l’appeler. L’appelle d’un modèle se fait grâce au “code court” qui est attribué à la page-modèle, qui est ensuite indiqué dans les pages où nous voulons intégré ce modèle en le collant simplement dans un Widget texte. Ce système est très intéressant quand vous voulez modifier une partie qui est commune à tous les pages, en modifiant la page-modèle vous modifiez tous les pages intégrant cette page comme référence dans une section.
Cette notion de modèle pouvant s’appliquant à plusieurs parties, et éditable en dans seul nous permet d’introduire le concept des globales. Elementor nous permet de définir des éléments globo s’apparentant à une variable à laquelle nous indiquons un nom et la valeur stockée; une police, une couleur … Quand vous créez un nouveau titre, vous lui indiquez une nouvelle couleur, que vous ajouter comme globale en attribuant un nom à cette couleur.
Par la suit vous voulez ajouter cette
couleur dans un autre Widget il vous suffit des vous rendre dans la partie style de ce dernier, la zone d’attribution de couleur et de cliquer sur l’icône de globe qui vous proposera la liste des couleurs enregistre comme globale.
Constructeur de Thème
Elementor propose une partie « constructeur de thème » dans le menu de WordPress rendez-vous dans Modèles puis sélectionné constructeur de thème. Le constructeur de thème vous permet de réaliser des partie du site le header (en-tête), le footer (pied de page), la page d’erreur 404 et de choisir les pages où seront afficher ces pages-modèle. A ne pas confondre avec les sections ou autres pages-modèles qui ne sont pas des modèles avec une fonction primaire (pas utiliser pour les header, footer, modèle de page article…), mais davantage des models de section.
Ce constructeur de thème propose aussi de réaliser le modèle de page pour les articles, auteur, résultat de recherche, catégorie ou bien des produits pour le cas d’un E-commerce. Les valeurs de ce modèle, nom, prix changent automatiquement en fonction de l’article, produit (etc) sélectionné (n’oubliez pas d’ajouter des articles ou produits via WordPress dédier à cette fonction).
Pour conclure Elementor se définit comme “un constructeur de pages pour WordPress accessible aux utilisateurs sous forme de plug-in”. Utiliser dans plus de 10 millions de sites web, Elementor doit son succès à ses nombreux avantages dont voici une liste ;
- Réaliser un site sans avoir de compétence dans un quelconque langage de programmation, mais un simple drag and drop.
- Elementor gère de façon automatique une partie de la responsivité, bien qu’il soit recommandé de vérifier et de réajuster certaines valeurs.
- Rapide à prendre en main avec ses différentes fonctionnalités, notamment les widgets ayant un rôle clairement défini.
- Extensible avec la possibilité d’ajouter des widget, autre que ceux proposés par Elementor.
- What you see is what you get (WYSIWYG) avec un résultat qui s’affiche en direct.
- Une compatibilité avec la majorité des thèmes disponibles.
- Une documentation fournie.
- Une version gratuite permettant de réaliser tous les points énumérés précédemment (mais nécessaire pour personnaliser toutes les zones de votre site).
