Search Engine Optimization (SEO)

# Search Engine Optimization (SEO)

Search Engine Optimization, often abbreviated as SEO, is a digital marketing strategy to improve a
websiteâs visibility and ranking in search engine results (e.g., in Google). It involves optimizing
various elements on your website, including its content, social sharing, URLs, images, and page
speed.
- Odoo provides several modules to help you build your website content, such as eCommerce , Blog , eLearning , and Forum .
Odoo provides several modules to help you build your website content, such as eCommerce , Blog , eLearning , and Forum .
- All Odoo themes rely on the CSS Framework Bootstrap to render efficiently according to the device: desktop, tablet,
or mobile, which positively impacts ranking in search engines.
All Odoo themes rely on the CSS Framework Bootstrap to render efficiently according to the device: desktop, tablet,
or mobile, which positively impacts ranking in search engines.
Magic Sheet - Optimize your website [PDF]

## Content optimization

To optimize a webpageâs SEO, access the page, then go to Website â£ Site â£
Optimize SEO .
If you change the title of a blog post or the name of a product, the link to the related webpage
is automatically updated. The old link still functions as Odoo creates a 301 redirect , maintaining the SEO.

### Keywords and Meta tags

There are two types of keywords in SEO, which serve different purposes.

#### In-text keywords

In-text keywords appear naturally throughout a pageâs visible content (titles, headings, and body
text) and help search engines determine the topic and relevance of the page. These keywords have a
real impact on ranking. They cannot be edited in the optimize SEO pop-up.
It is strongly recommended to only use one H1 title per page for SEO.

#### Meta tags and meta keywords

Meta tags are HTML elements that provide information about a webpage to search engines and
website visitors. They play a crucial role in SEO by helping search engines understand the content
and context of a webpage and attract visitors with appealing content. They can be edited in the optimize SEO pop-up. There are two types of meta tags in Odoo:
- Title tags specify a webpageâs title and are displayed as a clickable link in search
engine results. They should be concise, descriptive, and relevant to the pageâs content. You can
update the title tag of your webpage or keep it empty to use the default value based on the pageâs
content.
Title tags specify a webpageâs title and are displayed as a clickable link in search
engine results. They should be concise, descriptive, and relevant to the pageâs content. You can
update the title tag of your webpage or keep it empty to use the default value based on the pageâs
content.
- Description tags summarize the webpageâs content, often displayed in search engine
results below the title. They are used to encourage the user to visit the page. You can update
the description tag of your webpage or keep it empty to use the default value based on the pageâs
content.
Description tags summarize the webpageâs content, often displayed in search engine
results below the title. They are used to encourage the user to visit the page. You can update
the description tag of your webpage or keep it empty to use the default value based on the pageâs
content.
The Preview card displays how the title and description tags should appear in search
results. It also includes the URL of your page.
Meta keywords are placed in a hidden HTML tag <meta name="keywords"> . Once used to describe a
pageâs topic, this tag is now ignored by major search engines and has little or no impact on SEO.
To edit Keywords , enter the keywords you consider essential in this field and click Add to see how they are used at different levels in your content (H1, H2, page title,
page description, page content) and the related searches in Google. The tool also suggests relevant
keywords.
`<metaname="keywords">`

### Images

The size of images has a significant impact on page speed, which is an essential criterion for
search engines to optimize SEO ranking.
Compare how your website ranks using Google Page Speed or Pingdom Website Speed Test .
Odoo automatically compresses uploaded images and converts them to Webp . With this file format,
photos are smaller, which increases the page loading speed and, therefore, gives a better ranking in
SEO. All images used in Odoo official themes are also compressed by
default. If you are using a third-party theme, it may provide images that are not compressed
efficiently.
`Webp`
To modify an image from your website, select the image, click Edit , then go to the Customize tab, and adapt the Format in the Image section.
Alt tags are used to provide context to what an image is displaying, informing search engine
crawlers and allowing them to index an image correctly. Adding alt tags keywords in the Description field is essential from an SEO perspective. This description is added to
the HTML code of your image, and it is shown when the image cannot be displayed.

