Comment construire un site internet avec Elementor

Pour créer un site WordPress, sans avoir les compétences techniques requises, utiliser Elementor est l’une des solutions que vous pouvez envisager. En effet, son système basé sur le Wysiwyg (What you see is what you get) et le glisser-déposer (drag and drop) vous permettra d’obtenir rapidement un site, conforme à vos attentes et vos besoins. Si vous souhaitez utiliser ce logiciel pour concevoir vous-même votre site, retrouvez dans cet article tout ce qu’il faut savoir à son sujet.

Présentation d’Elementor

Elementor est un plug-in disponible en version gratuite et en version payante (mode Pro). Il s’agit d’un constructeur de pages conçu pour WordPress. Il a été créé en 2016. En 2020, il comptabilisait déjà près de 5 millions d’installations actives contre 600 000 en 2017. Son succès s’explique surtout par son accessibilité. En effet, que ce soit pour la conception ou la maintenance de pages, avec ce logiciel, tout a été simplifié à l’extrême.

Le but principal d’Elementor est de permettre à ses utilisateurs de construire et structurer facilement des pages même si ceux-ci ne disposent pas de connaissances en codage. Pour ce faire, il propose de multiples fonctionnalités.

Plus besoin de savoir coder grâce à Elementor

Concernant sa version Pro, elle est proposée en trois versions à savoir : Personal, Plus et Expert. La différence entre ces dernières réside surtout dans le nombre de sites web qui peuvent être créés. L’existence de ces différentes déclinaisons permet aux petites entreprises comme aux concepteurs de site de disposer d’un outil adapté pour développer leurs activités selon leurs besoins et leur budget.

Les principales fonctionnalités et les avantages d’Elementor

Avec ce logiciel, vous pourrez créer des pages au design unique. Vous disposerez d’une interface intuitive pour travailler aisément et rapidement sur chacune d’entre elles. En travaillant directement sur le front-end, vous pourrez visualiser le résultat en temps réel de quoi éviter de commettre des erreurs.

Vous disposerez aussi d’une fonction d’édition de textes en ligne. En outre, ce plug-in vous permettra de réaliser des mises en pages et des designs intéressants à partir de nombreux templates fournis. Et si vous le souhaitez, il vous laissera créer entièrement votre page selon vos envies.

La bibliothèque d’Elementor vous fournira de nombreux modèles de pages en accord avec vos niches et vos objectifs. En matière de design, vous n’aurez que l’embarras du choix. Avec la version gratuite, plus de 150 modèles seront disponibles contre 300 avec la version pro. Et si cela n’est pas suffisant, vous pourrez toujours étendre les possibilités avec les kits Elementor. Grâce à cette collection de modèles qui suivront tous la même trame, vous pourrez créer un site web cohérent en plus d’être complet.

Dans sa version gratuite, Elementor sera pour vous une solution économique. Si vous avez une petite entreprise, ce logiciel vous permettra de créer un site internet qui conviendra parfaitement à vos besoins. Il sera également des plus pratiques pour la création de sites e-commerce.

La Création d’un site WordPress avec Elementor

Installation d’Elementor

Pour pouvoir commencer à utiliser Elementor, rendez-vous directement sur votre interface WordPress. Allez ensuite à l’onglet « Extensions » puis cliquez sur « Ajouter ». Faites une recherche dans le champ dédié pour finalement pouvoir procéder à l’installation et l’activation du plug-in.

Paramétrages

Suite à l’activation, vous pourrez accéder aux onglets : « Elementor » et « Modèles ». Sous le premier vous retrouverez les sous onglets suivants :

Réglages

3 sous onglets à savoir « Général », « Style » et « Avancé » y seront présents. Vous y retrouverez les types de contenus pouvant être édités avec Elementor. Là, vous serez libre de choisir l’éditeur qui vous conviendra le plus. Vous pourrez également y choisir votre propre thème en désactivant les couleurs par défaut d’Elementor. Il en est de même pour les polices.

Gestionnaire de rôle

Cette option vous permettra de gérer l’utilisation du page Builder en fonction des attributions des utilisateurs si vous êtes plusieurs à travailler le site.

Outils

Normalement vous ne devriez pas avoir recours à cet onglet. Toutefois, il si besoin, sachez que c’est là que vous pourrez régénérer le CSS, synchroniser la librairie, remplacer l’URL, contrôler les versions, etc.

Informations système

Il vous permettra de contrôler les informations de votre système.

Commencer / Obtenir de l’aide

Ces deux onglets vous permettront de visionner des vidéos d’explication et d’être renvoyé vers le page du support officiel d’Elementor.

Polices personnalisées

Pour sa part, cet onglet sera disponible uniquement sur la version pro.

Activer Elementor sur le contenu

