Concevoir un site web avec une allure professionnelle n’était pas donné à tout le monde, d’autant plus nous avions tous l’impression qu’il fallait absolument être un professionnel en codage et en conception web. De nos jours, nous voyons de nouveaux outils qui voient le jour pour l’écosystème de WordPress, afin de fournir une solution toujours plus simple pour arriver à concevoir un site web et ceci à la portée des plus débutants.
En ce qui concerne la conception des mises en page sur WordPress, nous avons déjà eu a présenter le plugin Visual Composer, qui fait certainement partie des meilleurs outils en matière de conception de mise en page. Il faut remarquer cependant que cette solution ne convient pas à tout le monde. C’est la raison pour laquelle dans ce tutoriel, nous allons vous présenter plus le plugin WordPress Elementor, qui est un plugin WordPress freemium (gratuit, mais extensible sous abonnement).
Où se procurer Elementor pour WordPress
Nous envisageons sérieusement de vous amener à voir le potentiel du plugin, et la solution gratuite vous aider à débuter sans avoir à débourser le moindre sou. Cette solution gratuite est disponible sur WordPress.org. Etant un plugin WordPress, ce dernier s’installe comme tout autre plugin à partir du tableau de bord.
Si le plugin parvient à vous satisfaire complètement, vous pourrez vous procurer la licence complète avec toutes les fonctionnalités sur le site officiel d’Elementor.
Caractéristiques Principales d’Elementor
Avant de démarrer le tutoriel avec une présentation du plugin, nous allons d’abord vous présenter les principales caractéristiques du plugin (version gratuite et version complète).
| Version Gratuite | Version Complète |
|---|---|
| Multiples Colonnes | Menu de navigation, d’article |
| Modules Textes, Titres | Module WooCommerce (produits, catégories) |
| Modules Vidéo, Image, Caroussel, Galleries, Soundcloud | Intégration Facebook (page, button, commentaires) |
| Module de partage | Tableau de prix |
| Module HTML | Portfolio, Formulaire |
| Module pour widget WordPress | Module de recherche |
Notez qu’il s’agit là d’un liste peu exhaustive des différentes fonctionnalités que propose le plugin. Vous trouverez plus de détails en explorant leur site web.
Premiers pas sur Elementor
Nous n’allons pas ici couvrir tout le processus d’installation. Etant donné qu’il s’agit d’un plugin WordPress, la procédure d’installation à déjà été expliqué dans un précédent tutoriel. Toutefois, après l’installation, vous accéderez à la page d’accueil du plugin.
Si vous avez cette page sur votre écran, alors vous avez correctement installé le plugin Elementor. Nous utilisons actuellement la version complète pour ce tutoriel, mais à priori l’interface ne devrait pas être trop différente de la version gratuite.
Avant de passer à l’interface d’édition, je vous inviterai à enregistrer votre licence. Ceci n’est valable que pour ceux ayant opté pour la version complète. Si vous avez la version gratuite, vous pouvez accéder à la section suivante. Pour enregistrer votre licence, vous remarquerez une notification sur WordPress qui vous invitera à enregistrer votre licence.
Il vous suffit donc de cliquer dessus pour accéder à la page d’enregistrement et de cliquer sur Activate.
Vous devrez normalement votre une page de confirmation si votre licence est valide.
Si vous n’arrivez pas à cette page, je vous invite à contacter les développeurs du plugin pour avoir plus d’assistance sur le problème.
Comment utiliser Elementor
Elementor fonctionne sur les pages et les articles sur WordPress. Que vous utilisiez l’interface classique ou la nouvelle interface Gutenberg, vous verrez un bouton qui vous invitera à utiliser le constructeur Elementor.
Dans la pratique, vous n’aurez pas toujours besoin de modifier vos articles en utilisant Elementor. Je vous invite donc à utiliser le plugin uniquement sur les pages. En cliquant donc sur le bouton, vous accéderez à l’interface de conception d’Elementor qui donne un air de déjà vue (pour ceux qui utilisent le Customizer de WordPress).
Vous avez donc sur la gauche les différents contrôles que propose le plugin et sur la droite, vous avez l’aperçu en direct de vos modifications. Dans ce tutoriel, nous utilisons le thème Twenty Sixteen de WordPress.
Les sections d’Elementor
Les sections d’Elementor sont des groupes de blocs de fonctionnalité que propose Elementor. Le nombre de section dépend du fait que vous utilisez la version complète et du fait que vous utilisez WooCommerce, Yoast SEO ou d’autres plugins compatibles. En fonction de ces conditions, vous aurez plus ou moins de sections sur votre interface. Etant donné que nous utilisons la version complète avec le plugin WooCommerce activé, voici à quoi ressemble notre interface.
Comment placer un bloc Elementor
Un fois que vous développez une section, vous trouverez les blocs Elementor. Les différents blocs Elementor se placent par « Drag & Drop » (Glisser & Déposer) sur la zone mise en évidence avec des traits interrompus.
Comment choisir une mise en page sur Elementor
Avant d’ajouter un bloc sur Elementor, vous devez penser à choisir une mise en page en cliquant sur le bouton « + » sur la section mise en évidence.
En fonction de vos besoins, vous choisirez la mise en page qui est la mieux adaptée. Une fois que vous avez choisi une mise en page, vous avez une représentation de cette section sur la même zone mise en évidence. Cette section affichera le même nombre de colonne correspondant à votre choix. Dans mon cas, j’ai choisi une colonne avec 3 colonnes.
Les différents blocs avec un signe « + » à l’intérieur, sont les zones qui peuvent accepter les blocs Elementor. Si vous ajoutez un bloc Elementor sans choisir de mise en page au préalable, la mise en page à colonne unique sera choisie par défaut.
Les sections d’Elementor peuvent être réordonnées entre elles, en suivant le même principe de « Glisser & Déposer ». Vous pouvez également supprimer une section, si vous ne souhaitez plus l’utiliser.
Voici un exemple d’une section qui contient 2 blocs à savoir le bloc titre et bloc texte.
Comment utiliser les autres outils de conception
Une fois que vous aurez fini votre conception, l’une des choses que vous souhaiterez faire, c’est de sauvegarder votre travail. Vous trouverez cette option tout en bas de la section affichant les différentes sections Elementor.
Vous avez le choix entre l’enregistrement direct (Publier), et la sauvegarde comme brouillon ou comme modèle. Nous explorerons d’avantage ces différents points ultérieurement.
Durant votre conception, vous pourrez également souhaitez prévisualiser les modifications sans l’interface supplémentaire d’Elementor. Tout ce que vous aurez à faire, c’est de cliquer sur l’icône en forme d’oeil.
Il arrive que durant la conception, une erreur se produise (une action involontaire). Dans ce cas, Elementor vous propose un historique, qui vous permet de naviguer à travers toutes vos actions.
Ceci vous permettra de facilement revenir en arrière.
L’option « Navigateur » qui vient juste avant le bouton historique, vous permet de modifier d’avantage les différentes sections par rapport au navigateur utilisé par les visiteurs. Cette option vous donne accès à le modification avancée des structures des sections (largeur des colonnes). Vous devez effectuer des modifications ici avec beaucoup de prudence.
Le bouton « Réglages » vous permet de modifier certaines options propre à la page comme le titre, l’image à la une ou l’état entre autre.
C’est tout pour ce tutoriel, nous allons explorer d’avantage Elementor dans nos prochains tutoriel. N’hésitez pas à jeter un coup d’œil au site officiel qui propose des exemples beaucoup plus abouti.
