Content/Formatting/Display Options for Marketing Content

Header or title.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360018812559-Working-with-titles

Text content.

BeeFree article - https://support.beefree.io/hc/en-us/articles/4529155229458-Working-with-paragraph-and-list-content-blocks#01FZ91M22QNS997GZBNY5NDH99

A list of options.

BeeFree article - https://support.beefree.io/hc/en-us/articles/4529155229458-Working-with-paragraph-and-list-content-blocks#01FZ91M22Q43635JE34QDZYG71

An image.

Reuse a previously uploaded image, upload a new one, or search for free images that you can add to your page.

Bee Free articles -

• https://support.beefree.io/hc/en-us/articles/360004495312-Editing-Image-Properties
• https://support.beefree.io/hc/en-us/sections/4452287854738-Working-with-multimedia

A Call to Action button, such as the option to navigate to a new page.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360013514340-Custom-Workspace-Styles#h_01EFFM9RTTX3PB7BKDSMSQBBQ0

A table.

BeeFree article - https://support.beefree.io/hc/en-us/articles/17780903953298-Table-Content-Block

A dividing line between sections of your page. This can improve readability.

BeeFree article - https://support.beefree.io/hc/en-us/articles/4410353741458-Using-dividers-and-spacers

A transparent divider between sections of your page.

BeeFree article - https://support.beefree.io/hc/en-us/articles/4410353741458-Using-dividers-and-spacers

Links to social media sites - Facebook, X, or LinkedIn are supported.

A single Social element displays links to multiple social media profiles.

BeeFree article - https://support.beefree.io/hc/en-us/articles/23441287849618-Working-with-the-Social-Content-Block

HTML-formatted content.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004496092-Working-with-custom-HTML

Externally hosted video content from YouTube or Vimeo.

Bee Free articles -

• https://support.beefree.io/hc/en-us/articles/360004495732-Adding-video-to-your-email
• https://support.beefree.io/hc/en-us/articles/4420167900562-Adding-video-to-your-page

Note:

• The Editor cannot access password protected videos to get the cover image.
• If you are using Vimeo with the Hide this video from Vimeo.com setting enabled, the Editor will also be unable to generate the cover image.

A set of images without the restrictions of column row/column structures.

Several layouts can be created by combining icons or small images, often with some copy. Other designs may require having a set of images, e.g. logos, without the constrictions of row structures. Icons are best for this.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360014637580-Working-with-icons

Title 

Paragraph

List

Table

The font to use for text in the block.

Note: Select Global font to inherit the value set for the whole page/email in Settings >  Default font.

Title 

Paragraph

List

Table

Title 

Paragraph

List

Table

The size of text in the block, in pts.

Use the - and + icons to decrease or increase from the default (18pt)

Title 

Paragraph

List

Table

Title 

Paragraph

List

Table

The color of the display text for links in the block.

Note: An explicit setting here will override the default value set for the whole page/email in Settings > Link color.

Title 

Paragraph

List

Image

Table

Divider

Social

The alignment of the block’s content in its container.

• Left
• Center
• Right
• Justify

Title 

Paragraph

List

Table

The space between the lines in text content, expressed as a percentage of the font size:

• 120%
• 150%
• 180%
• 200%

Title 

Paragraph

List

Table

The amount of space between letters in text content, in px.

Use the - and + icons to decrease or increase from the default (0px), or type in a value. You can set a negative value with the icons. Manually entered values must be positive.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360019738279-Letter-and-Paragraph-spacing

The amount of space between paragraphs in text content, in px.

Use the - and + icons to decrease or increase from the default (16px), or type in a value. Only positive values are accepted.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360019738279-Letter-and-Paragraph-spacing

For a list of type Ordered

The number at which to start the numbering of the list.

The amount of space between the items in the list.

Use the - and + icons to decrease or increase from the default (0), or type in a value. Only positive values are accepted.

The indentation of subitems in a list.

Use the - and + icons to decrease or increase from the default (40), or type in a value. Only positive values are accepted.

Title 

Paragraph

List

Table

