From 7e8ba9bc2fe3b917d4e00ccee845e2715572b3da Mon Sep 17 00:00:00 2001
From: Oussama MESSAOUDI <ome@odoo.com>
Date: Mon, 12 Apr 2021 06:37:42 +0000
Subject: [PATCH] [IMP] website, *: review the header templates + add CTA as an
 option

*: portal, website_sale, website_sale_wishlist

Part of https://github.com/odoo/odoo/pull/68149
task-2368576

Part-of: odoo/odoo#68149
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/portal/views/portal_templates.xml      |  11 +-
 addons/website/controllers/main.py            |   8 +-
 addons/website/models/theme_models.py         |   1 -
 addons/website/models/website.py              |  30 +-
 .../static/src/js/editor/snippets.options.js  |   2 +
 addons/website/static/src/scss/website.scss   |  16 +-
 addons/website/views/snippets/snippets.xml    |  11 +-
 addons/website/views/website_templates.xml    | 580 +++++++++---------
 addons/website_sale/views/templates.xml       |  12 +-
 .../views/website_sale_wishlist_template.xml  |  10 -
 10 files changed, 320 insertions(+), 361 deletions(-)

diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index cd810614967..4e710e90b26 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -48,18 +48,17 @@
         <t t-set="active_lang" t-value="list(filter(lambda lg : lg[0] == lang, languages))[0]"/>
         <t t-set="language_selector_visible" t-value="len(languages) &gt; 1"/>
         <div t-attf-class="js_language_selector #{_div_classes}" t-if="language_selector_visible">
-            <button class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <button t-attf-class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle #{_btn_class}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                 <span t-if="not no_text"
                         class="align-middle"
                         t-esc="active_lang[2].split('/').pop()"/>
             </button>
-            <div class="dropdown-menu" role="menu">
+            <div t-attf-class="dropdown-menu #{_dropdown_menu_class}" role="menu">
                 <t t-foreach="languages" t-as="lg">
                     <a t-att-href="url_for(request.httprequest.path + '?' + keep_query(), lang_code=lg[0])"
-                    class="dropdown-item js_change_lang"
-                    t-att-data-url_code="lg[1]">
-                        <span t-if="not no_text"
-                              t-esc="lg[2].split('/').pop()"/>
+                       t-attf-class="dropdown-item js_change_lang #{active_lang == lg and 'active'}"
+                       t-att-data-url_code="lg[1]">
+                        <span t-if="not no_text" t-esc="lg[2].split('/').pop()"/>
                     </a>
                 </t>
             </div>
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 49989bbe903..f8a2da23986 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -705,14 +705,18 @@ class Website(Home):
         return views.filtered('active').mapped('key')
 
     @http.route(['/website/theme_customize'], type='json', auth='user', website=True)
-    def theme_customize(self, enable=None, disable=None):
+    def theme_customize(self, enable=None, disable=None, reset_view_arch=False):
         """
         Enables and/or disables views according to list of keys.
 
         :param enable: list of views' keys to enable
         :param disable: list of views' keys to disable
+        :param reset_view_arch: restore the default template after disabling
         """
-        self._get_customize_views(disable).filtered('active').write({'active': False})
+        disabled_views = self._get_customize_views(disable).filtered('active')
+        if reset_view_arch:
+            disabled_views.reset_arch(mode='hard')
+        disabled_views.write({'active': False})
         self._get_customize_views(enable).filtered(lambda x: not x.active).write({'active': True})
 
     @http.route(['/website/theme_customize_bundle_reload'], type='json', auth='user', website=True)
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 59851bfdd2a..2908b3c737e 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -231,7 +231,6 @@ class Theme(models.AbstractModel):
         self.disable_view('website.template_header_sidebar')
         self.disable_view('website.template_header_slogan')
         self.disable_view('website.template_header_contact')
