Gutenberg One Page Scroll Block by Premium Blocks is a powerful tool for creating seamless, interactive one-page websites in Gutenberg editor. With features like smooth one-page navigation using full-screen sections, navigation dots, menus, and arrows, it allows users to build visually stunning designs with ease. The block offers customizable scroll effects such as parallax and smooth transitions, along with comprehensive styling options for tooltips, dots, menus, and arrows. Additionally, its browser history integration ensures a smooth user experience by saving section IDs for easier navigation.
This block is perfect for various use cases, including landing pages for products or services, portfolios to showcase creative work, storytelling websites for delivering sequential content, and corporate websites for clean, structured designs. Whether you are a WordPress designer, developer, or business owner, Gutenberg One Page Scroll Block simplifies building modern, professional, single-page websites.
Fit to Screen: Makes sections span the entire width and height of the screen. (Enabled by default when the Transition Effects option is set to ‘Default’)
Full Screen Width: Makes sections fills the entire width of the screen, keeping the height unchanged. ( It requires ‘Fit To Screen’ Option to be disabled ).
Enable Dots: Displays navigation dots for section switching.
Enable Menu: Adds a navigation menu to jump between sections.
Enable Arrows: Enables navigation arrows for easy scrolling.
Zoom on Image to Check the Gutenberg One Page Scroll block – General Settings
Additionally, it supports nested blocks, allowing you to add more elements such as:
If you need to add more inner blocks, you can easily add extra fields to Gutenberg One Page Scroll content section. Just click on the “+” icon and pick the type of field you want to include.
Additionally, To add a new One Page Scroll item, you can either click the “Add One Page Scroll Item” button located at the end of the sections, or use the plus (+) icon in the toolbar for each scroll item to insert new items directly between existing ones. maintaining the flow of your layout.
Navigation Dots
Dots Style: Sets the appearance of dots (Circles or Lines).
Horizontal Position: Aligns dots to the Left, Center, or Right.
Vertical Position: Aligns dots to Top, Middle, or Bottom.
Enable Dots Tooltip: Adds text tooltips for dots.
Show Tooltip On Scroll: shows the tooltip automatically on scrolling between sections.
Dots Content: Customizes tooltip text for each dot.
Navigation Entrance Animation: Adds entrance animations for navigation dots.
Animation Duration: Adjusts the animation speed (Slow, Normal, or Fast).
Gutenberg One Page Scroll block – Navigation Dots
Navigation Dots Live Preveiw
Gutenberg One Page Scroll block – Navigation Dots Live Preveiw
Navigation Menu
Menu Position: Aligns the menu to Left, Center, or Right.
Vertical Offset: Sets vertical positioning of the menu.
horizontal Offset: Adjusts horizontal positioning (It will be hidden while aligning the menu in the center position)
Menu Items‘ Label: Sets custom names for menu links.
Gutenberg One Page Scroll block – Navigation menu position
Navigation Arrows
Arrows Icon: Pick from multiple arrow styles.
Position: Aligns arrows to Left, Center, or Right.
Arrows Vertical Offset (%): Adjusts the vertical position of the arrows.
Arrows Horizontal Offset (%): Adjusts the horizontal position of the arrows.
Gutenberg One Page Scroll block – Navigation Arrows
Scroll Settings
Transition Effect: Select scrolling behavior (e.g., Default, Parallax, or Flip-Cover).
Scroll Speed: Defines scroll duration in seconds.
Scroll Offset: Sets top spacing for fixed headers. (Currently applicable with the ‘Default’ transition effect.)
Full Section Scroll: Scrolls full section height, ensuring one section per screen. (Enabled by default for transition effects option is ‘Default’.)
Save to Browser History: Enables saving the section ID to browser history.
Gutenberg One Page Scroll Bock – Scroll Settings
Responsive Mode
Hide Dots on Desktop : Enable to hide dots on desktop screens , or disable to show.
Hide Dots on Mobile: Enable to hide dots on tablets or leave it off to keep them visible.
Hide Dots on Tablet : Enable to hide dots on Mobile,or keep it off to display them.
Hide Menu on Desktop : Enable to hide Menu on desktop screens , or disable to show.
Hide Menu on Tablet : Enable to hide Menu on tablets, or leave it off to keep them visible.
Hide Menu on Mobile: Enable to hide Menu on Mobile, or keep it off to display them.
Hide Arrows on Desktop : Enable to hide arrows on desktop screens , or disable to show.
Hide Arrows on Tablet : Enable to hide arrows on tablets,or keep it off to display them.
Hide Arrows on Mobile: Enable to hide arrows on Mobile , or leave it off to keep them visible.
Gutenberg One Page Scroll Bock – Responsive Mode
Style Tab Controllers
Navigation Dots – Tooltips
Typography: Adjusts font size, style, and weight.
Shadow: Adds a shadow effect to tooltips.
Tooltip Text Color: Customizes the text color for tooltips.
Tooltip Background Color: Changes the tooltip’s background color.
Border: Adds borders with customizable styles.
Border Radius: Rounds the tooltip edges.
Margin: Defines spacing around the tooltip edges.
Padding: Adds internal spacing to the tooltip.
Gutenberg One Page Scroll Bock – Tooltip Style tab
Navigation Dots – Dots
Dots Size(px): Adjusts the size of navigation dots.
Lines Width & line Height (px): Enabled while selecting lines from the navigation Dots Style to Adjusts the size & Spacing navigation dots.
Dots Spacing (px): Controls the spacing between dots.
Color: Sets the default dot color.
Active Color: Highlights the active dot with a custom color.
Border: Adds borders around dots.
Border Radius: Rounds dot corners.
Border Active Color: Highlights the active dot with a custom border color.
Gutenberg One Page Scroll Bock – Dots Style tab
Navigation Dots – Container
Background: Sets the background color for the dot container.
Shadow: Adds a shadow to the container.
Border: Customizes border style.
Border Radius: Rounds the container edges.
Margin: Adjusts the spacing around the container.
Padding: Adjusts the internal spacing of the container.
Gutenberg One Page Scroll Bock – Container Style tab
Navigation Menu
Typography: Controls font size, style, and weight.
Text Color: Customizes text color for Normal, Hover, and Active states.
Background Color: Sets the background color for Normal, Hover, and Active states of menu items.
Shadow: Adds shadow effects to menu items for Normal, Hover, and Active states.
Border: Customizes the border style and thickness.
Border Radius: Rounds menu corners for a polished look.
Margin: Controls spacing outside each menu item.
Padding: Controls spacing inside each menu item.
Navigation Arrows
Arrows Size (px): Adjusts the size of the arrows.
Color: Sets the arrow color for Normal and Hover states.
Gutenberg One Page Scroll Bock – Navigation Arrows style
One Page Scroll Item – Settings
Style Tab Controllers
Background: Customize the main background of this scroll item with a color or image to fill the section.
Background Overlay: Add a semi-transparent color layer over the background to create visual effects..
Spacing: Manages the outer and inner spacings for the section.
Gutenberg One Page Scroll Bock – Scroll Item Style
Conclusion
Gutenberg One Page Scroll Block by Premium Blocks is a versatile tool that brings modern functionality and interactive design to Gutenberg-based websites. Its smooth navigation, customizable scroll effects, and flexible design options empower users to create visually appealing and engaging one-page websites effortlessly. Whether you are building landing pages, portfolios, storytelling sites, or corporate designs, this block ensures a seamless experience with features like browser history integration and full-screen scroll sections. With its intuitive interface and advanced customization options, Gutenberg One Page Scroll Block is the perfect solution for creating dynamic, professional WordPress single-page websites.
Need Further Help?
Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.
