Documentation

Sections, lignes, blocs.

Toutes les pages de JEIKO — celle-ci comprise — sont faites des mêmes quatre niveaux. Les comprendre, c'est savoir où poser chaque réglage, et construire des pages qui tiennent sur téléphone comme sur grand écran.

L'arbre d'une page

Une page est un empilement à quatre niveaux. Chaque élément vit dans son parent : on crée la section avant la ligne, la ligne avant le bloc.

Page
└─ Section une bande horizontale, pleine largeur (FULL) ou centrée (CLASSIC)
└─ Ligne une rangée, découpée en 1 à 12 colonnes
└─ Bloc une case dans une colonne
└─ Contenu un texte, une image, un bouton, une FAQ…

Section : la bande qui porte le fond pleine largeur. En CLASSIC, son contenu est centré dans 1 140 px sur grand écran, 950 sur portable, 730 sur tablette, 92 % sur téléphone.
Ligne : la répartition des colonnes sur une grille de douze — 6-6, 4-4-4, 8-4… —, réglable par appareil. Une ligne 4-4-4 sur ordinateur devient 12-12-12 sur téléphone : trois cartes empilées.
Bloc : il remplit sa colonne. Deux blocs dans la même colonne se suivent ; dans deux colonnes, ils sont côte à côte.

Quatre appareils, sept familles de réglages

Tout se règle appareil par appareil, et les quatre existent toujours. Régler l'ordinateur seul ne règle que les grands écrans : pensez d'abord au téléphone, c'est là qu'est la majorité des visiteurs.

phone jusqu'à 767 px
tablet 768 à 991 px
laptop 992 à 1 199 px
computer 1 200 px et au-delà

Section, ligne et bloc partagent les mêmes familles de réglages :

Fond — couleur, ou image avec ses réglages : répétition, cadrage, position, flou, luminosité, opacité, attachement.
Marges et paddings — les quatre côtés, pour chaque appareil.
Tailles — largeur et hauteur, par appareil.
Bordure — épaisseur, style, couleur, arrondi.
Animation — apparition au défilement, durée, délai, activable appareil par appareil.
Alignement (bloc seulement) — à gauche, au centre, à droite ; en haut, au milieu, en bas.
CSS — en dernier recours : une classe, ou quelques règles par appareil et au survol.

Choisissez le bon niveau : un fond pleine largeur va sur la section, une gouttière entre colonnes sur la ligne, un décalage qui ne concerne qu'un titre sur le bloc.

Les sept blocs de contenu

Ce que contient une case.

Bloc	Pour
`TEXT`	Du texte riche : titres, paragraphes, listes, liens. C'est aussi le bloc des gabarits de fiche, avec ses jetons [%code%].
`BUTTON`	Un appel à l'action vers une page, une adresse ou un questionnaire.
`IMAGE`	Une image de la médiathèque, servie dans la bonne largeur.
`VIDEO`	Une vidéo YouTube ou Vimeo, ou un fichier déposé sur le site.
`FORM`	Un formulaire de contact : les messages arrivent par e-mail et dans les prospects.
`CALENDAR`	La prise de rendez-vous, sur les créneaux libres d'un type de rendez-vous.
`CHART`	Le graphique des scores d'un questionnaire.

Les seize blocs dynamiques

Une FAQ, des onglets, une table de tarifs ne s'écrivent pas en HTML : ce sont des blocs, avec des entrées qu'on ajoute, retire et réordonne une par une, sans toucher à la mise en page.

Bloc	Pour
`DYN_FAQ`	Des questions et réponses dépliables.
`DYN_ACCORDION_ADV`	Des sections repliables à deux niveaux.
`DYN_TABS`	Du contenu par onglets.
`DYN_CAROUSEL`	Des images qui défilent.
`DYN_GALLERY_FILTER`	Une galerie filtrable par catégorie.
`DYN_FILTER`	Une liste filtrable au clavier.
`DYN_PRICING_TABLE`	Des formules et leurs prix.
`DYN_TESTIMONIALS`	Des avis clients, un par un.
`DYN_TESTIMONIALS_GRID`	Des avis clients, en grille.
`DYN_STEPPER`	Un parcours en étapes numérotées.
`DYN_PROGRESS`	Des barres de progression.
`DYN_RATING`	Une note sur cinq étoiles.
`DYN_COUNTDOWN`	Un compte à rebours.
`DYN_COUNTDOWN_CTA`	Un compte à rebours avec bouton.
`DYN_RESOURCE_GRID`	Les fiches publiées d'un modèle, en grille : produits, articles, formations.
`DYN_RESOURCE_CAROUSEL`	Les mêmes, en carrousel.

Une FAQ par l'API

PUT /api/agent/v1/blocs/12/contenu/
{ "type": "DYN_FAQ",
"options": { "multiple": false },
"elements": [
{ "question": "Intervenez-vous le week-end ?", "reponse": "Oui, en urgence." },
{ "question": "Quels délais ?", "reponse": "Sous 48 h en général." } ] }

Envoyer « elements » remplace la liste entière ; sans « elements », seules les options changent.

L'éditeur de pages L'API