Ficha de características y tabla de características

Los bloques «Tarjeta de características» y «Cuadrícula de características» convierten una fila de elementos destacados estructurados en un diseño pulido y fácil de leer en cualquier página. Cada tarjeta puede comenzar con un icono vectorial nítido, una foto o una insignia de tu biblioteca de Multimedia, o ambas cosas; si además utilizas una imagen, puedes añadir un icono opcional como insignia en la esquina superior izquierda de la tarjeta.

Utiliza una Cuadrícula de elementos destacados cuando quieras varias tarjetas en un diseño de columnas adaptable (servicios, equipamiento, premios). Coloca una sola Tarjeta de elementos destacados cuando solo necesites destacar un elemento dentro de una columna.

Para saber cómo se colocan los bloques dentro de las secciones y filas, consulta Diseño y contenido de la página. Para conocer los conceptos básicos de la barra lateral, consulta Barra lateral y barra de herramientas del editor de páginas.

Requisitos previos

• Una página abierta en Páginas → Editar → Editor de páginas
• Opcional: imágenes ya subidas en Multimedia (logotipos, imágenes de los equipos, sellos de premios, miniaturas de módulos)
• Opcional: una estructura de Sección → Fila → Columna, o bien deja que el editor ajuste el bloque al soltarlo en el lienzo

Añadir una cuadrícula de características

1. En la barra lateral derecha, haz clic en Bloques (icono «más»).
2. En Productos y formularios (o Avanzado, dependiendo de tu paleta de bloques), arrastra Cuadrícula de características a una columna.
3. La cuadrícula incluye tarjetas predeterminadas que puedes editar o sustituir.
4. Selecciona la cuadrícula en el lienzo → Editar → Atributos para configurar las columnas, el espacio entre ellas y el fondo de la sección.
5. Selecciona una tarjeta concreta dentro de la cuadrícula para personalizarla, o utiliza Añadir tarjeta en la cuadrícula para ampliar el conjunto.
6. Guarda la página y publícala cuando esté lista.

Añadir una sola tarjeta de características

1. Abre Bloques y arrastra Tarjeta de características a una columna (normalmente dentro de una fila con varias columnas).
2. Selecciona la tarjeta → Editar → Atributos para elegir el icono, la imagen, los colores y el estilo de la tarjeta.
3. Haz clic en el título y la descripción en el lienzo para editar el texto directamente (WYSIWYG).

La mayoría de los estudios empiezan con una cuadrícula de características para las páginas «Acerca de», «Servicios», «Equipo» o «Premios»; utiliza una única tarjeta de características para un recuadro en la barra lateral o un único argumento de venta.

Cómo se construye una tarjeta de característica

Cada tarjeta de característica es un pequeño espacio con hasta cuatro capas que los visitantes reconocen al instante:

Capa	Lo que ven los visitantes	Dónde se edita
Visual	Icono, imagen o imagen con una insignia de icono opcional	Atributos → Imagen e Icono
Título	Título breve (nombre del premio, modelo de equipo, nivel de servicio)	Haz clic en el encabezado en el lienzo
Descripción	Texto complementario (año, especificaciones, resumen en una frase)	Haz clic en el párrafo del lienzo
Enlace (opcional)	Imagen en la que se puede hacer clic para abrir una página de prensa, una URL de afiliado o una galería	Atributos → Imagen → Enlace de imagen

Las tarjetas heredan los tokens de tema de tu sitio web para el color de fondo y la sombra, de modo que se mantengan legibles tanto en paletas claras como oscuras; consulta Tema y marca del sitio web.

Modos de tarjeta: icono, imagen y superposición

No es necesario seleccionar un «modo» específico en un menú desplegable: la tarjeta se adapta según lo que configures en Atributos:

Modo icono (predeterminado)

Deja Fuente de la imagen en blanco. Elige un icono en Icono → Seleccionar icono. El icono aparece en un recuadro redondeado encima del título; es ideal para viñetas de servicios, pasos de un flujo de trabajo o categorías de herramientas cuando no se necesita una foto.

Las nuevas tarjetas añadidas con Añadir tarjeta en una cuadrícula se crean inicialmente en modo icono.

Modo de imagen

