Nuestra Biblioteca de Módulos
Esta es la Edición Estándar de Bldr
Para desarrollar Bldr Stndrd, nos inspiramos en el concepto de Diseño Atómico. Este enfoque nos permite construir sitios web complejos a través de la siguiente jerarquía:
Átomos → Moléculas → Organismos → Plantillas → Páginas
Desarrollamos con un sistema de diseño adaptable, escalable y fácil de implementar en mente.
Consideraciones:
- Esta biblioteca de módulos contiene todos los módulos actualmente disponibles, incluyendo algunos en modo Beta.
- Muchos de nuestros módulos tienen opciones de animación y pueden activarse individualmente.
- Ninguno de los módulos en esta biblioteca utiliza HubDB, pero muchos de ellos pueden modificarse para utilizarlo.
Índice
Theme Style Guide
This is the basic style guide that we use to set up the theme. This can be set up in the theme settings.
Colors
Primary
(#0066FF)
Secondary
(#001A4D)
Alternate
(#CCFF00)
Dark
(#000000)
Light
(#FFFFFF)
Text styles
Jumbo
Belive
Heading 1
I believe in hope. I believe in believe.
Heading 2
Be curious, not judgmental.
Heading 3
Win or lose, do it with dignity.
Heading 4
Every day is a chance to be better than we were the day before.
Heading 5
Do you know what the opposite of love is? The opposite of love is indifference.
Heading 6
I promise you, there is something worse out there than being sad, and that’s being alone and being sad.
Paragraph
I’ve heard folks say that if you love what you do, you’ll never work a day in your life. Well, I gotta disagree. I love what I do, and I work incredibly hard.
This is a regular link example
This is a custom tag
There’s two buttons I never like hittin’, and that’s:
- panic and
- snooze
Blockquote
I think things come into our lives to help us get from one place to a better one.
– Ted Lasso
Table
Title | Title |
A1 | B1 |
A2 | B2 |
Buttons styles
Form styles
Accordion
Title 1
Title 2
Title 3
Title 4
BOFU
This is the title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta nunc nec est mollis, eu mattis nisl elementum. Proin venenatis turpis eget vehicula consectetur.
BOFU Cover
Lorem ipsum dolor sit amet
Nam efficitur, ligula ac accumsan porta, orci tellus aliquam libero, sit amet finibus arcu ipsum vel ex.
Cards - Carousel
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Learn moreThis is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Learn moreThis is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Learn moreThis is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Learn moreThis is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Learn moreCards - Grid
Cards - Title with icon
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Cascading images
Faqs
Website
What is the importance of responsive web design?
Responsive web design ensures that a website adapts and displays properly on various devices and screen sizes, such as desktops, tablets, and smartphones. This is crucial for providing a seamless user experience and reaching a broader audience. Google also considers mobile-friendliness as a ranking factor, making it essential for search engine optimization (SEO).
How do I secure my website against cyber threats?
Website security is crucial to protect against cyber threats. Implementing HTTPS, keeping software and plugins up-to-date, using strong and unique passwords, and conducting regular security audits are essential practices. Additionally, consider employing a web application firewall (WAF) and regularly backing up your website to mitigate the impact of potential security breaches.
What is the significance of website loading speed?
Website loading speed is crucial for user satisfaction and search engine rankings. Slow-loading websites can lead to higher bounce rates and lower user engagement. Search engines like Google consider page speed as a ranking factor, impacting a site's visibility in search results. To improve loading speed, optimize images, use browser caching, minimize HTTP requests, and consider a reliable hosting provider.
Inbound
What is inbound marketing, and how does it differ from outbound marketing?
Inbound marketing is an approach focused on attracting and engaging customers through valuable content and experiences. It involves creating and sharing content that addresses the needs and challenges of your target audience, drawing them in naturally. In contrast, outbound marketing relies on traditional methods like advertising, cold calling, and direct mail to push messages to a broad audience. Inbound marketing is more customer-centric, relying on the idea of earning the audience's attention.
How can businesses effectively implement inbound marketing strategies?
Effective implementation of inbound marketing involves several key steps. Firstly, identify your target audience and create detailed buyer personas. Develop high-quality, relevant content that addresses the pain points and interests of your audience. Utilize various channels, such as blogs, social media, and email, to distribute your content. Implement SEO strategies to enhance your online visibility. Use analytics tools to measure and analyze the performance of your campaigns, adjusting strategies based on data insights. Building strong relationships and fostering engagement with your audience are essential aspects of successful inbound marketing.
Hubspot
What is HubSpot, and how does it help businesses?
HubSpot is an all-in-one inbound marketing, sales, and customer service platform. It provides tools for businesses to attract visitors, convert leads, and close customers. HubSpot's features include website and landing page creation, lead nurturing through email marketing, customer relationship management (CRM), social media management, analytics, and more. By centralizing these functions, HubSpot helps businesses streamline their marketing and sales efforts, fostering better customer engagement and growth.
How can HubSpot benefit small businesses?
HubSpot offers significant benefits to small businesses by providing a cost-effective and integrated solution for their marketing and sales needs. Small businesses can use HubSpot to create professional websites, manage customer relationships, automate marketing campaigns, and gain insights through analytics. The platform's user-friendly interface and scalability make it accessible to businesses of varying sizes. Additionally, HubSpot's education resources, including webinars and certifications, empower small business owners and marketers to enhance their skills and maximize the impact of their marketing efforts.
Featured content
Lorem ipsum
Quisque egestas ligula in interdum finibus. Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus.
Button textFeatured panels
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Form - Card
Send us a message
Hero - Slider
This module have to, ideally, use the full width section with 0px paddings and margins.
This is the title
Paragraph style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus et eros nec cursus. Aliquam ac turpis fringilla, rutrum massa non, placerat velit.
This is the title
Paragraph style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus et eros nec cursus. Aliquam ac turpis fringilla, rutrum massa non, placerat velit.
Hero - Video Background
This module have to, ideally, use the full width section with 0px paddings and margins.
Icons - Cards
Two options: Icons on Top or Left
Infinite slider
Logos - Carousel
Lottie animation
Map
Panels grid
Six different grid styles.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn moreLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
Learn morePricing cards
Title
$19 usd
/ month - billed yearly
$199 usd
billed yearly
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
- Fusce vel nisi volutpat
- Fringilla tortor id
- Vehicula diam
Nam a dapibus quam, at laoreet odio.
Title
$19 usd
/ month - billed yearly
$199 usd
billed yearly
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
- Fusce vel nisi volutpat
- Fringilla tortor id
- Vehicula diam
Nam a dapibus quam, at laoreet odio.
Title
$19 usd
/ month - billed yearly
$199 usd
billed yearly
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl felis, tristique sit amet odio ut, mattis lobortis mauris.
- Fusce vel nisi volutpat
- Fringilla tortor id
- Vehicula diam
Nam a dapibus quam, at laoreet odio.
Products
Product Title
Short product description
$10.00 usd
Product Title
Short product description
$10.00 usd
Product Title
Short product description
$10.00 usd
Product Title
Short product description
$10.00 usd
Product Title
Short product description
$10.00 usd
Product Title
Short product description
$10.00 usd
RSS Feed Cards
Search input
This is using the default HubSpot search functionality
Section Divider
This module have to, ideally, use the full width section with 0px paddings and margins.
Arrow down
Arrow up
Diagonal
Diagonal inverted
Gradient
Wave
Wave Animated
Simple card
Lorem ipsum
Quisque egestas ligula in interdum finibus. Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.
- Nullam finibus velit at odio ullamcorper tincidunt.
- Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
- Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
Simple Chart
You have 4 options: Bar, Horizontal Bar, Pie and Doughnut
Stats Counter
Steps - Cards
Card 1 title
Contextual advertising can be profitable.
Card 2 title
Contextual advertising can be profitable.
Card 3 title
Contextual advertising can be profitable.
Card 4 title
Contextual advertising can be profitable.
Tabs
You have 2 options: Tabs on top or left side
- Tab 1 title
- Tab 1 title
- Tab 2 title
- Tab 3 title
Quisque egestas ligula in interdum finibus.
Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.
- Nullam finibus velit at odio ullamcorper tincidunt.
- Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
- Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
Quisque egestas ligula in interdum finibus.
Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.
- Nullam finibus velit at odio ullamcorper tincidunt.
- Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
- Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
Quisque egestas ligula in interdum finibus.
Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.
- Nullam finibus velit at odio ullamcorper tincidunt.
- Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
- Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
- Tab 1 title
- Tab 1 title
- Tab 2 title
- Tab 3 title
Quisque egestas ligula in interdum finibus.
Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.
- Nullam finibus velit at odio ullamcorper tincidunt.
- Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
- Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
Quisque egestas ligula in interdum finibus.
Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.
- Nullam finibus velit at odio ullamcorper tincidunt.
- Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
- Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
Quisque egestas ligula in interdum finibus.
Suspendisse pretium sed tortor ut tempor. Phasellus orci nisi, posuere nec massa eu, ultricies convallis risus. Sed eget nulla consectetur, hendrerit augue eget, congue urna.
- Nullam finibus velit at odio ullamcorper tincidunt.
- Sed purus ligula, imperdiet ac bibendum vel, gravida eu tortor.
- Integer eu viverra ante. Nam elit dolor, rhoncus sit amet purus vel, tincidunt eleifend turpis.
Testimonial - Cards
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
John Doe
HubSpot
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Jane Doe
HubSpot
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Jane Doe
HubSpot
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
John Doe
HubSpot
Testimonial - Cards Carousel
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
John Doe
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
John Doe
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
John Doe
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
John Doe
Testimonial - Carousel
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
John Doe
HubSpotLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Jane Doe
HubSpotLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Jane Doe
HubSpot