Contenido del blog

Enlaces destacados

1. Documentación de Shopify sobre la personalización de secciones
2. Documentación de Shopify sobre secciones y bloques
3. Documentación de Company XYZ sobre el bloque de grupo de filtros
4. Documentación de Company XYZ sobre los ajustes de encabezados
5. Documentación de Company XYZ sobre los ajustes de tarjetas
6. Documentación de Company XYZ sobre los ajustes de espaciado de sección
7. Documentación de Company XYZ sobre los ajustes de fondos de sección
8. Documentación de Company XYZ sobre los ajustes de separadores
9. Documentación de Company XYZ sobre los ajustes de anchos del diseño
10. Documentación de Shopify sobre el editor de temas

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Muestre sus entradas del blog en un diseño de archivo configurable con opciones de ordenación, filtrado y presentación de tarjetas. Funciona mejor en páginas de inicio del blog donde los lectores necesitan revisar rápidamente un conjunto más amplio de entradas y refinar lo que desean leer.

Ajustes de la interfaz de cuadrícula

Estos ajustes controlan la experiencia general de navegación para la cuadrícula de entradas. Puede definir el número predeterminado de columnas en escritorio y móvil, elegir cuántas entradas aparecen por página y decidir si los lectores pueden ajustar ellos mismos el tamaño de la cuadrícula.

Use una cuadrícula más abierta cuando las imágenes de las entradas sean importantes para el descubrimiento. Use una cuadrícula más densa cuando su blog esté más centrado en el texto o cuando los lectores se beneficien de ver más títulos a la vez.

La interfaz fija mantiene visibles los controles del archivo mientras los lectores se desplazan. Esto es útil para índices de blog largos, pero puede resultar innecesario en archivos más pequeños donde los controles solo deben usarse una vez.

La ordenación ayuda a dar forma a cómo los lectores encuentran su contenido. La ordenación por fecha suele ser adecuada para blogs activos, mientras que la ordenación por título puede funcionar mejor para contenido de referencia, permanente o alfabético. Para obtener una visión general más amplia de cómo se administran las secciones de archivo, consulte documentación de Shopify sobre la personalización de secciones

Consejo

Si activa la interfaz de tamaño de cuadrícula, establezca primero un valor predeterminado razonable. Los controles para el lector funcionan mejor cuando el diseño inicial ya resulta natural.

Ajustes de filtro

Estos ajustes añaden filtrado basado en etiquetas al archivo del blog. Son más útiles cuando sus entradas ya siguen una estructura clara de etiquetas y desea que los lectores acoten los resultados sin salir de la página.

El ajuste principal de alternancia del filtro activa el filtrado para la sección, mientras que el ajuste de abierto por defecto controla si el área del filtro empieza expandida. Dejar los filtros abiertos puede fomentar el descubrimiento, pero un inicio contraído suele mantener la página más limpia.

Los filtros funcionan mejor con etiquetas coherentes y bien definidas. Si las etiquetas están incompletas o son incoherentes, la experiencia de filtrado puede resultar confusa en lugar de útil.

Ajustes de color de tarjeta

Estos ajustes sustituyen el tratamiento habitual del color de las tarjetas para esta sección. Úselos cuando el archivo de su blog necesite un estilo visual distinto o cuando el diseño de tarjeta elegido requiera más contraste.

Los ajustes de superposición del banner solo se aplican cuando usa el estilo de tarjeta Banner. Si no está usando tarjetas banner, concéntrese en el fondo general de la tarjeta, el borde, el encabezado y los colores del texto.

La opacidad de la superposición es especialmente importante en tarjetas centradas en imágenes. Demasiada poca superposición puede dificultar la lectura de los títulos, mientras que demasiada puede hacer que las tarjetas se sientan pesadas o apagadas.

Ajustes de color

Estos ajustes controlan los colores del icono, el encabezado y el texto complementario a nivel de sección. Son útiles cuando este archivo de blog se sitúa sobre un fondo personalizado o necesita destacar frente a las secciones cercanas.

Ajuste estos colores conjuntamente en lugar de uno por uno para que el encabezado siga resultando coherente. Si también utiliza una imagen de fondo, un degradado o un video, vuelva a comprobar el contraste tanto en escritorio como en móvil.

Tipos de bloque admitidos

1. Filter group

Grupo de filtros

Use los bloques Filter group para crear módulos personalizados de filtrado basados en etiquetas dentro del archivo. Cada bloque se convierte en su propio grupo expandible, lo que le ayuda a organizar los filtros en categorías más claras en lugar de mostrar una sola lista larga. Para obtener comportamiento general del editor, consulte documentación de Shopify sobre secciones y bloques

