Patrones
🧩 ¿Qué son los patrones en WordPress?
Los patrones de bloques son diseños predefinidos compuestos por uno o varios bloques de contenido. Te permiten insertar rápidamente secciones completas (como encabezados con imágenes, columnas con texto, llamadas a la acción, etc.) sin tener que diseñarlas desde cero.
🎯 Piensa en ellos como «plantillas pequeñas» dentro de una página.
🕒 ¿Cuándo aparecieron?
- Introducción: WordPress 5.5 (agosto de 2020).
- Gran mejora: A partir de WordPress 5.9 (enero de 2022) con la llegada del Editor del sitio completo (FSE) y el uso intensivo de patrones para construir páginas y temas.
⚙️ ¿Cómo se usan?
✨ Insertar un patrón:
- Abre el editor de bloques (Gutenberg).
- Pulsa el botón “+” (añadir bloque).
- Ve a la pestaña “Patrones”.
- Explora las categorías: cabeceras, botones, columnas, etc.
- Haz clic en uno para insertarlo directamente en tu contenido.
🎨 Personalizarlo:
Una vez insertado, puedes editar los textos, imágenes, colores, márgenes, etc., como cualquier bloque normal.
✍️ ¿Cómo se crean patrones personalizados?
Desde WordPress 6.0 puedes crear tus propios patrones sin plugins:
- Ve a Apariencia > Editor > Patrones (si tienes un tema compatible con FSE).
- O ve a Diseño > Patrones en el editor clásico.
- Pulsa “Añadir nuevo patrón”.
- Diseña con bloques.
- Asigna un nombre y una categoría.
- Guarda y listo.
📌 También puedes registrarlos con código PHP en tu plugin o tema, si lo deseas (te puedo mostrar cómo si te interesa).
🧪 Ejemplos de patrones
1. Encabezado con imagen y botón
[Imagen de fondo]
[Título grande]
[Botón: “Saber más”]
📍 Usos: Portadas, promociones.
2. Tres columnas con iconos y texto
[🧠 Icono] [💼 Icono] [📞 Icono]
[Texto 1] [Texto 2] [Texto 3]
📍 Usos: Servicios, características de producto.
3. Llamada a la acción centrada
[Título llamativo]
[Texto breve]
[Botón grande “Contáctanos”]
📍 Usos: final de páginas, landing pages.
4. Testimonios
“Excelente producto”
— María P., clienta feliz
“Gran atención al cliente”
— Juan G., CEO de algo
📍 Usos: Prueba social.
5. Formulario de contacto integrado
(Usa bloques de un plugin como WPForms o Contact Form 7 dentro del patrón)
📚 Recomendación adicional
Puedes explorar patrones gratuitos directamente en:
👉 https://wordpress.org/patterns/
Son creados por la comunidad y puedes copiarlos e insertarlos en tu sitio.