Responsive Addons for Elementor (RAE) One Page Navigation gives you the flexibility to easily navigate through your one-page website. With the help of this element, you can create a beautiful one-page site and improve the overall user experience.
How to Activate One Page Navigation #
To use this Responsive Addons for Elementor (RAE) element, find the ‘Responsive Addons for Elementor (RAE) One Page Navigation’ from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘Responsive Addons for Elementor (RAE) One Page Navigation’ into the ‘Drag widget here’ section.
Initially, this is how One Page Navigation would look like:
How to add Section ID for each Section #
To add Section ID, click on the Section you want to modify.
Then head over to the ‘Advanced’ tab of that particular Section. Simply add the ‘Section ID’ of the navigation dots inside the CSS ID field.
Content #
Navigation Dots #
In this section, you can add a Section Title and Section ID & use the dropdown menu to choose an icon for the navigation dot.
Settings #
- Tooltip- You can use the toggle bar to enable/disable Tooltip on hover
- Tooltip Arrow- Use the toggle button to show/hide the tooltip arrow
- Scroll Wheel- You can use the toggle bar to enable/disable the Scroll wheel which uses a mouse wheel to navigate from one row to another
- Scroll Keys- You can use the toggle bar to enable/disable the Scroll Keys which use UP and DOWN keys to navigate from one row to another
- Row Top Offset- Use slider to set row top offset value
- Scrolling Speed- Enter the value of scrolling speed, according to the value navigation will scroll
Style #
Navigation Box #
- Alignment- Using the icons, select between left, center, or right alignment
- Background Type- Use the icons to choose between a solid or gradient background
- Border Type- From the dropdown menu select between solid, double, dotted, dashed, or grooved
- Border Radius- Enter a chosen value in the fields based on px or %
- Margin- Enter a chosen value in the fields based on px or %
- Padding- Enter a chosen value in the fields based on px or %
- Box Shadow- Click the pencil icon to set the color and shadow options
Navigation Dots #
- Size- Adjust the size of the navigation dots using a slider
- Spacing- Adjust the spacing between the navigation dots using a slider
- Padding- Enter a chosen value in the fields based on px or %
- Box Shadow- Click the pencil icon to set the color and shadow options
- Normal/Hover/Active- Choose the appearance of the navigation dots on normal and hover and active states
- Color- From the color picker, choose color
- Background Color- From the color picker, choose the background color
- Border Type- From the dropdown menu select between solid, double, dotted, dashed, or grooved
- Border Radius- Enter a chosen value in the fields based on px or %
Tooltip #
- Background Color- From the color picker, choose the background color of the tooltip
- Text Color- From the color picker, choose the color of the text
- Typography- From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
- Padding- Enter a chosen value in the fields based on px or %
