1 Fév, 2022

Éditer une page sous Elementor

Accéder à la modification des pages

Afin d’effectuer n’importe quelle modification sur votre site internet vous allez devoir vous connecter au back office de votre site internet. Nous vous transmettrons le lien et les identifiants afin de vous connecter. Si vous avez tous bien réussi vous devez arriver sur la page d’accueil de WordPress :

Quand vous êtes sur cet accueil vous pouvez directement vous rendre sur l’onglet « Pages » afin d’arriver sur la page suivante :
Vous pouvez supprimer la sample page si vous le souhaitez, elle n’est pas très importante. Une fois sur cette page vous pouvez soit cliquer sur « ajouter » afin de créer une nouvelle page ou passer votre souris sur la page que vous souhaitez modifier et cliquer sur le bouton « éditer avec Elementor ». Faite bien attention à cliquer sur ce bouton car plusieurs modifications différentes peuvent être appliquées mais uniquement celle d’Elementor nous intéresse pour le moment.

Editer une page

Si vous n’avez pas toutes les pages de la capture d’écran ne vous inquiétez pas c’est tout à fait normal car la plupart des pages qui sont présentes sont créés par le plugin woocommerce que j’ai d’installé sur mon site.

Une fois sur cette page vous allez soit éditer une page, soit en créer une. Dans un premier temps vous n’aurez pas forcément la proposition d’éditer avec Elementor , si jamais cela vous arrive il suffit d’ouvrir la page avec l’éditeur basique et appuyer sur le bouton qui autorise la modification avec Elementor comme ci-dessous :

Une fois ceci activé la page devra se recharger d’elle-même et la modification par elementor apparaitra dans le menu de modification rapide dans la liste des pages.

Si la modification est bien activée votre page devra ouvrir une prévisualisation de votre page avec un menu sur le côté :

La partie de droite vous permet de structurer les différents blocs qui composeront votre page et le menu de choisir quels éléments vous allez intégrer à l’intérieur des blocs.

Dans un premier temps vous allez donc créer et organiser vos blocs puis y insérer un élément afin que l’on puisse voir comment vous pouvez gérer les paramètres.

Dans la capture suivante j’ai créé un bloc dans lequel j’ai glissé un élément titre, ensuite j’ai choisi l’élément « section interne » que j’ai glissé juste en dessous. Ceci permet de créer deux blocs de tailles égales dans le même espace que le titre uniquement en dessous :

Il est important que rappeler que les titres d’une page sont rangés dans différentes catégories et que respecter la hiérarchie est très important. Dans une page le h1 sera toujours le titre principal de la page, les h2 serviront à définir des sous-parties au thème principal, même principe pour les h3 des sous parties du h2, etc. Pensez à vérifier la structure de vos titres avant chaque publication car cela pénalisera votre référencement !

Si vous souhaitez accéder aux paramètres des blocs il vous suffit de cliquer sur les 6 petits points dans le menu qui se trouvera toujours en haut, au milieu du bloc. Le + permet de créer un autre bloc de différente structure ou non, la croix permet de fermer ce menu.

