Si vous avez décidé de créer un site Web et que vous souhaitez modifier son apparence sans vous creuser la tête avec du code, apprendre à utiliser le constructeur de pages Elementor pour WordPress peut vous être d’une grande aide.

Pour les débutants, la création d’un site web peut sembler une tâche très difficile, et la modification de sa conception encore pire.

Pour les utilisateurs plus expérimentés, la création d’un site n’est qu’une question de ressources et de temps, des facteurs qui font souvent défaut.

L’image parfaite pour WordPress

WordPress nous facilite énormément la vie. Au fil du temps, des outils appelés “constructeurs visuels de pages” ou « page builder » en anglais, sont devenus de plus en plus populaires.

Ces outils vous permettent de créer des pages web par le biais d’une interface simple, en visualisant les résultats en temps réel et en partant éventuellement de modèles préétablis. Elementor vous permet de le faire ! En fait, Elementor, comme presque tous les meilleurs constructeurs visuels, nous permet de nous concentrer sur l’apparence de notre site et sur l’expérience du visiteur.

De cette façon, vous évitez d’investir trop de temps dans la compréhension des aspects techniques de la création d’un site web. (Ce qui est important mais peut toujours se produire lorsque la première version du site est en ligne).

Quels sont les avantages d’Elementor par rapport aux autres constructeurs de pages ?

Contrairement à de nombreux constructeurs de pages, notamment ceux qui sont déjà présents dans certains thèmes, avec Elementor, vous pouvez concevoir entièrement chaque section de votre site Web, et pas seulement le contenu. En fait, vous pouvez créer vos en-têtes, pieds de page et barres latérales avec cet outil, puis faire une sorte de collage et créer votre page entièrement personnalisée.

Grâce aux modèles prêts à l’emploi, vous pouvez choisir le modèle de page qui vous plaît le plus ou qui correspond le mieux au type d’activité que vous exercez.

À partir de là, il sera ensuite très facile de commencer à créer votre page, puis de la personnaliser en fonction de votre style personnel.

Comme Elementor vous permet donc de travailler sur tous les détails, on vous suggère d’utiliser un thème très simple et léger. Pour cette raison, la même équipe qui a développé le plugin a également créé un thème extrêmement basique qui fonctionne parfaitement avec le constructeur de pages. Il s’appelle Hello Theme.

Utilisez plutôt des thèmes plus riches en fonctionnalités si vous décidez d’utiliser Elementor uniquement pour construire quelques pages, et non l’ensemble de votre site.

Dans la suite de ce guide sur d’Elementor, nous allons voir comment utiliser le plugin.

Elementor, le créateur de pages pour WordPress

Elementor est disponible dans une version gratuite et une version Pro. La version gratuite peut être installée comme n’importe quel autre plugin à partir de votre tableau de bord WordPress.

Si vous souhaitez passer à Elementor Pro, vous n’avez pas besoin de supprimer la version gratuite. Ce que vous devez faire, c’est :

• Laissez la version gratuite installée ;
• Achetez ensuite Elementor Pro ;
• Téléchargez le plugin Elementor Pro depuis votre espace client ;
• Installez-le comme un plugin normal (sans décompresser le fichier .zip) ;
• Activez le plugin ;

Suivez ces instructions pour connecter votre site à l’API d’Elementor.

Rappelez-vous donc que dans les plugins, vous aurez toujours à la fois Elementor de Base (gratuit) et Elementor Pro installés.

Dans la version Pro, vous bénéficiez de nombreuses fonctionnalités supplémentaires, notamment :

• 50 éléments Pro à insérer dans vos pages ;
• Le constructeur de thème pour vous permettre de construire toutes les sections de votre site ;
• Le constructeur pour la création de popups ;
• 15 éléments spéciaux pour WooCommerce ;
• Effets graphiques avancés ;
• Support premium.

Le fait que vous puissiez passer à Elementor Pro est un énorme avantage. Vous pouvez commencer par vous familiariser avec l’outil, puis le mettre à niveau lorsque vous le jugez nécessaire. Passons maintenant aux choses sérieuses et découvrons comment fonctionne Elementor et comment l’utiliser.

Qu’est-ce que Elementor ?

Le constructeur de pages Elementor est un plugin WordPress qui appartient à la catégorie des constructeurs visuels de pages. Sorti en 2016, il a été immédiatement apprécié par la communauté pour son offre gratuite de fonctionnalités généralement premium.

Sur WordPress.org, il a été installé plus de 700 000 fois et bénéficie d’excellentes notes, 5/5 étoiles.

