diff --git a/addons/website/static/src/img/snippets_options/footer_template_call_to_action.svg b/addons/website/static/src/img/snippets_options/footer_template_call_to_action.svg
new file mode 100644
index 00000000000..b7e419250f7
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_call_to_action.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_call_to_action">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 14)">
+      <g class="link">
+        <rect width="85" height="8" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 37)">
+      <g class="link">
+        <rect width="120" height="4" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(178 13)">
+      <rect width="36" height="13" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(195 37)">
+      <rect width="19" height="7" class="rectangle" rx="3.5"/>
+    </g>
+    <rect width="194" height="1" x="20" y="31" fill="#FFF" class="rectangle" opacity=".324"/>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_centered.svg b/addons/website/static/src/img/snippets_options/footer_template_centered.svg
new file mode 100644
index 00000000000..c822787bd79
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_centered.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_centered">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(71 25)">
+      <g class="link">
+        <rect width="101" height="6" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(104 34)">
+      <g class="logo_ver">
+        <path d="M6.868 11.47V9.605H3.16V3.891H.786v7.58h6.082zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964V7.148h-3.67v1.577h1.589v.714a4.133 4.133 0 0 1-.828.388 2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.475 2.475 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.343 3.343 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491z" class="logo"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(103 11)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(117 11)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(131 11)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_contact.svg b/addons/website/static/src/img/snippets_options/footer_template_contact.svg
new file mode 100644
index 00000000000..66e9b4f106c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_contact.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_contact">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(67 15)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(67 22)">
+      <g class="link">
+        <rect width="15" height="4" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(119 22)">
+      <g class="link">
+        <rect width="18" height="4" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(119 15)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 15)">
+      <g class="link">
+        <rect width="28" height="13" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(172 41)">
+      <g class="link">
+        <rect width="13" height="4" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(145 41)">
+      <g class="link">
+        <rect width="21" height="4" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <rect width="194" height="1" x="20" y="32" fill="#FFF" class="rectangle" opacity=".324"/>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(191 41)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(190 15)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(205 15)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(20 35)">
+      <g class="logo_ver">
+        <path d="M6.868 11.47V9.605H3.16V3.891H.786v7.58h6.082zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964V7.148h-3.67v1.577h1.589v.714a4.133 4.133 0 0 1-.828.388 2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.475 2.475 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.343 3.343 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491z" class="logo"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_default.svg b/addons/website/static/src/img/snippets_options/footer_template_default.svg
new file mode 100644
index 00000000000..c6a82ccf175
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_default.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_default">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 17)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(66 17)">
+      <g class="link">
+        <rect width="101" height="28" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 25)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(191 17)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(191 25)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(191 36)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(205 36)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 33)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 41)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_descriptive.svg b/addons/website/static/src/img/snippets_options/footer_template_descriptive.svg
new file mode 100644
index 00000000000..0109498f6be
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_descriptive.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_descriptive">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 17)">
+      <g class="link">
+        <rect width="101" height="28" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(133 17)">
+      <g class="link">
+        <rect width="46" height="28" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(191 17)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(191 33)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(191 25)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_headline.svg b/addons/website/static/src/img/snippets_options/footer_template_headline.svg
new file mode 100644
index 00000000000..8439548129a
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_headline.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_headline">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(99 16)">
+      <g class="link">
+        <rect width="67" height="6" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 16)">
+      <g class="link">
+        <rect width="50" height="6" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(99 27)">
+      <g class="link">
+        <rect width="34" height="6" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(99 38)">
+      <g class="link">
+        <rect width="34" height="6" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 27)">
+      <g class="link">
+        <rect width="34" height="6" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(20 38)">
+      <g class="link">
+        <rect width="34" height="6" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(177 36)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(191 36)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+    <g fill="#FFF" class="link" transform="translate(205 36)">
+      <rect width="9" height="9" class="rectangle" rx="4.5"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_links.svg b/addons/website/static/src/img/snippets_options/footer_template_links.svg
new file mode 100644
index 00000000000..de15305ac6b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_links.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_links">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group_2" opacity=".804" transform="translate(20 17)">
+      <g class="group_copy_3" transform="translate(128)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+      </g>
+      <g class="group_copy_2" transform="translate(85)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+      </g>
+      <g class="group_copy" transform="translate(43)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+      </g>
+      <g class="group">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 8)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 16)"/>
+        <rect width="23" height="4" class="rectangle" rx="1" transform="translate(0 24)"/>
+      </g>
+      <g class="link" transform="translate(171)">
+        <rect width="23" height="22" class="rectangle" rx="1"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/footer_template_minimalist.svg b/addons/website/static/src/img/snippets_options/footer_template_minimalist.svg
new file mode 100644
index 00000000000..3ca27f4fa57
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/footer_template_minimalist.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-2" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="footer_template_minimalist">
+    <g class="rectangle">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-2"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-2"/>
+    </g>
+    <g fill="#FFF" class="group_2" transform="translate(19 23)">
+      <g class="group" opacity=".804" transform="translate(155 6)">
+        <g class="link">
+          <rect width="10" height="4" class="rectangle" rx="1"/>
+        </g>
+      </g>
+      <g class="group" opacity=".804" transform="translate(109 6)">
+        <g class="link">
+          <rect width="10" height="4" class="rectangle" rx="1"/>
+        </g>
+      </g>
+      <g class="group" opacity=".804" transform="translate(38 6)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+      </g>
+      <g class="group" opacity=".804" transform="translate(65 6)">
+        <g class="link">
+          <rect width="13" height="4" class="rectangle" rx="1"/>
+        </g>
+      </g>
+      <g class="group" opacity=".804" transform="translate(82 6)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+      </g>
+      <rect width="20" height="9" class="rectangle" rx="4.5" transform="translate(172 3)"/>
+      <g fill-rule="nonzero" class="group">
+        <g class="logo_ver">
+          <path d="M6.868 11.47V9.605H3.16V3.891H.786v7.58h6.082zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964V7.148h-3.67v1.577h1.589v.714a4.133 4.133 0 0 1-.828.388 2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.475 2.475 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.343 3.343 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491z" class="logo"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_effect_disappears.png b/addons/website/static/src/img/snippets_options/header_effect_disappears.png
new file mode 100644
index 00000000000..abf6f008616
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_effect_disappears.png differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_fade_out.png b/addons/website/static/src/img/snippets_options/header_effect_fade_out.png
new file mode 100644
index 00000000000..1485dccf516
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_effect_fade_out.png differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_fixed.png b/addons/website/static/src/img/snippets_options/header_effect_fixed.png
new file mode 100644
index 00000000000..4e60b048f75
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_effect_fixed.png differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_scroll.png b/addons/website/static/src/img/snippets_options/header_effect_scroll.png
new file mode 100644
index 00000000000..73db49c10a6
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_effect_scroll.png differ
diff --git a/addons/website/static/src/img/snippets_options/header_effect_standard.png b/addons/website/static/src/img/snippets_options/header_effect_standard.png
new file mode 100644
index 00000000000..878fa298706
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_effect_standard.png differ
diff --git a/addons/website/static/src/img/snippets_options/header_template_boxed.svg b/addons/website/static/src/img/snippets_options/header_template_boxed.svg
new file mode 100644
index 00000000000..b1675c3d641
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_boxed.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+            <stop stop-color="#00A09D" offset="0%"></stop>
+            <stop stop-color="#00E2FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header_template_boxed" fill-rule="nonzero">
+            <g id="Group">
+                <g id="path-23-link" fill="#000000" fill-opacity="0.14">
+                    <rect id="path-23" x="0" y="0" width="234" height="50"></rect>
+                </g>
+                <g id="path-23-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+                    <polygon id="path-23" points="0 0 234 0 234 37 224 37 224 50 11 50 10.9978527 37 0 37"></polygon>
+                </g>
+            </g>
+            <g id="Group-3" transform="translate(11, 6)" fill="#FFFFFF">
+                <g id="Group" opacity="0.804" transform="translate(181, 3)">
+                    <g id="Rectangle">
+                        <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+                    </g>
+                </g>
+                <g id="Group-2" transform="translate(0, 3)" opacity="0.804">
+                    <g id="Rectangle" transform="translate(27, 0)">
+                        <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                    </g>
+                    <g id="Rectangle" transform="translate(18, 0)">
+                        <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                    </g>
+                    <g id="Rectangle" transform="translate(9, 0)">
+                        <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                    </g>
+                    <g id="Rectangle">
+                        <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                    </g>
+                </g>
+                <g id="Rectangle" transform="translate(204, 0)">
+                    <rect x="0" y="0" width="9" height="9" rx="4.5"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.4" transform="translate(11, 21)" fill="#FFFFFF">
+                <rect id="Rectangle" x="0" y="0" width="213" height="29"></rect>
+            </g>
+            <g id="Group" transform="translate(18, 31)" fill="#FFFFFF">
+                <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+            </g>
+            <g id="Group" transform="translate(83, 32)" fill="#FFFFFF">
+                <g id="Group-4" transform="translate(0, 3)" opacity="0.804">
+                    <g id="Group">
+                        <rect id="Rectangle" x="0" y="0" width="11" height="4" rx="1"></rect>
+                    </g>
+                    <g id="Group" transform="translate(16, 0)">
+                        <rect id="Rectangle" x="0" y="0" width="23" height="4" rx="1"></rect>
+                    </g>
+                    <g id="Group" transform="translate(71, 0)">
+                        <rect id="Rectangle" x="0" y="0" width="13" height="4" rx="1"></rect>
+                    </g>
+                    <g id="Group" transform="translate(44, 0)">
+                        <rect id="Rectangle" x="0" y="0" width="22" height="4" rx="1"></rect>
+                    </g>
+                </g>
+                <rect id="Rectangle" x="112" y="0" width="20" height="9" rx="4.5"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_centered_logo.svg b/addons/website/static/src/img/snippets_options/header_template_centered_logo.svg
new file mode 100644
index 00000000000..10bf9804e30
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_centered_logo.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-29b" width="234" height="25" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="header_template_centered_logo">
+    <g class="bg_1lev">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-29b"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-29b"/>
+    </g>
+    <g fill="#FFF" class="group_2" transform="translate(10 9)">
+      <g fill-rule="nonzero" class="group" transform="translate(88)">
+        <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+      </g>
+      <g class="group" opacity=".804" transform="translate(0 7)">
+        <g class="link">
+          <rect width="15" height="4" class="rectangle" rx="1"/>
+        </g>
+        <g class="link" transform="translate(18)">
+          <rect width="15" height="4" class="rectangle" rx="1"/>
+        </g>
+        <g class="link" transform="translate(37)">
+          <rect width="15" height="4" class="rectangle" rx="1"/>
+        </g>
+        <g class="link" transform="translate(173)">
+          <rect width="15" height="4" class="rectangle" rx="1"/>
+        </g>
+      </g>
+      <rect width="20" height="9" class="rectangle" rx="4.5" transform="translate(194 4)"/>
+    </g>
+    <g fill="#FFF" class="page_content" opacity=".442" transform="translate(0 30)">
+      <rect width="234" height="25" class="rectangle_v1"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_contact.svg b/addons/website/static/src/img/snippets_options/header_template_contact.svg
new file mode 100644
index 00000000000..3af85000d01
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_contact.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+            <stop stop-color="#00A09D" offset="0%"></stop>
+            <stop stop-color="#00E2FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header_template_contact" fill-rule="nonzero">
+            <g id="Group">
+                <g id="path-27-link" fill="#000000" fill-opacity="0.14">
+                    <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+                </g>
+                <g id="path-27-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+                    <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+                </g>
+            </g>
+            <g id="Group" transform="translate(10.000000, 31.000000)" fill="#FFFFFF">
+                <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(56.000000, 34.000000)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="13" height="4" rx="1"></rect>
+                </g>
+                <g transform="translate(18.000000, 0.000000)" id="Rectangle">
+                    <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+                </g>
+                <g transform="translate(46.000000, 0.000000)" id="Rectangle">
+                    <rect x="0" y="0" width="16" height="4" rx="1"></rect>
+                </g>
+                <g transform="translate(67.000000, 0.000000)" id="Rectangle">
+                    <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <rect id="Rectangle" fill="#FFFFFF" x="204" y="31" width="20" height="9" rx="4.5"></rect>
+            <g id="Group" opacity="0.804" transform="translate(21.000000, 12.000000)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(43.000000, 12.000000)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(218.000000, 12.000000)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(209.000000, 12.000000)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(200.000000, 12.000000)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(191.000000, 12.000000)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group-Copy" opacity="0.804" transform="translate(10.000000, 12.000000)" fill="#FFFFFF">
+                <g id="Group">
+                    <rect id="Rectangle" x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_default.png b/addons/website/static/src/img/snippets_options/header_template_default.png
deleted file mode 100644
index 80b79170ffb..00000000000
Binary files a/addons/website/static/src/img/snippets_options/header_template_default.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_options/header_template_default.svg b/addons/website/static/src/img/snippets_options/header_template_default.svg
new file mode 100644
index 00000000000..0f9ce8293ca
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_default.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-22" width="234" height="25" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="header_template_default">
+    <g class="bg_def">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-22"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-22"/>
+    </g>
+    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 9)">
+      <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(71 16)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+      <rect width="23" height="4" class="rectangle" rx="1" transform="translate(28)"/>
+      <rect width="23" height="4" class="rectangle" rx="1" transform="translate(56)"/>
+      <rect width="23" height="4" class="rectangle" rx="1" transform="translate(84)"/>
+    </g>
+    <rect width="20" height="9" fill="#FFF" class="rectangle" rx="4.5" transform="translate(204 13)"/>
+    <g fill="#FFF" class="page_content_default" opacity=".442" transform="translate(0 30)">
+      <rect width="234" height="25" class="rectangle_default"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_hamburger.png b/addons/website/static/src/img/snippets_options/header_template_hamburger.png
deleted file mode 100644
index d85bc179e78..00000000000
Binary files a/addons/website/static/src/img/snippets_options/header_template_hamburger.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_options/header_template_hamburger.svg b/addons/website/static/src/img/snippets_options/header_template_hamburger.svg
new file mode 100644
index 00000000000..b6f82dac145
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_hamburger.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-24" width="234" height="25" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="header_template_hamburger">
+    <g class="bg_small_ham">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-24"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-24"/>
+    </g>
+    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 9)">
+      <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+    </g>
+    <g fill="#FFF" class="group" transform="translate(208 12)">
+      <rect width="16" height="2" class="rectangle_ham" rx="1"/>
+      <rect width="16" height="2" y="4" class="rectangle_ham" rx="1"/>
+      <rect width="16" height="2" y="8" class="rectangle_ham" rx="1"/>
+    </g>
+    <g fill="#FFF" class="page_content" opacity=".442" transform="translate(0 30)">
+      <rect width="234" height="25" class="rectangle_ham"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_hamburger_full.svg b/addons/website/static/src/img/snippets_options/header_template_hamburger_full.svg
new file mode 100644
index 00000000000..d859e88dfaa
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_hamburger_full.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="0%" y1="47.716%" x2="100%" y2="52.284%" id="linearGradient-1">
+            <stop stop-color="#00A09D" offset="0%"></stop>
+            <stop stop-color="#00E2FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header_template_hamburger" fill-rule="nonzero">
+            <g id="Group">
+                <g id="path-24-link" fill="#000000" fill-opacity="0.14">
+                    <rect id="path-24" x="0" y="0" width="234" height="25"></rect>
+                </g>
+                <g id="path-24-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+                    <rect id="path-24" x="0" y="0" width="234" height="50"></rect>
+                </g>
+            </g>
+            <g id="Group" transform="translate(10, 8)" fill="#FFFFFF">
+                <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+            </g>
+            <g id="Group" transform="translate(208, 7)" fill="#FFFFFF">
+                <rect id="Rectangle" x="0" y="0" width="16" height="2" rx="1"></rect>
+                <rect id="Rectangle" x="0" y="4" width="16" height="2" rx="1"></rect>
+                <rect id="Rectangle" x="0" y="8" width="16" height="2" rx="1"></rect>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(73, 39)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="13" height="4" rx="1"></rect>
+                </g>
+                <g id="Rectangle" transform="translate(18, 0)">
+                    <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+                </g>
+                <g id="Rectangle" transform="translate(46, 0)">
+                    <rect x="0" y="0" width="16" height="4" rx="1"></rect>
+                </g>
+                <g id="Rectangle" transform="translate(67, 0)">
+                    <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_image.svg b/addons/website/static/src/img/snippets_options/header_template_image.svg
new file mode 100644
index 00000000000..6d7b6e66934
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_image.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="49.429%" y2="50.571%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-28" width="234" height="25" x="0" y="30"/>
+    <rect id="path-38" width="234" height="25" x="0" y="0"/>
+    <linearGradient id="linearGradient-5" x1="72.875%" x2="40.332%" y1="47.355%" y2="38.066%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-6" x1="88.517%" x2="50%" y1="43.259%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-7" x1="88.517%" x2="50%" y1="43.604%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="header_template_image">
+    <g class="bg_top">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-28"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-28"/>
+    </g>
+    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 33)">
+      <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(71 40)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+      <rect width="23" height="4" class="rectangle" rx="1" transform="translate(28)"/>
+      <rect width="23" height="4" class="rectangle" rx="1" transform="translate(56)"/>
+      <rect width="23" height="4" class="rectangle" rx="1" transform="translate(84)"/>
+    </g>
+    <rect width="20" height="9" fill="#FFF" class="rectangle" rx="4.5" transform="translate(204 37)"/>
+    <g class="image_1_border_long" transform="translate(0 5)">
+      <rect width="234" height="25" fill="#FFF" class="rectangle"/>
+      <g class="oval___oval_mask">
+        <mask id="mask-4" fill="#fff">
+          <use xlink:href="#path-38"/>
+        </mask>
+        <use fill="#79D1F2" class="mask" xlink:href="#path-38"/>
+        <ellipse cx="51.5" cy="29.5" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-4)" rx="23.5" ry="12.5"/>
+        <ellipse cx="3.5" cy="27" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-4)" rx="37.5" ry="18"/>
+        <ellipse cx="221.5" cy="25" fill="url(#linearGradient-7)" class="oval" mask="url(#mask-4)" rx="38.5" ry="18"/>
+        <circle cx="129.5" cy="9.5" r="5.5" fill="#F3EC60" class="oval" mask="url(#mask-4)"/>
+        <ellipse cx="174.5" cy="27.5" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-4)" rx="23.5" ry="12.5"/>
+      </g>
+    </g>
+    <rect width="234" height="1" y="30" fill="#FFF" class="rectangle_topbar"/>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_magazine.svg b/addons/website/static/src/img/snippets_options/header_template_magazine.svg
new file mode 100644
index 00000000000..0951eed8fdb
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_magazine.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+            <stop stop-color="#00A09D" offset="0%"></stop>
+            <stop stop-color="#00E2FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header_template_contact" fill-rule="nonzero">
+            <g id="Group">
+                <g id="path-27-link" fill="#000000" fill-opacity="0.14">
+                    <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+                </g>
+                <g id="path-27-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+                    <rect id="path-27" x="0" y="0" width="234" height="50"></rect>
+                </g>
+            </g>
+            <g id="Group" transform="translate(10, 31)" fill="#FFFFFF">
+                <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z" id="Shape"></path>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(10, 8)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="17" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(218, 8)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(209, 8)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(200, 8)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <g id="Group" opacity="0.804" transform="translate(191, 8)" fill="#FFFFFF">
+                <g id="Rectangle">
+                    <rect x="0" y="0" width="6" height="4" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+        <rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" opacity="0.375" x="10" y="20" width="214" height="1"></rect>
+        <g id="Group" transform="translate(208, 31)" fill="#FFFFFF" fill-rule="nonzero">
+            <rect id="Rectangle" x="0" y="0" width="16" height="2" rx="1"></rect>
+            <rect id="Rectangle" x="0" y="4" width="16" height="2" rx="1"></rect>
+            <rect id="Rectangle" x="0" y="8" width="16" height="2" rx="1"></rect>
+        </g>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_minimalist.svg b/addons/website/static/src/img/snippets_options/header_template_minimalist.svg
new file mode 100644
index 00000000000..a765b16c05a
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_minimalist.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="0%" y1="49.429%" x2="100%" y2="50.571%" id="linearGradient-1">
+            <stop stop-color="#00A09D" offset="0%"></stop>
+            <stop stop-color="#00E2FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header_template_minimalist" fill-rule="nonzero">
+            <g id="Group">
+                <g id="path-25-link" fill="#000000" fill-opacity="0.14">
+                    <rect id="path-25" x="0" y="0" width="234" height="25"></rect>
+                </g>
+                <g id="path-25-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+                    <rect id="path-25" x="0" y="0" width="234" height="25"></rect>
+                </g>
+            </g>
+            <g id="Group" transform="translate(10, 8)" fill="#FFFFFF">
+                <g id="Shape">
+                    <path d="M7.676,9 L7.676,6.885 L3.533,6.885 L3.533,0.41 L0.88,0.41 L0.88,9 L7.677,9 L7.676,9 Z M12.085,9.146 C13.038,9.146 13.834,8.968 14.472,8.61 C15.0978687,8.26580349 15.6076733,7.7438192 15.937,7.11 C16.275,6.468 16.444,5.645 16.444,4.64 C16.444,3.258 16.057,2.183 15.284,1.415 C14.511,0.647 13.409,0.264 11.979,0.264 C10.585,0.264 9.497,0.654 8.716,1.436 C7.934,2.216 7.544,3.309 7.544,4.711 C7.544,5.715 7.741,6.551 8.136,7.219 C8.53,7.887 9.045,8.375 9.679,8.684 C10.314,8.992 11.116,9.146 12.085,9.146 L12.085,9.146 Z M11.997,7.16 C11.442,7.16 11.004,6.97 10.681,6.592 C10.359,6.212 10.198,5.59 10.198,4.722 C10.198,3.848 10.36,3.221 10.684,2.842 C11.009,2.462 11.438,2.273 11.974,2.273 C12.532,2.273 12.974,2.46 13.301,2.833 C13.627,3.206 13.79,3.797 13.79,4.605 C13.79,5.566 13.634,6.232 13.321,6.604 C13.009,6.974 12.567,7.16 11.997,7.16 L11.997,7.16 Z M21.263,9.146 C22.091,9.146 22.807,9.05 23.411,8.856 C24.014,8.663 24.709,8.299 25.494,7.764 L25.494,4.102 L21.392,4.102 L21.392,5.889 L23.168,5.889 L23.168,6.697 C22.8767329,6.87778645 22.5661293,7.0253735 22.242,7.137 C21.9670701,7.22381625 21.6803084,7.26733655 21.392,7.266 C20.767,7.266 20.28,7.066 19.93,6.668 C19.58,6.27 19.406,5.605 19.406,4.676 C19.406,3.801 19.579,3.161 19.924,2.756 C20.27,2.353 20.734,2.15 21.316,2.15 C21.706,2.15 22.028,2.236 22.28,2.408 C22.532,2.58 22.71,2.828 22.816,3.152 L25.376,2.695 C25.22,2.141 24.986,1.683 24.676,1.321 C24.3615772,0.956921109 23.9576072,0.681173671 23.504,0.521 C23.034,0.35 22.324,0.264 21.374,0.264 C20.39,0.264 19.607,0.402 19.025,0.68 C18.3059335,1.01379281 17.7108821,1.56649058 17.325,2.259 C16.939,2.952 16.745,3.768 16.745,4.705 C16.745,5.595 16.922,6.385 17.276,7.072 C17.6020876,7.73123825 18.1238794,8.27363635 18.77,8.625 C19.413,8.973 20.244,9.146 21.263,9.146 L21.263,9.146 Z M30.477,9.146 C31.43,9.146 32.226,8.968 32.865,8.61 C33.4904985,8.26564661 33.9999402,7.74367762 34.329,7.11 C34.667,6.468 34.836,5.645 34.836,4.64 C34.836,3.258 34.45,2.183 33.676,1.415 C32.903,0.647 31.801,0.264 30.371,0.264 C28.977,0.264 27.889,0.654 27.108,1.436 C26.327,2.216 25.936,3.309 25.936,4.711 C25.936,5.715 26.133,6.551 26.528,7.219 C26.922,7.887 27.437,8.375 28.072,8.684 C28.706,8.992 29.508,9.146 30.477,9.146 Z M30.389,7.16 C29.834,7.16 29.396,6.97 29.074,6.592 C28.751,6.212 28.59,5.59 28.59,4.722 C28.59,3.848 28.752,3.221 29.077,2.842 C29.401,2.462 29.83,2.273 30.366,2.273 C30.924,2.273 31.366,2.46 31.693,2.833 C32.019,3.206 32.182,3.797 32.182,4.605 C32.182,5.566 32.026,6.232 31.713,6.604 C31.401,6.974 30.959,7.16 30.389,7.16 L30.389,7.16 Z"></path>
+                </g>
+                <g opacity="0.804" transform="translate(45, 3)" id="Rectangle">
+                    <g>
+                        <rect x="0" y="0" width="12" height="4" rx="1"></rect>
+                    </g>
+                    <g transform="translate(17, 0)">
+                        <rect x="0" y="0" width="12" height="4" rx="1"></rect>
+                    </g>
+                    <g transform="translate(34, 0)">
+                        <rect x="0" y="0" width="18" height="4" rx="1"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="Group" opacity="0.442" transform="translate(0, 25)" fill="#FFFFFF">
+                <rect id="Rectangle" x="0" y="0" width="234" height="25"></rect>
+            </g>
+        </g>
+        <g id="Group" transform="translate(216, 8)" fill="#FFFFFF" fill-rule="nonzero">
+            <rect id="Rectangle" x="0" y="0" width="9" height="9" rx="4.5"></rect>
+        </g>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_sidebar.svg b/addons/website/static/src/img/snippets_options/header_template_sidebar.svg
new file mode 100644
index 00000000000..f1b7a20214a
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_sidebar.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="18.506%" y2="81.494%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-26" width="63" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="header_template_sidebar">
+    <g class="side_bg_side">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-26"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-26"/>
+    </g>
+    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 9)">
+      <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(10 34)">
+      <g class="link">
+        <rect width="23" height="3" class="rectangle" rx="1"/>
+      </g>
+      <g class="link" transform="translate(0 6)">
+        <rect width="37" height="3" class="rectangle" rx="1"/>
+      </g>
+      <g class="link" transform="translate(0 12)">
+        <rect width="30" height="3" class="rectangle" rx="1"/>
+      </g>
+      <g class="link" transform="translate(0 18)">
+        <rect width="26" height="3" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <rect width="1" height="51" x="62" y="5" fill="#FFF" class="bar_side" opacity=".5"/>
+    <g fill="#FFF" class="page_content" opacity=".4" transform="translate(63 5)">
+      <rect width="171" height="50" class="rectangle_side"/>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_slogan.svg b/addons/website/static/src/img/snippets_options/header_template_slogan.svg
new file mode 100644
index 00000000000..5bb81d4a365
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_slogan.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="234px" height="50px" viewBox="0 0 234 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="0%" y1="47.717%" x2="100%" y2="52.283%" id="linearGradient-1">
+            <stop stop-color="#00A09D" offset="0%"></stop>
+            <stop stop-color="#00E2FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header_template_slogan" fill-rule="nonzero">
+            <g id="Group">
+                <g id="path-21-link" fill="#000000" fill-opacity="0.14">
+                    <rect id="path-21" x="0" y="0" width="234" height="50"></rect>
+                </g>
+                <g id="path-21-link" fill="url(#linearGradient-1)" fill-opacity="0.3">
+                    <rect id="path-21" x="0" y="0" width="234" height="50"></rect>
+                </g>
+            </g>
+            <text id="LOGO" fill="#FFFFFF" font-family="Arial-Black, Arial Black" font-size="12" font-weight="700">
+                <tspan x="10" y="18">LOGO</tspan>
+            </text>
+            <rect id="Rectangle" fill="#FFFFFF" opacity="0.375" x="10" y="26" width="214" height="1"></rect>
+            <g id="Group" opacity="0.804" transform="translate(10, 36)" fill="#FFFFFF">
+                <rect id="Rectangle" x="0" y="0" width="23" height="4" rx="1"></rect>
+                <g transform="translate(28, 0)" id="Rectangle">
+                    <rect x="0" y="0" width="9" height="4" rx="1"></rect>
+                </g>
+                <g id="Group-Copy" transform="translate(204, 0)">
+                    <rect id="Rectangle" x="0" y="0" width="9" height="4" rx="1"></rect>
+                </g>
+                <g transform="translate(42, 0)" id="Rectangle">
+                    <rect x="0" y="0" width="23" height="4" rx="1"></rect>
+                </g>
+                <g transform="translate(70, 0)" id="Rectangle">
+                    <rect x="0" y="0" width="16" height="4" rx="1"></rect>
+                </g>
+            </g>
+            <rect id="Rectangle" fill="#FFFFFF" x="204" y="11" width="20" height="9" rx="4.5"></rect>
+            <path d="M59.227,17 L59.699,15.7 L61.989,15.7 L62.489,17 L63.746,17 L61.453,11.273 L60.23,11.273 L58,17 L59.227,17 Z M61.617,14.734 L60.055,14.734 L60.828,12.609 L61.618,14.734 L61.617,14.734 Z M68.117,17 L68.82,14.332 L69.535,17 L70.59,17 L71.922,12.852 L70.84,12.852 L70.047,15.57 L69.355,12.852 L68.297,12.852 L67.582,15.57 L66.805,12.852 L65.738,12.852 L67.051,17 L68.117,17 Z M74.391,17.094 C75.005,17.094 75.515,16.887 75.92,16.474 C76.325,16.062 76.527,15.542 76.527,14.914 C76.527,14.292 76.327,13.777 75.926,13.369 C75.525,12.962 75.01,12.758 74.383,12.758 C73.977,12.758 73.609,12.848 73.279,13.028 C72.9516526,13.2048745 72.6856193,13.4768351 72.516,13.808 C72.336,14.15 72.246,14.503 72.246,14.868 C72.246,15.344 72.336,15.748 72.516,16.08 C72.696,16.412 72.958,16.664 73.303,16.836 C73.648,17.008 74.01,17.094 74.391,17.094 Z M74.387,16.199 C74.1090953,16.2031961 73.8438798,16.082877 73.664,15.871 C73.469,15.652 73.371,15.337 73.371,14.926 C73.371,14.514 73.469,14.199 73.664,13.98 C73.8438798,13.768123 74.1090953,13.6478039 74.387,13.652 C74.673,13.652 74.913,13.762 75.107,13.98 C75.301,14.2 75.398,14.512 75.398,14.918 C75.398,15.335 75.301,15.652 75.108,15.871 C74.9290044,16.0829098 74.6643566,16.2033044 74.387,16.199 L74.387,16.199 Z M78.477,17 L78.477,15.121 C78.477,14.658 78.505,14.34 78.561,14.168 C78.6147422,13.9990169 78.7239772,13.8531353 78.871,13.754 C79.0213295,13.6501005 79.2002756,13.5955778 79.383,13.598 C79.5179113,13.5939992 79.6507222,13.6320949 79.763,13.707 C79.8706854,13.7819375 79.9513416,13.889596 79.993,14.014 C80.039,14.145 80.063,14.434 80.063,14.883 L80.063,17 L81.16,17 L81.16,14.422 C81.16,14.102 81.14,13.855 81.1,13.684 C81.0618077,13.5168351 80.9885219,13.3596967 80.885,13.223 C80.7645517,13.0744203 80.6078461,12.9593881 80.43,12.889 C80.2202434,12.7994433 79.9940529,12.7548183 79.766,12.758 C79.216,12.758 78.76,12.992 78.398,13.461 L78.398,12.851 L77.378,12.851 L77.378,17 L78.477,17 L78.477,17 Z M83.762,17.094 C83.996,17.094 84.229,17.036 84.459,16.92 C84.689,16.804 84.889,16.628 85.059,16.39 L85.059,17 L86.079,17 L86.079,11.273 L84.98,11.273 L84.98,13.336 C84.642,12.951 84.24,12.758 83.777,12.758 C83.272,12.758 82.854,12.941 82.523,13.307 C82.193,13.673 82.027,14.207 82.027,14.91 C82.027,15.598 82.197,16.133 82.537,16.518 C82.877,16.902 83.285,17.094 83.762,17.094 L83.762,17.094 Z M84.074,16.227 C83.757,16.227 83.509,16.083 83.332,15.797 C83.21,15.599 83.148,15.279 83.148,14.836 C83.148,14.424 83.236,14.116 83.412,13.908 C83.5706199,13.7094553 83.8118901,13.5950917 84.066,13.598 C84.335,13.598 84.555,13.702 84.726,13.912 C84.898,14.122 84.984,14.465 84.984,14.942 C84.984,15.368 84.896,15.689 84.719,15.904 C84.542,16.119 84.327,16.227 84.074,16.227 L84.074,16.227 Z M88.852,17.094 C89.307,17.094 89.687,16.989 89.99,16.779 C90.294,16.569 90.516,16.264 90.656,15.863 L89.562,15.68 C89.502,15.888 89.414,16.04 89.297,16.133 C89.1730736,16.2288263 89.0195626,16.278346 88.863,16.273 C88.6227147,16.2785791 88.3918095,16.179724 88.23,16.002 C88.061,15.821 87.973,15.568 87.965,15.242 L90.715,15.242 C90.73,14.401 90.56,13.777 90.203,13.369 C89.846,12.962 89.359,12.758 88.743,12.758 C88.193,12.758 87.738,12.952 87.379,13.342 C87.019,13.732 86.839,14.27 86.839,14.957 C86.839,15.533 86.977,16.009 87.25,16.387 C87.596,16.858 88.13,17.094 88.852,17.094 L88.852,17.094 Z M89.625,14.57 L87.985,14.57 C87.982,14.27 88.059,14.034 88.215,13.86 C88.3640317,13.6884692 88.5818395,13.5923991 88.809,13.598 C89.033,13.598 89.223,13.68 89.379,13.846 C89.535,14.011 89.617,14.253 89.625,14.57 L89.625,14.57 Z M92.66,17 L92.66,15.719 C92.66,15.013 92.69,14.549 92.752,14.329 C92.813,14.107 92.897,13.954 93.004,13.869 C93.1154442,13.7829203 93.253238,13.7380489 93.394,13.742 C93.554,13.742 93.725,13.802 93.91,13.922 L94.25,12.965 C94.0325359,12.8310194 93.7824202,12.7594095 93.527,12.758 C93.3594604,12.7555439 93.1948061,12.8017444 93.053,12.891 C92.913,12.979 92.757,13.163 92.582,13.441 L92.582,12.851 L91.562,12.851 L91.562,17 L92.66,17 L92.66,17 Z M95.95,17 L95.95,13.715 L96.77,13.715 L96.77,12.852 L95.95,12.852 L95.95,12.559 C95.95,12.348 95.984,12.205 96.053,12.131 C96.122,12.057 96.236,12.02 96.395,12.02 C96.556,12.02 96.724,12.04 96.898,12.082 L97.047,11.316 C96.747,11.223 96.441,11.176 96.129,11.176 C95.824,11.176 95.572,11.23 95.373,11.338 C95.1922962,11.4269548 95.0475753,11.5752054 94.963,11.758 C94.889,11.93 94.852,12.19 94.852,12.539 L94.852,12.852 L94.242,12.852 L94.242,13.715 L94.852,13.715 L94.852,17 L95.949,17 L95.95,17 Z M98.742,17.094 C99.016,17.094 99.275,17.03 99.522,16.902 C99.768,16.775 99.966,16.6 100.117,16.379 L100.117,17 L101.137,17 L101.137,12.852 L100.039,12.852 L100.039,14.602 C100.039,15.195 100.012,15.568 99.957,15.721 C99.8987642,15.8779176 99.7918979,16.0121136 99.652,16.104 C99.5041371,16.2065674 99.3279381,16.2604059 99.148,16.258 C99.0038794,16.263829 98.8616554,16.2235439 98.742,16.143 C98.6356588,16.0662727 98.5581801,15.9560418 98.522,15.83 C98.482,15.699 98.461,15.341 98.461,14.758 L98.461,12.852 L97.363,12.852 L97.363,15.477 C97.363,15.867 97.413,16.173 97.512,16.395 C97.611,16.615 97.771,16.788 97.992,16.91 C98.214,17.033 98.464,17.094 98.742,17.094 L98.742,17.094 Z M103.372,17 L103.372,11.273 L102.273,11.273 L102.273,17 L103.371,17 L103.372,17 Z M108.32,17.094 C108.943,17.094 109.413,16.957 109.73,16.684 C110.048,16.41 110.207,16.084 110.207,15.704 C110.207,15.354 110.092,15.082 109.863,14.887 C109.632,14.694 109.223,14.531 108.639,14.398 C108.054,14.266 107.712,14.163 107.613,14.09 C107.54,14.035 107.503,13.969 107.503,13.89 C107.503283,13.7990563 107.551064,13.7148707 107.629,13.668 C107.754,13.588 107.961,13.547 108.25,13.547 C108.48,13.547 108.656,13.59 108.78,13.676 C108.905427,13.7651477 108.994535,13.8965022 109.031,14.046 L110.066,13.856 C109.962,13.493 109.772,13.22 109.496,13.036 C109.22,12.85 108.798,12.758 108.23,12.758 C107.634,12.758 107.194,12.88 106.91,13.125 C106.637097,13.3461006 106.480196,13.6797921 106.484,14.031 C106.484,14.43 106.648,14.741 106.977,14.965 C107.214,15.126 107.775,15.305 108.66,15.5 C108.85,15.544 108.973,15.592 109.027,15.645 C109.079519,15.7008657 109.107592,15.7753679 109.105,15.852 C109.10828,15.9674429 109.054401,16.0770728 108.961,16.145 C108.818,16.249 108.604,16.301 108.321,16.301 C108.063,16.301 107.862,16.245 107.719,16.135 C107.568493,16.01225 107.467303,15.8393392 107.434,15.648 L106.332,15.816 C106.434,16.21 106.649,16.521 106.979,16.75 C107.308,16.98 107.755,17.094 108.32,17.094 L108.32,17.094 Z M112.266,17 L112.266,11.273 L111.168,11.273 L111.168,17 L112.266,17 Z M115.281,17.094 C115.896,17.094 116.406,16.887 116.811,16.474 C117.215,16.062 117.418,15.542 117.418,14.914 C117.418,14.292 117.218,13.777 116.816,13.369 C116.416,12.962 115.901,12.758 115.273,12.758 C114.867,12.758 114.499,12.848 114.17,13.028 C113.84,13.207 113.586,13.468 113.406,13.808 C113.226,14.15 113.136,14.503 113.136,14.868 C113.136,15.344 113.226,15.748 113.406,16.08 C113.586,16.412 113.848,16.664 114.193,16.836 C114.538,17.008 114.901,17.094 115.281,17.094 L115.281,17.094 Z M115.277,16.199 C114.999443,16.2028959 114.734656,16.0826047 114.555,15.871 C114.359,15.652 114.262,15.337 114.262,14.926 C114.262,14.514 114.359,14.199 114.555,13.98 C114.734656,13.7683953 114.999443,13.6481041 115.277,13.652 C115.564,13.652 115.804,13.762 115.998,13.98 C116.192,14.2 116.289,14.512 116.289,14.918 C116.289,15.335 116.192,15.652 115.998,15.871 C115.819228,16.0826367 115.555008,16.2030032 115.278,16.199 L115.277,16.199 Z M120.109,18.684 C120.482,18.684 120.789,18.644 121.033,18.566 C121.249541,18.5032594 121.449155,18.3925148 121.617,18.242 C121.775667,18.0829942 121.892479,17.887163 121.957,17.672 C122.037,17.43 122.078,17.064 122.078,16.574 L122.078,12.852 L121.051,12.852 L121.051,13.434 C120.717,12.984 120.294,12.758 119.781,12.758 C119.304336,12.7487635 118.847803,12.9499597 118.533,13.308 C118.199,13.676 118.031,14.207 118.031,14.902 C118.031,15.457 118.159,15.921 118.414,16.293 C118.74,16.764 119.181,17 119.738,17 C120.238,17 120.652,16.776 120.98,16.328 L120.98,16.934 C120.98,17.178 120.964,17.346 120.93,17.437 C120.89068,17.5521335 120.813016,17.6502729 120.71,17.715 C120.568,17.801 120.353,17.844 120.066,17.844 C119.842,17.844 119.678,17.804 119.574,17.727 C119.499,17.672 119.451,17.572 119.43,17.426 L118.176,17.273 C118.173584,17.3172942 118.17225,17.3616407 118.172,17.406 C118.172,17.776 118.319,18.081 118.613,18.322 C118.908,18.563 119.406,18.684 120.109,18.684 L120.109,18.684 Z M120.043,16.114012 C119.796651,16.1153551 119.563735,16.0018549 119.413,15.807 C119.242,15.602 119.156,15.28 119.156,14.84 C119.156,14.42 119.242,14.109 119.412,13.904 C119.569108,13.7062377 119.809475,13.5930805 120.062,13.598 C120.333,13.598 120.557,13.702 120.734,13.91 C120.911,14.118 121,14.437 121,14.867 C121,15.279 120.908,15.589 120.723,15.799 C120.555117,16.0006405 120.305364,16.115968 120.043,16.113 L120.043,16.114012 Z M124.253,17.094 C124.496,17.094 124.724,17.048 124.938,16.957 C125.161938,16.8586276 125.36571,16.7196147 125.539,16.547 C125.547,16.567 125.559,16.611 125.579,16.676 C125.619,16.819 125.655,16.927 125.684,17 L126.77,17 C126.680857,16.823391 126.614333,16.6362491 126.572,16.443 C126.537,16.27 126.52,16.001 126.52,15.637 L126.531,14.355 C126.531,13.879 126.482,13.551 126.385,13.373 C126.287,13.195 126.118,13.048 125.879,12.932 C125.639,12.816 125.275,12.758 124.785,12.758 C124.246,12.758 123.84,12.854 123.566,13.047 C123.293,13.24 123.1,13.537 122.988,13.937 L123.984,14.117 C124.052,13.924 124.141,13.79 124.25,13.713 C124.36,13.636 124.512,13.598 124.707,13.598 C124.997,13.598 125.193,13.643 125.297,13.732 C125.401,13.822 125.453,13.972 125.453,14.184 L125.453,14.293 C125.255,14.376 124.9,14.466 124.387,14.563 C124.007,14.635 123.715,14.721 123.514,14.818 C123.318979,14.9093823 123.155171,15.0561485 123.043,15.24 C122.929485,15.4291845 122.871283,15.6464042 122.875,15.867 C122.875,16.221 122.998,16.514 123.245,16.747 C123.49,16.977 123.827,17.094 124.254,17.094 L124.253,17.094 Z M124.582,16.32 C124.419594,16.3254873 124.261907,16.2648662 124.145,16.152 C124.03438,16.0493311 123.971971,15.9049193 123.972987,15.754 C123.972987,15.598 124.044,15.469 124.187,15.367 C124.281,15.305 124.48,15.241 124.785,15.176 C125.09,15.111 125.313,15.055 125.453,15.008 L125.453,15.227 C125.453,15.49 125.439,15.668 125.41,15.762 C125.365576,15.9088245 125.273359,16.0365915 125.148,16.125 C124.985279,16.2492997 124.786752,16.3176969 124.582,16.32 L124.582,16.32 Z M128.703,17 L128.703,15.121 C128.703,14.658 128.731,14.34 128.787,14.168 C128.840742,13.9990169 128.949977,13.8531353 129.097,13.754 C129.247329,13.6501005 129.426276,13.5955778 129.609,13.598 C129.74425,13.5937898 129.877442,13.6318946 129.99,13.707 C130.097313,13.7820943 130.177605,13.8897353 130.219,14.014 C130.266,14.145 130.289,14.434 130.289,14.883 L130.289,17 L131.387,17 L131.387,14.422 C131.387,14.102 131.367,13.855 131.327,13.684 C131.288507,13.5167542 131.214878,13.3596098 131.111,13.223 C130.990552,13.0744203 130.833846,12.9593881 130.656,12.889 C130.446243,12.7994433 130.220053,12.7548183 129.992,12.758 C129.442,12.758 128.987,12.992 128.625,13.461 L128.625,12.851 L127.605,12.851 L127.605,17 L128.703,17 L128.703,17 Z" id="Shape" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/header_template_vertical.png b/addons/website/static/src/img/snippets_options/header_template_vertical.png
deleted file mode 100644
index 15dc33fc232..00000000000
Binary files a/addons/website/static/src/img/snippets_options/header_template_vertical.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_options/header_template_vertical.svg b/addons/website/static/src/img/snippets_options/header_template_vertical.svg
new file mode 100644
index 00000000000..b38e7169e98
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_vertical.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
+  <defs>
+    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
+      <stop offset="0%" stop-color="#00A09D"/>
+      <stop offset="100%" stop-color="#00E2FF"/>
+    </linearGradient>
+    <rect id="path-29" width="234" height="50" x="0" y="5"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="header_template_vertical">
+    <g class="bg_ver">
+      <use fill="#000" fill-opacity=".14" xlink:href="#path-29"/>
+      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-29"/>
+    </g>
+    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(98 10)">
+      <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
+    </g>
+    <rect width="214" height="1" x="10" y="29" fill="#FFF" class="rectangle_ver" opacity=".375"/>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(64 39)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+      <g class="link" transform="translate(28)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+      </g>
+      <g class="link" transform="translate(56)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+      </g>
+      <g class="link" transform="translate(84)">
+        <rect width="23" height="4" class="rectangle" rx="1"/>
+      </g>
+    </g>
+    <g fill="#FFF" class="group" opacity=".804" transform="translate(10 17)">
+      <rect width="23" height="4" class="rectangle" rx="1"/>
+    </g>
+    <rect width="20" height="9" fill="#FFF" class="rectangle" rx="4.5" transform="translate(204 12)"/>
+  </g>
+</svg>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 147c3a46192..b16b24a3f6c 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -536,44 +536,62 @@
                        data-name="header_default_opt"
                        data-customize-website-views="website.template_header_default"
                        data-customize-website-variable="'default'"
