Text & Image

Widget Categories: Basic

The Text & Image widget allows you to add an image with wrapped text into your site. You can move the image anywhere in the container and the text will automatically wrap around it. For information on adding widgets, see Add Widgets

Content Editor

The option to access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.

1. Select Left or Right for the Image Position.
2. Click on the image or Replace to select the desired image from the Image Picker. You have the following options:
   • Link Image. Images can be linked to other pages and URLs, popups, anchors, email addresses and downloadable files. When a visitor clicks on the image, they will be taken to the link.
   • Alt text. Enables search engines to recognize image content. Use this text to describe the image.

Type the text you want to display around the image in the Paragraph field.

📘

NOTE

The long text field provides various text formatting options, such as italicizing, bolding, or underlining text.

Design Editor

To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.

In the Design Editor, you can adjust the image size and position, and a border to the image as well as to the frame of the widget. The text style can also be adjusted.

📘

NOTE

Click the Keep proportions toggle before adjusting the image's size to maintain the image's dimensions.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design

Widgets: List

Widget Categories: Basic

The List widget allows you to display content in one of several pre-formatted layouts, making it easy to organize information or content for your site visitors.

For more complex lists consider using the restaurant menu widget or building the list with rows columns and other elements.

For information on adding widgets, see Add Widgets

📘

TIP

For more information on widgets and the widgets library, see Widgets: Library and Overview

Dynamic Content

The widget can also display dynamic pages. For more information, see Dynamic Content: Display and Navigation Options for Collection Records.

Content Editor

The option to access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.

1. Select to include an_ Image element_ and _ Link element_ to be associated with each item on your list.

2. Click Build your list to start adding content.

3. Click Add Item to add additional items to the list.

4. Type a title in the Main list title field provided.

5. Click an existing list item to open the List Settings. You have the following options:

   • Image Click to add an image.
   • Item label. Type the item label. To hide the label, click the eye icon.
   • Description. Type a description for the item. To hide the description, click the eye icon.

📘

NOTE

The long text field provides various text formatting options, such as italicizing, bolding, or underlining text.

• Add link. Click and select the type of link you want to add to the item.
• Text on link. Type the text to display on the link. To hide the text on the link, click the eye icon.

6. Re-order the list items by clicking and dragging on the 3 dots to the left of each item.
7. To return to the first page and set if links and images are displayed, click click here to change elements.

Design Editor

To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.

• Click the Layout tab to select a layouts for the list.
• Click List Title, Item Title, Item Description, or Link to control the text styling for those fields.
• Click Image to modify the images border and give images rounded edges.
• Click Divider to select from several different divider styles.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design

Widgets: Tabs

Widget Categories: Basic

The Tabs widget is an excellent way of displaying content efficiently on your site. Visitors can click between tabs (rather than scroll through text) to view related content. Tabs are a great way of showing content such as Services, Plans or Team members in compact, connected sections.

Each tab can contain a label, title, description, image and button, and each of these elements can be fully customized.

For information on adding widgets, see Add Widgets

📘

TIP

For more information on widgets and the widgets library, see Widgets: Library and Overview

Dynamic Content

The widget can also display dynamic pages. For more information, Dynamic Content: Display and Navigation Options for Collection Records.

Content Editor

The option to access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.

1. To add a new tab, click Add Tab.

2. To edit the image (and alt text), Tab label, Label heading type, Title, Description, and button, click the tab.

   • Header tags are available to make your text more easily identifiable by search engines. It is recommended you select H3 for the Label Heading Type.
   • The alt text field for the image can be found at the bottom.

3. To display images on the tabs, click the Show image toggle.

Design Editor

To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.

• Click the layout to select a different layout for the tabs.
• Click All Tabs to customize the style of unselected tabs, reverse the tab direction, and control the tab layout on mobile.
• Click Selected Tab & Hover to customize the text style and background. This does not affect the All Tabs design.
• Click to change the Description Style, Button Style, and Image Style.

📘

NOTE

The long text field provides various text formatting options, such as italicizing, bolding, or underlining text.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design

📘

NOTE

• You can have as many tabs you want, but keep in mind that the space for each label is reduced with each new tab.
• There are 2 layout options for mobile display, tabs and accordion. The tabs layout can be controlled by swiping.

Mobile View

There are 2 layout options for mobile display, tabs and accordion. The tabs layout can be controlled by swiping. However, not all mobile browsers support swiping behavior, in which case you can use the accordion view on mobile.

To change the Tabs widget for mobile:

1. In the top navigation bar, click the device view to switch the view to mobile.
2. Right-click the widget, and click Edit Design
3. Click All Tabs, and then click the Display as Accordion toggle.