Ces statistiques confirment la grande popularité de cet outil, dont les points forts sont une interface basée sur le “drag and drop” (glisser-déposer), qui est vraiment à la portée de tous, et des modèles prêts à l’emploi.

Si vous ne savez pas comment créer ou modifier un thème ou la conception d’un site Web, cet outil est fait pour vous.

Ce plugin vous permet de créer des designs personnalisés sans aucune connaissance technique, grâce à une interface intuitive et des aperçus en temps réel qui vous permettent de tester vos modifications en quelques clics de souris.

Elementor vous propose différents modèles que vous pouvez simplement télécharger et dont l’aspect de votre site est prêt en quelques minutes.

En utilisant le thème spécialement développé par les créateurs eux-mêmes, le thème Hello, vous êtes également assuré d’une compatibilité totale. Comme indiqué, cet outil dispose d’une version gratuite, mais une version premium est également disponible, beaucoup plus riche en fonctionnalités, à partir de 49 dollars par an pour un site.

Vous pouvez comparer les fonctionnalités des différentes versions en visitant le site officiel du plugin.

Elementor et WordPress : installation et premiers pas

Après avoir installé et activé le plugin, que ce soit dans sa version gratuite ou Pro, il suffit de cliquer sur Elementor dans le tableau de bord de WordPress pour accéder aux paramètres du plugin.

Elementor est essentiellement activé pour les articles et les pages, et dans cette section vous pouvez également décider qui aura accès aux outils fournis par ce plugin.

Elementor : les paramètres généraux

Sous Elementor > Paramètres, vous trouverez des cases pour choisir d’utiliser le plugin sur les pages et les articles.

Vous pouvez également conserver les paramètres de votre thème concernant les couleurs et les polices.

Si vous laissez ces cases désactivées, vous pouvez décider des couleurs et des polices directement lors de la construction de la page.

La section Elementor > Role Manager, quant à elle, vous permet de choisir qui peut avoir accès au constructeur en fonction du rôle WordPress de l’utilisateur.

Par exemple, vous pouvez sélectionner Éditeur pour empêcher ce rôle d’utiliser Elementor et n’utiliser que l’éditeur classique ou l’éditeur de blocs à la place.

Après avoir effectué les modifications souhaitées, n’oubliez pas de les enregistrer via le bouton disponible dans l’écran.

Comment marche le plugin pour WordPress ?

Pour accéder aux fonctionnalités du plugin, il suffit de créer un nouvel article ou une nouvelle page sur votre site. En cliquant sur le bouton Editer avec Elementor, vous accédez à un écran de chargement et, peu après, au constructeur de pages.

En utilisant le bouton + (Ajouter une nouvelle section), vous pouvez créer votre page à partir de zéro en utilisant les commandes de glisser-déposer dans la colonne de gauche.

Choisissez ensuite la structure de la section en fonction du nombre de colonnes, puis sélectionnez le symbole + dans celle-ci pour choisir l’élément à insérer.

Faites glisser l’élément souhaité dans la colonne de gauche (drag), puis déposez-le à l’endroit souhaité (drop).

Lorsque vous sélectionnez un élément sur votre page, plusieurs options sont disponibles et s’affichent dans la colonne de gauche.

Par exemple, vous pouvez rédiger et mettre en forme du texte, choisir une image dans la médiathèque, personnaliser la couleur d’une icône de lien, etc.

Si vous souhaitez utiliser les modèles Elementor disponibles, sélectionnez le bouton représentant une icône de dossier. Cela vous donnera accès à la bibliothèque de modèles. Choisissez celui que vous préférez, puis personnalisez-le à votre guise. Vous trouverez ici non seulement des modèles de pages entiers, mais aussi des éléments individuels.

Afin de tester pleinement la fonctionnalité de ce plugin, on vous recommande de commencer par l’un des modèles disponibles, de cliquer sur le bouton Ajouter un modèle et de choisir celui qui se rapproche le plus du design que vous aviez en tête.

Si vous utilisez Elementor gratuitement, vous verrez le label Pro sur certains d’entre eux. Cela signifie qu’il s’agit de modèles uniquement disponibles avec la version Premium.

Cliquez sur le bouton Insérer pour ajouter le modèle que vous avez choisi à la page.

Une fois le modèle chargé, vous pouvez sélectionner les éléments avec la souris et le plugin vous montrera les paramètres pertinents dans la colonne de gauche.

Lorsque vous créez une nouvelle section, un petit menu d’icônes apparaît chaque fois que vous la survolez avec la souris :

• Le + indique l’insertion d’une nouvelle section ;
• Les points d’une rangée sont utilisés pour faire glisser la section vers une autre position ;
• Le X supprime la section.

