Vídeo con texto

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre el bloque Rich text
3. Documentación de Company XYZ sobre el bloque Video
4. Documentación de Company XYZ sobre ajustes de encabezados
5. Documentación de Company XYZ sobre ajustes de espaciado de sección
6. Documentación de Company XYZ sobre ajustes de fondo de sección
7. Documentación de Company XYZ sobre ajustes de separadores
8. Documentación de Company XYZ sobre ajustes de visibilidad
9. Documentación de Company XYZ sobre ajustes de anchos de diseño

Videos útiles

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

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

Utilice esta sección para combinar un vídeo con texto de apoyo en un diseño limpio de dos partes. Funciona especialmente bien para explicaciones de productos, historias de marca, tutoriales y contenido de campañas en los que el vídeo necesita contexto, un titular y un siguiente paso claro. Para obtener una visión general más amplia de cómo se organiza el contenido del tema, consulte la documentación de Shopify sobre secciones y bloques

Ajustes básicos

Estos ajustes controlan la relación general entre los bloques de vídeo y texto. También puede cambiar el orden de los bloques para decidir qué lado aparece primero.

1. Alineación del contenido define cómo se alinean verticalmente los dos lados cuando se muestran uno al lado del otro. La alineación superior es adecuada para contenido editorial, la del medio resulta más equilibrada y la inferior puede ayudar a que ambos lados terminen en una línea visual similar.
2. Activar contenido fijo mantiene el lado más corto fijo cerca de la parte superior mientras los visitantes se desplazan por el lado más alto. Esto es más útil cuando un bloque es mucho más largo que el otro.
3. Apilar en móvil cambia la sección a una sola columna en pantallas más pequeñas. Úselo cuando el contenido lado a lado resulte estrecho o cuando el vídeo necesite más espacio.
4. Apilar en escritorio convierte también el diseño en una secuencia vertical en pantallas más grandes. Esto funciona mejor cuando el contenido se lee de forma más natural un elemento detrás de otro que en dos columnas.

El contenido fijo solo funciona en escritorio y no se aplica cuando los diseños apilados están activos.

Ajustes de color

Estos controles de color a nivel de sección le permiten anular el estilo de texto predeterminado para esta sección. Son útiles cuando la sección usa un fondo personalizado o cuando necesita un contraste más fuerte alrededor del medio.

Utilice estos ajustes con cuidado si su vídeo o el fondo de la sección ya tienen mucha carga visual. Pequeños cambios de color pueden mejorar la legibilidad con más eficacia que añadir estilo adicional.

Tipos de bloque admitidos

1. Texto enriquecido
2. Vídeo

Bloque de texto enriquecido

El bloque de texto enriquecido proporciona la parte escrita del diseño, incluido el encabezado, el cuerpo del texto, el icono y un botón opcional. Consulte la documentación de Company XYZ sobre el bloque de texto enriquecido.

1. Úselo para la explicación principal, la historia de apoyo o la llamada a la acción que da contexto al vídeo.
2. Mantenga el mensaje centrado si el vídeo realiza la mayor parte del trabajo visual.
3. Este bloque también incluye sus propios controles de fondo, color y visibilidad, que pueden ayudar a que el lado del texto se perciba más como un panel de contenido enmarcado.

Bloque de vídeo

El bloque de vídeo muestra un vídeo alojado o un enlace de Vimeo o YouTube, con controles para la relación de aspecto, la reproducción, el ancho, los subtítulos, el estilo del overlay y la alineación. Consulte la documentación de Company XYZ sobre el bloque de vídeo.

1. Utilice una imagen póster cuando sea necesario para que la sección tenga un aspecto pulido antes de que comience la reproducción.
2. Elija relaciones de aspecto por separado para pantallas grandes y pequeñas si el encuadre predeterminado resulta incómodo.
3. Establezca un ancho máximo cuando la sección general sea amplia pero el vídeo deba mantenerse visualmente contenido.

Si el overlay del vídeo está configurado en Always show, los controles del reproductor de vídeo se desactivan incluso cuando los controles están activados en otros lugares.

Ajustes estándar de sección

Ajustes de encabezado

Utilice los Ajustes de encabezado para añadir una introducción opcional encima del contenido lado a lado. Esta área es útil para un título de sección, texto de apoyo y un botón cuando el vídeo necesita más preparación o una llamada a la acción más sólida.

Ajustes de espaciado

Utilice los Ajustes de espaciado para controlar el espacio por encima y por debajo de la sección. Reduzca el espaciado cuando esta sección deba sentirse estrechamente conectada con el contenido cercano, o añada más espaciado cuando el vídeo necesite más separación visual.

Ajustes de fondo de sección

Utilice los Ajustes de fondo de sección para añadir un color, degradado, imagen o vídeo detrás de toda la sección. Los fondos pueden reforzar el tono de la sección, pero también pueden competir con el vídeo y el texto si se usan en exceso.

Precaución

Si la sección ya contiene un vídeo visualmente rico, una imagen o un vídeo de fondo intensos pueden hacer que el diseño se sienta recargado y reducir la claridad del texto.

Ajustes de separador

Utilice los Ajustes de separador para añadir una línea encima o debajo de la sección. Esto puede ayudar a distinguir la sección del contenido cercano cuando la página usa diseños similares uno tras otro.

Ajustes de visibilidad

Utilice los Ajustes de visibilidad para mostrar u ocultar la sección según el tamaño del dispositivo. Esto es útil cuando desea un flujo de contenido distinto en móvil y en escritorio.

Ajustes de ancho

Utilice los Ajustes de ancho para controlar tanto el contenedor de la sección como el ancho del contenido interior. Los ajustes más amplios dan más presencia al vídeo, mientras que unos anchos de contenido más estrechos pueden hacer que el lado del texto sea más fácil de leer.

Consejos de uso

1. Dé prioridad a un elemento. Decida si el vídeo o el texto es el foco principal y, después, mantenga el otro lado como apoyo para que la sección no se vea sobrecargada.
2. Revise ambas vistas. Los controles de escritorio y móvil pueden cambiar la alineación, la visibilidad y el comportamiento del medio, así que compruebe ambos tamaños antes de publicar.
3. Use el contenido de los bloques con intención. Añadir bloques puede cambiar de forma importante la sección, así que asegúrese de que los nuevos bloques de vídeo o texto sigan apoyando el mensaje original.
4. Mantenga simples los valores predeterminados. Un estilo vacío o transparente suele conservar el aspecto de respaldo, mientras que los colores intensos, los degradados o las anulaciones del medio hacen que la sección se sienta más independiente.
5. Compruebe el encuadre del medio. Los medios separados para escritorio y móvil pueden recortarse y leerse de forma distinta, así que confirme que ambas versiones se mantengan claras y legibles.
6. Pruebe los diseños fijos en contexto. El contenido fijo funciona mejor cuando un lado es claramente más corto y el diseño de escritorio sigue sin apilarse.