Video

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre los ajustes de video
3. Documentación de Company XYZ sobre los ajustes de encabezado
4. Documentación de Company XYZ sobre los ajustes de espaciado de sección
5. Documentación de Company XYZ sobre los ajustes de fondo de sección
6. Documentación de Company XYZ sobre los ajustes de separadores
7. Documentación de Company XYZ sobre los ajustes de visibilidad
8. Documentación de Company XYZ sobre los ajustes de ancho 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

Usa esta sección para destacar un solo video con opciones flexibles de reproducción, tamaño y texto complementario. Funciona especialmente bien para demostraciones de productos, tutoriales, narrativas de campañas y otros momentos en los que el video debe liderar la página. Para obtener una visión más amplia de cómo se estructuran las secciones en el editor de temas, consulta la documentación de Shopify sobre secciones y bloques

Ajustes de video

Este grupo controla la fuente del video y cómo se comporta el marco multimedia en la página. Puedes usar un video alojado o un enlace de Vimeo o YouTube, según cómo prefieras gestionar la calidad y la entrega. Para obtener más orientación, consulta la referencia de ajustes de video.

Una imagen de póster es especialmente útil con videos alojados porque ofrece a los visitantes una vista previa cuidada antes de que comience la reproducción. También puede crear una primera impresión más sólida que depender de un fotograma inicial aleatorio.

Los ajustes de relación de aspecto te ayudan a decidir si el video debe conservar sus proporciones naturales o adaptarse a una forma de diseño más controlada. Usa una relación fija cuando quieras mantener un espaciado uniforme en toda la página, y usa la relación predeterminada cuando el encuadre original sea lo más importante. En dispositivos móviles, puedes mantener la relación de aspecto de escritorio o usar un ajuste propio si el video necesita un recorte diferente en pantallas más pequeñas.

El ancho máximo del video resulta útil cuando quieres que la sección tenga un estilo más editorial y menos de borde a borde. Un video de ancho completo genera más impacto, mientras que un marco más estrecho puede sentirse más refinado cuando se combina con subtítulos o contenido de encabezado.

La reproducción automática inicia el video cuando aparece al desplazarse y lo pausa cuando los visitantes lo dejan atrás. La reproducción en bucle funciona mejor para clips cortos y repetibles, mientras que los controles del reproductor son más útiles para videos más largos o informativos.

Si activas la reproducción automática, mantén el video silenciado y asegúrate de que la sección siga teniendo sentido sin sonido.

Ajustes de subtítulos

Usa el área de subtítulos para colocar una nota breve encima o debajo del video. Es adecuada para créditos, contexto del producto, una conclusión breve o un pequeño detalle complementario que deba permanecer cerca del contenido multimedia.

Mantén los subtítulos concisos para que la sección siga dando prioridad al video. Los ajustes de alineación, posición y tamaño ayudan a integrar los subtítulos con el resto del diseño en lugar de hacer que compitan con el video.

Ajustes de superposición

Los ajustes de superposición añaden un color o degradado sobre el video. Son útiles cuando quieres crear un ambiente más marcado, mejorar el contraste o conseguir un tratamiento visual más uniforme en diferentes grabaciones.

Usa la opacidad con cuidado. Una superposición ligera puede mejorar la legibilidad y el acabado, mientras que una superposición intensa puede ocultar detalles y hacer que el video se vea plano.

El estilo de superposición controla cuándo aparece. Mostrarla solo cuando el video está pausado mantiene la reproducción más abierta, mientras que mostrarla siempre da a la sección un aspecto más estilizado.

Precaución

Elegir Always show desactiva los controles del reproductor de video en esta sección, incluso si los controles están activados en otra parte.

Ajustes de alineación

Estos ajustes controlan cómo se alinea el contenido de la sección en computadoras y dispositivos móviles. Son más importantes cuando usas un encabezado, subtítulos o un botón junto con el video.

Mantener la misma alineación en distintos tamaños de pantalla suele crear la presentación más limpia. Si el diseño móvil se siente demasiado ajustado, ajustar la alineación móvil por separado puede facilitar la lectura de la sección.

Ajustes de color

