Les extensions incontournables pour WordPress – Partie 6

Bienvenue dans la sixième partie de ce nouvel article par Walk The Line !
Cette fois-ci, nous nous pencherons sur les constructeurs de pages. Plus précisément, nous allons vous présenter Elementor. C’est le page builder pour WordPress que nous utilisons à l’agence.

Qu'est-ce qu'Elementor ?

Elementor est un plugin page builder pour WordPress. Un page builder vous permet de créer le design de vos pages via un système de “drag and drop” de widgets. Grâce à des réglages précis de ces widgets, vous pourrez réaliser le design parfait pour votre site web en un tour de main.
Le plus ? Elementor s’adapte à une multitude d’extensions, comme WooCommerce par exemple. Il gère également le responsive web design. Ainsi, Vous pourrez gérer le rendu de vos pages web sur tous les devices.

1/ Télécharger l'extension Elementor

Pour cela, rendez-vous dans votre back office WordPress (tableau d’administration) puis dans Extensions > Ajouter, via le menu latéral, à gauche. Recherchez ensuite “Elementor”.

Telecharger Elementor WordPress

2/ Activez l'extension

Rendez-vous dans vos extensions ajoutées via Extensions > Extensions installées. Ici, cherchez “Elementor” et cliquez sur “Activer”.

3/ Réglages

Général

Reglages Elementor WordPress

“Types de contenus” correspond aux différents types de posts pour lesquels vous autorisez la modification avec Elementor. Il vous suffit de cocher ou décocher les types de posts en fonction de vos besoins.

Nous vous conseillons de désactiver les couleurs et polices par défaut d’Elementor. Ainsi, vos polices et vos couleurs personnalisées seront préservées.

C’est tout ! Ce sont les seuls réglages à appliquer à Elementor. Vous pouvez désormais construire votre première page.

Comment modifier le design d’une page avec Elementor ?

Modifier Page Elementor

Pour accéder à la modification avec Elementor, rendez-vous depuis le back-office sur la page que vous souhaitez modifier. Cliquez ensuite sur “Modifier avec Elementor”.

Widgets Elementor WordPress

Votre page s’ouvre avec un menu sur la gauche. Ce menu est votre bibliothèque de widgets Elementor. Tous les widgets doivent être contenus dans des colonnes, elles-mêmes contenues dans une section.

Colonne Widget Section Elementor

Si vous souhaitez ajouter du contenu à votre page, cliquez sur le « + » de la zone « Glissez un widget ici » pour créer une section. Choisissez le nombre de colonnes dont vous avez besoin. Rassurez-vous, vous pourrez toujours supprimer ou dupliquer une colonne au cas où vous ayiez mal évalué le nombre de colonne dont vous avez besoin.

Pour ajouter une colonne, faites un clic droit sur celle-ci puis cliquez sur “Dupliquer”. Pour en supprimer une, faites un clic droit dessus puis “effacer”.

Pour ajouter du contenu à votre page, il vous suffit de sélectionner un widget dans la liste de gauche et de le glisser sur votre page, dans la colonne de votre choix, à droite. Il vous faudra ensuite adapter son contenu s’il s’agit d’un titre ou d’un texte, depuis “Contenu”.
Dans “style”, vous pourrez personnaliser la couleur de votre texte, sa taille, son niveau de graisse, etc.
Enfin, dans “avancé”, vous pourrez lui appliquer une marge, un positionnement spécifique, etc.

Ce système “Contenu + Style + avancé” s’applique à une large majorité de widgets Elementor.

Comment modifier un contenu existant ?

Rien n’est figé avec Elementor ! Cliquez tout d’abord sur le widget que vous souhaitez modifier. Les options de modifications apparaîtront dans la barre latérale à gauche de l’écran, comme lorsque vous ajoutez un widget.

Par exemple, si vous souhaitez modifier un bloc texte, cliquez sur celui-ci et une zone de texte apparaîtra dans la barre latérale. Vous pouvez modifier votre texte ici.

Les options d’Elementor

Plusieurs options sont là pour vous aider à être plus efficace.
La roue crantée vous permet de gérer les paramètres de votre page WordPress. Par exemple, vous pouvez masquer le titre par défaut de la page.
Le navigateur est l’icône composée de trois calques superposés. Il vous sera très utile pour retrouver vos éléments si votre page commence à rassembler beaucoup de widgets, ou que l’un d’eux se retrouve inaccessible. Vous pouvez cliquer deux fois sur le nom de l’un des widgets pour lui donner un nom plus équivoque.
L’historique vous permet de remonter dans les actions effectuées sur votre page. Si vous avez réalisé une mauvaise manipulation, ce petit outil vous sera très utile.
L’icône d’écran, de tablette ou de mobile vous permet de prévisualiser vos modifications device par device. Par défaut, votre affichage est pour écran d’ordinateur. Cliquez sur cette icône et sélectionnez le mobile. Votre zone de travail va changer d’aspect et lorsque vous souhaiterez modifier un widget, les modifications ne s’appliqueront qu’au device sélectionné.

Parametre Elementor Ordinateur
Parametre Elementor Mobile

Dans cet exemple, mon texte est centré en version desktop et aligné à gauche en mobile.

Options Elementor

L’œil de prévisualisation permet, comme son nom l’indique, de prévisualiser votre page. Le constructeur Elementor ne permettant pas un rendu fiable à 100%, mieux vaut passer par cet outil pour prévisualiser vos modifications avant d’enregistrer votre travail.
Le bouton d’enregistrement/de publication vous permet de sauvegarder vos avancées pour ne pas perdre votre travail. A ne pas oublier, donc !

Construisez vos propres pages au design sur-mesure avec Elementor ! Comme vous pouvez le voir, la prise en main est simple et intuitive. Elementor dispose d’une version premium qui offre davantage de widgets et de fonctionnalités. Cependant, la version gratuite peut tout à fait convenir pour la construction de votre site web.

Alors, que dites-vous de ce constructeur de pages pour WordPress ? Elementor est le constructeur de pages le plus populaire, et ce n’est pas pour rien. L’utiliser pour construire votre site web vous permettra de gagner temps et de créer le design adaptés à vos envies.

Rendez-vous prochainement pour la suite et fin de notre article consacré aux extensions indispensables pour WordPress. La dernière partie de cet article vous réserve quelques extensions bonus. Elles ne sont pas indispensables mais peuvent vous faciliter les choses !

Partager sur facebook
Facebook
Partager sur email
Email
Partager sur twitter
Twitter
Pas de Réponse

Laisser un commentaire

Votre adresse e-mail 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.

Vous souhaitez lire plus d’articles ?

Walk The Line - agence de développement et formations web

En poursuivant votre navigation, vous acceptez le dépôt de cookies tiers pour nous permettre d’améliorer notre site. En savoir +