Ce guide vous explique les bases pour modifier une page avec Elementor en utilisant les nouvelles fonctionnalités, notamment les conteneurs Flexbox.

1. Ouvrir l’éditeur Elementor

Pour commencer à modifier une page, rien de plus simple :

1. Dans votre tableau de bord WordPress, allez dans Pages.
2. Survolez la page que vous souhaitez modifier.
3. Cliquez sur Modifier avec Elementor.

2. Ajouter et structurer un conteneur

Les conteneurs sont les blocs de base de votre mise en page. Ils vous permettent d’organiser vos widgets (texte, images, etc.).

1. Cliquez sur l’icône plus (+) dans la zone principale pour ajouter un nouveau conteneur.
2. Choisissez une structure prédéfinie (par exemple, une colonne, deux colonnes) ou un conteneur Flexbox pour un contrôle total.
3. Une fois le conteneur ajouté, vous pouvez définir sa direction dans le panneau de gauche :
   • Verticale : Les widgets s’empilent les uns sur les autres.
   • Horizontale : Les widgets se placent les uns à côté des autres.

3. Ajouter et gérer des colonnes (Conteneurs imbriqués)

Avec Flexbox, les colonnes sont en réalité des conteneurs placés à l’intérieur d’un conteneur principal. Cela vous donne un contrôle total sur la mise en page.

1. Sélectionnez le conteneur principal (celui qui contiendra vos colonnes).
2. Assurez-vous que sa Direction est réglée sur Horizontale (rangée).
3. Ajoutez une colonne : Prenez le widget Conteneur dans le panneau de gauche et glissez-le à l’intérieur de votre conteneur principal.
4. Ajoutez d’autres colonnes : Répétez l’opération en glissant d’autres widgets Conteneur à côté du premier.
5. Gérer la largeur : Cliquez sur un conteneur-colonne, allez dans l’onglet Mise en page et ajustez sa Largeur (en %, VW, ou PX) pour qu’il prenne plus ou moins de place.

Astuce : Vous pouvez faire un clic droit sur un conteneur-colonne et choisir Dupliquer pour ajouter rapidement une nouvelle colonne identique.

4. Ajouter un widget (texte, image, bouton, etc.)

Les widgets sont les éléments de contenu que vous placez à l’intérieur de vos conteneurs.

1. Dans le panneau de gauche, repérez le widget désiré (ex : Titre, Éditeur de texte, Image, Bouton).
2. Glissez-déposez le widget dans votre conteneur.
3. Le panneau de gauche affichera automatiquement les options pour personnaliser ce widget.

5. Modifier des éléments spécifiques

Modifier une image

1. Cliquez sur le widget Image que vous voulez changer.
2. Dans le panneau de gauche, sous l’onglet Contenu, cliquez sur la zone Choisir une image.
3. Sélectionnez une image dans votre Médiathèque ou téléversez-en une nouvelle.

Modifier du texte

1. Cliquez sur le widget de texte (ex : Titre ou Éditeur de texte).
2. Modifiez le texte directement dans l’éditeur du panneau de gauche.
3. Pour changer l’apparence (police, couleur, taille), allez dans l’onglet Style.

Modifier un Titre

1. Cliquez sur le widget Titre.
2. Dans l’onglet Contenu du panneau de gauche :
   • Titre : Modifiez le texte de votre titre.
   • Lien : Ajoutez une URL si vous souhaitez que votre titre soit cliquable.
   • Balise HTML : Choisissez la balise sémantique (H1, H2, H3…) pour le référencement (SEO).
3. Dans l’onglet Style, vous pouvez personnaliser :
   • La Couleur du texte.
   • La Typographie (police, taille, graisse, etc.).

Ajouter et configurer un bouton

1. Glissez le widget Bouton dans un conteneur.
2. Dans l’onglet Contenu du panneau de gauche :
   • Texte : Écrivez ce qui doit apparaître sur le bouton (ex : « En savoir plus »).
   • Lien : Ajoutez l’URL de destination (ex : /a-propos pour une page interne ou https://exemple.com pour un site externe).
3. Personnalisez son apparence (couleur, typographie, etc.) dans l’onglet Style.

6. Ajouter de l’espace entre les éléments

Pour aérer votre design, vous avez deux méthodes principales.

Méthode 1 : Ajuster les marges et le remplissage (Padding)

C’est la méthode la plus flexible. Chaque élément (conteneur, colonne, widget) possède ces réglages.

1. Cliquez sur l’élément à espacer.
2. Allez dans l’onglet Avancé.
3. Ajustez les valeurs :
   • Marge (Margin) : Ajoute de l’espace à l’extérieur de l’élément.
   • Remplissage (Padding) : Ajoute de l’espace à l’intérieur de l’élément.

Méthode 2 : Utiliser le widget « Espaceur »

Ce widget ajoute simplement un bloc d’espace vide. Glissez-le entre deux éléments et ajustez sa hauteur.

7. Enregistrer vos modifications

Une fois que vous êtes satisfait de vos changements, il est crucial de les sauvegarder.

• Cliquez sur le bouton vert Publier situé en haut à droite.

Et voilà! Vos modifications sont maintenant en ligne.

Donnez plus de puissance à votre site

Un site bien entretenu et optimisé fait toute la différence pour vos visiteurs et pour votre entreprise. En améliorant la performance, la sécurité et l’expérience utilisateur, vous maximisez l’impact de votre présence en ligne.

Contactez notre équipe pour découvrir comment rendre votre site encore plus efficace et adapté à vos objectifs.