Scroll Navigation

Scroll Navigation

If you are looking to create a classy one page website, this Scroll Navigation block is a must. One page websites are in a trend nowadays. The navigation can be placed anywhere on the screen. Mostly, it is placed on the right or the top.

Pro tip
Why not create one page scroll navigation on your website. A one-page website is not the only way to use it but is a design trend now. Website users will really like it when they get everything on scroll.

How to use the Scroll Navigation Block of The Plus Addons For Gutenberg

The Scroll Navigation block comes with different styles and a plethora of customization options using which you can use to add scroll navigation to your websites.

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Scroll Navigation into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Scroll Navigation after “/” sign, eg.“/Scroll Navigation”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Navigation

Add item here to the Scroll Navigation List.

Section Id – Add your section id here.
Tooltip – Enable tooltip and Set the tooltip title here.
Icon – Set the icon here. You can choose any icon from FontAwesome.

Layout

Style

Select the Style for the Scroll Navigation here. We have provided 5 different styles to choose from.

Direction

Set the Direction of the Scroll Navigation here.

Tooltip Style

Set the Tooltip Display Style here.

Connections

Carousel Connection Id

Enter your carousel connection Id here.

2. Style

The Style tab is used for customizing the appearance of all the Scroll Navigation block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Navigation

Icon Height/Width

Set the Icon Height/Width from here.

Icon Spacing

set space between two icons from here.

Color

A color picker to assign a suitable color to the font icon.

Border

Draw a border around the content and give width and color to it.

Navigation Background

Background

Apply suitable background like color/ gradient/ image to the content.

Border

Draw a border around the content and give width and color to it.

Border Radius

Set the radius curve of the content’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the content.

Tooltip

Margin

Put in some outer space to the content.

Padding

Put in some inner space to the content.

Alignment

Align tooltip text in left, center or right from here.

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the title, selection for Normal & Hover is also provided.

Background

Apply suitable background like color/ gradient/ image to the content.

Tooltip Height

Set Tooltip Height according to your layout.

Tooltip Arrow

Visibility option to show the arrow or not.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Border Radius

Set the radius curve of the tooltip panel’s corner.

Full Background

Navigation Offset

Put in some outer space to the content.

Navigation Padding

Put in some inner space to the content.

Background

Apply suitable background like color/ gradient/ image to the content.

Border

Draw a border around the content and give width and color to it.

Border Radius

Set the radius curve of the content’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the content.

Extra Options

Visible On Scroll

Enable and set the Show Menu Scroll Offset.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.