Imagen con texto

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Shopify sobre la personalización de secciones
3. Documentación de Company XYZ sobre el bloque Image
4. Documentación de Company XYZ sobre el bloque Rich text
5. Documentación de Company XYZ sobre los ajustes de encabezado
6. Documentación de Company XYZ sobre los ajustes de espaciado de sección
7. Documentación de Company XYZ sobre los ajustes de fondos de sección
8. Documentación de Company XYZ sobre los ajustes de separadores
9. Documentación de Company XYZ sobre los ajustes de visibilidad
10. Documentación de Company XYZ sobre los ajustes de anchos de diseño
11. Documentación de Shopify sobre el editor de temas

Videos útiles

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

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

Use esta sección para combinar una imagen y contenido escrito en un diseño dividido y limpio. Puede reordenar los bloques para cambiar qué lado aparece primero y, después, ajustar la alineación, el apilado, el espaciado y el estilo de color para adaptarlos a distintos tipos de contenido y tamaños de pantalla. Para obtener una visión más amplia de cómo encaja esto en el diseño de su tienda, consulte la documentación de Shopify sobre secciones y bloques

Ajustes principales

Estos ajustes determinan cómo se comportan los dos lados como diseño antes de aplicar estilo a los bloques individuales.

1. Alineación del contenido controla cómo se alinean verticalmente la imagen y el texto. La alineación superior suele funcionar mejor para textos más largos, mientras que la alineación central se adapta a contenido promocional más breve.
2. Contenido fijo mantiene visible el lado más corto mientras se desplaza en ordenadores. Es especialmente útil cuando un lado es mucho más alto que el otro, como un área de texto larga junto a una sola imagen.
3. Apilar en móviles convierte el diseño en una sola columna en pantallas pequeñas. Use esta opción cuando el contenido en paralelo se vea demasiado ajustado o cuando quiera una secuencia de lectura más clara.
4. Apilar en escritorio también crea un diseño vertical en pantallas grandes. Puede funcionar bien para presentaciones más editoriales o cuando la imagen deba situarse claramente encima o debajo del texto.

El contenido fijo solo está disponible en ordenadores y no se aplica cuando el apilado está activado. Si quiere el efecto fijo, mantenga la sección en paralelo en escritorio.

Ajustes específicos de la sección

Ajustes de color

Estas sobrescrituras de color permiten que esta sección use su propio tratamiento del texto en lugar de depender por completo de los colores generales del tema. Son especialmente útiles cuando la imagen, el fondo o el tono del contenido necesitan un contraste más marcado o una presentación más alineada con la marca.

1. Ajuste conjuntamente los colores del icono, el texto y el subtítulo para que la sección mantenga la coherencia visual.
2. Vuelva a comprobar la legibilidad después de cambiar los colores, especialmente si también utiliza superposiciones o una imagen de fondo.
3. Use las sobrescrituras de forma selectiva en la página para que esta sección destaque por un motivo, no solo porque tenga un estilo diferente.

Tipos de bloque admitidos

1. Image
2. Rich text

Esta sección admite hasta 4 bloques, pero normalmente funciona mejor como un diseño sencillo de dos partes, con un bloque visual y un bloque de texto. Para consultar los aspectos básicos de la edición, vea la documentación de Shopify sobre la personalización de secciones

Bloque Image

El bloque Image proporciona el lado visual del diseño, con controles para la forma, el tamaño, la relación de aspecto, los pies de foto, las superposiciones y la visibilidad de la imagen. Consulte la documentación de Company XYZ sobre el bloque Image.

1. Use ancho máximo de la imagen y relación de aspecto conjuntamente para controlar el protagonismo de la imagen.
2. Añada un pie de foto solo cuando aporte contexto útil, como una etiqueta, una nota complementaria o una atribución.
3. Use los ajustes de superposición con moderación si la imagen aún debe verse nítida y detallada.

Bloque Rich text

El bloque Rich text proporciona el lado escrito del diseño e incluye encabezados, texto principal, iconos, un botón y un estilo de fondo opcional a nivel de bloque. Consulte la documentación de Company XYZ sobre el bloque Rich text.

