A website frequently serves as the initial impression customers have of your company. Thanks to the Odoo 18 Website Builder, you don’t need to be a developer or designer to create a stunning and functional website. Everything from page creation to styling, dynamic content insertion to contact forms can be done directly through its powerful drag-and-drop interface. This blog will guide you through building a website from scratch in Odoo 18, utilizing its modern design tools. You will be prepared to design, organize, and oversee an interactive website that meets your company's requirements in the end.
Odoo 18 Website Builder Overview
* A powerful and user-friendly platform for handling all website-related tasks.
* Empowers users to create and customize websites with zero coding knowledge.
* Offers multi-language support to adapt content for different regional audiences.
* Sets up an online store with changeable product displays and built-in payment options.
* Seamlessly connects with the CRM module to track and manage customer interactions.
* It comes with tools for better connection, like live chat, form builders, and contact widgets.
* Optimized for mobile responsiveness with adjustable layouts for smaller screens.
* Gives you full power over the structure of your site and lets you make blogs, static pages, and dynamic pages.
* Plays a central role in managing digital presence and boosting online engagement.
Creating a New Website
In Odoo 18, the first thing you need to do to start making your website is to use the Website module to make a new site. From your main Odoo 18 screen, go to the Website app to start.
There will be a prompt to enter a name for your website and, if needed, a unique domain.
After you set this, Odoo 18 walks you through a quick and easy configurator that allows you to customize your website from the beginning. First, you'll define the nature of your business, whether it's an online store, service platform, or informational site, along with your main business goal, such as generating leads, selling goods, or promoting your brand.
Next, you can select a color palette that matches your branding or upload your logo to auto-generate a theme based on your brand identity.
After that, you’re given the option to pre-select commonly used pages and features like "About Us", "Shop", "Appointments", "Blog", or "Live Chat" to be added to your site layout. You can customize or expand it later.
Finally, you can choose a visual theme from the available layout options, each offering a different homepage, structure, image placement, and typography.
After making all the necessary choices, click "Build My Website" to be led straight to the visual editor, where complete customization starts.
Customize Your Website in Odoo 18
After your initial website setup is complete, the next step is to start adding pages and useful content to build your site’s structure. Odoo 18 makes this incredibly simple with its visual builder tools.
To get started, click on the “New” button located at the top-right corner of your website dashboard.
This opens a radial menu where you can select the type of content you want to create.
Once you click on Page, a template library appears. Here you can choose from multiple layout styles like Basic, About, landing Pages, Gallery, Services, Pricing Plans, team, and Custom.
Each of these options provides a predefined structure that you can further personalize, helping you build pages faster without needing to start from scratch.
Editing Pages with Blocks and Inner Elements
After adding the page or blog of your choice, click the "Edit" button in the upper-right corner of the screen to launch Odoo's robust drag-and-drop website builder. Complete visual customization takes place here.
Blocks, Customize, and Theme are the three tabs that show up on the left sidebar when you select the Edit button in the upper-right corner of the page. Each of these gives you a different level of control over your website’s structure and appearance.
The first tab, Blocks, is where most of the content building takes place. A wide variety of pre-made elements are available here, which you can drag straight onto your website. These are divided into multiple categories such as Structure, Content, Features, and more. These block types are what let you build everything from titles and banners to multi-column layouts and image sections. You simply drag what you need and drop it into place on your page.
The dynamic Content group is one of the powerful parts of this section. This includes blocks like Product Listings, columns, Content, Image, People, Text, Contact & Forms, Social Blog Snippets, Event Lists, and Testimonials, which automatically pull in data from other modules like eCommerce, Blog, or Events.
These dynamic blocks keep your site updated in real-time based on the latest data you enter in other parts of Odoo 18. Additionally, you may use the search box to look for blocks that meet your needs.
Alongside this, there’s also an Inner Content section, which is meant for embedding smaller, reusable components inside larger structures. Examples include text, button, video, separator, icons, progress indicators, tab groups, collapsible accordions, image tiles, cards, social media, etc. These pieces enhance the user interface by improving clarity and interaction.
After dragging a block from the left sidebar into your webpage, Odoo 18 lets you precisely control and modify it directly within the page. When you click on any block, a mini toolbar appears around it, allowing you to make specific changes such as adjusting the width, resizing the height, aligning it, moving it up or down, or deleting the block entirely. This inline editing experience makes it easy to maintain layout balance and eliminate unwanted elements with a single click. You can also click into the text area to modify the content directly or replace images, buttons, and other widgets inside the block.
Once your blocks are placed and customized individually, the Customize tab on the left sidebar offers a set of global toggles that control key elements across the entire page. You can enable or disable the header and footer, choose to show or hide the breadcrumb navigation, top menu bar, social media icons, or even newsletter subscription boxes. For eCommerce-based websites, options such as cart icon, wish list, or customer login elements can also be activated or hidden here. With the help of these toggles, you can create clean layouts with a great deal of flexibility without having to remove each block by block. The true benefit is that consistency is ensured because these modifications take effect on all pages where those elements are enabled.
You can choose and control the overall visual identity of your website using the third tab, Theme. Everything related to the visual appearance and user interface styling is controlled from here, ensuring that your website maintains a consistent and professional look across all pages. You may quickly switch the language of your website from this panel, which will allow you to customise the user experience for audiences who speak different languages. You also have full control over the theme colors, allowing you to match your site’s palette with your brand identity. Typography settings are fully customizable; you can adjust the font family, font size, line height, and even text alignment for both body text and headings. In addition, you can tweak spacing elements like margins, paddings, and section gaps to create more breathable layouts.
Additionally, the Theme tab offers particular design choices for individual components like input fields, buttons, and links (used in forms). You can customize their shape, border radius, hover effects, colors, and font styling, ensuring that even the smallest interface components feel cohesive. For those looking for advanced customization, there's an option to inject custom header code (HTML/CSS/JavaScript), which gives developers flexibility to add analytics, custom scripts, or external assets. Additionally, there are panels for configuring status colour schemes, such as info, warning, problem, and success colours. Even the default gray scale palette used throughout the UI (like backgrounds or borders) can be modified to match a lighter or darker aesthetic based on your branding preference.
All adjustments made in the Theme tab are applied site-wide, meaning any page you create will automatically inherit these design rules, saving time and keeping your design consistent without manually repeating styling on each page.
To update your website’s logo in Odoo 18, simply hover over the existing logo area on your site while in edit mode. Once you click on the logo, a small toolbar appears, allowing you to replace the image.
Click the “Replace” button, and you’ll be prompted to either upload a new image from your device, add a URL, or choose one from your existing media library.
To make sure the logo fits properly in the header, you can also change its size and placement right after it is inserted. This makes adding your own branding to your website quick and simple, even if you don't have access to the backend settings.
Configuring the Website Menu
To organize and manage your website’s navigation structure in Odoo 18, you can use the built-in Menu Editor, which allows you to control the way your pages are accessed by visitors. From the website’s top navigation bar, click on “Site”, then choose “Menu Editor” from the dropdown.
All of the current navigation items are listed in the menu configuration window that is opened by doing this. You can click on any menu item to edit its label, URL, or link it to a specific page. To rearrange items, simply drag and drop them into your preferred order. All of the current navigation items are listed in the menu configuration window that is opened by doing this.
This will automatically set it as a child menu under the parent menu. You can also click “Add Menu” to create a new navigation link or dropdown from scratch by giving the name of the menu and the corresponding URL. If you're working with complex navigation, Odoo also supports Mega Menus, which allow multiple columns of links to be displayed under a single menu.
When the submenu is correctly arranged, viewers will be able to see it on your live site under the parent menu when they hover over it, adding another menu to the page.
Using just a few clicks, you can enhance user navigation and accessibility by taking complete control of your website's structure using this editor.
Designing a Contact Form
To create a contact form in Odoo 18, enter edit mode by clicking the “Edit” button at the top right of your website. Find the "Form" block from the Blocks tab on the left sidebar. It is typically located in the Inner Content or Dynamic Content area. Drag it onto your page to the desired location.
The form will appear with default fields like Name, Email, Phone, and Message, but each field can be directly clicked and edited. You can change the labels, placeholder text, required field settings, and even add or remove form fields to match your purpose.
After adding a new field, you can also customize the field according to your preferences.
To access the form's settings options after your layout is complete, click the Submit button. You can configure the Submit Button action in this panel, like emailing the data, generating a lead in the CRM, or saving the response to a particular model. You can also define the success message shown to users after submission, like “Thank you for contacting us.” Styling options allow you to adjust the button color, text, size, and alignment to ensure it matches your site’s theme. This powerful yet easy-to-use form builder helps you collect visitor information, support requests, or sales inquiries, all from directly within your website.
Publishing Your Website Live
Odoo 18 makes publication easy after your website design is finished and prepared for public release. A globe or eye indicator that indicates the site's visibility status can be found in the upper-right corner of the website editor. Simply click this symbol to activate your website and bring it to life.
When enabled, your site becomes publicly accessible, and visitors can view it on the web.
The fundamental steps for creating a website using the Odoo platform have been outlined above. Once the site is built, additional features and settings can be configured to match the specific requirements of the website.
Odoo 18’s Website module transforms the way businesses create and manage their online presence by offering an easy-to-use, yet powerful website builder. It allows users to design visually appealing, mobile-friendly, and fully customizable websites without the need for coding skills. With the help of ready-made design layouts, an intuitive visual editor, and tight integration with other Odoo applications like CRM, eCommerce, and Marketing, users can deliver a smooth browsing experience.
To read more about How to Design a Website With Odoo 17 Website App, refer to our blog How to Design a Website With Odoo 17 Website App.