Establece Fuente de la imagen desde tu biblioteca de Multimedia (o pega una URL). La imagen se muestra encima del título. Borra Fuente de la imagen para volver al diseño solo con icono.

Las insignias y logotipos en formato PNG con transparencia funcionan especialmente bien para sellos de premios y marcas de empresa.

Modo de superposición (imagen + icono opcional)

Cuando una tarjeta tiene una imagen y seleccionas un icono, este se fija en la esquina superior izquierda de la tarjeta como una pequeña insignia; esto resulta útil cuando quieres que aparezca un símbolo de categoría (vídeo, paisaje, dron) sobre el logotipo de una publicación o la foto de un producto.

Utiliza Eliminar icono en Icono si quieres una insignia limpia que solo contenga una imagen (algo habitual en los murales de premios).

Solo icono          Solo imagen              Imagen + superposición de icono
┌─────────────┐    ┌─────────────┐         ┌─────────────┐
│  [icono]     │    │   [foto]   │         │[i] [foto]  │
│  Título      │    │   Título     │         │   Título     │
│  Descripción       │    │   Descripción      │         │   Descripción      │
└─────────────┘    └─────────────┘         └─────────────┘

Seleccionadores de recursos integrados (sin cambio de pestaña)

Para optimizar el flujo de trabajo de tu estudio, las tarjetas de características utilizan selectores nativos directamente en el panel Attr: así permaneces en el lienzo de la página mientras eliges los elementos visuales.

Selector de imágenes de la biblioteca multimedia

En Imagen → Fuente de imagen, utiliza el botón con el icono de imagen para abrir tu biblioteca Multimedia. Selecciona cualquier imagen que ya hayas subido; si eliges otro recurso, se sobrescribirá el actual (igual que en el bloque independiente Imagen).

• Utiliza recursos web optimizados de Multimedia en lugar de enlazar directamente archivos originales de gran tamaño.
• Los archivos PNG con transparencia son ideales para sellos de premios, logotipos de patrocinadores y recortes de elementos.
• Si necesitas un recurso puntual, puedes pegar una URL externa en Fuente de imagen y, a continuación, difuminar el campo para aplicarlo.

Sube primero los archivos nuevos en Medios si aún no están en la biblioteca; consulta Cómo subir tus primeras fotos.

Selector de iconos vectoriales

En Icono → Seleccionar icono, abre la biblioteca de iconos con función de búsqueda. Miles de iconos vectoriales nítidos se adaptan perfectamente a la tipografía y los colores del tema de tu sitio web.

• Busca por palabra clave —cámara, dron, premio, reloj, usuarios— para encontrar el que mejor se adapte a tu texto.
• Ajusta el Tamaño del icono, el color del icono, el fondo del icono y el redondeo del contenedor del icono sin salir del panel.
• Eliminar icono borra la insignia pero conserva tu imagen o texto.

Los iconos se muestran como vectores en la página publicada, por lo que se mantienen nítidos en pantallas Retina y dispositivos móviles.

Configurar una tarjeta de característica individual (Attr)

Selecciona una tarjeta de característica en el lienzo → Editar → Attr.

Imagen

Control	Qué hace
Fuente de la imagen	Campo de URL más botón de selección de multimedia; déjalo en blanco para tarjetas que solo contengan iconos
Enlace de la imagen	URL opcional que se abre cuando un visitante hace clic en la imagen (no en toda la tarjeta); útil para comunicados de prensa, páginas de afiliados o fotos ganadoras

El enlace abarca solo la imagen, al igual que suelen comportarse las insignias de premios y las miniaturas de equipos.

Icono

Control	Qué hace
Seleccionar icono	Abre el selector de iconos vectoriales
Eliminar icono	Oculta el contenedor del icono (énfasis solo en la imagen o solo en el texto)
Tamaño del icono	De pequeño a extragrande
Color del icono	Color del trazo del vector
Fondo del icono	Relleno detrás del icono
Redondeo del contenedor del icono	Radio de las esquinas del recuadro del icono
Alineación	Izquierda, centrada o derecha para el icono y el texto como un grupo

Estilo de la tarjeta

