Ajustes de separador

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Shopify sobre el editor de temas

Videos útiles

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

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

Utilice estos ajustes para añadir una línea divisoria encima, debajo o en ambos bordes de un área de contenido. Los separadores ayudan a dividir páginas largas, definir transiciones entre contenidos y aportar estructura sin cambiar el contenido en sí. Para una visión general más amplia de cómo se organiza el contenido del tema, consulte documentación de Shopify sobre secciones y bloques

Ajustes de separador

Puede dar estilo a los separadores superior e inferior de forma independiente, de modo que cada borde pueda destacarse o mantenerse limpio. Esto le ofrece flexibilidad cuando una transición necesita un límite más claro que la otra.

Elija el estilo del separador según la fuerza con la que quiera que se perciba la separación visual:

1. Line crea la separación más clara y minimalista.
2. Dashed añade más textura y funciona bien en diseños más expresivos.
3. Dotted resulta más ligero y decorativo.
4. None quita el separador de ese borde.

Evite activar separadores para todas las áreas de contenido de una secuencia. Demasiadas líneas divisorias pueden hacer que la página se sienta recargada y reducir el impacto de las transiciones importantes.

Color del separador

Utilice el color del separador para combinarlo con los bordes cercanos o para añadir algo más de contraste entre áreas de contenido. En la mayoría de los diseños, lo mejor es un color sutil, porque los separadores deben apoyar la estructura de la página y no competir con el contenido.

Si deja el color transparente, el separador usa el color de borde del tema. Los valores en blanco, transparentes o de estilo predeterminado suelen conservar el estilo de reserva del tema, mientras que los colores explícitos, los degradados o las anulaciones de medios hacen que el área se sienta más independiente. Suele ser la mejor opción cuando quiere un aspecto coherente en varias áreas sin ajustar cada una manualmente. Para controles relacionados del editor de temas, consulte documentación de Shopify sobre el editor de temas

Notas de uso

1. Añada separadores de forma selectiva. Úselos donde mejoren la lectura o aclaren una transición entre dos áreas de contenido.
2. Ajuste el estilo al diseño. Las líneas sólidas encajan mejor en diseños más limpios, mientras que las líneas discontinuas o punteadas funcionan mejor con una separación más suave o decorativa.
3. Mantenga un contraste controlado. Un separador demasiado marcado puede distraer de los encabezados, las imágenes y las llamadas a la acción.
4. Use el color de borde compartido para mantener la coherencia. Un color transparente es una opción práctica cuando quiere que los separadores se mantengan alineados con el resto del tema.
5. Revise ambos viewports. Los controles de escritorio y móvil pueden producir un comportamiento diferente de alineación, visibilidad o medios, así que compruebe ambos tamaños antes de publicar.
6. Use las anulaciones de forma intencional. Los colores explícitos o las opciones basadas en medios pueden hacer que una zona local destaque, así que aplíquelos solo donde quiera un aspecto más independiente.