Block Editor Block Types

Block Types

The Content Block Editor has a variety of Blocks to choose from for you to easily build your page.

CLICK HERE to learn about the Content Block Editor

Text Block

A Text block can be used for text, images, videos, pretty much any type of content that you would normally be able to add in a WYSIWYG editor.

Click the icon and select Text Block to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the Block Options tab.

You can use Dynamic Data Placeholders by clicking the {x} button, and can switch to HTML mode by clicking the <> button.

CLICK HERE to learn about Placeholders

If you are using a Link in your Text Block you can choose to open the link with a built-in preview. This will only work for Files hosted inside of your Portal.

Single Image Block

A Single Image Block is used to display an image of your choice.

Click the icon and select Single Image to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the Block Options tab.

Image Type: Upload an image, or choose to display a custom image from a Dynamic Image Placeholder in your Contact's or Company's profile. This gives you the option to display the custom image for the Salesperson or Coordinator. You can also choose to display the Contact's or Staff's Avatar. 

CLICK HERE to learn about Dynamic Image Placeholders

Full Width: Toggle to ON for the image to automatically expand to the full size of the Block.

If you'd like to manually set the dimensions, set the toggle to OFF and input values in the Width and Height fields.

Image Style: Keep the image as-is, or apply a circular cutout effect by using the dropdown menu.

Alignment: Alight the image to the center, left or right of the Block.

Empty Space Block

An Empty Space Block can be used to space out your content. You can apply styling to it to make it more of a visual separator.

Click the icon and select Empty Space to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the Block Options tab.

Set the pixel height of the Block.

Horizontal Separator Block

A Separator Block makes it easier to divide your content into sections.

Click the icon and select Separator to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the  Block Options tab.

Separator Style: Choose the type of separator line that will be used.

Size: Choose the pixel height of the line.

Width: You can set width of the line by percentage.

Color: Use the Color Picker to set the color of the line. You can also set transparency.

Alignment: Align the separator to the center, left, or right of the Block.

iFrame Block

An iFrame Block can be used to embed content within an Inline Frame. It basically acts as a secondary webpage within your main page.

Click the icon and select iFrame Block to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the Block Options tab.

Source Type: Choose between URL or Custom Field URL. For URL, you can paste the direct link into the Embed URL field. For Custom Field URL, you will need to choose the Custom Field from the dropdown menu. You'll need to create them first. At this time, you can choose from CRM-Company, CRM-Contact, and Staff Custom Fields.

CLICK HERE to learn about URL Custom Fields

Full Width: Toggle to ON for the content to automatically expand to the full size of the Block.

If you'd like to set the dimensions manually, set the toggle to OFF and input values in the Width and Height fields.

Alignment: Align the content to the center, left or right of the Block.

Embed Block

An  Embed Block can be used to embed documents, videos, and interactive media.

Click the icon and select Embed Block to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the  Block Options tab.

Embed Code: Paste the embed code into this field. Embed code is code that is generated by a third-party website for you to use.

Alignment: Align the content to the center, left or right of the Block.

Video Block

A Video Block can be used to embed videos.

Click the icon and select Video Block to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the  Block Options tab.

Video Source: Choose between YouTube or Vimeo.

Source Type: Choose between URL or Custom Field URL. For URL, you can paste the direct link into the Embed URL field. For Custom Field URL, you will need to choose the Custom Field from the dropdown menu. You'll need to create them first.

URL: The direct URL to the video you want to embed.

Full Screen: Allow the video to play in Full screen mode.

Full Width: Toggle to ON for the content to automatically expand to the full size of the Block.

If you'd like to manually set the dimensions, set the toggle to OFF and input values in the Width and Height fields.

Alignment: Align the content to the center, left or right of the Block.

Button Block

A Button Block can be used to create a clickable button that directs you to a different page ( within the platform or an external page), or opens a widget for the user to interact with.

Click the icon and select Button Block to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the  Block Options tab.

Button Text: The text that will appear on the button.

