Offcanvas widget

With the Offcanvas widget you can easily create a fly-out content panel.

Content

General settings

Add a needed amount of elements using +ADD ITEM button or copying items that are already added and choose the Animation type.

In each element’s settings you can choose a Content type between Custom Content, Navigation, Sidebar, Saved Section and Saved Page Template.

Here you can also choose the element’s Alignment between Left, Center and Right and set desired Padding and Gap Between blocks in canvas for desktop, tablet and mobile.

Colors for the element’s Title,Text and Background can be also set here.

Trigger

Alignment: Choose between Left, Center, Right or Justified alignment.

Type: Choose between Icon, Text and Both (Icon and Text) types.

In the Icon type you can set the Icons for Normal and Active modes from Icon library or upload desired SVG and choose the View between Default, Stacked and Framed. When the Stacked or Framed view is chosen you can also set the Shape (square or circle).

In the Text type you can add the desired Text and choose the View between Default, Stacked and Framed. When the Stacked or Framed view is chosen you can also set the Shape (square or circle).

In the Icon and Text type you can set the Icons for Normal and Active modes from Icon library or upload desired SVG and choose the View between Default, Stacked and Framed. When the Stacked or Framed view is chosen you can also set the Shape (square or circle).

You can also add the desired Text here.

Close Button settings

Position: Choose between Inside and Outside button position.

Alignment: Choose between Left, Center, Right or Justified button alignment.

Type: Choose between Icon, Text and Both (Icon and Text) types.

In the Icon type you can set the Icon from Icon library or upload desired SVG and choose the View between Default, Stacked and Framed. When the Stacked or Framed view is chosen you can also set the Shape (square or circle).

In the Text type you can add the desired Text and choose the View between Default, Stacked and Framed. When the Stacked or Framed view is chosen you can also set the Shape (square or circle).

In the Icon and Text type you can set the Icons for Normal and Active modes from Icon library or upload desired SVG and choose the View between Default, Stacked and Framed. When the Stacked or Framed view is chosen you can also set the Shape (square or circle).

You can also add the desired Text here.

Close with Click on Overlay: Slide to YES to close popup upon click/tap on overlay.

Close by ESC button click: Slide to YES to close popup by a click on ESC button.

Style

Canvas

Background Type: Choose between Classic and Gradient background type and set it.

Padding: Set padding for desktop, tablet and mobile.

Border Type: Choose a Border Type from the dropdown and set it.

Item

Alignment: Choose between Left, Center and Right alignment.

Typography: Set Typography using settings from the dropdown

Title color: Choose desired Title color here.

Background color: Choose desired Background color here.

Gap Between: Set a Gap between Title and content.

Border Type: Choose a Border Type from the dropdown and set it.

Border Radius: Set a Border Radius to item.

Padding: Set padding for desktop, tablet and mobile.

Text

Set Typography using settings from the dropdown and Text Color via color palette or dynamic tags.

Link

Set Typography using settings from the dropdown and Link Color for Normal and Hover modes.

Divider: Choose a Divider type from the dropdown and set it.

Trigger

Primary Color: Choose a Primary color for Normal, Hover and Active modes.

Secondary Color: Choose a Secondary color for Normal, Hover and Active modes.

Typography: Set a Typography using settings from the dropdown.

Icon Size: Choose the Icon Size for desktop, tablet and mobile.

Padding: Set a Padding for desktop, tablet and mobile.

Border Radius: Set a Trigger border radius.

Box Shadow: Choose desired settings from the dropdown.

Close Button

Primary Color: Choose a Close button color for Normal and Hover modes.

Icon Size: Set desired Icon size for desktop, tablet and mobile.

Menu

Main

Typography: Set a Typography using settings from the dropdown.

Color: Choose a Color for Normal,Hover and Active modes.

Dropdown

Typography: Set a Typography using settings from the dropdown.

Color: Choose a Color for Normal,Hover and Active modes.

Advanced

Set the Advanced options that are applicable to this widget