Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Beefree SDK enables you to customize the appearance of a variety of elements. Reference the following sections to learn more about how you can customize appearance:
This feature is available on Beefree SDK paid plans only.
With Content Defaults, you can define how content looks when dragged into an email or page.
When adding new content elements through the Content tab, you may want a default style that matches one of these options:
your application’s color scheme;
your user’s branding guidelines;
the look & feel of the template used to create the message or page.
For example, here is how a button dragged into the stage looks by default:
The background color is always light blue (HEX code #3AAEE0).
The font size is always 16px.
The font is Arial, unless a different Default font was set for the template loaded in the editor.
The border radius is set at 4.
The CTA is a formally correct, but laconic “Button”.
Instead, when applying Content defaults, the button dragged by your users could look out of the box like this:
We’ve used a dark grey color (HEX code #555555), an Ubuntu font at 22px in Bold, with a border radius of 10 and a nice “READ MORE” call-to-action.
Content Defaults are part of the Configuration parameters passed to your Beefree application during startup, so you can have different sets of them for different users.
By setting up your Content defaults, you’ll be able to address styling and branding needs for you and your customers.
If your application uses dark grey for the primary CTA, then you probably would want a default button in the Beefree builders to follow that style.
If your application has brand settings that are used for your app’s UI or for assets managed in your application, you may want those to apply also to default content in the Beefree editors.
If you’ve customized how the editor looks like, either through Themes or Custom CSS, you may want default content to adhere to the same style.
Since the Social block is one of the available Content defaults, you can define what social platforms – either present in the Beefree editors or added by you – are included when a social block is added to a message or page. For example, you can have a default social block with three platforms defined in the Beefree system and a fourth, custom one (Messenger):
To set up the content styles you will need to add the contentDefaults
object to beeConfig
:
You can add all the content styles, some of them or just one. It is up to your application to create them for all the users or for a segment, as there are no related server-side settings; basically you can customize them each time the editor starts.
All the contents use the same pattern, but the object must match the content schema for the type of content (described in the following section).
Please note that the default text inside html
is required.
Additionally, listStyleType
supports the following: revert, auto, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman.
Note: If content defaults are incorrectly formatted, the following onWarning will be triggered and the default table will be used instead:
If the user tries to load a template that contains a malformed Table (for example if a row in it does not contain all its cells), the template is not loaded, and the onError is triggered.
The following code displays an example error for this scenario.
You can choose whether to display the builder sidebar on the left or on the right side of the screen.
Available positions:
left
right
Here is the same sample application, with the same template and same content element selected, and the sidebar displayed on the left…
… and on the right.
The configuration document needs the following, new parameter:
The Content Tile Sorting option allows the host application to change the order of the content tiles in the editor’s sidebar. This allows the host application to display the content blocks that are most important for their users first, and even provide additional visibility for a Custom Addon.
To use this feature, the host application must simply pass in the preferred order inside the configuration passed at initialization, like so:
The host application can pass as many or as few content blocks as they want. If only one content tile is specified, then only that content tile will be placed at the top, and the rest of the content tiles will follow the default order.
For Custom/Partner AddOns, the host application passes the “Content Title” value found in the Addon section of the Beefree SDK Console Application Configuration.
This feature is available on Beefree SDK only.
This feature is available on Beefree SDK and above. If you're on the Essentials plan, for free to try this and other Core-level features.
This feature is available on Beefree SDK paid plans only.
The default Beefree SDK theme is grayscale and generally can be used with any color scheme. In v3, you can now choose between a dark and light theme for the loading animation, so it can better fit the host application’s UI. If you would like to change the loading icon and/or have more granular control of the loading theme, please view our article about using custom CSS.
Available themes:
light
dark
This feature is available on Beefree SDK Core plan and above. If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.
The default tab configuration option lets the host application decide which content should be visible first in the sidebar when the editor is loaded.
In Beefree SDK v2, the default tab is the Content tab and this behavior could not be changed. It’s still the behavior that we recommend for most scenarios.
However, apps that rely heavily on pre-built custom rows, or saved row libraries, may now choose to highlight the Rows tab, using the following configuration options.
Available Options:
content
rows
settings
Building upon the default tab configuration option, in Beefree SDK v3 you may also re-organize the way tabs are ordered.
This feature is available on Beefree SDK Core plan and above. If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.
This Beefree SDK configuration allows you to change the builder’s appearance when rendered within your application so that it will blend even more seamlessly with the rest of your user interface.
Technically speaking, it allows you to change some parts of the CSS (Cascading Style Sheets) that controls the look & feel of the editor. If you want to use your own CSS, please refer to our Custom CSS feature.
To change the builder’s appearance with just one click – and to familiarize with this feature – try one of the available, pre-built themes. All of them were created based on UI best practices, such as using the right amount of contrast between elements.
You can apply one of these themes as is, or use them as a starting point. And you can roll back to the default theme at any time, if things go wrong.
Note that themes will not be applied automatically, but rather will change the Look & feel values displayed in the lower part of the page.
Once you’re happy with your selection, press Save to apply the new theme to your Beefree SDK application.
The properties that make up a theme are divided into sections for clarity and easy of use.
The basic settings for your theme. They provide control over the font used and the general color scheme.
Font URL
You can use a Web font by adding the URL of a public CSS file (e.g., https://fonts.googleapis.com/css?family=Roboto)
Font-family stack
Will be used as font-family property. Remember that – when using web fonts – a fallback value will help to deal with downtime or network issues.
Brand color palette
Use this section to configure basic properties of your color scheme. These colors will be displayed in buttons, active widgets, hover & selection helpers, etc.
The Primary color will be the most important color in your scheme, as it will identify highlighted elements. Here are two examples of how a highlighted row is rendered using two different themes (the default theme is shown at the top).
The stage is the area where the message is displayed while you design it. The main elements will inherit colors from General | Brand Color Palette so only the text color is available as an editable property.
This section controls the appearance of the right panel’s top tabs. You can add custom colors and even hide the default icons (which may be useful for some translations in order to create more real estate for the text labels). Here is an example (left: default theme, right: aubergine).
These sections will help you customize the tiles that are used for content items and row structures. Here is an example (left: default theme, right: aubergine).
This is the title bar that is displayed in the right side panel when you select an item on the editing stage. It displays important information and actions that can be performed on that item.
All the properties displayed in the right side panel when you select an item in the editing stage are a mix of shared widgets.
The following is a visual guide of the available customizations (left: default theme, right: aubergine).
This feature is available on Beefree SDK Superpowers plan and above. If you're on the Core or Essentials plan, upgrade a development application for free to try this and other Superpowers-level features.
The Content Tile Grouping option allows the host application to group content tiles in the editor’s sidebar. This allows the host application to display the content blocks into distinct groups.
Content Tile Grouping supports:
Text labels
Special Characters
Emojis
Please note that emoji support may be determined by the OS or browsers used. Some browsers do not support, or may display emojis incorrectly.
To display custom groups, the application must pass the groups settings in the configuration at initialization, like so:
Custom groups can be collapsed and opened by default by changing the collapsable
and collapsedOnLoad
values.
Ungrouped tiles will be gathered at the bottom of the list under a group with no label.
Duplicated tiles are not allowed, e.g., you can’t have a tile twice in the sidebar.
An onWarning
notification is triggered whenever an unknown tile is added to the configuration.
If you want to organize or include AddOns, and Custom AddOns under a custom group, mention the name used in the Beefree SDK Console.
Please note, the AddOn needs to be enabled to appear in the sidebar.
This feature is available on Beefree SDK Superpowers plan and above. If you're on the Core or Essentials plan, upgrade a development application for free to try this and other Superpowers-level features.
To define a custom look and feel through a CSS stylesheet, assign the URL of your CSS file to the customCss
property in your JavaScript code, as shown in the following example.
You can customize the builder's CSS for different users by dynamically setting the customCss
property with a unique CSS file URL for each user. Simply concatenate the user-specific identifier to the base URL as shown in the example code.
Custom CSS is an advanced feature, which gives the host application great flexibility to customize the UI/UX of the builder.
Please use this feature with caution.
When used properly, it is a powerful tool that can be leveraged to accomplish anything from applying custom styles with fine granularity to changing icons.
When misused, however, it may harm the user experience and the rendering capability of the builder’s stage. For example, styles applied to the stage via CSS will not be reflected in the preview or exported HTML.
If you're looking to hide certain UI elements, we recommend you first check if that can be accomplished with Advanced Permissions, as it may be easier to implement.
For the best possible results, please follow these best practices:
Avoid using generic global styles. (e.g. *, p, input, etc.) that could propagate to the editing stage.
Use CSS selectors to select specific elements and groups (e.g. body.bee–cs h3).
Do not attempt to pass JavaScript or any other scripts via CSS.
Ensure the custom CSS URL is hosted over HTTPS.
Do not link to CSS files hosted on GitHub, or by any 3rd party.
Never style elements on the stage, since those styles will not appear in the final HTML, and therefore lead to a confusing user experience.
Please note that classnames with the --cs
suffix are reliable selectors for customCSS.
Other selectors such as the following should be avoided as much as possible:
Nested tag structure (e.g. div > div > div
)
Siblings (input + label
)
Classnames without –cs (e.g. .icons__item)
Prefixed classname selectors (e.g. div[class^="StageModuleIcons_itemRow"]
)
Reference the following Sample Custom CSS Theme to see an example of how you can use custom CSS in your web application.
Classnames in CSS are identifiers used to define and apply specific styles to HTML elements. They enable developers to target elements more efficiently and apply styles across multiple elements consistently. Classnames make it easier to manage and control the appearance of web pages through styling.
Reference classnames for custom CSS.
This article lists the classnames for different buttons within the sidebar, aimed at developers seeking to customize or understand the styling applied to these components. You can use this information to more easily modify or enhance the user interface of your web application.
This section will cover button classnames for the following sidebar areas:
This section lists the classnames for buttons within the content area of the sidebar.
This section lists the Add-on sidebar widget sub-elements and classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Carousel sidebar widgets, sub-elements, and classnames.
This section lists the Dynamic sidebar widgets, sub-elements, and classnames.
This section lists the Form sidebar widgets, sub-elements, and classnames.
This section lists the Form sidebar widgets, sub-elements, and classnames.
This section lists the Icons sidebar widgets, sub-elements, and classnames.
This section lists the Image sidebar widgets, sub-elements, and classnames.
This section lists the List sidebar widgets, sub-elements, and classnames.
This section lists the Menu sidebar widgets, sub-elements, and classnames.
This section lists the Paragraph sidebar widgets, sub-elements, and classnames.
This section lists the Social sidebar widgets, sub-elements, and classnames.
Social Icon Item
This section lists the classnames for buttons within the row area of the sidebar.
This table lists the classnames for buttons within the settings area of the sidebar.
Favicon item
Radiogroups in the context of our web application refer to a UI component that groups together a set of radio buttons, allowing users to select one option from multiple choices. Each radiogroup is associated with specific classnames that define the appearance and behavior of the grouped buttons within the sidebar's layout. These classnames, such as radiogroup--cs
and radiogroup-button--cs
, are crucial for ensuring consistent and functional navigation in your application's user interface.
This section will cover widget classnames for content in the sidebar. This section will list the classnames for the following sidebar tabs:
This section lists the classnames for widgets and content within the row area of the sidebar.
This section lists the classnames for widgets and content within the Row & Content area of the sidebar.
This section lists the classnames for widgets and content within the Content area of the sidebar.
This section lists the classnames for widgets and content within the Settings area of the sidebar.
Content Area Alight
This section covers classnames for the column structure widget.
This section discusses and lists the various CSS classnames relevant to the application's sidebar widgets where textual input is required. These classnames facilitate the styling and functional integration of widgets such as URLs, images, alt texts, and more, providing a comprehensive guide for developers to enhance the user interface effectively.
This section will cover button classnames for the following sidebar areas:
This section lists the classnames for widgets within the Content tab.
This section lists the classnames for widgets within the Rows tab.
This section lists the classnames for widgets within the Settings tab.
The various classnames and data-qa
attributes associated with entities within the application that feature sliders. These identifiers are crucial for styling and testing purposes, tailored to different areas like Add-On, Button, Form, and Image entities where sliders are a key component.
This section will cover button classnames for the following sidebar areas:
This section lists the classnames for sliders within the Content tab.
This section lists the classnames for sliders within the Settings tab.
Sub-Element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-elemet | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Sidebar Tab | Deprecated Classnames | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Entity | Sidebar Widget | Deprecated | New Classnames | Data-QA | Notes |
---|---|---|---|---|---|
Entity | Deprecated | New Classnames | Data-QA | Notes |
---|---|---|---|---|
NA
btn
btn-primary
add-on-sidebar-button--cs
NA
btn-primary
BeeButton_*
ai-sidebar-icon--cs
Special links
href-container__link
href-container__link--special-link
href-special-link--cs
Link file
href-container__link
href-container__link--link-file
href-link-file--cs
Add custom special link
href-container__link
href-container__link--special-link
href-custom-special-link--cs
Add new attribute
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
toggle-menu-button--cs
Delete
field-remove
delete-attribute--cs
NA
btn
btn-primary
icon-manager__add-icon
BeeButton_*
icon-manager__add-icon--cs
Change image
NA
carousel-item-change-image--cs
Delete
NA
carousel-item-delete-image--cs
NA
btn
btn-primary
BeeButton_*
select-merge-content--cs
NA
NA
content-dialog-button--cs
Edit
field-edit
form-field-edit--cs
Delete
field-remove
form-field-delete--cs
Add new field
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
toggle-menu-button--cs
NA
btn-primary
BeeButton_*
ai-sidebar-icon--cs
Button
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
icons-add-icon--cs
Change image
btn-primary
BeeButton_*
BeeIcons_*
icons-change-icon--cs
Apply effects
btn-default
BeeButton_*
BeeIcons_*
icons-edit-icon--cs
Delete
BeeButton_*
BeeIcons_*
icons-delete-icon--cs
NA
btn
btn-image-editor
btn-default
BeeButton_*
btn-image-editor--cs
NA
btn
btn-file-picker
btn-secondary
BeeButton_*
btn-file-picker--cs
Special links
href-container__link
href-container__link--special-link
href-special-link--cs
Link file
href-container__link
href-container__link--link-file
href-link-file--cs
Add custom special link
href-container__link
href-container__link--special-link
href-custom-special-link--cs
Add new attribute
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
toggle-menu-button--cs
Delete
field-remove
delete-attribute--cs
NA
btn
BeeButton_beeButton*
ai-sidebar-icon--cs
NA
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
menu-items-add-button--cs
Delete
BeeButton_*
BeeMenuItems_*
menu-items-delete-button--cs
Link file
href-container__link
href-container__link--link-file
href-link-file--cs
NA
btn-primary
BeeButton_beeButton*
ai-sidebar-icon--cs
Button
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
social-add-icon--cs
Delete
icon-remove
icon-remove--cs
Change image
btn-primary
BeeButton_*
BeeSocialIcons_*
social-change-icon--cs
Apply effects
btn-default
BeeButton_*
BeeSocialIcons_*
social-edit-icon--cs
Choose image
btn
btn-file-picker
btn-secondary
btn-primary
BeeButton_*
btn-file-picker--cs
Change video
btn
btn-file-picker
btn-primary
BeeButton_*
btn-file-picker--cs
Select condition
btn
btn-primary
BeeButton_*
row-display-condition-select-button--cs
Add condition
btn-default
BeeButton_*
row-display-condition-add-button--cs
Edit condition
btn-default
BeeButton_*
row-display-condition-edit-button--cs
Open builder
btn
btn-primary
BeeButton_*
row-display-condition-builder-button--cs
Add new
column-manager--add
BeeButton_*
column-manager-add--cs
Delete
column-manager--delete
BeeButton_*
column-manager-delete--cs
Add favicon
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
favicon-add-icon--cs
Change favicon
btn-primary
BeeButton_*
favicon-change--cs
Delete
BeeButton_*
favicon-delete--cs
NA
NA
radiogroup--cs
radiogroup-button--cs
active--cs
NA
tgl-container
tgl-container--cs
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_background-toggle-content-area
multiToggle_option_background-toggle-row
btn-primary
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Carousel
Divider
Form
Heading
Html
Icons
Image
List
Menu
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-mobile__desktop
hide-on-mobile__mobile
btn-primary
hideOn-confirm-modal-icon--cs
radiogroup--cs
radiogroup-button--cs
active--cs
confirm-modal-icon--cs
Button
Divider
Form
Heading
Html
Icons
Image
List
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-amp__amp
hide-on-amp__html
btn
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Form
Form Label Options
Form Button Options
Heading
Icons
Image
Menu
Paragraph
Social
Divider
item_1-2
widget__label
btn
btn-default
align-left
active
btn-align-left
btn-align-right
btn-align-center
btn-align-justify
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Form Label Options
Heading
Paragraph
List
Text
item_1-2
widget__label
active
btn-line-height--120
btn-line-height--150
btn-line-height--180
btn-line-height--200
radiogroup--cs
radiogroup-button--cs
active--cs
List
icon-toggle
icon-toggle--cs
icon-toggle-item
icon-toggle-item--cs
icon-toggle-item--active
radiogroup--cs
radiogroup-button--cs
active--cs
Form Label Options
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_descriptor_form_style_labels_label-position_0
multiToggle_option_descriptor_form_style_labels_label-position_1
btn-primary
static-label
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Heading
List
Paragraph
paragraph-item
paragraph-item--active
radiogroup--cs
radiogroup-button--cs
active--cs
Dynamic Content
item_1-2
widget__label
radio-button
radio-button__radio
radiogroup--cs
radiogroup-button--cs
active--cs
NA
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_content_computedStyle_align_0
multiToggle_option_content_computedStyle_align_1
btn-primary static-label
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
Rows
PanelGroup_handle*
panel-group-dragging--cs
column-manager-delete--cs
column-manager-add--cs
panel-divider--cs
Form - Label
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
multiToggle_option_descriptor_form_style_labels_font-weight_0
multiToggle_option_descriptor_form_style_labels_font-weight_1
button-default--cs
button-medium--cs
button--cs"
active
multi-toggle--cs
multi-toggle-btns--cs
toggle-btn-pressed--cs
Form - Button
title_icon
icon-organizer__panel
panel__icon-preview-wrapper
panel__title
comp-tree-placeholder
multi-toggle--cs
multi-toggle-btns--cs
toggle-btn-pressed--cs
Social
item_1-2
widget__label
title_icon
icon-organizer__panel
panel__icon-preview-wrapper
panel__title
comp-tree-placeholder
social-collection-list--cs
panel__title--cs
Icons
item_1-2
widget__label
icon-organizer__panel
panel__icon-preview-wrapper
panel__title
comp-tree-placeholder
icons-collection-list--cs
panel__title--cs
URL
number-selector--cs
input-image-url
item_1-2
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Alt Text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Dynamic Image > Dynamic URL
number-selector--cs
alternate-text--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox btn
input-text--cs input
text-boxed--cs
dynamic-image-url--cs
Web page > URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Mail to
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Subject
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Body
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Tel > Tel
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send SMS> Tel
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send SMS > Message
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Attributes
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Alt text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Image URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Alt text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Icon Text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Field label
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Block identifier
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Row background image
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Row background video
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Row background image
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Title
number-selector--cs
alternate-txt--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-title--cs
Description
number-selector--cs
alternate-txt--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-description--cs
Subject
number-selector--cs
alternate-text--cs
item_1-2
widget__textbox
widget__label
widget__label--textboxbtn
input-text--cs
input-text-boxed--cs
page-metadata-subject--cs
Preheader
number-selector--cs
alternate-txt-cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-preheader-cs
Add-On (Image)
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Button
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Form
Width
Button Width
BeeWidthSlider_*
rc-slider*
widget-BeeImageWidth
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Image
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Content Area Width
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element