Aller au contenu

Page builder

Construire une page pas à pas

Une page complète, de la page vide à la mise en ligne : un bandeau, trois lignes, quatre grilles. À chaque étape, ce qu’on fait dans le back-office et ce qui apparaît sur le site.

Pages › Ajouter une page

L’exemple est une page fictive, « Observer les baleines » : une introduction, une photo à côté d’un texte, trois adresses de croisières, puis une FAQ. Dans les schémas, ce que l’étape ajoute est entouré de rouge, comme dans les captures du guide. Mieux vaut avoir lu Comprendre la logique avant.

Le plan, tel qu’il sera à la fin :

  1. Ligne 1 fond Blanc, marge du haut Grande
    1. Grille une colonne → Texte
  2. Ligne 2 fond Crème
    1. Grille cinq douzièmes, sept douzièmes → Image | Texte
    2. Grille trois colonnes → Contenu | Contenu | Contenu
  3. Ligne 3 fond Blanc, marge du bas Grande
    1. Grille une colonne → FAQ

La marche à suivre

  1. Créer la page. Pages › Ajouter une page. Écrire le titre, « Observer les baleines » : il donne son adresse à la page et termine le fil d’Ariane. Dans la boîte Attributs de page, à droite, laisser le Modèle sur Modèle par défaut : c’est lui qui fait apparaître la boîte Page Builder. Cliquer Enregistrer le brouillon : la page existe, rien n’est encore en ligne.

  2. Remplir le bandeau. Onglet Hero section : un Sous-titre d’une ligne, une image par saison, 1 Mo au plus — au moins celle de la saison en cours —, et un bouton, avec son Texte du CTA et son Lien du CTA. Le Titre peut rester vide : le bandeau affiche alors le titre de la page. Détail de chaque champ dans Le bandeau.

  3. Ajouter la première ligne. Onglet Page builder. La zone est vide, avec un message qui invite à cliquer Ajouter une ligne. Cliquer ce bouton : une petite liste s’ouvre juste dessous. Elle n’a qu’un choix, Ligne : le cliquer. Le bloc 1 Ligne apparaît, avec son en-tête en bleu — c’est le bloc où l’on travaille.

    Une ligne vide ne s’affiche pas sur le site : elle attend sa première grille et son premier élément.

  4. Ajouter une grille dans la ligne. Dans l’onglet Contenu de la ligne, cliquer Ajouter une grille, puis Grille dans la liste. Le bloc 1 Grille apparaît, rangé dans la ligne. Sa liste Grille propose d’office une seule colonne, [------------] : la garder. Dessous, la colonne unique, Une colonne, attend ses éléments.

  5. Poser un élément dans la colonne. Sous Une colonne, cliquer Ajouter un élément, puis Texte dans la liste — elle en propose quinze, voir Les éléments. Le champ Texte s’affiche d’abord sous une barre grise, Cliquer pour initialiser TinyMCE : cliquer dedans ouvre l’éditeur habituel. Écrire l’introduction : un intertitre, en Titre 2 dans la liste Paragraphe de la barre d’outils, puis deux paragraphes. L’intertitre compte aussi pour la suite : les tuiles des croisières, posées plus bas, auront ainsi un titre au-dessus d’elles dans le sommaire de la page — voir Le niveau des titres.

    C’est la logique complète, dans l’ordre : une ligne, une grille dedans, un élément dans sa colonne. Tout le reste de la page se construit de la même façon.

  6. Régler la ligne. Revenir à l’en-tête du bloc 1 Ligne, et ouvrir son onglet Marges : Marge du haut sur Grande. Sans elle, le texte colle au bandeau. L’onglet Fond propose Blanc d’office : le garder.

  7. Vérifier. Enregistrer le brouillon, puis Prévisualiser : la page s’ouvre dans un nouvel onglet, telle qu’elle sera. Revenir à l’onglet du back-office pour continuer. Prendre l’habitude d’enregistrer à chaque ligne terminée : rien ne l’est tant qu’on n’a pas cliqué.

  8. Ajouter la deuxième ligne. D’abord, replier la ligne 1 d’un clic sur son en-tête : elle se réduit à une barre, et l’écran redevient lisible. Puis cliquer le bouton Ajouter une ligne du bas, sous la ligne 1 : celui du haut placerait la nouvelle ligne en tête de page. Choisir Ligne, puis dans son onglet Fond, Crème.

    Le bouton du bas, sous la dernière ligne, ajoute à la suite. Sur le site, rien ne change encore : la ligne 2 est vide.

    Sur un fond de couleur, la ligne garde d’elle-même un espace en haut et en bas : pas de marge à régler ici.

  9. Une grille à deux colonnes. Dans l’onglet Contenu de la ligne 2 : Ajouter une grille, puis Grille. Dans la liste Grille, choisir [-----][-------] : cinq douzièmes à gauche, sept à droite. Le champ Alignement apparaît : Centre, pour que le texte se cale au milieu de la photo. Deux zones remplacent Une colonne :

    • sous Colonne de gauche, Ajouter un élément › Image, puis choisir la photo ;
    • sous Colonne de droite, Ajouter un élément › Texte, puis écrire.

  10. Une seconde grille, sur le même fond. Les trois croisières doivent rester sur la bande crème : elles vont donc dans la même ligne, dans une seconde grille. Replier la grille 1, puis cliquer le bouton Ajouter une grille du bas, toujours dans la ligne 2. Choisir [----][----][----]. Dans chacune des trois colonnes, Ajouter un élément › Contenu, puis choisir une adresse : la chercher à gauche, cliquer pour l’ajouter à droite.

    Deux grilles, une seule bande crème. Une nouvelle ligne aurait coupé la bande en deux.

  11. Une troisième ligne pour la FAQ. Replier la ligne 2. Bouton Ajouter une ligne du bas, Ligne. Onglet Marges : Marge du bas sur Grande, pour aérer la fin de page avant le pied de page. Onglet Contenu : Ajouter une grille, laisser une colonne, puis Ajouter un élément › FAQ. Remplir le Sur titre et le Titre, puis Ajouter une question pour chaque question, avec sa réponse.

  12. Publier. Un dernier Prévisualiser, sur ordinateur puis fenêtre réduite, pour voir la page comme sur un téléphone : les colonnes s’y empilent, celle de gauche en premier. Puis Publier. Pour la retoucher ensuite, même écran, bouton Mettre à jour.

Ce qu’il faut retenir

On veut…On ajoute…
Une nouvelle section, d’une autre couleurUne ligne, par le bouton Ajouter une ligne du bas.
Changer le nombre de colonnes, sur le même fondUne grille, dans la ligne.
Un texte, une image, une liste de plus dans une colonneUn élément, dans la colonne.
Ranger une liste sous un titreUn élément Texte avec un intertitre, juste avant la liste. Voir Le niveau des titres.
Plus vite : partir d’une page existante

Dans la liste des Pages, au survol du titre d’une page, Dupliquer cela crée aussitôt une copie en brouillon, lignes comprises. Il ne reste qu’à la renommer et à changer les contenus. Au sein d’une page, les blocs se dupliquent aussi : voir Déplacer, dupliquer, supprimer.