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

PowerPack Elementor's One Page Navigation Widget

Table of Contents

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.
Elementor's New Page
Elementor’s New Page
  • 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.
One Page Navigation widget
One Page Navigation widget
  • 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:
One Page Navigation
One Page Navigation Page

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.

One Page Navigation Dots
One Page Navigation Dots
  • Click on the “Add item” button to add the dots. You can also remove them by clicking on the “X” icon. 
Sections in One Page Navigation widget
Sections in One Page Navigation widget
  • Choose “Section 1” and give it a proper title. 
Customize the Section of One Page Navigation widget
Customize the Section of One Page Navigation widget
  • 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”. 
CSS ID of One Page Navigation Section
CSS ID of One Page Navigation Section
  • 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.

Tooltip Section of One Page Navigation widget
Tooltip Section of One Page Navigation widget

Settings

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

Settings Section of Content Tab
Settings Section of Content Tab
  • 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.

Border Type of One Page Navigation widget
Border Type of One Page Navigation widget

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

One Page Navigation Box Shadow
One Page Navigation Box Shadow

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.

Navigation Dot Alignment
Navigation Dot Alignment

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.

Customize the Tooltip
Customize the Tooltip

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.

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Nasrin Shareef

Nasrin Shareef

Nasrin is Technical Content Writer at IdeaBox Creations. She is melophile who enjoys music all the way. She loves tea over coffee and enjoys watching Marvel movies.

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.

Latest Additions