Sistema de Diseño Xacobeos

Componentes, utilidades y patrones de diseño para el tema WordPress

v1.0.0 Modular Responsive

Tipografía

Jerarquía de textos y elementos tipográficos

Headings

Heading 1 - Título Principal

Heading 2 - Título Secundario

Heading 3 - Título Terciario

Heading 4 - Título Cuaternario

Heading 5 - Título Quinario
Heading 6 - Título Senario

Elementos de Texto

Párrafo normal con texto de ejemplo que muestra cómo se ve el contenido regular del sitio web.

Párrafo destacado (lead) con texto más grande para llamar la atención.

Texto de caption para información secundaria.

Texto pequeño para detalles adicionales.

Esta es una cita de ejemplo que muestra cómo se ve el contenido citado en el sistema.

— Autor de la cita

Paleta de Colores

Colores principales y funcionales del sistema

Colores Principales

Camino Blue #1E4A8C
Camino Yellow #FFD700

Colores Funcionales

Success #10B981
Warning #F59E0B
Error #EF4444
Info #3B82F6

Botones - Estilo Home (Sin Sombras)

Diferentes estilos y estados de botones con el amarillo característico, bordes redondeados y diseño limpio sin sombras ni animaciones

Botones de la Home

Estos son los botones característicos de la página de inicio

Variantes Principales

Botones Outline

Tamaños

Estados

Botones Especiales

Con Iconos

Cards y Widgets

Tarjetas de contenido y widgets laterales

Card Básica

Esta es una card básica con imagen y contenido. Perfecta para mostrar información estructurada.

Santiago 4.8

Widget Lateral

Este es un widget lateral con los estilos específicos que proporcionaste:

  • Border: 0px solid rgb(221, 221, 221)
  • Border-radius: 12px
  • Padding: 24px
  • Box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px

Cards de Alojamientos

Sistema de cards especializado para mostrar alojamientos con diferentes tamaños

Card Small (S) - 4 por fila

Ideal para listados densos con mucha información

Repouso dos Peregrinos

Moledo, Viseu
Albergue
4.8

Repouso dos Peregrinos

Moledo, Viseu
Albergue
4.8

Repouso dos Peregrinos

Moledo, Viseu
Albergue
4.8

Repouso dos Peregrinos

Moledo, Viseu
Albergue
4.8

Card Large (L) - 2 por fila

Perfecto para destacar alojamientos importantes

Repouso dos Peregrinos

Moledo, Viseu
Albergue
4.8

Repouso dos Peregrinos

Moledo, Viseu
Albergue
4.8

Card Extra Large (XL) - 1 por fila

Para alojamientos destacados o páginas de detalle

Repouso dos Peregrinos

Moledo, Viseu
Albergue
4.8

Funciones Helper Disponibles

Generar una card individual:

<?php echo xacobeos_accommodation_card($post_id, 'l'); ?>

Generar grid por localidad:

<?php echo xacobeos_accommodation_by_localidad('santiago-de-compostela', 's', 8); ?>

Generar grid por provincia:

<?php echo xacobeos_accommodation_by_provincia('a-coruna', 'l', 6); ?>

Generar grid por tipo:

<?php echo xacobeos_accommodation_by_tipo('albergue', 'xl', 4); ?>

Blog y Noticias

Diseño minimalista y austero para entradas de blog, sin cards, fondo blanco y tipografía limpia

Post Individual (Single)

Estilo para páginas de post individual

Historia del Camino de Santiago: Origen y Evolución

por Raúl Fernández

El Camino de Santiago es una de las rutas de peregrinación más importantes del mundo cristiano. Su origen se remonta al siglo IX, cuando se descubrió la tumba del apóstol Santiago en Compostela.

Los Primeros Peregrinos

Los primeros peregrinos comenzaron a llegar desde toda Europa, creando una red de caminos que conectaba diferentes regiones con Santiago de Compostela.

Evolución Histórica

A lo largo de los siglos, el Camino ha evolucionado, adaptándose a los cambios sociales y políticos de cada época.

Períodos Clave

Estos son los momentos más importantes en la historia del Camino:

Siglo IX

Descubrimiento de la tumba del apóstol Santiago.

Siglo XII

Apogeo de las peregrinaciones medievales.

Siglo XXI

Reconocimiento como Patrimonio de la Humanidad.

"El Camino no es solo un viaje físico, sino un viaje espiritual que transforma a quienes lo recorren."

  • Siglo IX: Descubrimiento de la tumba
  • Siglo XII: Apogeo de las peregrinaciones
  • Siglo XIX: Renacimiento del Camino
  • Siglo XXI: Reconocimiento como Patrimonio de la Humanidad

Lista de Posts

Estilo para listados de posts

Navegación de Posts

Navegación entre posts individuales

Comentarios

Sistema de comentarios estilizado

Comentarios (3)

  1. Excelente artículo. Me ha ayudado mucho a entender la historia del Camino. ¡Gracias por compartir!

    Responder

  2. Muy interesante la evolución histórica. ¿Tienes más información sobre el renacimiento en el siglo XIX?

    Responder

Utilidades del Blog

Elementos adicionales para posts

⏱️ 5 minutos de lectura
hace 2 días
Este es un extracto personalizado que puede ser usado para destacar información importante del post.
Historia Cultura Tradición
peregrinación santiago camino historia

Funciones PHP Disponibles

Funciones helper para blog/noticias

Meta de Posts:

<?php xacobeos_posted_on(); ?>
<?php xacobeos_posted_by(); ?>
<?php xacobeos_entry_footer(); ?>

Imagen Destacada:

<?php xacobeos_post_thumbnail(); ?>

Navegación:

<?php xacobeos_the_post_navigation(); ?>
<?php xacobeos_the_posts_navigation(); ?>

Utilidades:

<?php echo xacobeos_get_reading_time(); ?>
<?php echo xacobeos_get_excerpt(100); ?>
<?php echo xacobeos_get_post_categories(); ?>

Formularios

Elementos de entrada y formularios

Inputs Básicos

Estados de Validación

✓ Campo válido
✗ Este campo tiene un error

Badges

Etiquetas informativas y estados

Badges Sólidos

Primario Secundario Success Warning Error Info

Badges Outline

Primario Secundario Success Warning Error Info

Tamaños

Small Normal Large

Notificaciones

Alertas y mensajes del sistema

Notificaciones Completas

Información
Esta es una notificación informativa con icono y contenido estructurado.
Éxito
Operación completada exitosamente.
Advertencia
Ten cuidado con esta acción.
Error
Ha ocurrido un error en la operación.

Alertas Simples

Información importante para el usuario.
Operación exitosa completada.
Advertencia sobre una acción.
Error que requiere atención.

Iconos

Sistema de iconos SVG integrado

Iconos de Acción

Home
Search
Menu
Close
Check
Plus

Iconos de Comunicación

Phone
Mail
Location
Globe
Star
Heart

Utilidades

Clases de utilidad para espaciado, layout y efectos

Espaciado

Padding pequeño (p-2)
Padding medio (p-4)
Padding grande (p-6)

Flexbox

Izquierda Centro Derecha
Item 1
Item 2
Item 3

Información del Sistema

Este sistema de diseño está diseñado para ser modular, escalable y fácil de usar. Todos los componentes están documentados y pueden ser utilizados en cualquier parte del tema WordPress.

CSS Modular Responsive Accesible WordPress Ready