Presentación

Enlaces destacados

1. Documentación de Company XYZ sobre los ajustes de controles de presentación
2. Documentación de Company XYZ sobre el bloque Banner
3. Documentación de Company XYZ sobre el bloque Blog post
4. Documentación de Company XYZ sobre el bloque Image
5. Documentación de Company XYZ sobre el bloque Product
6. Documentación de Company XYZ sobre el bloque Rich text
7. Documentación de Company XYZ sobre el bloque Testimonial
8. Documentación de Company XYZ sobre el bloque Video
9. Documentación de Company XYZ sobre los ajustes de encabezado
10. Documentación de Company XYZ sobre los ajustes de espaciado de sección
11. Documentación de Company XYZ sobre los ajustes de fondos de sección
12. Documentación de Company XYZ sobre los ajustes de separadores
13. Documentación de Company XYZ sobre los ajustes de visibilidad
14. Documentación de Company XYZ sobre los ajustes de anchos de diseño
15. Documentación de Shopify sobre secciones y bloques
16. Documentación de Shopify sobre la descripción general de las funciones del 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

Use Presentación para crear un área de contenido deslizable o en la que se pueda hacer clic, con distintos tipos de bloques, desde promociones sencillas centradas en imágenes hasta contenido destacado con varias tarjetas. Es una opción excelente cuando desea variedad visual y, al mismo tiempo, controlar cuántos elementos aparecen en cada tamaño de pantalla y cómo los visitantes recorren las diapositivas. Para obtener una visión más amplia de cómo funcionan las secciones y los bloques en el editor de temas, consulte la documentación de Shopify sobre secciones y bloques

Ajustes principales

Estos ajustes definen el diseño básico antes de configurar con más detalle el comportamiento de la presentación. Controlan cuántos bloques están visibles a la vez y cómo se alinea el contenido de manera uniforme en cada fila.

Diseño y comportamiento adaptable

Establezca un número de columnas independiente para ordenadores, tabletas y móviles con el fin de controlar la densidad de la presentación en cada tamaño de pantalla. Si el valor para tabletas se establece en 0, las pantallas de tableta utilizan el número de columnas del ordenador, lo que resulta útil cuando desea gestionar menos puntos de interrupción.

Use Apilar en móviles cuando cada diapositiva necesite más espacio de lectura o cuando los tipos de bloques mixtos parezcan demasiado apretados uno junto a otro en pantallas pequeñas. Esto crea una experiencia más sencilla de una sola columna.

Use Expandir el contenido verticalmente para que los bloques tengan la misma altura que el bloque más alto de cada fila. Esto resulta especialmente útil al combinar bloques con mucho texto con bloques basados en imágenes, ya que mantiene un aspecto más limpio en toda la fila.

Consejo

Si combina productos, artículos y texto enriquecido en la misma presentación, empiece con menos columnas y mantenga activada la expansión vertical para conseguir un diseño más uniforme.

Ajustes de presentación

Use estos controles para definir cómo interactúan los visitantes con la sección. La referencia de controles de presentación está disponible en los ajustes de controles de presentación.

Animación y transiciones

Elija el estilo de animación según el tipo de presentación que desea. La animación predeterminada funciona mejor para explorar varias diapositivas visibles, mientras que Desvanecer es adecuada para una narrativa más centrada, de estilo principal.

Desvanecer fuerza un diseño de una sola diapositiva y desactiva el comportamiento de vista previa y la visualización de la paginación.

La velocidad de animación cambia la rapidez con la que se realizan las transiciones entre diapositivas. Un movimiento más rápido puede resultar más dinámico para promociones, mientras que las transiciones más lentas suelen funcionar mejor para contenido editorial o visual de alta gama.

Reproducción automática y bucle

La reproducción automática puede hacer que la sección resulte más dinámica, pero funciona mejor cuando cada diapositiva se entiende rápidamente. Si las diapositivas incluyen textos más largos, detalles de productos o vídeo, un retraso mayor de reproducción automática suele ofrecer una mejor experiencia.

Pausar al pasar el cursor solo se aplica en ordenadores y ayuda a los visitantes a leer o interactuar sin que la presentación avance. Repetir diapositivas resulta útil cuando la sección debe parecer continua en lugar de tener un punto final claro.

Navegación y paginación

