Construire et modifier les pages de votre front-end à l'aide du builder
Le builder est un outil simple et intuitif pour construire vos pages, sans connaissances en développement ou en intégration. Vous y ajoutez des composants par glisser-déposer, vous les configurez, puis vous publiez vos modifications.
1. Ouvrir le builder
1. Rendez-vous au menu Administration > Front-end, puis à l'onglet "Pages".
2. Recherchez la page à construire ou à modifier : utilisez le champ de recherche, les filtres par type de page et par statut, ou parcourez la liste.
3. Cliquez sur l'icône du builder en bout de ligne.
NB : si la page n'a encore aucun composant, ni entête ni pied de page, elle s'affiche vide. Commencez alors par créer et configurer votre entête et votre pied de page. Pour plus d'informations, consultez le tutoriel Créer et configurer les pages de votre front-end.
2. Ajouter des composants
Cliquez sur le composant de votre choix dans la barre de droite, puis glissez-le et déposez-le à l'emplacement souhaité. Une ligne verte indique où le composant va être déposé.
3. Modifier un composant
Cliquez sur le composant à modifier. Un petit menu s'affiche à côté, avec dans l'ordre :
- la flèche vers le haut : sélectionne le composant parent. Par exemple, si vous avez sélectionné le logo, qui est un sous-composant du composant "menu compact", la flèche sélectionne le "menu compact" ;
- la flèche multidirectionnelle : maintenez le clic pour déplacer le composant parmi les autres ;
- la duplication : crée une copie du composant ;
- la corbeille : supprime le composant de la page ;
- la roue crantée : ouvre les paramètres du composant ou du sous-composant.
Chaque composant a ses propres paramètres. N'hésitez pas à les essayer pour voir leur rendu. Vous pouvez par exemple choisir le menu affiché dans le composant "menu compact". Pour créer et configurer vos menus, consultez le tutoriel Créer et modifier les menus de votre front-end.
4. Modifier une image
1. Sélectionnez le composant qui contient l'image, puis cliquez sur la roue crantée pour ouvrir ses paramètres.
2. Dans le bloc "Image" (ou "Image de fond" pour les composants qui utilisent une image en arrière-plan), cliquez sur "Choisir une image".
3. Dans la pop-in, chargez votre image ou sélectionnez-la parmi les images déjà chargées. Elle s'applique automatiquement.
4. Fermez la pop-in en cliquant sur la croix en haut à droite.
Bon à savoir : vous pouvez aussi double-cliquer directement sur l'image dans la page pour ouvrir la pop-in. Pour supprimer l'image du composant, cliquez sur "Retirer l'image".
Attention : renseignez aussi le champ "Texte alternatif" dans les paramètres du composant. C'est la description de l'image lue par les lecteurs d'écran, obligatoire au titre de l'accessibilité numérique. Pour plus d'informations, consultez le tutoriel Renseigner le texte alternatif des images.
Afficher une image différente selon la taille d'écran
Vous pouvez choisir une image différente pour l'ordinateur, la tablette et le mobile. C'est utile par exemple pour afficher une image verticale sur mobile et une image horizontale sur ordinateur.
1. Dans le bloc "Image" ou "Image de fond" des paramètres du composant, cliquez sur l'icône de la taille d'écran concernée : ordinateur, tablette ou mobile.
2. Cliquez sur "Choisir une image" et sélectionnez l'image à afficher sur cette taille d'écran.
3. Recommencez pour les autres tailles d'écran si besoin.
NB : si vous ne renseignez que l'image pour ordinateur, elle s'affiche aussi sur tablette et sur mobile.
Pour vérifier le rendu sur chaque taille d'écran, prévisualisez votre page depuis la barre de publication (voir la section 8).
5. Modifier une icône
1. Ouvrez les paramètres du composant.
2. Dans "Type d'icône", choisissez "Image" ou "Icône".
- Avec le type "Image", modifiez chaque icône comme une image (voir la section 4).
- Avec le type "Icône", ouvrez les paramètres de chaque icône et indiquez son nom. Le nom commence par bi- et se termine par le nom de l'icône Bootstrap, par exemple bi-box, bi-circle ou bi-arrow-down-left-square. La liste des icônes est disponible sur le site icons.getbootstrap.com.
6. Personnaliser les couleurs
1. Cliquez sur l'icône "palette".
2. Définissez les couleurs principales de votre thème : cliquez sur un carré de couleur, puis choisissez la couleur à la pipette ou renseignez directement ses valeurs RGB.
3. N'oubliez pas de cliquer sur "Sauvegarder".
La palette s'applique à l'ensemble de votre front-end : ses couleurs sont ensuite disponibles dans la configuration de chaque composant.
Attention : il est aussi possible de modifier le CSS, mais nous vous le déconseillons fortement si vous n'avez pas l'habitude du CSS. Le CSS s'applique à toutes les pages : une erreur peut altérer le fonctionnement de tout votre front-end. Toute intervention de nos équipes liée à l'utilisation de cet éditeur est facturée.
7. La barre d'accès rapide
Depuis cette barre, vous pouvez :
- changer le statut de la page en cliquant sur son état actuel : de brouillon à publiée, ou de publiée à brouillon (hors ligne) ;
- modifier les paramètres de la page en cliquant sur l'icône "page" ;
- changer de page en cliquant sur l'icône "flèches inversées".
8. Enregistrer et publier
Depuis la barre de publication, vous pouvez dans l'ordre :
- prévisualiser votre page avant publication ;
- enregistrer le brouillon de vos dernières modifications ;
- annuler vos modifications ;
- publier vos dernières modifications.
Attention : configurez vos composants dans chaque langue de votre front-end. L'ajout ou la suppression d'un composant s'applique à toutes les langues : seule la configuration des composants est propre à chaque langue.
Pour quitter le builder, cliquez sur l'icône de sortie.