1. Use este bloque para el mensaje principal, los detalles complementarios y un siguiente paso claro.
2. Si añade un fondo de bloque, asegúrese de que complemente la imagen en lugar de competir con ella.
3. Mantenga el estilo del botón acorde con la importancia de la acción para que el diseño no se vea demasiado recargado.

Ajustes estándar de sección

Ajustes de encabezado

Los Ajustes de encabezado añaden una introducción opcional sobre el diseño principal. Úselos cuando la imagen y el texto necesiten un encabezado, pie de foto, icono o acción compartidos a nivel de sección antes de que comience el contenido de los bloques.

Ajustes de espaciado

Los Ajustes de espaciado controlan el espacio encima y debajo de la sección. Un espaciado mayor ayuda a que los diseños protagonizados por imágenes respiren, mientras que un espaciado más reducido funciona mejor cuando esta sección forma parte de una secuencia de bloques de contenido relacionados.

Ajustes de fondo de sección

Los Ajustes de fondo de sección permiten añadir un color, degradado, imagen o vídeo detrás de toda la sección. Estos ajustes pueden crear una atmósfera visual más marcada, pero también pueden afectar al contraste y a la sensación de amplitud del diseño.

Precaución

Si ya tiene una imagen llamativa en la sección, una imagen o vídeo de fondo intenso puede hacer que el diseño se vea recargado. Simplifique el fondo o los recursos multimedia del primer plano si el contenido resulta más difícil de leer rápidamente.

Ajustes de separador

Los Ajustes de separador añaden una línea en la parte superior o inferior de la sección. Úselos para crear límites más claros cuando este diseño aparezca entre áreas de contenido similares.

Ajustes de visibilidad

Los Ajustes de visibilidad controlan si la sección aparece en ordenadores, móviles o ambos. Resultan especialmente útiles cuando quiere una presentación específica para móviles en lugar de depender de un único diseño en todas partes.

Ajustes de ancho

Los Ajustes de ancho controlan tanto el ancho del contenido interior como el ancho exterior de la sección. Los anchos más reducidos hacen que el texto resulte más fácil de leer, mientras que los ajustes más amplios ofrecen a los diseños protagonizados por imágenes una sensación más inmersiva.

La vista previa del editor puede limitar la claridad con la que se perciben los cambios de ancho, por lo que debe revisar las actualizaciones importantes de ancho en la página activa antes de finalizarlas. Para obtener más información sobre la interfaz de edición, consulte la documentación de Shopify sobre el editor de temas

Notas de uso

1. Comience por el orden de los bloques. Coloque primero la imagen o el texto según cuál deba guiar la historia o la promoción.
2. Use el contenido fijo con diseños desiguales. Es más eficaz cuando un lado es claramente más corto que el otro en ordenadores.
3. Mantenga clara la jerarquía visual. Si utiliza superposiciones, colores de texto personalizados y fondos a la vez, reduzca uno de ellos para proteger la legibilidad.
4. Adapte el ancho del diseño al contenido. Use anchos más reducidos para historias con mucho texto y diseños más amplios para secciones protagonizadas por imágenes.
5. Compruebe los diseños apilados en móviles. Asegúrese de que el orden de lectura, el recorte de la imagen y la posición del botón sigan pareciendo intencionados en pantallas pequeñas.
6. Revise ambos tamaños de ventana gráfica. Los controles de escritorio y móviles pueden producir diferencias en la alineación, la visibilidad y el comportamiento de los recursos multimedia, así que pruebe la sección en ambos.
7. Considere los bloques adicionales como un cambio de diseño. Añadir más bloques puede cambiar el equilibrio de la sección hasta el punto de que el diseño dividido sencillo original deje de ser el elemento principal.
8. Elija los recursos multimedia teniendo en cuenta el recorte. Separar los recursos multimedia para escritorio y móviles puede mejorar el ajuste, pero también cambiar el encuadre, la carga y la legibilidad.
9. Mantenga legibles los estados de los formularios. Si utiliza contenido que depende de la entrada del cliente, asegúrese de que los estados vacío, de error y de éxito sigan siendo fáciles de leer.
10. Compruebe el contenido fijo en contexto. Revíselo junto con las secciones cercanas y en cada tamaño de pantalla para que no oculte ni sobrecargue contenido importante mientras se desplaza.