Building blocks¶
Design website pages by dragging and dropping building blocks, then arrange and edit them to fit your content and layout needs. It is also possible to create custom building blocks or anchor links.
Building blocks can be added and customized using the website editor. To open it, go to the relevant page and click Edit in the upper-right corner.
Add a building block¶
To add a building block to a website page, access the page, then drag and drop the desired building block from the Blocks tab to the appropriate location.
Two types of building blocks are available:
Categorical building blocks provide templates for different content categories.
Inner Content building blocks allow for adding elements, such as videos, images, buttons, and more, to pre-existing categorical blocks as well as headers and footers.
When adding a categorical block, a pop-up window appears, allowing you to choose from multiple templates for different categories. Once the block is placed, drag and drop Inner Content blocks into it.
Tip
Use the search bar in the Insert a block pop-up window to quickly find a specific block.
Tip
Building blocks can also be added to the login page. To access it, navigate to the website’s
homepage, add /web/login to the URL, and press Enter.
Note
Some building blocks require their corresponding application or module to be installed (e.g., the Appointments app for the Appointments block).
Example
Use the Social Media Inner Content building block to display links to your social media accounts. Toggle the desired platforms on or off, then enter the corresponding account URLs.
Embed code¶
Embedding code allows you to integrate content from third-party services, such as YouTube videos, Google Maps, and Instagram posts.
After dragging and dropping the Embed Code block from the Inner Content section onto a page, click the block, then go to the Style tab. Scroll down to the Embed Code section, and, next to Code, click Edit. Replace the placeholder code with the custom embed code.
Warning
Only use embed code from sources you trust. Copying and pasting code you do not understand could put your data at risk.
Move, duplicate, or delete a building block¶
To adjust the position and size of a building block, use the following options:
Drag the turquoise borders on the block to increase or decrease the space at the top or bottom.
Click the (Move up) or (Move down) icons to change the block’s order.
Click the (Drag and move) icon to move the block on the page.
When a block contains multiple columns, move a column to the left or right by clicking (Move left) or (Move right).
Click (Duplicate) to create a copy of the block. The duplicate is added below the original.
Click (Remove) to delete the block.
Tip
Alternatively, click the block, go to the Style tab, and click the (Duplicate this block) or (Remove this block) icon at the top of the tab.
Example
To resize a block, click and drag the dots around its edges to adjust it as needed.
Edit a building block¶
To customize a building block, click it and go to the Style tab. Available customization options vary depending on the type of block selected. Most blocks provide options to customize the background, layout, and content dimensions.
See also
Background¶
To customize the background of a building block, click the color dot or another Background option. Depending on the selected option, you can change the background color and/or add an image, video, and/or shape. After selecting an option, additional options are available to customize it.
Tip
In the Grid layout, use the Send to back or Bring to front icons to position elements, such as images and text, behind or in front of other elements.
Layout¶
Most building blocks support two layout styles: grid and column. To change the default layout, click the block, go to the Style tab, and set the Layout field to Grid or Column.
Grid¶
The Grid layout allows you to reposition and resize elements by dragging and dropping them. Once this layout type is selected, additional options are available to Add Elements by clicking Image, Text, or Button. Adjust their position and size using the Spacing (Y, X) options.
Column¶
The Column layout allows you to specify the number of elements per line in the block. To do so, select the block to modify, click the dropdown next to the Column field, and adjust the number. You can then modify a specific column’s settings using the options in the Column section of the Style tab.
Note
By default, on mobile devices, only one element (column) is visible per line to ensure that content remains easy to read and accessible on smaller screens. To adjust this value, click the (Mobile Preview) at the top of the website editor and adapt the number of columns. Shapes are hidden by default on mobile devices.
Content dimensions¶
To adjust the content dimensions of a building block:
Use the Content Width options to make the content fill the entire width of the page or add spacing around it.
Set the Auto Height to 50% or 100%.
Save a custom building block¶
Save a customized building block to reuse on other pages. To do so, select it, navigate to the Style tab, and click the (Save this block to use it elsewhere) icon. Click the Save button in the pop-up window to confirm.
To add a saved building block to the page, navigate to the Blocks tab and drag and drop the Custom categorical block. In the pop-up window that opens, click the desired block in the Custom category.
Tip
In the Insert a block pop-up window, click (edit) to rename the custom block or (remove) to delete it.
Create an anchor link¶
Anchor links are hyperlinks that direct users to a specific section of a page. To create an anchor link for a block, follow these steps:
Click Edit and select the block you want to link to.
At the top of the Style tab, click (Create and copy a link targeting this block or edit it).
To edit the default anchor name, click Edit in the green pop-up message that opens in the upper-right corner.
Replace the anchor name and click Save & Copy.
Once the anchor is saved, you can link to it from anywhere on your website.