-                       data-img="/website/static/src/img/snippets_options/header_template_default.png"/>
+                       data-img="/website/static/src/img/snippets_options/header_template_default.svg"/>
             <we-button title="Hamburger menu"
                        data-name="header_hamburger_opt"
                        data-customize-website-views="website.template_header_hamburger"
                        data-customize-website-variable="'hamburger'"
-                       data-img="/website/static/src/img/snippets_options/header_template_hamburger.png"/>
+                       data-img="/website/static/src/img/snippets_options/header_template_hamburger.svg"/>
             <we-button title="Vertical"
                        data-name="header_vertical_opt"
                        data-customize-website-views="website.template_header_vertical"
                        data-customize-website-variable="'vertical'"
-                       data-img="/website/static/src/img/snippets_options/header_template_vertical.png"/>
-            <we-button data-name="header_sidebar_opt"
+                       data-img="/website/static/src/img/snippets_options/header_template_vertical.svg"/>
+            <we-button title="Sidebar"
+                       data-name="header_sidebar_opt"
                        data-customize-website-views="website.template_header_sidebar, website.no_autohide_menu"
-                       data-customize-website-variable="'sidebar'">Sidebar</we-button>
-            <we-button data-name="header_slogan_opt"
+                       data-customize-website-variable="'sidebar'"
+                       data-img="/website/static/src/img/snippets_options/header_template_sidebar.svg"/>
+            <we-button title="Slogan"
+                       data-name="header_slogan_opt"
                        data-customize-website-views="website.template_header_slogan"
