Bloques de creación¶
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.
Añadir un bloque de construcción¶
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.
Truco
Use the search bar in the Insert a block pop-up window to quickly find a specific block.
Truco
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.
Nota
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.
Incrustar código¶
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.
Advertencia
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.
Truco
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
Para cambiar el tamaño de un bloque, haz clic y arrastra los puntos alrededor de sus bordes para ajustarlo según sea necesario.
Editar un bloque de construcción¶
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.
Ver también
Fondo¶
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.
Truco
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.
Cuadrícula¶
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.
Nota
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%.
Guardar un bloque de construcción personalizado¶
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.
Truco
In the Insert a block pop-up window, click (edit) to rename the custom block or (remove) to delete it.
Crear un enlace de ancla¶
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:
Haz clic en Editar y selecciona el bloque al que deseas vincular.
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.
Una vez que se guarda el ancla, puedes vincular a ella desde cualquier lugar de tu sitio web.