diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 72ac9b20588..47890977857 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -72,7 +72,7 @@ $-seen-urls: ();
         }
     }
 
-    @if o-website-value('layout') == 'boxed' {
+    @if o-website-value('layout') != 'full' {
         > main {
             background-color: o-color('o-cc1-bg');
         }
@@ -109,6 +109,13 @@ $-seen-urls: ();
                 }
             }
         }
+
+        @if o-website-value('layout') == 'framed' {
+            @include media-breakpoint-up(md) {
+                padding-top: $grid-gutter-width;
+                padding-bottom: $grid-gutter-width * 1.5;
+            }
+        }
     }
 }
 
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 4dab92e18e2..7e249cf4830 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -894,6 +894,7 @@
         <we-select string="Layout" data-variable="layout">
             <we-button data-customize-website-variable="'full'" data-name="layout_full_opt">Full</we-button>
             <we-button data-customize-website-variable="'boxed'">Boxed</we-button>
+            <we-button data-customize-website-variable="'framed'">Framed</we-button>
         </we-select>
         <we-row string="⌙ Background" data-no-preview="true">
             <we-colorpicker data-dependencies="!layout_full_opt"