-                       data-customize-website-variable="'slogan'">Slogan</we-button>
-            <we-button data-name="header_contact_opt"
+                       data-customize-website-variable="'slogan'"
+                       data-img="/website/static/src/img/snippets_options/header_template_slogan.svg"/>
+            <we-button title="Contact"
+                       data-name="header_contact_opt"
                        data-customize-website-views="website.template_header_contact"
-                       data-customize-website-variable="'Contact'">Contact</we-button>
-            <we-button data-name="header_minimalist_opt"
+                       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'">Minimalist</we-button>
-            <we-button data-name="header_boxed_opt"
+                       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"
-                       data-customize-website-variable="'boxed'">Boxed</we-button>
-            <we-button data-name="header_centered_logo_opt"
+                       data-customize-website-variable="'boxed'"
+                       data-img="/website/static/src/img/snippets_options/header_template_boxed.svg"/>
+            <we-button title="Centered Logo"
+                       data-name="header_centered_logo_opt"
                        data-customize-website-views="website.template_header_centered_logo"
-                       data-customize-website-variable="'centered_logo'">Centered Logo</we-button>
-            <we-button data-name="header_image_opt"
+                       data-customize-website-variable="'centered_logo'"
+                       data-img="/website/static/src/img/snippets_options/header_template_centered_logo.svg"/>
+            <we-button title="Image"
+                       data-name="header_image_opt"
                        data-customize-website-views="website.template_header_image"
