NO CODING REQUIRED · ONE CLICK IMPORT
Bricks Builder templates with unmatched quality
Build smarter, save time.
Ready-to-use Bricks Builder templates for every section
Just copy, paste, and you're done. No setup, no code, and no headaches.
Hero
Top pick
Stunning hero sections that convert
20 components
Cards
Versatile card layouts for showcasing any type of content with elegance.
18 components
Features
Highlight your product's strengths with compelling feature layouts.
25 components
Buttons
Clear pricing layouts that make decision-making effortless.
10 components
Contact
Smart contact forms that turn inquiries into connections.
9 components
Pricing
Clear pricing layouts that make decision-making effortless.
17 components
One-click copy
171 components
Vanilla & ACSS & Core Framework
Customize animations without coding
Our intuitive configurator makes it easy to personalize animations to match your brand. Just slide, click, and apply.
Adjust colors, speed, and intensity in seconds
Preview changes in real-time
One-click to copy your customized animation
VISUAL EFFECTS
7 components
8 components
3 components
Effects Made Simple
Add stunning interactive animations to your website in seconds. Our collection of ready-to-use effects brings your elements to life with just one attribute.
One-click copy
6 Instant motion
Documentation ready
Effortless eCommerce for Bricks Builder
Customizable components to enhance your store’s design and functionality.
SureCart
Recommended
Modern, lightning-fast checkout experiences designed for digital products and services.
Product Pages
Conversion-optimized product pages with smart pricing displays and one-click purchase options.
4 components
SureSwitch
Dynamic price toggle with flexible payment options for seamless SureCart checkout experiences.
SureProtect
Elegant content protection for premium membership areas
More components
Coming soon
Woocommerce
Legacy
Traditional e-commerce components for WordPress stores. Basic functionality for physical product stores.
One-click copy
6 components
Documentation ready
Why choose Bricksfusion
Get the best components for your website with full support.
Get unlimited access forever with our lifetime plan, or choose yearly with our flexible subscription.
Learn moreAccess our extensive collection with new additions monthly.
165+ native Bricks Builder components
And growings.
SureCart components
Product pages and other features.

ACSS Framework ready
Available in many components.
Core Framework ready
Available in many components.
Regular Updates
Fresh designs monthly.
Quickly copy any component and paste it directly into your Bricks Builder.
Transform how you create animations with our revolutionary visual interface. No more documentation or HTML attributes - just intuitive, real-time customization.
No-code Required
Easy visual customization
One-click setup
Instant implementation
Perfectly adapts to any device, providing seamless user experiences.
Quick, effective assistance to resolve any issues or questions.
Unlock instant access to Bricksfusion
Choose Your Plan
New
New
From Purchase to implementation — Fast & Easy
Stop building websites. Start building experiences.
FAQ
Have a question?
We answer questions through the community and by mail as well, feel free to ask!
What are Bricksfusion components?
What is Bricks Vanilla, and why is it important in Bricksfusion?
What is the Visual Configurator and how does it help me?
What frameworks does Bricksfusion support?
How do ACSS and Core Framework help in my website development?
How can I access the components?
What types of components do you offer?
Can I customize the components?
Do I need advanced knowledge to use the components?
Do you offer refunds?
Do you offer any satisfaction guarantee?
What is the cost of the components?
Will there be price increases?
Can I pay for Bricksfusion in installments?
Can I upgrade from the Yearly Plan to the Lifetime Deal?
What payment methods do you accept?
Can I test the components before I buy them?
Does the lifetime payment include all future upgrades?
Can I get an invoice for my purchase?
How can I contact technical support?
What are the support hours?
How long does it take to solve a problem?
Is the support included in the price?
Do you offer tutorials or documentation for the components?
What kind of problems does the support cover?
Can I use the components on multiple websites?
Can I integrate the components with my existing content management system?
Can I combine several components on a single page?
How often do you release new updates?
Can I request new features for future components?
What kind of improvements do the upgrades include?
document.addEventListener('DOMContentLoaded', function() {
// Verificar si estamos en la página principal
if (window.location.pathname === '/' || window.location.pathname === '/index.php') {
const styles = `
.bf-installment-banner {
position: fixed;
top: 24px;
left: 24px;
background: rgba(20, 20, 20, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
padding: 12px 18px;
color: white;
font-family: 'Inter', sans-serif;
z-index: 1000;
opacity: 0;
transform: translateY(-120%);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
display: flex;
flex-direction: column;
gap: 8px;
width: fit-content;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
visibility: hidden;
}
.bf-installment-banner.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.bf-installment-banner-content {
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
padding-right: 16px;
}
.bf-new-badge {
background: #10B981;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
color: white;
display: inline-flex;
align-items: center;
height: 18px;
}
.bf-message-wrapper {
display: inline-flex;
align-items: center;
gap: 8px;
}
.bf-installment-text {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.95);
font-family: 'Inter', sans-serif;
}
.bf-close-button {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
background: transparent;
transition: all 0.2s ease;
border: none;
padding: 0;
color: rgba(255, 255, 255, 0.9);
}
.bf-close-button:hover {
background: rgba(255, 255, 255, 0.15);
color: white;
}
.bf-close-button svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2.5;
}
.bf-progress-bar {
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.1);
border-radius: 1px;
overflow: hidden;
}
.bf-progress-bar-fill {
width: 100%;
height: 100%;
background: #10B981;
transform-origin: left;
animation: shrink 20s linear forwards;
will-change: transform;
}
@keyframes shrink {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (max-width: 768px) {
.bf-installment-banner {
left: 16px;
right: 16px;
top: auto;
bottom: 24px;
transform: translateY(120%);
padding: 10px 14px;
width: calc(100% - 32px);
max-width: calc(100% - 32px);
}
.bf-installment-banner.show {
transform: translateY(0);
}
.bf-installment-text {
font-size: 13px;
}
.bf-new-badge {
padding: 1px 6px;
font-size: 10px;
}
}
`;
// Inyectar estilos de forma segura
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
// Create banner HTML
const bannerHTML = `
<div class="bf-installment-banner">
<div class="bf-installment-banner-content">
<div class="bf-message-wrapper">
<span class="bf-new-badge">New</span>
<span class="bf-installment-text">Monthly payments available</span>
</div>
<button class="bf-close-button" aria-label="Close notification">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
<div class="bf-progress-bar">
<div class="bf-progress-bar-fill"></div>
</div>
</div>
`;
// Asegurar que los estilos están cargados antes de mostrar el banner
requestAnimationFrame(() => {
document.body.insertAdjacentHTML('beforeend', bannerHTML);
const banner = document.querySelector('.bf-installment-banner');
// Asegurar que el DOM está actualizado antes de mostrar
requestAnimationFrame(() => {
setTimeout(() => {
banner.classList.add('show');
}, 500);
});
// Close button functionality
const closeButton = banner.querySelector('.bf-close-button');
closeButton.addEventListener('click', () => {
banner.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease';
banner.style.opacity = '0';
banner.style.transform = `translateY(${window.innerWidth <= 768 ? '120%' : '-120%'})`;
setTimeout(() => {
banner.remove();
}, 500);
});
// Auto-remove after 20 seconds
setTimeout(() => {
if (banner.isConnected) {
banner.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease';
banner.style.opacity = '0';
banner.style.transform = `translateY(${window.innerWidth <= 768 ? '120%' : '-120%'})`;
setTimeout(() => {
if (banner.isConnected) {
banner.remove();
}
}, 500);
}
}, 20000);
});
}
});