[ADD] Tutorial - website : page 2 - Build your website

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:`<default pages>` and :ref:`<theme pages>`.
+
+.. 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``
+
+      <?xml version="1.0" encoding="utf-8"?>
+      <odoo noupdate="1">
+         <!-- Deactivate default homepage -->
+         <record id="website.homepage" model="ir.ui.view">
+            <field name="active" eval="False"/>
+         </record>
+         <!-- Home -->
+         <record id="page_home" model="website.page">
+            <field name="name">Home</field>
+            <field name="is_published" eval="True"/>
+            <field name="key">website_airproof.page_home</field>
+            <field name="url">/</field>
+            <field name="type">qweb</field>
+            <field name="arch" type="xml">
+               <t t-name="website_airproof.page_home">
+                  <t t-call="website.layout">
+                     <!-- Title -->
+                     <t t-set="additional_title">One step beyond the horizon | Airproof</t>
+                     <!-- Content -->
+                     <div id="wrap" class="oe_structure">
+                        <p>Hello</p>
+                     </div>
+                  </t>
+               </t>
+            </field>
+         </record>
+      </odoo>
+
+.. _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:`<images>`.
+
+.. _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:`<building blocks layout>`.
+
+.. 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:`<navigation>`.
+
+.. spoiler:: Solutions
+   Find the solution in our Airproof example on :file:`menu.xml`.