#### Image for social share

When you share your page on social media, your website logo is selected by default, but you can
search the Unsplash image library or upload any
other image by clicking the (upload) button.
You can set a default social share image. Go to Website â£ Configuration â£ Settings in the SEO section and tick the Default Social Share Image checkbox.
- The Social Preview card displays how the pageâs information would appear when
shared.
The Social Preview card displays how the pageâs information would appear when
shared.

## Indexation

Website indexation is the process by which search engines, such as Google, discover, analyze, and
store information about a websiteâs content in their database. Search engine bots, known as crawlers
or spiders, visit web pages and follow links to collect data, including text, images, and other
media. The purpose of indexation is to make a websiteâs content searchable and discoverable to
users. Without being indexed, a website or a specific page on that site will not appear in search
engine results, regardless of how relevant or well-designed it is. Indexation is a fundamental step
in SEO , serving as the foundation for a websiteâs visibility
and organic traffic.
When you first create your website on Odoo, it will not appear directly in search engine
results. Search engines need time to crawl and index it, which can take anywhere from a few
days to several weeks. For Google, you can use the Search Console and request indexing for specific URLs, though this does not guarantee faster results.
If you have an existing website and are migrating, your previous website may still appear instead
of the new one during that timeframe.

### SEO impact when migrating your existing website to Odoo

In most cases, migrating to Odoo will not negatively impact your SEO. While no platform can
guarantee that rankings will remain unchanged, follow these best practices to significantly reduce
the risk.
- Keep your existing content.
Keep your existing content.
- Implement redirects from old URLs to their new counterparts.
Implement redirects from old URLs to their new counterparts.
- Monitor traffic and indexation to make sure that everything is going well, using Google Search Console .
Monitor traffic and indexation to make sure that everything is going well, using Google Search Console .
By doing this, you help search engines reindex your site and maintain your visibility in search
results.
It is normal to experience a traffic decrease in the first days.

### Prevent a page from being indexed

To effectively prevent a page from appearing in search engine results, use one of the following
methods:
- noindex tag: Access the pageâs properties and toggle
the Indexed switch off. Note This option is not yet available for dynamic pages .
noindex tag: Access the pageâs properties and toggle
the Indexed switch off.
This option is not yet available for dynamic pages .
- 404 or 403: Configure the page to return a 404 (Not Found) or 403 (Forbidden) HTTP status
code. These codes signal to search engines that the page does not exist or is inaccessible,
leading to its eventual removal from the index. 404: Configure a 404 redirection. 403: Access the pageâs properties and toggle the Visibility switch off or unpublish the page .
404 or 403: Configure the page to return a 404 (Not Found) or 403 (Forbidden) HTTP status
code. These codes signal to search engines that the page does not exist or is inaccessible,
leading to its eventual removal from the index.
- 404: Configure a 404 redirection.
404: Configure a 404 redirection.
- 403: Access the pageâs properties and toggle the Visibility switch off or unpublish the page .
403: Access the pageâs properties and toggle the Visibility switch off or unpublish the page .
- Google Search Console: Use Google Search Console to request the removal of specific URLs from
Googleâs index.
Google Search Console: Use Google Search Console to request the removal of specific URLs from
Googleâs index.
- Google Search Console
Google Search Console

### Prevent a website from being indexed

To prevent a website from appearing in search engine results, go to Configuration â£ Settings , then in the Website Info section, add a
random value in the Domain field. Doing so automatically inserts the following tag into
the page source:
This tag instructs search engines not to index the site. After applying the change, it may take
several days or weeks for search engines to update their results and remove the website.
This can be used to prevent websites from test databases from appearing in search results.

## Sitemap

