Chapitre 1 : Présentation d’Elementor
Avant d’installer et configurer Elementor, tentons de saisir pleinement ce qu’est Elementor.
Elementor a métamorphosé l’approche des utilisateurs de WordPress dans la création et la gestion de leurs sites Web. En tant que constructeur de pages visuel, Elementor propose une interface à la fois intuitive et puissante, ouvrant la possibilité à chacun, même dépourvu de compétences en programmation, de concevoir des pages à la fois attrayantes et fonctionnelles.
Elementor se positionne comme un constructeur de pages « drag-and-drop » (glisser-déposer) parfaitement intégré à WordPress. Depuis son lancement en 2016, il a rapidement conquis le cœur des utilisateurs en raison de sa facilité d’utilisation et de ses fonctionnalités avancées. Que vous soyez blogueur, propriétaire de petite entreprise ou développeur professionnel, Elementor propose une solution flexible pour la création de designs sur mesure.
Chapitre 2 : installer et configurer Elementor
C’est parti ! Nous allons entamer les étapes d’installation d’Elementor. Tout d’abord, rendez-vous dans votre tableau de bord, puis cliquez sur l’onglet « Extensions ». Sélectionnez « Ajouter une extension » et procédez à la recherche en saisissant « Elementor » dans la barre de recherche. Le plugin apparaîtra en tête des résultats, à ce moment, vous pourrez cliquer sur « Installer maintenant ».
Chapitre 3 : Activer notre constructeur de page Elementor
Une fois Elementor installé, vous pouvez maintenant cliquer sur « Activer » afin d’activer le plugin et le rendre opérationnel. Il est temps de plonger dans son utilisation.
Chapitre 4 : Création de votre compte Elementor
Une fois votre plugin activé, vous serez redirigé vers la page de configuration. Dans un premier temps, vous aurez l’option de créer un compte chez Elementor. La création de ce compte vous offrira la possibilité d’acheter la version Elementor Pro, qui propose une multitude de blocs et de fonctionnalités supplémentaires. Pour l’instant, nous allons opter pour la version gratuite et ne pas créer de compte.
Chapitre 5 : Installer gratuitement le thème Hello
Ensuite, nous allons choisir d’installer le thème Hello. Ce thème est entièrement compatible à 100% avec Elementor, car c’est l’équipe de ce merveilleux constructeur de pages qui l’a conçu. Il est important de noter que la gratuité de ce thème ne signifie pas de restrictions, au contraire, il offre une multitude de fonctionnalités essentielles que nous explorerons ensemble ultérieurement. Si vous avez déjà installé Elementor au préalable, vous trouverez comment installer le thème Hello sans passer par la configuration de base de l’installation du plugin.
Chapitre 6 : Choisir le nom de votre site
Il est maintenant temps de choisir le nom principal de votre site internet, une étape simple mais néanmoins importante. Vous pouvez y intégrer votre mot-clé principal. Par exemple, si votre restaurant se spécialise dans les lasagnes et que votre nom de domaine est www.lasagnerie.fr, vous pourriez renseigner « La Lasagnerie ».
Chapitre 7 : Téléchargez votre logo principal
Nous approchons de la fin de notre installation, il ne vous reste plus qu’à télécharger votre logo. Cependant, quelques facteurs doivent être pris en compte. Étant donné que votre logo figurera dans le bandeau de votre en-tête, c’est-à-dire dans le conteneur de votre menu principal, il ne sera généralement pas très grand. Par conséquent, il est recommandé d’opter pour un logo simple, sans trop de détails, avec une typographie assez élégante, de manière à ce qu’il reste visible même à petite taille sur votre site. Privilégiez un fichier ne dépassant pas 60 ko, avec une largeur idéale de 250 px pour des performances optimales.
Chapitre 8 : Partir de zéro ou de la bibliothèque de Template pour votre première page
Pour conclure ce chapitre après avoir installer et configurer Elementor, vous aurez le choix entre deux options pour la conception de votre première page. Vous pouvez soit opter pour une page vierge, soit commencer à partir d’un modèle choisi parmi plus d’une centaine de propositions. Cependant, pour accéder à cette dernière option, vous devrez choisir la version PRO d’Elementor. Pour le moment, nous allons démarrer avec une page blanche en utilisant l’option « Modifier un canevas vierge avec l’éditeur Elementor ».
Chapitre 9 : Réglages des fonctionnalités d’Elementor
Avant de passer à l’étape pratique, il nous reste quelques ajustements essentiels à aborder ensemble. Nous allons nous concentrer sur l’onglet Elementor > Général et vérifier que le constructeur de pages est bien activé pour les éléments « Pages », « Articles » et « Page d’atterrissage ». Si la case n’est pas cochée, le constructeur de pages ne sera pas actif pour la rubrique en question.
Nous reviendrons sur les Onglets « Intégration » et « Avancé » plus tard
Nous allons particulièrement nous pencher sur l’onglet « Fonctionnalités » pour lequel je vous suggère une sélection de réglages qui devrait vous convenir. Une fois ces paramètres configurés, n’oubliez pas de les enregistrer.
- Polices d’icônes « inline » « Par défaut »
- Conteneur grille « Actif »
- Barre supérieure de l’éditeur « Actif »
- Chargement optimisé de Gutenberg « Actif »
- Page d’atterrissage « Actif »
- Éléments imbriqués « Actif »
- Chargement différé des images d’arrière-plan « Par défaut »
- Optimiser le chargement des images « Par défaut »
- Guide de style global « Actif »
- Sortie DOM optimisée « Par défaut »
- Amélioration du chargement des ressources « Par défaut »
- Optimisation du chargement du CSS « Par défaut »
- Points d’arrêt personnalisés supplémentaires « Par défaut »
- Conteneur Flexbox « Actif »
- Mettre à niveau la bibliothèque Swiper « Par défaut »
- En-tête et pied de page du thème Hello « Par défaut »
- Partage des données d’utilisation « Par défaut vous pouvez ne pas le cocher »
Chapitre 10 : Concevoir sa première page avec Elementor
Nous avons donc vu comment installer activer et configurer le plugin de construction de page Elementor, dans le chapitre suivant nous allons voir comment concevoir notre première page avec Elementor.
