Overview

Originally designed as an email-centric tool, the builder has evolved in response to user feedback. Recognizing that many customers were also using the platform to create landing pages—often running into compatibility issues—the team developed a version of the builder optimized for web page design. This specialized Page builder is tailored to overcome the constraints typically faced when designing for email clients.

Email vs. Pages Content

The Page builder offers more freedom in design because it doesn't have to contend with the rendering limitations of email clients. Notable differences include:

• Form Content Block: The Page builder has a dedicated block for creating forms, offering a vital tool for lead generation or user input.

• Block Identifier: This toggle feature enables internal or anchor links within the content blocks, allowing for easy navigation across the page.

• Video and Custom HTML: The Page builder provides more options for embedding video content and does not validate or remove any custom HTML code, giving you more control over your design.

Rows

In addition to content differences, the Row options in the Page builder offer some extra features:

• Video Backgrounds: Unlike in email designs, you can use video backgrounds to create a more dynamic visual experience.

• More Columns: The Page builder allows for a greater number of columns per row compared to the email builder, providing more layout options.

Settings

The settings tab in the Page builder includes features optimized for web pages:

• Wider Content Area: Given that web pages are often displayed on larger screens, the Page builder allows for content area widths of up to 1440px.

• Favicon: This feature lets you upload a favicon (PNG, JPEG, or GIF formats), making it easier for users to identify your tab among others. You can upload or import the favicon through the file manager by clicking "Add favicon".

• Block Identifier: This toggle feature enables internal or anchor links within the content blocks, allowing for easy navigation across the page.

• Video and Custom HTML: The Page builder provides more options for embedding video content and does not validate or remove any custom HTML code, giving you more control over your design.

Overview

The email builder's "Dark Mode Preview" toggle in Preview mode lets you simulate how your email designs will look on devices with dark mode activated. Given the variety in dark mode behavior across different email clients, this feature provides a general approximation of the dark mode experience for end-users.

Utility and Limitations

Although the Dark Mode Preview is a useful tool for initial design checks, it shouldn't replace in-depth testing across multiple email clients. It's tested rigorously with standard content blocks but may give different outcomes for custom HTML blocks. Also, note that the builder does not automatically optimize designs for dark mode at this time. Different email clients have varied ways of interpreting dark mode, and many don't yet support methods for overriding these settings.

How Dark Mode Affects Your Emails

• Nothing Changes: Generally applies to Yahoo Mail and Gmail's webmail. The email content remains the same; only the client's UI changes.

• Partial Color Inversion: Observed in outlook.com, where only the light-colored sections get inverted.

• Full-Color Inversion: Seen in Gmail's mobile app and iOS 13 platforms. This mode entirely inverts colors and is often the most challenging for designers. Our preview tool is primarily focused on simulating this experience.

Introduction

Welcome to the Quick Start Guide for Design Builder. This resource is your shortcut to mastering this application. Learn the basics, key features, and some advanced tricks to craft great designs.

Scope

This guide uses example setups and is "white label," meaning it may not exactly match your host application. The uniqueness of each host application can lead to differences in setup and feature availability.

Feature Availability

• Plan-based: Some features are tied to your subscription plan.

• Configuration-specific: Availability may depend on your host application's settings.

• Additional Features: Features not covered here may be available in your host application.

Objective

This guide is your go-to source for quickly getting up to speed with Design Builder, whether you're a novice or a pro.

How to Use This Guide

Navigate to the section that interests you. Each focuses on a different aspect of Design Builder and simplifies complex tasks into step-by-step instructions.

Notes on Images

The images used in this document are from example implementations of the builder. Your user experience may vary significantly.

Key Components

• Stage: Drag and drop content blocks and rows here for initial layout.

• Sidebar: Fine-tune your design elements like colors, fonts, and more.

User Tips

• An icon between the Stage and Sidebar lets you minimize the Sidebar, giving you more space to work.

• To begin your design, select an element from the Sidebar.

  • Design Components: Settings, Rows, and Content Blocks

Settings for Global Design Defaults

The Settings tab is your starting point for any design, allowing you to establish global design elements that both Rows and Content Blocks will inherit.

Here, you can manage:

• Content area width and alignment

• Background and text colors

• Default font and link colors

• Optional settings like language and favicon (relevant for Pages)

These settings bring cohesion to your design, ensuring elements like font families are consistent throughout, unless overridden by custom settings in Rows or Content Blocks.

Rows: Your Structural Backbone

Rows serve as the foundational layout elements, defining the horizontal arrangement of sections within your design.

Features include:

• Up to six columns for emails and twelve for pages, accommodating various content elements side by side.

• Ability to choose different column configurations.

• Customizable features like background color, border, and mobile behavior for each row or specific columns within a row.

• "+Add new" button to add new columns and a separator icon for resizing existing columns.

• Individual column settings like background color, padding, and border, accessible by clicking on the column in the Sidebar (highlighted in purple for easier identification).

Content Blocks: Detailing Your Design

Content Blocks are your go-to for adding specific elements to your design.

Features include:

• Auto-adjustment to the column width when dragged into a row.

• A range of options like Text-Based (Title, Paragraph, List), Media (Image, Video, GIF), Interactive (Button, Social Media Icons), and Layout Tools (Divider, Spacer, Menu).

• Advanced Elements like HTML and Sticker are also available.

• Individual settings for each block, like custom padding and visibility, accessible via a property panel in the Sidebar once the block is selected.

With these three main components—Settings, Rows, and Content Blocks—you have a powerful toolkit for crafting designs that are both cohesive and flexible.

Introduction

Rows are foundational to your design, whether it's an email or a landing page. They serve as the container for content blocks and are crucial for mobile responsiveness. Unlike fixed-width layouts, rows in this builder automatically adjust to the screen size of the device on which they are displayed. The builder provides various settings for rows, which allow you to apply design elements to multiple content blocks at once.

Selection Process

To make changes to a row, you first need to select it:

• Hover: Move your mouse cursor over an empty space on the stage, usually to the left or right of the content area.
• Click: Click outside the content area to select the entire row.

Once you've selected a row, the builder's sidebar will display various row-specific properties you can modify.

Available Row Properties

Here are some of the properties you can adjust for a selected row:

• Row Background Color: Set the background color for the entire row.

• Content Area Background Color: Specify the background color for just the content area within the row.

• Vertical Alignment: Choose the vertical alignment for the content within the row. Options usually include top, middle, and bottom.

• Content Area Rounded Corners: Add rounded corners to the content area.

• Content Area Border: Set a border around the content area with customizable color, width, and style.

• Mobile Optimization Options: A set of options for mobile responsiveness:

• Do Not Stack on Mobile: Prevents the content within the row from stacking vertically on mobile devices.

• Reverse Stack on Mobile: Reverses the order of content when stacked vertically on mobile devices.

• Hide on Mobile/Desktop: Makes the row invisible on mobile or desktop devices.

By understanding and utilizing these row properties, you can create more effective and visually appealing designs that work across different devices.

Design Tips for Dark Mode

Creating dark-mode-friendly designs can be complex, but here are some key pointers to help you:

