In this documentation, we will show you how to customize the Offcanvas widget presented by Element Pack Pro.

Inserting The Offcanvas Widget

Inserting the widget by following this,

1. Search by the Offcanvas widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Layout Section

Go to Content > Layout

Make the layout changes for the content section by following the controls,

1. Layout: Select the layout for the offcanvas.
2. Select Source: Select the data source for the offcanvas.
3. Choose Sidebar: Select the sidebar for the off-canvas.

4. Custom Content Before: Enable the switcher to open the custom content before.
5. Custom Content After: Enable the switcher to open the custom content after.
6. Overlay: Enable it to show the overlay.
7. Animations: Select animations to show the offcanvas.

8. Flip: Enable the switcher to show the offcanvas flip.
9. Close Button: Enable the switcher to show the close button.
10. Close Button Text: Set text for the close button.
11. Close Button Align: Set the alignment for the close button.

12. Close on Click Background: Enable the switcher to close the offcanvas by clicking on the background.
13. Close on Press ESC: Enable the switcher to close the offcanvas by pressing the ESC Key.
14. Width: Set width for the offcanvas.
15. Height: Set height for the offcanvas.

Custom Content Before Section

Go to Content > Custom Content Before

1. Set the custom content before on the text box.

Custom Content After Section

Go to Content > Custom Content After

1. Set the custom content after on the text box.

Button Section

Go to Content > Button

Customize the button section by following it,

1. Button Text: Set the text for the Button.
2. Button Alignment: Set the alignment for the button.
3. Offset: Set the offset position for the button.
4. Size: Set size for the button.

5. Button Icon: Set the icon for the button.
6. Icon Position: Set the icon position.
7. Icon Spacing: Set spacing for the icon.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Offcanvas Section

Go to Style > Offcanvas

Make the offcanvas section sytlish by following,

1. Text Color: Set the text color for the offcanvas item.
2. Link Color: Set the link color.
3. Link Hover Color: Set the hover color for the link item.

4. Background Color: Set the background color for the offcanvas.
5. Box Shadow: Set the shadow for the box.
6. Padding: Set the inner space by following the padding.

Widget Section

Go to Style > Widget

Make the widget section customizable by following the controls,

1. Border Type: Set the border type.
2. Border Radius: Set the radous for the border.
3. Padding: Set inner space by setting the padding.
4. Vertical Spacing: Set the space vertically.

Button Section

Go to Style > Button

Normal State for the Button

Make the button section more customizable,

1. Color: Set the color for the button.
2. Background Color: Set the background for the color.
3. Border Type: Set the type for the border.
4. Border Radius: Make the border radius.

5. Padding: Set the padding for the offcanvas.
6. Typography: Set the typography.
7. Box Shadow: Make a box shadow for the offcanvas.
8. Icon Size: Set the size for the Icon.

Hover State for Button

9. Color: Set the color for the button
10. Background Color: Set the background.
11. Button Animation: Set animation for the button.

Close Button Section

Go to Style > Close Button

Normal State For Close Button

1. Color: Set the text color for the button.
2. Background: Set the background color.
3. Border Type: Set the type for the border.
4. Border Radius: Make the border section readius.

5. Padding: Set the padding for the close button.
6. Margin: Set the margin for the button.
7. Typography: Set the typography for it.
8. Box Shadow: Set the shadow for the box.

Hover State for Close Button

9. Color: Set the color for the close button.
10. Background: Set the button for the background.

Video Assist

You can watch the video above to learn about the Scroll Button widget.
Please visit the demo page for examples.

Thanks for staying with us.