Guide WordPress & Beaver Builder

Documentation récapitulative pour l'utilisation de votre site

Accès au tableau de bord

Avec vos identifiants

URL : www.nom-de-votre-site/wp-admin

Identifiant :

Mot de passe :

Tableau de bord

interface de gestion

Le tableau de bord de WordPress est le centre de contrôle de votre site.

Il permet de gérer contenus, apparence et fonctionnalités, le tout de manière simple et intuitive.

Voici les onglets qui vous seront le plus utile :

1️⃣ Pages
Les pages regroupent les contenus fixes de votre site, comme Accueil, À propos, Contact ou Services.
Elles sont généralement stables dans le temps et servent à présenter des informations essentielles ou institutionnelles.

👉 Exemple : une page "À propos" ne change pas souvent, contrairement à un article.

2️⃣ Articles
Les articles correspondent aux contenus publiés régulièrement dans la partie Actualités, Blog ou Presse de votre site.
Ils sont classés par date et par catégorie, et permettent de partager des informations récentes, des conseils, ou des mises à jour.

👉 Exemple : un nouvel article est publié chaque semaine pour informer vos visiteurs.

3️⃣ Médias
Cet onglet contient tous les fichiers importés sur le site : images, vidéos, documents PDF, etc.
Vous pouvez ajouter, supprimer ou réutiliser ces fichiers à tout moment.

L'éditeur Beaver Builder

C'est un outil visuel qui permet de créer et modifier les pages d'un site facilement

1️⃣ Accéder à l'éditeur Beaver Builder

L'outil Beaver Builder est disponible pour les pages, les articles et tout autre contenu créé sur mesure pour votre site.

Depuis l'onglet « Pages », au survol du titre de la page plusieurs actions sont possibles.

Pour modifier le contenu de votre page, cliquez sur "Beaver Builder".

En ouvrant Beaver Builder, vous accédez à l'éditeur visuel :

➡️ Vous y retrouvez tous les éléments qui composent votre page, organisés en modules (textes, images, boutons, etc.) et disposés dans des rangées pour structurer la mise en page.

**2️⃣ L'interface de Beaver affiche votre page web en mode édition*.**

L'interface se compose de trois éléments principaux :

➡️ La barre supérieure horizontale : Boutons d'actions rapides (Terminer (sortir) ou Publier / Enregistrer vos changements.)

➡️ La barre verticale : Les modules, les rangées et colonnes (ce sont les blocs de contenu & outils de mise en page).

➡️ *Votre page en mode "édition" : Au survol des éléments vous pouvez déplacer, modifier, dupliquer ou supprimer les éléments.

Modifier le contenu d'une page

une page Sert pour des informations fixes | Exemple : Accueil, À propos, Contact, Services…

Au survol des éléments vous pouvez pour chacun d'eux :

Déplacer, Modifier, Dupliquer, Supprimer

Pour modifier un élément :

1️⃣ Sélectionnez le pictogramme en forme de clé à molette (paramètres).

2️⃣ L'éditeur de l'élément choisi s'ouvre :

- Vous pouvez parcourir les différents onglets et effectuer vos modifications :

« Général »

Texte → éditeur simple, vous pouvez mettre en gras, ajouter des liens, etc.

Image → remplacer l'image depuis la médiathèque.

Bouton → changer le texte, la couleur ou le lien.

« Style »

