Documentation
Sections, rows, blocks.
Every JEIKO page — this one included — is made of the same four levels. Understanding them means knowing where each setting belongs, and building pages that hold up on a phone as well as on a large screen.
The tree of a page
A page is a four-level stack. Each element lives inside its parent: you create the section before the row, the row before the block.
Page
└─ Section a horizontal band, full width (FULL) or centred (CLASSIC)
└─ Row a row, split into 1 to 12 columns
└─ Block a cell in a column
└─ Content a text, an image, a button, an FAQ…
- Section: the band that carries the full-width background. In CLASSIC, its content is centred within 1,140 px on a large screen, 950 on a laptop, 730 on a tablet, 92% on a phone.
- Row: the column split on a twelve-column grid — 6-6, 4-4-4, 8-4… —, set per device. A 4-4-4 row on desktop becomes 12-12-12 on a phone: three stacked cards.
- Block: it fills its column. Two blocks in the same column follow each other; in two columns, they sit side by side.
Four devices, seven families of settings
Everything is set device by device, and all four always exist. Setting the desktop alone only sets large screens: think of the phone first, that is where most visitors are.
phone up to 767 px
tablet 768 to 991 px
laptop 992 to 1,199 px
computer 1,200 px and above
Sections, rows and blocks share the same families of settings:
- Background — a colour, or an image with its settings: repeat, fit, position, blur, brightness, opacity, attachment.
- Margins and paddings — all four sides, for each device.
- Sizes — width and height, per device.
- Border — width, style, colour, radius.
- Animation — reveal on scroll, duration, delay, enabled device by device.
- Alignment (blocks only) — left, centre, right; top, middle, bottom.
- CSS — as a last resort: a class, or a few rules per device and on hover.
Choose the right level: a full-width background goes on the section, a gutter between columns on the row, an offset that only concerns one heading on the block.
The seven content blocks
What a cell contains.
| Block | For |
|---|---|
TEXT | Rich text: headings, paragraphs, lists, links. Also the block of record templates, with its [%code%] tokens. |
BUTTON | A call to action towards a page, an address or a questionnaire. |
IMAGE | An image from the media library, served at the right width. |
VIDEO | A YouTube or Vimeo video, or a file uploaded to the site. |
FORM | A contact form: messages arrive by email and in the prospects. |
CALENDAR | Appointment booking, on the free slots of an appointment type. |
CHART | The score chart of a questionnaire. |
The sixteen dynamic blocks
An FAQ, tabs or a pricing table aren't written in HTML: they are blocks, with entries you add, remove and reorder one by one, without touching the layout.
| Block | For |
|---|---|
DYN_FAQ | Collapsible questions and answers. |
DYN_ACCORDION_ADV | Two-level collapsible sections. |
DYN_TABS | Tabbed content. |
DYN_CAROUSEL | Scrolling images. |
DYN_GALLERY_FILTER | A gallery filterable by category. |
DYN_FILTER | A list filterable by typing. |
DYN_PRICING_TABLE | Plans and their prices. |
DYN_TESTIMONIALS | Customer reviews, one at a time. |
DYN_TESTIMONIALS_GRID | Customer reviews, in a grid. |
DYN_STEPPER | A path in numbered steps. |
DYN_PROGRESS | Progress bars. |
DYN_RATING | A five-star rating. |
DYN_COUNTDOWN | A countdown. |
DYN_COUNTDOWN_CTA | A countdown with a button. |
DYN_RESOURCE_GRID | A model's published records, in a grid: products, articles, courses. |
DYN_RESOURCE_CAROUSEL | The same, in a carousel. |
An FAQ through the API
PUT /api/agent/v1/blocs/12/contenu/
{ "type": "DYN_FAQ",
"options": { "multiple": false },
"elements": [
{ "question": "Do you work weekends?", "reponse": "Yes, for emergencies." },
{ "question": "What lead times?", "reponse": "Usually within 48 hours." } ] }
Sending « elements » replaces the whole list; without « elements », only the options change.