diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index b3e4742d1ec..599a4e1c788 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -35,7 +35,7 @@
             <span class="hidden" data-for="contactus_form" t-att-data-values="contactus_form_values"/>
             <div id="wrap" class="oe_structure oe_empty">
                 <section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
-                    <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+                    <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
                     <div class="o_we_bg_filter bg-black-50"/>
                     <div class="container">
                         <h1>Contact us</h1>
@@ -328,7 +328,7 @@
             <div id="wrap">
                 <div class="oe_structure">
                     <section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
-                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
                         <div class="o_we_bg_filter bg-black-50"/>
                         <div class="container">
                             <h1>About us</h1>
@@ -344,7 +344,7 @@
             <div id="wrap">
                 <div class="oe_structure">
                     <section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
-                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
                         <div class="o_we_bg_filter bg-black-50"/>
                         <div class="container">
                             <h1>Services</h1>
@@ -360,7 +360,7 @@
             <div id="wrap">
                 <div class="oe_structure">
                     <section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
-                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
                         <div class="o_we_bg_filter bg-black-50"/>
                         <div class="container">
                             <h1>Pricing</h1>
@@ -376,7 +376,7 @@
             <div id="wrap">
                 <div class="oe_structure">
                     <section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
-                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+                        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
                         <div class="o_we_bg_filter bg-black-50"/>
                         <div class="container">
                             <h1>Privacy Policy</h1>
@@ -937,6 +937,18 @@
             <field name="type">url</field>
             <field name="url">/website/static/src/img/snippets_demo/s_banner.jpg</field>
         </record>
+        <record id="website.s_banner_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_banner_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_banner_2.jpg</field>
+        </record>
+        <record id="website.s_banner_default_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_banner_default_image_3.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_banner_3.jpg</field>
+        </record>
         <record id="website.s_parallax_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">s_parallax_default_image.jpg</field>
diff --git a/addons/website/static/src/img/snippets_demo/s_banner.jpg b/addons/website/static/src/img/snippets_demo/s_banner.jpg
index e71228e9ae5..55c2e569466 100644
Binary files a/addons/website/static/src/img/snippets_demo/s_banner.jpg and b/addons/website/static/src/img/snippets_demo/s_banner.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_banner_2.jpg b/addons/website/static/src/img/snippets_demo/s_banner_2.jpg
new file mode 100644
index 00000000000..270bbd09322
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_banner_2.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_banner_3.jpg b/addons/website/static/src/img/snippets_demo/s_banner_3.jpg
new file mode 100644
index 00000000000..8872ef7cd55
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_banner_3.jpg differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_banner.svg b/addons/website/static/src/img/snippets_thumbs/s_banner.svg
index 276923f867e..c7ec07f7014 100644
--- a/addons/website/static/src/img/snippets_thumbs/s_banner.svg
+++ b/addons/website/static/src/img/snippets_thumbs/s_banner.svg
@@ -1,40 +1,72 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
   <defs>
-    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="23.23%" y2="76.77%">
+    <rect id="path-1" width="23.077" height="18.116" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="46.509%" y2="34.249%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="39.469%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="25" height="2" x="0" y="0"/>
+    <filter id="filter-6" width="104%" height="200%" x="-2%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <path id="path-7" d="M23 12v1H0v-1h23zm-4-3v1H0V9h19zm4-3v1H0V6h23z"/>
+    <filter id="filter-8" width="104.3%" height="128.6%" x="-2.2%" y="-7.1%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.0995137675 0"/>
+    </filter>
+    <linearGradient id="linearGradient-5" x1="0%" x2="100%" y1="45.675%" y2="54.325%">
       <stop offset="0%" stop-color="#00A09D"/>
       <stop offset="100%" stop-color="#00E2FF"/>
     </linearGradient>
-    <rect id="path-2" width="21" height="2" x="3" y="3"/>
-    <filter id="filter-3" width="104.8%" height="200%" x="-2.4%" y="-25%" filterUnits="objectBoundingBox">
-      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
-      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
-      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944   0 0 0 0 0.259629577   0 0 0 0 0.259574831  0 0 0 0.525895979 0"/>
-    </filter>
-    <path id="path-4" d="M18 11v1H3v-1h15zm2-3v1H3V8h17z"/>
-    <filter id="filter-5" width="105.9%" height="150%" x="-2.9%" y="-12.5%" filterUnits="objectBoundingBox">
-      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
-      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
-      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0995137675 0"/>
-    </filter>
   </defs>
   <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
     <g class="s_banner">
       <rect width="82" height="60" class="bg"/>
-      <g fill="url(#linearGradient-1)" class="group" opacity=".4">
-        <g class="image_1">
-          <rect width="82" height="60" class="rectangle"/>
+      <g class="group" transform="translate(8 20)">
+        <g class="group" transform="translate(15 -3)">
+          <g class="image_1_border" transform="translate(29)">
+            <rect width="24" height="19" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.462 .442)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="17.769" cy="4.64" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="3.462" ry="3.314"/>
+              <ellipse cx="23.308" cy="19.884" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="10.846" ry="6.628"/>
+              <ellipse cx=".231" cy="20.105" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="17.308" ry="10.384"/>
+            </g>
+            <path fill="#FFF" d="M24 0v19H0V0h24zm-1 1H1v17h22V1z" class="rectangle_2"/>
+          </g>
+          <g class="image_1_border" transform="translate(17,10)">
+            <rect width="24" height="19" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.462 .442)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="17.769" cy="4.64" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="3.462" ry="3.314"/>
+              <ellipse cx="23.308" cy="19.884" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="10.846" ry="6.628"/>
+              <ellipse cx=".231" cy="20.105" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="17.308" ry="10.384"/>
+            </g>
+            <path fill="#FFF" d="M24 0v19H0V0h24zm-1 1H1v17h22V1z" class="rectangle_2"/>
+          </g>
         </g>