-        self.disable_view('website.template_header_minimalist')
         self.disable_view('website.template_header_boxed')
         self.disable_view('website.template_header_centered_logo')
         self.disable_view('website.template_header_image')
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 22efc376bad..91dd5fd9834 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -508,25 +508,17 @@ class Website(models.Model):
                     </data>
                 """ % (cta_data['cta_btn_href'], cta_data['cta_btn_text'])
             })
-            header_ids = [
-                'website.template_header_default_oe_structure_header_default_1',
-                'website.template_header_hamburger_oe_structure_header_hamburger_1',
-                'website.template_header_slogan_oe_structure_header_slogan_2',
-                'website.template_header_boxed_oe_structure_header_boxed_2',
-                'website.template_header_image_oe_structure_header_image_2',
-            ]
-            for header_id in header_ids:
-                try:
-                    view_id = self.env['website'].viewref(header_id)
-                    if view_id:
-                        el = etree.fromstring(view_id.arch_db)
-                        btn_cta_el = el.xpath("//a[hasclass('btn_cta')]")
-                        if btn_cta_el:
-                            btn_cta_el[0].attrib['href'] = cta_data['cta_btn_href']
-                            btn_cta_el[0].text = cta_data['cta_btn_text']
-                        view_id.with_context(website_id=website.id).write({'arch_db': etree.tostring(el)})
-                except ValueError as e:
-                    logger.warning(e)
+            try:
+                view_id = self.env['website'].viewref('website.header_call_to_action')
+                if view_id:
+                    el = etree.fromstring(view_id.arch_db)
+                    btn_cta_el = el.xpath("//a[hasclass('btn_cta')]")
+                    if btn_cta_el:
+                        btn_cta_el[0].attrib['href'] = cta_data['cta_btn_href']
+                        btn_cta_el[0].text = cta_data['cta_btn_text']
+                    view_id.with_context(website_id=website.id).write({'arch_db': etree.tostring(el)})
+            except ValueError as e:
+                logger.warning(e)
 
         # modules
         pages_views = set_features(kwargs.get('selected_features'))
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 01a22ed64c3..69c3a0c52ac 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -569,12 +569,14 @@ options.Class.include({
         const allXmlIDs = this._getXMLIDsFromPossibleValues(params.possibleValues);
         const enableXmlIDs = xmlID.split(/\s*,\s*/);
         const disableXmlIDs = allXmlIDs.filter(xmlID => !enableXmlIDs.includes(xmlID));
+        const resetViewArch = !!params.resetViewArch;
 
         return this._rpc({
             route: '/website/theme_customize',
             params: {
                 'enable': enableXmlIDs,
                 'disable': disableXmlIDs,
+                'reset_view_arch': resetViewArch,
             },
         });
     },
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 54a395272b1..8f01b8423b5 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -215,7 +215,7 @@ $-seen-urls: ();
         }
     }
 }
-.navbar-brand, .navbar-text, .navbar .nav-link {
+.navbar-brand, .navbar-text, .navbar .nav-link, .navbar a.js_change_lang span {
     @if $o-theme-navbar-font != $o-theme-font {
         font-family: $o-theme-navbar-font;
     }
@@ -1287,11 +1287,21 @@ header {
     }
 }
 .o_lang_flag {
-    width: 1.5em;
-    height: 1.5em;
+    width: 1em;
+    height: 1em;
     margin-right: 0.2em;
     border-radius: $rounded-pill;
 }
+a.js_change_lang:hover {
+    text-decoration: none;
+
+    span {
+        text-decoration: $link-hover-decoration;
+    }
+}
+span.list-inline-item.o_add_language:last-child {
+    display: none !important; // Hide the separator if it is the last list item
+}
 
 // Footer scrolltop button
 @if o-website-value('footer-scrolltop') {
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index b64e6362fed..e819babd976 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -588,11 +588,6 @@
                        data-customize-website-views="website.template_header_contact"
                        data-customize-website-variable="'Contact'"
                        data-img="/website/static/src/img/snippets_options/header_template_contact.svg"/>
-            <we-button title="Minimalist"
-                       data-name="header_minimalist_opt"
-                       data-customize-website-views="website.template_header_minimalist"
-                       data-customize-website-variable="'minimalist'"
-                       data-img="/website/static/src/img/snippets_options/header_template_minimalist.svg"/>
             <we-button title="Boxed"
                        data-name="header_boxed_opt"
                        data-customize-website-views="website.template_header_boxed"
@@ -757,8 +752,8 @@
                    data-variable="hamburger-position"
                    data-reload="/">
             <we-button data-customize-website-views="" data-customize-website-variable="'left'">Left</we-button>
-            <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center" data-customize-website-variable="'center'">Center</we-button>
-            <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right" data-customize-website-variable="'right'">Right</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center, website.template_header_slogan_align_center" data-customize-website-variable="'center'">Center</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_slogan_align_right" data-customize-website-variable="'right'">Right</we-button>
         </we-select>
 
         <!-- Generic Hamburger Options (mobile or not) -->
@@ -830,6 +825,8 @@
                   data-dependencies="!header_effect_scroll_opt"/>
 
         <we-checkbox string="Show Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
+        <we-checkbox string="Call to Action" data-customize-website-views="website.header_call_to_action"
+                     data-reset-view-arch="true" data-reload="/"/>
         <we-select string="Language Selector" data-reload="/">
             <we-button data-name="header_language_selector_none_opt"
                        data-customize-website-views="">None</we-button>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 31a86fcfe4e..f1b7225011e 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -27,7 +27,7 @@
             <t t-foreach="submenu.child_id" t-as="submenu">
                 <t t-call="website.submenu">
                     <t t-set="item_class" t-value="None"/>
-                    <t t-set="link_class" t-value="'dropdown-item'"/>
+                    <t t-set="link_class" t-valuef="dropdown-item"/>
                 </t>
             </t>
         </ul>
@@ -232,68 +232,56 @@
             <div id="top_menu_container" class="container justify-content-start justify-content-lg-between">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-value="'mr-4'"/>
-                </t>
-                <!-- Navbar Toggler -->
-                <t t-call="website.navbar_toggler">
-                    <t t-set="_toggler_class" t-value="'ml-auto'"/>
+                    <t t-set="_link_class" t-valuef="mr-4"/>
                 </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse order-last order-lg-0">
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <t t-set="_nav_class" t-valuef="flex-grow-1"/>
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_user_name" t-value="true"/>
-                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
+                        </t>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item my-auto ml-lg-2"/>
                         </t>
                     </t>
                 </div>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                <!-- Call To Action -->
+                <t t-call="website.placeholder_header_call_to_action"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-valuef="ml-auto"/>
                 </t>
-                <!-- Button -->
-                <div class="oe_structure oe_structure_solo" id="oe_structure_header_default_1"/>
             </div>
         </nav>
     </xpath>
 </template>
 
-<template id="template_header_default_oe_structure_header_default_1" inherit_id="website.template_header_default" name="Template Header Default (oe_structure_header_default_1)">
-    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_default_1']" position="replace">
-        <div class="oe_structure oe_structure_solo" id="oe_structure_header_default_1">
-            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
-                <div class="container">
-                    <a href="/contactus" class="btn btn-primary ml-4 btn_cta">Contact Us</a>
-                </div>
-            </section>
-        </div>
-    </xpath>
-</template>
-
 <template id="template_header_default_align_center" inherit_id="website.template_header_default" active="False">
     <xpath expr="//t[@t-set='_nav_class']" position="replace">
-        <t t-set="_nav_class" t-value="'mx-auto'"/>
+        <t t-set="_nav_class" t-valuef="mx-auto"/>
     </xpath>
 </template>
 
 <template id="template_header_default_align_right" inherit_id="website.template_header_default" active="False">
     <xpath expr="//t[@t-set='_nav_class']" position="replace">
-        <t t-set="_nav_class" t-value="'ml-auto'"/>
+        <t t-set="_nav_class" t-valuef="ml-auto"/>
     </xpath>
 </template>
 
@@ -304,32 +292,34 @@
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-value="'mr-auto'"/>
+                    <t t-set="_link_class" t-valuef="mr-lg-auto mr-0"/>
                 </t>
-                <ul class="nav navbar-nav navbar-expand">
+                <ul class="nav navbar-nav navbar-expand d-none d-sm-block">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-value="'nav-item'"/>
-                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_item_class" t-valuef="nav-item"/>
+                        <t t-set="_link_class" t-valuef="nav-link"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_icon" t-value="true"/>
-                        <t t-set="_item_class" t-value="'nav-item dropdown'"/>
-                        <t t-set="_link_class" t-value="'nav-link'"/>
-                        <t t-set="_dropdown_menu_class" t-value="'position-absolute dropdown-menu-right'"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown"/>
+                        <t t-set="_link_class" t-valuef="nav-link"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="position-absolute dropdown-menu-right"/>
                     </t>
                 </ul>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler">
-                    <t t-set="_toggler_class" t-value="'order-first mr-auto'"/>
+                    <t t-set="_toggler_class" t-valuef="order-first mr-auto"/>
                 </t>
                 <!-- Language Selector -->
                 <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                    <t t-set="_div_classes" t-valuef="ml-2 d-none d-sm-block"/>
+                </t>
+                <!-- Call To Action -->
+                <t t-call="website.placeholder_header_call_to_action">
+                    <t t-set="_div_classes" t-valuef="ml-auto ml-sm-0"/>
                 </t>
-                <!-- Button -->
-                <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_1"/>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
                     <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_2"/>
@@ -337,10 +327,26 @@
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-valuef="nav-item d-block d-sm-none"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_icon" t-value="true"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown d-block d-sm-none"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-left"/>
+                        </t>
+                    </t>
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector">
+                        <t t-set="_div_classes" t-valuef="d-block d-sm-none"/>
                     </t>
                     <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_3"/>
                 </div>
@@ -349,18 +355,6 @@
     </xpath>
 </template>
 
-<template id="template_header_hamburger_oe_structure_header_hamburger_1" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_1)">
-    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_1']" position="replace">
-        <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_1">
-            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
-                <div class="container">
-                    <a href="/contactus" class="btn btn-primary ml-4 btn_cta">Contact Us</a>
-                </div>
-            </section>
-        </div>
-    </xpath>
-</template>
-
 <template id="template_header_hamburger_oe_structure_header_hamburger_2" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_2)">
     <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_2']" position="replace">
         <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_2">
@@ -421,13 +415,13 @@
 
 <template id="template_header_hamburger_align_center" inherit_id="website.template_header_hamburger" active="False">
     <xpath expr="//t[@t-set='_toggler_class']" position="replace">
-        <t t-set="_toggler_class" t-value="'ml-4 mr-auto'"/>
+        <t t-set="_toggler_class" t-valuef="ml-4 mr-auto"/>
     </xpath>
 </template>
 
 <template id="template_header_hamburger_align_right" inherit_id="website.template_header_hamburger" active="False">
     <xpath expr="//t[@t-set='_toggler_class']" position="replace">
-        <t t-set="_toggler_class" t-value="'ml-4'"/>
+        <t t-set="_toggler_class" t-valuef="ml-4"/>
     </xpath>
 </template>
 
@@ -435,51 +429,69 @@
 <template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
     <xpath expr="//header//nav" position="replace">
         <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light flex-lg-column o_colored_level o_cc shadow-sm py-0">
-            <div id="top_menu_container" class="container align-items-center flex-row flex-wrap">
-                <!-- Left -->
-                <div class="o_header_centered_logo">
-                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_1"/>
+            <div id="top_menu_container" class="container align-items-center flex-lg-column flex-wrap">
+                <div class="d-flex flex-lg-row justify-content-between w-100 align-items-center flex-wrap">
+                    <!-- Left -->
+                    <div class="o_header_centered_logo">
+                        <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_1"/>
+                    </div>
+                    <!-- Brand -->
+                    <t t-call="website.placeholder_header_brand">
+                        <t t-set="_link_class" t-valuef="m-0"/>
+                    </t>
+                    <!-- Right -->
+                    <div class="o_header_centered_logo text-right">
+                        <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2"/>
+                    </div>
+                    <!-- Call To Action -->
+                    <t t-call="website.placeholder_header_call_to_action">
+                        <t t-set="_div_classes" t-valuef="ml-1 d-block d-lg-none ml-auto mr-4"/>
+                    </t>
+                    <!-- Navbar Toggler -->
+                    <t t-call="website.navbar_toggler">
+                        <t t-set="_toggler_class" t-valuef="my-3"/>
+                    </t>
                 </div>
-                <!-- Brand -->
-                <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-value="'m-0'"/>
-                </t>
-                <!-- Right -->
-                <div class="o_header_centered_logo text-right">
-                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2"/>
-                </div>
-                <!-- Navbar Toggler -->
-                <t t-call="website.navbar_toggler">
-                    <t t-set="_toggler_class" t-value="'my-3'"/>
-                </t>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
-                </t>
-                <!-- Navbar Collapse -->
-                <div id="top_menu_collapse" class="collapse navbar-collapse flex-wrap">
-                    <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_vertical_3"/>
-                    <!-- Nav -->
-                    <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'mx-auto'"/>
-                        <!-- Menu -->
-                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
-                            <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                <div class="d-lg-flex flex-lg-row align-items-center w-100">
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector">
+                        <t t-set="_btn_class" t-valuef="px-2"/>
+                        <t t-set="_div_classes" t-valuef="ml-2 d-none d-lg-block"/>
+                    </t>
+                    <!-- Navbar Collapse -->
+                    <div id="top_menu_collapse" class="collapse navbar-collapse flex-wrap">
+                        <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_vertical_3"/>
+                        <!-- Nav -->
+                        <t t-call="website.navbar_nav">
+                            <t t-set="_nav_class" t-valuef="mx-auto"/>
+                            <!-- Menu -->
+                            <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                                <t t-call="website.submenu">
+                                    <t t-set="item_class" t-valuef="nav-item"/>
+                                    <t t-set="link_class" t-valuef="nav-link"/>
+                                </t>
+                            </t>
+                            <!-- Sign In -->
+                            <t t-call="portal.placeholder_user_sign_in">
+                                <t t-set="_item_class" t-valuef="nav-item ml-lg-3"/>
+                                <t t-set="_link_class" t-valuef="nav-link"/>
+                            </t>
+                            <!-- User Dropdown -->
+                            <t t-call="portal.user_dropdown">
+                                <t t-set="_user_name" t-value="True"/>
+                                <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-3"/>
+                                <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                             </t>
                         </t>
-                        <!-- Sign In -->
-                        <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
-                        </t>
-                        <!-- User Dropdown -->
-                        <t t-call="portal.user_dropdown">
-                            <t t-set="_user_name" t-value="True"/>
-                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-3'"/>
-                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="d-block d-lg-none mb-2"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right position-static float-none"/>
                         </t>
+                    </div>
+                    <!-- Call To Action -->
+                    <t t-call="website.placeholder_header_call_to_action">
+                        <t t-set="_div_classes" t-valuef="d-none d-lg-block"/>
                     </t>
                 </div>
             </div>
@@ -550,36 +562,37 @@
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
-                </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse flex-column align-self-stretch align-items-stretch">
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'mb-auto'"/>
+                        <t t-set="_nav_class" t-valuef="mb-auto"/>
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
                     </t>
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector">
+                        <t t-set="_div_classes" t-valuef="ml-1 dropup"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-top position-absolute"/>
+                    </t>
                     <div class="oe_structure oe_structure_solo" id="oe_structure_header_sidebar_1"/>
                     <ul class="nav navbar-nav">
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_item_class" t-valuef="nav-item"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_icon" t-value="true"/>
                             <t t-set="_user_name" t-value="true"/>
-                            <t t-set="_item_class" t-value="'nav-item dropup mr-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
-                            <t t-set="_dropdown_menu_class" t-value="'position-absolute'"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropup mr-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="position-absolute"/>
                         </t>
                     </ul>
                 </div>
@@ -632,7 +645,7 @@
             <div id="top_menu_container" class="container flex-row flex-wrap">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-value="'mr-4'"/>
+                    <t t-set="_link_class" t-valuef="mr-4"/>
                 </t>
                 <!-- Slogan -->
                 <div class="ml-3 mr-auto">
@@ -641,20 +654,20 @@
                 <ul class="nav navbar-nav navbar-expand ml-auto order-last order-lg-0">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-value="'nav-item ml-3'"/>
-                        <t t-set="_link_class" t-value="'btn btn-outline-primary'"/>
+                        <t t-set="_item_class" t-valuef="nav-item ml-3"/>
+                        <t t-set="_link_class" t-valuef="btn btn-outline-primary"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_user_name" t-value="True"/>
-                        <t t-set="_user_name_class" t-value="'font-weight-bold'"/>
-                        <t t-set="_item_class" t-value="'nav-item dropdown ml-3'"/>
-                        <t t-set="_link_class" t-value="'nav-link'"/>
-                        <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                        <t t-set="_user_name_class" t-valuef="font-weight-bold"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-3"/>
+                        <t t-set="_link_class" t-valuef="nav-link"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right"/>
                     </t>
-                    <!-- Button -->
                     <li class="nav-item">
-                        <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_2"/>
+                        <!-- Call To Action -->
+                        <t t-call="website.placeholder_header_call_to_action"/>
                     </li>
                 </ul>
                 <!-- Separator -->
@@ -663,28 +676,38 @@
                 </div>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
-                </t>
                  <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <t t-set="_nav_class" t-valuef="flex-grow-1"/>
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
                     </t>
+                        <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector">
+                        <t t-set="_div_classes" t-valuef="ml-lg-2"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="position-lg-static float-none"/>
+                    </t>
                 </div>
             </div>
         </nav>
     </xpath>
 </template>
-
+<template id="template_header_slogan_align_center" inherit_id="website.template_header_slogan" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="after">
+        <t t-set="_nav_class" t-valuef="#{_nav_class} justify-content-center"/>
+    </xpath>
+</template>
+<template id="template_header_slogan_align_right" inherit_id="website.template_header_slogan" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="after">
+        <t t-set="_nav_class" t-valuef="#{_nav_class} justify-content-end"/>
+    </xpath>
+</template>
 <template id="template_header_slogan_oe_structure_header_slogan_1" inherit_id="website.template_header_slogan" name="Template Header Slogan (oe_structure_header_slogan_1)">
     <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_slogan_1']" position="replace">
         <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_1">
@@ -697,18 +720,6 @@
     </xpath>
 </template>
 
-<template id="template_header_slogan_oe_structure_header_slogan_2" inherit_id="website.template_header_slogan" name="Template Header Slogan (oe_structure_header_slogan_2)">
-    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_slogan_2']" position="replace">
-        <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_2">
-            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
-                <div class="container">
-                    <a href="/contactus" class="btn btn-primary ml-4 btn_cta">Contact Us</a>
-                </div>
-            </section>
-        </div>
-    </xpath>
-</template>
-
 <template id="template_header_slogan_oe_structure_header_slogan_3" inherit_id="website.template_header_slogan" name="Template Header Slogan (oe_structure_header_slogan_3)">
     <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_slogan_3']" position="replace">
         <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_3">
@@ -732,33 +743,41 @@
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                <!-- Call To Action -->
+                <t t-call="website.placeholder_header_call_to_action">
+                    <t t-set="_div_classes" t-valuef="d-block d-lg-none"/>
                 </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <t t-set="_nav_class" t-valuef="flex-grow-1"/>
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_user_name" t-value="True"/>
-                            <t t-set="_user_name_class" t-value="'font-weight-bold'"/>
-                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_user_name_class" t-valuef="font-weight-bold"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item my-auto ml-lg-2 align-self-lg-center"/>
+                        </t>
+                    </t>
+                    <!-- Call To Action -->
+                    <t t-call="website.placeholder_header_call_to_action">
+                        <t t-set="_div_classes" t-valuef="d-none d-lg-block"/>
                     </t>
                 </div>
             </div>
@@ -774,14 +793,12 @@
                     <div class="row align-items-center">
                         <div class="col-lg-8">
                             <small>
-                                <span class="text-muted"><b>Contact us</b></span>
-                                <i class="fa fa-1x fa-fw fa-phone ml-3 mr-2"/><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a>
                                 <i class="fa fa-1x fa-fw fa-envelope ml-3 mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
                             </small>
                         </div>
                         <div class="col-lg-4 text-lg-right">
                             <div class="s_share no_icon_color" data-snippet="s_share" data-name="Social Media">
-                                <small class="s_share_title text-muted"><b>Follow us</b></small>
+                                <small class="s_share_title text-muted d-none"><b>Follow us</b></small>
                                 <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
                                     <i class="fa fa-facebook m-1"/>
                                 </a>
@@ -809,72 +826,29 @@
     </xpath>
 </template>
 
-<template id="template_header_minimalist" inherit_id="website.layout" name="Template Header Minimalist" active="False">
-    <xpath expr="//header//nav" position="replace">
-        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-md o_colored_level o_cc">
-            <div id="top_menu_container" class="container flex-wrap">
-                <!-- Brand -->
-                <t t-call="website.placeholder_header_brand"/>
-                <!-- Navbar Toggler -->
-                <t t-call="website.navbar_toggler"/>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
-                </t>
-                <!-- Navbar Collapse -->
-                <div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
-                    <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
-                        <!-- Menu -->
-                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
-                            <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
-                            </t>
-                        </t>
-                        <!-- Sign In -->
-                        <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item ml-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
-                        </t>
-                        <!-- User Dropdown -->
-                        <t t-call="portal.user_dropdown">
-                            <t t-set="_avatar" t-value="True"/>
-                            <t t-set="_item_class" t-value="'nav-item dropdown ml-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
-                        </t>
-                    </t>
-                </div>
-            </div>
-        </nav>
-    </xpath>
-</template>
-
 <template id="template_header_boxed" inherit_id="website.layout" name="Template Header Boxed" active="False">
     <xpath expr="//header//nav" position="replace">
         <div class="o_header_boxed_background o_colored_level o_cc pt8 pb8">
-            <div class="container d-flex align-items-center pb-4">
+            <div class="container d-flex align-items-center pb-4 flex-wrap">
                 <!-- Social Icons -->
-                <div class="flex-grow-1">
-                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_1"/>
-                </div>
-                <ul class="nav ml-auto" contenteditable="false">
+                <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_1"/>
+                <ul class="nav ml-auto flex-nowrap" contenteditable="false">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
-                        <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        <t t-set="_item_class" t-valuef="nav-item ml-lg-3"/>
+                        <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_avatar" t-value="true"/>
-                        <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-3'"/>
-                        <t t-set="_link_class" t-value="'nav-link'"/>
-                        <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-3"/>
+                        <t t-set="_link_class" t-valuef="nav-link"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right"/>
                     </t>
                 </ul>
                 <!-- Language Selector -->
                 <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                    <t t-set="_div_classes" t-valuef="ml-2 d-none d-sm-block"/>
                 </t>
             </div>
         </div>
@@ -887,16 +861,23 @@
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'mx-auto'"/>
+                        <t t-set="_nav_class" t-valuef="mx-auto"/>
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
                     </t>
-                    <!-- Button -->
-                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_2"/>
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector">
+                        <t t-set="_div_classes" t-valuef="d-block d-sm-none"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-right position-static float-none"/>
+                    </t>
+                    <!-- Call To Action -->
+                    <t t-call="website.placeholder_header_call_to_action">
+                        <t t-set="_div_classes" t-valuef="d-none d-lg-block"/>
+                    </t>
                 </div>
             </nav>
         </div>
@@ -926,58 +907,46 @@
     </xpath>
 </template>
 
-<template id="template_header_boxed_oe_structure_header_boxed_2" inherit_id="website.template_header_boxed" name="Template Header Boxed (oe_structure_header_boxed_2)">
-    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_boxed_2']" position="replace">
-        <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_2">
-            <section class="s_text_block" data-snippet="s_text_block" name="Text">
-                <div class="container">
-                    <a href="/contactus" class="btn btn-primary ml-lg-4 btn_cta">Contact Us</a>
-                </div>
-            </section>
-        </div>
-    </xpath>
-</template>
-
 <template id="template_header_centered_logo" inherit_id="website.layout" name="Template Header Centered Logo" active="False">
     <xpath expr="//header//nav" position="replace">
         <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc">
             <div id="top_menu_container" class="container">
-                <!-- Navbar Toggler -->
-                <t t-call="website.navbar_toggler"/>
-                <!-- Navbar Collapse -->
-                <div id="top_menu_collapse" class="collapse navbar-collapse o_header_centered_logo order-last order-lg-first">
-                    <t t-call="website.navbar_nav">
-                        <!-- Menu -->
-                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
-                            <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
-                            </t>
-                        </t>
-                    </t>
-                </div>
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
-                    <t t-set="_link_class" t-value="'m-0'"/>
+                    <t t-set="_link_class" t-valuef="m-0"/>
                 </t>
                 <!-- Right -->
-                <ul class="nav navbar-nav o_header_centered_logo justify-content-end">
+                <ul class="nav navbar-nav o_header_centered_logo justify-content-end flex-row">
                     <!-- Sign In -->
                     <t t-call="portal.placeholder_user_sign_in">
-                        <t t-set="_item_class" t-value="'nav-item ml-3'"/>
-                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_item_class" t-valuef="nav-item ml-3"/>
+                        <t t-set="_link_class" t-valuef="nav-link"/>
                     </t>
                     <!-- User Dropdown -->
                     <t t-call="portal.user_dropdown">
                         <t t-set="_icon" t-value="true"/>
-                        <t t-set="_item_class" t-value="'nav-item dropdown ml-3'"/>
-                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-3"/>
+                        <t t-set="_link_class" t-valuef="nav-link"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="position-absolute dropdown-menu-right"/>
                     </t>
                 </ul>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
-                </t>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse"
+                     class="collapse navbar-collapse o_header_centered_logo order-last order-lg-first">
+                    <t t-call="website.navbar_nav">
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
+                            </t>
+                        </t>
+                    </t>
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector"/>
+                </div>
             </div>
         </nav>
     </xpath>
@@ -995,36 +964,38 @@
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'ml-3 flex-grow-1'"/>
+                        <t t-set="_nav_class" t-valuef="ml-3 flex-grow-1"/>
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_icon" t-value="True"/>
                             <t t-set="_user_name" t-value="True"/>
-                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
-                        <!-- Button -->
-                        <li class="nav-item">
-                            <div class="oe_structure oe_structure_solo" id="oe_structure_header_image_2"/>
+                        <!-- Language Selector -->
+                        <li class="nav-item d-flex">
+                            <t t-call="website.placeholder_header_language_selector">
+                                <t t-set="_div_classes" t-valuef="ml-lg-2 align-self-lg-center"/>
+                            </t>
+                        </li>
+                        <li class="nav-item d-none d-lg-block">
+                            <!-- Call To Action -->
+                            <t t-call="website.placeholder_header_call_to_action"/>
                         </li>
                     </t>
                 </div>
-                <!-- Language Selector -->
-                <t t-call="website.placeholder_header_language_selector">
-                    <t t-set="_div_classes" t-value="'ml-2'"/>
-                </t>
             </div>
         </nav>
     </xpath>
@@ -1043,18 +1014,6 @@
     </xpath>
 </template>
 
-<template id="template_header_image_oe_structure_header_image_2" inherit_id="website.template_header_image" name="Template Header image (oe_structure_header_image_1)">
-    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_image_2']" position="replace">
-        <div class="oe_structure oe_structure_solo" id="oe_structure_header_image_2">
-            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
-                <div class="container">
-                    <a href="/contactus" class="btn btn-primary mt-3 mt-lg-0 ml-lg-3 btn_cta">Contact Us</a>
-                </div>
-            </section>
-        </div>
-    </xpath>
-</template>
-
 <template id="template_header_hamburger_full" inherit_id="website.layout" name="Template Header Hambuger Full" active="False">
     <xpath expr="//header//nav" position="replace">
         <nav data-name="Navbar" class="navbar navbar-light o_colored_level o_cc">
@@ -1062,11 +1021,9 @@
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
                 <div class="d-flex align-items-center ml-auto">
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector"/>
                     <!-- Navbar Toggler -->
                     <t t-call="website.navbar_toggler">
-                        <t t-set="_toggler_class" t-value="'o_header_hamburger_full_toggler ml-2'"/>
+                        <t t-set="_toggler_class" t-valuef="o_header_hamburger_full_toggler ml-2"/>
                     </t>
                 </div>
             </div>
@@ -1075,23 +1032,27 @@
                 <div class="o_header_collapsed_content_wrapper container d-flex flex-column align-items-lg-center justify-content-lg-center">
                     <!-- Menu -->
                     <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-value="'navbar-expand flex-column flex-lg-row text-center'"/>
+                        <t t-set="_nav_class" t-valuef="navbar-expand flex-column flex-lg-row text-center align-items-lg-center"/>
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector"/>
+                        <!-- Call To Action -->
+                        <t t-call="website.placeholder_header_call_to_action"/>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item'"/>
-                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                            <t t-set="_item_class" t-valuef="nav-item"/>
+                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_user_name" t-value="true"/>
-                            <t t-set="_item_class" t-value="'nav-item dropdown'"/>
-                            <t t-set="_link_class" t-value="'nav-link font-weight-bold ml-lg-3'"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown"/>
+                            <t t-set="_link_class" t-valuef="nav-link font-weight-bold ml-lg-3"/>
                         </t>
                     </t>
                     <!-- Social Icons -->
@@ -1142,34 +1103,36 @@
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
                 <div class="d-flex align-items-center ml-auto">
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector"/>
                     <!-- Navbar Toggler -->
                     <t t-call="website.navbar_toggler">
-                        <t t-set="_toggler_class" t-value="'ml-2'"/>
+                        <t t-set="_toggler_class" t-valuef="ml-2"/>
                     </t>
                 </div>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
-                    <t t-set="_nav_class" t-value="'text-right'"/>
+                    <t t-set="_nav_class" t-valuef="text-right"/>
                     <t t-call="website.navbar_nav">
                         <!-- Menu -->
                         <t t-foreach="website.menu_id.child_id" t-as="submenu">
                             <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
+                                <t t-set="item_class" t-valuef="nav-item"/>
+                                <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
+                        <li class="nav-item">
+                            <!-- Language Selector -->
+                            <t t-call="website.placeholder_header_language_selector"/>
+                        </li>
                         <!-- Sign In -->
                         <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-value="'nav-item'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_item_class" t-valuef="nav-item"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                         <!-- User Dropdown -->
                         <t t-call="portal.user_dropdown">
                             <t t-set="_user_name" t-value="true"/>
-                            <t t-set="_item_class" t-value="'nav-item dropdown'"/>
-                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_item_class" t-valuef="nav-item dropdown"/>
+                            <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
                     </t>
                 </div>
@@ -1185,7 +1148,7 @@
                 <div class="container">
                     <div class="row align-items-center">
                         <div class="col-lg-8 pt16">
-                            <p class="mb-0"><small>We help you grow your business</small></p>
+                            <p class="mb-0 text-center"><small>We help you grow your business</small></p>
                         </div>
                         <div class="col-lg-4 text-lg-right pt16">
                             <div class="s_share no_icon_color" data-snippet="s_share" data-name="Social Media">
@@ -1863,12 +1826,12 @@
     </xpath>
 
     <!-- Add the 'flags' possibility -->
-    <xpath expr="//button[hasclass('dropdown-toggle')]/span" position="before">
+    <xpath expr="//button[contains(@t-attf-class, 'dropdown-toggle')]/span" position="before">
         <t t-if="flags" t-call="website.lang_flag">
             <t t-set="flag_image_src" t-value="active_lang[4]"/>
         </t>
     </xpath>
-    <xpath expr="//*[hasclass('js_change_lang')]/span" position="before">
+    <xpath expr="//*[contains(@t-attf-class, 'js_change_lang')]/span" position="before">
         <t t-if="flags" t-call="website.lang_flag">
             <t t-set="flag_image_src" t-value="lg[4]"/>
         </t>
@@ -1881,12 +1844,12 @@
     <xpath expr="//*[contains(@t-attf-class, 'js_language_selector')]" position="attributes">
         <attribute name="t-attf-class" remove="dropup" separator=" "/>
     </xpath>
-    <xpath expr="//*[hasclass('dropdown-toggle')]" position="replace"/>
-    <xpath expr="//*[hasclass('dropdown-menu')]" position="attributes">
-        <attribute name="class" remove="dropdown-menu" add="list-inline" separator=" "/>
+    <xpath expr="//*[contains(@t-attf-class, 'dropdown-toggle')]" position="replace"/>
+    <xpath expr="//*[@role='menu']" position="attributes">
+        <attribute name="t-attf-class" remove="dropdown-menu" add="list-inline" separator=" "/>
     </xpath>
-    <xpath expr="//*[hasclass('dropdown-item')]" position="attributes">
-        <attribute name="class" remove="dropdown-item" add="list-inline-item" separator=" "/>
+    <xpath expr="//*[contains(@t-attf-class,'dropdown-item')]" position="attributes">
+        <attribute name="t-attf-class" remove="dropdown-item" add="list-inline-item" separator=" "/>
     </xpath>
     <xpath expr="//t[@t-foreach='languages']" position="inside">
         <t t-if="not lg_last and not no_text">
@@ -1948,6 +1911,19 @@
     </xpath>
 </template>
 
+<template id="website.placeholder_header_call_to_action" name="Placeholder Header Call to Action"/>
+<template id="website.header_call_to_action" inherit_id="website.placeholder_header_call_to_action" name="Header Call to Action" active="True">
+    <xpath expr="." position="inside">
+        <div t-attf-class="oe_structure oe_structure_solo #{_div_classes}">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="/contactus" class="btn btn-primary ml-lg-4 btn_cta">Contact Us</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
 <template id="record_cover">
     <t t-set="_cp" t-value="_cp or json.loads(_record.cover_properties)"/>
     <t t-set="_name" t-value="_name or _record._name"/>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index a40e52e6494..39efcf54407 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -64,7 +64,7 @@
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
+                <t t-set="_item_class" t-value="'nav-item'"/>
                 <t t-set="_link_class" t-value="'nav-link'"/>
             </t>
         </xpath>
@@ -80,16 +80,6 @@
         </xpath>
     </template>
 
-    <template id="template_header_minimalist" inherit_id="website.template_header_minimalist">
-        <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
-            <t t-call="website_sale.header_cart_link">
-                <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item'"/>
-                <t t-set="_link_class" t-value="'nav-link ml-3'"/>
-            </t>
-        </xpath>
-    </template>
-
     <template id="template_header_boxed" inherit_id="website.template_header_boxed">
         <xpath expr="//t[@t-call='portal.placeholder_user_sign_in']" position="before">
             <t t-call="website_sale.header_cart_link">
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index cfd0789ce83..6e30644e46b 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -99,16 +99,6 @@
         </xpath>
     </template>
 
-    <template id="template_header_minimalist" inherit_id="website_sale.template_header_minimalist">
-        <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
-            <t t-call="website_sale_wishlist.header_wishlist_link">
-                <t t-set="_icon" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item'"/>
-                <t t-set="_link_class" t-value="'nav-link ml-3'"/>
-            </t>
-        </xpath>
-    </template>
-
     <template id="template_header_boxed" inherit_id="website_sale.template_header_boxed">
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">