How to Create a One Page Agency site with Elementor & PowerPack?

There are some agency sites that consist only of One Page. Even when you click on the navigation icon, you will be taken to another section on the same page instead of another page. The purpose of this is to take the visitors to the required section of the page just by a single click without scrolling down. If you are wondering about how to do this, you no longer have to worry. PowerPack Elementor’s One Page Navigation widget does this job.

The One Page navigation widget includes a navigation control that allows you to easily switch between sections. These navigation controls allow your visitors to easily navigate through the content of the One Page agency site. The One Page Navigation widget lets you display tooltips on mouse hover, customize the navigation icons, change the border and background colors, navigate from a section to another using the scroll wheel, scroll up and down using scroll keys, and adjust the scroll speed on the page.

Now let’s go ahead and see how we can use PowerPack’s One Page Navigation widget.

We have also created a short to-the-point video that explains in detail how you can create a One Page Agency site. So, in case you like the video explanation, I suggest you have a look at it.

Create One Page Site using PowerPack’s One Page Navigation Widget  

The One Page Navigation widget comes with the PowerPack’s Pro version. In order to use the One Page Navigation widget, install and activate Elementor first, then the PowerPack Pro. You can get both plugins from the below links:

Elementor: Get Elementor
PowerPack Addons for Elementor: Get PowerPack

Add One Page Navigation widget to the site

• Go to WordPress Dashboard and click on Pages > Add New. If you have already created a page, click on Pages > All Pages and select the page you want to add to the One Page Navigation widget.

• Search for the One Page Navigation widget in the search bar. Make sure that the widget is with the “PP” icon at the corner. This icon indicates that the widget belongs to PowerPack.

• Simply just Drag & Drop the “One Page Navigation” widget into the ‘Drag widget here’ section.
• Initially, this is how One Page Navigation would look like:

Now, let’s see how to customize and style the content and style tab of Elementor.

Customizing the Content Tab

Under the ‘Content’ tab you will find 3 sections which are listed below:

• Navigation Dots
• Tooltip
• Settings

Let’s have a look at each section in brief.

Navigation Dots

This section allows you to add a Section Title, Section ID, and a dropdown menu to select a navigation dot.

• Click on the “Add item” button to add the dots. You can also remove them by clicking on the “X” icon. 

• Choose “Section 1” and give it a proper title. 

• The next option is the section ID. This is a CSS ID that is set for a specific section. Click on the edit section and Select “Advanced” at the top of the section settings. Now, copy the CSS ID and paste it to the section ID in the “Layout”. 

• Now you can choose the custom navigation dot for the section. You can do the same changes to the remaining dots. You can give each navigation dot the unique look by adding an icon from the list. 

Tooltip

A tooltip appears on the page when the mouse hovers over the Navigation icons. You must enable the Tooltip and the Tooltip Arrow in order to use it. You can also adjust the distance between the Tooltips.

Settings

There are 3 sections in the Settings tab. Let’s have a look at each section in brief.

• Scroll Wheel: This allows you to use the mouse wheel to navigate one row to another.

• Scroll Keys: Allows you to use UP and DOWN arrow keys to navigate from one row to another.
• Scrolling Speed: Gives you full control over the speed of the scroll speed of the elements.

Once you have made changes in the Content Tab, you can proceed to the Style Tab for styling the PowerPack Elementor’s One Page Navigation widget as per your requirement.

How to Style One Page Navigation Widget?

One Page Navigation widget comes with multiple styling options. 

From the ‘Style’ tab, you can modify Alignment, Color, Size, Spacing, Tooltip, and many more options of the One Page Navigation.

There are 3 sections available in the style tab that are listed below:

• Navigation Box
• Navigation Dots
• Tooltip

Let’s have a look at each section in brief.

Navigation Box

In the ‘Navigation Box’ section, you can choose the alignment, border type, and background type from the pop-up list. It is even possible to add styling to the border.

You can also adjust the color of the box shadow Horizontally or Vertically.

Navigation Dots

From this section, you can change the size and spacing of the Navigation Dots. If you want, you can even add ‘Box Shadow’ as well. Moreover, you are able to separately control the styling for ‘Navigation Dots’ when it’s in normal, hover, or active view.

Tooltip

Tooltips can be customized by changing their backgrounds and text colors. This section allows you to edit the ‘Typography’ of your Tooltip content as well.

Wrapping Up!

The user experience gets better with easier navigation settings. Thus, the PowerPack Elementor’s One Page Navigation widget makes it easy for your visitors to navigate through the content of the agency site easily.

The PowerPack Addons for Elementor give you many more options. You can customize your Elementor pages with more than 70 creative widgets. Check here to learn more about the PowerPack Addons for Elementor.