-      </g>
-      <g class="group" transform="translate(13 22)">
-        <rect width="28" height="16" fill="#FFF" class="rectangle"/>
         <g class="rectangle">
-          <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
-          <use fill="#000" fill-opacity=".697" xlink:href="#path-2"/>
+          <use fill="#000" filter="url(#filter-6)" xlink:href="#path-5"/>
+          <use fill="#FFF" fill-opacity=".78" xlink:href="#path-5"/>
         </g>
         <g class="combined_shape">
-          <use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
-          <use fill="#000" fill-opacity=".348" xlink:href="#path-4"/>
+          <use fill="#000" filter="url(#filter-8)" xlink:href="#path-7"/>
+          <use fill="#FFF" fill-opacity=".348" xlink:href="#path-7"/>
         </g>
+        <rect width="17" height="5" transform="translate(0 18)" fill="url(#linearGradient-5)" class="rectangle"/>
       </g>
     </g>
   </g>
diff --git a/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js b/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
index 88feadfa66d..a7e3c43d964 100644
--- a/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
+++ b/addons/website/static/tests/tours/snippet_empty_parent_autoremove.js
@@ -34,29 +34,38 @@ wTourUtils.registerWebsitePreviewTour('snippet_empty_parent_autoremove', {
         trigger: 'iframe #wrap:empty',
     },
 
-    // Banner: test that parallax, bg-filter and shape are not treated as content
+    // Cover: test that parallax, bg-filter and shape are not treated as content
     wTourUtils.dragNDrop({
-        id: 's_banner',
-        name: 'Banner',
+        id: 's_cover',
+        name: 'Cover',
     }),
     wTourUtils.clickOnSnippet({
-        id: 's_banner',
-        name: 'Banner',
+        id: 's_cover',
+        name: 'Cover',
     }),
-    {
-        content: "Check that parallax is present",
-        trigger: 'iframe #wrap .s_banner .s_parallax_bg',
-        run: () => null,
-    },
+    // Add a shape
     wTourUtils.changeOption('ColoredLevelBackground', 'Shape'),
     {
-        content: "Check that shape is present",
-        trigger: 'iframe #wrap .s_banner .o_we_shape',
+        content: "Check that the parallax element is present",
+        trigger: 'iframe #wrap .s_cover .s_parallax_bg',
         run: () => null,
     },
     {
-        content: "Click on first column",
-        trigger: 'iframe #wrap .s_banner .row > :first-child',
+        content: "Check that the filter element is present",
+        trigger: 'iframe #wrap .s_cover .o_we_bg_filter',
+        run: () => null,
+    },
+    {
+        content: "Check that the shape element is present",
+        trigger: 'iframe #wrap .s_cover .o_we_shape',
+        run: () => null,
+    },
+    // Add a column
+    wTourUtils.changeOption('layout_column', 'we-toggler'),
+    wTourUtils.changeOption('layout_column', '[data-select-count="1"]'),
+    {
+        content: "Click on the created column",
+        trigger: 'iframe #wrap .s_cover .row > :first-child',
     },
     removeSelectedBlock(),
     {
diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml
index fd7dfda7f2a..c9442368ef3 100644
--- a/addons/website/views/snippets/s_banner.xml
+++ b/addons/website/views/snippets/s_banner.xml
@@ -2,14 +2,27 @@
 <odoo>
 
 <template id="s_banner" name="Banner">
-    <section class="s_banner parallax s_parallax_is_fixed pt96 pb96" data-scroll-background-ratio="1">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+    <section class="s_banner pt96 pb96">
         <div class="container">
-            <div class="row s_nb_column_fixed">
-                <div class="col-lg-6 jumbotron rounded o_cc o_cc1 pt32 pb32" data-name="Box">
-                    <h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
+            <div class="row s_nb_column_fixed o_grid_mode">
+                <div class="justify-content-center o_grid_item g-height-4 g-col-lg-5 col-lg-5" data-name="Box" style="z-index: 1; grid-area: 2 / 1 / 10 / 6;">
+                    <h1><font style="font-size: 62px;">Sell Online. <strong>Easily.</strong></font></h1>
                     <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-                    <a t-att-href="cta_btn_href" class="btn btn-primary"><t t-esc="cta_btn_text">Contact Us</t></a>
+                    <div class="s_hr text-start pb32 pt4" data-snippet="s_hr" data-name="Separator">
+                        <hr class="w-100 mx-auto"/>
+                    </div>
+                    <p>
+                        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary">Start Now <span class="fa fa-angle-right ms-2"/></a>
+                    </p>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-10 col-lg-4" style="z-index: 2; grid-area: 1 / 8 / 11 / 12;">
+                    <img class="img img-fluid mx-auto shadow rounded" src="/web/image/website.s_banner_default_image_2" alt=""/>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-2 g-height-5 col-lg-2 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 3; grid-area: 2 / 11 / 7 / 13;">
+                    <img class="img img-fluid mx-auto shadow rounded" src="/web/image/website.s_banner_default_image_3" alt=""/>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-3 g-height-5 col-lg-3 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 4; grid-area: 7 / 7 / 12 / 10;">
+                    <img class="img img-fluid mx-auto shadow rounded" src="/web/image/website.s_banner_default_image" alt=""/>
                 </div>
             </div>
         </div>