Full Page Menu

How to use Full Page Menu Widget of Sky Addons for Elementor

Sky Addons Full Page Menu Widget is a powerful tool that lets you create a stunning, immersive menu experience for your website visitors. Instead of a traditional navigation bar, this widget transforms your menu into a full-screen overlay, providing a unique and engaging way for users to explore your site. It has plenty of options and easy to use interface.

Description

The Sky Addons Full Page Menu widget offers a modern and stylish alternative to conventional website navigation. Perfect for creating a memorable first impression, this widget displays your menu items in a full-screen overlay that appears when triggered. It’s an excellent choice for businesses and creatives looking to enhance user experience and showcase their brand with a visually appealing, interactive menu. This widget is a part of essential addons for elementor, and it enhances your elementor website with premium features. It is compatible with elementor pro and works seamlessly with elementor templates and themes. Sky Addons Full Page Menu is a premium addons for elementor that helps you create a stunning landing page.

Key Features List

1. Custom Menu Items: Add and arrange menu items with custom titles, links, and icons.
2. Dynamic Menu Support: Use existing WordPress menus for quick setup.
3. Social Media Integration: Display social media links within the full-page menu.
4. Toggle Customization: Style the menu toggle button (the button that opens the full-page menu) with various options for size, color, and hover effects.
5. Off-Canvas Styling: Control the appearance of the full-page menu overlay, including background, padding, and alignment.
6. Navigation Styling: Customize the look and feel of the menu links, including typography, colors, and hover animations.
7. Clip Effect: Add a unique clip effect to the navigation menu items for a modern touch.
8. Layout Options: Choose between default and reveal layouts for different animation styles.

Insert Full Page Menu Widget

1. Open Elementor Editor. In the Elementor panel, search for “Full Page Menu”.
2. Drag and Drop the Widget to the desired location on your page / editor.

Full Page Menu Section

This section lets you choose the menu type and create your custom menu items.

• Menu Type: Select between “Custom Menu” to build your own menu within the widget, or “Dynamic Menu” to use an existing WordPress menu.
• Select Menu: (Appears when “Dynamic Menu” is selected) Choose the WordPress menu you want to use.
• Menu Items: (Appears when “Custom Menu” is selected) A repeater field to add individual menu items with titles, links, icons, and menu levels. You can create multi level menu using this option.

Additional Section

This section provides extra options to enhance the menu.

• Layout: Choose between “Default” and “Reveal” layouts, affecting how the menu appears.
• Show Social Media Links: Enable or disable the display of social media links in the menu.

Social Media Section

This section allows you to add and customize social media links.

• Social List: A repeater field to add social media links with titles and URLs.

Toggle Section

This section controls the appearance of the menu toggle button.

• Alignment: Adjust the horizontal alignment of the toggle button.
• Size: Control the size of the toggle icon.
• Padding: Add padding around the toggle button.
• Border: Customize the border of the toggle button.
• Border Radius: Round the corners of the toggle button.
• Normal/Hover Tabs: Style the toggle button in its normal and hover states with options for color, background, box shadow, and border color.
• Animation: Choose a hover animation for the toggle button.

Offcanvs Section

This section styles the full-page menu overlay.

• Menu Position: Adjust the horizontal position of the menu items within the overlay.
• Background: Set the background color or gradient for the menu overlay.
• Background Blur: Apply a blur effect to the background.
• Padding: Add padding around the content within the menu overlay.

Nav / Links Section

This section customizes the appearance of the menu links.

• Alignment: Set the alignment of the menu items.
• Typography: Control the font, size, and other text properties of the menu links.
• Text Stroke: Add a stroke effect to the menu link text.
• Color: Set the color of the menu links.
• Hover Color: Set the color of the menu links on hover.
• Hover Animation: Choose a hover animation for the menu links.
• Enable Clip Effect: Enable or disable the clip effect on the navigation menu items.

Navigation Clip Effect Section

This section provides options to customize the clip effect.

• Clip Effect Background: Set the background color or gradient for the clip effect.
• Text Stroke Width: Adjust the width of the text stroke.
• Animation Duration: Control the duration of the clip effect animation.

Close / X Section

This section styles the close button (the “X” that closes the full-page menu).

• Size: Control the size of the close icon.
• Padding: Add padding around the close button.
• Border: Customize the border of the close button.
• Border Radius: Round the corners of the close button.
• Normal/Hover Tabs: Style the close button in its normal and hover states with options for color, background, box shadow, and border color.

Social List Section

This section styles the social media links.

• Color: Set the color of the social media links.
• Hover Color: Set the color of the social media links on hover.
• Typography: Control the font, size, and other text properties of the social media links.
• Spacing: Adjust the spacing between the social media links.
• Year Color: Set the color of the copyright year text.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Menu Not Appearing: Double-check that you have selected a menu (either custom or dynamic) and that all links are properly configured.
2. Styling Issues: Clear your browser cache and Elementor’s CSS cache to ensure the latest styles are applied.

Conclusion

The Sky Addons Full Page Menu widget offers a unique and engaging way to present your website’s navigation. With its extensive customization options, you can create a full-screen menu that perfectly complements your brand and enhances the user experience. It is a valuable addition to your essential addons and elements pack for Elementor. This widget is designed to help you create a professional elementor website with ease.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.