Use Mostrar navegación cuando los visitantes deban tener un control manual evidente. Esto es especialmente importante en presentaciones de contenido mixto o en cualquier diseño en el que se muestren varias tarjetas a la vez.

Posición de navegación permite colocar los controles encima o debajo del contenido, según el protagonismo que desee darles. Colocarlos debajo del contenido suele tener un aspecto más limpio en diseños centrados en imágenes, mientras que colocarlos encima puede funcionar bien cuando la sección también incluye un encabezado.

La paginación resulta más útil cuando la presentación cuenta una secuencia o muestra una diapositiva principal cada vez. Los estilos de fracción y barra de progreso suelen ser más fáciles de interpretar que la paginación dinámica para diapositivas con mucho contenido.

Comportamiento de vista previa de las diapositivas

Mostrar vista previa de las siguientes diapositivas revela parte de la siguiente tarjeta para indicar que hay más contenido disponible. Funciona mejor en diseños con varias tarjetas en los que desea fomentar la exploración.

Si el diseño ya parece demasiado ajustado, desactivar las vistas previas puede hacer que la sección resulte más tranquila y fácil de revisar. Este ajuste no se aplica cuando se utiliza la animación Desvanecer.

Ajustes de color

Estas anulaciones de color afectan al área del encabezado de la sección, no a los bloques de diapositivas individuales. Úselas cuando el contenido introductorio deba diferenciarse de los ajustes de color globales o de un tratamiento de fondo llamativo.

Ajuste conjuntamente los colores del icono, el encabezado y el subencabezado para que la introducción siga siendo legible. Si las diapositivas ya utilizan colores intensos o imágenes llamativas, mantener más moderados los colores del encabezado de la sección suele crear un mejor equilibrio.

Tipos de bloque admitidos

1. Banner
2. Blog post
3. Image
4. Product
5. Rich text
6. Testimonial
7. Video

Banner

Los bloques Banner son la opción más flexible de esta sección y son ideales para promociones, diapositivas de estilo principal y narrativas centradas en imágenes. Consulte la referencia del bloque Banner para obtener información sobre sus ajustes específicos.

Use el fondo del bloque para la propia diapositiva y, después, superponga texto, botones y contenido multimedia de primer plano opcional. Los bloques Banner también pueden expandirse más allá de la relación de aspecto seleccionada si el contenido necesita más espacio.

Blog post

Los bloques Blog post muestran tarjetas de artículos dentro de la presentación. Consulte la referencia del bloque Blog post para obtener más información.

Funcionan bien para contenido editorial destacado o selecciones del blog. Si necesita más control visual del que ofrece una tarjeta de artículo estándar, use un bloque Banner.

Image

Los bloques Image son una forma sencilla de añadir diapositivas visuales con subtítulos, superposiciones, enlaces y controles de alineación opcionales. Consulte la referencia del bloque Image para obtener más información.

Son útiles para catálogos visuales, imágenes de campañas, diapositivas de logotipos o promociones ligeras. Añada subtítulos solo cuando aporten un contexto claro.

Product

Los bloques Product añaden tarjetas de productos con posibilidad de compra a la presentación. Consulte la referencia del bloque Product para obtener más información.

Úselos para artículos destacados, filas seleccionadas o recomendaciones relacionadas. Si muestra más detalles de producto o controles de variantes, reduzca el número de columnas visibles para que cada tarjeta siga siendo fácil de revisar.

Rich text

Los bloques Rich text permiten añadir diapositivas centradas en mensajes con encabezados, texto principal, iconos, botones y fondos de bloque opcionales. Consulte la referencia del bloque Rich text para obtener más información.

Son útiles para anuncios, propuestas de valor o separaciones editoriales entre diapositivas más visuales. Como pueden incluir sus propios recursos multimedia de fondo, pueden parecerse a un banner sin dejar de estar centrados en el texto.

Testimonial

Los bloques Testimonial destacan citas de clientes y pueden enlazar opcionalmente la cita con un producto relacionado. Consulte la referencia del bloque Testimonial para obtener más información.

Mantenga el texto del testimonio bastante breve para obtener los mejores resultados en un diseño en movimiento. Si añade imágenes o vídeo, asegúrese de que la cita siga siendo el mensaje principal.

Video

Los bloques Video permiten colocar vídeo alojado o insertado directamente en la presentación. Consulte la referencia del bloque Video para obtener más información.

