skip to Main Content

Tutoriel Elementor : Présentation de l’interface

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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 GratuiteVersion Complète
Multiples ColonnesMenu de navigation, d’article
Modules Textes, TitresModule WooCommerce (produits, catégories)
Modules Vidéo, Image, Caroussel, Galleries, SoundcloudIntégration Facebook (page, button, commentaires)
Module de partageTableau de prix
Module HTMLPortfolio, Formulaire
Module pour widget WordPressModule 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.

page de présentation delementor.png

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.

notification plugin elementor.png

Il vous suffit donc de cliquer dessus pour accéder à la page d’enregistrement et de cliquer sur Activate.

enregistrement dune licence elementor.png

Vous devrez normalement votre une page de confirmation si votre licence est valide.

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

licence active elementor.png

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.

constructeur elementor.png

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).

presentation interface elementor.png

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.

section elementor.png

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.

ajouter des blocs elementors.png

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.

choisir une mise en page elementor.png

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.

section elementor avec zone.png

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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.

déplacement dune section elementor.png

Voici un exemple d’une section qui contient 2 blocs à savoir le bloc titre et bloc texte.

section element avec 2 blocs.png

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.

sauvegarde elementor.png

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.

previsualisation des modification elementor.png

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.

actions elementor.png

Ceci vous permettra de facilement revenir en arrière.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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.

option navigateur elementor.png

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.

reglages elementor.png

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.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie 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.

Back To Top
12 Partages
Partagez6
Tweetez3
Enregistrer3