The sitemap points out website pages and their relation to each other to search engine crawlers.
Odoo generates a /sitemap.xml file, including all URLs. For performance reasons, this file is
cached and updated every 12 hours.
`/sitemap.xml`
If your website has a lot of pages, Odoo automatically creates a Sitemap Index file, respecting
the sitemaps.org protocol , grouping sitemap URLs in
45000 chunks per file.
Every sitemap entry has three attributes that are computed automatically:
- <loc> : the URL of a page.
<loc> : the URL of a page.
`<loc>`
- <lastmod> : last modification date of the resource, computed automatically based on the related
object. For a page related to a product, this could be the last modification date of the product
or the page.
<lastmod> : last modification date of the resource, computed automatically based on the related
object. For a page related to a product, this could be the last modification date of the product
or the page.
`<lastmod>`
- <priority> : modules may implement their priority algorithm based on their content (for example,
a forum might assign a priority based on the number of votes on a specific post). The priority of
a static page is defined by its priority field, which is normalized (16 is the default).
<priority> : modules may implement their priority algorithm based on their content (for example,
a forum might assign a priority based on the number of votes on a specific post). The priority of
a static page is defined by its priority field, which is normalized (16 is the default).
`<priority>`
To prevent pages from appearing in a sitemap, go to Site â£ Properties , and
toggle off the Indexed feature.

## robots.txt

A robots.txt file instructs search engine crawlers which parts of a website they are permitted to
access. Its primary purpose is to:
`robots.txt`
- Prevent overloading the website: By guiding crawlers away from certain sections, robots.txt
helps manage server load.
Prevent overloading the website: By guiding crawlers away from certain sections, robots.txt
helps manage server load.
- Control access to resources and detailed descriptions: It can prevent crawlers from accessing
media files (images, videos), CSS stylesheets, and JavaScript files, and from reading the content
(text) of specific pages.
Control access to resources and detailed descriptions: It can prevent crawlers from accessing
media files (images, videos), CSS stylesheets, and JavaScript files, and from reading the content
(text) of specific pages.
When indexing your website, search engines first look at the robots.txt file. Odoo automatically
creates one robot.txt file available on mydatabase.odoo.com/robots.txt .
`mydatabase.odoo.com/robots.txt`
Reputable bots adhere to robots.txt; others may require blocking via Cloudflare on your custom domain.

### Edit robots.txt

By editing a robots.txt file, you can control which site pages are accessible to search engine
crawlers. To add custom instructions to the file, go to Website â£ Configuration
â£ Settings , scroll down to the SEO section, and click Edit robots.txt .
If you do not want robots to crawl the /about-us page of your site, you can edit the
robots.txt file to add Disallow: /about-us .
`/about-us`
`Disallow:/about-us`
While robots.txt prevents content from being crawled, it does not guarantee that a page
will not be indexed . A page can still appear in search results if it is linked to from other
crawled pages (indexed by âreferenceâ). Google generally does not recommend using robots.txt to
block webpages that you wish to keep out of search results entirely.
`robots.txt`

## Advanced features

### Structured data markup

Structured data markup is used to generate rich snippets in search engine results. It is a way for
websites to send structured data to search engine crawlers, helping them understand your content and
create well-presented search results.
By default, Google supports many rich snippets for content types, including Reviews, People, Products, Businesses, Events, and Organizations.
Microdata is a set of tags, introduced with HTML5, that help search engines better understand your
content and display it in a relevant way. Odoo implements microdata as defined in the schema.org specification for events, eCommerce products, forum posts, and
contact addresses. This allows your product pages to be displayed in Google using extra information
like the price and rating of a product:

### Hreflang HTML tags

Odoo automatically includes hreflang and x-default tags in the code of your websiteâs
multilingual pages. These HTML attributes are crucial in informing search engines about a specific
pageâs language and geographical targeting.
`hreflang`
`x-default`


Web design

# Web design

Design your website using building blocks , customize
its theme with various options, structure and present content
with elements , and display or hide building blocks using visibility settings .

#### Building blocks

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