Estos controles de color sustituyen los colores predeterminados del texto, los iconos y los bordes de esta sección. Úsalos cuando el video, la superposición o el fondo hagan que tus colores habituales tengan poco contraste.

Aplica las sustituciones de forma selectiva para que la sección siga siendo coherente con el resto del sitio. En la mayoría de los casos, el objetivo principal es mantener el texto legible sobre el contenido multimedia.

Ajustes estándar de sección

Ajustes de encabezado

Usa los Ajustes de encabezado compartidos para añadir contenido introductorio sobre el video. Un encabezado, un texto breve de apoyo y un botón opcional pueden ayudar a explicar por qué es importante el video y guiar a los visitantes hacia el siguiente paso.

Mantén breve el contenido del encabezado para que apoye al video en lugar de abrumarlo. Si añades un botón, usa una sola acción clara.

Ajustes de espaciado

Usa los Ajustes de espaciado compartidos para controlar el espacio encima y debajo de la sección. Un mayor espaciado ayuda a que el video se sienta como una función diferenciada, mientras que un espaciado más reducido lo conecta más estrechamente con el contenido cercano.

Comprueba el espaciado tanto en dispositivos móviles como en computadoras. Una sección de video que se siente equilibrada en una pantalla grande puede parecer demasiado grande en dispositivos más pequeños.

Ajustes de fondo de sección

Usa los Ajustes de fondo de sección compartidos para añadir un color, degradado, imagen o video de fondo detrás de la sección. Esto resulta especialmente útil cuando quieres que el área circundante se sienta más inmersiva o vinculada a la marca.

Ten cuidado al combinar un fondo intenso con una superposición de video y colores de texto personalizados. Demasiados efectos en capas pueden reducir la claridad y hacer que la sección se sienta pesada.

Ajustes de separador

Usa los Ajustes de separador compartidos para colocar una línea encima o debajo de la sección. Los separadores pueden ayudar a definir el video como un bloque de contenido independiente sin necesidad de cambiar mucho el espaciado.

Un separador sutil funciona bien en páginas largas de estilo editorial. Si la sección ya tiene un contraste visual marcado, normalmente se ve más limpia sin separador.

Ajustes de visibilidad

Usa los Ajustes de visibilidad compartidos para mostrar u ocultar esta sección según el tamaño del dispositivo. Esto resulta útil cuando el mismo tratamiento de video no funciona igual de bien en computadoras y dispositivos móviles.

Si ocultas la sección en un punto de interrupción, asegúrate de que la página siga comunicando claramente el mismo mensaje allí.

Ajustes de ancho

Usa los Ajustes de ancho compartidos para controlar el ancho general de la sección y el ancho del contenido dentro de ella. Esto te ayuda a decidir si el video debe sentirse encuadrado, contenido de forma cómoda o más expansivo.

El ancho del contenido suele ser el primer ajuste que conviene modificar. Como el encuadre de la vista previa puede afectar a la apariencia de los cambios de ancho, vale la pena comprobar el resultado en la página activa antes de finalizarlo.

Notas de uso

1. Elige la fuente adecuada. Usa un video alojado cuando quieras controlar directamente el archivo, y usa una URL de video cuando el alojamiento externo se adapte mejor a tu flujo de trabajo.
2. Adapta el diseño a la grabación. Elige una relación de aspecto y un ancho que favorezcan el encuadre del video en lugar de forzarlo a una presentación incómoda.
3. Mantén claras las expectativas de reproducción. Reserva la reproducción automática y el bucle para clips cortos que sigan comunicando bien su contenido sin sonido.
4. Revisa los dispositivos móviles por separado. Comprueba conjuntamente los ajustes de computadora y dispositivos móviles, ya que la alineación, la visibilidad y las opciones multimedia pueden cambiar el recorte, el espaciado y la legibilidad de la sección.
5. Usa las sustituciones con intención. Los colores vacíos o de estilo predeterminado suelen conservar la apariencia del entorno, mientras que los colores, degradados u opciones multimedia explícitos hacen que el área del video se sienta más independiente.
6. Añade bloques cuidadosamente. Si amplías la sección con bloques, vuelve a comprobar toda la composición, ya que el contenido basado en bloques puede reemplazar o ampliar un contenido más sencillo a nivel de sección.