Elementor, le meilleur constructeur de page

Elementor est un page builder qui permet de travailler facilement le graphisme des pages de votre site. Il s’agit d’un plugin gratuit et trés facile d’utilisation. En effet, Elementor permet de construire les pages de votre site web sous le principe du glisser déposer. Nous allons voir ensemble comment utiliser Elementor

1. telecharger le plugin Elementor

 

Pour se faire,  il vous suffit d’aller dans l’onglet « Extensions », puis de faire « Ajouter », renseigner « Elementor » dans l’outil de recherche, d’installer et d’activer. La fonction Elementor sera  ensuite directement disponible dans  la création de page.

2. Débuter avec Elementor

 

Après avoir installé l’extensions Elementor, rendez-vous dans « Pages » puis « Ajouter ». Ensuite, renseignez le titre de votre page et cliquez simplement sur « Modifier avec Elementor ».

Dès à présent, vous allez découvrir une nouvelle interface. Toutefois, avant de débuter la création de votre page web, vous devez comprendre le fonctionnement d’Elementor.

3. LE FONCTIONNEMENT D’Elementor

 

Le principe de ce constructeur de page est un peu complexe mais n’ayez crainte, vous allez vite vous y faire.

Premièrement, vous devez ajouter une nouvelle section, en cliquant sur le petit plus rose.

Cet élément vous permet de définir le format de votre ligne. Sera-t-elle composée d’une ou de plusieurs colonnes ? A vous de choisir en cliquant sur la structure de votre choix.

4. LES DIFFERENTS ELEMENTS

 

Une fois la structure de votre ligne sélectionnée, vous allez pouvoir ajouter des widgets (fonctions) dans chacune d’entres elles en les faisant glisser de gauche à droite.  

Pour se faire, vous devez sélectionner la fonction de votre choix, sur la partie de gauche, puis la faire glisser vers la droite pour la déposer dans la section de votre choix.

 

De nombreux éléments sont disponibles pour vous permettre de compléter votre contenu : 

 

Section interne : Redécoupe votre colonne en plusieurs colonnes

Titre : à utiliser pour vos titres et sous titres, avec balises H1, H2 et H3

Image : Illustrations  et photos 

Éditeur de texte :  texte identique à l’éditeur de texte de WordPress

Vidéo : Fichier vidéo en MP4 ou ou lien Youtube

Bouton : bouton cliquable vous permettant d’en personnaliser le texte, la couleur, la forme et le lien de la page atterrissage

Google Maps : Localisation de votre point de vente par adresse Google

Icone: accès à la bibliothèque d’icônes (vaste choix)

 

 

 

 

 

Boite d’image : image personnalisable dans la bibliothèque media /  titre / texte

Boite d’icone : icone personnalisable dans la bibliothèque /  titre / texte

Notation par étoiles : étoiles de 1 à 5 

Carrousel d’image : plusieurs image qui défilent avec possibilité de personnalisé le nombre de photos, la taille d’affichage et la vitesse de transition

Galerie d’image : plusieurs images, toutes affichées avec possibilité de personnalité le nombre de colonnes et la  dimension des visuels.

Liste d’icone

Barre de progression

Témoignages

Onglets

Accordéon et va et vient  : idéal pour les FAQ

Code court : lien des shortcodes (formulaire de contact)

 

 

 

Enfin, lorsque votre widget (fonctions) est déposé dans son emplacement vous pouvez le personnaliser grâce aux 2 onglets « Contenu » et « Style ».

Pour se faire, sélectionnez la section que vous souhaitez éditer. Lorsque vous la sélectionnez à l’aide votre souris, un encadré bleu apparaît autour de celle-ci.

L’onglet « contenu » vous permet d’alimenter le contenu de votre widget. Par exemple, ajouter du texte dans votre widget texte ou ajouter une image dans votre widget image.

L’onglet « style » va vous permettre de personnaliser la mise en page de votre widget. Par exemple, pour les widgets « Titre » ou « Editeur de texte », vous pourrez modifier la couleur de votre texte et sa typographie. Pour le widget « Image », l’onglet « Style » vous permettra d’ajouter votre photo, d’en modifier la hauteur, la longueur, l’opacité et la bordure.

               

Enfin, pour finaliser le contenu de votre page, vous devez recommencer autant de fois que nécessaire :

• Ajoutez une nouvelle section (petit + rose)
• Définissez la structure de votre ligne en sélectionnant le nombre de colonnes
• Ajoutez les widgets dans les sections de votre choix et personnalisez les grâce aux onglets « Contenu » et « Style »

Lorsque vous aurez finalisé votre page internet à l’aide d’Elementor, n’oubliez pas de l’enregistrer !!! Pour se faire, vous devez cliquer sur le bouton vers « Publier » puis revenir à l’interface classique de WordPress. 

 

 

 

 

4. Tutos VIDEOS Elementor