Elements link

Elements help structure and present content effectively. They range from
text-based components like
titles <website/elements/titles>,
lists <website/elements/lists> and
text highlights <website/elements/text_highlights> to interactive ones such as
buttons <website/elements/buttons> and
links <website/elements/links>. Visual
elements like images <website/elements/images>, icons <website/elements/icons>, videos <website/elements/videos>, and
animations <website/elements/animations>
can also be added to improve content presentation and organization.

To add or modify a website element:

1. Navigate to the relevant website page and click on
   Edit.
2. Click the section on the page where you want to add or modify an
   element.
3. Make the necessary changes.
4. Click on Save.

:::: note
::: title
Note
:::

The default styles for headings, buttons, links, and paragraph text, for
example, are defined in the Theme tab <themes> of the website editor.
::::

Titles {#website/elements/titles} link

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.

:::: tip
::: title
Tip
:::

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 {#website/elements/buttons} link

Buttons are interactive elements that allow to link to another page or
to a page anchor. To insert a button:

1. Type [/button].
2. Enter the button’s label in the Link Label field.
3. Add the URL or Email. Type
   [/] to search for a page and [#] to link to
   an anchor.
4. Set the Style,
   Size, and
   Layout to define the button’s
   appearance.
5. If needed, toggle the switch to open the linked page or anchor in a
   new tab.
6. Click Apply to save changes.

:::: tip
::: title
Tip
:::

To modify an existing button, click the button and edit the options in
the Inline text section of the
website editor.
::::

Images {#website/elements/images} link

To insert an image:

1. Type [/image].
2. Search the Unsplash database </applications/general/integrations/unsplash> or click Upload an image to choose a file from your local images.
3. Click Add.
4. 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](https://help.siteimprove.com/support/solutions/articles/80000448480-where-are-alt-tags- used-and-why-are-they-important)
     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.

Videos {#website/elements/videos} link

To add a video, type [/video], insert the URL, and turn on
the desired options:

• 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.
• Hide player controls
• Hide fullscreen button

Icons {#website/elements/icons} link

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 <website/elements/animations>,
Shape, etc.

Links {#website/elements/links} link

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 <website/building_blocks/anchor>.

:::: tip
::: title
Tip
:::

By default, the Style field is set
to Link. Select a different style
to transform the link into a
button <website/elements/buttons>.
::::

Lists {#website/elements/lists} link

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.

Text highlights {#website/elements/text_highlights} link

Highlights can be added to titles and text using in the
Inline Text section of the website
editor. To add a highlight:

1. Select the text or title you want to highlight.
2. In the website editor, click on Highlight.
3. Select the highlight style.
4. Modify its Color.
5. Choose its Thickness.

Animations {#website/elements/animations} link

Animations are used to add movement to
building blocks <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:

1. Click on the element.
2. In the website editor, go to the relevant section for the element
   (e.g., Button,
   Column,
   Inline Text, etc.).
3. In the Animation field, select
   the desired animation type.
4. Customize the animation settings as needed. Available options vary
   based on the selected animation type.

Animations on scroll link

For animations on scroll, it is possible to:

• Choose In to add the animation
  when the element enters the screen and Out{.interpreted-text
  role=“guilabel”} to add it when it leaves the screen.
• Select an Effect.
• Choose the Direction 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.

Animations on appearance link

For animations on appearance, it is possible to:

• Choose among different effects.
• Choose the Direction of the
  effect.
• Pick a Trigger option to define
  when the animation occurs: either the
  First Time only or
  Every Time.
• 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{.interpreted-text
  role=“guilabel”} field.
• Choose a Duration for the
  animation.

Animations on hover (for images only) link

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

::: seealso
Odoo HTML editor </applications/essentials/html_editor>
:::