Même après avoir chargé un modèle, vous pouvez ajouter de nouveaux éléments à la page, toujours en utilisant la technique du glisser-déposer.

Vous pouvez enregistrer vos modifications à l’aide du bouton Enregistrer. Le bouton Enregistrer ne publiera pas le contenu sur le site, il ne fera qu’enregistrer vos modifications. Vous pourrez afficher un aperçu ou revenir au tableau d’affichage WordPress où vous pourrez publier ultérieurement le contenu final.

L’interface d’Elementor est basée sur : les sections, les colonnes et les widgets

Résumons les éléments sur lesquels ce constructeur de pages est basé. Les sections sont les blocs qui composent votre page et servent de “collecteur” pour différentes colonnes et différents styles. Chaque section est divisée en colonnes et détermine la structure des sections. Vous pouvez choisir le type de colonnes lors de la création d’une section. Les widgets sont les différents carrés de la colonne de gauche qui représentent des éléments que vous pouvez simplement glisser-déposer pour les placer dans la section souhaitée. Chaque élément, donc aussi bien les sections que les widgets, peut être personnalisé à l’aide des options situées à gauche.

Passez un peu de temps à essayer les différentes commandes. Afin de vous rendre compte du grand potentiel créatif offert par ce plugin. Sans compromettre la facilité d’utilisation et l’attention portée aux utilisateurs moins expérimentés.

Comment utiliser le constructeur de thème Elementor

L’une des caractéristiques les plus intéressantes d’Elementor est la possibilité de créer votre propre thème WordPress sans compétences en programmation. Cette option n’est disponible qu’avec la version Pro. Voici comment utiliser cet outil. Tout d’abord, voyons quels éléments vous pouvez créer avec le Créateur de thèmes.

Allez dans Modèle > Créateur de thème, vous y trouverez plusieurs onglets :

• Constructeur de thèmes
• En-tête
• Pied de page
• Simple
• Poste unique
• Page unique
• Archives
• Résultats de la recherche
• Erreur 404

Pour créer un en-tête personnalisé avec Elementor, allez dans En-tête et sélectionnez Ajouter un nouvel en-tête. Donnez-lui un nom et continuez.

Là encore, vous pouvez choisir l’un des modèles disponibles. Cliquez sur Insertion et commencez à personnaliser son apparence (marges, taille, couleurs…). Lorsque vous aurez terminé, cliquez sur le bouton Publier et il vous sera demandé où utiliser cet en-tête.

Ajoutez une condition et choisissez de l’afficher sur l’ensemble du site ou uniquement sur certaines pages. La même procédure peut également être appliquée à la création de tous les autres éléments. Lorsque vous créez une page telle que la page de résultats de recherche, assurez-vous qu’après la publication, vous attribuez la bonne condition pour afficher ce modèle. (Dans ce cas, vous devez sélectionner Résultats de recherche).

Créer une popup avec Elementor

Elementor Pro dispose également d’une fonction intéressante pour la création de popups. Allez dans Modèles > Popups et cliquez sur Ajouter un nouveau popup. Lors du choix d’un modèle, vous trouverez désormais également une section Popup. Dans laquelle vous pourrez sélectionner celle que vous préférez. Après l’avoir inséré, vous pouvez personnaliser divers aspects, du contenu aux graphiques. Jusqu’à présent, tout fonctionne de la même manière que pour la création de tout autre élément à l’aide du constructeur de thème Elementor. Mais maintenant, lorsque vous cliquez sur Publier, de nouvelles options apparaissent.

Tout d’abord, la section Conditions vous permet de choisir où afficher votre popup. (Comme nous l’avons vu pour l’en-tête, par exemple). Vous pouvez ensuite sélectionner le Trigger, c’est-à-dire l’événement qui provoquera l’affichage de la pop-up.

Plusieurs options sont également possibles. Au chargement de la page, au clic sur un élément, au défilement, ou même lorsque l’utilisateur tente de quitter la page.

Enfin, grâce aux règles avancées, vous pouvez établir des paramètres avancés pour le déclencheur.

Par exemple, vous pouvez choisir d’afficher la fenêtre contextuelle après une certaine période. Ou bien après que l’utilisateur a consulté un certain nombre de pages.

Conclusion

Elementor Pro est un plugin WordPress incroyablement puissant qui offre aux utilisateurs une grande flexibilité en termes de ce qu’ils peuvent créer. Avec Elementor, vous n’avez pas besoin de compétences en programmation. Créez des en-têtes, des pieds de page, des pages et des popups personnalisés. Il vous suffit de sélectionner un modèle et de commencer à le modifier en fonction de vos besoins. Les possibilités sont infinies !