Building blocks¶

You can design your website by dragging and dropping building blocks, then editing them to fit your content and layout needs.

Add a building block¶

To add a block to a website page, access the page, click Edit, then drag and drop the desired building block into the appropriate location. Two types of building blocks are available: Categories and Inner Content. Inner Content building blocks can only be added into Categories building blocks.

When clicking on a category block, a popup appears, allowing you to select between multiple templates for each category.

Tip

You can also search for a specific block in the Insert a block popup using the search bar.

screenshot: website-building-blocks-insert-a-block

menu: Website ‣ Edit ‣ Blocks
shows: The website editor's block panel open on the left, with the block categories (Structure, Features, Dynamic Content, Inner content) and their previews.
highlight: The block panel (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Once the category block is placed, you can drag and drop Inner content blocks within it. The Inner content blocks allow you to add elements, such as videos, images, social media buttons, etc., into pre-existing category blocks.

Note

Access to certain blocks requires the installation of their respective application or module (e.g., eCommerce for the Products block).

Example

Add all your social media accounts in one place with the inner content Social Media block. Toggle the switch on or off next to the desired platform and copy/paste your account URL.

screenshot: website-building-blocks-social-media-inner-content

menu: Website ‣ Edit ‣ Blocks ‣ Inner content
shows: A Social Media inner-content block placed in a page, showing the social network icons.
highlight: The Social Media block (red frame).
data: Facebook, LinkedIn and YouTube links set on the company.
module: website
notes: English UI, light theme, 1440px width.

Form¶

The Form block is used to collect information from website visitors and create records in your database, if applicable. To add a form to a website page, drag and drop the Contact & Forms category, then select the Form block.

screenshot: website-building-blocks-form-block

menu: Website ‣ Edit ‣ Blocks ‣ Features
shows: A Form block placed in a page, with its default fields (Your Name, Email, Subject, Your Question) and the Send button.
highlight: The Form block (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Action¶

By default, when the form is submitted, an email containing the information entered by the visitor is automatically sent. Depending on the apps installed on your database, additional actions that can automatically create records may become available. To choose a different action, click Edit, click the form, navigate to the Customize tab, and select the desired Action:

Apply for a Job (Recruitment)
Create a Customer (eCommerce)
Create an Opportunity (CRM)
Subscribe to Newsletter (Email Marketing)
Create a Task (Project)

screenshot: website-building-blocks-inner-content-edit-form

menu: Website ‣ Edit ‣ (Form block)
shows: The website editor's right sidebar for a selected Form block, with the Action drop-down menu open on the available actions (Send an Email, Create a Lead, Apply for a Job, Create a Task, …).
highlight: The Action drop-down menu (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

By default, submitting the form redirects visitors to a Thank you page. Use the URL field to send them to a different page. Alternatively, you can choose not to redirect and keep them on the form’s page by selecting Nothing or Show Message in the On Success field.

Fields¶

To add a new field to the form, navigate to the Customize tab and click the + Field button next to the Form or Field section. To modify the new (or any other) field on the form, select the field, then use the options available in the Field section of the Customize tab. For example, you can:

Change the field Type.

Tip
It is also possible to select an Existing Field from the database and use the data it contains. The fields available depend on the selected action. Property fields added to the database can also be used.

screenshot: website-building-blocks-all-types-of-field
menu
Website ‣ Edit ‣ (Form block) ‣ (field)
shows
The field option panel of a form field showing the available field types (Text, Long Text, Number, Email, Telephone, Date, Selection, Checkboxes, Radio buttons, File Upload).
highlight
The field type list (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.
Some fields are visually similar, but the data entered must follow a specific format.
Edit the field’s Label and adapt its Position.
Enable a field Description. Click the default description on the form to modify it.
Add a Placeholder or Default value.
Specify if the field is Required.
Edit the field’s visibility settings.
Add an animation.

Once you have made the desired changes, click Save.

Add an Odoo contact form on a non-Odoo website¶

You can display an Odoo contact form on another website using an iframe. To do so, follow these steps:

Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header design and the footer design. Make sure only the contact form remains on the page.
Generate an embeddable code: Copy the URL of the Odoo form page and paste it into an iframe generator, such as La Digitale.dev or iFrame Generator . Adjust the width and height for proper display.
Add the embedded code to the non-Odoo website: Open the relevant page’s HTML (in the code editor or CMS) and insert the embedded code where the form should be displayed.

Example

Example of an embedded code:

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

Embed code¶

Embedding code allows you to integrate content from third-party services into a page, such as videos from YouTube, maps from Google Maps, social media posts from Instagram, etc.

After adding the block to a page, click the block, then go to the Customize tab and click Edit. Replace the placeholder code with your custom embed code.

screenshot: website-building-blocks-embed-code-pop-up

menu: Website ‣ Edit ‣ Blocks ‣ Inner content ‣ Embed Code
shows: The Embed Code pop-up window with the HTML code field where the external code is pasted.
highlight: The code field (red frame).
data: A short sample iframe snippet.
module: website
notes: English UI, light theme, 1440px width.

Tip

With the Website Code Editor — Insert Media module (website_code_editor_media) installed, a Media button is available in the code editor of the Embed Code block — and in the website’s HTML/CSS/JS resource editor. It opens the usual media dialog and inserts the URL of the selected image or document at the cursor, so that an image from the media library can be referenced in hand-written code without looking up its address.

screenshot: website-building-blocks-code-editor-insert-media

menu: Website ‣ Edit ‣ (Embed Code block) ‣ Edit
shows: The embedded code editor with the Media button above the code area, and the media dialog opened over it.
highlight: The Media button (red frame).
data: One image selected in the media library.
module: website_code_editor_media
notes: English UI, light theme, 1440px width.

Warning

Do not copy/paste code you do not understand, as it could put your data at risk.

Move, switch, or delete a building block¶

Pull the turquoise borders on the block to reduce or increase the space at the top or bottom of it.

Change the block order by clicking (chevron up) or (chevron down) and move the block on the page by clicking (arrows). When you have multiple columns, move a column to the left or right by clicking (chevron left) or (chevron right).

To delete a block, click (trash).

screenshot: website-building-blocks-padding-building-block
menu
Website ‣ Edit ‣ (building block)
shows
A selected building block in the editor with its padding handles visible at the top and bottom.
highlight
The padding handles (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Tip

Quickly change the block category by clicking (exchange).

Edit a building block¶

To edit the content of a building block, click on it and go to the Customize tab. Available customization options vary depending on the type of block selected.

Background¶

To modify the background of a building block, select the block, go to the Customize tab, and click the color dot or another Background option. You can change the color and/or add an image, video, and/or shape. Once you’ve selected a shape, new fields appear to allow you to customize the shape.

Tip

Position an element (image, text, etc.) behind or in front of another one by using the Send to back or Bring to front icons.

screenshot: website-building-blocks-change-block-position
menu
Website ‣ Edit ‣ (building block)
shows
The toolbar of a selected building block with the move up / move down arrows used to change its position on the page.
highlight
The move arrows (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.
To resize a block, click and drag the dots around its edges to adjust it as needed.

screenshot: website-building-blocks-adapt-block-size
menu
Website ‣ Edit ‣ (building block)
shows
A selected building block with its bottom resize handle being dragged to change the block height.
highlight
The resize handle (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Layout: grid and columns¶

For most building blocks, you can choose between two layout styles: grid or columns (cols). To change the default layout style, click the block, go to the Customize tab, and set the Layout field to Grid or Cols.

Grid¶

The Grid layout allows you to reposition and resize elements, such as images or text, by dragging and dropping them. When Grid is selected, additional options are available to Add Elements by clicking Image, Text, or Button.

screenshot: website-building-blocks-grid-layout

menu: Website ‣ Edit ‣ (building block)
shows: A building block switched to the Grid layout in the right sidebar, with an image being dragged onto a grid cell.
highlight: The Grid layout option in the sidebar (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Cols¶

Choosing the Cols layout allows you to determine the number of elements per line within the block. To do so, select the block to modify, click the dropdown next to the Cols field, and adjust the number. You can then modify a specific column’s settings using the options in the Column section of the Customize tab.

Note

By default, on mobile devices, only one element (column) is visible per line to ensure that content remains easily readable and accessible on smaller screens. To adjust the value, click the (mobile icon) at the top of the website editor and adapt the number of columns. Shapes are hidden by default on mobiles.

Duplicate a building block¶

To duplicate a building block, click the (duplicate) icon at the top of the Customize tab. Once duplicated, the new block appears on the page beneath the original one.

Save a custom building block¶

You can save a customized building block to reuse it elsewhere. To do so, select it, navigate to the Customize tab, and click the (floppy disk) icon. Click the Save and reload button in the popup to confirm saving your custom block.

To add a saved building block to the page, navigate to the Blocks tab and drag and drop the Custom block from the Categories section. In the popup that opens, click the desired block in the Custom category.

Tip

In the Insert a block popup, click (edit) to rename the custom block or (delete) 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.
Click (link) at the top of the Customize tab.
To edit the default anchor name, click Edit in the green popup message that opens.
Replace the anchor name and click Save & copy.

Once the anchor is saved, you can link to it from anywhere on your website.