Complete Guide to Website Building Blocks

Complete Guide to Website Building Blocks

Building blocks are the foundation of the Odoo Website Builder. These pre-designed, customizable content modules let you construct professional website pages without writing any code. With over 60 different blocks available, you can create virtually any type of web page.

Understanding Block Categories

Building blocks are organized into four main categories, each serving a specific purpose:

Adding Building Blocks to Your Page

1. Enter Edit Mode: Navigate to your page and click the Edit button in the top toolbar
2. Open the Blocks Panel: Click the Blocks tab in the left sidebar to see all available blocks
3. Browse Categories: Scroll through Structure, Features, Dynamic Content, or Inner Content sections
4. Drag and Drop: Click and drag any block onto your page. A blue indicator shows where it will be placed
5. Select Templates: For category blocks, a popup appears letting you choose from multiple pre-designed templates
6. Customize: Click on the block to access customization options in the right panel

Structure Blocks in Detail

Structure blocks form the skeleton of your page. Here are the most commonly used ones:

Banner / Cover Blocks

• Full-screen banners with background images or videos
• Parallax effects that create depth as users scroll
• Gradient overlays for text readability
• Call-to-action buttons prominently displayed

Column Layouts

• 2, 3, 4, or 6 column layouts with flexible widths
• Asymmetric columns (e.g., 1/3 + 2/3 split)
• Responsive behavior - columns stack on mobile
• Gap controls for spacing between columns

Content Sections

• Text blocks with headings and paragraphs
• Image + text combinations
• Quote sections for testimonials
• Accordion sections for FAQs

Dynamic Content Blocks

These powerful blocks connect to your Odoo backend or external services:

Form Block

Create forms that collect visitor information and automatically create records in your database.

• Action options: Send email, Create lead, Create opportunity, Create ticket, Subscribe to newsletter
• Field types: Text, Email, Phone, Dropdown, Checkbox, Date, File upload
• Validation: Required fields, email format validation, custom patterns
• Success actions: Show message, redirect to page, show popup
• Spam protection: Built-in reCAPTCHA integration

Products Block (eCommerce)

Display products from your shop with various layouts:

• Display modes: Newest, Best sellers, Featured, Category-specific
• Layout options: Grid (2-6 columns), Carousel, List view
• Product info: Show/hide prices, ratings, add-to-cart buttons
• Filtering: By category, price range, attributes

Embed Code Block

Integrate third-party content seamlessly:

• Videos: YouTube, Vimeo, Wistia embeds
• Maps: Google Maps, OpenStreetMap
• Social: Instagram posts, Twitter feeds, Facebook widgets
• Other: Calendly, TypeForm, custom iframes

Blog Posts Block

• Display recent blog posts automatically
• Filter by category or tag
• Choose grid or list layout
• Control number of posts shown

Customizing Block Backgrounds

Every block supports extensive background customization:

Layout and Spacing Controls

Grid System

The Website Builder uses a 12-column grid system based on Bootstrap:

• Drag column borders to resize (columns snap to grid)
• Use offset controls to add space before columns
• Set different column widths for desktop, tablet, and mobile

Padding and Margins

• Vertical padding: Use handlers at top/bottom of blocks to adjust
• Padding values: Increment by 8px (0, 8, 16, 24, 32... up to 256px)
• Quick presets: Small, Medium, Large, Extra Large

Managing Building Blocks

Moving Blocks

• Drag blocks using the move handle (appears on hover)
• Blocks can be moved within sections or between sections
• Use keyboard arrows for fine positioning

Duplicating Blocks

• Click the block and select Duplicate from the toolbar
• The copy appears directly below the original
• All content and styling is preserved

Saving Custom Blocks

Create reusable block templates:

1. Customize a block exactly as you want it
2. Click the block to select it
3. Click Save in the block toolbar
4. Name your custom block
5. Find it later in the Custom section of the Blocks panel

Deleting Blocks

• Select the block and press Delete or click the trash icon
• Use Ctrl+Z to undo if needed

Creating Anchor Links

Enable smooth scrolling to specific sections:

1. Select the target block (where you want to scroll to)
2. In the block options, find Anchor
3. Enter a unique anchor name (e.g., "contact-section")
4. Create a link or button with URL #contact-section
5. Clicking the link smoothly scrolls to that section

Best Practices

Keyboard Shortcuts