Control	Qué hace
Fondo de la tarjeta	Relleno de la superficie (los valores predeterminados siguen tu tema)
Radio del borde	Esquinas redondeadas en la tarjeta
Sombra	Profundidad preestablecida desde ninguna hasta extragrande
Mostrar borde	Borde fino opcional
Efecto al pasar el cursor	Ligero levantamiento al pasar el cursor cuando está activado

Utiliza Estilo en la misma barra lateral si necesitas ajustes puntuales de espaciado; la mayoría de los retoques de las tarjetas se encuentran en Atributos.

Configurar una cuadrícula de características (Attr)

Selecciona el contenedor Cuadrícula de características (no una tarjeta interior) → Editar → Attr.

Diseño

Control	Qué hace
Columnas	De 1 a 6 columnas en ordenador; las tarjetas se reajustan en tabletas y móviles
Añadir tarjeta	Inserta otra tarjeta inicial al final de la cuadrícula
Espacio	Espacio entre tarjetas (control deslizante)
Fondo de sección	Banda detrás de toda la cuadrícula (transparente por defecto)

Al cambiar el número de Columnas solo se ajusta el diseño; no se eliminan las tarjetas. Para eliminar tarjetas sobrantes, selecciónalas en el lienzo y elimínalas, o utiliza Capas.

Estilo de todas las tarjetas

Estos ajustes aplican el mismo estilo de iconos y tarjetas a todas las tarjetas de la cuadrícula; es una opción rápida cuando se desea un muro de premios o un catálogo de equipamiento uniformes.

Control	Qué hace
Tamaño del icono / Color del icono / Fondo del icono	Estilo de iconos por lotes
Alineación	Alineación de texto e iconos por lotes
Radio de la tarjeta / Sombra de la tarjeta	Estilo de la tarjeta por lotes

Selecciona una tarjeta concreta después para anular la configuración de una fila (por ejemplo, un color de contraste diferente en un servicio «destacado»).

Edición de títulos y texto del cuerpo

Los títulos y las descripciones se pueden editar directamente en el lienzo: haz clic en el texto como si fuera un procesador de textos. No necesitas un bloque de texto enriquecido independiente para el contenido de las tarjetas.

Mantén los títulos breves (nombre del premio, nombre del producto, nivel de servicio). Utiliza la descripción para indicar el año, la categoría, las especificaciones o una frase de apoyo.

Ejemplos prácticos de uso creativo

La cuadrícula «Destacados» es uno de los bloques no multimedia más flexibles del editor. Más allá de las genéricas «tres columnas de viñetas», estos diseños aparecen constantemente en sitios web creativos profesionales.

Premios, distinciones y reconocimientos

Celebra el reconocimiento del sector sin una página abarrotada de collages.

• Imagen: Sello de la publicación o insignia de ganador (PNG de Multimedia).
• Título: Nombre del premio y clasificación (2.º premio, Bellas Artes — Vídeo).
• Descripción: Organización y año.
• Enlace a la imagen: Imagen ganadora, comunicado de prensa o galería del concurso.
• Superposición (opcional): Pequeño icono de categoría (vídeo, paisaje) en la esquina superior izquierda cuando la insignia por sí sola no indica el medio.

Este es el mismo patrón que utilizan los estudios para las páginas tituladas Premios y distinciones o Reconocimientos.

Equipo fotográfico y configuración de producción

Los clientes de publicidad, astronomía y paisajes quieren pruebas de que puedes llevar a cabo trabajos técnicamente exigentes. Dedica una cuadrícula en Acerca de o Equipo a tu equipo de campo:

• Imagen: Fotografía nítida del producto: cuerpo de la cámara, dron, portafiltros, rastreador.
• Título: Nombre del modelo o función del equipo.
• Descripción: Una línea técnica (Phase One IQ4 150 MP — respaldo de gran formato).
• Enlace a la imagen: Programa de afiliados, página del fabricante o tu artículo detallado con la reseña del equipo.

El modo de iconos funciona para las categorías (Iluminación, Soportes, Filtros) cuando prefieras símbolos en lugar de fotos.

Servicios de estudio y contratos de colaboración

Divide los procesos de contratación en niveles fáciles de examinar; a menudo, tres columnas en el ordenador:

