Ir al contenido

Configuración de tarjeta de artículo

Controle el diseño predeterminado y el contenido que se muestra en las tarjetas de artículo en todo su tema.

Estas configuraciones definen el aspecto predeterminado de las tarjetas de artículo en todo su tema. Úselas para crear una experiencia de lectura y navegación coherente en los listados de blog, las áreas de artículos destacados y otros lugares donde aparecen artículos, al tiempo que permite que las secciones individuales anulen los valores predeterminados cuando sea necesario. Para obtener un contexto de configuración más amplio, consulte la documentación de Shopify sobre el editor de temas y la documentación de Shopify sobre secciones y bloques

También puede revisar la referencia de tarjetas de artículo para obtener contexto adicional.

Empiece con el estilo de tarjeta, ya que establece la estructura general y el tono de las vistas previas de los artículos. Un estilo más visual puede hacer que el contenido editorial se sienta más rico, mientras que un estilo más simple puede ayudar a que las cuadrículas densas de artículos se vean más limpias y sean más fáciles de revisar.

La proporción de aspecto de la imagen controla cómo se recortan las imágenes del artículo dentro de cada tarjeta. Como las proporciones de escritorio y móvil se configuran por separado, puede mantener el equilibrio de las tarjetas en pantallas grandes y, al mismo tiempo, evitar recortes incómodos en dispositivos más pequeños.

Si sus imágenes de artículo varían mucho en forma o composición, elija proporciones de imagen que sigan viéndose intencionadas cuando se recorten. Las proporciones coherentes suelen producir una cuadrícula de tarjetas más ordenada.

Estas configuraciones controlan cuánta información del artículo aparece en la tarjeta. Puede dar más protagonismo al descubrimiento con título y extracto, mantenerlo más compacto con solo el título o reducir aún más el texto cuando el diseño está pensado para ser más visual.

Los ajustes de subtítulo le permiten mostrar el autor, la fecha, ambos o ninguno. Esto puede ayudarle a equilibrar el contexto editorial con la simplicidad visual, según si la actualidad y la autoría son importantes en su estrategia de contenido.

El estilo de botón cambia la fuerza con la que la tarjeta indica interacción. Los estilos de botón más destacados pueden ayudar en diseños con mucho contenido, mientras que los estilos más ligeros funcionan bien cuando la propia tarjeta ya se percibe claramente como clicable.

La alineación horizontal afecta a lo formal o centradas en el diseño que se perciben las tarjetas. El texto alineado a la izquierda suele ser el más fácil de revisar en las cuadrículas de artículos, mientras que el texto centrado puede funcionar en diseños más estilizados.

La alineación vertical del texto importa más con el estilo de tarjeta de banner, donde la posición del texto cambia el equilibrio entre la visibilidad de la imagen y el contenido superpuesto. Úsela para decidir si la tarjeta debe sentirse más centrada en la imagen o más centrada en el texto.

Las insignias de etiqueta le permiten resaltar artículos con etiquetas específicas mostrando una insignia en la esquina de la tarjeta. Esto resulta útil cuando desea destacar contenido como historias destacadas, anuncios, guías o artículos de temporada sin cambiar el diseño completo de la tarjeta.

Introduzca las etiquetas como una lista separada por comas y mantenga la coherencia en la nomenclatura de las etiquetas. Las insignias funcionan mejor cuando se usan de forma selectiva para que sigan siendo significativas y no recarguen los listados de artículos.

  1. Elija primero la estructura. Configure el estilo de tarjeta antes de ajustar el texto y la imagen, ya que el diseño afecta a cómo se interpreta cada otra opción.
  2. Revise el móvil por separado. Compruebe la proporción de imagen en móvil y cualquier control específico de escritorio o móvil en tarjetas de artículo reales para que el recorte, el espaciado y la visibilidad sigan funcionando bien en ambos tamaños.
  3. Ajuste el nivel de detalle a la intención de navegación. Muestre más texto para listas de artículos orientadas al descubrimiento y reduzca el texto para diseños más compactos o visuales.
  4. Mantenga flexibles los valores predeterminados. Los valores en blanco, transparentes o de estilo predeterminado suelen conservar el estilo de respaldo, mientras que los colores explícitos, degradados o anulación de medios hacen que la tarjeta se sienta más independiente.
  5. Use las insignias con moderación. Resalte solo un pequeño conjunto de etiquetas importantes para que el tratamiento de las insignias siga siendo visible.
  6. Tenga en cuenta los límites de la fuente de contenido. Las tarjetas de artículo solo pueden mostrar lo que está disponible en el contenido seleccionado, por lo que las etiquetas, los datos del artículo, la paginación y los resultados relacionados pueden afectar a lo que aparece en la cuadrícula.