Use el vídeo con moderación en carruseles con reproducción automática. Las imágenes de póster, los subtítulos y las superposiciones pueden ayudar a que la diapositiva tenga un aspecto más pulido antes de iniciar la reproducción.

Precaución

Evite una reproducción automática rápida de la presentación cuando incluya diapositivas de vídeo, ya que los visitantes necesitan tiempo suficiente para reconocerlas e interactuar con ellas.

Ajustes estándar de sección

Ajustes de encabezado

Use los ajustes de encabezado compartidos para presentar la presentación con un subtítulo, encabezado, texto de apoyo, icono y botón opcional. Puede consultar la guía completa del encabezado en la referencia de ajustes de encabezado.

El encabezado de una sección resulta especialmente útil cuando la presentación aparece en una parte inferior de la página o combina varios tipos de contenido. Manténgalo conciso para enmarcar el contenido sin competir con las diapositivas.

Ajustes de espaciado

Use los controles de espaciado compartidos para ajustar el espacio encima y debajo del contenido de la sección. La referencia completa de espaciado está disponible en la referencia de espaciado de sección.

Aumente el espaciado cuando la presentación deba parecer una función independiente. Redúzcalo cuando la sección deba integrarse más estrechamente en un diseño de página más denso.

Ajustes de fondo de sección

Use los controles de fondo de sección compartidos para añadir color, degradados, imágenes, superposiciones o vídeo detrás de toda la sección. La referencia completa de fondos está disponible en la referencia de fondos de sección.

Estos ajustes afectan al contenedor de la sección, no a las diapositivas individuales. Los fondos intensos pueden aportar profundidad, pero también hacen que el contraste y el espaciado sean más importantes.

Si las diapositivas individuales ya utilizan imágenes, superposiciones o tratamientos de color llamativos, use un fondo de sección más discreto para evitar la competencia visual.

Ajustes de separador

Use los controles de separador compartidos para añadir una línea divisoria superior o inferior. Las opciones de separador están documentadas en la referencia de separadores.

Los separadores pueden ayudar a definir la presentación cuando las secciones circundantes utilizan fondos similares. Úselos con moderación para que la página no parezca excesivamente enmarcada.

Ajustes de visibilidad

Use los controles de visibilidad compartidos para decidir si la sección aparece en ordenadores, móviles o ambos. El comportamiento de visibilidad está documentado en la referencia de ajustes de visibilidad.

Esto resulta útil cuando desea una presentación móvil diferente en otra parte de la página o cuando un diseño complejo con varias diapositivas solo funciona bien en pantallas grandes.

Ajustes de ancho

Use los controles de ancho compartidos para gestionar tanto el ancho del contenido como el ancho del contenedor de la sección. Las opciones de ancho están documentadas en la referencia de anchos de diseño.

El ancho del contenido controla cuánto puede crecer el contenido de la presentación, mientras que el ancho de la sección es más importante cuando se utilizan fondos. Como el editor puede limitar la forma en que se muestran los cambios de ancho, conviene comprobar la vista de la página activa antes de finalizar las decisiones de diseño. Para obtener más contexto relacionado con el editor de temas, consulte la documentación de Shopify sobre la descripción general de las funciones del editor de temas

Notas de uso

1. Adapte las columnas al contenido. Use menos columnas cuando las diapositivas incluyan texto, botones, valoraciones o vídeo, para que cada elemento siga siendo legible y fácil de usar.
2. Elija la animación deliberadamente. Use la animación predeterminada para explorar varias tarjetas y use Desvanecer solo cuando desee mostrar una diapositiva centrada cada vez.
3. Mantenga relajada la reproducción automática. Los retrasos más largos de reproducción automática funcionan mejor en presentaciones de contenido mixto, especialmente cuando las diapositivas incluyen productos, testimonios o vídeo.
4. Evite los fondos que compitan entre sí. Si los bloques ya utilizan imágenes o superposiciones llamativas, mantenga más sencillo el fondo de la sección para mejorar el contraste y la claridad.
5. Compruebe el diseño activo. Revise el apilado en móviles, el comportamiento de las columnas en tabletas, la posición de la navegación y los cambios de ancho en la interfaz pública real antes de publicar.
6. Revise los cambios provocados por los bloques. Añadir o eliminar bloques puede cambiar la sensación de toda la sección, por lo que debe volver a comprobar el espaciado, el equilibrio y la utilidad de la navegación después de editar la lista de bloques.