-                       data-customize-website-variable="'image'">Image</we-button>
-            <we-button data-name="header_hamburger_full_opt"
+                       data-customize-website-variable="'image'"
+                       data-img="/website/static/src/img/snippets_options/header_template_image.svg"/>
+            <we-button title="Hamburger Full"
+                       data-name="header_hamburger_full_opt"
                        data-customize-website-views="website.template_header_hamburger_full"
-                       data-customize-website-variable="'hamburger-full'">Hamburger Full</we-button>
-            <we-button data-name="header_magazine_opt"
+                       data-customize-website-variable="'hamburger-full'"
+                       data-img="/website/static/src/img/snippets_options/header_template_hamburger_full.svg"/>
+            <we-button title="Magazine"
+                       data-name="header_magazine_opt"
                        data-customize-website-views="website.template_header_magazine"
-                       data-customize-website-variable="'magazine'">Magazine</we-button>
+                       data-customize-website-variable="'magazine'"
+                       data-img="/website/static/src/img/snippets_options/header_template_magazine.svg"/>
         </we-select>
 
         <!-- Header Sidebar Template - Options -->
@@ -669,32 +687,47 @@
                   data-save-unit="rem"
                   data-dependencies="!header_effect_scroll_opt"/>
 
-        <we-select id="header_visibilities_list" string="Scroll Effect" data-dependencies="!header_sidebar_opt">
+        <we-select string="Scroll Effect" data-dependencies="!header_sidebar_opt">
+            <t t-set="header_effect_standard_label">Standard</t>
+            <t t-set="header_effect_scroll_label">Scroll</t>
+            <t t-set="header_effect_fixed_label">Fixed</t>
+            <t t-set="header_effect_disappears_label">Disappears</t>
+            <t t-set="header_effect_fadeout_label">Fade Out</t>
             <we-button id="option_header_visibility_standard"