Whether to size the image to fill its Image container. The option is automatically enabled if the image is wider than the container.

Toggle the option off to expose the Width slider, and set the width of the image yourself.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004495312-Editing-Image-Properties

Whether to display the image at its original width in the Image container, when viewing the email/page on a mobile device.

This option is enabled if you’ve manually set the width of an image (Auto Width off).

Whether your image is dynamic, changing based on context.

If you toggle this option on, use these fields to specify how the image appears:

• Url - the placeholder/fallback image displayed
• Dynamic Url - the dynamic image
• Alt text - description of the image

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004546091-Using-dynamic-images-for-countdown-timers-and-personalized-content

Access the File Manager, where you can choose the image file to be used:

• Choose from one of the images you already have in ZiftONE Admin
• Upload a new image
• Import a set of images to choose from
• Search from a list of stock photos

The path to the image you want to use in the Image container.

You can either enter the URL manually, or have it populated by selecting the file using one of the options in Choose file.

Once the URL is populated and has been successfully resolved, you have these options:

Apply effects - access the image editor, where you can modify this usage of the image.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360019990672-Using-the-image-editor

Change image -

Whether the corners of an image should be rounded or square.

A value of 0 gives right angled corners, with no curve.

A value or 1 or higher gives rounded corners - the higher the value, the more rounded the corner.

Apply the same value to all corners, or click More Options to access settings for each individual corner.

Formatting properties for the line in the Divider:

• Style - solid, dotted or dashed
• Thickness - Use the - and + icons to decrease or increase from the default (1), or type in a value.
• Color - Use the custom color selector to pick a color or input the color manually with an HTML hex code.

The width of the line in the Divider, as a percentage of its container’s width (in % ).

Use the - and + icons to decrease or increase from the default (100%), or type in a value.

Divider

Spacer

The style of the social media icons presented in the Social Media container. Select one from the drop down list.

By default, a set of icons comprising Facebook, X, and LinkedIn is shown when you select a style. You can remove icons from the set, or add new ones, in Configure Icon Collection.

Default URLs are added for each icon - you can also change these in Configure Icon Collection.

The icons you want to display in the Social Media container, and how they should work.

Each icon includes a URL field, with a default value. You can change the value as required.

Click More Options to access more configuration options for each icon:

• Title
• Alt text - the text that should be displayed when images are turned off.
• Url - the URL to the social platform
• Target - whether the link will open in the current or a new page

Click Delete for an icon to remove it from display.

Click Add New Icon to add a new icon to the display, and set its URL, alt text and target action. You can select these types of social platform icon:

• Social Follow - connect your visitors/recipients to your social media accounts.
• Social Share - allow your visitors/recipients to share information.
• Other icons - link to a website, or include an email option.

You can add one of the pre-loaded icons or choose Add custom icon to use your own image.

Beefree article - https://support.beefree.io/hc/en-us/articles/23441287849618-Working-with-the-Social-Content-Block

The amount of horizontal space between the icons in a Social container.

Use the - and + icons to decrease or increase from the default (5), or type in a value.

Custom HTML code.

Paste your own HTML code or write it directly in the code entry area.

Click Expand to make the code entry window bigger.

BeeFree article (includes the list of allowed tags and attributes) - https://support.beefree.io/hc/en-us/articles/360004496092-Working-with-custom-HTML

The URL to the video file.

