Content/Formatting/Display Options for Marketing Content

In the WYSIWYG Editor for marketing content, there are three areas you can use to configure your content and layout.

• Content - elements that represent different types of content in the page, e.g. paragraph or title
• Rows - elements that define the structure of the page and the horizontal arrangement of sections in the page
• Settings - global design and layout settings that rows and content blocks inherit (each content block can have its own properties, which override the default)

The portal WYSIWYG Editor is powered by Beefree - see here for some useful information resources:

• Beefree Academy - Designing in the Beefree Builder
• Beefree's YouTube channel

Descriptions of the options available in each section are given below.

Content Rows Settings

The Content area of the WYSIWYG Page Editor includes a series of tiles that represent the different kinds of content block you can use in your page.

To use a block, drag and drop it into a column. The content item will auto-adjust to the column width.

Every content block has its own settings, such as fonts, alignment, colors, padding, links, etc. Click on a content block in the WYSIWYG Editor to expose the Content Properties panel, where you can configure the settings. The panel appears when the content block is active, this is indicated by a blue outline. Here, the image block is the active one, and displays its own set of configuration options in Content Properties.

While in the Content Properties configuration menus, click the Content header to return to the object selection view.

Content Blocks

Content Properties

Action

Button Options

Field Options

Label Options

Manage Fields

Layout

Header

Block Options

Content Blocks

The content blocks that you see depends on the type of content you're editing.

Label	Icon	Use
Title		Header or title. An option to use AI to generate content is provided for a Title block.  BeeFree article - https://support.beefree.io/hc/en-us/articles/360018812559-Working-with-titles
Paragraph		Text content. An option to use AI to generate content is provided for a Paragraph block.  BeeFree article - https://support.beefree.io/hc/en-us/articles/4529155229458-Working-with-paragraph-and-list-content-blocks#01FZ91M22QNS997GZBNY5NDH99
List		A list of options. BeeFree article - https://support.beefree.io/hc/en-us/articles/4529155229458-Working-with-paragraph-and-list-content-blocks#01FZ91M22Q43635JE34QDZYG71
Image		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
Button		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
Table		A table. BeeFree article - https://support.beefree.io/hc/en-us/articles/17780903953298-Table-Content-Block
Divider		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
Spacer		A transparent divider between sections of your page. BeeFree article - https://support.beefree.io/hc/en-us/articles/4410353741458-Using-dividers-and-spacers
Social		Links to social media sites - Facebook, X (Twitter), 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		HTML-formatted content. BeeFree article - https://support.beefree.io/hc/en-us/articles/360004496092-Working-with-custom-HTML
Video		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.
Icons		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

Content Properties

These options are available in the Content Properties panel - the table below indicates which content blocks they are available for.

See this BeeFree article for default styling settings for content - https://docs.beefree.io/beefree-sdk/other-customizations/appearance/content-defaults

Property	Content Blocks	Description
Title	Title	The HTML header level for a title.
Font family	Title  Paragraph List Table Form	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.
Font weight	Title  Paragraph List Table Form	Whether to output the text in regular or bold weight.
Font size	Title  Paragraph List Table Form	The size of text in the block, in pts. Use the - and + icons to decrease or increase from the default (18pt)
Text color	Title  Paragraph List Table	The color of text in the block.
Link color	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.
Align	Title  Paragraph List Image Table Divider Social	The alignment of the block’s content in its container. Left Center Right Justify
Line height	Title  Paragraph List Table	The space between the lines in text content, expressed as a percentage of the font size: 120% 150% 180% 200%
Letter spacing	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
Paragraph spacing	Paragraph	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
List type	List	Whether to generate an ordered (numbered) or unordered (bulleted) list.
List style type	List	The style of numbers or icons for the list.
Start list from	List	For a list of type Ordered The number at which to start the numbering of the list.
List items spacing	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.
Nested items indent	List
Text direction	Title  Paragraph List Table	Whether to output text content in left-to- right or right-to-left reading direction.
Auto width	Image	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
Full width on mobile	Image	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).
Dynamic image	Image	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 For more information, see Using Dynamic Images in a Custom Page. BeeFree article - https://support.beefree.io/hc/en-us/articles/360004546091-Using-dynamic-images-for-countdown-timers-and-personalized-content
Choose image	Image	Access the File Manager, where you can choose the image file to be used: Choose from one of the images you already have uploaded Upload a new image Import a set of images to choose from Search from a list of stock photos
Url	Image	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 -
Alt text	Image	The text to be shown in the image’s location in the email/page when images are turned off.
Image rounded corners	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.
Transparent	Divider	Whether to remove the line included with a Divider.
Line	Divider	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.
Width	Divider Form	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.
Height	Divider Spacer	The height of the space applied by the Spacer or by the Divider with the Transparent setting.
Select icon collection	Social	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.
Configure icon collection	Social	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
Icon spacing	Social	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.
HTML content block	HTML	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
Video url	Video	The type of video presented in the Video container. Note: This setting is not available when creating emails - you have the option to add a URL to a YouTube or Vimeo video in an email. Thumbnail - YouTube or Vimeo videos, shown as a thumbnail with a Play button in the page You have options to configure the type, colour and size of the Play icon. Embedded (default) - YouTube or Video videos, embedded directly into the page Enable Controls to control the video progress bar. You can choose to have the video play on a continuous loop, by enabling the Loop option. If Loop is disabled, the video will play once then the viewer has to click the Play button again. Hosted - self-hosted MP4 videos Controls and Loop options are available for hosted videos. BeeFree articles - https://support.beefree.io/hc/en-us/articles/4420167900562-Adding-video-to-your-page https://support.beefree.io/hc/en-us/articles/360004495732-Adding-video-to-your-email
URL	Video	The URL to the video file. The 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);
Title	Video

