{"id":15270,"date":"2019-11-05T21:44:42","date_gmt":"2019-11-05T21:44:42","guid":{"rendered":"http:\/\/www.glitnir.com\/?page_id=15270"},"modified":"2019-11-08T15:13:24","modified_gmt":"2019-11-08T15:13:24","slug":"custom-html","status":"publish","type":"page","link":"https:\/\/www.glitnir.com\/index.php\/using-the-editor\/custom-html\/","title":{"rendered":"Working with custom HTML"},"content":{"rendered":"<div id=\"pl-15270\"  class=\"panel-layout\" ><div id=\"pg-15270-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-15270-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-15270-0-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<div><span class=\"wysiwyg-font-size-large\">Overview<\/span><\/div>\n<div>The Custom HTML content block allows you to easily add your own HTML code to an email message that you are designing. It\u2019s as simple to use as a text block.<\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<p class=\"info-box\"><strong>HTML experts only:\u00a0<\/strong>Using your own code may affect how the message is rendered in email clients, preventing it from adjusting to the screen size (i.e. the \"responsiveness\" of the message). Make sure to use HTML that is email compliant\u00a0and responsive.<\/p>\n<div><\/div>\n<div><span class=\"wysiwyg-font-size-large\">Why using custom code<\/span><\/div>\n<div>There are many scenarios in which it makes sense to add your own HTML code:<\/div>\n<div><\/div>\n<div><\/div>\n<div><strong>Adding more customized content<\/strong><\/div>\n<div>You are not limited by a set of predefined parameters and can, therefore, have more granular control of the styles applied.<\/div>\n<div><\/div>\n<div><\/div>\n<div><strong>Adding HTML 5 video, anchor links, etc.<\/strong><\/div>\n<div>You can now add content that is not available as a standard content element in the editor (HTML 5 video, anchor links, etc.).<\/div>\n<div><\/div>\n<div><\/div>\n<div><strong>Adding advanced effects with CSS<\/strong><\/div>\n<div>Get creative with animations! Animation effects are not widely supported by the email clients but managed correctly they can help your message\u00a0get viral.<\/div>\n<div><\/div>\n<div><\/div>\n<div><strong>Adding live content from external providers<\/strong><\/div>\n<div>Product recommendations, dynamic ads, personalized maps, countdowns\u2026 all of this advanced content can now be easily included in a message created with the editor. Just copy and paste the code provided to you by the vendor that you are working with.<\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><span class=\"wysiwyg-font-size-large\">How do\u00a0I add my HTML code?<\/span><\/div>\n<div>To add your code just drag an HTML content element into your message. It can be positioned alone, with other HTML content items, or mixed with other types of content:<\/div>\n<div><\/div>\n<div><img src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005730091\/dragg_HTML.jpg\" alt=\"\" \/><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div>The newly inserted content block will show some default placeholder text. Click on\u00a0it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area:<\/div>\n<div><\/div>\n<div><img src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005730111\/default_content.jpg\" alt=\"\" \/><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div>Paste your own HTML code or write it directly in the editing area. The system will highlight your syntax and indent your code to make it more readable.<\/div>\n<div><\/div>\n<div><img src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005688752\/custom_code.jpg\" alt=\"\" \/><\/div>\n<div><\/div>\n<div><\/div>\n<div>\n<div><\/div>\n<div><\/div>\n<div><span class=\"wysiwyg-font-size-large\">Which HTML tags are allowed?<\/span><\/div>\n<div>The HTML content will\u00a0automatically correct some issues\u00a0like HTML tags that are left open, and strip out code that cannot be used, such as script tags or iframe tags (these code tags are not allowed by the major part of email clients, can cause deliverability problems or security risks for the editor on the applications that run it).<\/div>\n<div><\/div>\n<div><\/div>\n<div><strong>Allowed tags list:<\/strong><\/div>\n<pre>a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var<\/pre>\n<div><\/div>\n<div><strong>Allowed attributes list:<\/strong><\/div>\n<pre><strong>general attributes:<\/strong> style, id, class, data-*, title<\/pre>\n<pre><strong>a:<\/strong> href, name, target<\/pre>\n<pre><strong>img:<\/strong> align, alt, border height, hspace, src, vspace, width, usemap<\/pre>\n<pre><strong>table:<\/strong> align, bgcolor, border, cellpadding, cellspacing, width<\/pre>\n<pre><strong>tbody:<\/strong> align, valign<\/pre>\n<pre><strong>td:<\/strong> align, bgcolor, colspan, height, rowspan, valign, width<\/pre>\n<pre><strong>tr:<\/strong> align, bgcolor, valign<\/pre>\n<pre><strong>tfoot:<\/strong> align, valign<\/pre>\n<pre><strong>th:<\/strong> align, bicolor, colspan, height, rowspan, valign, width<\/pre>\n<pre><strong>thead:<\/strong> align, valign<\/pre>\n<pre><strong>li:<\/strong> type<\/pre>\n<pre><strong>map:<\/strong> name<\/pre>\n<pre><strong>area:<\/strong> alt, coords, href, shape, target<\/pre>\n<pre><\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Overview The Custom HTML content block allows you to easily add your own HTML code to an email message that you are designing. It\u2019s as simple to use as a text block. &nbsp; HTML experts only:\u00a0Using your own code may affect how the message is rendered in email clients, preventing it from adjusting to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15226,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15270"}],"collection":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/comments?post=15270"}],"version-history":[{"count":5,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15270\/revisions"}],"predecessor-version":[{"id":15414,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15270\/revisions\/15414"}],"up":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15226"}],"wp:attachment":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/media?parent=15270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}