The Editor supports these types of video (depending on the type of content you're editing):

• Self-hosted URLs (i.e. URL for any self-hosted MP4 formatted video file)
• YouTube or Vimeo URLs - the only options for emails
• File Manager uploads
  • User files
  • Selection from free stock video libraries

These aspect ratios are supported:

• 4:3 and 16:9 (standard video formats)
• YouTube or Vimeo URLs
• 9:16 (YouTube shorts format)
• 21:9 and 9:21 (CinemaScope formats)

Note: the Editor can't access password-protected videos to get the cover image.

BeeFree articles -

https://support.beefree.io/hc/en-us/articles/360004495732-Adding-video-to-your-email

https://support.beefree.io/hc/en-us/articles/4420167900562-Adding-video-to-your-page

The action to take:

• Open a web page

  Add the URL to the target page.

  These additional options are available:

  - Link file (when editing emails and pages)

  - Link to an asset (when editing emails and pages)

  - Special links (when editing emails) - you can choose to add these types of link for users clicking on an image:

  Unsubscribe - Unsubscribe or Global Unsubscribe

  Misc - Opt-in, View Email in Browser, or Landing Page (where you can direct the recipient to the landing page associated with the email)

  - Target (when editing pages)

• Send an email

  Enter the address to which to send the email (Mail to), the subject line (Subject) and the content (Body) of the email.

• Make a call

  Enter the telephone number to call.

• Send an SMS

  Enter the cell/mobile number to message (Tel) and the content of the message (Message).

BeeFree article - https://support.beefree.io/hc/en-us/articles/8890491223954-Using-Internal-Links-in-Pages

The action to take:

• Open a web page

  Add the URL to the target page.

  These additional options are available:

  - Special links (when editing emails) - you can choose to add these types of link for users clicking on an image:

  Unsubscribe - Unsubscribe or Global Unsubscribe

  Misc - Opt-in, View Email in Browser, or Landing Page (where you can direct the recipient to the landing page associated with the email)

  - Link file (when editing emails and pages)

  - Link to an asset (when editing emails and pages)

  - Target (when editing pages)

• Send an email

  Enter the address to which to send the email (Mail to), the subject line (Subject) and the content (Body) of the email.

• Make a call

  Enter the telephone number to call.

• Send an SMS

  Enter the cell/mobile number to message (Tel) and the content of the message (Message).

Whether to automatically resize the button, for example if you’re adding a long label.

Toggle the option off to expose the Width slider, and set the width of the button yourself.

The font to use for the button text.

Note: Select Global font to inherit the value set for the whole page/email in Settings > Default font.

The size of text in the button’s label.

Use the - and + icons to decrease or increase from the default (14)

The color of text in the button’s label.

Use the custom color selector to pick a color or input the color manually with an HTML hex code.

The color of text in the button.

Use the custom color selector to pick a color or input the color manually with an HTML hex code.

The alignment of the button in its container, or in the form.

• Left
• Center
• Right

The space between the lines in a multi-line button label, expressed as a percentage of the font size:

• 120%
• 150%
• 180%
• 200%

The amount of space between letters in the button’s label.

Use the - and + icons to decrease or increase from the default (0), or type in a value. You can set a negative value with the icons. Manually entered values must be positive.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360019738279-Letter-and-Paragraph-spacing

The space applied between the label and the button outline.

Use the - and + icons to adjust the padding size, or type in a value. As a default, the value you set applies to all sides.

Toggle More Options to on, to access padding settings for the individual sides.

A maximum of 60 per side is permitted.

Use the layout preview option to get an idea of how the padding settings will render in output (padding in blue).

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004494732-Working-with-padding#01G6RTRS6KP5YMM6V5M0RA1B9N

The space applied around the button. A default value of 0 is applied to all sides of the content.

Use the - and + icons to adjust the padding size, or type in a value. As a default, the value you set applies to all sides.

Note: A Padding setting will affect the visual size of the button.

Toggle More Options to on, to access padding settings for the individual sides.

A maximum of 60 per side is permitted.

Use the layout preview option to get an idea of how the padding settings will render in output (padding in blue).

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004494732-Working-with-padding#01G6RTRS6KP5YMM6V5M0RA1B9N

The border for the button. A default transparent border is applied to all sides of the button.

Use the fields to select the style, width (px), and color of the border.

Note: if the width value is 0px, the border will not show, regardless of the other settings.

Toggle More Options to on, to access border settings for the individual sides.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004494952-Working-with-borders

The corner style of the button, based on the radius of a curved corner.

A value of 0 gives right angled corners, with no curve.

A value or 1 or higher (up to 60) gives rounded corners - the higher the value, the more rounded the corner.

Use the - and + icons to adjust the radius size, or type in a value.

The number of columns in the table.

Use the - and + icons to decrease or increase from the default (3), or type in a number.

The number of rows in the table (not including the header row). The header row is enabled/disabled and configured with the Header set of properties.

Use the - and + icons to decrease or increase from the default (3), or type in a number.

The border for the table and its cells. A default gray border is applied.

Use the fields to select the style, width, and color of the border.

Note: if the width value is 0, the border will not show, regardless of the other settings.

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004494952-Working-with-borders

The background colour of the cells in body of the table (excluding the header).

Use the custom color selector to pick a color or input the color manually with an HTML hex code.

Whether to have alternately shaded rows in the body of the table (excluding the header)

Toggle the option to on, then use Background colour to define the color for the shaded rows.

The rows will be colored according to these properties:

- Striped rows > Background color (odd rows)

- Background color (even rows)

The background colour of the cells in header of the table.

Use the custom color selector to pick a color or input the color manually with an HTML hex code.

The size of the text in the table header.

Use the - and + icons to decrease or increase from the default (14)

The color of text in the table header.

Use the custom color selector to pick a color or input the color manually with an HTML hex code.

The alignment of content in the table header cells:

• Left
• Center
• Right
• Justify

Title

Paragraph

List

Image

Button

Table

Divider

Social

Video

Icons

The space applied between the content in the block and the block outline. A default value of 10 is applied to all sides of the content.

Use the - and + icons to adjust the padding size. As a default, the value you set applies to all sides.

Toggle More Options to on, to access padding settings for the individual sides.

A maximum of 60 per side is permitted.

Use the layout preview option to get an idea of how the padding settings will render in output.

Title

Paragraph

List

Image

Button

Table

Divider

Spacer

Social

HTML

Video

Icons

Title

Paragraph

List

Image

Button

Table

Divider

Social

Video

Icons

Add a background image to this row.

Toggle this to On to enable background image upload.

Paste a URL into the URL box to upload a new image.

Click Change image to open the File Manager and upload an image file.

Click Apply effects & more to add filters, crop, or resize the image.

Add rounded corners to the content area in the row.

A value of 0 gives right angled corners, with no curve.

A value or 1 or higher gives rounded corners - the higher the value, the more rounded the corner.

Toggle More options to On to expose individual settings for each side of the content area.

Adjust the padding of the content area in the row.

Use the - and + icons to adjust the padding size, or type in a value. As a default, the value you set applies to all sides.

Toggle More Options to on, to access padding settings for the individual sides.

A maximum of 60 per side is permitted.

Use the layout preview option to get an idea of how the padding settings will render in output (padding in blue).

BeeFree article - https://support.beefree.io/hc/en-us/articles/360004494732-Working-with-padding

Toggle this to On for a better experience while reading on mobile devices. When enabled, content in the row stacks vertically on mobile devices.

Email design best practices suggest a careful use of this display setting, as keeping a user-friendly vertical layout on mobile makes sense in most cases. As always, it is up to you and your creativity when and how to use this option.

Add, remove, or adjust columns in an existing row.

• Highlight the row and click Add new to add a new column to the content.
• You can then adjust the size and location of the column, with drag and drop.
• Each new column is added with a width of 1 column. If no columns are added, the single one is 12 columns wide.

• Each column shows its relative width when it’s added, based on the 12 column maximum. For example, the default column is 12 columns wide - adding a 2nd column will change that to 11 columns wide, and add one at 1 column wide. Adding a third column will make 1 at 10 columns wide, and 2 at 1 column wide each.

  

• To remove a column, click the column and click Delete.
• Click each column in Columns Structure to access its Column background, Padding, and Border properties.
• Any operation is reversible if the Undo option is turned on in the Settings tab.

Adjust the padding around the column.

Toggle More options to on to expose individual settings for each side of the column.

Set the border that appears around the column.

Toggle More options to on to expose individual settings for each side of the column.

Set the default background color for a page.

Use the custom color selector to pick a color or input the color manually with an HTML hex code.

Set the default background color for main content areas.

Use the custom color selector to pick a color or input the color manually with an HTML hex code.

Set the default color for all hyperlinks.

This can be changed in the text editors for individual content blocks.