Outils d'accessibilité

Prise en main de l'outil de modification des pages


Nous allons aborder ici plusieurs notions à connaître impérativement pour utiliser correction le constructeur de pages :

  1. Présentation de l'interface graphique
  2. Les fonctionnalités indispensables à connaître
  3. Les lignes et les colonnes : comment bien organiser la structure de la page ?
  4. Adapter la mise en page pour le mobile (téléphones et tablettes)
  5. Notes importantes lors de l'utilisation du constructeur de pages

  • Connectez-vous à l'espace d'administration du site.

RAPPEL : si vous ne savez plus comment vous connecter à l'espace d'administration de votre site, cliquez ici

  • Allez sur le page que vous souhaitez modifier, vous verrez un bouton appelé Editer cette page en haut à gauche (voir image ci-dessous).
  • Ce bouton vous permettra d'accéder à l'outil constructeur de page.

menu builder


1. Présentation de l'interface graphique

  • La page qui s'affiche est alors divisée en plusieurs parties :
    • (1) : la colonne tout à gauche comporte des boutons permettant d'accéder à différentes options de l'outil.
    • (2) : la colonne à coté affiche des paramètres et valeurs en fonction du bouton cliqué dans la colonne de gauche.
    • (3) : la zone à droite affiche le contenu de la page ou vous pouvez voir le rendu en temps réel.
    • (4) : la zone en bas à gauche permet de quitter le constructeur de page, anuler ou rétablir un changement et enregistrer vos modications.

builder ihm


2. Les fonctionnalités indispensables à connaître

Les modules

  • Le bouton Addons + (1), vous permet d'accéder à une collection de petits modules (ou appelés Addons en Anglais), afin de construire et mettre en forme votre page.
  • Ces modules sont de différente nature, en voici la liste non exhaustive :
    • Texte : permet d'ajouter un bloc de texte dans la page. 
    • Titre : permet d'ajouter un bloc de titre dans la page.
    • Bouton : permet d'ajouter un bouton dans la page.
    • etc...
  • L'utilisation et la configuration de ces modules est détaillée dans leur documentation dédiée accessible en cliquant ici.

builder addons

Les blocks

  • Le bouton Blocks (1), vous permet d'accéder à une collection de blocs prédéfinis et déjà mis en forme.
  • Ces blocs sont constitués de lignes et de colonnes avec une mise en forme déjà pré-réglée.
  • Vous pouvez filtrer par type de blocs (2) afin de choisir celui ou ceux correspondants à votre besoin.
  • Consultez le point suivant n°3 pour comprendre le fonctionnement des lignes et des colonnes.
  • L'insertion de blocs dans une page est détaillée dans une documentation dédiée accessible en cliquant ici.

builder blocks

Les modèles de pages

  • Le bouton Layouts (1), vous permet d'accéder à une collection de pages prédéfinies et déjà mises en forme.
  • Après avoir cliqué, une fenêtre va s'afficher, vous permettant de naviguer dans une collection de pages entières déjà mises en forme.
  • L'insertion d'un modèle de page est détaillée dans une documentation dédiée accessible en cliquant ici.

builder layouts

Les outils

  • Le bouton Tools (1), vous permet d'accéder à certaines options du constructeur de pages.
  • Les outils sont détaillés dans une documentation dédiée accessible en cliquant ici.

builder tools

La liste des pages

  • Le bouton Pages (1), vous permet d'accéder à la liste des pages, uniquement conçues via le constructeur de pages.
  • Le fonctionnement est détaillé dans une documentation dédiée accessible en cliquant ici.
  • Pour rappel : si vous souhaitez accéder à la gestion de pages spécifiques comme un annuaire, un blog, une boutique ecommerce ou autre, merci de consulter la documentation adéquate en cliquant ici.

builder pages


