Features Library
Explore 262+ advanced tools designed to simplify, enhance, and customize every aspect of your WordPress site — all in one powerful library.
No posts found
Interface Tab > Preloader
Enable Preloader
How it works:
Adds a preloader or loading animation that displays before the page loads completely, creating a buffer between navigation and content display to improve perceived performance and user experience.Benefits:
Improves perceived loading times, provides professional user experience, masks slow loading content, and gives users visual feedback that the page is loading.
Adds a preloader or loading animation that displays before the page loads completely, creating a buffer between navigation and content display to improve perceived performance and user experience.Benefits:
Improves perceived loading times, provides professional user experience, masks slow loading content, and gives users visual feedback that the page is loading.
Interface Tab > Preloader
Disable Preloader inside Bricks Builder
How it works:
Automatically detects when users are working within the Bricks Builder interface and disables the preloader to prevent interference with the editing experience.Benefits:
Improves builder workflow efficiency, prevents editing interruptions, and ensures smooth development experience while maintaining preloader functionality for site visitors.
Automatically detects when users are working within the Bricks Builder interface and disables the preloader to prevent interference with the editing experience.Benefits:
Improves builder workflow efficiency, prevents editing interruptions, and ensures smooth development experience while maintaining preloader functionality for site visitors.
Interface Tab > Preloader
Show preloader on
How it works:
Configures where the preloader appears with options for all pages, homepage only, pages only, posts only, or custom pages, allowing granular control over preloader display.Benefits:
Provides targeted user experience optimization, reduces unnecessary loading screens, and allows strategic preloader placement where it's most beneficial for user experience.
Configures where the preloader appears with options for all pages, homepage only, pages only, posts only, or custom pages, allowing granular control over preloader display.Benefits:
Provides targeted user experience optimization, reduces unnecessary loading screens, and allows strategic preloader placement where it's most beneficial for user experience.
Interface Tab > Preloader
Preloader Media URL
How it works:
Allows upload or specification of custom GIF, icon, or image files for the preloader, enabling branded loading experiences that match site design and identity.Benefits:
Creates consistent brand experience, provides visual interest during loading, and allows customization that aligns with site aesthetics and brand guidelines.
Allows upload or specification of custom GIF, icon, or image files for the preloader, enabling branded loading experiences that match site design and identity.Benefits:
Creates consistent brand experience, provides visual interest during loading, and allows customization that aligns with site aesthetics and brand guidelines.
Interface Tab > Preloader
Media alt text for SEO
How it works:
Adds proper alt text attributes to preloader media elements for screen readers and SEO compliance, ensuring accessibility standards are maintained.Benefits:
Improves accessibility for visually impaired users, maintains SEO best practices, and ensures compliance with web accessibility guidelines while providing loading feedback.
Adds proper alt text attributes to preloader media elements for screen readers and SEO compliance, ensuring accessibility standards are maintained.Benefits:
Improves accessibility for visually impaired users, maintains SEO best practices, and ensures compliance with web accessibility guidelines while providing loading feedback.
Interface Tab > Preloader
Text under media
How it works:
Adds optional text below the preloader media to provide loading messages, brand messaging, or user instructions during the loading process.Benefits:
Provides additional user communication during loading, reinforces brand messaging, and gives users context or expectations about the loading process.
Adds optional text below the preloader media to provide loading messages, brand messaging, or user instructions during the loading process.Benefits:
Provides additional user communication during loading, reinforces brand messaging, and gives users context or expectations about the loading process.
Interface Tab > Preloader
Background Color
How it works:
Customizes the preloader background color to match site branding, ensure proper contrast, or create specific visual effects during the loading experience.Benefits:
Maintains brand consistency, ensures proper visual contrast for accessibility, and provides seamless visual transition between loading state and loaded content.
Customizes the preloader background color to match site branding, ensure proper contrast, or create specific visual effects during the loading experience.Benefits:
Maintains brand consistency, ensures proper visual contrast for accessibility, and provides seamless visual transition between loading state and loaded content.
Interface Tab > Preloader
Media Width/Height
How it works:
Sets specific dimensions for preloader media elements to ensure consistent display across different devices and screen sizes while maintaining aspect ratios.Benefits:
Provides consistent visual experience across devices, prevents layout shifts, and ensures preloader media displays properly regardless of original file dimensions.
Sets specific dimensions for preloader media elements to ensure consistent display across different devices and screen sizes while maintaining aspect ratios.Benefits:
Provides consistent visual experience across devices, prevents layout shifts, and ensures preloader media displays properly regardless of original file dimensions.
Interface Tab > Preloader
Media Margin
How it works:
Configures spacing around preloader media elements to control positioning, create visual breathing room, and ensure proper alignment within the preloader container.Benefits:
Improves visual hierarchy, creates balanced composition, and ensures preloader elements are properly positioned for optimal user experience and visual appeal.
Configures spacing around preloader media elements to control positioning, create visual breathing room, and ensure proper alignment within the preloader container.Benefits:
Improves visual hierarchy, creates balanced composition, and ensures preloader elements are properly positioned for optimal user experience and visual appeal.
Interface Tab > Preloader
Text Color
How it works:
Customizes the color of preloader text elements to ensure readability, match brand colors, and provide proper contrast against the background color.Benefits:
Ensures text readability and accessibility, maintains brand consistency, and provides proper visual contrast for users with different visual capabilities.
Customizes the color of preloader text elements to ensure readability, match brand colors, and provide proper contrast against the background color.Benefits:
Ensures text readability and accessibility, maintains brand consistency, and provides proper visual contrast for users with different visual capabilities.
Interface Tab > Preloader
Text Font Size
How it works:
Sets the font size for preloader text to ensure readability across devices, maintain visual hierarchy, and provide appropriate emphasis for loading messages.Benefits:
Ensures text legibility on all screen sizes, maintains design consistency, and provides appropriate visual weight for loading communication.
Sets the font size for preloader text to ensure readability across devices, maintain visual hierarchy, and provide appropriate emphasis for loading messages.Benefits:
Ensures text legibility on all screen sizes, maintains design consistency, and provides appropriate visual weight for loading communication.
Interface Tab > Preloader
Enable Mobile-Specific Customization
How it works:
Provides separate preloader settings for mobile devices, allowing different configurations for mobile and desktop experiences to optimize for each platform.Benefits:
Optimizes mobile user experience, accommodates different screen sizes and performance capabilities, and provides platform-specific optimization for better loading experiences.
Provides separate preloader settings for mobile devices, allowing different configurations for mobile and desktop experiences to optimize for each platform.Benefits:
Optimizes mobile user experience, accommodates different screen sizes and performance capabilities, and provides platform-specific optimization for better loading experiences.
Interface Tab > Preloader
Minimum preload time
How it works:
Ensures the preloader is visible for a minimum duration even if the page loads quickly, preventing jarring transitions and maintaining consistent user experience.Benefits:
Prevents flickering effects, provides consistent user experience regardless of loading speed, and ensures users can process the loading feedback appropriately.
Ensures the preloader is visible for a minimum duration even if the page loads quickly, preventing jarring transitions and maintaining consistent user experience.Benefits:
Prevents flickering effects, provides consistent user experience regardless of loading speed, and ensures users can process the loading feedback appropriately.
Interface Tab > Preloader
Delay time
How it works:
Adds additional time after page load before hiding the preloader, allowing for smooth transitions and ensuring all content is fully rendered before revealing.Benefits:
Ensures complete content loading, provides smooth visual transitions, and prevents premature preloader hiding that could reveal incomplete content.
Adds additional time after page load before hiding the preloader, allowing for smooth transitions and ensuring all content is fully rendered before revealing.Benefits:
Ensures complete content loading, provides smooth visual transitions, and prevents premature preloader hiding that could reveal incomplete content.
Interface Tab > Preloader
Maximum timeout
How it works:
Sets a failsafe maximum display time for the preloader to prevent it from showing indefinitely if page loading fails or encounters errors.Benefits:
Prevents infinite loading states, improves error handling, and ensures users can access content even if loading detection fails or encounters issues.
Sets a failsafe maximum display time for the preloader to prevent it from showing indefinitely if page loading fails or encounters errors.Benefits:
Prevents infinite loading states, improves error handling, and ensures users can access content even if loading detection fails or encounters issues.
Interface Tab > Preloader
Show preloader immediately when a link is clicked
How it works:
Displays the preloader instantly when users click navigation links, providing immediate feedback and improving perceived performance during page transitions.Benefits:
Provides instant user feedback, improves perceived navigation speed, and creates seamless transition experience between pages with consistent loading feedback.
Displays the preloader instantly when users click navigation links, providing immediate feedback and improving perceived performance during page transitions.Benefits:
Provides instant user feedback, improves perceived navigation speed, and creates seamless transition experience between pages with consistent loading feedback.
Interface Tab > Laser Loader
Enable Laser Loader
How it works:
Adds a smooth loading progress bar at the top or bottom of the page similar to YouTube and Medium, providing real-time visual feedback about page loading progress.Benefits:
Provides modern, professional loading experience, gives users real-time progress feedback, and improves perceived performance with familiar loading patterns.
Adds a smooth loading progress bar at the top or bottom of the page similar to YouTube and Medium, providing real-time visual feedback about page loading progress.Benefits:
Provides modern, professional loading experience, gives users real-time progress feedback, and improves perceived performance with familiar loading patterns.
Interface Tab > Laser Loader
Disable Laser Loader inside Bricks Builder
How it works:
Automatically detects the Bricks Builder editing environment and disables the laser loader to prevent interference with the builder interface and editing workflow.Benefits:
Maintains clean builder experience, prevents editing workflow interruptions, and ensures the loader only appears for site visitors without affecting development work.
Automatically detects the Bricks Builder editing environment and disables the laser loader to prevent interference with the builder interface and editing workflow.Benefits:
Maintains clean builder experience, prevents editing workflow interruptions, and ensures the loader only appears for site visitors without affecting development work.
Interface Tab > Laser Loader
Position
How it works:
Configures whether the laser loader appears at the top or bottom of the viewport, allowing positioning that best fits the site design and user experience preferences.Benefits:
Provides design flexibility, ensures loader visibility without content interference, and allows positioning that complements existing site navigation and layout.
Configures whether the laser loader appears at the top or bottom of the viewport, allowing positioning that best fits the site design and user experience preferences.Benefits:
Provides design flexibility, ensures loader visibility without content interference, and allows positioning that complements existing site navigation and layout.
Interface Tab > Laser Loader
Loader Color
How it works:
Customizes the progress bar color to match brand colors, ensure visibility against different backgrounds, and maintain consistency with site design elements.Benefits:
Maintains brand consistency, ensures proper visibility and contrast, and provides visual integration with existing site design and color schemes.
Customizes the progress bar color to match brand colors, ensure visibility against different backgrounds, and maintain consistency with site design elements.Benefits:
Maintains brand consistency, ensures proper visibility and contrast, and provides visual integration with existing site design and color schemes.
Interface Tab > Laser Loader
Height
How it works:
Sets the progress bar thickness to balance visibility with subtlety, ensuring the loader is noticeable without being intrusive or overwhelming.Benefits:
Provides appropriate visual weight, balances visibility with design subtlety, and ensures the loader is noticeable without dominating the user interface.
Sets the progress bar thickness to balance visibility with subtlety, ensuring the loader is noticeable without being intrusive or overwhelming.Benefits:
Provides appropriate visual weight, balances visibility with design subtlety, and ensures the loader is noticeable without dominating the user interface.
Interface Tab > Laser Loader
Z-Index
How it works:
Configures the layering order of the laser loader to ensure it appears above other page elements while not interfering with critical interface components.Benefits:
Ensures loader visibility above content, prevents layering conflicts with other interface elements, and maintains proper visual hierarchy during loading states.
Configures the layering order of the laser loader to ensure it appears above other page elements while not interfering with critical interface components.Benefits:
Ensures loader visibility above content, prevents layering conflicts with other interface elements, and maintains proper visual hierarchy during loading states.
Interface Tab > Laser Loader
Show Percentage
How it works:
Displays the loading percentage as text alongside the progress bar, providing specific numerical feedback about loading progress to users.Benefits:
Provides precise progress feedback, improves user understanding of loading time, and offers additional context for users who prefer numerical progress indicators.
Displays the loading percentage as text alongside the progress bar, providing specific numerical feedback about loading progress to users.Benefits:
Provides precise progress feedback, improves user understanding of loading time, and offers additional context for users who prefer numerical progress indicators.
Interface Tab > Laser Loader
Auto Start on Link Click
How it works:
Automatically initiates the laser loader when users click navigation links, providing immediate visual feedback and starting progress indication before actual loading begins.Benefits:
Provides instant user feedback, improves perceived responsiveness, and creates seamless navigation experience with immediate progress indication.
Automatically initiates the laser loader when users click navigation links, providing immediate visual feedback and starting progress indication before actual loading begins.Benefits:
Provides instant user feedback, improves perceived responsiveness, and creates seamless navigation experience with immediate progress indication.
Interface Tab > Laser Loader
Enable Shadow Effect
How it works:
Adds a subtle shadow effect to the laser loader to improve visibility against various backgrounds and create visual depth for better user experience.Benefits:
Improves loader visibility across different backgrounds, adds visual polish and professionalism, and ensures the loader remains visible regardless of underlying content.
Adds a subtle shadow effect to the laser loader to improve visibility against various backgrounds and create visual depth for better user experience.Benefits:
Improves loader visibility across different backgrounds, adds visual polish and professionalism, and ensures the loader remains visible regardless of underlying content.
Interface Tab > Laser Loader
Show on AJAX Requests
How it works:
Displays the laser loader during AJAX requests and dynamic content loading, providing progress feedback for background operations and partial page updates.Benefits:
Provides feedback for dynamic content loading, improves user understanding of background operations, and maintains consistent loading experience for all types of content updates.
Displays the laser loader during AJAX requests and dynamic content loading, providing progress feedback for background operations and partial page updates.Benefits:
Provides feedback for dynamic content loading, improves user understanding of background operations, and maintains consistent loading experience for all types of content updates.
Interface Tab > Laser Loader
Minimum/Maximum Load Time
How it works:
Configures timing constraints for the laser loader display, ensuring it appears for minimum visibility while preventing excessive display duration for fast-loading content.Benefits:
Prevents flickering for quick loads, ensures adequate feedback time, and provides consistent user experience regardless of actual loading speed variations.
Configures timing constraints for the laser loader display, ensuring it appears for minimum visibility while preventing excessive display duration for fast-loading content.Benefits:
Prevents flickering for quick loads, ensures adequate feedback time, and provides consistent user experience regardless of actual loading speed variations.
Interface Tab > Laser Loader
Animation Easing
How it works:
Chooses animation style and easing functions for the progress bar movement, creating smooth, natural-feeling progress animations that enhance user experience.Benefits:
Provides smooth, professional animation experience, creates natural movement patterns, and enhances visual appeal with polished animation transitions.
Chooses animation style and easing functions for the progress bar movement, creating smooth, natural-feeling progress animations that enhance user experience.Benefits:
Provides smooth, professional animation experience, creates natural movement patterns, and enhances visual appeal with polished animation transitions.
Interface Tab > Laser Loader
RTL Support
How it works:
Provides right-to-left language support for the laser loader, ensuring proper display direction and behavior for RTL language websites and user interfaces.Benefits:
Ensures proper functionality for RTL languages, maintains accessibility for international users, and provides consistent experience across different language orientations.
Provides right-to-left language support for the laser loader, ensuring proper display direction and behavior for RTL language websites and user interfaces.Benefits:
Ensures proper functionality for RTL languages, maintains accessibility for international users, and provides consistent experience across different language orientations.
Interface Tab > Laser Loader
Hide on Mobile Devices
How it works:
Optionally disables the laser loader on mobile devices to optimize mobile performance, reduce visual clutter, or accommodate different mobile user experience preferences.Benefits:
Optimizes mobile performance, reduces visual distractions on smaller screens, and allows mobile-specific user experience optimization based on platform capabilities.
Optionally disables the laser loader on mobile devices to optimize mobile performance, reduce visual clutter, or accommodate different mobile user experience preferences.Benefits:
Optimizes mobile performance, reduces visual distractions on smaller screens, and allows mobile-specific user experience optimization based on platform capabilities.
Interface Tab > Experience
Enable Page Transitions
How it works:
Adds smooth fade transitions between page navigations, creating seamless visual continuity as users move between different pages on the website.Benefits:
Provides professional, smooth navigation experience, reduces jarring page changes, and creates polished user experience that feels more like a modern web application.
Adds smooth fade transitions between page navigations, creating seamless visual continuity as users move between different pages on the website.Benefits:
Provides professional, smooth navigation experience, reduces jarring page changes, and creates polished user experience that feels more like a modern web application.
Interface Tab > Experience
Replace Media
How it works:
Replaces media files while maintaining the same ID and file name, preserving all references, links, and integrations while updating the actual media content.Benefits:
Maintains all existing references and links, prevents broken media connections, and allows seamless media updates without affecting content structure or external integrations.
Replaces media files while maintaining the same ID and file name, preserving all references, links, and integrations while updating the actual media content.Benefits:
Maintains all existing references and links, prevents broken media connections, and allows seamless media updates without affecting content structure or external integrations.