Dynamic Island

How it works

Dynamic Island creates a TOC inside it with the elements that match the elements set at TOC Selector.
It is also a nestable widgets so you can place any content at it: custom code, templates, global widgets and shortcodes.
You can combine both approaches or leave TOC Selector empty if you dont require it.

Content tab

Settings group

TOC Selector: the selector used to target elements to build the Table of Contents inside Dynamic Island (TOC). It can be a class, id, tag…
Scroll Margin Top: the space left at the TOC Selector targets when scrolling to them.
Direction: to place the TOC before the nested elements (Column) or the other way around (Column Reverse).

Elements groups

Dynamic Island is made up of several elements. Each of them can be customized at the following groups:
Island: the element that wraps everything, the Island Header and the Links Wrapper.
Island Header: the part of the Island visible by default. It wraps the Progress, Title and Percentage.
Progress: the circular progress at the left, inside Island Header.
Texts: here you can set the Title’s text and all Typographies. Links controls are to style the links inside the Table of Contents (TOC).
Links Wrapper: the container of the TOC and all the nested elements you want to put at Dynamic Island.
Overlay: when the Dynamic Island is opened this Overlay will appear so that the Island is highlighted above everything at the page.