Visual Designer: Emails & Landing Pages

the visual designer gives you the ability to craft emails and mobile landing pages that you can send to customers to via campaigns let's dive into the different sections below body we recommend starting here as you build your emails and landing pages in the designer, click on the body button from the right side menu this section gives you the power to change the overall settings in this section, any changes to these settings will apply to every piece of content you can change the default settings text color, background colors, fonts, link color + link styling (underline vs not) content alignment & content width (we recommend 600px for best results) for email design preheader text this is the short summary text that follows the subject line when viewing an email from the inbox making changes to specific content you can change the settings of the specific content block as well if you want the text color, content background color, etc to be different than the default this can be accomplished in the specific content block settings please see below for more information content blocks use content blocks to add different types of content to your pages the available content blocks are columns, button, divider, heading, html, image, menu, social, text, video to add a new content block, click on the content block you would like to use and drag it to the desired section in the builder after a block has been placed, use the content menu to customize the block to fit your design you can also click an existing block to access its editing capabilities columns use a columns content block to add a new column layout example you can create a section with an image with a caption and button after you add or click a columns block, you edit and change to column content properties to use a columns content block, follow these steps drag the columns content block onto the designer in the desired position select your desired layout of the column from the content editor 3\ click the add content button in the designer 4\ select the desired content from the content blocks 5\ drag and drop into the designer 6\ to change the size of the column layout, select the bar in the middle and drag it to the desired width 7\ content padding, background color, and border color can be changed in column properties button buttons give you the poewr to include a prominent call to action (cta) such as a “buy now” or "learn more" link to use a button content block, follow these steps 1\) drag the button content block onto the designer in the desired area 2\) add or edit your button text and use the editing toolbar to format as needed 3\) determine the button's action in the content block settings under action type , select the desired action to occur when a customer clicks the button action types open website when a user clicks on this button, it will bring them to a specific website when the action type is open website , you must input the url where users will be directed to you must also indicate if the url will show up in a new tab or redirect witin the current tab we recommend selecting "new tab" for a better user experience send email when a user clicks on the button, pre populated email that your user can send out will appear when the action type is send email , you will need to input the mail to , subject , and body fields mail to this is the email address your user will use to initiate contact subject this is the subject line of the email body this is the body of the text inside the email call phone number when a user clicks on the button, a phone number that the user can call will automatically appear when the action type is call phone numbe r, you must input the phone number you want to populate when the user clicks on the button i e your button is "contact us" you can use the call phone number action type the button will populate your stores main phone number when clicked send sms similar to the call phone number action type, when a user clicks on the button, it will auto populate a text message with a prefilled phone number when the action type is send sms , you will need to input the phone number you want to populate when the user clicks on the button 4\) to change the background and text colors of the button, alignment of the text and auto width, go to the button options inside the button content block divider dividers create distinct sections in your content to use a divider content block, follow these steps 1\) drag the divider content block into the desired position 2\) in the divider content block settings, choose your divider’s width, thickness, style type, color, and alignment width this changes the width of the divider line this section changes the appearance of the divider line type choose between a solid, dashed, or dotted line type line thickness adjust the numbers to get a thicker divider line line color change the color of the divider line align changes the alignment of the divider creating a spacer if you do not want a visible line, but need spacing between content blocks, set the line thickness to 0, then adjust the top and bottom padding until you get the desired spacing heading use a heading content block to add header text to your content after you add or click a heading block, enter your text directly in the designer to use a heading content block, follow these steps 1\) drag the heading content block onto the designer to the desired position 2\) add or edit your text and use the editing toolbar to format it as needed within the editing toolbar, you can also hyperlink your heading and add emojis 3\) in the heading content block settings, you can continue to format your heading block heading type these are your header tags think of them as a hierarchy based on importance; the above being more important than the below h1 defines the most important heading, and h4 defines the least we recommend using one h1 tag per page/email this should represent the main heading/subject font family select the font you would like the heading to reflect font size change the font size of the heading color change the color of the heading text text align change the alignment of the heading line height if your heading takes up two lines, this adjusts the spacing in between the lines links inherit body styles if this setting is turned on, any heading that is hyperlinked will take the same format as what is set up as the overall body style if this setting is turned off, you can change the color of the hyperlink, as well as turn on underlined text vs not html use a html content block for customization to use an html content block, follow these steps 1\) drag the html content block onto the designer where you would like the block to go 2\) in the html content box settings, input the html code image to use an image content block, follow these steps 1\) drag the image content block onto the email where you would like the block to go 2\) upload or enter a new image, use a pre existing image from your media library, or use our stock photo library to bring your messaging to life using url copy and paste the url into the url box uploading an image click the blue "upload image" button image button from the image content settings when the media library pops appears, click on the green "upload" button drag or click to upload the desired images optional add image tags to find uploaded images easier click the upload button use a pre existing image click the blue "upload image" button image button from the image content settings when the media library appears, find the file name and click the green select button using our stock photography library go to the image section search for the image you would like to find drag and drop the image into the image content block 3\) edit an image by clicking the "apply effects & more" button you also have the power to make changes to auto width, alignment, and add alternative text inside the image content block settings 4\) to create clickable images that redirect customers to a destination when clicked, select the desired action type and enter in the needed information that follows menu to use a menu content block, follow these steps 1\) drag the menu content block onto the designer where you would like the block to go 2\) click the add new item section inside the menu settings content block 3\) enter the text that will appear in your menu bar, along with the action type, destination, and target to add more sections, click the add new item button at the bottom 4\) after menu items have been entered, format the menu by utilizing the style settings in the menu content block layout change the menu format from horizontal to vertical separator adjust how the menu is separated for example | or example of a menu formatting hack adding emojis as menu separators if you want to use an emoji as a separator, create a text box to find and add the emoji you would like the use as the separator copy the emoji, then paste it into the separator settings box then delete the text box social use a social content block to add social icons that link to your social media accounts; give recipients the power to quickly find and follow you on different platforms to use a social content block, follow these steps 1\) drag the social content block onto the designer where you would like the block to go 2\) select the icon style type 3\) click on the icons to include once clicked, enter the the appropriate social url 4\) the social content settings also gives you the power to adjust the alignment and icon spacing icon spacing is the width of the space between each icon text use a text content block to add paragraph text after you add or click a text block, enter your text directly in the designer to use a text content block, follow these steps 1\) drag the text content block onto the designer where you would like the block to go 2\) add or edit your text and use the editing toolbar to format as needed 3\) edit the overall text color, alignment, and line height in the text box settings video use a video content block to add a video link we’ll automatically provide a thubmnail or preview image when you add the link to the video's url to use a video content block, follow these steps 1\) drag the video content block onto the designer where you would like the block to go 2\) input a vimeo or youtube url into the url field and the video will populate 3\) edit the play icon type, play icon color, and play icon size note email service providers ultimately decide whether or not a linked video can play in email 99% of the time, videos will not be able to be played inside the email body it's common to manage this by using a gif that links out to the video url blocks the blocks section is another version of the columns and menu content blocks images the images section gives you the power to access a rich stock photography library to use the stock photography library go to the image section search for the image you would like to find drag and drop into image content block personalization & discounts to use the personalization macros 1\) click the personalization button 2\) a popup modal will appear with tool tips and descriptions of each available macro 3\) click the copy icon next to the desired macro 4\) click the ok button 5\) paste the macro into the email/page emails unsubscribe macro mandatory please keep in mind that the email unsubscribe link macro must appear in the footer of every email template for compliance your email will not be sent if it is not present to use the discount macros 1\) click the discount button 2\) a popup modal will appear with every discount you have entered for your company in the discounts section of the software 3\) click the copy icon next to the discount you would like to use 4\) click the ok button 5\) paste the discount in copy, delete, and move content blocks copy & delete copy and/or delete content blocks in two different ways 1\) click into the content block the copy, delete, and selection tool will appear in the bottom right corner of the content block 2\) click into the content block and view the content settings menu a trash can and copy button is available in the top right corner move content block to move a content block, click on the selection tool and drag the content to the desired location within the email/page 🎓 learn at your own pace stay ahead with every release visit aiq academy to deepen your marketing know how and master the platform aiq academy catalog aiq academy marketing content