#### General theme

Customize your websiteâs theme by adjusting its colors, fonts, and layout.

#### Elements

Structure and present content effectively with elements such as titles, lists, etc.

#### Visibility

Display or hide building blocks based on several criteria.
Odoo Tutorials: Website


Building blocks

# Building blocks

You can design your website by dragging and dropping building blocks , then editing them to fit your
content and layout needs.
Odoo Tutorial: Design your website: text and colors

## 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.
You can also search for a specific block in the Insert a block popup using the
search bar.
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.
Access to certain blocks requires the installation of their respective application or module
(e.g., eCommerce for the Products block).
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.

### 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 .

#### 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 )
Apply for a Job ( Recruitment )
- Create a Customer ( eCommerce )
Create a Customer ( eCommerce )
- Create a Ticket ( Helpdesk )
Create a Ticket ( Helpdesk )
- Create an Opportunity ( CRM )
Create an Opportunity ( CRM )
- Subscribe to Newsletter ( Email Marketing )
Subscribe to Newsletter ( Email Marketing )
- Create a Task ( Project )
Create a Task ( Project )
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. Click here to preview all field types. Some fields are visually similar, but the data entered must follow a specific format.
Change the field Type .
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.
Some fields are visually similar, but the data entered must follow a specific format.
- Edit the fieldâs Label and adapt its Position .
Edit the fieldâs Label and adapt its Position .
- Enable a field Description . Click the default description on the form to modify it.
Enable a field Description . Click the default description on the form to modify it.
- Add a Placeholder or Default value .
Add a Placeholder or Default value .
- Specify if the field is Required .
Specify if the field is Required .
- Edit the fieldâs visibility settings.
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.
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.
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.
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 of an embedded code:

### 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.
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 ).
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.
- Web design elements
- Visibility

### 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.
- Position an element (image, text, etc.) behind or in front of another one by using the Send to back or Bring to front icons.
Position an element (image, text, etc.) behind or in front of another one by using the Send to back or Bring to front icons.
- To resize a block, click and drag the dots around its edges to adjust it as needed.
To resize a block, click and drag the dots around its edges to adjust it as needed.

### 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 .

#### 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.
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.
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 Edit and select the block you want to link to.
- Click ( link ) at the top of the Customize tab.
Click ( link ) at the top of the Customize tab.
- To edit the default anchor name, click Edit in the green popup message that opens.
To edit the default anchor name, click Edit in the green popup message that opens.
- Replace the anchor name and click Save & copy .
Replace the anchor name and click Save & copy .
Once the anchor is saved, you can link to it from anywhere on your
website.


Elements

# Elements

Elements help structure and present content effectively. They range from text-based components like titles , lists and text highlights to interactive ones such as buttons and links . Visual elements
like images , icons , videos , and animations can
also be added to improve content presentation and organization.
To add or modify a website element:
- Navigate to the relevant website page and click on Edit .
Navigate to the relevant website page and click on Edit .
- Click the section on the page where you want to add or modify an element.
Click the section on the page where you want to add or modify an element.
- Make the necessary changes.
Make the necessary changes.
- Click on Save .
The default styles for headings, buttons, links, and paragraph text, for example, are defined in
the Theme tab of the website editor.

## Titles

Titles define headings and organize website content into different levels for clarity and structure.
To insert a title, type /title , choose the heading style ( Heading 1 , Heading 2 , or Heading 3 ), and type the text.
`/title`
Alternatively, type the text, select it, and choose the appropriate style from the Inline Text section in the Customize tab of the website editor. Additional
formatting options, such as fonts and colors, are also available in this section.

## Buttons

