Build examples, every page #

Make the blocks, lists, galleries, columns and templates of the pages.

1. A hero banner at the top of a page: A large image with a title, a sentence and a button: the Hero block with its six fields, or a template block with the same markup.
2. An about-us section with picture and text: Title, text, image and link side by side: the About block, or the same markup in a template block.
3. A row of three features: Three short selling points: the Features block, or a Three columns container with three Cards, or one template.
4. A wall of partner logos from a folder: The Logos block reads images from a parent node (Parent node ID, Limit, Class filter, Image attribute identifier, Thumbnail size alias); or a fetch in a template.
5. A customer quote: The Quote block with Quote text, Author, Source and Alignment, or the same in a template.
6. A call-to-action button: The Button / Link block (Text, Style, Target, Use link), or a link in a template.
7. A section heading with the right level: The Title block (Title, Heading level 1-6, HTML tag, Use link) for headings between blocks.
8. A paragraph of formatted text: The Rich text block (Content) or the Text block for plain text; in templates, the text of a content field.
9. A block written in Markdown: The Markdown block (Markdown content) for editors who prefer Markdown.
10. An embed code from another service: The HTML snippet block (Raw HTML) for a widget code, and what to watch out for; or the code in a template.
11. One image with a link: The Image block (Image URL, Alt text, Link URL), or an image attribute printed in a template.
12. Space and a line between sections: The Spacer (Height in pixels, default 32) and Divider (Style, Margin) blocks, or vertical whitespace on the blocks themselves.
13. An alert banner: The Alert block (Message, Type, Dismissible) for a short notice, or a template block.
14. Frequently asked questions as an accordion: The Accordion block (Items "Title|Content" per line, Open first item), or the Accordion (List) block over content items.
15. Tabs with short texts: The Tabs block (Tabs "Title|Content" per line, Active tab index).
16. A map on the contact page: The Map block (Map embed URL, Width, Height) on the contact page's layout.
17. An external video: The External video block (Video URL or embed src, Width, Height, Autoplay), or a video content item.
18. A list of the newest articles of a section: A List block with a dynamic collection (parent location, sort by published, limit), or fetch() in a template.
19. Hand-picked teasers: A List block with a manual collection, items picked in the content browser and ordered by dragging.
20. A grid of articles in four columns: The List block in view grid with Number of columns 4 (or the Grid block), item view type Card.
21. Alternating image and text rows: The Zig-Zag (List) block, or the List block in view list_zigzag.
22. A numbered top-five list: The List block in view list_numbered.
23. A grid with one featured item: The List block in view grid_featured: the first item large, the rest in a grid.
24. An image gallery from a folder: The Gallery block (Parent node ID, Limit, Class filter, Image attribute identifier, Thumbnail size alias), or a gallery content item.
25. A slider of images: The Slider block, with the same image source fields as the Gallery.
26. A gallery with thumbnails: The Thumb gallery block: a large image with thumbnails below.
27. A photo grid: The Grid gallery block: all images in a grid.
28. A horizontally scrolling strip of images: The Sushi bar block: a strip that scrolls sideways.
29. A carousel of content items: The Carousel block (Slides per view, Autoplay in ms, Image attribute identifier, plus the list options) with a collection.
30. A two-thirds and one-third split: The Two columns container in view two_columns_66_33 (or 33_66) with blocks in left and right.
31. Four equal columns: The Four columns container (placeholders col_1 to col_4).
32. One content item as a teaser: The Single content block (Node ID, Show name, Show intro).
33. The page's own content inside a layout: The Full view block places the page's full view (the content itself) between other blocks.
34. A custom widget only a developer can build: Anything the block types cannot do (a calculator, a data feed) is a template; the Template block lets editors place it.
35. A block type of your own: When editors need a new kind of block again and again, define it once: definition, handler, template.

Related pages #

• Life-cycle examples
• Two ways to build
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.