+                       t-att-data-select-label="header_effect_standard_label"
+                       class="o_we_img_animate"
                        data-name="header_visibility_standard_opt"
                        data-select-class="o_header_standard"
                        data-customize-website-views="website.header_visibility_standard"
-                       string="Standard"/>
+                       data-img="/website/static/src/img/snippets_options/header_effect_standard.png"/>
             <we-button id="option_header_effect_scroll"
+                       t-att-data-select-label="header_effect_scroll_label"
+                       class="o_we_img_animate"
                        data-name="header_effect_scroll_opt"
                        data-select-class=""
                        data-customize-website-views=""
-                       string="Scroll"/>
+                       data-img="/website/static/src/img/snippets_options/header_effect_scroll.png"/>
             <we-button id="option_header_effect_fixed"
+                       t-att-data-select-label="header_effect_fixed_label"
+                       class="o_we_img_animate"
                        data-name="header_effect_fixed_opt"
                        data-select-class="o_header_fixed"
                        data-customize-website-views="website.header_visibility_fixed"
-                       string="Fixed"/>
+                       data-img="/website/static/src/img/snippets_options/header_effect_fixed.png"/>
             <we-button id="option_header_effect_disappears"
+                       t-att-data-select-label="header_effect_disappears_label"
+                       class="o_we_img_animate"
                        data-name="header_effect_disappears_opt"
                        data-select-class="o_header_disappears"
                        data-customize-website-views="website.header_visibility_disappears"
