diff --git a/content/applications/websites/website.rst b/content/applications/websites/website.rst index eb7ae24a5..69134c692 100644 --- a/content/applications/websites/website.rst +++ b/content/applications/websites/website.rst @@ -23,6 +23,7 @@ convert visitors into leads or revenues. .. toctree:: :titlesonly: + website/web_design website/pages website/configuration website/reporting diff --git a/content/applications/websites/website/reporting/analytics.rst b/content/applications/websites/website/reporting/analytics.rst index 3151ce96b..6db5aa9ee 100644 --- a/content/applications/websites/website/reporting/analytics.rst +++ b/content/applications/websites/website/reporting/analytics.rst @@ -127,6 +127,8 @@ To follow your Odoo website's traffic with Google Analytics: .. seealso:: `Google documentation on setting up Analytics for a website `_ +.. _website/analytics/gtm: + Google Tag Manager ================== diff --git a/content/applications/websites/website/web_design.rst b/content/applications/websites/website/web_design.rst new file mode 100644 index 000000000..2006d79bd --- /dev/null +++ b/content/applications/websites/website/web_design.rst @@ -0,0 +1,10 @@ +:nosearch: + +========== +Web design +========== + +.. toctree:: + :titlesonly: + + web_design/themes diff --git a/content/applications/websites/website/web_design/themes.rst b/content/applications/websites/website/web_design/themes.rst new file mode 100644 index 000000000..aaeefcb2d --- /dev/null +++ b/content/applications/websites/website/web_design/themes.rst @@ -0,0 +1,81 @@ +============== +Website themes +============== + +Odoo offers numerous themes to shape your website's style, including its colors, fonts, and layouts. +When setting up your site using the Odoo website configurator, you are prompted to select a theme +that aligns with your desired aesthetic. If you wish to modify the theme options later, navigate to +the website builder by clicking the :guilabel:`Edit` button and access the :guilabel:`Theme` tab. +The following sections are available: + +- :guilabel:`Colors`: The website builder relies on palettes composed of five colors: two + :guilabel:`Main` colors and three :guilabel:`Light & Dark` colors. + + You can also customize the :guilabel:`Color Presets` that have been defined automatically by the + website builder according to the five colors defined above. Click the arrow next to a color preset + to update it. Each color preset contains colors for your building block's :guilabel:`Background`, + :guilabel:`Text`, :guilabel:`Headings`, :guilabel:`Links`, :guilabel:`Primary Buttons`, and + :guilabel:`Secondary Buttons`. + + .. image:: themes/colors.png + :alt: select the colors of your website + :scale: 75% + + **To apply a color preset** to a building block of your site, select it, go to the + :guilabel:`Customize` tab, click the :guilabel:`Background` button, and select the preset. + + .. note:: + Changing a color preset automatically updates the colors of both the default preset and the + building blocks where the preset is used. + +- :guilabel:`Website`: From this section, you can :guilabel:`Switch Theme`, + :doc:`Add a Language <../configuration/translate>`, select the :guilabel:`Page Layout`, and + customize the :guilabel:`Background` by uploading your own image. + +- :guilabel:`Paragraph`: Customize the formatting of your website's paragraph `

` elements. + + .. tip:: + The :guilabel:`Font Family` field contains fonts that are hosted and served by Google servers. + To add another font, click :guilabel:`Add a Google Font`, and, in the popup window, click + :guilabel:`fonts.google.com`. + + .. image:: themes/add-a-font.png + :alt: Select the font you like + :scale: 75% + + Select a font you like, copy the address of the page, paste it in the :guilabel:`Google Font + address` field, then click :guilabel:`Save and Reload`. The new font applies to your entire + website. + +- :guilabel:`Headings`: Customize the formatting of your headings. + +- :guilabel:`Button`: Customize the :guilabel:`Primary Style` and :guilabel:`Secondary Style` + buttons. + + .. image:: themes/buttons.png + :alt: Two types of buttons in Odoo + +- :guilabel:`Link`: To edit the style of the hyperlinks available on your website. + +- :guilabel:`Input Fields`: Customize fields where you can enter data, e.g., a search bar or a form. + +- :guilabel:`Advanced`: You can hide the header bar of your website using the + :guilabel:`Show Header` button, inject :ref:`head and body code `, enter + your :guilabel:`Google Map Custom Key`, change the colors of the :guilabel:`Success`, + :guilabel:`Info`, :guilabel:`Warning`, and :guilabel:`Error` pop up messages by clicking the + related :guilabel:`Status Colors` buttons, and customize the :guilabel:`Grays` elements of your + site. + + .. example:: + - The :guilabel:`Status Color` of the :guilabel:`Success` messages is set to green. + + .. image:: themes/advanced.png + :alt: Status colors success message set to green. + + .. image:: themes/success.png + :alt: Success message is green + + - Customizing the gray elements of your site. + + .. image:: themes/grays.png + :alt: Customize the grays elements of your site diff --git a/content/applications/websites/website/web_design/themes/add-a-font.png b/content/applications/websites/website/web_design/themes/add-a-font.png new file mode 100644 index 000000000..e57d4c9e8 Binary files /dev/null and b/content/applications/websites/website/web_design/themes/add-a-font.png differ diff --git a/content/applications/websites/website/web_design/themes/advanced.png b/content/applications/websites/website/web_design/themes/advanced.png new file mode 100644 index 000000000..b9cacfd89 Binary files /dev/null and b/content/applications/websites/website/web_design/themes/advanced.png differ diff --git a/content/applications/websites/website/web_design/themes/buttons.png b/content/applications/websites/website/web_design/themes/buttons.png new file mode 100644 index 000000000..af0bd9b43 Binary files /dev/null and b/content/applications/websites/website/web_design/themes/buttons.png differ diff --git a/content/applications/websites/website/web_design/themes/colors.png b/content/applications/websites/website/web_design/themes/colors.png new file mode 100644 index 000000000..74d090d0e Binary files /dev/null and b/content/applications/websites/website/web_design/themes/colors.png differ diff --git a/content/applications/websites/website/web_design/themes/grays.png b/content/applications/websites/website/web_design/themes/grays.png new file mode 100644 index 000000000..8b1cd36bf Binary files /dev/null and b/content/applications/websites/website/web_design/themes/grays.png differ diff --git a/content/applications/websites/website/web_design/themes/success.png b/content/applications/websites/website/web_design/themes/success.png new file mode 100644 index 000000000..12660600f Binary files /dev/null and b/content/applications/websites/website/web_design/themes/success.png differ