Action

This section of properties allows you to configure an action to take when clicking on an image or a button. This is optional for both elements.

Property	Content Blocks	Description
Image link	Image	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).
Link type	Button	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).
Url	Image	The path to the image you want to use.

Button Options

This section of properties controls the appearance of Button blocks and buttons in a Form block.

Property	Content Blocks	Description
Auto width	Button Form	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.
Font family	Button	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.
Font weight	Button	Whether to output the button text in regular or bold weight.
Font size	Button	The size of text in the button’s label. Use the - and + icons to decrease or increase from the default (14)
Font style	Form	Whether to output button text in the form in bold or italic style.
Text color	Button Form	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.
Background color	Button Form	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.
Align	Button Form	The alignment of the button in its container, or in the form. Left Center Right
Line height	Button	The space between the lines in a multi-line button label, expressed as a percentage of the font size: 120% 150% 180% 200%
Letter spacing	Button Form	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
Text direction	Button	Whether to output the button’s label in left-to-right or right-to-left reading direction.
Content padding	Button Form	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
Padding	Button Form	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
Border	Button Form	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
Border radius	Button Form	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.

Field Options

This section of properties controls the appearance of the fields in a Form block. Use the Manage Fields section to specify what fields should appear in the form.

Property	Content Blocks	Description
Text color	Form	The color of text in the form’s input fields. Use the custom color selector to pick a color or input the color manually with an HTML hex code.
Background color	Form	The background color of the form’s input fields. Use the custom color selector to pick a color or input the color manually with an HTML hex code.
Content padding	Form	The space applied between the content in a field (either placeholder text or when entered by a user) and the field outline. A default value of 5 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. Toggle More Options to on, to access padding settings for the individual sides. A maximum of 60 per side is permitted. Note: A Content Padding setting will affect the visual size of the form’s fields. 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
Border	Form	The border for the fields in the form. A default gray border is applied to all sides of the button. 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. 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#01G6KMHEV4KX6K8QS6EKTQYDDA
Border radius	Form	The corner style of the fields in the form, 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.
Active field outline color	Form	The color in which the field the user is currently editing is outlined. Use the custom color selector to pick a color or input the color manually with an HTML hex code.

Label Options

This section of properties controls the appearance of the fields in a Form block. Use the Manage Fields section to specify what fields should appear in the form.

Property	Content Blocks	Description
Text color	Form	The color of text in the form's field labels. Use the custom color selector to pick a color or input the color manually with an HTML hex code.
Align	Form	The alignment of the form’s field labels. Left Center Right Use the Label position option to specify where the label should appear in relation to the field (top or side).
Line height	Form	The space between the lines in a multi-line field label, expressed as a percentage of the font size: 120% 150% 180% 200%
Letter spacing	Form	The amount of space between letters in the form’s labels. 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
Font style	Form	Whether to output field labels in the form in bold or italic style.
Label position	Form	Where to position the field labels, in relation to the fields: Top - above the field Side - on the left side of the field Using the Side option can result in unevenly sized fields, depending on the length of the label. Use the Width property to standardize the size, if required.
Width		The width of the field labels and the button in the form. This property is exposed if the Label position is set to Side. Having field labels of various lengths can result in unevenly sized fields - a field will be sized to accommodate the area taken up by its label. For example: this form has a field label width of 0 - the fields are uneven in size as all the fields, and the button, fill up their available space: Increasing the field label width to 100 standardizes the field size:

Manage Fields

This section specifies the fields that will appear in a Form block. Use the Field Options and Label Options sections to control the appearance of the fields and their labels.

