🎨 Bricks Style Guide
Guía Visual Completa de Estilos del Tema Activo
✓ Bricks Activo
📋 Theme: Bricks Default
📝 Tipografía
Visualización de todas las jerarquías de encabezados y estilos de texto
Encabezados
Heading H1 – Título Principal
Heading H2 – Subtítulo Principal
Heading H3 – Sección
Heading H4 – Subsección
Heading H5 – Grupo
Heading H6 – Elemento
Párrafos y Texto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Texto en Negrita para énfasis importante en el contenido.
Texto en Cursiva para citas o referencias especiales.
Texto Subrayado para destacar información clave.
Texto Marcado para resaltar elementos relevantes.
Texto Pequeño para notas legales o secundarias.
Texto Tachado para contenido eliminado o no disponible.
Texto Código para mostrar fragmentos de código.
🔗 Enlaces y Estados
Comportamiento de enlaces en todos sus estados (normal, hover, active, visited)
Estados de Enlaces
Enlace Normal |
Enlace Hover |
Enlace Activo/Click |
Enlace Visitado
Enlaces en Contexto
Este es un párrafo con un enlace inline para ver cómo se comporta dentro del texto normal. Los enlaces deben heredar los colores y estilos definidos en los Theme Styles de Bricks.
Botones como Enlaces
🔘 Botones
Estilos de botones primarios, secundarios y variantes con todos los estados
Tamaños de Botones
Variantes de Botones
Estados de Botones
Botones con Icono
🎨 Colores Globales
Paleta de colores definida en Bricks Theme Styles
Primary
--brx-color-primary
Secondary
--brx-color-secondary
Accent
--brx-color-accent
Text
--brx-color-text
Text Alt
--brx-color-text-alt
Background
--brx-color-bg
BG Alt
--brx-color-bg-alt
Success
--brx-color-success
Warning
--brx-color-warning
Error
--brx-color-error
Info
--brx-color-info
Border
--brx-color-border
🧱 Elementos de Bloque y Espaciado
Contenedores nativos de Bricks: Section, Container, Block y Div con sus márgenes y paddings
1. Section (Sección)
Una sección es el contenedor de nivel superior en Bricks. Ideal para dividir el contenido en áreas temáticas grandes con padding y margin definidos en Theme Styles.
Padding: Espacio interno alrededor del contenido
Margin: Espacio externo que separa de otros elementos
2. Container (Contenedor Principal)
El container centra el contenido según el ancho máximo definido en los ajustes del tema de Bricks. Es el contenedor principal de la página.
Max-Width: Ancho máximo configurable en Theme Styles
3. Block (Bloque)
Un block es un contenedor semántico de Bricks, perfecto para agrupar contenido relacionado. Se usa comúnmente para artículos, comentarios o widgets.
Semántica: Article, aside, nav, etc.
4. Div (Contenedor Genérico)
Un div es el contenedor más básico y flexible de Bricks. No tiene semántica específica pero es útil para agrupar elementos y aplicar estilos.
Flexibilidad: Sin restricciones semánticas
📏 Márgenes (Espacio Externo)
margin: 20px (espacio azul alrededor)
📐 Paddings (Espacio Interno)
padding: 20px (espacio verde interno)
📑 Acordeón
Elemento de acordeón nativo de Bricks para contenido expandible. Haz clic para desplegar.
Bricks Builder es un constructor visual de temas para WordPress que permite crear diseños profesionales sin escribir código. Es rápido, limpio y altamente personalizable.
Este contenido muestra el padding interno del acordeón desplegado, los márgenes entre párrafos, y la tipografía aplicada al contenido expandible.
- Velocidad de carga optimizada
- Código limpio y semántico
- Integración con WooCommerce
- Theme Styles globales
Esta página se genera automáticamente y refleja todos los estilos definidos en los Theme Styles de Bricks. Cualquier cambio que hagas en los ajustes del tema se verá reflejado aquí inmediatamente.
Puedes usar el selector de arriba para cambiar entre diferentes Theme Styles si tienes varios creados en tu instalación de Bricks.
El contenido del acordeón muestra:
- Márgenes entre elementos
- Padding del contenedor
- Estilos de listas dentro del acordeón
- Transiciones de apertura/cierre
Sí, todos los elementos mostrados en esta guía heredan los estilos globales de Bricks. Puedes modificarlos desde Bricks > Theme Styles o aplicar estilos locales en cada página.
Este acordeón demuestra el comportamiento de múltiples items abiertos/cerrados y cómo se ve el contenido cuando está completamente expandido.
«La mejor manera de aprender los estilos de tu tema es verlos en acción con contenido real.»
Esta guía incluye todos los elementos HTML básicos y componentes de Bricks:
- Tipografía (H1-H6)
- Enlaces y estados
- Botones (variantes)
- Colores globales
- Contenedores
- Acordeón
- Tabs
- Formularios
- Testimonios
- Icon Box
📑 Tabs (Pestañas)
Elemento de pestañas para organizar contenido en secciones. Haz clic para cambiar entre pestañas.
Descripción del Producto
Este es el contenido de la primera pestaña. Aquí puedes poner la descripción principal de tu producto o servicio. Los tabs son excelentes para organizar mucha información de manera compacta.
Padding del panel: Este contenido muestra el espacio interno del panel de la pestaña activa.
Margin entre elementos: Los párrafos tienen separación definida en los Theme Styles.
Información Adicional
En esta pestaña puedes incluir especificaciones técnicas, detalles de envío, políticas de devolución o cualquier información complementaria que necesites mostrar.
- Envío: Gratis a partir de $50
- Garantía: 2 años
- Devoluciones: 30 días
- Soporte: 24/7
- Actualizaciones: Gratuitas
- Comunidad: Activa
Este contenido demuestra cómo se ven las listas y la tipografía dentro de un panel de pestaña diferente.
Opiniones de Clientes
«Excelente producto, muy recomendado. La calidad es increíble y el servicio al cliente fue excepcional. Definitivamente volveré a comprar.»
– Cliente Satisfecho, Enero 2024
«Muy buen producto. La entrega fue rápida y el empaque perfecto. Solo mejoraría las instrucciones de uso.»
– María G., Febrero 2024
Este panel muestra cómo se ven los testimonios y las estrellas de valoración dentro de una pestaña.
Especificaciones Técnicas
| Dimensiones | 30 x 20 x 10 cm |
| Peso | 1.5 kg |
| Material | Aluminio premium |
| Color | Plateado, Negro, Azul |
| Garantía | 24 meses |
Este panel demuestra cómo se ven las tablas dentro de un contenido de pestaña, con sus bordes, padding de celdas y estilos de texto.
💬 Testimonios
Estilos de testimonios y reseñas de clientes
María García
CEO, Empresa XYZ
«Trabajar con este equipo ha sido una experiencia increíble. La atención al detalle y la profesionalidad son incomparables.»
Carlos López
Director de Marketing
«Los resultados superaron nuestras expectativas. Definitivamente volveremos a trabajar con ellos en futuros proyectos.»
Ana Martínez
Fundadora, Startup ABC
«La calidad del servicio es excepcional. Recomiendo encarecidamente sus productos a cualquier empresa que busque excelencia.»
📦 Icon Box
Cajas de contenido con iconos para características y servicios
🌐 Social Icons
Iconos de redes sociales con diferentes estilos y estados
Iconos Circulares
Iconos Cuadrados
Iconos con Texto
🎠 Carousel
Carrusel de imágenes o contenido deslizante
➖ Divider (Divisores)
Diferentes estilos de divisores para separar contenido
Divider Sólido
Divider Punteado
Divider Discontinuo
Divider con Icono
Divider con Texto
Divider Gradiente
📋 Formularios
Estilos de inputs, textareas, selects y elementos de formulario
Campos de Texto
Selects, Textarea y Botón Enviar
📑 Listas
Estilos de listas ordenadas, desordenadas y de definición
Lista Desordenada
- Primer elemento de lista
- Segundo elemento de lista
- Tercer elemento de lista
- Cuarto elemento de lista
Lista Ordenada
- Primer paso del proceso
- Segundo paso del proceso
- Tercer paso del proceso
- Cuarto paso del proceso
Lista de Definición
- Término 1
- Definición del primer término
- Término 2
- Definición del segundo término
📊 Tablas
Estilos de tablas HTML con datos de ejemplo
| ID | Nombre | Estado | Fecha | |
|---|---|---|---|---|
| 1 | Juan Pérez | juan@ejemplo.com | Activo | 2024-01-15 |
| 2 | María García | maria@ejemplo.com | Pendiente | 2024-01-16 |
| 3 | Carlos López | carlos@ejemplo.com | Inactivo | 2024-01-17 |
| 4 | Ana Martínez | ana@ejemplo.com | Nuevo | 2024-01-18 |
⚠️ Alertas y Mensajes
Estilos de notificaciones, alerts y mensajes de sistema
🔧 Variables CSS Detectadas
Lista de variables CSS de Bricks disponibles en tu tema
🔄 Cargando variables CSS…
