Articles in this category

GOOD STUFF!

Pages element

Once you've created a good-looking website with different pages, you need to make it really easy and seamless for your visitors to navigate through them, right? Here's a quick overview of the Pages element, that will enable adding Pages and managing the navigation on your site. 

Getting started

Go to your Website and then Elements Section and drag and drop the ‘Pages’ icon to the canvas. Now you can start selecting the pages that you want to be visible on your site menu.

To add new pages, click 'Add Page' and choose the desired page type.

 The pages element should only be used after creation of website pages. Check out the Pages App on your Dashboard and make your pages and navigation match your expectations perfectly.

Pages Settings

There are two ways to modify the mode of your navigation bar. You can either set it to Standard or Burger, along with the Layout: Vertical or Horizontal.

In this section, you may also enable certain options for your navigation, including:

  • Stretching Labels
  • Showing Sub Pages
  • Sub Page Collapse
  • Showing Home Page. 

Just make use of the switchers to achieve the desired result.  

In addition, you can also set your subpage dropdowns to open On Click or On Hover.

Burger Menu 

If you want to design the Burger icon in a way that it's unique, stands out and is noticeable to your site visitors? Here's how!

To start, click on your Burger Menu → Edit Page → Burger Menu Settings.

You'll first be given the option to find the perfect icon. Just type in related niches in the search field, scroll down and you'll see all the available options.

Once you’re happy with the icon of choice, customize it further by, for example, changing its size and even use the color tool to make it more colorful!

The system automatically generates a drop down menu for your Website on Mobile view as the best scenario for mobile navigation is to use a so-called burger menu. 

If you want to customize the design and style of the Navigation bar specifically for Mobile version, first you'll need to make changes on your Desktop.

To do so:

Change your Menu type from Standard to Burger from Page Settings → Layout Settings.

Customize Burgers Design by clicking on Burger Settings → Edit Page Styles.

After, just set it back to Standard.

The latter allows your burger menu to appear only on mobile version, while all style changes will be still saved.

Alignment - You may not like how your Page Element is positioned on the page? In order to amend this, all you need to do is click on the ‘Alignment’ icon to fix this.

Visibility Settings - It enables making a certain Element/Block appear on Desktop, Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the dropdown menu to get full control over the visibility of the elements on your page.

Location visibility. Include or exclude specific cities or countries or set the appropriate Custom IP.

Trash Icon - If you want to remove your gallery, click the ‘Trash’ button and hit ‘Delete’ to confirm your action. 

Page Styles 

What about changing the way your navigation looks on your pages?

Simply go to Style Settings in order to set the Label Font, Size, Weight, Distances and more for the pages and subpages. You also have the option change the Colors and Shadows for things like page labels, active or on hover, etc.

Feel free to play with colors using the Colors Tool.

Edit Pages

In order to add already created pages through Pages App, go to your Pages element and access Edit Pages section.

Once in the Edit Pages, add the missing pages by clicking on the preview of a missing page, the blue checkmark indicates that the page is added.

Note that the order of the pages in the navigation bar is defined by selection of pages in desired order.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free