odoo-forge-bundle 0.1.0

package/payload/skills/odoo18-docs/references/docs/applications/websites/website/web_design/building_blocks/dynamic_content.md

@@ -0,0 +1,103 @@
+---
+title: "Dynamic content"
+source_url: "https://docs.odoo.sbggai.top/applications/websites/website/web_design/building_blocks/dynamic_content.html"
+---
+
+===============
+# Dynamic content
+
+The :guilabel:`Dynamic Content` :doc:`building blocks <../building_blocks>`, such as
+:ref:`Form <website/dynamic_content/form>`, :ref:`Products <website/dynamic_content/products>`,
+:ref:`Embed Code <website/dynamic_content/embed_code>`, or :doc:`Blog Posts <../../../blog>`, help
+you create interactive and visually appealing layouts for your web :doc:`pages <../../pages>`.
+
+> **note**:
+>    To add a building block, click :guilabel:`Edit`, select the desired building block under the
+   :guilabel:`Blocks` tab, and drag and drop it onto the page. To access its settings, click it and
+   go to the :guilabel:`Customize` tab, where the available options depend on the type of block
+   selected.
+
+.. _website/dynamic_content/form:
+
+# Form
+
+The :guilabel:`Form` block is used to collect information from website visitors and create records
+in your database.
+
+.. image:: dynamic_content/form-block.png
+   :alt: Example of a form block
+
+## Action
+
+By default, submitting the form **sends you an email** containing what the visitor entered.
+Depending on the apps installed on your database, new actions that can automatically create records
+become available:
+
+- :guilabel:`Apply for a Job` (Recruitment)
+- :guilabel:`Create a Customer` (eCommerce)
+- :guilabel:`Create a Ticket` (Helpdesk)
+- :guilabel:`Create an Opportunity` (CRM)
+- :guilabel:`Subscribe to Newsletter` (Email Marketing)
+- :guilabel:`Create a Task` (Project)
+
+Select another action with the :guilabel:`Action` field found under the :guilabel:`Customize` tab's
+:guilabel:`Form` section.
+
+.. image:: dynamic_content/form-block-settings.png
+   :alt: Editing a form to change its action
+
+By default, actions redirect visitors to a *thank you* page after submitting the form. Use the
+:guilabel:`URL` field to change where they are redirected. It is also possible to let visitors stay
+on the form's page by selecting :guilabel:`Nothing` or :guilabel:`Show Message` under the
+:guilabel:`On Success` field.
+
+## Fields
+
+To add a new field to the form, click the :guilabel:`+ Field` button found next to the Customize
+tab's :guilabel:`Form` or :guilabel:`Field` section. By default, new fields are *text* fields. To
+change the type, use the :guilabel:`Type` field and select an option under the :guilabel:`Custom
+Field` heading.
+
+.. spoiler:: Click here to preview all field types
+
+   .. image:: dynamic_content/form-field-types.png
+      :alt: All types of form fields
+
+   Some fields are visually similar, but the data entered must follow a specific format.
+
+It is also possible to select an :guilabel:`Existing Field` from a database and use the data it
+contains. The fields available depend on the selected action.
+
+> **tip**:
+>    Property fields added to the database can also be used.
+
+.. _website/dynamic_content/products:
+
+# Products
+
+The :guilabel:`Products` block is available after installing the eCommerce app. It is used to
+display a selection of products sold on your website.
+
+.. image:: dynamic_content/products-block.png
+   :alt: Example of a products block
+
+By default, the block displays the :guilabel:`Newest Products`. To change which products are shown,
+go to the :guilabel:`Customize` tab's :guilabel:`Products` section and select as :guilabel:`Filter`
+the :guilabel:`Recently Sold Products` or :guilabel:`Recently Viewed Products` option.
+
+In addition, it is possible to display products from a single category only by selecting one with
+the :guilabel:`Category` field.
+
+.. _website/dynamic_content/embed_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.
+
+.. image:: dynamic_content/embed-code.png
+   :alt: Add the link to the embedded code you want to point to
+
+After adding the block to a page, click the :guilabel:`Edit` button found under the
+:guilabel:`Customize` tab's :guilabel:`Embed Code` section and enter the code, replacing the code
+used to show the block's instructions.