1. Añada un título breve y claro para que los lectores comprendan de inmediato qué contiene el grupo.
2. Mantenga la lista de etiquetas centrada y con intención, especialmente si piensa apilar varios grupos.
3. Use de forma selectiva la opción abierto por defecto del bloque para que el área de filtros no resulte abarrotada.

Para obtener detalles específicos del bloque, consulte el Grupo de filtros.

Ajustes estándar de sección

Ajustes de encabezado

Ajustes de encabezado le permiten presentar el archivo con un icono opcional, un subtítulo, un encabezado, texto complementario y un botón. Esto es útil para dar contexto a la página del blog, mejorar la estructura de la página y dirigir a los lectores a un destino destacado.

Mantenga el encabezado claro y descriptivo. Use el botón solo cuando apoye el archivo, por ejemplo, enlazando a una entrada destacada, una página relacionada o un destino de boletín.

Ajustes de tarjeta

Ajustes de tarjeta controlan cómo aparece cada entrada en la cuadrícula, incluido el tratamiento de la imagen, la visibilidad del texto, la alineación, los subtítulos y el estilo del botón de la tarjeta. Estos ajustes sustituyen solo los valores predeterminados más amplios de la tarjeta para esta sección.

Elija un estilo de tarjeta en función de si su blog está más centrado en imágenes o en texto. Mostrar el título y el extracto suele favorecer mejor el descubrimiento, mientras que los diseños más compactos de solo título funcionan bien cuando los títulos de las entradas ya hacen la mayor parte del trabajo.

Ajustes de espaciado

Ajustes de espaciado controlan el espacio superior e inferior de la sección. Úselos para separar el archivo de las secciones cercanas o para reducir el espacio cuando la cuadrícula del blog ya tenga suficiente margen.

Si añade un encabezado más grande o un tratamiento de fondo potente, un poco más de espaciado puede ayudar a que la sección se sienta intencionada. En móvil, un espaciado algo reducido suele facilitar la lectura de la página.

Ajustes de fondo de sección

Ajustes de fondo de sección le permiten colocar un color, un degradado, una imagen o un video detrás del archivo. Esto puede ayudar a que la sección destaque, pero también afecta a la legibilidad y a la percepción del espaciado.

Use superposiciones para mantener el contraste de los encabezados y las tarjetas. Si establece medios distintos para móvil, compruebe que el recorte y el área focal sigan favoreciendo bien el contenido.

Precaución

Los medios de fondo intensos pueden hacer que un archivo de blog muy cargado sea más difícil de revisar. Si la legibilidad disminuye, simplifique el fondo o aumente el contraste de la superposición antes de cambiar el contenido de las tarjetas.

Ajustes de separador

Ajustes de separador añaden una línea en la parte superior o inferior de la sección. Son útiles cuando desea un límite visual más claro sin añadir mucho más espacio.

Use separadores cuando las secciones vecinas tengan fondos similares o una densidad de tarjetas parecida. Si el archivo ya destaca con claridad, quizá no los necesite.

Ajustes de ancho

Ajustes de ancho controlan el ancho máximo del contenido del archivo y el ancho del contenedor de la sección. Estos ajustes son especialmente útiles para equilibrar la legibilidad, la densidad de tarjetas y la presentación del fondo.

Un ancho de contenido más estrecho puede facilitar la lectura de los extractos, mientras que un ajuste más ancho puede alojar más tarjetas cómodamente en pantallas grandes. Al ajustar el ancho de la sección para tratamientos de fondo, previsualice la página en vivo además del editor. Para los controles del editor, consulte documentación de Shopify sobre el editor de temas

Notas de uso

1. Ajuste la cuadrícula al contenido. Use menos columnas cuando las imágenes y los extractos sean importantes, y diseños más densos cuando los lectores naveguen principalmente por título.
2. Use los filtros con intención. Active el filtrado solo cuando sus etiquetas sean coherentes, reconocibles y merezca la pena navegar por ellas.
3. Mantenga las tarjetas fáciles de revisar. Muestre solo el texto, los subtítulos y el tratamiento de botón que ayuden a los lectores a elegir una entrada rápidamente.
4. Compruebe el móvil por separado. Revise el tamaño de la cuadrícula, el comportamiento del filtro, la ubicación del botón y los medios de fondo en pantallas más pequeñas antes de publicar.
5. Previsualice el ancho real de la página. Vuelva a comprobar el espaciado, los controles fijos y el ancho del contenido en la página en vivo para que el archivo resulte equilibrado en condiciones reales de navegación.
6. Pruebe el contenido de los bloques con la sección. Los bloques añadidos pueden cambiar el diseño y el énfasis del archivo, así que confirme el resultado final después de añadirlos o reordenarlos.
7. Deje intacto el estilo de reserva cuando sea necesario. Los colores vacíos o con estilo predeterminado suelen conservar el aspecto existente de la sección, mientras que las anulaciones más intensas y los medios independientes hacen que el área se sienta más independiente.