Buttons are interactive elements that allow to link to another page or to a page anchor. To insert a
button:
- Type /button .
`/button`
- Enter the buttonâs label in the Link Label field.
Enter the buttonâs label in the Link Label field.
- Add the URL or Email . Type / to search for a page and # to link to an anchor.
Add the URL or Email . Type / to search for a page and # to link to an anchor.
`/`
`#`
- Set the Style , Size , and Layout to
define the buttonâs appearance.
Set the Style , Size , and Layout to
define the buttonâs appearance.
- If needed, toggle the switch to open the linked page or anchor in a new tab.
If needed, toggle the switch to open the linked page or anchor in a new tab.
- Click Apply to save changes.
Click Apply to save changes.
To modify an existing button, click the button and edit the options in the Inline text section of the website editor.

## Images

- Type /image .
`/image`
- Search the Unsplash database or click Upload an image to choose a file from your local images.
Search the Unsplash database or click Upload an image to choose a file from your local images.
- Click Add .
- To customize the image, click on the image and edit the options in the Image section of the website editor. For example: Replace the image. Define an alt tag in the Description field. Enter a title tag in the Tooltip field. This text will appear when visitors hover
their mouse over the image. Add a Shape ; some shapes also allow for color customization. Adjust the imageâs Width , e.g., to improve performance. A smaller size may be
suggested if it is sufficient for display. Resize the image using the Transform tool. Adjust the Padding to add space (in pixels) around the image. Etc.
To customize the image, click on the image and edit the options in the Image section of the website editor. For example:
- Replace the image.
- Define an alt tag in the Description field.
Define an alt tag in the Description field.
- Enter a title tag in the Tooltip field. This text will appear when visitors hover
their mouse over the image.
Enter a title tag in the Tooltip field. This text will appear when visitors hover
their mouse over the image.
- Add a Shape ; some shapes also allow for color customization.
Add a Shape ; some shapes also allow for color customization.
- Adjust the imageâs Width , e.g., to improve performance. A smaller size may be
suggested if it is sufficient for display.
Adjust the imageâs Width , e.g., to improve performance. A smaller size may be
suggested if it is sufficient for display.
- Resize the image using the Transform tool.
Resize the image using the Transform tool.
- Adjust the Padding to add space (in pixels) around the image.
Adjust the Padding to add space (in pixels) around the image.

## Videos

To add a video, type /video , insert the URL, and turn on the desired options:
`/video`
- Autoplay : to automatically play the video when the page is accessed. The video is
automatically muted by default.
Autoplay : to automatically play the video when the page is accessed. The video is
automatically muted by default.
- Loop : to play the video on a loop.
Loop : to play the video on a loop.
- Hide player controls
- Hide fullscreen button
Hide fullscreen button

## Icons

To insert an icon, type /image , go to the Icons tab, select an icon, and click Add . To modify an icon, click on it and use the Icon section of the website
editor to customize options, such as Color , Size , Animations , Shape , etc.
`/image`

## Links

Links are used to connect different pages and resources, guiding visitors and improving navigation.
To add a link, type /link , then, in the pop-up that opens, enter the linkâs Label and
add the URL or Email . Type / to search for a page and # to link to an anchor .
`/link`
`/`
`#`
By default, the Style field is set to Link . Select a different style to
transform the link into a button .

## Lists

Lists help organize content clearly, making information easier to read and improving web pagesâ
structures. Type /list and choose from three different types of lists: Bulleted lists , Numbered lists , or Checklists .
`/list`

## Text highlights

Highlights can be added to titles and text using in the Inline Text section of the
website editor. To add a highlight:
- Select the text or title you want to highlight.
Select the text or title you want to highlight.
- In the website editor, click on Highlight .
In the website editor, click on Highlight .
- Select the highlight style.
Select the highlight style.
- Modify its Color .
- Choose its Thickness .
Choose its Thickness .

## Animations

Animations are used to add movement to building blocks and website
elements such as images and text. Three types of animation are available: On Scroll , On Appearance , and On Hover (for images only).
To add an animation to a website element:
- Click on the element.
Click on the element.
- In the website editor, go to the relevant section for the element (e.g., Button , Column , Inline Text , etc.).
In the website editor, go to the relevant section for the element (e.g., Button , Column , Inline Text , etc.).
- In the Animation field, select the desired animation type.
In the Animation field, select the desired animation type.
- Customize the animation settings as needed. Available options vary based on the selected
animation type.
Customize the animation settings as needed. Available options vary based on the selected
animation type.

