diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index 87dbb5b16ad..8703c6c5f32 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -78,7 +78,11 @@ def is_multilang_url(path, langs=None):
 
 def slugify(s, max_length=None):
     if slugify_lib:
-        return slugify_lib.slugify(s, max_length)
+        # There are 2 different libraries only python-slugify is supported
+        try:
+            return slugify_lib.slugify(s, max_length=max_length)
+        except TypeError:
+            pass
     spaceless = re.sub(r'\s+', '-', s)
     specialless = re.sub(r'[^-_A-Za-z0-9]', '', spaceless)
     return specialless[:max_length]
diff --git a/addons/website_mail/static/src/img/blocks/block_three_columns.png b/addons/website_mail/static/src/img/blocks/block_three_columns.png
new file mode 100644
index 00000000000..dd50e0336d3
Binary files /dev/null and b/addons/website_mail/static/src/img/blocks/block_three_columns.png differ
diff --git a/addons/website_mail/static/src/img/blocks/block_two_columns.png b/addons/website_mail/static/src/img/blocks/block_two_columns.png
new file mode 100644
index 00000000000..55a3f0c1c99
Binary files /dev/null and b/addons/website_mail/static/src/img/blocks/block_two_columns.png differ
diff --git a/addons/website_mail/views/snippets.xml b/addons/website_mail/views/snippets.xml
index 89bac693437..35932f6f7c3 100644
--- a/addons/website_mail/views/snippets.xml
+++ b/addons/website_mail/views/snippets.xml
@@ -5,7 +5,7 @@
 
     <div class="scroll" t-ignore="1">
         <ul class="nav navbar-nav nav-tabs">
-          <li class="active"><a href="#snippet_email_structure" data-toggle="tab">Basic Email</a></li>
+          <li class="active"><a href="#snippet_email_structure" data-toggle="tab">Email Design</a></li>
           <li><a href="#snippet_email_feature" data-toggle="tab">Advanced Email Features</a></li>
         </ul>
         <div class="tab-content">
@@ -13,6 +13,56 @@
 <div id="snippet_email_structure" class="tab-pane fade in active">
 
 
+    <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
+            <span class="oe_snippet_thumbnail_title">Text Block</span>
+        </div>
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <h2 style="text-align: center">
+                                A Great Headline
+                            </h2>
+                            <h3 style="text-align: center">
+                                A good subtitle
+                            </h3>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <div style="padding:0px 5px">
+                                <p style="overflow:hidden">
+                                    A great way to catch your reader's attention is to tell a story.
+                                    Everything you consider writing can be told as a story.
+                                </p>
+                                <p style="overflow:hidden">
+                                    <strong>Great stories have personality</strong>. Consider telling 
+                                    a great story that provides personality. Writing a story 
+                                    with personality for potential clients will asist with 
+                                    making a relationship connection. This shows up in small
+                                    quirks like word choices or phrases. Write from your point 
+                                    of view, not from someone else's experience.
+                                </p>
+                                <p style="overflow:hidden">
+                                    <strong>Great stories are for everyone even when only written for
+                                    just one person</strong>. If you try to write with a wide general
+                                    audience in mind, your story will ring false and be bland. 
+                                    No one will be interested. Write for one person. If it’s genuine
+                                    for the one, it’s genuine for the rest.
+                                </p>
+
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+
     <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
@@ -95,125 +145,34 @@
     </div>
 
 
-    <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
+    <div data-snippet-id="three-columns" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
-            <span class="oe_snippet_thumbnail_title">Big Message</span>
-        </div>
-        <div class="oe_snippet_body" style="padding:0px; margin:0px">
-            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
-                <tbody>
-                    <tr>
-                        <td valign="top" style="width:600px">
-                            <div style="padding:0px 5px">
-                                <h1 style="text-align: center">Sell Online. Easily.</h1>
-                                <p style="overflow:hidden">
-                                    Write one sentence to convince visitor about your message.
-                                </p>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-
-
-    <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
-            <span class="oe_snippet_thumbnail_title">Text Block</span>
-        </div>
-        <div class="oe_snippet_body" style="padding:0px; margin:0px">
-            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
-                <tbody>
-                    <tr>
-                        <td valign="top" style="width:600px">
-                            <h2 style="text-align: center">
-                                A Great Headline
-                            </h2>
-                            <h3 style="text-align: center">
-                                A good subtitle
-                            </h3>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td valign="top" style="width:600px">
-                            <div style="padding:0px 5px">
-                                <p style="overflow:hidden">
-                                    A great way to catch your reader's attention is to tell a story.
-                                    Everything you consider writing can be told as a story.
-                                </p>
-                                <p style="overflow:hidden">
-                                    <strong>Great stories have personality</strong>. Consider telling 
-                                    a great story that provides personality. Writing a story 
-                                    with personality for potential clients will asist with 
-                                    making a relationship connection. This shows up in small
-                                    quirks like word choices or phrases. Write from your point 
-                                    of view, not from someone else's experience.
-                                </p>
-                                <p style="overflow:hidden">
-                                    <strong>Great stories are for everyone even when only written for
-                                    just one person</strong>. If you try to write with a wide general
-                                    audience in mind, your story will ring false and be bland. 
-                                    No one will be interested. Write for one person. If it’s genuine
-                                    for the one, it’s genuine for the rest.
-                                </p>
-
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-
-
-    <div data-snippet-id="hr" data-selector-children=".oe_structure, [data-oe-type=html]">
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
-            <span class="oe_snippet_thumbnail_title">Separator</span>        
+            <img class="oe_snippet_thumbnail_img" src="/website_mail/static/src/img/blocks/block_two_columns.png"/>
+            <span class="oe_snippet_thumbnail_title">Two Columns</span>            
         </div>
         <div class="oe_snippet_body" style="padding:0px; margin:0px">
             <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
                 <tbody>
                     <tr>