• Avoid using pure white (#FFFFFF) and pure black (#000000); opt for off-whites and gray-blacks instead. This can mitigate the impact on email clients that perform full color inversion.

• Transparent PNGs are preferable for flexible design adaptability.

• Outline text in contrasting colors for better legibility, particularly if it's part of an image.

By making the most of the Dark Mode Preview feature and adhering to these design guidelines, you'll be better equipped to produce emails that offer a consistent and appealing experience, regardless of your audience's device settings.

Use Preview to see how your design will appear on both mobile and desktop devices.

Functionality

• Toggle between light and dark mode to assess design impact.

• If using display conditions, preview their effect as well.

Limitations

Note that the preview approximates based on popular devices and platforms. This is especially relevant for email designs and dark mode, as different devices and email clients may render your design differently.

Overview

Knowing how to select rows or individual content blocks effectively is crucial when using the builder. This guide will walk you through the steps and visual cues involved in making precise selections, empowering you to edit your design efficiently.

Selecting Content Blocks

• Mouseover Icon:

  • Hover your mouse over a content block.

  • An icon appears, enabling you to drag the block.

• Upon Selection:

  • Click the block to select it.

  • Three icons show up on the stage for removing, cloning, or commenting on the block.

• Sidebar Properties:

• Once a block is selected, the sidebar on the right displays properties specific to that content block for editing.

Selecting Rows

• Mouseover Area:

  • Hover over an empty space in a row.

  • The row gets highlighted, and an icon shows up for dragging.

• Upon Selection:

  • Click the row to select it.

  • Four icons appear for commenting, saving, removing, or cloning the row and its content.

• Sidebar Properties:

• Once a row is selected, the sidebar will show properties specific to that row for editing.

Note

• Selecting a row will automatically deselect any previously selected content block.

• A single row may contain multiple columns, all of which will be selected when you choose the row.

What Are Saved Rows?

Saved rows are pre-configured sections of design that you can store for future use in the builder. These rows could contain a variety of elements like text, images, or buttons, arranged in a specific way. They're a shortcut for adding complex structures you plan to reuse.

Key Characteristics:

• Reusability: Once saved, these rows can be dragged and dropped into any new or existing design.

• Customization: Even after a row is saved, it can be modified without affecting its original version.

• Flexibility: Saved rows make it easy to maintain consistency across various projects while still offering room for project-specific tweaks.

How to Manage Saved Rows

• Update: You can change the content or settings of a saved row at any time. This won't affect the places it's already been used.

• Edit Details: Change the name or category directly from the builder sidebar.

• Delete: Remove a saved row if it's no longer needed.

Using saved rows effectively can speed up your workflow, help maintain design consistency, and allow for greater creative flexibility.

What Are Synced Rows?

Synced rows are a type of saved row that updates across all instances when modified. For example, if you change a header in one newsletter, it updates in all newsletters where that synced row is used. The workflow for creating a synced row is the same as that for a standard row, but you'll have an option to specify the row type.

Identifying Synced Rows

Easy to spot both on the stage and in the sidebar through various indicators:

• Stage: Labels and unique Edit icons indicate synced rows.

• Sidebar: Synced rows are listed with a specific symbol for quick identification.

• Editing Limitations: Synced rows are locked; editing is done via the row builder only.

Collaboration Guidelines

• Commenting: Only available at the row level because individual blocks within are locked.

• Co-editing: Changes to synced rows won't appear in real-time during co-editing. Exit and re-enter the session to view updates. Comment to notify others of the change.

Switching to and from Synced Rows

• Converting: Standard rows with comments become unclickable at the block level when turned into synced rows.

• Unsyncing: Create standalone versions of synced rows when needed. This option appears when you attempt to edit a synced row. Unsyncing will not auto-save the new row; you'll need to save it separately.

Considerations

• Notifications: Alert co-editors of changes to synced rows as these are not real-time updates.

• Previous Comments: Become unclickable but viewable at the row level.

• Unsyncing: Use this option when one instance of a row should not reflect changes made to the synced version.

Overview

Display conditions provide the capability for conditional content rendering in your emails. This allows for highly targeted messaging based on specific conditions such as whether a recipient is a current user of a product. It's worth noting that the builder itself does not interpret these conditions; that's the job of your sending platform.

Setting Up Display Conditions

• Accessing the Feature: Once enabled, 'Display Conditions' will be visible under the 'Row Properties' in the builder sidebar.

• Creating a Condition: Click on 'Add condition' to trigger a modal overlay on your builder screen.

• Naming & Describing: Use these fields for a brief explanation and name for the condition, assisting you in later previews.

Syntax and Editing

• Entering Syntax: Populate the 'Before' and 'After' fields with your conditional syntax.

• Saving & Modifying: Click 'Confirm' to save your condition. It will appear in the sidebar, where you can also edit it if necessary.
• Removal: An icon is provided if you wish to delete the condition.

Previewing and Testing Conditions

• Preview Mode: Navigate to 'Actions' and select 'Preview'.

• Toggling Conditions: Within the preview, use the dropdown menu 'Select row conditions' to turn conditions on or off to see how they affect the email layout.

Important Notes

• Retaining Conditions: Although the builder won't save your display conditions as standalone settings, they are retained within specific emails or templates. They can be carried over through copying or generating new templates/emails.

• Dynamic Content: Conditions also allow for dynamic content within the rows, such as text or images. You can employ merge tags or dynamic images based on the condition.

• Syntax and Validation: The builder does not validate the syntax used for conditions; it's interpreted by your sending platform.

Understanding and utilizing display conditions correctly can significantly elevate the customization and effectiveness of your email campaigns.

Overview

Column management in the builder provides a flexible way to organize and design your layouts. It allows you to resize columns, add or remove them, and align content. This feature gives you control over how to best display different elements within your design.

Features

Here are some actions you can perform:

• Resizable Columns: Adjust the width of existing columns.

• Add/Remove Columns: Easily add a new column or delete an existing one.

• Content Alignment: Align images and text within a row.

How to Use Column Management

1. Adding a Row and Columns: Begin by adding a row to your design. You can then define the number of columns you need.

1. Adjusting Width: Use the sidebar to drag column dividers for resizing. The width is defined in terms of column numbers, not pixels.

2. Adding a Column: Use the "+ Add new action" button to add a new column to the right-most side. When a new column is added, the nearest column to the left shrinks to accommodate it. If the left-most column is already at its minimum width, the next available column will resize.

3. Removing a Column: To delete a column, click the "Delete" action in the column properties at the top-right corner. The width of the deleted column gets distributed to the nearest columns.

4. Limits:

   • For emails, the maximum number of columns is 6.

   • For pages, the maximum number of columns is 12.

   • The minimum column width is 2 for emails.

5. Restrictions:

   • Columns cannot be reordered.

   • The "+ Add new action" button disappears when the maximum number of columns is reached.

   • The "Delete" action is not visible if only one column is present.

Notes

• If you mistakenly delete a column, you can use the undo feature to recover it.

• Column width is only specified in terms of column numbers, not in pixels.

Cards Style

Cards Style is a Row Property that enables you to create space between columns and round the corners of columns within a row.

Add Space Between Columns in a Row

Take the following steps to create space between columns within a row:

1. Enter your design within the application

2. Click on a row within the builder

3. Navigate to the Cards Style section of the Row Properties located on the right-hand side of the screen

4. Navigate to the Spacing option

5. Click the plus (+) symbol to increase the spacing between columns within the row

You successfully added space between columns in a row.

Note: To reduce the spacing between columns in a row, take steps one to four and then click the minus (-) symbol to reduce the spacing.

Round the Corners of Columns in a Row

Take the following steps to round the corners of columns within a row:

1. Enter your design within the application

2. Click on a row within the builder

3. Navigate to the Cards Style section of the Row Properties located on the right-hand side of the screen

4. Navigate to the Cards Rounded Corners option

5. If you'd like to round each corner of the columns within the row equally, click the plus (+) symbol below All corners to round all four corners simultaneously

6. If you'd like to round each corner separately, toggle on More options

7. Click the plus (+) symbol to round each corner individually

You successfully rounded the corners of the columns within the row.

Note: Rounded image corners do not render with Outlook. The fallback for Outlook emails is squared corners.

Vertical Alignment

While this is a row-level setting, it's particularly useful for managing columns. If your columns contain different types of content, such as text and images, which might have different heights, vertical alignment can help you handle the empty space efficiently.

For instance, suppose one column contains an image and another contains text, and the text column is taller than the image column. By default, both will align to the top, leaving empty space beneath the shorter column. However, you can choose to align the content in the middle or at the bottom to make the layout more aesthetically pleasing.

Overview

The Settings tab in the builder provides a centralized location for setting up configurations that apply across your entire design. These settings range from mandatory options like content area width and alignment to optional ones like favicon and language settings.

General Options

• Content Area Width: This specifies the maximum width for the content area when viewed on large devices. On smaller screens, this setting is ignored.

• Content Area Alignment: This sets the default alignment for text in the content area. While the standard setting is centered, you can choose to align it to the left.

• Background Color: Defines the default background color for the entire design. Note that this can be overridden at the row, column, or content block level.

• Content Area Background Color: This sets the background color specifically for the content area.

• Default Font: Select a default font family that will apply to all content elements across your design. You can override this at the content block level.

• Link Color: Sets the default color for hyperlinks in the design. This setting can also be overridden for individual elements.

Optional Properties

These are settings you can choose to implement but are not required.

• Favicon: Available only in the Page Builder, this allows you to upload a favicon that will appear in the tab of your web browser.

• Language: Allows you to set an HTML language attribute, aiding in accessibility by helping screen readers to correctly pronounce the text. In the context of web pages, it can also aid in search engine optimization by making the content discoverable in language-specific search results.

Applying the Settings

To apply these settings, navigate to the Settings tab in your builder. Fill in the general and optional settings as needed. General options should be populated by default based on the template or brand settings you are using. Adjust these if needed. Optional settings can be left empty if they are irrelevant to your design.

Overview

Padding serves as an essential tool for refining the aesthetics and readability of your design. The builder provides various padding options that can be customized for both rows and individual content blocks.

Default Padding Features

By default, you can set the padding around an element for all sides simultaneously.

To do so:

1. Select the element.

2. Use the padding options in the sidebar.

For a more nuanced approach, toggle on 'More options' to apply padding to each side individually.

Padding in Rows

Column Level Padding:

• Locate 'Customize Columns' at the bottom of the sidebar after selecting a row.

• Apply padding here to impact the entire column within the row.

Consistency vs. Uniqueness:

• For multi-column rows, consistent padding across all columns is generally advised.

• However, individual padding settings can be applied to each column for a more varied look.

Padding in Content Blocks

General Padding:

• For most content blocks (except spacers), padding options are under 'Block options' in the sidebar.

• These settings affect the entire content block.

Special Cases: Content Blocks with Unique Padding Options

Buttons:

• Allows for content padding specific to the text inside the button.

• Useful for customizing button dimensions or text positioning.

Icons:

• Offers padding options only for the icon images within the block.

• Icons can combine both text and images in a single block

Menus:

• Provides padding options specifically between each menu item.

Forms:

• Only available in the Page builder.

• Allows for two additional padding options:

  • 'Field options' for text fields that can be filled out.

  • 'Button options,' similar to button padding for forms.

Overview

Borders are not just decorative; they can also help delineate content and draw attention to specific elements in your design. In the builder, you can set borders both for rows and for individual elements like buttons. You have the choice to apply borders to all sides or specify different borders for each side.

Row-Level Border Customization

When your row comprises multiple columns, you'll need to set borders for each one individually.

• Selecting a Row: Click outside the content area to select the entire row.

• Column Selection: Your sidebar will display a menu showing the columns in the row. Choose the one you wish to modify.

Granular Control

• Toggling More Options: Use the 'More options' toggle to specify which sides of the element will have borders.

• Border Style: Choose from various styles including solid, dotted, or dashed lines.

• Size and Color: Adjust the thickness and choose the color to make the border align with your design aesthetic.

Tip

Consistency is key; if you're setting up borders for multiple columns, ensure that the style complements the overall design.

Overview

The builder comes with built-in AI capabilities that facilitate and enhance the content creation process. These features are capable of automating text generation and are compatible with various content blocks such as paragraphs, lists, buttons, and titles. The availability of these features may vary based on your specific application.

Content Blocks Compatible with AI

AI functionalities can be utilized in the following content blocks on the builder stage:

• Paragraph

• List

• Button

• Title

How to Utilize AI Capabilities

• Initial Setup: Drag a content block that supports AI from the sidebar onto the builder stage.

• Activate AI: Select the content block and click the "Write with AI" button.

• Input Prompt: A dialogue box will appear where you can enter a custom prompt. Preset suggestions may or may not be available, depending on your application.

• Generate Content: Click 'Generate' to allow the AI to create text based on your prompt.

• Apply to Stage: Hit the 'Apply' button to place the AI-generated text onto the builder stage.

Refining Text Through Conversation

• Review Output: Once the AI has generated the text, review it on the stage.

• Dialogue with AI: If refinements are needed, you can have a back-and-forth conversation with the AI to adjust the text.

• Apply Revised Content: Click 'Apply' to update the content on the builder stage.

Understanding Token Use

Tokens are the units of text processed by the AI, essentially counting both your input and the AI's output. Some applications may include a token counter, which is especially useful if you have to manage token-related costs.

AI Model and Limitations

The AI leverages the ChatGPT 3.5 Turbo model. It's important to note that this model neither accesses real-time data from the internet nor retains any user information.

Overview

Enhance the readability of your content with two key features: Letter Spacing and Paragraph Spacing. Available in the sidebar for text-based content blocks, these features give you better control over your text layout.

Applicability:

• Letter Spacing: Applies to all text-based content blocks, including Paragraph, List, Button, Title, Icon, and Menu.

• Paragraph Spacing: Exclusively for the Paragraph block.

How it Works

Letter Spacing

• Default: Starts at 0px.

• Control: Use the - and + buttons in the sidebar to adjust. You can also type in a positive value manually. For negative values, use the - button.

• Limits: The range is -99 to +99 pixels. Rendering may differ across devices and browsers.

Paragraph Spacing

• Default: Set at 16px, rendering paragraphs as double-spaced.

• Control: Similar to letter spacing, use the - and + buttons or manually enter a positive number or zero.

• Limits: Range is 0 to 99 pixels, and again, rendering may vary.

Use Cases

While it's advised to use these features sparingly, here are some scenarios where they could be beneficial:

• Making all-caps text more readable.

• Emulating the text style of a logo or hero image in your content.

• Tailoring text for optimal display on various screen sizes.

Overview

The File Manager is an essential tool for managing your digital assets, either as part of the builder or as a standalone application. Accessible across all designs linked to your account, it allows you to handle files for emails, pages, or templates seamlessly.

Features

With the File Manager, you can:

• Browse, search, and sort your files

• Import new files from your device or external services

• Create, manage, and delete folders

• Preview and insert files directly into your designs

How to Access the File Manager

You can access the File Manager when you are:

• Clicking the 'Browse' button in an image placeholder.

• Using the 'Change image' button in the image properties panel.

• Selecting the 'Link file' option when working with images or buttons.

• Some applications may have a stand-alone instance that can be accessed without loading the builder.

Uploading Files

• Drag-and-Drop: Simply drag files from your computer and drop them into the designated upload area.

• Upload or Import Button: If you can't drag and drop, an 'Upload' or 'Import' button is also available.

Importing from Other Platforms

Easily integrate with external platforms such as Dropbox, Google Drive, and Instagram to import the files you need. Additionally, access royalty-free services like Pexel to enrich your designs with free media.

Browsing and Searching

• Sort: Arrange your files by name, date, size, or type to find what you're looking for quickly.

• Search: The search feature narrows down the list of files within the current folder based on your query.

File Management

• Preview and Insert: Hover over any file to reveal options for previewing and inserting it into your design.

• Delete Files: You can delete files, but note that they can't be moved between folders. Only empty folders can be deleted.

Bulk Deletion

For multiple deletions, checkboxes appear next to each file and empty folder that can be deleted.

Organizing Folders

Create a custom folder hierarchy using various permissible characters, such as letters, numbers, spaces, periods, hyphens, and underscores.

Limitations

• File Types: Prohibited file extensions include .js, .cjs, .mjs, .php, .phtml, .php3, .php4, .php5, .php7, .phps, .php-s, .pht, .phar, .HTML, .zip, .rar.

• File Size: The default maximum file size for uploads is 20MB, although this limit may vary.

File Transfers: Files cannot be moved between folders, only deleted.

Overview

The Table content block is now available through the Beefree SDK Builder. This feature allows you to add tables to emails, pages, and popups. Continue reading to learn more about how to use the table content block within the builder.

How to Use

To use the Table content block, take the following steps:

1. Log in to the application

2. Open one of your Beefree SDK builders (email, popup, page)

3. Navigate to your builder

4. Identify the Table content block inside panel with your content block options

5. Drag and drop the Table content block inside the stage of the builder

6. Edit your table accordingly

Customizable Table Settings

You can customize various settings of the table content block. In this section, we will explore the different customizable settings and what they enable you to do.

Header Section

The Table content block includes the option to add headers to the first row of the table. These headers behave as column titles and enable you to associate each column with a category.

You can choose to make your table with or without a header row. If you initially create the table with a header, delete it, and then decide to add it back later, any formatting or styles from the original header will be lost. You'll have to start designing the header row from scratch again.

Structure

You’ll have the following options for customizing the structure of your table content block:

• Columns: Add or remove columns to the right of your table. The maximum number of columns you can add is eight.

• Rows: Add or remove rows to the bottom of the table. There is no maximum number of rows you can add to the bottom of your table.

• Background color: Edit your table’s background color.

• Border: Customize your border style. You have the option to choose from solid, dotted, and dashed. You can also select a custom border color and size.

Note: For dotted and dashed border styles, a thickness greater than five results in large circles or rectangles as the border. For the best results, use a border thickness of five or less for those border style types.

Striped Rows

You can use the Striped Rows content property to create rows with alternating colors.

To add Striped Rows to your table, take the following steps:

1. Navigate to the builder

2. Identify the Table content block

3. Drag and drop the Table content block on to the builder stage

4. Click the Table

5. Navigate to Striped Rows under Content Properties inside the panel on the right hand side of the screen

6. Toggle Striped Rows to on

7. Select the background color you want to apply for the alternating rows

Note: The initial table background color you select will be the other alternating color in your table.

The following GIF demonstrates an example of what this content property enables you to do.

Content

You’ll have the following options for customizing the content of your table content block:

• Font Family

• Font Weight

• Font Size

• Text Color

• Link Color

• Align

• Line Weight

• Letter Spacing

• Text direction

Note: These settings are applied to all the content within the table content block.

Accessibility Keys

The ARIA Grid Pattern is a set of guidelines outlined by the W3C's Accessible Rich Internet Applications (ARIA) specification to enhance keyboard accessibility within web applications. It provides a structured approach for developers to create accessible grids, tables, and similar components, ensuring users can navigate and interact with them efficiently using keyboard controls alone. By adhering to the ARIA Grid Pattern, developers can ensure that all users have access to an inclusive application experience.

Setting Your Focus

To set your focus for using navigation keys, take the following steps:

1. Navigate in Rows: Move through rows using your arrow keys. When focused on the table, pressing Enter will direct the focus to the first cell, enabling grid navigation.

2. Grid Navigation: Once in grid navigation mode, press Enter or start typing to shift focus to the builder inside the cell you're currently focused on.

3. Move Between Builders: While using the builder in a cell, if you wish to move directly to another builder in an adjacent cell:

   1. To move forwards, press Enter or Tab.

   2. To move backwards, use Shift + Enter or Shift + Tab.

By following these steps, you can set the focus for your navigation.

Custom Behaviors

In addition to the ARIA Grid Pattern, we also included the following custom behaviors:

• Enter Key to navigate vertically through cells: The Enter key has different functions depending on your current focus. The following list shows the different functions of the Enter key for each focus:

  • When focus is on the module: Pressing Enter sets focus to the first cell of the grid selection.

  • When focus is on a cell: Pressing Enter while editing the content of the cell sets focus to the builder inside the cell.

  • When focus is in the builder inside a cell: Pressing Enter while editing the content of the cell sets focus to the builder in the cell above or below, depending on the direction.

  • Shift+Enter combination: Clicking Shift+Enter inverts the direction of the Enter key behavior.

• Tab Key to navigate horizontally between cells: Use the tab key to navigate between cells horizontally. If you are in a cell in the final column on the right side of the table, you will be navigated to the same level cell in the first column of the table.

• Delete cell contents: To delete a cell’s contents, use the backspace key when you are in the grid section.

• Line break: To perform a line break while in a cell, click alt, ctrl, or metakey + Enter. For example, on a Mac keyboard, you would click command, plus sign (+), and then enter to perform a line break within a cell.

Additional Considerations

It is important to understand that this is a developing feature. While most customizable settings work as expected, a few combinations can result in odd-looking tables.

Here is a list of combinations to avoid for the best possible table results:

• Border thickness of five or higher for dashed and dotted border styles

• Removed header will permanently lose their styles

Another consideration to keep in mind when using the Table Content Block is to ensure you verify how your design with the table looks in mobile mode. At times, too many columns within a table can result in a mobile design view that is not ideal or presents as intended.

We do not yet have Mobile Style Properties for the Table Content Block. In the event you preview the mobile version of your table design, and it does not look ideal, you can move forward with one of the two options:

• Use the Hide On Desktop/Mobile feature

• Edit your table within your design and test the mobile preview again

Overview

Content locking is an essential feature in the builder that enables specific user roles to lock design elements, preventing unauthorized modifications. This is especially useful in scenarios such as regulated industries where certain text, like legal disclaimers in email footers, must not be altered.

Use-Cases for Content Locking

Imagine you are a digital marketing agency with a new junior editor on your team. Your client operates in a regulated industry, and their emails must include specific legal language in the footer. Locking this content ensures the junior editor can't make unauthorized changes.

How to Lock Rows and Content Blocks

• Role Restrictions: Users with Manager roles or above have the ability to lock rows or individual content blocks.

• Row-Level Locking: When a row is locked, the contained content blocks are automatically locked.

• Content Block-Level Locking: It's possible to lock individual content blocks without affecting the entire row.

Visibility for Lower-Level Users

• Inability to Edit: Editors and Contributors can't modify locked rows or content blocks.

• Alert Message: Attempting to edit locked elements triggers an alert message.

• Drag-and-Drop Restrictions: These users also can't drag new content into a locked row, indicated by a diagonal overlay pattern.

Partial Locking: Lock Layout, Edit Content

Unlock Within Locked Rows: Content blocks can be individually unlocked within a locked row, allowing specific edits while maintaining the layout.

You can move files within the File manager using the move icon. You can access the move icon on the file within the File manager. The move icon is a folder with an arrow pointing right inside it. Use this icon to move files.

To move a file, take the following steps:

1. Enter your File manager.

2. Navigate to the file you would like to move.

3. Click the Move icon.

A popup will appear displaying a list of destinations for your file.

1. Select the file’s new destination from the list.

2. Click Move to confirm the action.

The following GIF shows an example of how to move files to new destinations within the File manager. It also shows an example of how the file URL remains the same as it travels between destinations.

Considerations

Consider the following regarding the new File manager functionality:

• When you upload new files to the File manager, the URL will have a new format compared to previously uploaded files.

• Your existing file URLs will remain the same as before.

• When you move files within the File manager, the URL does not change.

• If there is a name conflict, the File manager will ask if you want to replace the image, keep both images, or cancel the upload.

  • Action: Click "keep": The image uploads with a new name, adding a suffix like _1. Suffixes increment to a maximum of _50 in case of conflicts.

  • Click "replace": The new image will overwrite the old one and appear in the File Manager. Once the CDN cache expires, you will see the updated content when browsing the URL. Note: The move feature also updates the content at served URLs, allowing for widespread alterations to an image's content when its URL is commonly used.

  • Click on "cancel": The upload will be canceled.

• After a file is deleted, the URL is unreachable when the CDN cache expires.

The following image shows an example of the modal that appears in the event there is a name conflict.

Overview

Dividers and spacers serve similar purposes in design: they create breaks between different elements. However, their functionalities differ, and so does the control you have over them in the sidebar. Depending on your design needs, you might opt for one over the other. Here's a breakdown:

Dividers

The Divider content block inserts a physical line into your design, segmenting different parts visually.

• Transparency Option: If you prefer no visible line, simply toggle on the Transparent option.

• Line Settings: Customize the line's appearance using sidebar settings for line style (solid, dotted, dashed), height, and color.

• Width and Alignment: You can set the width as a percentage of the container column and align the divider to the left, center, or right.

• Padding: Padding options are available, just like with other content blocks. Note that maximum padding on any side is 60px.

Spacers

Spacers are essentially transparent dividers, creating an empty space rather than a visible line.

• Height Control: The only sidebar option for a Spacer is its height, offering granular control over the amount of blank space in your design.

In summary, Dividers offer more customization options and visual cues, whereas Spacers are simpler and focus solely on creating empty space. Choose based on what fits your design goals best.

Accessibility Keys for Dividers and Spacers Content Blocks

This section outlines and describes the accessibility keys currently available for navigating the Dividers and Spaces content blocks. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.

Setting Your Focus

Take the following steps to set your focus:

1. Locate the Block: Navigate through the builder using ArrowUp or ArrowDown to locate either the Divider or Spacer block in the sidebar. A high-contrast border will appear, indicating that the block is in focus.

2. Activate the Block: Press Enter to select the highlighted block. This action, however, does not insert the block but rather prepares it for property modification through the sidebar.

Customizing Properties

Take the following steps to customize your properties:

1. Adjusting Settings: With the block selected, use Tab to navigate through the sidebar properties. To navigate the properties in reverse order, use Shift + Tab. The Divider block allows adjustments for transparency, line style (solid, dotted, dashed), height, width, alignment, and color. Spacers, in contrast, offer only height adjustment as their main customization feature.

2. Setting Width and Alignment for Dividers: For Dividers, you can set the width as a percentage of the container column and choose to align the divider to the left, center, or right using sidebar controls.

3. Applying Padding: Both blocks permit padding adjustments up to 60px on any side, providing flexibility in spacing within your designs.

Exiting and Saving Changes

Use the following key to exit and save your changes.

• Use Esc to deselect the block and save changes. This will return focus to the general navigation within the builder.

Overview

The Title content block lets you implement header tags, creating a structured hierarchy within your design. This is beneficial for both web accessibility and SEO, without the need for custom HTML.

Using Titles

With the Title content block, you can easily insert H1, H2, and H3 tags. This assists in making your content accessible and improves your landing page's SEO.

How it Works

1. Finding the Block: The title block is located in the sidebar of the builder.

2. Drag-and-Drop: Drag the Title content block onto the builder stage. A toolbar similar to that of the Paragraph content block will become available.

Use Cases

• Accessibility: Title content blocks enable screen readers to navigate and interpret your content correctly.

• SEO: Headers play a significant role in SEO, as search engines prioritize header content when scanning for keywords and generating search results.

Accessibility Keys for Title Content Blocks

This section outlines and describes the accessibility keys currently available for navigating the Title content block. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.

Setting Your Focus

Take the following steps to set your focus:

1. Locate the Title Block: Use ArrowUp or ArrowDown to navigate through the builder and locate the Title content block in the sidebar. A high-contrast border will indicate active focus in accessibility mode.

2. Activate the Title Block: Press Enter to select the highlighted Title block, activating it for insertion onto the builder stage.

3. Place the Title Block: Once activated, use ArrowUp and ArrowDown to correctly position the Title block within your page layout. Press Enter to drop the Title block into the desired location.

Editing and Customization

Take the following steps to edit headers and navigate through properties:

1. Edit Headers:

   • With the Title block placed, hit Enter to edit the text within the header tags directly. This enables quick input of your desired header content.

   • Use Backspace to delete existing text and Enter to add new headers.

2. Navigate Through Properties:

   • Use Tab to navigate through various sidebar properties associated with the Title block, adjusting aspects like font size, style, and alignment to optimize readability and SEO impact. To navigate the properties in reverse order, use Shift + Tab. This allows you to adjust settings directly from the keyboard.

Exiting and Saving Changes

Use the following key to exit and save your changes.

• Press Esc to exit the editing mode of the Title block. This command also deselects the block, saving any changes made.

Overview

Creating a text-based navigation menu for your designs is intuitive with the builder's menu content block. This versatile feature is compatible with various layout options and devices, sparing you the hassle of manual adjustments like text sizing and padding.

Adding a Menu

Take the following steps to add a menu to your design.

1. Drag and Drop: Drag a menu content block onto the builder stage to get started. A placeholder will appear.

2. Sidebar Settings: Access various settings for the menu block in the sidebar, which include both general and menu-specific options.

1. Add Items: Click 'Add new item' to populate your menu. Here, you can set the display text and corresponding URL. The 'Title' field allows for hover-over text for each item.

2. URL Types: The menu supports multiple URL types such as email, SMS, and click-to-call. You can also specify whether a URL should open in the same window or a new tab.

3. Reorder Items: Rearrange the menu items by dragging them using the icon in the upper left-hand corner of the item settings panel.

Designing Your Menu

Take the following steps to design your menu.

1. Customization: Utilize the sidebar settings to alter your menu's appearance. Choose between a horizontal and vertical layout through a dropdown menu.

2. Separators: If you opt for a horizontal layout, you can insert a text character as a separator between menu items. This separator will match your chosen text color.

3. Padding: Customize padding for individual menu items as well as the entire menu content block.

Mobile Menus

Take the following steps to ensure your emails are mobile-ready:

1. Client Support: Not all email clients support mobile menus. Consult the compatibility list below for details.

2. Optimization: Use the 'Mobile menus' option in the content properties for a mobile-friendly menu without content duplication.

3. Activation: Toggle on the mobile menu to unlock additional customization options. Icon and Layout: On mobile, an icon replaces the standard menu. It expands to a vertical layout when tapped, ignoring any separators you’ve set for the desktop version.

4. Design Details: Adjust the icon's size and shape, and set foreground and background colors.

Mobile Menu Compatibility

The following table displays the email client and its corresponding compatibility.

Accessibility Keys for Menu Content Blocks

This section outlines and describes the accessibility keys currently available for navigating the Menu content block. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.

Setting Your Focus

Take the following steps to set your focus:

1. Locate the Menu Block: Navigate through the builder using ArrowUp or ArrowDown to locate the Menu content block. A high-contrast border will appear, indicating that the block is in focus.

2. Activate the Menu Block: Press Enter to activate the block in accessibility mode. This action allows for interaction with the block's properties through the sidebar but does not insert the block into the stage.

Customizing Properties

Take the following steps to customize your properties:

1. Navigating Sidebar Properties: With the Menu block activated, use Tab to navigate through the sidebar settings. These settings include general options like adding new items, setting display text, and URLs, and menu-specific options such as URL types and target actions (like opening in the same window or a new tab).

2. Adding Menu Items: Add new items to the menu by selecting Add new item, where you can set the display text and corresponding URL for each item.

3. Design Customization: Adjust the menu's appearance using sidebar options, such as choosing between horizontal and vertical layouts. If opting for a horizontal layout, you can also insert text characters as separators between menu items.

Exiting and Saving Changes

Use the following key to save and exit your design.

• To exit and save changes, press Esc. This command will deselect the Menu block and save your changes.

Overview

The Paragraph and List content blocks are specialized tools designed to meet distinct text formatting requirements. The Paragraph content block is optimized for long-form text, offering greater control over paragraph styles and spacing. The List content block provides an efficient way to create and manage ordered or unordered lists, complete with customizable styles and spacing options.

How to Use the Paragraph Content Block

• Inserting: Drag the Paragraph content block from the Content tab into your layout.

• Basic Customization: In the sidebar, options are available to set font family, size, alignment, and text direction.

Advanced Features:

• Font Weight: Toggle between regular and bold.

• Paragraph Spacing: Adjust the space between paragraphs.

How to Use the List Content Block

• Inserting: Drag the List content block into your layout.

• Basic Customization: Use the sidebar for setting font family, size, alignment, and text direction, similar to the Paragraph content block.

Advanced Features:

• List Type: Choose between an ordered (numbered) or unordered (bulleted) list.

• List Style: Customize the style of bullets or numbers.

• Start List From: This option becomes available when you select an ordered list, allowing you to specify the starting number.

• Item Spacing and Indent: Fine-tune the spacing and indentation between list items.

Accessibility Keys for Paragraph and List Content Blocks

This section outlines and describes the accessibility keys currently available for navigating the Paragraph and List content blocks. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.

Setting Your Focus

Take the following steps to set your focus:

1. Locate the Row: Navigate through the content stage using ArrowUp or ArrowDown to highlight the desired row. When a row or content block is highlighted, a high-contrast border visually indicates that the focus is active in accessibility mode.

2. Activating the Content Block: Once a row is highlighted, press Enter to select and activate the first content block within that row. This emphasizes the block with a high-contrast border, signaling readiness for interaction.

3. Navigating Within the Row: With the content block active, use ArrowUp and ArrowDown to move between the content blocks within the same row. This key sequence enables seamless focus and editing of different content types.

Editing and Customization

Take the following steps to edit content and scroll through sidebar properties.

1. Edit Content: Press Enter within the focused content block to switch to editing mode. A rounded, inner border will appear within the content block, indicating that it is in accessibility mode. You can input or modify text in a Paragraph or manage items in a List. Utilize standard editing commands like Backspace for deletion and Enter for adding new lines or list items to manipulate content.

2. Scroll Through Sidebar Properties: Once a content block is selected and activated for editing, use Tab to navigate through all available sidebar properties in the forward direction. To navigate in reverse order, use Shift + Tab. This allows for comprehensive control over styling and formatting directly from the keyboard.

Exiting and Saving Changes

Use the following key to exit and save changes.

• To exit editing mode and return to row navigation, press Esc. This key also helps to clear any active selections within the block, ensuring a smooth transition back to broader content management.

Overview

The Custom HTML content block enables you to insert your own HTML code into designs crafted in the builder. While it's as straightforward as adding a text block, this feature is primarily intended for those proficient in HTML. Using custom HTML can impact how your design adjusts to various screen sizes, so make sure the HTML you use is responsive and email compliant. Note that custom HTML typically falls outside of standard support.

Why Use Custom HTML?

Here are a few scenarios where custom HTML can be valuable:

• Customized Content: You're not restricted to predefined settings, giving you more control over styling.

• Special Elements: Add content like HTML5 videos or anchor links, which are not standard elements in the builder.

• Advanced CSS Effects: While CSS animations aren't universally supported in emails, they can make your web pages more engaging.

• Live Content: Embed real-time content like product recommendations or countdowns by pasting code from external vendors.

How to Add Custom HTML

1. Drag the Block: Insert an HTML content block into your design, just like you would with any other block.

2. Edit HTML: Click the block to open the HTML editor on the sidebar. You'll see placeholder code, which you can replace with your own HTML. Syntax highlighting and indentation features help make the code readable.

HTML Tag Restrictions in Emails

When adding custom HTML to emails, a code sanitizer checks and automatically corrects your code. Unsupported tags like <script> and <iframe> are removed to avoid security risks and deliverability issues.

Allowed HTML Tags: (for emails only)

• Tags: a, abbr, address, area, b, bdo, etc.

• Attributes: style, id, class, data-*, title, href, name, target, etc.

Using Custom HTML with Pages

The Page Builder doesn't employ a sanitizer, offering more freedom but also more responsibility. You can use any HTML, CSS, or JavaScript syntax when designing landing pages.

Accessibility Keys for Custom HTML Content Blocks

This section outlines and describes the accessibility keys currently available for navigating the Custom HTML content block. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.

Setting Your Focus

Take the following steps to set your focus:

1. Select the Custom HTML Block: Use ArrowUp or ArrowDown to navigate to the Custom HTML block. A high-contrast border will appear to show it's selected.

2. Activate the Block: Press Enter to activate the block, preparing the sidebar for HTML input.

Enter HTML

Take the following steps to enter your HTML:

1. Accessing the HTML Editor: After activation, use Tab to move to the HTML editor in the sidebar, where you can input your HTML.

2. Inputting and Editing HTML Code: Enter your HTML code directly in the editor.

Exiting and Saving Changes

Use the following key to save and exit your design:

• Press Esc to exit the editor and save your changes.

Overview

The addition of the icon content block in the builder has made it more convenient to use text and images together, offering a cohesive way to enhance your designs. Icons serve as small, expressive elements that can accentuate your content, making the layout more interactive and visually appealing. Icons can replace or accompany traditional bullet points for a more visually compelling list.

How to Use Icons

To start incorporating icons into your project, follow these steps:

1. Drag an Icon Block: Drag an icon content block into the row where you'd like the icon to appear. A placeholder icon will initially fill the block.

2. Access Icon Options: Click on the placeholder to open the icon customization options in the sidebar.

3. Add or Replace Icon: Click 'Add new icon' to insert a pre-loaded icon into the builder stage. Alternatively, you can change the existing icon by clicking the 'Change image' button, which will open your file manager.

4. Image Editing: Should you need to modify your icon, the 'Apply effects & more' option allows access to an image editor.

5. Additional Settings: Under 'More options', you'll find settings that are unique to the icon content block, like icon text and positioning options.

Customizing Icon Properties

You can customize the following icon properties:

• Icon Text: Entering text into the 'Icon text' field will add a text label near the icon. A new field in the sidebar will appear, giving you the option to adjust this text.

• Text Position: You can specify where the text should appear relative to the icon—above, below, or to the sides—using the 'text position' dropdown menu.

• Reorder Icons: If you've included multiple icons, you can easily rearrange their order by clicking and dragging them.

• Icon Size and Spacing: Two specific settings allow you to resize the icons and set the space between them.

• Additional Settings: These are standard settings you'll find in other content blocks, like padding, border, alignment, etc., and apply to the entire content block.

Video

Adding video content to your designs can be an effective way to engage your audience. Both email and page builders offer distinct methods for incorporating videos into your layouts.

Adding Video Content Blocks in Email Builder

While embedding actual video in emails can be problematic due to limitations with email clients and data usage on mobile devices, the Email builder provides a visually effective alternative. This method links to the video rather than embedding it, which sidesteps many of the issues associated with embedding videos in emails.

How to Use Video Content Blocks

1. Drag-and-Drop: Simply drag the 'Video' tile from the Content panel into your email layout.

2. Enter URL: A prompt will ask you for a YouTube or Vimeo video URL. Upon entering a valid URL, a thumbnail of the video with an overlaid play icon will appear in the content block.

3. Icon Customization: You can tailor the play icon's type, color, and size to better suit your email's overall design.

Using Video Content Blocks in Page Builder

In the Page Builder, you have several options for integrating video content:

• Self-hosted MP4 files via URL

• YouTube or Vimeo URLs

• File Manager uploads of user files (Note: CDN charges may apply)

• Free stock video libraries from Pixabay and Pexels (Note: Only for video backgrounds)

Types of Video Displays

• Video Content Block: This is your go-to option for most video content. It's versatile and allows for a wide range of video sources and aspect ratios.

• Video Background: If you want to set a video as the background for a section of your page, this is the option you would use.

How to Use Video Content Blocks

• Aspect Ratios: You can choose from a variety of aspect ratios depending on the video source and your design needs. Supported aspect ratios include standard formats like 4:3 and 16:9, as well as more specialized formats like 9:16 and 21:9.

• Thumbnail: For public or unlisted YouTube and Vimeo videos, a thumbnail is automatically pulled and displayed with a play button. This gives your viewers a preview of the video content.

• Privacy Settings: The Page builder supports videos that are either Public or Unlisted for YouTube and Vimeo.

Limitations

• Externally hosted thumbnails must be served via HTTPS to ensure they remain visible.

• Editing an external thumbnail in the builder saves it locally, removing it from the external server.

Overview

Adding GIF animations and animated stickers can make your emails and landing pages more engaging and enjoyable for the audience. Integrating this lively content is a simple drag-and-drop operation, and it's free.

How to Add GIFs and Stickers

1. Drag the Content Block: Simply drag a GIF or STICKER content block from the content menu and drop it into your design layout.

2. Browse and Choose: Click on the newly added block, and you'll have the option to "Browse Gifs" or "Browse Stickers." Selecting either will open a pop-up window.

1. Search and Select: The pop-up window is powered by GIPHY, offering a vast selection of animations and stickers. You can use the search bar to find a GIF or sticker that suits your design or message. Click on your choice to insert it into the design.

GIPHY Integration

The GIF and sticker galleries are provided by GIPHY, a popular platform for animated content. GIPHY describes itself as "the best way to search, share, discover, and create GIFs on the Internet." Their extensive collection allows you to find just about any type of animation to enhance your email or landing page.

Images

The image content block is a versatile component in the builder, equipped with a range of features for managing and enhancing your images.

Adding an Image to Your Design

Importing or Using Externally Hosted Images

1. Drag and Drop: Place an image content block into your workspace from the sidebar.

2. Multiple Upload Options: Click the block to unveil a list of options for sourcing your image. You can drag and drop from your desktop, upload them using the file manager, or import them from social media accounts, cloud storage, etc.

Note: If you're working with dynamic images but leave the Dynamic URL field empty, the builder will default to a static image.

Using High-Quality Stock Photos

1. Access Stock Photos: Click "Change image" on an existing image or add a new image block and click "Browse."

2. Search: Click the "Search free photos" button at the top.

3. Selection and Import: Choose from high-quality images through our partnerships with Pexels and Pixabay. Click "Import" and then "Insert" to add the image to your design.

Image Settings and Features

Accessing the Advanced Image Tools in the Builder

• Image Tools: After selecting an image, an "Apply effects & more" button appears. Clicking this opens a tool suite for editing the image.

Key Features

• Stickers and Filters: Add stickers and filters to enhance your image.

• Cropping and Resizing: Modify the dimensions of your image as needed.

Content Properties: Settings and Controls

When you click on an image, the "Content Properties" panel provides several configuration options:

• Auto-width: This is activated if your image size is larger than the content block. You can toggle it OFF if you wish to manually resize the image.

• Alignment: Modify the image's horizontal positioning relative to text or other elements.

• Alternate Text: This text appears when the image is not displayed, crucial for compatibility in email designs.

Working with Dynamic Images

Dynamic images serve a unique purpose by allowing real-time updates to the visual content based on specific variables such as customer ID, dates, or other personalized information.

Essentially, they can change when viewed by the end-user, offering highly personalized interaction without requiring individual design adjustments.

• Use-Cases: Examples of dynamic images include personalized greeting cards, countdown timers to events, dynamic advertisements, and product recommendations. The ability to generate these dynamically creates a more engaging and interactive experience for the end-user.

• Technical Overview: A Dynamic URL contains variables that the sending platform replaces when the recipient views the design. So, instead of a static URL like https://site.com/image.jpg, you'd have a URL with variables, such as https://site.com/image?customerID={{customer_ID}}.

• Configurations:

  • Dynamic Image Toggle: Accessible in the "Content Properties," toggle this ON or OFF based on your requirement.

  • Dynamic URL Input: This field allows you to insert the variables needed for dynamic content. The URL field can't be empty; it has to contain at least the static part of the URL to which variables are appended.

Image Rounded Corners

The Image rounded corners image property allows you to round the corners of any image you select within the builder.

Take the following steps to use this image property:

1. Enter your design within the application

2. Select an image within the builder

3. Navigate to the image properties located on the right-hand side of the screen

4. Navigate to the Image rounded corners property

5. If you'd like to round each corner of your image equally, click the plus (+) symbol below All corners to round all four corners simultaneously

6. If you'd like to round each corner separately, toggle on More options

7. Click the plus (+) symbol to round each corner individually

Note: Rounded image corners do not render with Outlook. The fallback for Outlook emails is squared corners.

Overview

Al Alt text Bulk Generation is an extension of Alt text Generation with AI. We’ve extended the functionality to enable you to generate alt text for all the image modules within your design at once. We created this new functionality to save you even more time as you make your designs more accessible. Now, instead of using AI to generate the alt text for each image module within your design one by one, you can generate alt text for all of them at once.

Generating Alt Text with AI

This section lists the different image modules you can add alt text to with your design. It also includes steps on how to generate a single alt text and bulk alt text.

Image Modules

You can generate alt text for the following image modules within the builder:

• Image

• Icon

• GIF

• Stickers

• Custom AddOns of Image Type

Bulk Generation Steps

In the builder, take the following steps to generate alt text in bulk:

1. Select an image module

2. Click on Settings

3. Scroll to Alt text

4. Click the wand icon on the right-hand side

   A drop-down menu will appear

5. Select Generate in Bulk

   A window will open

6. Click GENERATE IN BULK to confirm and perform the action

The following GIF displays an example of how to generate alt text in bulk within the builder.

Single Generation Steps

In the builder, take the following steps to generate a single alt text:

1. Select an image module

2. Click on Settings

3. Scroll to Alt text

4. Click the wand icon on the right-hand side

   A drop-down menu will appear

5. Select Generate alt text

6. You will see the AI-generated alt text available in the Alt text field

The following GIF displays an example of how to generate a single alt text within the builder.

Token Limitations

While using this feature, you may experience image token limitations. Each image type you generate alt text for using this feature requires image tokens. If you do not have enough image tokens in your account, you will not be able to generate alt text for the images. The application will; however, inform you about your available image tokens and redirect you to purchase more if you do not have sufficient to complete your current task.

Overview

The Page builder includes a feature that lets you create internal links, enabling smooth navigation to specific sections within your design. This is essentially the introduction of anchor linking within the Page builder. Please note that due to limited support across email clients, this feature is not available for email designs.

Block Identifiers

To start using internal links, you'll need to enable the "Block Identifier" option located at the bottom of the builder for each content block you wish to link to. The block identifier is an alphanumeric string that the builder auto-generates when you toggle the feature on. For instance, a generated identifier may look like "module_626b3859-43d7-4b30-861c-d5f506c92882."

While the automatically generated identifier is functional, it may not be easy to remember or identify. You have the option to rename it to something more user-friendly, especially useful when dealing with multiple internal links.

Creating Internal Links

Once you have your block identifiers set up, you can proceed to create internal links. When you choose the internal link type, the standard URL field will change into a dropdown. The dropdown will list all the enabled block identifiers in your design. Simply select the identifier you want to link to. Note that you can link multiple content blocks to the same block identifier.

This page discusses how your can customize your form's layout, and provides instructions on how to perform the following:

• Adjusting a field's orientation: Select one of two field orientation options. These options are horizontal and vertical.

• Changing your form's layout preset: Select one of three layout preset options for your form. These options are horizontal, vertical, and grid.

• Editing your field's width: You have the option to set your field's width to 50% or 100% when you set the layout preset to grid.

The following video provides a visual representation of how you can use the different functionalities mentioned above.

Adjusting a field's orientation

Take the following steps to adjust a field's orientation:

1. Navigate to the sidebar.

2. Locate the Manage Fields section.

3. Find the field you'd like to adjust the orientation for and click the corresponding Edit button.

   1. A modal will appear.

   2. You will see options for horizontal and vertical under Layout.

4. Select the option you'd like to apply.

5. Click Save to confirm your changes.

Note: This only applies to checkbox and radio field types.

Changing your form's layout preset

Take the following steps to adjust a form's layout preset.

1. Navigate to the sidebar.

2. Locate the Layout section.

3. Find the Layout drop-down menu.

4. Select Grid, Vertical, or Horizontal from the drop-down menu.

Your changes will automatically be applied.

Editing your field's width

Take the following steps to edit your field's width.

1. Ensure the Layout is set to Grid.

2. Navigate to the field you'd like to adjust the field width for.

3. You will see a 50% or 100% field width option.

4. Select the option you'd like to apply.

Your changes will automatically be applied.

Note: The Grid must be set as the Layout option in the sidebar to edit the width of qualifying fields.

Overview

The importance of mobile-friendly designs can't be overstated. While the builder's default settings aim for universal usability by automatically stacking columns on mobile devices, you may want to fine-tune this behavior. This section outlines the features designed to optimize the mobile responsiveness of your emails and landing pages.

Desktop vs. Mobile Preview

The default vertical stacking is widely supported. However, some email clients that lack CSS support will default to the desktop layout.

Customizable Mobile Behavior

Do Not Stack on Mobile:

• This row property prevents the default column stacking.

• Located in the sidebar, toggled off by default.

Reverse Stack on Mobile:

• Reverses the stacking order of columns in mobile view.

Mobile Styles

• Offers granular customization like text size and padding.

• Available only in mobile design mode.

Special Considerations

Not every design benefits from the default mobile settings. Vertical stacking may distort navigation bars or other unique design elements. Therefore, always preview and test your design across different devices to ensure optimal user experience.

Best Practices

Although the builder offers options to override default behaviors, it's generally recommended to allow vertical stacking for a more mobile-friendly layout. Nevertheless, the final decision rests on your design requirements and creativity.

Overview

Mobile Design Mode is a feature within the builder that facilitates the creation and adjustment of designs for mobile devices. It offers an easy way to toggle between desktop and mobile views, simplifying the optimization process. It allows specific settings to be applied only to the mobile version of the design.

How It Works

In the builder interface, you'll find toggle icons in the upper left-hand corner that let you switch between desktop and mobile views. Switching to mobile view reduces the builder content area to 320px. This mode features a grey backdrop for better visibility but it's not part of the design.

When you are in mobile view, you can proceed to use the builder's features just as you would in desktop view. The only exception is that the content area width option is unavailable.

Settings that can be applied specifically to the mobile version of the design are marked with a mobile indicator icon in the sidebar.

Visibility Options

Next to the design mode toggle, you'll find a visibility icon resembling an eye. This feature is off by default. When enabled, it allows you to see content that is set to be hidden on the type of device corresponding to your current design mode. Hidden content will appear translucent.

Hidden Content

Content that's hidden depending on the device type appears translucent in the design mode. For example, if you have two logos, one optimized for desktop and one for mobile, and you hide them appropriately, they will appear translucent in the opposite design mode.

If you wish to edit this hidden content, you'll need to switch to the design mode where it's visible. However, settings for these content blocks can be changed from any view.

Mobile-Specific Design Settings

Mobile Design Mode offers optimization settings that are exclusively applicable to mobile devices. These settings include:

• Alignment

• Button width

• Padding

• Spacer height

• Text size

Look for the mobile icon in the sidebar to identify these options. If there are no mobile-specific settings, the icon will be gray. Once you make changes to these settings, the icon will turn purple, indicating that changes have been made specifically for the mobile version of the design.

Overview

The Undo, Redo, and History functions are essential tools that enhance your editing experience in the builder. They provide you with a safety net for changes, allowing you to navigate back and forth in your edit history effortlessly.

User Interface

When you make a change in your design, an "Undo widget" appears at the bottom left corner of the builder interface. This widget consists of three main elements:

• Undo Arrow: Takes you back one step in your edit history.

• Redo Arrow: Reapplies an undone action, moving you forward in the edit history.

• History Icon: Opens a timeline that shows a list of your most recent changes.

History Timeline

Clicking on the History Icon opens a timeline displaying your recent actions. For each event, the builder provides:

• Type Icon: An icon to indicate what type of content changed (image, text, etc.)

• Description: Details about the change, often including the new value of the modified element.

• Timestamp: The exact time when the change took place.

These details offer a high degree of precision when you want to revert to a specific prior state.

Selecting Previous Steps

When you click on an entry in the history timeline, the builder highlights the specific content or row that was edited, providing you with context for the change.

Persistence and Limitations

The Undo widget remembers up to 15 of the most recent changes during the current browser session. However, it doesn't store changes made during other browser sessions. If you want to revert all the way to the start, you can rewind to the "opened" step in the timeline.

Co-Editing Considerations

Note that the introduction of a Co-editing feature impacts the behavior of the Undo/Redo functions to prevent unwanted changes when multiple people are editing.

Version Restoration

If you need to revert to a previous version of the entire design, there is usually a separate "design version history" feature that you can use for that purpose.

Understanding how to use these Undo, Redo, and History features effectively will give you more freedom and confidence while editing, knowing that you can easily correct any mistakes or revisit earlier versions of your design.

Setting Up Your Form

When creating a new page in the builder, forms can be effortlessly integrated by dragging and dropping the Form content block onto the stage. Upon doing so, you'll encounter several formatting options in the sidebar, such as:

• Width

• Alignment

• Font Family

• Font Weight

• Font Size

Customizing Form Elements

Further down in the sidebar, you'll see sections for tweaking specific elements within your form. These include:

• Manage fields

• Label options

• Field options

• Button options

Each section houses unique options tailored to the Form content block.

Manage Fields

Here, you can add, edit, or rearrange up to ten types of form fields, such as:

• Multiple Choice

• Date

• Email (mandatory)

• Number

• Single Choice

• Dropdown

• Phone

• Text

• Long Text

• URL

You'll also find a dedicated field for customizing your form's submit button. This button is required and its text can be modified.

Fields can be set as either required or read-only, and the "Edit field modal" lets you change the type of form field you've chosen.

Label Options

Labels are the text associated with each field in your form. The Label Options section allows you to:

• Format the text

• Set label position to 'Top' or 'Side'

• Modify label width (only available when 'Side' is chosen for label position)

Field Options

This section lets you personalize the appearance of form fields by allowing you to:

• Set background color

• Customize border

• Set a distinct border color for selected form fields

• Change the text input color

Button Options

This field lets you style your form's submit button, offering the same formatting options available in a regular button content block.

Accessibility Keys for Form Content Blocks

This section outlines and describes the accessibility keys currently available for navigating the Form content block. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.

Setting Your Focus

Take the following steps to set your focus:

1. Select the Form Block: Use ArrowUp or ArrowDown to navigate through the builder and locate the Form content block. It will be highlighted with a high-contrast border to show it's selected.

2. Activate the Form Block: Press Enter to activate the form for editing. This step allows you to interact with the form's properties and settings but does not place it onto the stage.

Customizing Properties

Take the following steps to customize your properties:

1. Navigate to Form Settings: With the form block activated, use Tab to move through the sidebar settings where you can adjust form width, alignment, font settings, and more. Use Shift-Tab to navigate these settings in reverse.

2. Manage Form Fields: The sidebar offers options to manage fields where you can add or edit various field types like email, number, dropdown, and text. Each field can be set as required or read-only, providing flexibility in how information is collected. Note that rearranging fields is not supported in accessibility mode.

3. Customize Field Appearance: Customize each form field's appearance by adjusting label positions, setting label widths, and formatting text. You can modify the form's submit button, including its text and style, to match your design's aesthetics.

Exiting and Saving Changes

Use the following key to exit and save your changes:

• Press Esc to exit the form settings and apply your changes. This ensures that all modifications are integrated properly into your project.

AI-Powered Translations Overview

With this feature, you can easily and quickly create translations using the builder and add them to your email, page, or popup designs. Powered by DeepL, this model is renowned for its accuracy and ability to produce high-quality translations. This is particularly beneficial for anyone who needs to support multiple languages for a single design.

Prerequisites

Before using this feature, ensure you have the following:

• DeepL AddOn activated and available in the builder

• Multi-language templates enabled

• One defined primary language and up to five additional languages also specified

How to Use

Follow these steps to use AI to automatically generate translations for your template language versions:

1. Enter your design.

2. Navigate to the language version of your design you'd like to translate.

3. Click on the Translate button inside the builder.

The translated content will automatically appear in the selected language version of your template.

Benefits of Using AI-Powered Translations

• Accuracy: DeepL is known for its high-quality translations.

• Efficiency: Automatic translations save time and effort.

• Multi-Language Support: Easily manage content in up to six different languages.

The following video provides a visual example of how to use the Translate feature to create multi-language versions of your designs.

The following video provides a visual example of how to perform these steps.

AI-Generated Images Overview

With this feature, you can easily and quickly create AI-generated images using the builder and add them to your email, page, or popup designs. Powered by Stable Diffusion from Stability AI, this model is famous for its accuracy and its ability to produce stunning visuals. This is particularly beneficial for anyone who needs high-quality images for their designs.

Prerequisites

Prior to using this feature, ensure you have the following:

• Stability AI AddOn Activated and available in the builder

How to use

Take the following steps to use AI to generate images and add them to your designs within the builder.

1. Enter your design.

2. Navigate to the section of your design you'd like to an an AI-generated image to.

3. Drag and drop the Image content block on to the canvas where you'd like your image to appear.

4. Click on the Image content block on the canvas.

   You will notice the Content Properties appear inside the panel located on the right-hand side of the screen.

5. Click the Create with AI button.

6. Complete the following required information:

   1. Prompt: A description of what you'd like the image to be of.

   2. Negative prompt: A description of what you do not want included in the image.

   3. Aspect ratio: You can select 1:1, 4:3, 3:2, or 16:9.

   4. Style: The type of style you'd like to apply to your image.

   5. Advanced Options (Optional): You can set the CGF tolerance and the Steps.*

7. Click Generate image

The AI-generated image will appear after a few seconds. You can decide to apply the image, to regenerate it, or you can edit the prompts and settings to generate a new image.

*Reference the following definitions to understand the impact of setting CFG tolerance and steps when submitting your prompt to create an image.

• CFG Tolerance: Controls how closely the AI should adhere to the prompt. Higher values lead to more accurate interpretations, while lower values allow for more creative freedom.

• Steps: The number of processing iterations the AI will perform. More steps typically result in higher-quality and more detailed images, but take longer to generate.

The following video provides a visual example on how to use the Create with AI image option.

Overview

Leveraging artificial intelligence as a productivity tool is becoming increasingly popular. At Beefree, we are developing new features using AI to help make your design experience smoother and more efficient.

The AI-generated Preheaders, Titles, Subject Lines, and Meta Descriptions feature enables you to leverage AI capabilities to increase your productivity within the page and email builders. This feature will pull context from your design to create a relevant preheader, title, subject line, or meta description for you.

In this article you will learn more about how to use this feature within the builder.

Generating Content with AI

This section discusses how you can use this feature with both the email builder and the page builder.

Page Builder

In the page builder, you can generate your Title and Meta Description using artificial intelligence. This section discusses how to leverage AI-generation for these two fields within the page builder.

Titles and Meta Descriptions

To generate Tiles and Meta Descriptions within the page builder using AI, take the following steps:

1. Enter the page builder

2. Navigate to Settings

3. Scroll to OPTIONAL PROPERTIES

   1. Click the wand icon on the right-hand side

      A drop-down menu will appear with three different options

4. Select the option you would like to generate

   A window will appear

5. Select a Tone of voice from the dropdown menu

6. Review the generated responses

   Confirm the responses meet your content requirements

7. Click APPLY ALL

You will have the following options to select from in the drop-down mentioned in step three:

• Generate all details

• Generate title only

• Generate description only

Note: You will have the option to regenerate responses with AI if you do not like what is initially generated. Regenerating responses will use additional tokens.

The following GIF displays an example of adding a title and meta description at the same time using AI.

Email Builder

In the email builder, you can generate your Subject Lines and Preheaders using artificial intelligence. This section discusses how to leverage AI-generation for these two fields within the email builder.

Subject and Preheaders

To generate Preheaders within the email builder using AI, take the following steps:

1. Enter your email builder

2. Navigate to Settings

3. Scroll to OPTIONAL PROPERTIES

   1. Click the wand icon on the right-hand side

      A drop-down menu will appear with three different options

4. Select the option you would like to generate

   A window will appear

5. Select a Tone of voice from the dropdown menu

6. Review the generated responses

   Confirm the responses meet your content requirements

7. Click APPLY ALL

You will have the following options to select from in the drop-down mentioned in step three:

• Generate all details

• Generate subject only

• Generate preheader only

Note: You will have the option to regenerate responses with AI if you do not like what is initially generated. Regenerating responses will use additional tokens.

The following GIF displays an example of adding a subject and preheader at the same time using AI.

Token Limitations

While using this feature, you may experience token limitations. Each Title, Subject, Preheader, and Description you generate using this feature requires tokens to generate the text using AI. If you do not have enough tokens in your account, you will not be able to generate these fields. The application will; however, inform you about your available tokens and redirect you to purchase more if you do not have sufficient to complete your current task.

Tone of Voice

When using this feature, you will have the following options to select from for tone of voice:

• Native

• Informal

• Persuasive

• Descriptive

• Visual

• Humorous

• Narrative

• Formal

Overview

Co-editing is a feature that enables multiple users to work on the same design simultaneously. Designed to enhance team collaboration and streamline the design process, this feature shows real-time edits made by all participants. In addition to seeing live changes, co-editing also integrates with a commenting feature for more efficient communication. A maximum of 5 users can participate in a single co-editing session.

User Identification

When you enter a co-editing session, avatars for each participant appear at the bottom of the builder interface. Each avatar has a unique color and displays the user's initials. These visual cues help identify who is actively participating in the co-editing session.

Real-Time Changes

All changes made during a co-editing session are automatically updated across the builder for every participant. If a sixth person attempts to join, they will be notified that the maximum number of users has been reached and must wait for someone to exit before they can join.

Integration with Commenting

Co-editing works seamlessly with the Commenting feature in the builder. Each user’s comments are tagged with an avatar matching their co-editing avatar. These colors are system-assigned and cannot be changed, providing a consistent method for identifying who made each comment.

Limitations: Undo and Redo

The undo and redo features are deactivated during a multi-user co-editing session to prevent unintended changes to another user's work. For example, if Julia and Andrés are both editing, Julia could inadvertently undo Andrés' changes if she used the undo feature.

However, these features work as expected if you are the only one in the builder, restoring their functionality when the co-editing session has only one participant.

Overview of Multi-language Templates

With Multi-language templates, you can integrate multiple languages into a single design without needing to create separate versions. Whether for email campaigns or webpage content, the builder simplifies the localization process. You can add translated content to these templates, with the option to leverage AI assistance for efficient translations. This feature helps avoid creating and managing separate designs for each language, reducing localization costs and improving team efficiency.

Multi-language templates also ensure consistency in design elements, which helps maintain your brand identity across different language versions. Ultimately, these templates enable you to create content that resonates with your international audiences.

Prerequisites

To use this feature, ensure you have the following:

• Multi-language templates enabled

Translatable Content

The following list shows the translatable content for each content block through Multi-language templates:

How to Use Multi-language Templates

Take the following steps to create a Multi-language Template:

1. Navigate to your email or page design.

2. Enter the design.

3. On the top bar, click the globe icon.

4. A modal with Multi-language Settings will open.

5. Select a Primary language from the drop-down menu.

6. Select the number of additional languages that you'd like to add.

7. Click Save.

Adding Translated Content

Once you add your Primary and Additional languages to your Multi-language Settings, you can add your translated content to each language design.

There are two methods for adding translated content:

1. Use AI to translate your template content

2. Manually translate your content for each design

To use AI to translate your template content visit the Automatic Translations article.

How to Preview Multi-language Templates

1. Inside your email or page design, click the Preview icon in the top bar.

2. You will be redirected to the Preview page.

3. Click the globe icon in the top bar to open the languages drop-down.

4. Select a language from the drop-down.

5. Preview the design for the corresponding language.

Edit Optional Properties

To edit optional properties for each language:

1. Enter the design language you would like to edit details for.

2. Click the Settings tab inside the side bar located on the right-hand side of the screen.

3. Manually type in the metadata for the corresponding design.

   Note: You can also use AI to automatically generate your design's metadata.

4. Click Save.

Export Options

Take the following steps to export your design's HTML in different language versions:

1. Enter your multi-language template.

2. Select language version to export.

3. Click the Export button.

4. Confirm the export.

Page Multi-language Templates Considerations

Consider the following when working with Multi-language templates in pages:

• When you publish a multi-language page design, you also publish each language version of the design.

• You can select the language version when you share a page on social networks.