Click Action: Set what happens when the user clicks on the button in this Block. 

• Navigate to Direct or Relative URL: Direct the user to an external source or to a static area inside of the platform.
• Navigate to URL from Custom Field: Direct the user to the data provided from a URL Custom Field, which can be unique for each user.
• Placeholder Link: Direct the user to an area within the platform using a dynamic link, which will be unique depending on which user is logged in.
• Navigate to Portal Page: Direct the user to a particular Portal Page.
• Open Appointment Scheduling Pop-up: This will open the Appointment Scheduling widget, which the user can use to book an Appointment.
• Navigate to [Platform Area]: You can select from an extensive list of areas of the platform to direct the user to, such as "History of Payments", "Send New Message", etc.
• Forms > Staff Submit: You can select from a dropdown with a list of all active Forms. When the button is clicked this will redirect the User to the Staff Submit Form page for the selected Form.

CLICK HERE to learn about URL Custom Fields

CLICK HERE to learn about Placeholder Links

Auto-Template: When toggled on you will be able to select a pre-configured Auto-Template from the dropdown. You have the option to include a Success Message that will appear when this menu item is clicked. You can also limit the number of triggers/clicks and determine what to do once that limit has been reached. 

Open New Tab: Choose whether or not you would like the page to be opened in a new tab. This is recommended if references will still need to be made to the origin page.

Width: Set how wide the button will appear.

Height: Set how tall the button will appear.

Alignment: Align the button to the center, left, or right of the Block.

IMPORTANT: When choosing a Portal Page as the link, the user will automatically be assigned to that page if they are not already. You can also choose to quickly create a new Portal Page to link to, in which case the assignments as well as the Category / Menu Group will be copied and applied.

Chart Block

A Chart Block lets you create a visual representation of data in charts and graphs.

Click the icon and select Chart to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the  Block Options tab.

Title: You can optionally include a title to be shown above the chart.

Chart Type: Choose to display your data in one of several types of charts.

Values: Reorder, edit, duplicate, or delete the data points for your chart to display. Click the +Add New Value button to create a new one.

Click the icon to configure the value. You can change its label, number value and color. You can also choose to manually input a number value, or pull the data from a Number Type Custom Field.

CLICK HERE to learn about Custom Fields

Width: Set how wide the chart will appear.

Height: Set how tall the chart will appear.

Alignment: Align the chart to the center, left or right of the Block.

Progress Bar Block

A Progress Bar Block lets you create progress bars, which are a visual representation of progression.

Click the icon and select Progress Bar to add it. To edit the Block, click the icon in the toolbar.

A modal will appear in which you can edit the content. This will open the Block Options tab.

Title: You can optionally include a title to be shown above the progress bar(s).

Values: Reorder, edit, duplicate, or delete the data points for your progress bars to display. Click the +Add New Value button to create a new one.

Click the icon to configure the value. You can change its label, number value and color. You can also choose to manually input a number value, or pull the data from a Number Type Custom Field.

CLICK HERE to learn about Custom Fields

Completed Value: The number you enter here will determine what constitutes a full bar. For example, 50/100 would be half of the bar, while 50/500 would only be a tenth of the bar.

Show Value: By default the progress bar(s) will not reveal the current value that determines its progress. You can choose to display the value, as well optionally choose a unit to accompany it (such as #, /100, etc.)

Progress Type: Choose to display your progress bar in a straight line, or an arc (doughnut-shape).

Progress Styles: You can spice up your progress bars by applying a stripe effect. You can also choose to animate the stripes moving left or right.

Label Styles: Configure the color, style, and size of the font of the text that appears inside of the progress bar(s). You can also choose to make the text bold.

If you have progress bars in multiple colors, inverting the label color can help to make the text readable if you choose to invert the colors. This will override the font color setting.

Width: Set how wide the progress bars will appear.

Height: Set how tall the progress bars will appear.

Alignment: Align the progress bars to the center, left or right of the Block.