3. Les lignes et les colonnes : comment bien organiser la structure de la page ?

  • Le concept le plus important à comprendre pour une mise en page simple, rapide, logique et efficace, est la gestion des lignes et des colonnes.
  • Dans la page, il y a un code couleur pour les distinguer :
    • Les lignes sont symbolisées en bleu (1)
    • Les colonnes sont symbolisées en pointillés gris (2)
    • Les modules (Addons) en vert (3)
  • Il est important de noter certains points :
    • Un module (Addon) est toujours inséré dans une colonne, il ne peut pas être inséré dans une ligne.
    • Par conséquent, une ligne et une colonne sont toujours obligatoires à minima.
    • Il est possible d'insérer une ligne dans une autre ligne (au maximum).
    • Chaque ligne peut contenir au maximum 12 colonnes de tailles équivalentes.
    • Au sein d'une même ligne, des combinaisons de colonnes sont possibles comme par exemple :
      • 12 (pour une seule colonne)
      • 6 + 6 (pour faire 2 colonnes identiques)
      • 4 + 4 +4 (pour faire 3 colonnes identiques)
      • 8 + 4 (pour faire 2 colonnes ou celle de gauche sera plus grande que celle de droite)
      • 4 + 8 (pour faire 2 colonnes ou celle de droite sera plus grande que celle de gauche)
      • etc...
    • Attention : peu importe la combinaison de colonnes au sein d'une ligne, le résultat final doit toujours être égal à 12 au maximum (il peut cependant être inférieur).
  • L'utilisation des lignes et des colonnes est détaillée dans une documentation dédiée accessible en cliquant ici.

builder lines cols


4. Adapter la mise en page pour le mobile (téléphones et tablettes)

  • Lorsque vous créez ou modifiez une page, il est nécessaire de vérifier certains ajustement spécifiques pour les téléphones et tablettes.
  • Ces ajustements peuvent être réalisés sur certains paramètres uniquement : taille des polices, marges internes, marges externes,...
  • Il y a 3 types réglages possibles pour ces paramètres :
    • Pour ordinateur
    • Pour tablette
    • Pour téléphone portable
  • Il est possible de modifier ces paramètres via un mode dédié pour chaque réglage :

builder mobile mode

  • La gestion des réglages pour le mobile est détaillée dans une documentation dédiée accessible en cliquant ici.

5. Notes importantes lors de l'utilisation du constructeur de pages

  • Quand vous travaillez sur le site et que vous modifiez une page, une déconnexion automatique aura lieue au bout de 15 minutes si vous laissez le site sans activité, ceci par mesure de sécurité.
    Afin d'éviter de perdre votre travail en cours, pensez à enregistrer régulièrement.

  • Pour plus de confort, pensez à réduire le panneau latéral gauche afin d'augmenter la surface d'affichage sur la droite de l'écran et ainsi faciliter la conception de la page :

    builder minimize
  • Il se peut que certaines différences de mise en forme soient visibles entre le mode édition (quand vous modifiez la page) et quand vous visitez la page comme un visiteur lambda.
    Par conséquent, il est important de vérifier la cohérence visuelle de votre page en mode normal (sans être en mode modification via le constructeur de page).

  • Si vous souhaitez par exemple insérer un lien sur une image ou sur un texte, vers une autre page de votre site, il faut simplement utiliser le lien après le .fr ou le .com dans l'adresse du site.
    Exemple : pour faire un lien vers la page http://www.mon-site.com/contact.html, dans le champ Url du titre/image/icône utilisez juste ceci contact.html et non ceci http://www.mon-site.com/contact.html

  • N'oubliez pas d'ajuster la mise en page de votre site pour les périphériques mobiles tels que les smartphones et les tablettes.
    Le constructeur de pages permet d'ajuster certains paramètres afin d'adapter et de régler la mise en page pour les périphériques mobiles.

  • Pour la page CONTACT, le formulaire n'est pas modifiable via le constructeur de pages, ceci pour des raisons de paramétrages techniques.
    Si vous souhaitez ajouter ou supprimer des champs, merci de nous contacter directement.

  • Par défaut, le consructeur de pages propose des modules pour créer des formulaires de contact.
    Il ne faut pas les utiliser, car ceux-ci nécessitent certains paramétrages spécifiques.
    Si vous souhaitez créer d'autres formulaires de contact, merci de nous contacter directement.

Liens utiles

Suivez-nous

sur les réseaux sociaux

logo du réseau social facebook
logo du réseau social linkedin
logo du réseau social linkedin
5 out of 5 stars
Nombre d'avis : 27
Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
En savoir plus
Functional
Outils utilisés pour vous apporter des fonctionnalités lors de votre navigation, cela peut inclure des fonctions de réseaux sociaux.
Cloudflare
Accepter
Décliner
Analytics
Outils utilisés pour analyser les données de navigation et mesurer l'efficacité du site internet afin de comprendre son fonctionnement.
Google Analytics
Accepter
Décliner