Hawksky | Pillar Jump with Smooth Scroll

Overview

A "Pillar Jump with Smooth Scroll" module typically refers to a web development component that combines a jump menu (a dropdown menu that allows users to jump to different sections of a page) with smooth scrolling functionality. This kind of module enhances user navigation by providing a convenient and visually appealing way to move between sections of a webpage.

Scroll to Top

Features Included

Here are some key features and extra effects that you might find in a "Pillar Jump with Smooth Scroll" module:

Pillar Jump: In the context you've provided, "Pillar Jump" might refer to navigating or jumping between different sections or pillars on a webpage. Each pillar could represent a distinct section or category of content.
Smooth Scroll: Smooth scrolling involves using animations to create a fluid and visually pleasing scrolling experience. Instead of the default instant jump from one part of a webpage to another, smooth scrolling provides a gradual transition.
Header fixed or not top: The module works in both functionality whether the header is fixed or not.
Customization Options: Configurable styles, colors, fonts, alignment, section background (Solid and Gradient) and grid spacing to allow integration with the overall look and feel of the website.
Responsive Design: Adaptability to different screen sizes and devices to ensure a consistent and user-friendly experience across various platforms.
Browser Compatibility: Support for major web browsers to ensure a consistent experience for users across different platforms.
Module: A module in web development usually refers to a self-contained and reusable piece of code or functionality that can be integrated into a larger system.

Implementation of such a module would likely involve HTML, CSS, and jQuery. jQuery would handle the logic for smooth scrolling and section navigation.

Scroll to Top

Module Setup

Setting up the "Pillar Jump with Smooth Scroll" Module is easy and straightforward. All you have to do is perform a simple drag and drop.

Now let’s go through the setup steps:

Marketing-step01

Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.

Website-step2

Under the module selection menu, search for “Pillar Jump with Smooth Scroll” and select the module

Now simply pick the "Pillar Jump with Smooth Scroll" module, drag, and drop it wherever you want on your page. You’ll see a new module appear on the page.

Hawksky-Pillar-Jump-with-Smooth-Scroll-drag-and-drop

Scroll to Top

Content Setting

Figure 1: Enable Module

Figure 2: Jump navigation menu items and content repeater group

Figure 3: Repeater item jump link name and summary data entry view

Overview of the fields used in the module Content tab

Enable module: Modules can be shown or hidden from the Enable Modules field
Section layout: From the section layout field, you can set the layout of the section yourself.
Header fixed top: The module works in both functionality whether the header is fixed or not.
Jump nav menu: Jump navigation menu links and content group.
- Menu title: You can keep the title of jump menu if you want.
- Nav items: Jump navigation menu links and content repeater group.
- Nav link name: Jump navigation menu unique link field.
- Nav summary: You can use the Summary field to display jump navigation menu links in detail.
Module JS: Include the module level jQuery show/hide field.

Scroll to Top

Style Setting

Overview of the fields used in the module Style tab

Section: Section is a group of background and spacing.
- Spacing: Section spacing can be customized for desktop, tablet and mobile.
- Background: Section background solid color and gradient color can be changed easily.
Navigation menu: There is a custom style group for the left side menu.
- Title: Jump navigation menu title style group.
  - Title text font: You can customize the font size, color and font weight.
  - Background color: You can change the title background color.
  - Text transform: Title text font text transform choice field.
  - Letter spacing: The letter spacing of the title font can be customized.
  - Alignment: Alignment refers to the horizontal positioning of text within a text box or column. Common text alignments include left-aligned, center-aligned, right-aligned, and justified.
- Nav link: Jump navigation menu links style group.
  - Link text font: You can customize the font size, color and font weight.
  - Text transform: Text transform choice field for link text.
  - Letter spacing: The letter spacing of the link text can be customized.
  - Background color: You can change the link background color.
  - Alignment: Alignment refers to the horizontal positioning of text within a text box or column. Common text alignments include left-aligned, center-aligned, right-aligned, and justified.
- Hover and Active: Background color, text color and border color can be customized across jump navigation menu links.
- Nav border radius: The border radius of the Jump navigation menu box can also be customized. Such as border radius "Top Left", "Top Right", "Bottom Right" and "Bottom Left".
- Enable box shadow: Box shadows can be shown and hidden with Enable Box Shadow.
- Box shadow: The box shadow of the Jump navigation menu is also fully customizable.
Nav summary: Jump navigation is a style group of summary column. Such as customize the "Border radius", "Background color", "Spacing" and "Enable box shadow".
Grid spacing: Column grid gap can be customized from grid spacing. The grid gap of desktop and tablet can be easily changed.
Custom container size: Custom Container Size allows customization of container size at the module level.

The entire style is covered for this module. The style can be easily customized and matched with the style of any website.

Scroll to Top

Support

If you have further questions, please reach out to our team at hawksky3012@gmail.com.

Scroll to Top