diff --git a/content/developer/tutorials/website/02_build_website.rst b/content/developer/tutorials/website/02_build_website.rst new file mode 100644 index 000000000..41d3022ec --- /dev/null +++ b/content/developer/tutorials/website/02_build_website.rst @@ -0,0 +1,141 @@ +.. _website/build_website: + +============================== +Chapter 2 - Build your website +============================== + +.. _website/build_website/page: + +Create a page +============= + +Now that the theme has been set up, let's move on to creating the content. + +First of all, start by creating your first theme page: the home page. For now, only indicate “Hello” +as content in the page. + +.. tip:: + You will need to deactivate the default homepage. + +.. seealso:: + Documentation on :ref:`` and :ref:``. + +.. spoiler:: Solutions + .. code-block:: python + :caption: ``/website_airproof/__manifest__.py`` + + 'data': [ + # Pages + 'data/pages/home.xml', + ] + + .. code-block:: xml + :caption: ``/website_airproof/data/pages/home.xml`` + + + + + + + + + + Home + + website_airproof.page_home + / + qweb + + + + + One step beyond the horizon | Airproof + +
+

Hello

+
+
+
+
+
+
+ +.. _website/build_website/media: + +Add a media +=========== + +If you want the client to be able to reuse certain pictures that you are going to add on the website +, they must be added to the image library. + +To do the test, declare the drone image to add it in the library. You will find the picture +`here <>`. +Go to the :guilabel:`website builder`, double click on the :guilabel:`logo`, you will see the drone +image in the library. + +.. seealso:: + Documentation on :ref:``. + +.. _website/build_website/building_blocks: + +Add building blocks +=================== + +Now, let's get into the real work. Start adding content to the pages. +In an Odoo website, we create the content of a page using building blocks. These can be compared to +snippets editable by the user using the Website Builder. The standard main container of any snippet +is a section. + +Based on the Airproof design, add the following elements to the homepage : + +- Create a section with the 3 boxes using the :guilabel:`Big boxes` building block. + + - Ensure that it cannot be edited via the website builder + - Put an opacity filter on the background image of the 3 boxes + +- Create another section containing the title and icons. + +You will find medias `here <>`. + +.. tip:: + To determine the code needed to create your building blocks : + + - Create a test page via the website builder. + Drag & drop the building block that interests you and give it the right design. + Use the code generated via :guilabel:`Editor HTML/SCSS`. + - You can also find the original building block code in Odoo : + :file:`odoo/addons/website/views/snippets/**.xml`. + +.. seealso:: + Documentation on :ref:``. + +.. spoiler:: Solutions + Find the solution in our Airproof example on :file:`home.xml`. + +.. _website/build_website/navigation: + +Navigation +========== + +For now, the client is fine with the default header but has requested some navigation adjustments. + +The client has requested the following changes: + +- Remove the link to the homepage and the shop. +- Add a link to the future “About us” page. +- Replace the default blog item with a dropdown to display the different blogs: “Our latest news” + and “Tutorials”. +- Add a mega-menu “Waterproof drones” to display the different products. + +.. tip:: + - Make sure the `Blog app` is installed and create the two different blogs in the backend. + - Create the different products via the backend. + You will find some product pictures `here <>`. + +.. seealso:: + - You can find the original mega-menu templates code in Odoo : + :file:`odoo/addons/website/views/snippets/**.xml` + - Documentation on :ref:``. + +.. spoiler:: Solutions + Find the solution in our Airproof example on :file:`menu.xml`.