Property	Content Blocks	Description
Manage Fields		The fields to present in the form. Use Add New Field to include a new field - you can select from any core contact fields, or your custom contact fields (of type Lead Contact). This ensures that contact records get populated correctly when a user completes the form. When you’ve added a field, you can leave the default name (from the contact field) or type in your own label. Click Edit to make changes to the field as used in this form (this will not change the base configuration of the field. In Edit field, you can make these types of change: Update the label Change the type Add placeholder text Manage the list of values a user can select Note: to present an option with a readable label, rather than just its code, enter a value in the form label|code, for example Australia|Au. Enable Required or Read-only properties Drag and drop fields to the required location in the form using the button. Click Delete to remove a field from the form.

Layout

This section specifies the layout properties for a Table block.

Property	Content Blocks	Description
Columns	Table	The number of columns in the table. Use the - and + icons to decrease or increase from the default (3), or type in a number.
Rows	Table	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.
Border	Table	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
Background color	Table	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.
Striped rows	Table	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)

Header

This section specifies the header properties that will appear in a Table block.

Property	Content Blocks	Description
Header row	Table	Whether the table should have a header row.
Background color	Table	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.
Font weight	Table	Whether to output the header text in regular or bold weight.
Font size	Table	The size of the text in the table header. Use the - and + icons to decrease or increase from the default (14)
Text color	Table	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.
Align	Table	The alignment of content in the table header cells: Left Center Right Justify

Block Options

Property	Content Blocks	Description
Padding	Title Paragraph List Image Button Table Divider Social Video Form	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.
Hide on	Title Paragraph List Image Button Table Divider Spacer Social HTML Video Form	Hide an element from desktop or mobile users. By default, all elements are visible to both.
Layout preview	Title Paragraph List Image Button Table Divider Social Video Icons Form	Previews the effect of updates you make to layout settings, e.g. padding. BeeFree article - https://support.beefree.io/hc/en-us/articles/360031602991-Locking-content-to-prevent-editing#01FYQE782WH27DBXMG8V4KTSKJ

Here you will find different types of rows to insert into your pages to create visually appealing pages.

Rows are structural units that define the horizontal composition of a section of the page by using columns. You can use from one to six columns.

Using more than one column allows you to put different content elements side by side. Each box in the configuration image represents a slot where you can insert a content type. For example, with the row configuration of four evenly spaced boxes, you can put four content types on one row.

You can add to your pages all the structural elements you need, regardless of the template you selected when you started.

Every row has its own settings, which gives you flexibility. For example, you can select a background color for the entire row, only the content area, or a specific column within it.

Drag-and-drop row configurations from the Rows tab into the Page Content editor to control how many rows and columns appear on your portal pages.

Drag-and-drop using the cross-arrow to change the order of your rows or to move content panels.

Click into a row to change the following Row Properties and Column Properties:

Note

You will know you’re clicking the right area when you click on a blank space around a content panel and the Row Properties panel opens on the right hand side of the window. The active row is highlighted in blue.

Parameter	Type	Description
Backgrounds
Row background color	Color selector	Apply a background color to the row. Use the custom color selector to pick a color or input the color manually with an HTML hex code.
Content area background color	Color selector	Apply a background color to content in the row. Use the custom color selector to pick a color or input the color manually with an HTML hex code.
Row background image	Toggle	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.
Borders
Content area border	Multiple	Set the border around content and customize its color, width, and style.
Content area rounded corners	Multiple	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.
Layout
Content Area Padding	Multiple	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
Vertical align	Selector	Choose the vertical alignment for the content in this row: align at top, align on bottom, or center.
Stack on mobile	Toggle	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.
Hide on	Selector	Select a device type (Desktop or Mobile) on which to hide this content.
Dynamic Content
Display condition		Create custom scripts that conditionally display content.
Columns Structure
Columns Structure	Multiple/Toggle	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.
Column background	Color selector	Apply a background color to the column. Use the custom color selector to pick a color or input the color manually with an HTML hex code.
Padding	Multiple/Toggle	Adjust the padding around the column. Toggle More options to on to expose individual settings for each side of the column.
Border	Multiple/Toggle	Set the border that appears around the column. Toggle More options to on to expose individual settings for each side of the column.

The Settings panel allows you to specify the global formatting options for your page. These are inherited by rows and content blocks. For example, the font family set in the global settings is then used everywhere on your page except where you use a custom setting. Global settings can be overridden in individual rows and content blocks.

Settings are useful to build a coherent page quickly.

Parameter	Type	Description
Content area width	Slider	Set the default width of content areas.
Content area alignment	Selector	Set the default alignment for text in content areas - Center is the default, or you can choose Left.
Background color	Color selector	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.
Content area background color	Color selector	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.
Default font	Drop-down	Set the default font for all text. This can be changed in the text editors for individual content blocks.
Link color	Color selector	Set the default color for all hyperlinks. This can be changed in the text editors for individual content blocks.