-                        <td valign="top" style="width:600px">
-                            <div style="padding:0px 5px">
-                                <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0"/>
-                            </div>
+                        <td valign="top" style="width:300px">
+                            <img width="275" style="display:block;border:none;min-height:50px" src="/website/static/src/img/desert_thumb.jpg"/>
                         </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-
-
-    <div data-snippet-id="big-picture" data-selector-children=".oe_structure, [data-oe-type=html]">
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
-            <span class="oe_snippet_thumbnail_title">Big Picture</span>          
-        </div>
-        <div class="oe_snippet_body" style="padding:0px; margin:0px">
-            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
-                <tbody>
-                    <tr>
-                        <td valign="top" style="width:600px">
-                            <h2 style="text-align: center; padding:0px 5px">A Punchy Headline</h2>
+                        <td valign="top" style="width:300px">
+                            <img width="275" style="display:block;border:none;min-height:50px" src="/website/static/src/img/deers_thumb.jpg"/>
                         </td>
                     </tr>
                     <tr>
-                        <td valign="top" style="width:600px">
-                            <img width="500" style="display:block;border:none;min-height:250px;margin:0 auto;" src="/website/static/src/img/big_picture.png"/>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td valign="top" style="width:600px">
-                            <p style="text-align: center; overflow:hidden">
-                                <h3 style="text-align: center; padding:0px 5px">A Small Subtitle</h3>
+                        <td valign="top" style="width:300px">
+                            <h3 style="text-align: center; padding:0px 5px">Feature One</h3>
+                            <p style="overflow:hidden">
+                                Choose a vibrant image and write an inspiring paragraph
+                                about it. It does not have to be long, but it should
+                                reinforce your image.
                             </p>
-                            <p style="text-align: center; overflow:hidden">
+                        </td>
+                        <td valign="top" style="width:300px">
+                            <h3 style="text-align: center; padding:0px 5px">Feature Two</h3>
+                            <p style="overflow:hidden">
                                 Choose a vibrant image and write an inspiring paragraph
                                 about it. It does not have to be long, but it should
                                 reinforce your image.
@@ -228,7 +187,7 @@
 
     <div data-snippet-id="three-columns" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_three_columns.png"/>
+            <img class="oe_snippet_thumbnail_img" src="/website_mail/static/src/img/blocks/block_three_columns.png"/>
             <span class="oe_snippet_thumbnail_title">Three Columns</span>            
         </div>
         <div class="oe_snippet_body" style="padding:0px; margin:0px">
@@ -276,12 +235,69 @@
         </div>
     </div>
 
+
+    <div data-snippet-id="hr" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
+            <span class="oe_snippet_thumbnail_title">Separator</span>        
+        </div>
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <div style="padding:0px 5px">
+                                <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0"/>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
 </div>
 
 
 <div id="snippet_email_feature" class="tab-pane fade">
 
 
+    <div data-snippet-id="big-picture" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
+            <span class="oe_snippet_thumbnail_title">Big Picture</span>          
+        </div>
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <h2 style="text-align: center; padding:0px 5px">A Punchy Headline</h2>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <img width="500" style="display:block;border:none;min-height:250px;margin:0 auto;" src="/website/static/src/img/big_picture.png"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <p style="text-align: center; overflow:hidden">
+                                <h3 style="text-align: center; padding:0px 5px">A Small Subtitle</h3>
+                            </p>
+                            <p style="text-align: center; overflow:hidden">
+                                Choose a vibrant image and write an inspiring paragraph
+                                about it. It does not have to be long, but it should
+                                reinforce your image.
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+
     <div data-snippet-id="pricing" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_comparison.png"/>
@@ -373,6 +389,30 @@
     </div>
 
 
+    <div data-snippet-id="text-image" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
+            <span class="oe_snippet_thumbnail_title">Big Message</span>
+        </div>
+        <div class="oe_snippet_body" style="padding:0px; margin:0px">
+            <table cellspacing="0" cellpadding="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px 5px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:600px">
+                            <div style="padding:0px 5px">
+                                <h1 style="text-align: center">Sell Online. Easily.</h1>
+                                <p style="overflow:hidden">
+                                    Write one sentence to convince visitor about your message.
+                                </p>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+
     <div data-snippet-id="cta" data-selector-children=".oe_structure, [data-oe-type=html]">
         <div class="oe_snippet_thumbnail">
             <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>