Texto enriquecido

Enlaces destacados

1. Documentación de Company XYZ sobre el bloque de texto enriquecido
2. Documentación de Company XYZ sobre iconos
3. MDN Web Docs
4. Documentación de Company XYZ sobre los ajustes de fondos de sección
5. Documentación de Company XYZ sobre el uso de vídeos
6. Documentación de Company XYZ sobre los ajustes de color
7. Documentación de Company XYZ sobre los ajustes de visibilidad
8. Documentación de Shopify sobre secciones y bloques
9. Documentación de Shopify sobre la personalización de temas

Videos útiles

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Use este bloque para añadir una zona de mensaje compacta con un icono opcional, un encabezado, texto enriquecido y un botón. Sirve para textos promocionales breves, declaraciones de marca, destacados de funciones y contenido de apoyo entre bloques más visuales. Para un resumen de la función, consulte la Texto enriquecido.

Ajustes de contenido

Estos ajustes controlan el mensaje en sí y cómo se presenta. Las configuraciones más claras usan una estructura sencilla: subtítulo opcional, encabezado, texto de apoyo y una sola acción solo cuando el siguiente paso es evidente.

La alineación del texto y la posición del icono determinan el aspecto del bloque en el diseño. El contenido centrado funciona bien para mensajes promocionales breves, mientras que el contenido alineado a la izquierda suele ser más fácil de leer cuando el texto es más largo.

El campo de icono acepta un emoji o un nombre de icono. Déjelo en blanco si el mensaje no necesita una señal visual adicional. Para ayuda con los iconos, consulte iconos y la biblioteca de nombres de iconos admitida.

Elija el tipo de encabezado según el papel del bloque en la jerarquía de la página, no solo según el tamaño visual que desee. Un nivel de encabezado más fuerte ayuda a que este bloque introduzca una nueva área de contenido, mientras que un nivel más ligero funciona mejor cuando complementa contenido cercano.

El campo de texto enriquecido admite enlaces y formato básico, así que puede añadir énfasis sin que el bloque se sienta recargado. Mantenga un estilo ligero para que el mensaje siga siendo fácil de revisar.

Los ajustes del botón se aplican solo al botón integrado de este bloque. Úselos para una llamada a la acción clara y elija un estilo que coincida con la importancia de la acción. Los diseños de botón solo con icono funcionan mejor cuando el significado ya resulta obvio por el texto cercano.

Añada juntos el texto del botón y el enlace del botón. Un botón sin una etiqueta o destino claros es fácil de pasar por alto o malinterpretar.

Si la mayoría de los clics se producirán en pantallas pequeñas, la opción de botón móvil a ancho completo puede hacer que la acción sea más fácil de ver y de tocar.

Ajustes estándar de bloque

Ajustes de fondo del bloque

Use estos ajustes para darle al bloque su propia superficie visual con un fondo de color, degradado, imagen o vídeo. Esto puede ayudar a que el mensaje destaque, pero los fondos más intensos también pueden cambiar el peso visual del bloque y el espaciado en el diseño. Consulte fondos de sección. Para una descripción general relacionada de la estructura de Shopify, consulte la documentación de Shopify sobre secciones y bloques

Los ajustes de degradado sustituyen a los colores de fondo planos, y los degradados de superposición sustituyen a los colores de superposición planos. Cuando usa una imagen o un vídeo de fondo, las superposiciones son especialmente útiles para mantener el texto legible.

Los campos de imagen y vídeo de fondo para móviles le permiten cambiar a un recurso diferente para pantallas más pequeñas. Si se dejan en blanco, en móviles se usa el recurso principal de fondo. Revise ambos tamaños de ventana gráfica si configura medios distintos para escritorio y móvil, ya que el recorte, la carga y la legibilidad pueden cambiar.

Precaución

Las imágenes y los vídeos con demasiados elementos pueden reducir rápidamente la legibilidad. Si este bloque incluye texto más largo o un botón, use superposiciones o medios más sencillos para mantener el contenido claro.

Para orientación sobre la configuración de vídeo, consulte usar vídeo.

Ajustes de color

Estos ajustes sustituyen los colores predeterminados del tema solo para este bloque. Úselos cuando el bloque necesite más contraste, un acento de marca o una mejor coordinación con un fondo personalizado. Consulte ajustes de color. Para una visión más amplia de la personalización del tema, consulte la documentación de Shopify sobre la personalización de temas

Ajuste juntos el encabezado, el subtítulo y el texto del cuerpo para que el contenido siga leyéndose como un solo sistema. Si también da estilo al icono o al borde, mantenga esos acentos como apoyo y no más prominentes que el mensaje en sí.

Los valores en blanco, transparentes o con estilo predeterminado suelen mantener el bloque más cerca del aspecto de reserva del tema, mientras que los colores explícitos, los degradados o las sustituciones de medios hacen que el bloque se sienta más independiente.

Ajustes de visibilidad

Use los controles de visibilidad para mostrar u ocultar este bloque según el tamaño del dispositivo. Esto es útil cuando desea una versión más breve para móvil, una versión más espaciosa para escritorio o una disposición de contenido diferente entre diseños. Consulte ajustes de visibilidad.

Consejo

Si oculta este bloque en un tamaño de dispositivo, asegúrese de que el mismo mensaje o acción siga apareciendo en otro lugar cuando importe.

Consejos de uso

1. Mantenga el mensaje centrado. Use este bloque para una sola idea principal en lugar de acumular varios mensajes en competencia en un espacio pequeño.
2. Adapte el encabezado a la estructura de la página. Elija un tipo de encabezado que encaje con la jerarquía del contenido circundante, no solo con el estilo visual.
3. Use los iconos con moderación. Añada un emoji o icono solo cuando refuerce el mensaje rápidamente y no compita con el encabezado.
4. Limite la llamada a la acción. Use el botón integrado para un solo siguiente paso claro y considere la visualización móvil a ancho completo cuando los toques en pantallas pequeñas sean importantes.
5. Compruebe el contraste en cada dispositivo. Cuando use colores personalizados, degradados o medios, revise la legibilidad y la visibilidad del botón tanto en escritorio como en móvil.
6. Revise con cuidado los medios separados. Si configura fondos distintos para escritorio y móvil, confirme el recorte, el comportamiento de carga y la legibilidad del texto en cada ventana gráfica.