Pour ce qui est du paramétrage des éléments vous allez cliquer sur un élément directement afin d’afficher le petit crayon d’édition et cliquer dessus.

    Les fonctionnalités d’Elementor

    Le menu d’Elementor regroupe différents types de contenu rangés dans des catégories distinctes :

    Dans la première catégorie vous pourrez retrouver tous les types de contenus qui sont les plus fréquemment utilisés. Chaque élément peut être sélectionné et déplacé à l’endroit de votre choix dans la page par un appui maintenu de la souris sur le type de contenu et un déplacement à l’endroit souhaité dans la page :
    La seconde fonctionne de la même manière mais vous propose des contenus plus spécifiques une fois la version pro achetée (Si nous administrons votre site cela sera le cas).

    La troisième catégorie reprend des éléments qui sont généralement présents dans un site internet et vient étoffer les propositions de la première rubrique. Les éléments « code court » et « HTML » sont légèrement différents car ils ne proposent pas un contenu déjà créé mais de rajouter une zone ou les personnes compétentes pourront rajouter un contenu dans le format adéquat. Si vous ne possédez pas ces compétences aucuns soucis et vous n’en aurez même pas forcément besoin pour réaliser ce que vous souhaitez !

    La quatrième catégorie vous propose des contenus qui permettent de modifier le comportement/fonctionnement du site, je m’explique : dans cette catégorie vous allez pouvoir rajouter des contenus fonctionnels comme un menu de navigation, un menu « header » ou encore des informations propres aux sites ou contenus (post Info, site title)

    La dernière propose des éléments communs à tous les sites utilisant WordPress, si jamais besoin se fait vous pouvez les trouver içi.

    Les principaux modules d’Elementor

    Le module titre Elementor

    Pour commencer le bloc titre, ce bloc peut contenir du texte que vous intégrez à la main mais aussi du contenu dynamique si vous renseignez une donnée via le petit bouton en haut à droite de l’encadré dans lequel le titre doit être écrit. Dans le premier menu vous pouvez aussi associer un lien, changer sa nature (h1, h2 ,h3, etc) ou encore son alignement dans la page.

    Dans le second menu vous pouvez changer le style du titre : sa couleur, sa typographie, l’intensité de la décoration de texte stroke, choisir d’appliquer ou non une ombre au texte et enfin changer le mode de fusion du texte.

    Le module texte Elementor

    Le bloc éditeur de texte fonctionne de la même manière que celui du titre à la différence qu’il est utilisé pour écrire les paragraphes de votre site internet.

    Le module image Elementor

    Le bloc image est assez succint, vous pouvez ajouter une image via la médiathèque du site ou de l’extérieur en appuyant sur le carré gris, la supprimer avec le petit bouton poubelle en haut à droite du carré gris et enfin changer : sa taille, son alignement, sa légende et la nature de son lien.

    La partie style de ce bloc vous permet de gérer : la taille de l’image, la taille maximum autorisée, changer son opacité, appliquer des filtres CSS automatisés, changer le rayon de bordure et son style et et enfin appliquer ou non une ombre.

    Le module vidéo Elementor

    Le bloc vidéo vous permet d’ajouter une vidéo, qu’elle soit hébergée en externe ou auto hébergée sur le site (attention cela réduit les performances du site). Une fois le lien renseigné vous pouvez cocher ou décocher certaines fonctionnalités tel que le mode muet, la lecture automatique, etc. Un deuxième bloc est disponible si vous descendez dans cette partie du menu. Il vous permet de définir une image affiché par défaut avant que l’utilisateur lance la vidéo. Le menu style de ce bloc est succint car il ne permet que de changer le ratio de la vidéo et appliquer les filtres css automatisés.

    Les paramètres d’édition

    Les paramètres d’édition diffèrent selon l’élément que vous avez sélectionné mais ceux qui nous intéressent se trouveront dans le premier et le second onglet. Le premier sert en général à modifier le contenu de votre élément et le second à gérer le style, les marges, etc.

    Les outils d’Elementor ne s’arrêtent pas là. Dans la capture ci-dessous vous pouvez voir des boutons qui se trouvent à côté du bouton de publication et ce sont eux qui nous intéressent.

    Le premier permet d’accéder aux paramètres de la page entière et non des blocs qui la composent (faire attention à ne pas changer le modèle de page car cela casserait certains réglages généraux que nous avons réglés).

    Le second vous permet d’ouvrir un nouveau menu qui affiche tous les blocs de la page et permet de les sélectionner facilement car certains se superposent lorsque vous leur dites d’adapter certains comportements et l’accès à leurs paramètres peut devenir compliqué. Le menu ressemble à cela :

    Le troisième peut vous sauver la mise ! C’est un menu de révision qui permet d’annuler certaines modifications que vous avez effectuées lors de cette session (attention ce n’est pas magique si vous sortez de la mise en page et y revenez, vous ne verrez plus vos modifications, faites donc attention à bien rester sur cette page et en ouvrir une autre afin de visualiser le résultat de votre travail).

    Le quatrième permet de visualiser le rendu de la page en différents formats (Web, tablette et smartphone).

    Le cinquième ouvre directement un aperçu de la page avec les modifications que vous venez d’effectuer.

    Une fois que vous avez terminé de créer il vous suffit de cliquer sur le bouton publier afin de rendre publique votre page.

    Si le fonctionnement et l’utilisation de WordPress et d’Elementor vous intéressent pour la création de votre site web ou boutique en ligne, n’hésitez pas à utiliser le formulaire ci-dessous, pour prendre directement contact avec notre pôle WordPress, qui vous guidera étape par étape dans la mise en place des outils adaptés à votre projet.

    Besoin d’aide pour votre projet de…

    Développement sur mesure

    EN SAVOIR PLUS >

    Sites WordPress

    EN SAVOIR PLUS >

    Design, UI, UX

    EN SAVOIR PLUS >