Texte → La taille, la police, la couleur
- (* veillez à garder une cohérence avec votre charte graphique et à appliquer des styles similaires à l'ensemble des contenus de votre site)

« Avancé »

Texte → Espacement, visibilité

Lorsque vos modifications sont terminées, cliquez sur Terminer en haut à droite.

Choisissez :

Publier → pour rendre les changements visibles sur le site.

Enregistrer en brouillon → pour garder vos modifications sans les afficher au public.

Rejeter les changements → pour abandonner les changements effectués.

Annuler → pour revenir à l'édition de la page.

Modifier le contenu d'un article ou d'un contenu personnalisé

Sert pour des contenus réguliers, datés ou créés sur-mesure

Certains contenus, comme les articles utilisent un gabarit commun.

Cela signifie que la mise en page et le design sont prédéfinis*. Quand vous modifiez le contenu (texte, image…), le style reste identique sur tous les articles.

Pour créer un article :

➡️ Tableau de bord → Articles → Ajouter

➡️ Remplissez titre, texte, image à la une

➡️ Ajoutez catégories et étiquettes si nécessaire

➡️ Publier pour mettre en ligne

💡 Astuce : vous pouvez aussi dupliquer un article existant pour gagner du temps, puis modifier le contenu dupliqué. (avec l'option "Cloner")

‼️ Attention : Si vous clonez un article, pensez à modifier la meta-description utile au référencement de votre site et à supprimer le slug qui sera automatiquement mis à jour avec le nom que vous donnerez à la page.

➡️ Tableau de bord → Article → Modifier

➡️ Bas de page → Onglet Yoast SEO

➡️ Modifier le Titre SEO et la meta-description

➡️ Supprimer le slug

➡️ Enregistrer (en haut à droite) et publier votre article

Ajouter du contenu sur une page

Contenus préconçus selon votre charte graphique, prêts à être utilisés

Sur une page existante ou à partir d'une nouvelle page, vous pouvez ajouter de nouveaux contenus.

En mode édition sur Beaver Builder, vous retrouverez :

Rangées* → Structures de mise en page vides (1, 2 ou 3 colonnes, etc.). C'est à vous d'ajouter les modules de votre choix.

Modules → Liste d'éléments de contenu disponibles (texte, image, vidéo, galerie, etc.). | Les éléments déjà utilisés sur le site seront à votre charte, les autres seront à styliser

Gabarits → Modèles de pages déjà mise en forme.

Sauvegardés → Rangées déjà conçues selon votre charte graphique.

Instructions :

Glissez-déposez l'élément à l'endroit souhaité sur la page.

Configurez le contenu comme expliqué précédemment.

*Une rangée : Une section / Un bloc

Les bonnes pratiques

Pour la gestion de vos images

Depuis le tableau de bord, onglet médiathèque :

1️⃣ Image informative :

Texte alternatif (alt) : décrire le contenu et la fonction de l'image pour les utilisateurs malvoyants équipés de lecteurs d'écran.

Légende : facultative, à remplir si l'image doit être commentée.

Description : à remplir si un contexte supplémentaire est nécessaire.

Titre : nommer en minuscules avec des tirets, adapter la taille à l'usage de l'image, éviter les fichiers trop lourds. (1Mo maximum)

2️⃣ Image décorative :

Texte alternatif (alt) : laisser vide ou indiquer qu'elle est purement décorative.

Légende : facultative.

Description : facultative.

Titre : nommer en minuscules avec des tirets, adapter la taille à l'usage, éviter les fichiers trop lourds. (1Mo maximum)

3️⃣ Règles générales :

Ne pas utiliser de majuscules, parenthèses, caractères spéciaux ou espaces dans le nom du fichier.

Toujours remplir les champs selon le type d'image pour l'accessibilité de votre site web.

Vérifier le poids des images pour ne pas ralentir le site :
- Les Dimensions (Pixels)
  - Pour une image qui s'insère dans le contenu d'un article ou d'une page :
    - Largeur recommandée : 1200 px.
    - Pourquoi ? La colonne de texte standard d'un site WordPress fait souvent entre 700 et 800 px de large. En téléversant une image de 1200 px, vous assurez une netteté parfaite même sur les écrans Retina (haute densité) et les tablettes, tout en laissant à WordPress la possibilité de générer des tailles inférieures pour les mobiles.
    - Exception : Si l'image est vraiment petite (comme une icône ou un petit logo partenaire), une largeur de 300 px à 500 px suffit amplement.
- Le Poids (Ko)
  - C'est ici que CompressX va briller. Pour une image décorative, vous devez être impitoyable :
    - Objectif idéal : Moins de 300 Ko.
    - Limite maximale acceptable : 500 Ko.
- Le Format
  - Puisque vous avez CompressX, utilisez le format moderne :
    - Format recommandé : WebP.
    - CompressX gère très bien la conversion en WebP. Ce format est environ 30% plus léger que le JPEG à qualité égale et est compatible avec tous les navigateurs modernes.

Respecter ces bonnes pratiques pour vos images permet d'améliorer l'accessibilité, d'optimiser le SEO, de garantir de bonnes performances de chargement et d'assurer une expérience utilisateur agréable pour tous.