Buy Now
document.addEventListener('DOMContentLoaded', () => {
  // Espera a que todo cargue (incluido Bricks)
  window.addEventListener('load', () => {
    setTimeout(() => {
      const headerEl = document.getElementById('brx-header');
      const targetEls = Array.from(document.querySelectorAll('.fb-hide-on-scroll'));

      if (!headerEl || !targetEls.length) return;

      let headerHeight = 0;
      let addThreshold = 0;
      let removeThreshold = 0;
      let hidden = false;
      let ticking = false;

      function updateHeights() {
        headerHeight = headerEl.getBoundingClientRect().height;
        addThreshold = Math.ceil(headerHeight) + 1;
        removeThreshold = Math.max(0, Math.floor(headerHeight) - 6);
      }

      function applyHiddenClass(shouldHide) {
        targetEls.forEach(el => {
          el.classList.toggle('fb-hide', shouldHide);
        });
      }

      function onScrollRaf() {
        const scrollY = window.scrollY || window.pageYOffset;

        if (!hidden && scrollY > addThreshold) {
          hidden = true;
          applyHiddenClass(true);
        } else if (hidden && scrollY < removeThreshold) {
          hidden = false;
          applyHiddenClass(false);
        }
        ticking = false;
      }

      function onScroll() {
        if (!ticking) {
          ticking = true;
          requestAnimationFrame(onScrollRaf);
        }
      }

      updateHeights();
      window.addEventListener('scroll', onScroll, { passive: true });

      window.addEventListener('resize', () => {
        updateHeights();
        onScrollRaf();
      });

      if (typeof ResizeObserver !== 'undefined') {
        const ro = new ResizeObserver(() => {
          updateHeights();
          onScrollRaf();
        });
        ro.observe(headerEl);
      }

      onScrollRaf();
    }, 400); // <-- inicia 1 segundo después de la carga completa
  });
});
Included in your Fancy Bricks subscription

Fancy Plugin: Advanced Widgets and Features for Bricks Builder

Fancy Bricks has always been committed to offering templates that truly stand out. Now, it goes a step further with Fancy Plugin, a powerful add-on packed with advanced widgets and features for Bricks Builder. And the best part? You won’t have to pay anything extra. Fancy Plugin is included in your subscription.

Buy NowExplore all features

Wishlist / Favorites

Choose the type of content to which you want to apply the favorites system and manage counts independently for products, entries, or other custom types.

Manage favorites separately for each content type. Choose which post type to enable favorites for and track counts independently across products, blog posts, or custom post types.

Show how many users have favorited an item using a dynamic live counter with an optional customizable link to your favorites page.

Seamlessly integrates on single post/product pages and inside query loops, ensuring full functionality no matter where you place it.

Favorites are stored in user meta for logged-in users and in cookies for guests, ensuring their lists remain even after leaving the site.

Display a list of the user’s saved items. Use the custom query loop to show all posts or products marked as favorites — perfect for a personalized “My Favorites” or “Wishlist” page.

Use the arrow keys to look around.

Panorama 360

Turn the view by dragging with the mouse or a finger, or with the keyboard arrows. Adjustable sensitivity, invertible direction, and an optional glide that keeps it turning when you let go.

Add extra viewpoints of the same place and a row of buttons appears. The view angle carries over between them, so the visitor keeps looking the same way instead of being spun back to the front.

Show the panorama inline, or as a preview the visitor clicks to open. The preview costs nothing in 3D: no WebGL context and no texture in video memory until they open it.

Choose the starting angle, height and field of view. Keep the horizon level to stop the view just short of straight up and down, where an equirectangular image smears.

Give each scene a smaller copy for mobile and the heavy one is never downloaded there.

Nothing extra to load. Where WebGL is missing, or if the browser drops the GPU, the widget shows the photo instead of an empty box and picks the view back up when the GPU returns.

Use the left and right arrow keys to rotate.

360 Rotation widget

Pick the frames as a gallery and visitors turn it by dragging with the mouse or a finger, or with the keyboard arrows

frames preload behind a loading indicator, so the spin is smooth from the very first drag

With the option to serve every frame, half of them or a third of them on phones. The skipped frames are never downloaded

Autoplay with adjustable speed. It can start only when the widget is visible and stop when the visitor takes over

Center badge with editable text, size and colors. It can hide while rotating and on mobile

Drag hint, top or bottom, that disappears at the first interaction, plus a short nudge on load so it reads as interactive

Curved arrow under the product in two bundled styles, or your own SVG

keyboard control, a screen reader label, and autoplay and nudge switch off when the visitor prefers reduced motion.

  • Fancy timeline
    How to use
    This is the description for timeline item 1. Add your content here.
  • Map synchronitation
    Maps
    This is the description for timeline item 1. Add your content here.
  • Timeline Heading
    I am the step 1
    This is the description for timeline item 1. Add your content here.

Nestable Timeline

Display the timeline's progress with fully customizable color, thickness, and style.

Items activate on scroll. Customize their style or use the fb-active class for advanced CSS users.

Enable a two-column layout with alternating items for a more dynamic visual flow.

Build custom structures without limitations. Nest items freely to match your design needs.

Adjust the progress bar behavior regardless of the timeline’s position on the page—top, bottom, or anywhere in between.

Choose when items should activate: at the start or midway

Advance image comparison

Maintain consistent proportions regardless of the original image dimensions. This ensures your before-and-after comparison looks polished and professional on any device or layout.

Enable hover mode for an immersive experience where the slider follows the user’s cursor, making the interaction feel fluid and dynamic.

Decide whether the slider should automatically return to the center when the cursor leaves the area, or stay where the user left it for a more static comparison.

Add an attention-grabbing ring animation around the handle to highlight the call-to-action and encourage users to drag or interact with the slider.

Choose from the library icons or upload your own SVG to personalize the slider.

Categories dropdown

Create accessible multi-level category dropdowns with keyboard navigation and customizable styling.

 

Designed with WooCommerce categories in mind, but fully compatible with any category, tag, or custom taxonomy.

Seamlessly explore subcategories with expandable/collapsible sections to maintain a clear hierarchy.

Quickly return to the previous level with an intuitive and familiar interaction.

Optionally display the number of items per term to help guide user selection.

Enable keyboard navigation and ARIA attributes for an inclusive and accessible experience.

Days
Hours
Minutes
Seconds

Nestable countdown with dynamic data

Build custom structures without limitations. Nest items freely to match your design needs.

Choose between a manual date picker or connect to dynamic data sources like ACF fields or native WooCommerce metadata, such as sale end dates. Perfect for countdowns tied to promotions, events, or any custom field.

et the countdown timer to any timezone you need, ensuring accuracy and consistency no matter where your audience is located or where your server is hosted.