package/payload/skills/odoo18-docs/references/docs/applications/websites/website/web_design/building_blocks/features.md

@@ -0,0 +1,42 @@
+---
+title: "Features"
+source_url: "https://docs.odoo.sbggai.top/applications/websites/website/web_design/building_blocks/features.html"
+---
+
+========
+# Features
+
+The :guilabel:`Features` :doc:`building blocks <../building_blocks>` allow you to list multiple
+items next to each other.
+
+The :ref:`Table of Content <features/table_of_content>` and the :ref:`Call to Action
+<features/call_to_action>` blocks are presented below.
+
+> **note**:
+>    To add a building block, click :guilabel:`Edit`, select the desired building block under the
+   :guilabel:`Blocks` tab, and drag and drop it onto the page. To access its settings, click it and
+   go to the :guilabel:`Customize` tab, where the available options depend on the type of block
+   selected.
+
+.. _features/table_of_content:
+
+# Table of content
+
+The :guilabel:`Table of Content` block is used to list many different items grouped under several
+headings. A clickable index is available to navigate quickly between the different categories.
+
+.. image:: features/table-of-content.png
+   :alt: The default Table of Content block
+
+.. _features/call_to_action:
+
+# Call to action
+
+The :guilabel:`Call to Action` block is used to prompt visitors to take a specific action, such
+as signing up for a newsletter or contacting you.
+
+.. image:: features/call-to-action.png
+   :alt: The default Call to Action block
+
+To change the button's link, select it, go to the :guilabel:`Customize` tab's :guilabel:`Inline
+Text` section and replace `/contactus` with another URL.

package/payload/skills/odoo18-docs/references/docs/applications/websites/website/web_design/building_blocks/inner_content.md

@@ -0,0 +1,36 @@
+---
+title: "Inner content"
+source_url: "https://docs.odoo.sbggai.top/applications/websites/website/web_design/building_blocks/inner_content.html"
+---
+
+=============
+# Inner content
+
+The :guilabel:`Inner content` :doc:`building blocks <../building_blocks>` allow you to add elements
+such as videos, images, and :ref:`social media buttons <inner_content/social_media>`, into
+pre-existing blocks.
+
+> **note**:
+>    To add a building block, click :guilabel:`Edit`, select the desired building block under the
+   :guilabel:`Blocks` tab, and drag and drop it onto the page. To access its settings, click it and
+   go to the :guilabel:`Customize` tab, where the available options depend on the type of block
+   selected.
+
+.. _inner_content/social_media:
+
+# Social media
+
+The :guilabel:`Social Media` block inserts clickable buttons leading to your social network's URL.
+By default, the buttons display the icons of seven major social networks. You can click
+:guilabel:`Add New Social Network` to create a new button and switch the buttons next to a URL to
+turn them on or off.
+
+.. image:: inner_content/social-media-block.png
+   :alt: The social media building block and its settings
+
+> **Note**:
+>    You cannot edit the default icons but can edit the ones you added by clicking
+   :guilabel:`Add New Social Network`. To do so, select the icon, then click the
+   :guilabel:`Replace` button found under the :guilabel:`Customize` tab's :guilabel:`Icon` section,
+   and either select one of the available icons or click the :guilabel:`Images` tab and upload an
+   image or add its URL.

package/payload/skills/odoo18-docs/references/docs/applications/websites/website/web_design/building_blocks/structure.md

