--- title: "Blocks" description: "Choose from every page block, Stack item, and inline item offered by the demo, and understand its main settings." requested_language: nl language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/nl/editor-guide/pages/blocks version: unreleased (main) docs_index: https://docs.systhema.app/nl/llms.txt --- > This page isn't translated yet. Showing English. Choose a block for the piece of content you want to add. The main page editor offers larger blocks. Inside another block, the picker offers only the blocks that fit there. A Stack has its own item picker. ## Add a block 1. Click a blank paragraph in the main **Content** editor. 2. Open the blocks menu at the left of the toolbar. Choose the block you need. 3. Fill in its required fields, marked with an asterisk. Expand the block if its fields are collapsed. 4. Choose **Save Draft**, then check **Live Preview** before publishing. ![The page editor block menu with choices including Feature, Image, Quote, Form and Posts](./images/block-picker.light.webp) Blocks appear in the order you add them. Their header helps you expand or collapse them. The optional block name helps your team identify a block; it is separate from a visible heading in the content. Use a block's remove control only after checking that you have selected the right block. **Advanced settings** opens a separate drawer where a block offers further layout or appearance choices. Start with the defaults. The settings available can change when you select media or place a block inside another block. The following catalog covers the demo's page blocks, Stack items, and inline items. Your agency can make a different set available on your site. ## Section A full-width band of content, such as an introduction or a contact area. ![Section in the editor with its main content and settings controls](./images/block-section.light.webp) | Field | What it does | Tip | | ---------------------- | --------------------------------------------------- | ------------------------------------------------------------------------ | | **Color** | Chooses Default or Dark for this section. | Keep text and imagery readable together. | | **Background Variant** | Chooses Main or Alternative for the background. | Use a different background to separate neighboring sections when needed. | | **Padding** | Sets the space around the section content. | Start with Default. | | **Content** | Holds text and the blocks allowed inside a section. | Use headings and paragraphs to give the section a clear structure. | ## Feature Text beside an image, video, YouTube video, or map. Use it to explain a service or tell a story with supporting media. ![Feature in the editor with its main content and settings controls](./images/block-feature.light.webp) | Field | What it does | Tip | | ------------------------------------ | ---------------------------------------------------- | --------------------------------------------------- | | **Color** and **Background Variant** | Choose the colors for the whole feature. | Preview the whole band. | | **Media Float** | Chooses which side the media occupies. | Check the order on mobile too. | | **Media Type** | Chooses Image, Video, YouTube video, or Google Maps. | Complete the media field that appears. | | **Select image** | Chooses an image when Image is selected. | Use a library image with suitable alternative text. | | **Content** | Holds the text and available nested blocks. | Keep the copy relevant to the media. | | **Aspect Ratio** | Sets the media shape once media is selected. | Check that a crop does not hide the subject. | ## Columns A row of related content, such as services, benefits, or cards. Each item is one column. ![Columns in the editor with its main content and settings controls](./images/block-columns.light.webp) | Field | What it does | Tip | | -------------------------------- | ------------------------------------------------------- | ---------------------------------------------------------- | | **Number of columns in one row** | Sets how many columns appear together. | Use fewer columns for longer text. | | **Items** | Holds the column entries. Use Add Item for another one. | Review the order at smaller widths. | | **Layout** | Sets an item to Column, Card, or Row. | Choose the layout before adding detailed content. | | **Content** | Holds the content of one item. | Keep neighboring items similar in length where practical. | | **Advanced settings** | Opens further layout choices. | Start with the defaults and use preview to check a change. | | Columns layout field | What it does | Tip | | --------------------------------------------------- | --------------------------------------------------------- | -------------------------------------------------- | | **Padding** | Sets space around the group. | Start with Default. | | **Horizontal Gap** and **Vertical Gap** | Set space between items. | Leave enough room for each item to read clearly. | | **Horizontal Alignment** and **Vertical Alignment** | Position items across and down the group. | Review neighboring items together. | | **Horizontal Divider** and **Vertical Divider** | Add dividing lines between items. | Use when a line helps separate the content. | | **Disable Wrapper Animations** | Animates only the content instead of each whole item. | Check the effect in preview. | | **Disable Stagger Animation** | Animates all items together without a delay between them. | Follow the animation style elsewhere on your site. | ## Stack A group of small items, such as buttons, badges, icons, or text. Use it when the items should be arranged together. ![Stack in the editor with its main content and settings controls](./images/block-stack.light.webp) | Field | What it does | Tip | | --------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------- | | **Items** | Holds the items in their display order. | Use Add Item and choose the item type. | | **Add Item** | Opens the item picker. It offers Rich Text, Button, Chip, Icon, Avatar, Image, and Stack. | A Stack item lets you group items inside this Stack. | | **Advanced settings** | Opens the Stack layout controls. | Check the arrangement on a small screen. | ![The Stack item picker offering Rich Text, Button, Chip, Icon, Avatar, Image, and Stack](./images/stack-picker.light.webp) ![Stack layout controls for gaps, direction, alignment, mobile settings, and size](./images/stack-layout.light.webp) | Stack layout field | What it does | Tip | | --------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------- | | **Horizontal Gap** and **Vertical Gap** | Set the space between items. | Start with the defaults and check mobile. | | **Direction** | Chooses how the items run across or down the group. | Check that the reading order still makes sense. | | **Jusitfy Content** | Positions or distributes the items along that direction. | Preview the spacing between items. | | **Align Items** | Aligns the items across the other direction. | Review text and images together. | | **Different settings for mobile** | Offers a separate arrangement for smaller screens. | Use when a desktop row needs to become a simpler mobile group. | | **Define Width** and **Define Height** | Give the group an explicit size. | Keep the defaults unless you have checked the result at several widths. | ## Rich Text inside a Stack A text item inside a Stack. It gives a group of buttons or icons a short piece of supporting text. ![Rich Text inside a Stack in the editor with its main content and settings controls](./images/block-rich-text.light.webp) | Field | What it does | Tip | | ----------- | --------------------------------------------------- | ---------------------------------------------------- | | **Content** | Holds the item's text and the available formatting. | Use a short phrase or paragraph that fits the group. | ## Nested Stack A Stack item inside another Stack. The picker calls this item Stack. Use it to group some items separately within a larger group. ![Nested Stack in the editor with its main content and settings controls](./images/block-nested-stack.light.webp) | Field | What it does | Tip | | --------------------- | -------------------------------------- | ---------------------------------------------- | | **Items** | Holds the items in this smaller group. | Keep the nesting easy for your team to follow. | | **Add Item** | Adds an item to the nested group. | Choose the type that fits the content. | | **Advanced settings** | Controls the nested group's layout. | Preview the outer and inner groups together. | ## Image A still image in your content. The same library image can be used in several places. ![Image in the editor with its main content and settings controls](./images/block-image.light.webp) | Field | What it does | Tip | | --------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------ | | **Select image** | Chooses a file from Uploads or starts a new upload. | Check the thumbnail and filename. | | **Advanced settings** | Opens width, shape, movement, and link choices. | Preview the crop before publishing. | | **Width alignment** | Uses the default width or expands the image to the content area or screen where offered. | A direct image in a card may instead offer Card width. | | **Aspect Ratio** | Sets the displayed image shape. | Keep the subject visible. | | **Link Type** | Makes the image unlinked, a custom link, or an internal link. | Test linked images before publishing. | See [Media](https://docs.systhema.app/nl/editor-guide/media.md) for uploads and alternative text. ## Video An uploaded video in the page body. Choose this for a video file in your library, rather than a YouTube address. ![Video in the editor with its main content and settings controls](./images/block-video.light.webp) | Field | What it does | Tip | | --------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------- | | **Select video** | Chooses the uploaded video. | Use a file prepared for the website. | | **Advanced settings** | Opens the available size and playback settings after media is selected. | Review autoplay, controls, and loading choices with your agency if needed. | ## YouTube video A YouTube video shown in the page, without uploading the video file to your library. ![YouTube video in the editor with its main content and settings controls](./images/block-youtube.light.webp) | Field | What it does | Tip | | --------------------- | ---------------------------------------------------------------- | -------------------------------------- | | **Paste Youtube URL** | Holds the YouTube video address. | Use the address of the intended video. | | **Advanced settings** | Offers presentation settings after the video address is entered. | Check the shape and width in preview. | ## Carousel A sequence of media items that visitors can move through. Use it when the items belong together. ![Carousel in the editor with its main content and settings controls](./images/block-carousel.light.webp) | Field | What it does | Tip | | ------------------------------------------- | --------------------------------------------------- | -------------------------------------------------- | | **Carousel Items** | Holds the selected library files. | Put them in the intended order. | | **Create New** and **Choose from existing** | Upload a file or choose one already in the library. | Check the selected thumbnails. | | **Advanced settings** | Opens the carousel presentation settings. | Make sure visitors can reach every item on mobile. | | Carousel layout field | What it does | Tip | | --------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------- | | **Width alignment** and **Aspect Ratio** | Set the carousel width and image shape. | Check the image crops. | | **Object Fit** | Chooses **Cover** or **Fit** for the media. | Cover fills the space; Fit keeps the whole image visible. | | **Horizontal Alignment** and **Vertical Alignment** | Position the media in its space. | Keep the subject visible. | | **Pagination** | Offers **None**, **Bullets**, or **Numbers**. | Give visitors a way to understand the sequence. | | **Navigation** | Places navigation **On the images** or **After the images**, or uses **None**. | Check that visitors can move through the items. | | **Enable thumbnails** | Adds small previews of the items. | Useful when visitors need to choose an image directly. | | **Loop the carousel** | Continues from the last item to the first. | Check that the sequence still makes sense. | > [!NOTE] > The carousel settings drawer notes that some changes may not update Live Preview immediately. Save a draft and reload the editor if the preview does not reflect your settings. ## Gallery A gallery section with media and optional text before and after it. Use it for a portfolio or a collection of images. ![Gallery in the editor with its main content and settings controls](./images/block-gallery.light.webp) | Field | What it does | Tip | | ------------------------------------ | ------------------------------------------- | --------------------------------------------- | | **Color** and **Background Variant** | Set the gallery section's colors. | Check them against the neighboring content. | | **Content Before** | Holds text above the gallery. | Add a heading to explain the images. | | **Gallery Items** | Holds the selected library files. | Choose related images and review their order. | | **Content After** | Holds text below the gallery. | Use for a short explanation or action. | | **Advanced settings** | Opens further gallery presentation choices. | Check the whole gallery in preview. | | Gallery layout field | What it does | Tip | | -------------------------- | -------------------------------------- | ---------------------------------------------- | | **Content Before Padding** | Sets space around the introduction. | Review the gap between the heading and images. | | **Gallery Padding** | Sets space around the gallery itself. | Check the neighboring sections. | | **Content After Padding** | Sets space around the closing content. | Give a closing action enough room. | ## Card A contained piece of content, such as a short service description, offer, or call to action. ![Card in the editor with its main content and settings controls](./images/block-card.light.webp) | Field | What it does | Tip | | --------------------- | ------------------------------------------- | ---------------------------------------------------- | | **Color** | Uses Auto, Default, or Dark. | Auto follows the surrounding content. | | **Variant** | Chooses Default or Highlighted. | Reserve Highlighted for an item that needs emphasis. | | **Content** | Holds the text and allowed nested blocks. | Keep a card focused on one subject. | | **Advanced settings** | Opens additional card presentation choices. | Review any change alongside neighboring cards. | | Card layout field | What it does | Tip | | ------------------- | ------------------------------------------------------------------ | --------------------------------------- | | **Width alignment** | Uses the default width or expands to the surrounding content area. | Check the surrounding layout. | | **Link Type** | Makes the card unlinked, a custom link, or an internal link. | Test the destination before publishing. | If you link the whole card, keep links and buttons out of its content. Leave **Link Type** at **None** when the card contains its own links or buttons. ## Accordion A heading visitors can open to read more. Use several Accordion blocks for questions and answers or compact supporting details. ![Accordion in the editor with its main content and settings controls](./images/block-accordion.light.webp) | Field | What it does | Tip | | ----------- | ------------------------------------------------ | --------------------------------------------------------------- | | **Title** | Sets the heading visitors click. | Write a clear question or description. | | **Content** | Holds the text revealed when the item is opened. | Keep important information easy to find outside accordions too. | ## Quote A quotation or testimonial, with an optional credit. ![Quote in the editor with its main content and settings controls](./images/block-quote.light.webp) | Field | What it does | Tip | | --------------------- | ------------------------------------------------ | --------------------------------- | | **Show Quote Symbol** | Shows or hides the decorative quote symbol. | Leave it on if it suits the page. | | **Content** | Holds the quoted words. | Keep the quotation accurate. | | **Add Citation** | Adds fields for crediting the speaker or source. | Credit quotations where needed. | ## Embed Content supplied by another service, such as a booking tool your agency has approved. ![Embed in the editor with its main content and settings controls](./images/block-embed.light.webp) | Field | What it does | Tip | | -------------- | ------------------------------------------------------------- | ------------------------------------------------------------- | | **Embed Code** | Holds the information supplied by the service or your agency. | Ask your agency to check unfamiliar embeds before using them. | ## Form > [!NOTE] > This feature is optional. If you don't see **Forms** in your Admin, your site may not use it or your role may not have access. Ask your agency if you'd like to use it. A form already set up for your site, placed in the page content. ![Form in the editor with its main content and settings controls](./images/block-form.light.webp) | Field | What it does | Tip | | --------------------- | -------------------------------------- | --------------------------------------------------------------- | | **Select a form** | Chooses the form visitors will see. | Check the selected form's name and fields. | | **Advanced settings** | Opens available presentation settings. | A form inside a smaller content area follows that area's width. | See [Forms](https://docs.systhema.app/nl/editor-guide/forms.md) for form content and submissions. ## Posts > [!NOTE] > This feature is optional. If you don't see **Posts** in your Admin, your site may not use it or your role may not have access. Ask your agency if you'd like to use it. A list of articles or news items. It can update automatically as you publish posts, or show a fixed selection. ![Posts in the editor with its main content and settings controls](./images/block-posts.light.webp) | Field | What it does | Tip | | ----------------------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------- | | **Prepend content** | Holds content above the listing. | Use a short heading or introduction. | | **Color** and **Background Variant** | Set the listing section's colors. | Keep it distinct enough to scan. | | **Source** | Chooses Automatic (query) or Fixed (hand-picked). | Automatic keeps a growing listing up to date. | | **Filter by categories** and **Filter by tags** | Narrow the automatic selection. | Use only the filters needed for this listing. | | **Order by** and **Direction** | Choose the ordering and its direction. | Publish date with Descending shows recent posts first. | | **Posts per page** | Sets the number in the main list. | A highlighted first post or lead group can add items to the first page. | | **Layout** | Chooses the main list's presentation. | Check card readability on mobile. | | **Loading strategy** | Chooses how further posts become available. | Check that visitors can reach the full list. | | **Advanced Settings** | Opens additional listing choices. | Review the first page and later pages when changing these. | See [Blog posts](https://docs.systhema.app/nl/editor-guide/posts.md) for writing and publishing individual posts. ## Component A reusable piece of content stored in Components. Use it for content your agency has prepared to appear in several places. ![Component in the editor with its main content and settings controls](./images/block-component.light.webp) | Field | What it does | Tip | | ---------------------- | -------------------------------------- | ----------------------------------------------------------- | | **Select a component** | Chooses the shared content to display. | Changing that component can affect every page that uses it. | ## Inline items The inline menu adds small items within text. Put the cursor where the item should appear, choose the item, complete its drawer, and choose **Save changes**. This updates the page editor. Save or publish the page separately. The same item types can appear inside a Stack. Stack items are arranged as a group rather than inserted into a paragraph. ### Button A linked call to action such as booking a visit or opening another page. ![The Button editor drawer with its main settings](./images/block-button.light.webp) | Field | What it does | Tip | | ---------------------------------------- | ----------------------------------------------- | ----------------------------------------- | | **Button title** | Sets the visible action words. | Use a clear verb such as Book or View. | | **Link Type** | Chooses Custom URL or Internal Link. | Complete the destination that appears. | | **Enter a URL** | Sets the custom destination. | Use the full address for another website. | | **Open in new tab** | Opens the destination separately. | Use only when helpful. | | **Appearance** and **Advanced settings** | Hold the available button presentation choices. | Follow your site's existing button style. | ### Chip A short badge or label, with an optional link. ![The Chip editor drawer with its main settings](./images/block-chip.light.webp) | Field | What it does | Tip | | ---------------------------------------- | --------------------------------------------- | ------------------------------------------- | | **Chip title** | Sets the visible badge words. | Keep them short. | | **Link Type** | Chooses None, Custom URL, or Internal Link. | Use None for a badge that is not clickable. | | **Appearance** and **Advanced settings** | Hold the available chip presentation choices. | Keep similar badges consistent. | ### Icon A small symbol chosen from the site's icon library. ![The Icon editor drawer with its main settings](./images/block-icon.light.webp) | Field | What it does | Tip | | -------------------------- | ----------------------------------------------------- | ------------------------------------------------------ | | **Select Icon** | Opens the searchable icon picker. | Search for the meaning you want, then select a symbol. | | **Background** | Adds a background to the icon. | Check the contrast in preview. | | **Link Settings** | Adds a destination when the icon should be clickable. | Use nearby text to make the destination clear. | | **Stack Related Settings** | Control its presentation in a Stack. | Review the whole group, not only the icon. | ### Avatar A small library image, often used alongside a name or short piece of text. ![The Avatar editor drawer with its main settings](./images/block-avatar.light.webp) | Field | What it does | Tip | | -------------------------- | ------------------------------------ | ------------------------------------------------------- | | **Select image** | Chooses the avatar image. | Use an image that remains recognizable at a small size. | | **Stack Related Settings** | Control its presentation in a Stack. | Check its size beside the other items. | ## Heroes and maps The opening hero has its own fields above the main content editor. Set the opening hero using **Hero Type** on the page. For a map in the body, choose **Feature**, then **Google Maps** under **Media Type**. See [Page templates](https://docs.systhema.app/nl/editor-guide/pages/page-templates.md) for the opening hero choices. ## Check afterwards Preview the complete page at desktop and phone widths. Check the block order, required content, links, image crops, and any interactive controls. Use **Publish changes** when the page is ready. ## Related pages [Adding a page tour](https://docs.systhema.app/nl/editor-guide/onboarding/adding-a-page.md), [Editing content](https://docs.systhema.app/nl/editor-guide/pages/editing-content.md), [Page templates](https://docs.systhema.app/nl/editor-guide/pages/page-templates.md), [Media](https://docs.systhema.app/nl/editor-guide/media.md), [Live preview](https://docs.systhema.app/nl/editor-guide/pages/live-preview.md).