Step 2: How to Add the Floating Effects

Once you’ve enabled the Floating Effects module in the module settings, access the Elementor editor for your chosen page. Choose the element to which you wish to apply the Floating Effect. Head to the Advanced tab within the Elementor settings panel. Locate the “HTMega Floating Effects” section and toggle the switch to enable the feature and customize the desired effect.

Step 3: Available Effects

The module provides various effects, encompassing Motion, Styles, and Filters, among others.

Motion Effects

By enabling the Motion effect, you can incorporate Translate, Rotate, Scale, and Skew effects to create your desired animations.

Style Effects

Enabling the Style effect allows you to integrate element Opacity and element Background Color effects, enabling you to craft your preferred animations.

Filters Effects

By enabling the Filters effect, you can integrate element Blur, Contrast, Grayscale, Hue, Brightness, and Saturation effects, giving you the flexibility to create your desired animations.

Step 4: How to Customize Floating Effects

Customize each effect according to your preferences using options like Duration, Delay, Axis, Value, and more. Explore these settings to attain the visual impact you desire.

General Settings

In the general settings, customize the animation’s direction, loop, and easing.

• Direction: Choose the direction setting as Normal, Reverse, or Alternate to define the animation’s flow.
• Loop: Set the loop to either Infinity or a custom number in the loop settings.
• Easing: Define the easing effect from options such as Linear, easeInOutSine, easeInOutExpo, easeInOutQuart, easeInOutCirc, easeInOutBack, Steps, Elastic In, Elastic Out, or Elastic In Out.

Step 2: How to Activate the Reading Progress Bar on a Elementor Page

After enabling the Reading Progress module in the module settings, go to the desired page where you want to activate the reading progress bar. Click on the settings in the left-side panel, then select the “HTMega Reading Progress Bar” section.

After enabling the switcher, you can customize the Reading Progress Bar’s position, height, background color, fill color, and animation speed according to your requirements.

Step 3: How to Enable the Reading Progress Bar Globally

To enable the global Reading Progress Bar, ensure you have installed and activated the HT Mega Pro version. Then, navigate to the HT Mega module settings and activate the “Enable/Disable Global” switcher. Once you’ve enabled the switcher, you can customize the Reading Progress Bar’s position, height, background color, fill color, and select the pages where you want it to be displayed.

Step 4: How to Disable the Reading Progress Bar on a Specific Page

Following these steps will allow you to easily disable the reading progress bar on the selected page, and optionally, customize its style independently of the global settings.

• Go to the Desired Page: Navigate to the page where you want to disable the reading progress bar.
• Access Reading Progress Bar Settings: In the left-side panel, click on “HTMega Reading Progress Bar” within the settings.
• Disable Reading Progress Bar: Within the settings section, turn on the “Disable Reading Progress Bar” option.
• Override Global Settings (Optional): If you want to customize the style specifically for this page, you can enable the “Enable Custom Style” switcher to override the global settings.

Step 2: How to Activate the Scroll To Top Button on a Elementor Page

After enabling the Scroll To Top module in the module settings, go to the desired page where you want to activate the Scroll To Top. Click on the settings in the left-side panel, then select the “HTMega Scroll To Top” section.

After enabling the switcher, you can customize the Scroll To Top button’s position, width, height, z-index, icon, icon size, and normal and hover colors, as well as background color and box shadow, to match your preferences and requirements.

Step 3: How to Enable the Scroll To Top Button Globally

To enable the global Scroll To Top, ensure you have installed and activated the HT Mega Pro version. Then, navigate to the HT Mega module settings and activate the “Enable/Disable Global” switcher. Once you’ve enabled the switcher, you can customize the Scroll To Top button’s position, color, background color, bottom space, and select the pages where you want it to be displayed.

Step 4: How to Disable the Scroll To Top on a Specific Page

Following these steps will allow you to easily disable the scroll to top button on the selected page, and optionally, customize its style independently of the global settings.

• Go to the Desired Page: Navigate to the page where you want to disable the scroll to top button.
• Access Scroll To Top Settings: In the left-side panel, click on “HTMega Scroll To Top” within the settings.
• Disable Scroll To Top: Within the settings section, turn on the “Disable Scroll To Top” option.
• Override Global Settings (Optional): If you want to customize the style specifically for this page, you can enable the “Enable Custom Style” switcher to override the global settings.