@@ -0,0 +1,61 @@
+---
+title: "Structure"
+source_url: "https://docs.odoo.sbggai.top/applications/websites/website/web_design/building_blocks/structure.html"
+---
+
+=========
+# Structure
+
+The website configurator provides a range of :guilabel:`Structure` :doc:`building blocks
+<../building_blocks>` to design your website's layout, including headings, images, and text.
+
+Below are presented two types of structure blocks: :ref:`Banner <structure/banner>` and
+:ref:`Masonry <structure/masonry>`.
+
+> **note**:
+>    To add a building block, click :guilabel:`Edit`, select the desired building block under the
+   :guilabel:`Blocks` tab, and drag and drop it onto the page. To access its settings, click it and
+   go to the :guilabel:`Customize` tab, where the available options depend on the type of block
+   selected.
+
+.. _structure/banner:
+
+## Banner
+
+The :guilabel:`Banner` block combines a title, text, images, and a call to action button, making it
+suitable for placement at the top of a website.
+
+.. image:: structure/default-image-content.png
+   :alt: The default banner block
+
+### Call to action
+
+The call to action button encourages visitors to take a specific action, for example, consulting
+your shop, downloading a file, or making an appointment.
+
+.. image:: structure/call-to-action.png
+   :alt: Selecting the call to action button
+
+To change the button's link, select it and click the :guilabel:`Edit Link` icon. Additional
+customization options are available in the :guilabel:`Inline Text` section.
+
+.. image:: structure/inline-text.png
+   :alt: Configuring the call to action button
+
+.. _structure/masonry:
+
+## Masonry
+
+The :guilabel:`Masonry` block offers a range of templates that associate image and text bricks. To
+change the default template, go to the :guilabel:`Customize` tab, click :guilabel:`Template` and
+select one.
+
+.. image:: structure/masonry-template.png
+   :alt: Selecting a masonry building block template
+
+> **tip**:
+>    The :guilabel:`Masonry` block allows you to add text on top of images. To do so, go to the
+   :guilabel:`Customize` tab, scroll to :guilabel:`Add Elements`, and click :guilabel:`Text`.
+
+   .. image:: structure/masonry-text-box.png
+      :alt: Adding text on top of an image

package/payload/skills/odoo18-docs/references/docs/applications/websites/website/web_design/building_blocks.md