Pour activer Elementor au sein de vos pages, il vous suffira d’aller à l’onglet « Pages » de WordPress, puis de cliquer sur « Ajouter ». Mettez ensuite le titre de votre page : Accueil, Contact, ou À propos, par exemple.

Pour activer le Page Builder, cliquez sur « Modifier avec Elementor ». Lorsque votre page s’ouvrira sur le Front, vous pourrez commencer à construire le layout.

Une fois sur l’interface utilisateur sur le front end, voici les éléments que vous retrouverez : le canva principal où vous pourrez placer vos blocs de contenu pour les ajuster ; les éléments de contenu disponibles ; le bouton des paramètres d’Elementor ; le menu « revenir vers l’éditeur de bloc » ; les paramètres généraux de votre page ; l’historique des révisions ; le mode responsive ; l’aperçu des modifications, et le bouton « publier page ».

Fonctionnement d’Elementor

Pour réaliser la mise en page de votre site, vous devez tout d’abord comprendre le fonctionnement de votre outil.

Sur l’écran, vous distinguerez 4 blocs bien distincts :

  • À gauche : celui des « widgets » que vous pourrez insérer dans votre layout, grâce au drag and drop.
  • Tout en haut : celui du « header », composé de l’en-tête de votre site (les menus et le titre de la page). À noter que la version gratuite d’Elementor ne permettra pas de le gérer.
  • À droite : celui de la « sidebar » qui ne sera également pas éditable avec Elementor.
  • Au centre : Le « Body » qui sera donc le contenu principal où interviendront les Pages Builders.

Pour créer une mise en page en partant de zéro, vous devrez ajouter des sections pour y insérer des widgets. Commencez donc par ajouter une nouvelle section en cliquant sur l’icône « + ».

Définissez ensuite sa structure en indiquant le nombre de colonnes. Vous pourrez personnaliser la section en la sélectionnant. L’opération de personnalisation pourra se faire sur trois points : le positionnement, le design, l’ajout de touche personnelle (animation, marges, etc.)

Pour insérer des widgets au sein d’une section, cliquez sur l’icône « + ». Une liste de modules apparaîtra. Il vous suffira de faire votre choix puis de faire glisser la sélection vers la section. Une fois inséré, le paramètre de personnalisation s’ouvrira sur la gauche. Chaque élément du contenu pourra y être travaillé individuellement.

Vous pourrez travailler sur des pages préconçues ou premade layout. En cliquant sur l’icône de dossier en gris, vous retrouverez 3 onglets. Celui des « Pages » vous permettra d’importer une mise en page prédéfinie. Celui des « Blocs » vous donnera la possibilité de télécharger des modules déjà paramétrés. Pour ce qui est de l’onglet « Modèles », il vous permettra de télécharger des modèles enregistrés dans votre bibliothèque.

Vous pourrez sauvegarder des mises en pages dans la bibliothèque qui pourront être réutilisées par la suite. Pour ce faire, cliquez sur l’icône « dossier » au sein de la page à sauvegarder, puis sur l’icône « disquette d’ordinateur ». Nommez le layout avant de l’enregistrer.

Gestion du responsive

Afin de vérifier le rendu de votre site sur les différents supports, cliquez sur l’icône « ordinateur » en bas à gauche de votre écran. 3 types de vues seront disponibles : Ordinateur, Tablette et Mobile. Vous pourrez contrôler ce qui apparaît à l’écran en allant dans l’onglet « Avancé ».

En version gratuite ou en mode Pro ?

Vous ne savez pas pour quelle version craquer ? Il faudra justement bien étudier vos besoins.

D’une part, la version gratuite présente un ensemble de fonctionnalités satisfaisantes. De l’autre, le mode Pro poussera l’expérience graphique à son maximum. En étant moins limitative, elle vous proposera plus de modèles pour mieux personnaliser votre site. De ce fait, vous vous démarquerez de la concurrence.

En fin de compte, Elementor est une extension WordPress incontournable dans la création de site web. Le fait qu’il soit libre, accessible et proposé avec une large gamme de fonctionnalité fait sa renommée. Chacun de ces éléments contribue à améliorer l’expérience utilisateur et, par conséquent, sa notoriété.

Divilogy a fait de la création de site internet son cœur de métier et accompagne des dizaines d’entrepreneurs chaque année. Pourquoi pas vous ?

Cet article vous a plu ? Partagez-le sur l’un de vos réseaux favoris !

Retrouvez nos articles similaires

Découvrez nos articles en avant première !

Découvrez nos articles en avant première !

Rejoignez nos fidèles lecteurs et soyez averti parmi les PREMIERS de nos prochains tutoriels sur WordPress et le web en général !

Vous faites désormais parti des chanceux 🍀 !