Step 2: How to Use Advanced Sticky Option?

The Advanced Sticky module is a versatile feature that seamlessly integrates with all widgets, including third-party addon widgets, sections, and columns. You can easily access this functionality within the Advanced Tab, providing you with a convenient way to enhance the stickiness and visibility of various elements on your website.

Step 3: How to Add Advanced Sticky Condition

After you enable the advanced sticky module, you will have access to the “Sticky Position, Z-index, Offset, Sticky Until, Show on Scroll up, Hide on Tablet, Sticky Animation, Sticky Box Shadow, Background Type” fields to set the display conditions.

Sticky Position: From here, you can choose where the particular sticky element will appear. There are different positions to choose from, such as top, column, and bottom.

Z-Index:  You can easily fine-tune the Z-Index value of the sticky content right from this setting.  By adjusting the Z-Index value of the sticky module, you’re effectively controlling how it interacts with other elements. Higher Z-Index values place the sticky content in the foreground, ensuring its visibility over other content, while lower values relegate it to the background.

Offset: From this settings option, you have the ability to set the desired offset value for the sticky module. This means that you can specify a specific distance or pixel value by which the sticky module will be offset from its original position. By adjusting the offset, you can ensure that the sticky module appears exactly where you want it on your webpage, creating a more visually appealing and user-friendly experience.

Sticky Until: This convenient feature allows you to specify the section ID of a particular section until which the sticky content will remain sticky. By defining the desired section ID, you can ensure that the sticky section remains fixed in place and visible to users as they scroll through your webpage.

Show on Scroll up: From here, you can enable or disable the option to show the sticky content when visitors scroll up the page.

Hide on Tablet: From here, you can enable or disable the option to hide the sticky content when visitors browse your website on Tablet.

Hide on Mobile: From here, you can enable or disable the option to hide the sticky content when visitors browse your website on Mobile devices.

Sticky Animation: This option allows you to enable or disable the sticky animation effect. When enabled, the sticky module will smoothly transition into its fixed position as the user scrolls down the webpage. This adds a touch of visual appeal and enhances the overall user experience.

Sticky Box Shadow: Customize the sticky box shadow with color, position, blur, and more for a visually striking effect on your webpage.

Background Type: With this versatile feature, you have the ability to customize the background type of the sticky content. You can choose between the classic option, which provides a solid background color, or the gradient option for a more dynamic and visually appealing effect.

If you opt for the gradient background, you can take it a step further by fine-tuning its properties. You can set the color locations to create smooth transitions between different colors within the gradient. Additionally, you can specify the gradient type, whether it’s linear or radial, and even adjust the angle of the gradient to achieve your desired effect.

Step 4: Update and Preview

Once you have added the condition, simply click on the “UPDATE” button to save these settings. This will ensure that all the changes you made to the sticky content are applied and reflected on your webpage. After updating, take a moment to preview and see how your sticky content looks with the modifications you implemented.

Here we can set the section, column, and widget sticky.

Step 2: How to Use Conditional Display Option?

The Conditional Display is a universal feature that functions with all widgets, including third-party addons’ widgets, sections, and columns. It shows within the Advanced Tab.

Step 3: How to add display condition?

Once you enable the conditional display, you will have access to the “Element you want to“, “Display on“, “Timezone,” and “Conditions” fields to set the display conditions.

Element You Want To: You can Show or Hide element by selecting this option according to the condition.

Display On: If you want your content to be displayed only when all the conditions are true, you should select the “All Conditions Met” option. Conversely, if you want your content to be displayed when any of the conditions you added is true, choose the “Any Condition Met” option.

Timezone: For the Date, Time, and Day condition option, you can set either the Server Timezone or the Local Timezone. This allows you to specify the desired time zone for your display conditions related to Date, Time, and Day.

Conditions: To select a condition, you need to configure three options. First, choose the condition name such as Login status, User role, Country etc. Second, select either “Is” or “Is not” to compare the condition and condition value. Finally, in the third dropdown menu, select a value for the condition. This dropdown will provide you with relevant value options based on the condition chosen in the first dropdown.

Add Item: To add a new condition, simply click on the “+ ADD ITEM” button. You have the freedom to add as much condition as you desire.

Step 4: Update and Preview

Once you have added the condition, click on the “UPDATE” button to save these settings.

Here we can see the call-to-action section displayed when logged in. However, in incognito mode, this section is not displayed.