HomeRoadmapCommunity forum
Knowledge base
Go to Uplisting
Start typing to search…

Widgets: HTML , Advanced Tabs & Advanced Accordion

Widgets: HTML

Expand the capabilities of the website builder with custom HTML. This widget allows you to embed
custom code into your site, and can be used to embed third-party widgets such as videos, contact
forms, and more.

While adding custom code can extend your site's functionality, we recommend you only add code from
a trusted source. Only add code if you know exactly what it does and how to troubleshoot it if it does not
work. For information on adding widgets, see Add Widgets

📘

TIP

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

Content Editor

To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode
or Editor 2.0, 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.

📘

WARNING

Additionally, please review the Critical Information for HTML Widget section in this article.

The HTML widget provides a space for you to add custom HTML. Just paste or write your HTML in the
provided text box.

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.

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

Critical Information for HTML Widget

  • We recommend creating a backup of your site before adding custom code to it so that you can reload
    a previous version if something goes wrong.
  • Server-side scripts (for example, PHP and ASP) will have no effect in this widget. We recommend
    using client-side (Javascript, HTML) scripts only.
  • Our editor uses HTTPS, so if your script loads an external non-HTTPS file, it will not work.
  • Our system uses jQuery 3.0 to function, so implementing a new version of the jQuery library will
    usually cause our editor to stop working. For this reason, we recommend that any custom code you
    add use the functions in jQuery 3.0 and not attempt to re-initialize the library.
  • Note that depending on how the custom code is written, the HTML widget may become inaccessible.
    The HTML widget is still on the page, it is just not visible. For this reason, we recommend you place
    the HTML widget in a column or container of its own so if it needs to be deleted, you can simply
    delete the column or container.

Add Connected Data to HTML Widget

You can insert fields from a collection or the Content Library into the HTML widget, and use the widget
in your dynamic pages. This is helpful when you want to include an HTML widget in your dynamic
pages without having to store all of the HTML code in the collection. Instead, only the unique data or ID
is stored in the collection.

For example, if you want to embed an element in your Dynamic Page – a podcast from SoundCloud, an
external calendar or any customized code – and you want it to be different in each dynamic page, you
can store the ID in your collection and embed the code in the HTML widget.

To add connected data:

  1. Right click the HTML widget and select Edit Content, or Manage HTML if you are in Editor 2.0.
  2. Click Connect, then select the data field you want to connect the widget to.
  3. Click Connect this Data.

Once your HTML widget is successfully connect to the data in the Content Library, it is marked with a
blue Connected Data icon.

Widgets: Advanced Tabs

📘

NOTE

This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To
identify your current editor version, How to Identify the Editor Version Your Site Uses.

The Advanced Tabs widget allows site visitors to click between tabs (rather than scroll through text) to
view related content. A benefit to using the Advanced Tabs widget is that each tab can be designed independently to give you more flexibility and control. You can add multiple inner columns and rearrange
them, and add any widget you would like.

To add the Advanced Tabs widget:

  1. In the side panel, click Add, then click Widgets.
  2. Search for Advanced Tabs, then drag and drop the widget onto the canvas.

Content Editor

Click a tab on the Advanced Tabs widget to open the floating menu, then click Content. From the
content menu, you can do the following:

  • Rename, duplicate, or delete a tab. Click the three dot icon next to the desired tab and select either
    Rename, Duplicate, or Delete.
  • Add a new tab. To add a new tab, click + Add tab.
  • Reorganize tabs. Drag and drop the tabs into the desired order.

Design Editor

Click a tab on the Advanced Tabs widget to open the floating menu, then click Design.

In the design panel, expand the Tab Default State and Tab Hover & Selected States sections.

From here, you can customize the text style, background, and tab direction for the tabs. The design
selections apply to the tabs themselves, but not to the content you add inside the tabs (inner columns
and widgets).

By default, each tab contains an inner column that you can add additional inner columns or widgets to.
The inner column design is set by the design panel. If you click the inner column, or an element inside
of it, you can make design changes to that particular element. This allows you to customize the design
of each tab independently.

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

Widgets: Advanced Accordion

📘

NOTE

This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To
identify your current editor version, see How to Identify the Editor Version Your Site Uses.

The Advanced Accordion widget provides additional design flexibility by allowing you to customize each
accordion item individually. Each accordion section can expand when clicked, allowing site visitors to
quickly access information and scroll past what they do not need. The Advanced Accordion can be
used to compactly display content such as FAQs, product highlights, or upcoming events.

To add the Advanced Accordion widget:

  1. In the side panel, click Add, then click Widgets.
  2. Search for Advanced Accordion, then drag and drop it into the desired place on the canvas.

Manage Accordion Content

To manage the accordion content, click the widget to open the floating menu and select Manage
Accordion Content. From here, you can complete the following actions:

  • Add a new item. Add a new accordion item by clicking Add Item.
  • Rename. Click the three dot icon and select Rename, then type a new name.
  • Duplicate. Click the three dot icon and select Duplicate. The duplicated item is titled Copy.
  • Delete. Click the three dot icon and select Delete.

To add widgets to accordion items, expand the desired accordion item, then drag and drop any widget
into the desired place. Each accordion item can have different widgets and layouts.

Accordion Design

The Advanced Accordion is unique because you can edit each accordion item separately and add
different widgets to each item.

Following are the available design settings:

Layout

  • _Show one expanded item at a tim_e. Each time a site visitor clicks to expand an accordion item, any
    other previously expanded items will collapse.
  • Show first item expanded. The first accordion item is expanded by default.
  • Text direction. Set the text direction to either right or left.

Item

The settings in the Item section apply to all accordion items. By default, the Theme styles are applied
first, but can be overriden by any selections you make in this section.

• Title text. You can customize font, font weight, size, color, format and alignment. If necessary, click
Reset to Site Theme Style to reset all title text settings.
• Toggle icon. The toggle icon is the plus sign that site visitors click to expand an accordion item. You
can customize the color and size of the toggle icon. You can also customize the area around the
toggle by selecting a background color or image, and then setting the padding and corner radius.
• Header. The header is the portion of the accordion item that is visible before it is expanded. You can
customize it by selecting a background color or image, and then configuring the border.

Frame

The frame is the area in between and around the accordion items and it controls the containers under
the items. You can customize the background, alignment, spacing, size, and animation

Updated 8 days ago

What’s Next