-                       string="Disappears"/>
+                       data-img="/website/static/src/img/snippets_options/header_effect_disappears.png"/>
             <we-button id="option_header_effect_fade_out"
+                       t-att-data-select-label="header_effect_fadeout_label"
+                       class="o_we_img_animate"
                        data-name="header_effect_fade_out_opt"
                        data-select-class="o_header_fade_out"
                        data-customize-website-views="website.header_visibility_fade_out"
-                       string="Fade Out"/>
+                       data-img="/website/static/src/img/snippets_options/header_effect_fade_out.png"/>
         </we-select>
 
         <we-select string="Menu Style" data-variable="header-links-style" data-reload="/">
@@ -766,22 +799,38 @@
         <we-select string="Layout"
             data-variable="footer-template"
             data-reload="/">
-            <we-button data-customize-website-views="website.footer_custom"
-                       data-customize-website-variable="'default'">Default</we-button>
-            <we-button data-customize-website-views="website.template_footer_descriptive"
-                       data-customize-website-variable="'descriptive'">Descriptive</we-button>
-            <we-button data-customize-website-views="website.template_footer_centered"
-                       data-customize-website-variable="'centered'">Centered</we-button>
-            <we-button data-customize-website-views="website.template_footer_links"
-                       data-customize-website-variable="'links'">Links</we-button>
-            <we-button data-customize-website-views="website.template_footer_minimalist"
-                       data-customize-website-variable="'minimalist'">Minimalist</we-button>
-            <we-button data-customize-website-views="website.template_footer_contact"
-                       data-customize-website-variable="'contact'">Contact</we-button>
-            <we-button data-customize-website-views="website.template_footer_call_to_action"
-                       data-customize-website-variable="'call_to_action'">Call-to-action</we-button>
-            <we-button data-customize-website-views="website.template_footer_headline"
-                       data-customize-website-variable="'headline'">Headline</we-button>
+            <we-button title="Default"
+                       data-customize-website-views="website.footer_custom"
+                       data-customize-website-variable="'default'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_default.svg"/>
+            <we-button title="Descriptive"
+                       data-customize-website-views="website.template_footer_descriptive"
+                       data-customize-website-variable="'descriptive'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_descriptive.svg"/>
+            <we-button title="Centered"
+                       data-customize-website-views="website.template_footer_centered"
+                       data-customize-website-variable="'centered'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_centered.svg"/>
+            <we-button title="Links"
+                       data-customize-website-views="website.template_footer_links"
+                       data-customize-website-variable="'links'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_links.svg"/>
+            <we-button title="Minimalist"
+                       data-customize-website-views="website.template_footer_minimalist"
+                       data-customize-website-variable="'minimalist'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_minimalist.svg"/>
+            <we-button title="Contact"
+                       data-customize-website-views="website.template_footer_contact"
+                       data-customize-website-variable="'contact'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_contact.svg"/>
+            <we-button title="Call-to-action"
+                       data-customize-website-views="website.template_footer_call_to_action"
+                       data-customize-website-variable="'call_to_action'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_call_to_action.svg"/>
+            <we-button title="Headline"
+                       data-customize-website-views="website.template_footer_headline"
+                       data-customize-website-variable="'headline'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_headline.svg"/>
         </we-select>
         <we-select string="Slideout Effect" data-variable="footer-effect" data-reload="/">
             <we-button string="Regular"