Artículos relacionados

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre los ajustes de los controles de presentación
3. Documentación de Company XYZ sobre los ajustes de los encabezados
4. Documentación de Company XYZ sobre los ajustes de las tarjetas
5. Documentación de Company XYZ sobre los ajustes del espaciado de sección
6. Documentación de Company XYZ sobre los ajustes de los fondos de sección
7. Documentación de Company XYZ sobre los ajustes de los separadores
8. Documentación de Company XYZ sobre los ajustes de visibilidad
9. Documentación de Company XYZ sobre los ajustes de los anchos del diseño

Videos útiles

Vídeo de Shopify Academy: personalización de su tienda

Vídeo de Shopify Academy: personalización de su tienda

Muestra más artículos del mismo blog al final de una publicación para mantener a los lectores leyendo. Esta sección extrae automáticamente publicaciones recientes del blog del artículo actual, por lo que es ideal cuando desea contenido relacionado sin tener que seleccionar manualmente cada elemento. Para obtener una visión general más amplia de cómo funcionan estos ajustes de sección en el editor de temas, consulte documentación de Shopify sobre secciones y bloques

Nota

Si necesita elegir artículos específicos en lugar de mostrar automáticamente los más recientes, use una sección de Blog posts.

Ajustes básicos

El principal control de contenido es la cantidad de elementos que se mostrarán. Use una cantidad menor cuando quiera un final de artículo ordenado, o aumente el número si su blog tiene contenido de apoyo sólido y desea fomentar una navegación más profunda.

Si establece la cantidad en 0, se muestran todos los elementos disponibles hasta el límite de la sección. Esto puede funcionar bien para blogs pequeños, pero en blogs más grandes puede hacer que la sección se sienta larga y reducir el impacto de cada tarjeta.

Ajustes de diseño

Use estos ajustes para controlar cuántas publicaciones relacionadas aparecen por fila y si cada dispositivo usa una cuadrícula o una presentación. Este es el lugar principal para definir lo fácil que resulta explorar la sección en escritorio, tableta y móvil.

Un mayor número de columnas puede mostrar más publicaciones en pantalla, pero normalmente funciona mejor cuando las tarjetas son visualmente simples. Si los títulos o extractos de sus artículos son largos, menos columnas suelen crear un diseño más limpio y legible.

La tableta puede heredar la cantidad de columnas del escritorio cuando se deja en 0. Esto es útil cuando desea hacer menos ajustes específicos por dispositivo, pero aun así conviene revisar los tamaños de pantalla medios si sus tarjetas contienen mucho texto.

Consejo

Para tarjetas de artículos con mucho texto, menos columnas suelen mejorar la legibilidad y facilitar la lectura rápida de los titulares.

Ajustes de presentación

Cuando cualquier dispositivo está configurado para presentación, estos controles administran la animación, la reproducción automática, la repetición, la navegación, la paginación y las vistas previas de las diapositivas. Consulte documentación de Company XYZ sobre los controles de la presentación.

La animación predeterminada es la opción más flexible cuando desea una experiencia de carrusel típica. Fade crea una presentación más enfocada, pero simplifica el diseño y elimina algunas opciones de la interfaz.

La reproducción automática puede añadir movimiento, pero funciona mejor cuando las publicaciones relacionadas son una función secundaria y no la principal llamada a la acción. Si es probable que los lectores comparen titulares antes de hacer clic, una reproducción automática más lenta o la navegación manual suele ser más fácil de usar.

La navegación y la paginación son más útiles cuando muestra varios elementos en modo presentación y desea que los lectores entiendan que hay más contenido disponible. Las vistas previas de las diapositivas también pueden fomentar la interacción, especialmente en móvil, pero no se aplican con la animación fade.

La animación fade obliga a un diseño de una sola diapositiva y no muestra paginación ni vistas previas de las próximas diapositivas.

Ajustes de color

Estos ajustes le permiten reemplazar los colores del icono, el texto y el subtítulo de la sección sin cambiar los estilos generales del tema. Son más útiles cuando esta sección se sitúa sobre un fondo personalizado o necesita más contraste que la página de artículo circundante.

Mantenga el área del encabezado visualmente distinta de las tarjetas de artículos que aparecen debajo. Si también está cambiando los colores de las tarjetas o añadiendo un fondo de sección, compruebe que todos los elementos de texto sigan siendo fáciles de leer.

Ajustes estándar de sección

Ajustes de encabezado

Use los Ajustes de encabezado compartidos para añadir un encabezado, un subtítulo, un subencabezado, un icono y un botón opcional para esta sección. Consulte documentación de Company XYZ sobre los ajustes de encabezado.

Este encabezado es útil cuando las publicaciones relacionadas aparecen bastante por debajo del cuerpo del artículo y necesitan una introducción más clara. Normalmente basta con un encabezado breve y un texto de apoyo corto, mientras que el botón opcional funciona bien para enlazar con el blog completo.

Ajustes de tarjeta

