Skip to main content

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.

Updated over 3 weeks ago

Prerequisites

Before getting started, ensure you have:

Required Permissions:

Users must have one of the following roles:

  • Marketing

  • Marketing Analyst

  • Operator

  • Owner

Body

  1. In the Designer, click Body in the right-side menu.

  2. Update the default styles (these apply to every piece of content unless overridden):

    • Text color

    • Background color(s)

    • Fonts

    • Link color + link styling (underline vs not)

    • Content alignment + content width (recommended: 600px)

  3. For email designs, set Preheader text (the short summary text shown after the subject line in many inboxes).

📌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.

Available content blocks include:

  • Columns, Button, Divider, Heading, HTML, Image, Menu, Social, Text, Video

Add a content block

  1. Choose the block you want.

  2. Drag it into the desired section in the builder.

  3. Click the block to open its settings and customize it.

Columns

Use Columns to create layouts like: image + text + button, multi-column content sections, etc.

  1. Drag Columns onto the designer.

  2. Select a column layout in the content editor.

3. Click Add Content.

4. Choose content blocks to place inside the columns.

5. Drag/drop content into the columns.

6. Resize columns by dragging the center divider bar.

7. Adjust padding, background, and border color in Column Properties.

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.

Button

Buttons are best for prominent CTAs (ex: “Buy Now”, “Learn More”, “Contact Us”).

1. Drag Button content block onto the designer in the desired area.

2. Edit the button text and format using the toolbar.

3. In the button settings, select an Action Type:

Action Types

  • Open Website

    • Provide a destination URL

    • Choose whether it opens in a new tab (recommended)

  • Send Email

    • Configure:

      • Mail to (recipient email)

      • Subject (subject line of the email)

      • Body (email body content)

  • Call Phone Number

    • Provide the phone number to populate on click

    • For example: 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

    • Provide the phone number that will be used to prefill the message

Button Options

Use button options to set background/text colors, alignment, and auto width

Divider (and Spacer)

Dividers create separation between sections.

  1. Drag Divider into place.

  2. In the Divider content block settings configure:

    • Width

    • Line type (solid/dashed/dotted)

    • Thickness

    • Color

    • Alignment

Create a spacer (no visible line):

  • Set line thickness = 0

  • Adjust top/bottom padding to achieve the spacing you want

Heading

Use Heading for section titles and hierarchy.

  1. Drag Heading into position.

  2. Enter text directly and format with the toolbar (including links/emojis).

  3. In settings, configure:

    • Heading type (H1–H4)

    • Font family/size

    • Color

    • Alignment

    • Line height

    • Link behavior (inherit Body styles vs custom)

Tip: Use one H1 per email/page for the main title.

HTML

Use HTML for custom markup.

  1. Drag HTML into place.

  2. Paste your HTML in the block settings.

Image

  1. Drag Image into place.

  2. Add an image via:

    • URL (paste into URL field)

    • Upload (Upload Image → Media Library → Upload)

    • Media Library (select an existing file)

    • Stock Photo Library (search and drag into block)

  1. Edit the image:

    • Click Apply Effects & More

    • Adjust width, alignment, alt text

  2. To make the image clickable:

    • Choose an Action Type

    • Provide the required destination details

Menu

  1. Drag the Menu content block into place.

  2. Click Add New Item.

  3. For each item, set:

    • Display text

    • Action type

    • Destination

    • Target

  4. Style the menu:

    • Layout (horizontal/vertical)

    • Separator (ex: | or -)

Menu Example:
​

Formatting hack: Emoji separators

  • Add an emoji in a temporary text block, copy it, paste into the Separator field, then delete the temporary text block.

Social

Use Social to link to social accounts.

  1. Drag the Social content block into place.

  2. Choose icon style.

  3. Click icons to include, then paste each social URL.

  4. Adjust icon spacing.

Text

  1. Drag the Text content block into place.

  2. Enter content directly and format using the toolbar.

  3. Use settings to adjust text color, alignment, and line height.

Video

Adds a video link + thumbnail/preview image (from a Vimeo or YouTube URL).

  1. Drag the Video content block into place.

  2. Paste the video URL.

  3. Customize play icon type/color/size.

Note: Most email clients will not play video inline; common best practice is using a GIF thumbnail linking to the video URL.

Blocks

Save custom blocks

Save reusable sections you’ve created so you can reuse them in campaigns and landing pages.

  1. Create/edit a block in Campaign Builder.

  2. Click the block, then select Save.
    ​

  3. Enter:

    • Category Name (block name)

    • Optional Tags (for organization/search)
      ​

  4. Access saved blocks in the left panel under Blocks.
    ​

  5. Rename/edit tags by hovering the block and clicking the (...) menu.

Personalization & Discounts

Personalization macros

  1. Click Personalization.

  2. Review the macro list and descriptions.
    ​

  3. Click the copy icon for the macro you want.

  4. Click OK.

  5. Paste the macro into your email/page.

⚠️ Emails: Unsubscribe Macro Mandatory
Include the unsubscribe macro in the footer of every email template or it won’t send.

Discount macros

  1. Click Discount.

  2. Select from discounts already configured in the Discounts section.
    ​

  3. Copy the discount macro.

  4. Click OK.

  5. Paste into your email/page.

Copy, Delete, and Move Content Blocks

Copy & Delete (2 ways)

Method 1

  1. Click into a block.

  2. Use the quick actions in the bottom-right (copy/delete/selection).

Method 2

  1. Click into a block.

  2. Use the content settings menu icons in the top-right (trash/copy).

Move a block

  1. Click the Selection tool.

  2. Drag the block to the desired location.

Troubleshooting

Issue: My global styling changes aren’t applying everywhere
​Solution: Confirm you edited Body settings (global). If a section still differs, check that the specific block isn’t overriding Body defaults in its block settings.

Issue: My email won’t send
​Solution: Ensure the unsubscribe macro is included in the footer of the email template.

FAQ

Can I style one section differently than the rest of the email/page?
Yes. Update global defaults in Body, then override styles in the specific content block settings for that section.

Do videos play inside emails?
Usually no. Most providers block inline playback; link out to the video with a thumbnail/GIF instead.

Need Help?

If you need assistance, reach out to AIQ Support anytime via the chat widget within your AIQ Dashboard.

Did this answer your question?