### Animations on scroll

For animations on scroll, it is possible to:
- Choose In to add the animation when the element enters the screen and Out to add it when it leaves the screen.
Choose In to add the animation when the element enters the screen and Out to add it when it leaves the screen.
- Select an Effect .
- Choose the Direction of the effect.
Choose the Direction of the effect.
- Adapt the Intensity of the effect.
Adapt the Intensity of the effect.
- Define the Scroll Zone , where the first value represents the percentage of the screen
shown when the effect starts, and the second value represents its percentage at the end.
Define the Scroll Zone , where the first value represents the percentage of the screen
shown when the effect starts, and the second value represents its percentage at the end.

### Animations on appearance

For animations on appearance, it is possible to:
- Choose among different effects.
Choose among different effects.
- Choose the Direction of the effect.
Choose the Direction of the effect.
- Pick a Trigger option to define when the animation occurs: either the First Time only or Every Time .
Pick a Trigger option to define when the animation occurs: either the First Time only or Every Time .
- Adapt the Intensity of the effect.
Adapt the Intensity of the effect.
- If you want the animation to be triggered after a number of seconds, define this number in the Start After field.
If you want the animation to be triggered after a number of seconds, define this number in the Start After field.
- Choose a Duration for the animation.
Choose a Duration for the animation.

### Animations on hover (for images only)

Animations On hover can be added to images . You can
choose the Effect of the animation, as well as the Color and the Stroke Width .

Titles
Buttons
Images
Videos
Icons
Links
Lists
Text highlights
Animations
Animations on scroll
Animations on appearance
Animations on hover (for images only)


General theme

# General theme

Odoo offers various options to shape your websiteâs theme, including its colors , fonts , and layout .
When setting up your website for the first time, you are prompted to select a theme. Hover your
mouse over the themes to see an extended preview of each one. Click on a theme to select it.
- If you leave without selecting a theme, your website is created using the default one.
If you leave without selecting a theme, your website is created using the default one.
- You can switch themes later if needed.
You can switch themes later if needed.
In the website builder, the Theme tab offers various options to customize your websiteâs
general theme. To access it, click Edit and go to the Theme tab.
Once you have made the desired changes, click on Save to confirm and apply them to your
website.

## Theme

In the Website section, click on Switch Theme to open the theme selector.
Hover your mouse over the themes to see an extended preview of each one. Click on a theme to apply
it to your website.

## Colors

Odooâs website editor features two main types of colors: theme colors and status colors .

### Theme colors