Use los Ajustes de tarjeta compartidos para controlar la apariencia de cada tarjeta de artículo relacionado, incluido el estilo, la proporción de imagen, la visualización del texto, el contenido del subtítulo y el estilo de la CTA de la tarjeta. Consulte documentación de Company XYZ sobre los ajustes de tarjeta.

Estos reemplazos son útiles cuando las tarjetas de artículos necesitan un aspecto más editorial que las tarjetas usadas en otras partes. Las tarjetas con estilo banner admiten opciones de superposición y posición del texto, mientras que los estilos de tarjeta más simples suelen ser más fáciles de revisar en cuadrículas más densas.

Ajustes de espaciado

Use los Ajustes de espaciado compartidos para ajustar el espacio por encima y por debajo de la sección. Consulte documentación de Company XYZ sobre los ajustes de espaciado.

Un mayor espaciado ayuda a que el área de publicaciones relacionadas se sienta como un siguiente paso distinto después del artículo. Un espaciado más ajustado la mantiene visualmente conectada con el contenido superior.

Ajustes de fondo de sección

Use los Ajustes de fondo de sección compartidos para añadir un color, degradado, imagen o video detrás de la sección. Consulte documentación de Company XYZ sobre los ajustes de fondo de sección.

Un fondo puede ayudar a separar las publicaciones relacionadas del cuerpo del artículo, especialmente en páginas de formato largo. Si usa un fondo multimedia, asegúrese de que tanto el encabezado como las tarjetas de publicaciones sigan destacando con claridad.

Precaución

Los fondos intensos pueden competir con las miniaturas y los titulares de los artículos. Si la legibilidad disminuye, simplifique el fondo o aumente el contraste.

Ajustes de separador

Use los Ajustes de separador compartidos para añadir una línea encima o debajo de la sección. Consulte documentación de Company XYZ sobre los ajustes de separador.

Los separadores son útiles cuando esta sección está cerca de comentarios, suscripciones al boletín u otras áreas de contenido y desea un límite visual más claro. En la mayoría de los diseños editoriales, una línea simple es suficiente.

Ajustes de visibilidad

Use los Ajustes de visibilidad compartidos para controlar si la sección aparece en escritorio, móvil o en ambos. Consulte documentación de Company XYZ sobre los ajustes de visibilidad.

Esto es útil cuando desea una experiencia de contenido relacionado más rica en pantallas grandes, pero un final de artículo más simple en las más pequeñas. También puede admitir diseños móviles alternativos en otras partes de la plantilla.

Ajustes de ancho

Use los Ajustes de ancho compartidos para controlar el ancho del contenido y el ancho exterior de la sección. Consulte documentación de Company XYZ sobre los ajustes de ancho.

Los diseños más anchos pueden mostrar cómodamente más tarjetas en modo cuadrícula, mientras que los diseños más estrechos suelen sentirse más seleccionados y son más fáciles de revisar después de un artículo largo. Si cambia los anchos, previsualice la página en vivo y también en el editor para valorar el espaciado con precisión.

Notas de uso

1. Mantenga la cantidad centrada. Muestre solo tantas publicaciones como los lectores puedan revisar cómodamente al final de un artículo.
   1. Cantidades muy altas pueden hacer que la sección se sienta repetitiva o demasiado larga.
   2. Las cantidades más pequeñas suelen funcionar mejor cuando las publicaciones relacionadas son solo una sugerencia de cierre.
2. Adapte el diseño al contenido. Use cuadrícula para una comparación rápida y presentación cuando el espacio sea limitado o desee un patrón de navegación más guiado.
   1. Revise las vistas tanto de escritorio como de móvil, ya que los diseños tipo deslizador pueden cambiar el comportamiento de navegación, paginación, vista previa y punto de ruptura.
   2. Compruebe la alineación y la visibilidad en cada ventana gráfica si está combinando distintos ajustes de dispositivo.
3. Elija fade con intención. Use fade solo cuando desee una tarjeta destacada a la vez y no necesite vistas previas ni paginación.
4. Priorice tarjetas legibles. Si los titulares son largos, reduzca el número de columnas o simplifique el texto de las tarjetas para que cada publicación se entienda con rapidez.
5. Use la separación con cuidado. Los fondos, el espaciado y los separadores deben ayudar a que la sección se sienta distinta sin eclipsar el propio artículo.
   1. Deje los colores y los fondos discretos cuando quiera que la sección herede el aspecto predeterminado de la página.
   2. Use reemplazos más intensos solo cuando necesite que el área de publicaciones relacionadas se diferencie del cuerpo del artículo.
6. Revise el origen del artículo. Los artículos que ve dependen del blog actual y de los resultados relacionados disponibles, por lo que los blogs con poco contenido pueden generar un conjunto de publicaciones más corto o menos variado.
   1. Si utiliza medios diferentes para distintos dispositivos, verifique el recorte, la legibilidad y el comportamiento de reserva en ambos tamaños.
   2. Confirme que cualquier navegación o elección de origen de contenido siga llevando a los lectores a los artículos que espera.