Elements

Estimated reading: 2 minutes 66 views

Introduction

Website elements are the building blocks that make your Odoo website engaging and easy to navigate.
They include text, titles, lists, buttons, images, videos, icons, links, and animations.

With Odoo’s website editor, you can add, modify, and customize these elements in just a few clicksno technical skills required. This helps you present your content in a professional, clear, and visually appealing way.

Step-by-Step Instructions

 

1. Adding or Modifying an Element

  1. Go to the page where you want to add or edit an element.
  2. Click Edit.
  3. Select the section where the element should appear.
  4. Make your changes.
  5. Click Save.

 

2. Titles (Headings)

  • Type /title and choose Heading 1, Heading 2, or Heading 3.
  • Type your heading text.
  • Or, type text first → select it → choose a heading style in Inline Text from the Customize

Extra formatting options: change fonts, colors, and alignment.

3. Buttons

  • Type /button.
  • Enter the label (button text).
  • Add a URL or Email.
    • Type / to search for a page.
    • Type # to link to a page anchor.
  • Choose Style, Size, and Layout.
  • Toggle Open in new tab if needed.
  • Click Apply.

4. Images

  • Type /image.
  • Search Unsplash or upload from your device.
  • Click Add.
  • Customize in the Image section:
    • Replace the image.
    • Add alt text for SEO.
    • Add a tooltip for hover text.
    • Apply shapes or colors.
    • Adjust width and padding.
    • Resize with Transform

5. Videos

  • Type /video.
  • Paste the video URL.
  • Optional settings:
    • Autoplay (muted by default)
    • Loop
    • Hide player controls
    • Hide fullscreen button

6. Icons

  • Type /image → switch to Icons
  • Select an icon → click Add.
  • Customize color, size, animations, and shapes.

7. Links

  • Type /link.
  • Enter a label and URL.
  • Style as:
    • Standard link
    • Button (select from Style options)

8. Lists

  • Type /list and choose:
    • Bulleted list
    • Numbered list
    • Checklist

9. Text Highlights

  • Select text → click Highlight.
  • Choose style, color, and thickness.

10. Animations

Types:

  • On Scroll – plays when entering/leaving the screen.
  • On Appearance – plays when element appears.
  • On Hover – for images only.

How to add:

  1. Click the element.
  2. Go to the relevant section in the editor (Button, Column, etc.).
  3. Choose animation type and customize:
    • Effect, direction, intensity.
    • Duration and start delay.
    • Scroll zone or trigger options.

Tips for Better Website Elements

  • Keep headings short and clear.
  • Use buttons for important calls-to-action.
  • Optimize image size for faster loading.
  • Add alt text for SEO and accessibility.
  • Use animations sparingly for a professional look

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how we helped 100 top brands gain success