• Tarjeta 1 — Producción in situ — Imagen destacada o foto detrás de las cámaras; enlace a un caso práctico del portafolio.
• Tarjeta 2 — Entrega y archivo de material — Imagen de una unidad de almacenamiento o una galería; enlace a la descripción general del portal del cliente.
• Tarjeta 3 — Postproducción e impresión — Detalle de color o impresión; enlace a la página del producto impreso.

Combina la cuadrícula con Testimonios a continuación para aportar prueba social; consulta Bloques del editor y referencia de maquetación.

Talleres y módulos formativos

Esboza los bloques del plan de estudios para safaris de campo, tutoría en línea o ventas adicionales de cursos:

• Título: Nombre del módulo (Planificación del cielo nocturno, Procesamiento de pilas RAW complejas).
• Imagen: Fotograma o diagrama representativo.
• Enlace de la imagen: Página de compra, lista de espera o programa del curso.

Utiliza Eventos en la sección si quieres que los módulos aparezcan progresivamente al desplazarte por la página: Eventos e interacciones del editor de páginas.

Diseño y comportamiento en dispositivos móviles

Coloca la cuadrícula dentro de una Sección con un relleno vertical adecuado. En ventanas de visualización estrechas, las cuadrículas de varias columnas se apilan automáticamente en una sola columna; previsualízala con la opción Móvil en la barra de herramientas del editor antes de publicarla.

Para el ancho máximo de las filas y el equilibrio entre columnas, consulta Diseño de la página y contenido.

Consejos para una cuadrícula profesional

• Proporciones de imagen coherentes: unas relaciones de aspecto similares en todas las tarjetas dan la impresión de ser intencionadas; recorta las imágenes en Multimedia antes de seleccionarlas.
• Una idea por tarjeta: los visitantes leen por encima; evita los párrafos en el campo de descripción.
• Colores basados en el tema: da preferencia a los tokens de superficie del tema frente a los códigos hexadecimales fijos, para que el modo oscuro siga siendo legible.
• Enlaces significativos: los enlaces de las imágenes deben llevar a contenido que justifique el clic (galería, artículo, producto), no a páginas de inicio genéricas.
• Reutiliza los archivos multimedia: guarda los logotipos y los elementos de diseño una sola vez en Medios; utilízalos en todas las páginas y entradas del blog.

Solución de problemas

Síntoma	Qué comprobar
El icono cambia en Atributos, pero el lienzo parece no haber cambiado	Es posible que la tarjeta sea solo una imagen y aún no tenga icono: elige un icono o utiliza Eliminar icono y vuelve a seleccionarlo; guarda y actualiza la vista previa
El icono aparece entre la imagen y el texto en lugar de en la esquina superior izquierda	Vuelve a seleccionar el icono o sustituye la imagen una vez: la ubicación sincroniza el icono con la esquina de la tarjeta cuando hay una imagen
El selector de imágenes está vacío	Sube primero los recursos a Medios
Enlace de imagen está desactivado	Configura primero Fuente de imagen
Las columnas de la cuadrícula parecen apretadas en el móvil	Reduce el número de columnas o acorta los títulos; previsualiza en Móvil
Los estilos difieren entre el editor y el sitio web en producción	Guarda la página, publica y actualiza la página; consulta Solucionar problemas de publicación
La página migrada de WordPress muestra cuadros de marcador de posición con líneas discontinuas	Vuelve a importar o reconstruye la página con las herramientas de migración actuales; ponte en contacto con el servicio de asistencia si gestionas una importación heredada

Artículos relacionados

• Referencia de bloques y diseño del editor — catálogo completo de bloques
• Añadir archivos multimedia a las páginas — cómo integrar recursos de la biblioteca en los bloques
• Eventos e interacciones del editor de páginas — movimiento en las secciones de la cuadrícula
• Tema y imagen de marca del sitio — colores y superficies que heredan las tarjetas

Comprobación de la configuración

1. Añade una Cuadrícula de características con tres tarjetas a una página de borrador.
2. En una tarjeta, configura una imagen desde Multimedia y un enlace de imagen.
3. En otra, utiliza solo Icono con un color distinto.
4. En la tercera, combina una imagen con un icono superpuesto.
5. Guarda la página, previsualiza en ordenador y en móvil, publica y confirma que la URL pública coincide con la del editor.