{"id":7493,"date":"2023-02-07T15:08:17","date_gmt":"2023-02-07T15:08:17","guid":{"rendered":"https:\/\/help.predictiveresponse.com\/?page_id=7493"},"modified":"2023-03-27T19:05:48","modified_gmt":"2023-03-27T19:05:48","slug":"designing-your-content-in-beeeditor","status":"publish","type":"page","link":"https:\/\/help.predictiveresponse.com\/?page_id=7493","title":{"rendered":"Designing Your Content in BeeEditor"},"content":{"rendered":"\n<p>Our drag-n-drop email editor makes it easy to create beautiful messages that can be used to send all sorts of email campaigns: a company newsletter, announce a new product, promote a sale, etc.&nbsp;<\/p>\n\n\n\n<p>It combines great ease of use with many features that give you full control on the design of your emails. Its drag-and-drop interface enables you to design a nice-looking message without any knowledge of HTML, and produces code that adapts automatically to small screens, such as that of a smartphone.<\/p>\n\n\n\n<h2 id=\"Structure\">Structure vs. content<\/h2>\n\n\n\n<p>For maximum design flexibility, the structure of the message is separated from its content. This means, for example, that you can have rows of content that use different designs for different sections of the message (e.g.&nbsp;full-width background colors, a different number of columns, etc.) without negatively impacting the responsiveness of the message on mobile devices.<\/p>\n\n\n\n<h2>Message editing stage &amp; properties panel<\/h2>\n\n\n\n<p>The editor is divided into two main areas: the main message editing <em>stage<\/em> on the left, and the <em>properties<\/em> panel on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"280\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture1.png\" alt=\"\" class=\"wp-image-7496\"\/><\/figure>\n\n\n\n<p>In general, you will be dragging and dropping content elements onto the <em>stage<\/em> and then editing their <em>properties<\/em>. This is true for entire structures (e.g. a single-column row) and individual content blocks (e.g. a text content block).<\/p>\n\n\n\n<p>When it comes to images, you can drag &amp; drop image files directly from your desktop onto an image content block. You can also upload them using the <em>File Manager<\/em> or use the URL of remotely hosted images.<\/p>\n\n\n\n<p>The properties panel is divided into three sections:<\/p>\n\n\n\n<ul><li><strong>Content<\/strong><br><em>This is where you will choose and edit the specific content elements that make up your message: buttons, images, text blocks, etc.<\/em><\/li><li><strong>Rows<\/strong><br><em>Here you can select different structural elements (e.g. a single-column vs. three-column row) to organize your content.<\/em><\/li><li><strong>Settings<\/strong><br><em>Here is where you will define some overall settings that affect the entire message. For example, a default font family.<\/em><\/li><\/ul>\n\n\n\n<h2>Content<\/h2>\n\n\n\n<p>The <em>Content<\/em> tab allows you to choose a new content element and add it to your message. Just drag and drop a content element (a button, an image, a text block, a transparent or solid divider, social media sharing, etc.) in the message area on the left.<\/p>\n\n\n\n<h2>Content properties<\/h2>\n\n\n\n<p>Clicking on a content element inside the message will make the content panel switch to&nbsp;<em>Content properties<\/em>&nbsp;mode, so you can change the settings of that particular content block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"340\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture2.png\" alt=\"\" class=\"wp-image-7497\"\/><\/figure>\n\n\n\n<p>If you click outside of a content element, instead, the <em>row <\/em>in which the content element is located will be selected and its properties will be available (more on this under <em>Rows<\/em> below).<\/p>\n\n\n\n<p>The&nbsp;<em>Content properties<\/em>&nbsp;area changes depending on the content element that has been selected. Some properties are available for any content type, while others are specific for certain content types. For instance, the letter spacing property is available only for content blocks where there\u2019s a text element, like Title, Text, Menu, Button, etc. This setting enables you to customize the spacing in pixels between letters, where 0 is the default spacing for the font in use.<\/p>\n\n\n\n<p><img loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/h1o-L1xbhuHKTgepNwIU3ei3XfxKIxm3PeLhl_s-Q5ExXxUM1HXEAaA6oquRV2Fxl7Fqc0OmBoGeaJgAkGZpm_qdr6jyAPuFXQJ5oCYRODQ_Z0AEjXI6QzxLIrmg5g0g14Urt2WP18rAflOQaZVnpG0\" width=\"544\" height=\"230\"><\/p>\n\n\n\n<p>Another example is the button block, where you will see a number of tools to help you style the button and link it to your desired action (open a web page, send an email, make a phone call, etc.). In the example shown below, for instance, the \u201cShow me how\u201d button has been selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"542\" height=\"481\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture4.png\" alt=\"\" class=\"wp-image-7501\"\/><\/figure>\n\n\n\n<p>The <em>properties<\/em> panel switches to <em>button<\/em> mode and allows you to set the button\u2019s width, background color, text color, alignment, roundness of the corners, padding around the text, \u2026 you name it. When the properties panel is longer then the height of the screen, a scroll bar appears on the right side.<\/p>\n\n\n\n<p>With buttons as well as many other content items, the editor gives you great control on the design of your email messages. Some of the controls, including <em>Content padding<\/em> and <em>Borders<\/em> have both a <em>simple<\/em> editing mode \u2013 where only one setting is shown \u2013 and an <em>advanced<\/em> editing mode, where more control is provided (e.g. specifying padding for the four sides of the object independently of each other).<\/p>\n\n\n\n<h2>Text editing<\/h2>\n\n\n\n<p>If you click inside a text content block, the text editor toolbar will appear directly on the editing stage. It gives you access to a number of text editing tools: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"272\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture5.png\" alt=\"\" class=\"wp-image-7502\"\/><\/figure>\n\n\n\n<p>Note that if you set the font family to <em>Global Font<\/em>, it will inherit the font family selected under the <em>BODY<\/em> tab. This allows you to change the font family for multiple elements at once just by changing that property in the <em>Body<\/em> tab.<\/p>\n\n\n\n<h2>Content settings<\/h2>\n\n\n\n<p>The properties panel displays different controls depending on which content element you selected. Here is a description of some of the most frequently used ones.<\/p>\n\n\n\n<h4>Padding<\/h4>\n\n\n\n<p>Padding settings can be configured both for all sides of the selected element&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"177\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture6.png\" alt=\"\" class=\"wp-image-7503\"\/><\/figure>\n\n\n\n<p>&#8230; or separately for each side.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"177\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture7.png\" alt=\"\" class=\"wp-image-7504\"\/><\/figure>\n\n\n\n<h4>Borders<\/h4>\n\n\n\n<p>Border settings can be configured both for all sides of the selected element&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"97\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture8.png\" alt=\"\" class=\"wp-image-7505\"\/><\/figure>\n\n\n\n<p>&#8230; or separately for each side of a button, column, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"177\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture9.png\" alt=\"\" class=\"wp-image-7506\"\/><\/figure>\n\n\n\n<h4>Dividers<\/h4>\n\n\n\n<p>Dividers help create visual separation between design elements. They can be transparent&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"204\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture10.png\" alt=\"\" class=\"wp-image-7507\"\/><\/figure>\n\n\n\n<p>&#8230; or visible. Here too, granular control on padding provides great design flexibility.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"279\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture11.png\" alt=\"\" class=\"wp-image-7508\"\/><\/figure>\n\n\n\n<h4>Color memory<\/h4>\n\n\n\n<p>As you pick colors for fonts, background colors, etc., the editor will learn and remember them, making them quickly accessible to style future content elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"337\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture12.png\" alt=\"\" class=\"wp-image-7509\"\/><\/figure>\n\n\n\n<h2>Merge Tags<\/h2>\n\n\n\n<p>Lead, contact, and campaign member fields can become merge fields in your campaign, allowing you to use them in your campaign emails.<\/p>\n\n\n\n<ul><li>Some standard fields are already available, such as \u2018Salutation,\u2019 \u2018First Name\u2019 and \u2018Last Name\u2019.<\/li><li>You can also use custom created lead, contact, and campaign member fields as merge fields.<\/li><li>You can add up to 20 custom fields for use in your email editions.<\/li><li>These custom fields will need to be mapped prior to being used as a merge field in a campaign email.<\/li><\/ul>\n\n\n\n<p><strong><a href=\"https:\/\/help.predictiveresponse.com\/?page_id=6026\" target=\"_blank\" rel=\"noreferrer noopener\">Learn how to use merge tags in BeeEditor<\/a><\/strong><\/p>\n\n\n\n<h2 id=\"rows\">Rows<\/h2>\n\n\n\n<p>The&nbsp;<em>Rows<\/em>&nbsp;panel includes different types of structural elements for your message. They allow you to create different sections of the message. Why different sections? Can\u2019t you just have different content blocks within the same section? You can, but that won\u2019t always work. Rows with different structures allow you to organize content in a way that is different from the preceding and following rows.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"389\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture13.png\" alt=\"\" class=\"wp-image-7510\"\/><\/figure>\n\n\n\n<p>For instance, you may need\u2026<\/p>\n\n\n\n<ul><li>a single-column row with a <em>hero <\/em>image to introduce your online store\u2019s new promotion<\/li><li>a three-column row below it to display some of the store\u2019s best-selling products;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"390\" height=\"101\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture14.png\" alt=\"\" class=\"wp-image-7511\"\/><\/figure>\n\n\n\n<p>You may also need to have different rows, even if they have the same structure, if you want them to have different row or content background color.<\/p>\n\n\n\n<p>Instead, if you need to switch to a different number of columns for an existing row, you\u2019ll be able to do so by using the \u201cCustomize Columns\u201d widget inside the row\u2019s properties.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"602\" height=\"171\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture15.png\" alt=\"\" class=\"wp-image-7513\"\/><\/figure>\n\n\n\n<p>Selecting a row will switch the properties panel to the row and column settings. The editor provides great flexibility and customization&nbsp;at both the&nbsp;row and column level.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"770\" height=\"509\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture16.png\" alt=\"\" class=\"wp-image-7514\"\/><\/figure>\n\n\n\n<p>To make message creation even easier and faster, you can clone entire Rows (for example, a picture, a button and a text block) with all of their settings and blocks. This allows what email designers call <em>modular design<\/em>: you create a module and then replicate it <em>n <\/em>times in the message.<\/p>\n\n\n\n<h4>Managing columns within rows<\/h4>\n\n\n\n<p>When you select a row, the row properties will have a \u201ccustomize columns\u201d section, where you can manage the columns inside that row, and apply additional settings.<\/p>\n\n\n\n<p>When you select a row, the row properties will have a \u201ccustomize columns\u201d section, where you can manage the columns inside that row, and apply additional settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"296\" height=\"161\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture17.png\" alt=\"\" class=\"wp-image-7515\"\/><\/figure>\n\n\n\n<h4>Adding a column<\/h4>\n\n\n\n<p>Clicking on <strong>+ Add new <\/strong>action will add a new column inside the row. The <strong>New Column<\/strong> is always added to the far right, with default size 2. The widget will automatically find the best resize option to adapt to the addition of a new column. The <strong>Minimum column width<\/strong> is <strong>2<\/strong>, and rows can have a maximum of 6 columns. When the maximum number of columns is reached, the <strong>+ Add new <\/strong>action disappears.<\/p>\n\n\n\n<h4>Deleting a column<\/h4>\n\n\n\n<p>A column can be removed from a row by clicking the <strong>Delete<\/strong> action in the top-right of that Column properties. When a column is deleted, the nearest column on the left gets its width. If the deleted column is the first on the left, the right column will take the width. If there is just one column, the <strong>Delete<\/strong> action is not visible.<\/p>\n\n\n\n<h4>Resizing columns<\/h4>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/dam.beefree.io\/wp-content\/uploads\/2022\/01\/columns.gif\" alt=\"\" width=\"885\" height=\"394\"\/><\/figure>\n\n\n\n<p>Columns can be resized by dragging the <strong>divider <\/strong>icon between two columns to the left or to the right. The stage will reflect the change in real-time as the user resizes the column, to preview the result even before letting go of the divider.<\/p>\n\n\n\n<h4>Other column settings<\/h4>\n\n\n\n<p>Additional settings at the column level within a row allow control on background color, padding and borders for the selected column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"780\" height=\"410\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture19.png\" alt=\"\" class=\"wp-image-7519\"\/><\/figure>\n\n\n\n<h4>Selecting rows and content<\/h4>\n\n\n\n<p>When you mouse over the message in the message editing area of the editor (the&nbsp;<em>stage<\/em>), the following happens&#8230;<\/p>\n\n\n\n<p>1. You mouse over a block of content (a button in the example below): the editor shows you an icon on the right side that allows you to drag that block of content elsewhere.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"207\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture20.png\" alt=\"\" class=\"wp-image-7520\"\/><\/figure>\n\n\n\n<p>2. You click on a block of content, and the editor will:<\/p>\n\n\n\n<ul><li>Show you two icons on the stage, which allow you to remove or clone that block of content.<\/li><li>Change the properties section on the right side of the editor to display a series of properties that you can set for that block of content.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"378\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture21.png\" alt=\"\" class=\"wp-image-7521\"\/><\/figure>\n\n\n\n<p>3. You mouse over an area that is free of content, i.e. the row in which the content is located. The editor will highlight it and show you an icon that allows you to drag that entire row elsewhere on the <em>stage<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"343\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture22.png\" alt=\"\" class=\"wp-image-7522\"\/><\/figure>\n\n\n\n<p>4. You click on a row, and the editor will:<\/p>\n\n\n\n<ul><li>Deselect any block of content that had been previously selected.<\/li><li>Select the row, and show you two icons that allow you to remove or clone the entire row and all its content.<\/li><li>Change the properties section on the right side of the editor to display a series of properties that apply to that column within the row. A row can contain more than one column.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"780\" height=\"440\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture23.png\" alt=\"\" class=\"wp-image-7523\"\/><\/figure>\n\n\n\n<h2 id=\"settings\">Settings<\/h2>\n\n\n\n<p>From this tab you can modify general settings that apply to the entire message:<\/p>\n\n\n\n<ul><li><strong>Content area width<\/strong>: this is the width of the area where content blocks are dropped. According to email marketing best practices, it should typically be set to 600px or less. Please note that this is the maximum width that will be used on larger devices. When the device\u2019s screen is smaller, the message will adjust automatically to it.<\/li><li><strong>Content area alignment<\/strong>: set the body of the email to be aligned to the center (default behavior) or to the left. This setting will not affect the alignment of the content blocks in the email.<\/li><li><strong>Background color<\/strong>: it&#8217;s the message background color. This setting is effective only for rows (and columns) where a color has not been specified. Otherwise, the background color specified for that content structure will be used.<\/li><li><strong>Content area background color<\/strong>: it&#8217;s the background color for the content area.&nbsp;This setting is effective only for rows and columns where a color has not been specified.<\/li><li><strong>Default font<\/strong>: it&#8217;s the default font that will be used when another font family has not been specified. This setting affects all text set to use the <em>global font<\/em>.<\/li><li><strong>Link color<\/strong>: it&#8217;s the link color. As above, this setting affects all text links set to use the default color.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"253\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture24.png\" alt=\"\" class=\"wp-image-7524\"\/><\/figure>\n\n\n\n<h2 id=\"dynamic\">Complex Elements using Dynamic Content<\/h2>\n\n\n\n<p>You can utilize the Dynamic Content feature in BeeEditor to save complex design elements for future use. Often these include email headings, social media icons, and email footers. Watch the below video to see how you can use Dynamic Content to save your content.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Dynamic Content\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/qwVUhERfuyg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 id=\"mobile\">Mobile optimization options<\/h2>\n\n\n\n<p>Often content in an email is organized in multiple columns. When viewed on a mobile device, those columns can become too narrow and lead to a sub-optimal reading experience. To guarantee a better experience while reading emails on mobile devices, the editor generates HTML code that makes columns stack vertically. This way, content is reorganized to make zooming unnecessary and is easy to scroll with a finger.<\/p>\n\n\n\n<p>Sometimes you may want to make changes to the default mobile optimization settings that the editor uses. There are plenty of different features you can use to do this. Let\u2019s go over the different options that can impact the mobile version of your design.<\/p>\n\n\n\n<h4>Do not stack on mobile<\/h4>\n\n\n\n<p>Although it usually helps, there are cases where the vertical stacking of columns may not lead to an optimal result.<\/p>\n\n\n\n<p>Typical scenarios include navigation bars, icons, and other horizontal design elements. For example, when using a row to display a navigation bar with text links, a vertical layout could take too much space, hiding important parts of the message or giving too much visibility at the top of the email to content that is not supposed to be that prominent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"233\" height=\"314\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture25.png\" alt=\"\" class=\"wp-image-7526\"\/><\/figure>\n\n\n\n<p>The <strong>Do not stack on mobile<\/strong> option is available inside Row properties, toggled off by default.<\/p>\n\n\n\n<p>This setting allows users of the editor to decide when to override the default stacking behavior. Email design best practices suggest a careful use of this display setting. A user-friendly vertical layout on mobile makes sense in most cases. As always, it is up to you and your creativity when and how to use this option.<\/p>\n\n\n\n<h4>Reverse stack order on mobile<\/h4>\n\n\n\n<p>In some cases, the columns stacked on mobile can work better in a reversed order. In this case, you can toggle on <strong>Reverse stack order on mobile<\/strong> inside the row properties.<\/p>\n\n\n\n<p>Here are two sections from an email message:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"856\" height=\"512\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture26.png\" alt=\"\" class=\"wp-image-7528\"\/><\/figure>\n\n\n\n<p>Here is how these two sections render on mobile by default:<\/p>\n\n\n\n<p><img loading=\"lazy\" width=\"187\" height=\"323\" src=\"https:\/\/lh6.googleusercontent.com\/RGNVxCS-JY8Vftn0Oh51qSgjX6UgGCiSHHDeadOn2qGwySZJ5aJcL0Ect5iFn2LEwVo9DvrvngpqoX6dM1r3AQmUW67izBJSjY8wYWnhosoZRcnsKaFNxXHiCAWUre5pmKkQ3SNiwLJV9tHEph3PMxg\"><\/p>\n\n\n\n<p>Here is how the email layout renders when you stack columns <strong>in reverse order<\/strong>.<\/p>\n\n\n\n<p><img loading=\"lazy\" width=\"187\" height=\"327\" src=\"https:\/\/lh5.googleusercontent.com\/zTF97Um2XmdJGKv12aozWiNpcC4Ah99VYCk6fZr8B_BpdNMnGT0ssd7lDGTz9WIY1KTCcqx8Xw9wdt-PKkYU6eB7mvnK-wLhoUbQYU61qcoP2sxFGd32_28iBb9H3SNcIs2JuYWPU1Wf5VB0SkuIwr0\"><\/p>\n\n\n\n<h4>Hide content on mobile or desktop<\/h4>\n\n\n\n<p>All content blocks in the editor include a <strong>Hide on<\/strong> setting in the content properties. To use it, scroll down until you see the \u201cBlock options\u201d section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"351\" height=\"253\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture26-1.png\" alt=\"\" class=\"wp-image-7530\"\/><\/figure>\n\n\n\n<p>This setting is perfect for creating device-specific parts for your email, from things like optimized buttons for mobile, up to entire sections with different layouts on mobile versus desktop. In this last case, you may also want to hide an entire row on a device by using the same <strong>Hide on <\/strong>setting.<\/p>\n\n\n\n<p>Hiding a row will apply the \u201cHide on\u201d property to all the blocks inside that row. For this reason, when you hide a row:<\/p>\n\n\n\n<ul><li>You won\u2019t be able to change the \u201cHide on\u201dsetting for a block that is part of a hidden row.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"407\" height=\"110\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture27.png\" alt=\"\" class=\"wp-image-7532\"\/><\/figure>\n\n\n\n<ul><li>Any \u201cHide on\u201d setting applied to blocks will be reset. The editor will ask you for a confirmation in this case.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"361\" height=\"265\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture28.png\" alt=\"\" class=\"wp-image-7533\"\/><\/figure>\n\n\n\n<p>Once you\u2019ve finished hiding content, you can check the results by going into the message preview.<\/p>\n\n\n\n<h4>Mobile design mode<\/h4>\n\n\n\n<p>With Mobile design mode, you can <strong>easily design emails and pages for mobile<\/strong> without the need to switch back and forth between editing and preview. You\u2019ll be able to move between <strong>desktop and mobile view <\/strong>to see and edit content. This way, you understand how your design looks on mobile <strong>without leaving the editor to go into preview<\/strong>.<\/p>\n\n\n\n<p>You will see two icons in the upper left corner, one for desktop and one for mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"363\" height=\"289\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture29.png\" alt=\"\" class=\"wp-image-7534\"\/><\/figure>\n\n\n\n<p>The desktop view will use the full width available in your browser window. Clicking on the Mobile icon will reduce the work area width to 320px. This view retains most of the editor&#8217;s functionality, so you can continue working as usual, while getting an immediate look at the mobile rendering of your email.<\/p>\n\n\n\n<p><img loading=\"lazy\" width=\"454\" height=\"337\" src=\"https:\/\/lh6.googleusercontent.com\/vdHKDFEpFSYvGjKiFJrVELlD79Js6_VNRMMR4YWISYnNN9H7WcMiFnbtReefbf8xt80l8o8lb_zA_3K9I5F-aNjD7K8w5nyp8rIHlWDaG5Jjw5C2PQ--FDpcKx8D0QAYGG-_AsFRQcb-tlFZJj33fLM\"><\/p>\n\n\n\n<p>Another advantage of Mobile design mode is that you can instantly <strong>visualize the results of mobile optimization options<\/strong> &#8211; such as do not stack\/reverse stack\/hide on mobile &#8211; and stretch out the editor&#8217;s design flexibility. Using these settings becomes <strong>more convenient<\/strong>, as you can immediately see their effect in the desktop and mobile views.<\/p>\n\n\n\n<p>An important note: with Mobile design mode, you are still working on a single template with the same content. These are not two separate versions of the template. Unless a content has a device-specific setting, the desktop view will reflect edits made in the mobile view.<\/p>\n\n\n\n<p>When using the <strong>Hide on<\/strong> setting, you&#8217;ll get an additional aid: a &#8220;Visibility&#8221; icon next to the Desktop and Mobile icons.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"219\" height=\"157\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture30.png\" alt=\"\" class=\"wp-image-7535\"\/><\/figure>\n\n\n\n<p>When <strong>Visibility is ON<\/strong> (the default behavior)<\/p>\n\n\n\n<ul><li>the editor will display content blocks set as hidden for the current device;<\/li><li>Those blocks will have a blurred effect to signify that they are hidden for that device;<\/li><li>They will also have a small icon in the outline of the block when hovering with the mouse;<\/li><\/ul>\n\n\n\n<p>When <strong>Visibility is OFF<\/strong><\/p>\n\n\n\n<ul><li>elements set as hidden for the current view are removed<\/li><li>the template will appear as the version of the email\/page meant for mobile audiences<\/li><\/ul>\n\n\n\n<h4>Editor limitations in mobile view<\/h4>\n\n\n\n<p>When in mobile view, the editor retains most of its functionalities, with a few exceptions:<\/p>\n\n\n\n<ul><li>You cannot change text in text elements &#8211; <em>text blocks, titles, buttons<\/em> -, and the text toolbar won&#8217;t pop up, so you can only make changes in the editor&#8217;s sidebar.<\/li><li>You cannot change the content area width; it can only be changed in the desktop view;<\/li><li>You can add and delete columns in a row, but you cannot resize them.<\/li><\/ul>\n\n\n\n<h2 id=\"image_files\">The File Manager<\/h2>\n\n\n\n<h4>What it does<\/h4>\n\n\n\n<p>The editor includes a&nbsp;built-in file manager. The file manager is the component that you will use to browse, search, and select&nbsp;the&nbsp;images and&nbsp;documents that you wish to use in your email message.<\/p>\n\n\n\n<p>With the handy file manager you can:<\/p>\n\n\n\n<ul><li>Browse, search, and sort existing files<\/li><li>Switch between list and grid view<\/li><li>Import new files<\/li><li>Create new folders<\/li><li>Preview and&nbsp;insert images into your message<\/li><\/ul>\n\n\n\n<h4>How it looks<\/h4>\n\n\n\n<p>The file manager will open over the editor, covering the entire working area. This allows you to browse your files without worrying about your screen size or resolution.&nbsp;<\/p>\n\n\n\n<p>You will find a top section with actions and navigation helpers, with&nbsp;most of the space used&nbsp;to list your files and&nbsp;the information you need to work with them. By default, folders and images are shown in <em>Grid view<\/em>. If you switch to <em>List view<\/em>, it will be used next time you open the File Manager. Here is a visual example of images within a folder, in <em>Grid view<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"369\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture31.png\" alt=\"\" class=\"wp-image-7537\"\/><\/figure>\n\n\n\n<p>And here is the same folder, in <em>List view<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"369\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture32.png\" alt=\"\" class=\"wp-image-7538\"\/><\/figure>\n\n\n\n<h4>How you access it<\/h4>\n\n\n\n<p>The file manager will load&nbsp;in several scenarios.<\/p>\n\n\n\n<p><strong>a.<\/strong>&nbsp;When you click on the&nbsp;<em>Browse<\/em>&nbsp;button&nbsp;in&nbsp;an image placeholder, which is&nbsp;displayed&nbsp;when&nbsp;you drag and drop an image content block into a message.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"302\" height=\"100\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture33.png\" alt=\"\" class=\"wp-image-7539\"\/><\/figure>\n\n\n\n<p><strong>b.<\/strong>&nbsp;When you click the&nbsp;<em>Change image<\/em>&nbsp;button in the image properties panel:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"123\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture34.png\" alt=\"\" class=\"wp-image-7540\"\/><\/figure>\n\n\n\n<p><strong>c.<\/strong>&nbsp;When you click on&nbsp;<em>Link file<\/em>&nbsp;when working with&nbsp;images and buttons:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"398\" height=\"170\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture35.png\" alt=\"\" class=\"wp-image-7541\"\/><\/figure>\n\n\n\n<h4>How to upload files<\/h4>\n\n\n\n<p>The quickest&nbsp;way to upload a file into the file manager is to drag it from your computer to the file manager window, dropping it anywhere on the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"373\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture36.png\" alt=\"\" class=\"wp-image-7542\"\/><\/figure>\n\n\n\n<p>You can also:<\/p>\n\n\n\n<ul><li>Browse and upload from your computer using the <strong>Upload<\/strong> button.<\/li><li>Import from an external application using the Import button (see more below), if this feature has been enabled.<\/li><li>Search and import free stock photos using the <strong>Search free photos<\/strong> button, if this feature has been enabled.<\/li><\/ul>\n\n\n\n<p>Note that there is an <strong>upload<\/strong> <strong>limit<\/strong>: the maximum allowed&nbsp;file size is <strong>12MB<\/strong>.<\/p>\n\n\n\n<h4>How to import files from other applications<\/h4>\n\n\n\n<p>The&nbsp;<strong><em>Import<\/em><\/strong>feature allows you to connect external applications like DropBox, Google Drive, Instagram and more, and import your files.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"373\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture37.png\" alt=\"\" class=\"wp-image-7543\"\/><\/figure>\n\n\n\n<h4>How to browse or search files<\/h4>\n\n\n\n<p>To locate your desired image or document, browse your folders and order their content by&nbsp;<em>name<\/em>, <em>date<\/em>,&nbsp;<em>size<\/em>&nbsp;or&nbsp;<em>type<\/em>&nbsp;by clicking on the sort&nbsp;labels on top of the list.<\/p>\n\n\n\n<p>An arrow icon next to this labels means that this is the current filter, and its orientation will tell you the order, ascending or descending.<\/p>\n\n\n\n<p>Too many files in the selected folder? Click on the&nbsp;<em>lens<\/em>&nbsp;icon to run a search. Results will be filtered on the fly.&nbsp;Mind that this search is performed only in the&nbsp;current folder, and not in your entire repository.<\/p>\n\n\n\n<h4>How to use files<\/h4>\n\n\n\n<p>When you move&nbsp;your cursor over a file or folder, that row will be highlighted and the available action icons will be shown on the right side:<\/p>\n\n\n\n<ul><li><em>Preview<\/em> for files<\/li><li><em>Delete<\/em> for both files and folders<\/li><\/ul>\n\n\n\n<p>If an action is momentarily not available, you will be notified&nbsp;by the tooltip text of the icon, such as when you try to delete a folder that contains files, because only empty folders can be deleted.<\/p>\n\n\n\n<p>If you want to delete&nbsp;multiple files or folders, use the checkboxes to select them, the delete action will be shown on top of the list. Only elements that can be deleted will have a selectable check-box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"117\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture38.png\" alt=\"\" class=\"wp-image-7544\"\/><\/figure>\n\n\n\n<h4>How to organize&nbsp;folders<\/h4>\n\n\n\n<p>You can create the folder structure you prefer to organize your files. To add new folders, use the <em>Add folder<\/em>&nbsp;icon.<\/p>\n\n\n\n<p>For your folder names you can use letters (upper and lower case), numbers, spaces, periods (.), hyphens (-), or underscores (_).<\/p>\n\n\n\n<p>To navigate to the parent folder, use the top breadcrumb. Clicking the home icon will take you to your&nbsp;root folder.<\/p>\n\n\n\n<h2 id=\"image_editor\">The image editor<\/h2>\n\n\n\n<h4>Editing images<\/h4>\n\n\n\n<p>The email editor includes an image editor that allows you to easily crop, rotate, resize, apply filters\/frames, add stickers&#8230; and much more &#8211; to any image, without leaving the editor.<\/p>\n\n\n\n<p><img loading=\"lazy\" width=\"624\" height=\"372\" src=\"https:\/\/lh4.googleusercontent.com\/NpCxejKmP5Ue-cdlAroJZjcjtg9INFT5oYNDgNWoVD3YpLE4ur7G3MOhyDyFdW0gu-JK0_BMkOrH4hBL5budngELsaiV6kdpxZY6GWU8DGEGtP5zU54Kdb4_f5jtUIYHRc_RYdLcrnN3TGHp8VIHDck\"><\/p>\n\n\n\n<h4>Accessing the image editor<\/h4>\n\n\n\n<p>When you select an image in the editor an &#8220;Apply effects &amp; more&#8221; button is shown. Click on it to have access to a tool that allows you to edit the image in a variety of ways.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"450\" height=\"83\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture39.png\" alt=\"\" class=\"wp-image-7545\"\/><\/figure>\n\n\n\n<p>The editor has a lot of cool features, from filters to resizing &amp; cropping tools.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"393\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture40.png\" alt=\"\" class=\"wp-image-7547\"\/><\/figure>\n\n\n\n<p>You can quickly and easily change the image size&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"578\" height=\"365\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture41.png\" alt=\"\" class=\"wp-image-7548\"\/><\/figure>\n\n\n\n<p>&#8230; apply some cool stickers:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"576\" height=\"363\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture42.png\" alt=\"\" class=\"wp-image-7549\"\/><\/figure>\n\n\n\n<p>There are also a number of predefined filters that can help you very quickly change the look of the image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"576\" height=\"363\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture43.png\" alt=\"\" class=\"wp-image-7550\"\/><\/figure>\n\n\n\n<h2>Additional blocks &amp; widgets<\/h2>\n\n\n\n<h4>Icons<\/h4>\n\n\n\n<p>When designing an email, several layouts can be created by combining icons or small images, often with some copy.&nbsp; That is why the editor has an Icons content block for creating icon-based content. This block is also not restricted by row structures, allowing you more flexibility in your designs.<\/p>\n\n\n\n<p>You can use Icons to create visual bullet lists, ratings, properties, logo galleries, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"693\" height=\"181\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture44.png\" alt=\"\" class=\"wp-image-7552\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"348\" height=\"63\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture45.png\" alt=\"\" class=\"wp-image-7553\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"464\" height=\"105\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture46.png\" alt=\"\" class=\"wp-image-7554\"\/><\/figure>\n\n\n\n<p>To get started, drag the Icons content block into a row. A placeholder will fill the content block; click on it to open the icon options in the sidebar. Click on <em>Add new icon<\/em> to add the first icon. A predefined icon will populate the block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"302\" height=\"138\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture47.png\" alt=\"\" class=\"wp-image-7555\"\/><\/figure>\n\n\n\n<p>Then, click on <em>Change image<\/em> to select an image from the file manager. Once done, you may edit the image with our image editor by clicking on Apply effects &amp; more. Repeat this process until you complete your icon collection.<\/p>\n\n\n\n<p>If you use the toggle to open <em>More options<\/em>, you&#8217;ll find a couple of options specific to Icons content blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"304\" height=\"303\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture48.png\" alt=\"\" class=\"wp-image-7556\"\/><\/figure>\n\n\n\n<p>Adding the <em>Icon text <\/em>will create an accompanying section of text that you can position on top, bottom, left, or right of the icon. From this panel, you may also add a link for the icon and the image&#8217;s alternate text.<\/p>\n\n\n\n<p>If you have multiple icons, you can change their order by clicking and dragging them in the panel.<\/p>\n\n\n\n<p><img loading=\"lazy\" width=\"307\" height=\"261\" src=\"https:\/\/lh3.googleusercontent.com\/-v1D4fOIgm2tTwMvDhXcFm5TtKU19GlmNYy-GEF8I-eZvvHqqrv0kiaoHc5fnj14rKGvOf8VaO0EFxlWsFpUnPtTo8GjKQmnh2VubCFrXZ2RNYd-FO32ms_k54hDiio58HCbYd0FxOfSJ3AMJbHR644\"><\/p>\n\n\n\n<p>Scrolling down through the properties, you will see a few settings that are specific for Icons.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"328\" height=\"266\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture49.png\" alt=\"\" class=\"wp-image-7557\"\/><\/figure>\n\n\n\n<p>You can pick a size for the icons, decide the spacing between them, and apply additional padding that will affect all the icons.<\/p>\n\n\n\n<h4>Title<\/h4>\n\n\n\n<p>When creating an email or a web page, you typically need to add titles to establish a hierarchy in your content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"291\" height=\"353\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture50.png\" alt=\"\" class=\"wp-image-7558\"\/><\/figure>\n\n\n\n<p>With our editor, you can create title blocks so that the output HTML will render those titles with heading tags (H1, H2, H3). Using heading tags in HTML is important for <strong>accessibility<\/strong>, as users that need a screen reader can navigate emails and web pages according to their headings, listen to a list of all headings, and skip to a desired heading to begin reading from that point.<\/p>\n\n\n\n<p>To add a Title, use the Title block available in the Content tab of the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"287\" height=\"140\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture51.png\" alt=\"\" class=\"wp-image-7559\"\/><\/figure>\n\n\n\n<p>Once dragged into the stage, a title block will be created.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"451\" height=\"90\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture52.png\" alt=\"\" class=\"wp-image-7560\"\/><\/figure>\n\n\n\n<p>As you can see, the block has a \u201clite\u201d version of the text toolbar, similar to the one available for the Button block. Let\u2019s have a look at the content properties for this block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"286\" height=\"353\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture53.png\" alt=\"\" class=\"wp-image-7561\"\/><\/figure>\n\n\n\n<ul><li>The \u201cTitle\u201d property is used to select the proper heading style (H1\/H2\/H3).<br><\/li><li>The settings highlighted in red are the ones that are missing from the usual text toolbar and are applied to the whole block.<br><\/li><li>The settings highlighted in green are applied to the whole block, unless the same setting has been changed for the whole block or for a part using the controls on the text toolbar. In that case, the color selected with the toolbar won\u2019t be overridden.<\/li><\/ul>\n\n\n\n<h4>Using Title for desktop vs mobile<\/h4>\n\n\n\n<p>By using two separate Title blocks and applying the hide on desktop\/mobile setting, you can have titles with the same title tag (e.g. H1) but with different font styling. This comes super-handy if you need to differentiate title size and style on mobile and desktop, while keeping the same heading tag.<\/p>\n\n\n\n<h2 id=\"smart\">Smart Links<\/h2>\n\n\n\n<p>Using our email editor, you can add&nbsp;<strong>View as Page<\/strong>&nbsp;and&nbsp;<strong>Forward to Friend<\/strong>&nbsp;links directly from the template builder.<\/p>\n\n\n\n<p>The&nbsp;<strong>View as Page<\/strong>&nbsp;option allows email recipients to view your email in their browser. This gives recipients the ability to view your email if they have HTML disabled or images turned off in their email client.<\/p>\n\n\n\n<p>When an email is forwarded using the&nbsp;<strong>Forward to Friend&nbsp;<\/strong>option, it retains the email stylization, subscriber-specific links, merge tags, and allows for the forwarding of an email to multiple contacts at once.<\/p>\n\n\n\n<p>When the email has been forwarded with an email client instead of the \u201cforward to a friend\u201d link, the recipient may see broken formatting. When emails are forwarded by an email client, the HTML code is converted to use that email client\u2019s proprietary code. As all email clients render emails differently, there\u2019s no guarantee the email client that receives the forward will understand that code, resulting in broken formatting. Using the \u201cForward to a friend\u201d option ensures the recipients will receive the original email layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"664\" height=\"280\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/27.jpg\" alt=\"\" class=\"wp-image-7612\"\/><\/figure>\n\n\n\n<h3><strong>Adding the Smart Link Token:<\/strong><\/h3>\n\n\n\n<p>From the design step within the email editor, place text such as \u201cView Online\u201d or \u201cForward to a Friend\u201d in a text box, button, or row. Highlight the text, and select the link icon from the toolbar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"503\" height=\"275\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/28.1.jpg\" alt=\"\" class=\"wp-image-7614\"\/><\/figure>\n\n\n\n<p>Next, enter the token as you would an URL using the https protocol (screenshot below), then click OK.<\/p>\n\n\n\n<ul><li>The token for&nbsp;<strong>View as Page<\/strong>&nbsp;is {{$vap}}<\/li><li>The token for&nbsp;<strong>Forward to a Friend&nbsp;<\/strong>is {{$fwd}}<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"712\" height=\"461\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/29.jpg\" alt=\"\" class=\"wp-image-7615\"\/><\/figure>\n\n\n\n<h2 id=\"video\">Video<\/h2>\n\n\n\n<p>The video content block allows you to share your video content easily in your emails. You only need to copy and paste the URL of your video from <em>YouTube <\/em>or <em>Vimeo<\/em>, and the editor will do the rest: it will automatically grab the cover image for the video, overlay a <em>Play <\/em>icon on top of it, and link it to the actual video content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"305\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture54.png\" alt=\"\" class=\"wp-image-7563\"\/><\/figure>\n\n\n\n<p>The &#8220;Content properties&#8221; section will ask you to provide a video URL from <em>YouTube <\/em>or <em>Vimeo<\/em>, the popular video hosting services that are currently supported (if you would like us to support other video hosting services, let us know).<\/p>\n\n\n\n<p>Once you insert a valid URL, the content block in the editing panel will display the cover image for the video with a <em>Play <\/em>icon overlaid on top of it. You can edit the <strong>type<\/strong>, <strong>color<\/strong>, and <strong>size <\/strong>of the <em>Play <\/em>icon to change the way it looks. For example, on some videos a white icon will work better than a black one, or vice versa.<\/p>\n\n\n\n<p>Note that the editor cannot access password-protected videos to get the cover image.<\/p>\n\n\n\n<p>Additional notes about embedding video in email:<\/p>\n\n\n\n<ul><li>This feature does not embed the actual video in the email, but rather links to it in a smart way.<\/li><li>The reason why the actual video content is not embedded into the message is that, unfortunately, it doesn&#8217;t work very well. Many email clients do not support it.<\/li><li>Additionally, many emails are opened on mobile devices and viewing videos on a mobile device can cause substantial data usage in addition to a poor user experience due to the quality of the data connection.<\/li><\/ul>\n\n\n\n<h2 id=\"undo_redo_timeline\">Undo, Redo &amp; Timeline<\/h2>\n\n\n\n<p>Ever made a mistake and wanted to undo it? What if you wanted to go back to several edits ago? And what if you changed your mind after all and decided that the latest changes worked?<\/p>\n\n\n\n<p>The <em>Undo <\/em>feature allows you to rewind and fast-forward to any point in your recent edit history. When changes are detected, a compact <em>Undo <\/em>widget displays in the bottom left corner of the stage, as shown below.<\/p>\n\n\n\n<p>Clicking on the <em>Undo <\/em>or the <em>Redo <\/em>arrows allows you to undo the latest edit or re-apply it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"359\" src=\"https:\/\/help.predictiveresponse.com\/wp-content\/uploads\/2023\/02\/Picture56.png\" alt=\"\" class=\"wp-image-7566\"\/><\/figure>\n\n\n\n<p>The <strong><em>Timeline <\/em><\/strong>icon, instead, loads an additional panel (shown above) that allows you to browse through the most recent changes. For each recent change, it displays:<\/p>\n\n\n\n<ul><li>An icon to identify the content element type (an image, text, etc.)<\/li><li>A description of what changed, giving the new property value (if any)<\/li><li>The exact time it happened<\/li><\/ul>\n\n\n\n<p>These details help determine what modification was applied, and if desired\u2026 rewind the message to that state.<\/p>\n\n\n\n<p>The <em>Undo <\/em>widget currently displays the last 15 edits in the timeline, but you can always rewind to the <em>Message Opened <\/em>state to undo all changes since the message was initially opened in the editor.<\/p>\n\n\n\n<h2 id=\"custom_html\">Custom HTML<\/h2>\n\n\n\n<p>The Custom HTML content block allows you to add your own HTML code to an email message that you are designing with the editor. It\u2019s as simple to use as a text block.<\/p>\n\n\n\n<p>HTML experts: 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 &#8220;responsiveness&#8221; of the message). Make sure to use HTML that is email compliant and responsive.<\/p>\n\n\n\n<p><strong>Adding live content from external providers<\/strong><\/p>\n\n\n\n<p>Product recommendations, dynamic ads, personalized maps, countdowns\u2026 all of this advanced content can 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.<\/p>\n\n\n\n<p><strong>How do I add my HTML code?<\/strong><\/p>\n\n\n\n<p>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:<\/p>\n\n\n\n<p>The newly inserted content block will show some default placeholder text. Click on it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area:<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><strong>Which HTML tags are allowed?<\/strong><\/p>\n\n\n\n<p>The HTML content will automatically correct some issues like HTML tags that are left open, and strip out code that cannot be used, such as script tags or iframe tags (this code tags are not allowed by the major part of email clients, can cause deliverability problems or security risks).<\/p>\n\n\n\n<p><strong>Allowed tags list:<\/strong><\/p>\n\n\n\n<p>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<\/p>\n\n\n\n<p><strong>Allowed attributes list:<\/strong><\/p>\n\n\n\n<ul><li>general attributes: style, id, class, data-*, title<\/li><li>a: href, name, target<\/li><li>img: align, alt, border height, hspace, src, vspace, width, usemap<\/li><li>table: align, bgcolor, border, cellpadding, cellspacing, width<\/li><li>tbody: align, valign<\/li><li>td: align, bgcolor, colspan, height, rowspan, valign, width<\/li><li>tr: align, bgcolor, valign<\/li><li>tfoot: align, valign<\/li><li>th: align, bicolor, colspan, height, rowspan, valign, width<\/li><li>thead: align, valign<\/li><li>li: type<\/li><li>map: name<\/li><li>area: alt, coords, href, shape, target<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Our drag-n-drop email editor makes it easy to create beautiful messages that can be used to send all sorts of email campaigns: a company newsletter, announce a new product, promote a sale, etc.&nbsp; It combines great ease of use with many features that give you full control on the design of your emails. Its drag-and-drop [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=\/wp\/v2\/pages\/7493"}],"collection":[{"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7493"}],"version-history":[{"count":25,"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=\/wp\/v2\/pages\/7493\/revisions"}],"predecessor-version":[{"id":7720,"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=\/wp\/v2\/pages\/7493\/revisions\/7720"}],"wp:attachment":[{"href":"https:\/\/help.predictiveresponse.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}