Odoo 18 introduces a refined and powerful Website Builder that enables anyone to create a website. Even without coding experience, this facility will help you to create a beautiful, fully functional website. Whether you’re starting an online store, a company portfolio, or a landing page, Odoo 18’s drag-and-drop interface, updated snippets, and flexible design tools make the process smooth and efficient.
In this blog, we’ll take you through the functional steps on how to build a complete website using Odoo 18 Website Builder, step by step.
How to Access the Odoo 18 Website App?
- Log in to your Odoo 18 dashboard.
- From the Apps dashboard, click on the “Website” app, as shown in the screenshot below.
If this is your first time using it, Odoo will prompt you to choose a theme or start from a basic layout.
After opening the app, you will be directed to the homepage of the website interface, as depicted in the screenshot below.
How to start creating a new Webpage?
To create a new webpage, click on the “+New” button provided at the top right side of the page. This opens a page with editing options for various content such as Page, Blog Posts, Event, Forum, Job Position, Product, Course, Appointment Form and Livechat Widget, as shown in the screenshot.
Now, we can choose the ‘Page’ option to create a new website. This will open the website page selector window.
How to Choose a Theme for your Website?
Odoo 18 comes with a wide selection of modern and mobile-responsive themes. Here you can choose any template design that matches your style from the available categories, as depicted in the screenshot below.
- Browse through the theme gallery.
- Preview a theme before applying it.
- Click on the theme tile to apply it to your website.
From the available options, I have chosen a ‘Basic’ template. Most of these themes are fully customizable later. Then, a pop-up window will appear where you can provide the ‘Page Title’ for the webpage in the pop-up window that appears, as shown in the screenshot below.
Then, click on the ‘Create’ button to create the website. This will generate a new webpage to the Odoo’s website database. You will be directed to the webpage with editing mode, as depicted in the screenshot below.
How to Add and Customize Website Themes?
Odoo 18 Website Builder utilizes the ‘Blocks’ tools to design and structure web pages quickly by dragging and dropping pre-made content sections like banners, text areas, image galleries, testimonials, and calls-to-action. These blocks can be added to the page by simply dragging them and dropping inside the editing page.
- Click on the “Edit”button provided at the top bar.
- Use the drag-and-drop snippets from the ‘BLOCKS’ section of the editing tools section to build your layout. This Blocks includes the below categories;
- Banners
- Text blocks
- Image galleries
- Call-to-action buttons
- Product showcases
As per your website contents and its milestones, place the website building blocks. Odoo also introduced over 60 redesigned snippets with better control over styles, alignment, and responsive behavior.
How to Add and Manage Website Contents?
Managing a website’s contents includes the customization of the Texts, Language, Font Style, Font size, Color, Page background color etc. Using Odoo’s website builder interface, you can easily manage your website contents
Users can edit blog text on the webpage by clicking the “Edit” button. The “CUSTOMIZE” section allows customization of text style, font size, bold, italics, font size, layout, sidebars, and other options, allowing users to create a visually appealing and engaging blog, as depicted in the screenshot below.
Then, edit all the webpage texts by clicking on it directly with the desired color, font etc.
How to Customize or Manage Images?
Odoo allows you to Replace images with your own uploads or from the Odoo image library. You can easily add or replace website media like images, videos, and illustrations using the “Replace” button in the editing toolbox.
So, you can click on the ‘Replace’ button from the ‘CUSTOMIZE’ section after directly clicking on the image. This will open a media selector window, as shown in the screenshot below.
You can directly upload an image from your device storage or add a URL to add the image directly inside the website. This can be done using the ‘Upload an image’ and ‘Add URL’ buttons.
Also, the images can be added from a platform called “Unsplash”, an interface which provides royalty free images and videos as per the requirements.
- You can also add Videos, Icons and Documents from the media selector window using the above explained method.
- Using the Image Alignment, Quality, Padding, Size, Filter, Visibility, Shadow, Border, Tooltip and other tools provided inside the ‘CUSTOMIZE’ are you can enhance the image or video quality as well as add Animations to the images.
- Using the ‘BLOCKS’ and Customizing tools, you can add webpage Footers Links, Icons and any navigation buttons as per your requirement, as shown in the screenshot below.
After designing your website Texts, Images, Videos, Color and every other design, save the changes using the ‘Save’ button provided at the top of the editing tools area. Now, it’s time to move on to other functionalities.
How to add Extra Pages to your Website?
After editing
After editing the webpage designs, you can easily add new pages by clicking on the “+”( Add Page”) icon located at the top left side of the page. Then, choose the web page type from the available options, as depicted in the screenshot below.
After adding the required pages, customize each page title, contents and themes using the same method that we have discussed in the above session. Then, customize the URL, and SEO metadata.
- Then, add menu items for Home, Shop, Contact, Blog, etc.
- Drag and drop to reorder them. So, your navigation will be automatically updated across all pages.
How to Add E-Commerce Features in the website?
To sell products through your website using Odoo Enterprise, you’ll need to enable certain developer options within your package.
- Install the eCommerce module from the ‘Apps’ menu of your Odoo package.
- Add products with descriptions, images, prices, and variants using the ‘BLOCKS’ categories and other customization tool options that we have discussed earlier, as depicted in the screenshot below.
The product’s images can be customized or uploaded from your device gallery as per the requirements.
- Then, enable payment methods (PayPal, Stripe, etc.) and shipping options.
- Using the website configuration settings options, set the Delivery Methods and Shipping Methods.
- Turn on Product Categories and Filters so that the shop page is easy to navigate.
- Use the Website Builder’s drag-and-drop snippets to personalise the ‘Shop’ Page.
- To make sure everything goes well, test the purchase flow from product selection to checkout.
- To make your products online and available to customers, publish the shop page.
The eCommerce feature requires many functions. Here, you can check one of our detailed blogs about the product pricing feature using the link below.
After customizing the eCommerce features in your website, move on to the next procedure.
How to Optimize your Website for SEO?
SEO is crucial for attracting organic traffic by improving website layout, meta tags, content, and keyword usage. It involves keyword research, content creation, link building, and technical improvements. Odoo uses the Bootstrap CSS framework for responsive design on desktop, tablet, and mobile, and offers strong website management tools for SEO strategies, keyword analysis, and social media integration.
To optimize the SEO strategies for your website, Go to the ‘Site’ Menu from the website module’s menu and choose the ‘Optimize SEO’ option.
From the ‘This Page’ section, you can optimize the page properties including Properties, SEO Optimization, Link Tracker and HTML/CSS Editor features, as illustrated in the screenshot below.
The ‘Optimize SEO’ window helps you to edit the features including the below features;
- Title: Set the page title for search engine listings.
- Description: Add a short summary that appears under the title in search results.
- Keywords: Enter relevant SEO keywords; click Add to include them.
- Keyword Insights: The tool analyzes keyword usage and suggests improvements based on Google searches.
- Social Media Image: Upload an image to display when your page is shared on social platforms.
- Preview Boxes: View how your page title and image will appear in search and social media previews
After editing all the SEO Optimization properties, save the details using the ‘Save’ button, as illustrated in the screenshot below.
You can customize all the other page properties using the ‘This Page’ site settings.
How to Set Up Multi-language & Mobile View in the Website?
To make your website available to a worldwide audience, activate multi-language support in Odoo 18 by going to the Website Module’s ‘Configuration Settings’ window and scrolling to the ‘Languages’ section.
Then, click on the ‘Install languages’ link after choosing the languages you require and other languages, as depicted in the screenshot below.
Then, using the Quick Translation Tool, found under the ‘Edit Translate’ in the website editor, makes it simple to translate the page text. After editing the page contents in the selected language, you can save the translation, as depicted in the screenshot below.
After editing all the website specifics, you can preview your site on mobile and tablet views directly from the editor using the ‘Mobile’ icon provided at the top right side of the page, as shown in the screenshot below.
How to Set a Domain and Publish/Unpublish the Website?
When you are ready to make your website live in Odoo 18, go to the Website ‘Settings’ window and set the ‘Domain’ from the ‘Website Info’ tab. Your site can be made live or hidden as needed by setting up your custom domain there, which you can do by buying one through Odoo or by connecting an existing domain from an outside supplier, as depicted in the screenshot below.
Finally, go back to the webpage and just toggle the “Published/Unpublished” button provided at the upper right corner of the web page. This will enable you to launch or deactivate your website on the internet, allowing Odoo to manage additional hosting, SSL, and performance optimization.
With Odoo 18 Website Builder, you can create a sleek, responsive, and fully integrated website in just a few hours. Its drag-and-drop simplicity, combined with powerful backend features like CRM, eCommerce, and Accounting, makes it a go-to solution for businesses looking to unify their operations and online presence.