@@ -0,0 +1,165 @@
+---
+title: ""
+source_url: "https://docs.odoo.sbggai.top/applications/websites/website/web_design/building_blocks.html"
+---
+
+:show-content:
+# 
+# Building blocks
+
+Building blocks let you design your website quickly by dragging and dropping them onto your web
+pages. Four types of building blocks are available depending on their use:
+:doc:`Structure <building_blocks/structure>`, :doc:`Features <building_blocks/features>`,
+:doc:`Dynamic Content <building_blocks/dynamic_content>`, and
+:doc:`Inner Content <building_blocks/inner_content>`.
+
+.. seealso::
+   [Odoo Tutorial: Design your first webpage ](https://www.odoo.com/slides/slide/design-your-website-images-and-motion-6931?fullscreen=1)
+
+.. _websites/website/web_design/building_blocks:
+
+# Adding a building block
+
+To add a building block to your website page, click :guilabel:`Edit`, select the desired building
+block, and drag and drop it to your page. You can add as many blocks as needed.
+
+To edit the content of a building block, click on it and go to the :guilabel:`Customize` tab, where
+available features depend on the block you selected.
+
+# Color preset and background
+
+You can customize and apply color presets to building blocks. To proceed, select a building block,
+go to the :guilabel:`Customize` tab, click the :guilabel:`Background` button, and select a
+:guilabel:`Preset`.
+
+When you modify a color preset, all elements using it are automatically updated to match the new
+configuration.
+
+.. seealso::
+   :doc:`Website themes <themes>`
+
+# Layout: grid and columns
+
+You can choose between two layout styles for most building blocks: :ref:`grid
+<building_blocks/grid>` or :ref:`columns (cols) <building_blocks/cols>`. To change the default
+layout, go to the :guilabel:`Customize` tab. Under the :guilabel:`Banner` section, select
+:guilabel:`Grid` or :guilabel:`Cols` as the :guilabel:`Layout`.
+
+.. _building_blocks/grid:
+
+## Grid
+
+The :guilabel:`Grid` layout allows you to reposition and resize elements, such as images or text, by
+dragging and dropping them.
+
+.. image:: building_blocks/grid-layout.png
+   :alt: When the grid layout is selected, choose an image and drag and drop it where needed.
+
+> **tip**:
+>    Position images behind the text by using the above/below icons.
+
+   .. image:: building_blocks/superimpose-images-to-text.png
+      :alt: Positioning an image behind text
+
+.. _building_blocks/cols:
+
+## Cols
+
+Choosing the :guilabel:`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 :guilabel:`Cols` :guilabel:`Layout`, and
+adjust the number.
+
+By default, **on mobile devices**, one element is visible per line to ensure that content remains
+easily readable and accessible on smaller screens. To adjust the value, click the :icon:`fa-mobile`
+(:guilabel:`mobile icon`) at the top of the website editor and adapt the number of columns.
+
+.. image:: building_blocks/cols.png
+   :alt: Adjust the number of images per line on mobile view.
+
+# Duplicating a building block
+
+You can duplicate a building block by clicking on the duplicate icon. Once duplicated, the new block
+appears on your website beneath the original one.
+
+.. image:: building_blocks/duplicate-container.png
+   :alt: Duplicating a building block
+
+# Reordering a building block
+
+To reorder a building block, select it and click the up arrow to move it before the previous block
+or click the down arrow to move it after.
+
+You can also use the drag-and-drop icon to move a block manually.
+
+.. image:: building_blocks/reordering-blocks.png
+   :alt: Reordering building blocks
+
+# Saving a custom building block
+
+You can save a customized building block and reuse it elsewhere. To do so, select it, navigate to
+the :guilabel:`Customize` tab, and click the :icon:`fa-floppy-o` (:guilabel:`floppy disk`) icon to
+save it.
+
+.. image:: building_blocks/saving-custom-block.png
+   :alt: Saving a building block
+
+Saved building blocks are available in the :guilabel:`Custom` section of the :guilabel:`Blocks` tab.
+Click the :icon:`fa-pencil` (:guilabel:`pen`) icon to edit their name.
+
+.. image:: building_blocks/custom-blocks.png
+   :alt: Custom section with saved building blocks
+
+.. _building_blocks/visibility:
+
+# Visibility
+
+## Visibility on desktop/mobile
+
+You can hide specific elements depending on the visitor's device. To do so, select the element to
+hide, and in the :guilabel:`Customize` tab, scroll down to :guilabel:`Visibility`, and click the
+:guilabel:`Show/Hide on Mobile` or the :guilabel:`Show/Hide on Desktop` icon.
+
+.. image:: building_blocks/show-hide-on-mobile.png
+   :alt: Click the "show/hide on mobile" icons to show or hide some elements on mobile.
+
+> **tip**:
+>    Click the :icon:`fa-mobile` (:guilabel:`mobile`) icon at the top of the configurator to preview
+   how your website would look on a mobile device.
+
+   .. image:: building_blocks/phone-icon.png
+      :alt: Mobile phone preview icon
+
+## Conditional visibility
+
+You can also hide or show building blocks using other conditions. To do so, select an element, go to
+:guilabel:`Visibility`, click :guilabel:`No condition`, and select :guilabel:`Conditionally`
+instead. Then, configure the condition(s) to apply by selecting :guilabel:`Visible for` or
+:guilabel:`Hidden for` and which :guilabel:`Records` will be impacted.
+
+.. seealso::
+   :doc:`Link Tracker <../reporting/link_tracker>`
+
+## Invisible elements
+
+Depending on the visibility settings, some elements can become hidden from your current view. To
+make a building block visible again, go to the :guilabel:`Invisible Elements` section at the bottom
+of the configurator and select a building block.
+
+# Mobile view customization
+
+You can customize building block elements for the mobile view without impacting the desktop view.
+To do so, open the website editor, click the :icon:`fa-mobile` (:guilabel:`mobile`) icon at the top,
+and select the building block element. Then, you can:
+
+- reorder the elements by clicking the :icon:`fa-angle-left` :icon:`fa-angle-right`
+  (:guilabel:`left/right arrow`) icons;
+- edit the :ref:`Cols <building_blocks/cols>` and :ref:`Visibility <building_blocks/visibility>`
+  features in the :guilabel:`Customize` tab of the website editor.
+
+.. toctree::
+   :titlesonly:
+
+   building_blocks/structure
+   building_blocks/features
+   building_blocks/dynamic_content
+   building_blocks/inner_content

package/payload/skills/odoo18-docs/references/docs/applications/websites/website/web_design/elements.md

@@ -0,0 +1,194 @@
+---
+title: "Elements"
+source_url: "https://docs.odoo.sbggai.top/applications/websites/website/web_design/elements.html"
+---
+
+========
+# Elements
+
+Elements help structure and present content effectively. They range from text-based components like
+:ref:`titles <website/elements/titles>`, :ref:`lists <website/elements/lists>` and
+:ref:`text highlights <website/elements/text_highlights>` to interactive ones such as
+:ref:`buttons <website/elements/buttons>` and :ref:`links <website/elements/links>`. Visual elements
+like :ref:`images <website/elements/images>`, :ref:`icons <website/elements/icons>`,
+:ref:`videos <website/elements/videos>`, and :ref:`animations <website/elements/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 :guilabel:`Edit`.
+#. Click the section on the page where you want to add or modify an element.
+#. Make the necessary changes.
+#. Click on :guilabel:`Save`.
+
+> **note**:
+>    The default styles for headings, buttons, links, and paragraph text, for example, are defined in
+   the :doc:`Theme tab <themes>` of the website editor.
+
+.. image:: elements/webdesign-elements.png
+   :alt: Type / to add website elements.
+
+.. _website/elements/titles:
+
+# 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 (:guilabel:`Heading 1`,
+:guilabel:`Heading 2`, or :guilabel:`Heading 3`), and type the text.
+
+> **tip**:
+>   Alternatively, type the text, select it, and choose the appropriate style from the
+  :guilabel:`Inline Text` section in the :guilabel:`Customize` tab of the website editor. Additional
+  formatting options, such as fonts and colors, are also available in this section.
+
+.. _website/elements/buttons:
+
+# Buttons
+
+Buttons are interactive elements that allow to link to another page or to a page anchor. To insert a
+button:
+
+#. Type `/button`.
+#. Enter the button's label in the :guilabel:`Link Label` field.
+#. Add the :guilabel:`URL or Email`. Type `/` to search for a page and `#` to link to an anchor.
+#. Set the :guilabel:`Style`, :guilabel:`Size`, and :guilabel:`Layout` to
+   define the button's appearance.
+#. If needed, toggle the switch to open the linked page or anchor in a new tab.
+#. Click :guilabel:`Apply` to save changes.
+
+> **tip**:
+>    To modify an existing button, click the button and edit the options in the
+   :guilabel:`Inline text` section of the website editor.
+
+.. _website/elements/images:
+
+# Images
+
+To insert an image:
+
+#. Type `/image`.
+#. :doc:`Search the Unsplash database </applications/general/integrations/unsplash>` or click
+   :guilabel:`Upload an image` to choose a file from your local images.
+#. Click :guilabel:`Add`.
+#. To customize the image, click on the image and edit the options in the :guilabel:`Image`
+   section of the website editor. For example:
+
+   -  :guilabel:`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 :guilabel:`Description` field.
+   -  Enter a title tag in the :guilabel:`Tooltip` field. This text will appear when visitors hover
+      their mouse over the image.
+   -  Add a :guilabel:`Shape`; some shapes also allow for color customization.
+   -  Adjust the image's :guilabel:`Width`, e.g., to improve performance. A smaller size may be
+      suggested if it is sufficient for display.
+   -  Resize the image using the :guilabel:`Transform` tool.
+   -  Adjust the :guilabel:`Padding` to add space (in pixels) around the image.
+   -  Etc.
+
+.. _website/elements/videos:
+
+# Videos
+
+To add a video, type `/video`, insert the URL, and turn on the desired options:
+
+- :guilabel:`Autoplay`: to automatically play the video when the page is accessed. The video is
+  automatically muted by default.
+- :guilabel:`Loop`: to play the video on a loop.
+- :guilabel:`Hide player controls`
+- :guilabel:`Hide fullscreen button`
+
+.. _website/elements/icons:
+
+# Icons
+
+To insert an icon, type `/image`, go to the :guilabel:`Icons` tab, select an icon, and click
+:guilabel:`Add`. To modify an icon, click on it and use the :guilabel:`Icon` section of the website
+editor to customize options, such as :guilabel:`Color`, :guilabel:`Size`, :ref:`Animations
+<website/elements/animations>`, :guilabel:`Shape`, etc.
+
+.. _website/elements/links:
+
+# 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 :guilabel:`Label` and
+add the :guilabel:`URL or Email`. Type `/` to search for a page and `#` to link to an anchor.
+
+> **tip**:
+>    By default, the :guilabel:`Style` field is set to :guilabel:`Link`. Select a different style to
+   transform the link into a :ref:`button <website/elements/buttons>`.
+
+.. _website/elements/lists:
+
+# 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: :guilabel:`Bulleted lists`,
+:guilabel:`Numbered lists`, or :guilabel:`Checklists`.
+
+.. _website/elements/text_highlights:
+
+# Text highlights
+
+Highlights can be added to titles and text using in the :guilabel:`Inline Text` section of the
+website editor. To add a highlight:
+
+#. Select the text or title you want to highlight.
+#. In the website editor, click on :guilabel:`Highlight`.
+#. Select the highlight style.
+#. Modify its :guilabel:`Color`.
+#. Choose its :guilabel:`Thickness`.
+
+.. image:: elements/highlights-elements.png
+   :alt: Highlight texts and titles
+
+.. _website/elements/animations:
+
+# Animations
+
+Animations are used to add movement to :doc:`building blocks <building_blocks>` and website
+elements such as images and text. Three types of animation are available: :guilabel:`On Scroll`,
+:guilabel:`On Appearance`, and :guilabel:`On Hover` (for images only).
+
+To add an animation to a website element:
+
+#. Click on the element.
+#. In the website editor, go to the relevant section for the element (e.g., :guilabel:`Button`,
+   :guilabel:`Column`, :guilabel:`Inline Text`, etc.).
+#. In the :guilabel:`Animation` field, select the desired 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 :guilabel:`In` to add the animation when the element enters the screen and :guilabel:`Out`
+   to add it when it leaves the screen.
+ - Select an :guilabel:`Effect`.
+ - Choose the :guilabel:`Direction` of the effect.
+ - Adapt the :guilabel:`Intensity` of the effect.
+ - Define the :guilabel:`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 the :guilabel:`Direction` of the effect.
+ - Pick a :guilabel:`Trigger` option to define when the animation occurs: either the
+   :guilabel:`First Time only` or :guilabel:`Every Time`.
+ - Adapt the :guilabel:`Intensity` of the effect.
+ - If you want the animation to be triggered after a number of seconds, define this number in the
+   :guilabel:`Start After` field.
+ - Choose a :guilabel:`Duration` for the animation.
+
+## Animations on hover (for images only)
+
+Animations :guilabel:`On hover` can be added to :ref:`images <website/elements/images>`. You can
+choose the :guilabel:`Effect` of the animation, as well as the :guilabel:`Color` and the
+:guilabel:`Stroke Width`.
+
+.. seealso::
+   :doc:`Odoo HTML editor </applications/essentials/html_editor>`