How to Build and Customize Your Website Using Odoo 18 Design Tool: Complete Tutorial
By Braincuber Team
Published on March 7, 2026
We watched a $3.2M D2C brand pay a web agency $18,000 to build a 7-page website. Then they needed a pricing change. The agency charged $450 for a text edit. Odoo 18 ships with a drag-and-drop website builder that does 87% of what that agency delivered — pages, forms, menus, themes, contact widgets — all without writing a single line of code. This tutorial walks you through building a full website from zero inside Odoo 18.
What You'll Learn:
- How to create a new website using the Odoo 18 Website configurator
- How to add and customize pages using pre-built templates
- How to use Blocks, Customize, and Theme tabs in the visual editor
- How to configure navigation menus, submenus, and Mega Menus
- How to design a contact form with CRM integration
- How to publish your website live
What the Odoo 18 Website Builder Actually Does
Before you touch anything, know what you're working with. The Odoo 18 Website Builder is a full CMS baked into your ERP. Not a plugin. Not an add-on. It ships with the platform and connects directly to your Sales, CRM, eCommerce, and Marketing modules.
Drag-and-Drop Page Builder
No coding required. Drag pre-made blocks onto any page — banners, text sections, image galleries, pricing tables, testimonials. Position them visually.
Multi-Language Support
Switch between languages from the Theme panel. Content adapts per locale, letting you serve audiences in the US, UK, and UAE from one website instance.
Built-in eCommerce
Set up an online store with product displays and payment options directly inside Odoo. No Shopify, no WooCommerce, no third-party plugin headaches.
CRM + Live Chat Integration
Contact forms feed directly into CRM leads. Live chat widget connects to your support team. Form submissions, tracked. No Zapier glue needed.
Step 1: Create a New Website
Open the Website app from your main Odoo 18 dashboard. The configurator walks you through 4 setup stages before dropping you into the visual editor.
Name Your Website and Set the Domain
Enter a name for your website and, optionally, a custom domain. Odoo provides a default subdomain if you skip this.
Define Your Business Type and Goal
Choose whether it's an online store, service platform, or informational site. Then pick your main goal: generating leads, selling products, or promoting your brand.
Pick a Color Palette and Upload Your Logo
Select a color palette that matches your branding. Upload your logo and Odoo auto-generates a theme based on your brand identity. Skip this if you want to configure it later in the Theme tab.
Select Pre-Built Pages and a Visual Theme
Choose pages to auto-add: About Us, Shop, Appointments, Blog, Live Chat. Then pick a homepage layout theme. Click "Build My Website" to enter the visual editor.
Don't Skip the Logo Upload
Upload your logo during setup, not after. Odoo auto-generates the color palette and theme styling from your logo's colors. If you skip this step, you'll spend 20+ minutes manually tweaking colors in the Theme tab to match your brand.
Step 2: Add and Customize Pages
With the website created, start building pages. Click the "New" button at the top-right corner of the website dashboard. A radial menu opens where you can select the type of content to create.
Click Page, and a template library appears with multiple layout styles:
| Template | Best For | Pre-Built Sections |
|---|---|---|
| Basic | Simple informational pages | Text blocks, heading, basic layout |
| About | Company overview, team bios | Hero banner, team grid, timeline |
| Landing Page | Marketing campaigns, lead capture | CTA, form embed, benefits section |
| Gallery | Portfolio, product showcase | Image grid, lightbox, captions |
| Services | Service offerings, solutions | Feature cards, icon grids, columns |
| Pricing Plans | SaaS, subscription models | Pricing tables, comparison grids |
| Custom | Anything else | Blank canvas — you build from scratch |
Pick a template. The page structure appears instantly. Every element is editable — click any text to rewrite it, click images to replace them, drag sections to reorder. No "save and refresh" cycle.
Step 3: Master the Visual Editor's 3 Tabs
Click "Edit" in the upper-right corner. The left sidebar opens with three tabs: Blocks, Customize, and Theme. This is where you spend 90% of your time.
Tab 1: Blocks — Build Your Content
The Blocks tab is your toolbox. Drag pre-made elements onto any page. They're organized into categories:
Structure Blocks
Titles, banners, multi-column layouts, image sections. These define the skeletal layout of your page before you add content.
Dynamic Content Blocks
Product Listings, Blog Snippets, Event Lists, Testimonials. These pull live data from your Odoo modules — eCommerce, Blog, HR. Auto-updated.
Inner Content Components
Buttons, videos, separators, icons, progress bars, tab groups, accordions, image tiles, cards, social media embeds. Nest these inside larger blocks.
Inline Block Editing
Click any placed block to get a mini toolbar. Adjust width, height, alignment. Move blocks up or down. Delete them. Edit text directly in place.
Tab 2: Customize — Global Page Toggles
The Customize tab controls elements that span the entire page. These are on/off switches, not drag-and-drop blocks:
Header ............ Show/Hide the page header
Footer ............ Show/Hide the page footer
Breadcrumb ........ Show/Hide navigation breadcrumbs
Top Menu .......... Show/Hide the top navigation bar
Social Icons ...... Show/Hide social media links
Newsletter ........ Show/Hide subscription box
Cart Icon ......... eCommerce: Show/Hide cart
Wishlist .......... eCommerce: Show/Hide wishlist
Tab 3: Theme — Site-Wide Visual Identity
This is your brand control center. Every setting here applies across all pages automatically. Change it once, it updates everywhere.
| Setting | What You Can Control |
|---|---|
| Theme Colors | Primary, secondary, and accent colors. Match them to your brand palette. |
| Typography | Font family, font size, line height, text alignment — for both body text and headings. |
| Spacing | Margins, paddings, section gaps. Create breathable layouts or compact ones. |
| Buttons & Links | Shape, border radius, hover effects, colors, font styling for all interactive elements. |
| Input Fields | Form input styling — borders, radius, focus states. Used in contact forms and checkout. |
| Status Colors | Info (blue), Warning (orange), Error (red), Success (green) color schemes. |
| Custom Header Code | Inject HTML, CSS, or JavaScript. Use for analytics scripts, custom fonts, or tracking pixels. |
Step 4: Replace the Logo
Enter Edit Mode
Click "Edit" in the top-right corner of any page. Hover over the existing logo area in the header.
Click the Logo and Hit Replace
A small toolbar appears. Click "Replace" to upload a new image from your device, paste a URL, or choose from the existing media library.
Resize and Position
After inserting, adjust the logo's size and alignment to fit properly in the header area. Save your changes.
Step 5: Configure the Navigation Menu
A disorganized menu murders your bounce rate. Visitors can't find what they need, so they leave. Odoo 18's Menu Editor gives you full control over your navigation structure.
Open the Menu Editor
From the top navigation bar, click "Site", then choose "Menu Editor" from the dropdown. The configuration window shows all current navigation items.
Edit, Reorder, or Add Menu Items
Click any item to edit its label, URL, or link to a specific page. Drag and drop to reorder. Click "Add Menu" to create new navigation links with a name and URL.
Create Submenus and Mega Menus
Drag a menu item slightly to the right under a parent item to nest it as a submenu. For complex navigation, Odoo supports Mega Menus with multiple columns of links under a single parent.
Step 6: Design a Contact Form
A website without a contact form is a billboard on a highway with no exit ramp. Nobody can reach you. Odoo 18's form builder drags straight onto any page and connects to your CRM without a single line of integration code.
Drag the Form Block onto Your Page
Enter Edit mode. Find the "Form" block in the Blocks tab (under Inner Content or Dynamic Content). Drag it to your desired page location.
Customize Form Fields
Default fields include Name, Email, Phone, and Message. Click any field to change labels, placeholder text, and required settings. Add or remove fields to match your purpose.
Configure the Submit Action
Click the Submit button to access settings. Choose the action: email the data, create a CRM lead, or save to a specific model. Set a success message (e.g., "Thank you for contacting us"). Style the button's color, size, and alignment.
Set "Create a Lead" as the Default Action
If you're a D2C brand, always set the form action to "Create an Opportunity" instead of just emailing the data. Emails get buried. CRM leads get tracked, assigned, and followed up. We've seen brands lose 23% of inbound inquiries because the contact form just sent an email that sat in a shared inbox for 4 days.
Step 7: Publish Your Website Live
Find the Publish Toggle
Look for the globe or eye indicator in the upper-right corner of the website editor. This shows the site's current visibility status — unpublished (private) or published (public).
Click to Activate
Click the indicator to toggle your website live. Once enabled, your site becomes publicly accessible. Visitors can view it on the web immediately. Toggle it off anytime to take it private again.
Frequently Asked Questions
Do I need coding knowledge to build a website in Odoo 18?
No. The entire website builder is drag-and-drop. You can create pages, add content blocks, configure menus, and publish without writing any code. The Theme tab does offer a custom code injection option for developers who want to add analytics or external scripts.
Can I connect my own domain to the Odoo 18 website?
Yes. During the initial setup or later in Website Settings, you can map a custom domain. You'll need to configure DNS records (CNAME or A record) with your domain registrar pointing to your Odoo instance's IP address.
Is the Odoo 18 website builder mobile-responsive?
Yes. All blocks and templates are built with responsive layouts. The builder automatically adjusts content for smaller screens. You can preview the mobile layout using the responsive toggle in the editor toolbar.
Can I run multiple websites from a single Odoo 18 instance?
Yes. Odoo 18 supports multi-website mode. Each website can have its own domain, theme, pages, and product catalog while sharing the same backend database for CRM, inventory, and accounting.
How do I add a blog or online store to my Odoo 18 website?
Install the Blog or eCommerce module from the Apps menu. Once installed, the "New" button in the website editor will show options to create blog posts or product pages. Dynamic content blocks will automatically pull in your blog and product data.
Need Help Building Your Odoo 18 Website?
Our Odoo Gold Partner team has built 140+ websites on Odoo for D2C brands. We handle the design, CRM integration, eCommerce setup, and SEO configuration. One call. No agency markup.