Theme colors refer to the set of colors displayed across all pages of your website. These are made
of five colors: three main colors and two light and dark colors.
To edit your websiteâs colors, go to the Colors section in the website editor, then:
- Click on the color dot you want to change, then select a Solid color or click on Custom to pick a specific color tone manually (or add its #HEX or RGBA code).
Click on the color dot you want to change, then select a Solid color or click on Custom to pick a specific color tone manually (or add its #HEX or RGBA code).
- Click on the paint palette icon and choose a color palette. As a result, all color customizations
are reset; click a color dot to change a specific color.
Click on the paint palette icon and choose a color palette. As a result, all color customizations
are reset; click a color dot to change a specific color.
Odoo automatically creates Color Presets for your chosen palette. These are predefined
color combinations applied to different elements of your website to provide a structured and
visually appealing design. When you select a color palette, its presets define how those colors are
distributed across different elements from a building block, such as buttons, backgrounds, and text.
If you want to modify them, click on Color Presets and click on a preset to customize it
further. Each color preset contains colors for your building blockâs background, text, headings,
links, primary buttons, and secondary buttons.
To apply a color preset to a building block on your site, select the building block, go to the Customize tab, click the color dot located next to Background , and choose a Theme .
Changing a color preset automatically updates the colors of both the default preset and the
building blocks where the preset is used.

### Status colors

Status colors are used to indicate the status of certain actions (e.g., Success , Warning , etc.). Theyâre used in pop-up messages that appear to provide feedback to
users and website visitors. To customize your websiteâs Status Colors , scroll down to
the Advanced section and click on the dots to change their color.

## Page layout

The Page layout option in the Website section allows you to change the
overall display and spacing of building blocks and website elements on pages. Click the dropdown
menu and select the desired layout. Under Page Layout , customize your Background by choosing an Image , using a selected image in a Pattern , or leaving it blank.

## Fonts

Odoo allows you to customize the font family and size for specific elements on your website,
including paragraphs, headings, buttons, and input fields.
- Font Family : In the Paragraph , Headings , and Button sections, select a font from the dropdown menu.
Font Family : In the Paragraph , Headings , and Button sections, select a font from the dropdown menu.
- Font Size : In the Paragraph , Headings , Button , and Input Fields sections, use the Font Size field to set a default size.
Click the (arrow) icon to expand the section and define custom sizes
(e.g., based on the heading level, button size, etc.).
Font Size : In the Paragraph , Headings , Button , and Input Fields sections, use the Font Size field to set a default size.
Click the (arrow) icon to expand the section and define custom sizes
(e.g., based on the heading level, button size, etc.).
Additionally, each element-specific section offers extra styling options, such as Line Height and Margins , for further customization.

### Custom fonts

It is possible to use fonts on your website that are not offered by default in Odoo. To add a custom
font, click the dropdown menu related to the Font Family field and select Add
a Custom Font at the bottom of the dropdown menu. In the pop-up window:
- To add a Google font, click on Select a Google Font and click on the desired font
in the list. Toggle off the Serve font from Google servers if your website is operated
from a location where regulations require compliance with laws such as, but not limited to, the
European Unionâs GDPR. This will ensure that the Google Font is stored on your websiteâs server
instead of Googleâs.
To add a Google font, click on Select a Google Font and click on the desired font
in the list. Toggle off the Serve font from Google servers if your website is operated
from a location where regulations require compliance with laws such as, but not limited to, the
European Unionâs GDPR. This will ensure that the Google Font is stored on your websiteâs server
instead of Googleâs.
- To upload a custom font from your computer, click on Choose File .
To upload a custom font from your computer, click on Choose File .
Once done, click on Save and Reload .

## Button styles

To customize the style of your websiteâs primary and secondary buttons, navigate to the Button section in the website editor and edit the relevant options:
- Click the arrow next to the Primary Style or Secondary Style fields and
select one of the available styles for each type of button: Fill , Outline ,
or Flat . When selecting Outline , the Border Width option
appears below, allowing you to adjust the width of the buttonâs outline.
Click the arrow next to the Primary Style or Secondary Style fields and
select one of the available styles for each type of button: Fill , Outline ,
or Flat . When selecting Outline , the Border Width option
appears below, allowing you to adjust the width of the buttonâs outline.
- Modify the fonts .
- Adjust the Padding to change the size of the spacing (in pixels) around the buttonsâ
labels.
Adjust the Padding to change the size of the spacing (in pixels) around the buttonsâ
labels.
- Customize the buttonsâ border radius using the Round Corners option.
Customize the buttonsâ border radius using the Round Corners option.
- Add an animation when a button is clicked in the On Click Effect dropdown menu.
Add an animation when a button is clicked in the On Click Effect dropdown menu.
You can define custom Small and Large sizes for the buttonsâ Padding , Font Size , and Round Corners : Click on the (arrow) icon and use the related fields.

## Link style

In the Link section, click on Link Style to choose the appearance of links
on your website. Select No Underline , Underline On Hover , or Always Underline in the dropdown menu.

Theme
Colors
Theme colors
Status colors
Page layout
Fonts
Custom fonts
Button styles
Link style


Visibility

# Visibility

You can choose to display or hide building blocks based on a visitorâs:
- device type (mobile or computer),
device type (mobile or computer),
- country (IP-based geolocation),
country (IP-based geolocation),
- website language,
- UTM parameters , and
- login state.

## Mobile/computer

To toggle the visibility of a building block based on the visitorâs device type:
- Open the website editor and select a block.
Open the website editor and select a block.
- In the Customize tab, under the blockâs customization options, look for Visibility . Click the ( Show/Hide on Desktop ) button to hide
the block for users visiting your website from a computer. Click the ( Show/Hide on Mobile ) button to hide the block
for users visiting your website from a mobile device.
In the Customize tab, under the blockâs customization options, look for Visibility .
- Click the ( Show/Hide on Desktop ) button to hide
the block for users visiting your website from a computer.
Click the ( Show/Hide on Desktop ) button to hide
the block for users visiting your website from a computer.
- Click the ( Show/Hide on Mobile ) button to hide the block
for users visiting your website from a mobile device.
Click the ( Show/Hide on Mobile ) button to hide the block
for users visiting your website from a mobile device.
- Click Save to apply the changes.
Click Save to apply the changes.
It is also sometimes possible to hide elements within blocks. It is mostly used to hide specific
elements inside blocks that may be too wide to be correctly displayed on mobile devices. To see if
the option is available, select an element within a block and look for the Visibility option under the elementâs customization option.
The selected image is hidden on mobile devices.

## Conditions

To access the country, website language, UTM parameters, and login state conditions:
- Open the website editor and select a building block.
Open the website editor and select a building block.
- In the Customize tab, look for Visibility .
In the Customize tab, look for Visibility .
- Click No condition and select Conditionally instead to display the
different options: Country : the country of the visitorâs IP address. Languages : the website language used by the visitor. Note This option is only available if more than one language is installed . UTM Campaign : the selected campaign. UTM Medium : the selected medium of any campaign. UTM Source : the selected source of any campaign. Users : select whether the visitor should be Logged In or Logged Out to view the block. By default, the option is set to Visible
for Everyone .
Click No condition and select Conditionally instead to display the
different options:
- Country : the country of the visitorâs IP address.
Country : the country of the visitorâs IP address.
- Languages : the website language used by the visitor. Note This option is only available if more than one language is installed .
Languages : the website language used by the visitor.
This option is only available if more than one language is installed .
- UTM Campaign : the selected campaign.
UTM Campaign : the selected campaign.
- UTM Medium : the selected medium of any campaign.
UTM Medium : the selected medium of any campaign.
- UTM Source : the selected source of any campaign.
UTM Source : the selected source of any campaign.
- Users : select whether the visitor should be Logged In or Logged Out to view the block. By default, the option is set to Visible
for Everyone .
Users : select whether the visitor should be Logged In or Logged Out to view the block. By default, the option is set to Visible
for Everyone .
- For one or more of the first five options, choose if the block should be Visible for or Hidden for , then click Choose a recordâ¦ and select it.
For one or more of the first five options, choose if the block should be Visible for or Hidden for , then click Choose a recordâ¦ and select it.
- You can select multiple records for each option by clicking Choose a recordâ¦ again.
You can select multiple records for each option by clicking Choose a recordâ¦ again.
- Click the ( remove ) button to remove an option.
Click the ( remove ) button to remove an option.
Click Save to apply the changes.
A block with the following configuration will only be displayed to visitors with a Belgian IP
address, for which the website is displayed in French, unless they visit the page using the Sales campaign tracked URL.
`Sales`

## Invisible elements

Blocks and elements with custom visibility settings are listed at the bottom of the website editor
sidebar. You can preview how the page would look like by clicking the ( visible ) button to hide a block or element, or the ( hidden ) to show it in the website editor.

Mobile/computer
Conditions
Invisible elements