Texto enriquecido

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre iconos
3. Documentación de Company XYZ sobre ajustes de colores
4. Documentación de Company XYZ sobre el bloque Button
5. Documentación de Company XYZ sobre ajustes de espaciado de sección
6. Documentación de Company XYZ sobre ajustes de fondos 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

Use Rich text to add a simple text-led content area with optional icons, supporting copy, and calls to actions. For a broader overview of how sections are built and arranged in a theme, see documentación de Shopify sobre secciones y bloques. It fits well for intros, promotions, brand messaging, policy highlights, or any short content block that needs more presentation control.

Ajustes de contenido

Aquí es donde construye el mensaje principal de la sección. Puede combinar un subtítulo, un encabezado, contenido de rich text y un icono opcional para crear desde un anuncio compacto hasta un bloque de contenido más editorial.

La alineación del texto define la dirección general de lectura de la sección, por lo que suele ser la primera decisión de diseño que debe tomar. El tipo de encabezado ayuda a que la sección encaje de forma más natural en la estructura de la página, tanto si quiere que el título se lea como un encabezado principal como si prefiere una etiqueta más ligera.

El campo del icono acepta un emoji o el nombre de un icono. Las posiciones superior e inferior funcionan bien en diseños apilados y centrados, mientras que las posiciones izquierda y derecha suelen verse más limpias para texto breve o contenido orientado a la acción. Para obtener ayuda con los iconos, consulte la guía de iconos.

El campo de rich text admite enlaces y formato básico, lo que lo hace útil para textos explicativos o promocionales breves. Si también incluye un botón, mantenga el texto conciso para que la llamada a la acción siga siendo clara.

Botón a nivel de sección

Puede añadir un botón integrado directamente en la sección para una acción principal vinculada al mensaje principal. Esta es la opción más sencilla cuando solo necesita una única llamada a la acción.

El estilo del botón controla la énfasis, mientras que el diseño del botón controla cómo aparecen juntos el icono y la etiqueta. Los estilos rellenos suelen ser los mejores para acciones principales, los estilos más ligeros funcionan mejor para acciones secundarias, y los diseños solo con icono es mejor reservarlos para acciones muy evidentes.

Estos ajustes de botón se aplican solo al botón integrado de la sección. No afectan a ningún bloque Button añadido.

Un botón móvil de ancho completo puede mejorar la facilidad de toque y hacer que la acción sea más destacada en pantallas pequeñas. Esto es especialmente útil en secciones promocionales, donde el botón debe ser fácil de ver y usar.

Ajustes de color

Estos ajustes anulan los colores habituales del tema solo para esta sección. Son útiles cuando desea que el contenido tenga un aspecto más de marca, más promocional o más diferenciado respecto a las secciones cercanas. Para un comportamiento de color más amplio, consulte la referencia de ajustes de color.

Puede ajustar por separado los colores de los bordes, los iconos, los encabezados, el texto del subtítulo y el texto del cuerpo. Al combinar colores de texto personalizados con un fondo personalizado, revise cuidadosamente la legibilidad para que la sección siga viéndose clara y equilibrada.

Consejo

Si aplica colores de texto personalizados y medios de fondo, revise la sección en móvil y en escritorio para asegurarse de que el contraste siga siendo fuerte.

Tipos de bloque admitidos

1. Button

Botón

Use los bloques Button cuando necesite llamadas a la acción adicionales aparte del botón integrado de la sección. Esto funciona bien para acciones emparejadas, como una ruta de compra principal y un enlace de apoyo más ligero. Consulte el Botón para ver los ajustes específicos del bloque.

Cada bloque Button tiene sus propios controles de texto, enlace, estilo, icono y visibilidad. Esto facilita combinar la énfasis de los botones o ocultar una acción específica en escritorio o en móvil sin ocultar toda la sección.

Cuando use varios botones, mantenga clara la jerarquía. Normalmente una acción debe sentirse principal, con las acciones de apoyo estilizadas de forma más ligera.

Ajustes estándar de sección

Ajustes de espaciado

Ajustes de espaciado controlan el espacio por encima y por debajo del contenido de la sección en escritorio y móvil. Use un espaciado más reducido para contenido utilitario y uno más generoso cuando la sección deba sentirse más destacada o más fácil de revisar.

Ajustes de fondo de sección

Adjustes de fondo de sección le permiten colocar un color, degradado, imagen o video detrás del contenido. Esto puede convertir Rich text en un área de destaque más fuerte o en un bloque de mensaje con más identidad de marca.

Los colores y degradados de superposición son especialmente útiles cuando los medios de fondo, de otro modo, competirían con el texto. Las imágenes o videos de fondo específicos para móvil también pueden ayudarle a evitar recortes incómodos en pantallas pequeñas.

Precaución

Los medios de fondo pueden cambiar tanto la legibilidad como la percepción del espaciado. Después de añadir un fondo, revise juntos el contraste, el espaciado y el ancho.

Ajustes de separador

Adjustes de separador añaden una línea en la parte superior o inferior de la sección para crear un límite más claro con el contenido cercano. Son más útiles cuando el contenido es sencillo, pero aun así necesita separación visual.

Si deja transparente el color del separador, la sección usa el comportamiento normal del color del borde. Esto ayuda a que los separadores se integren de forma más natural con el resto de la página.

Ajustes de visibilidad

Adjustes de visibilidad controlan si la sección aparece en escritorio, en móvil o en ambos. Esto resulta útil cuando desea mensajes más simples, espaciados distintos o llamadas a la acción diferentes en pantallas pequeñas.

Los bloques Button también incluyen su propio control de visibilidad, por lo que puede ocultar acciones individuales sin ocultar toda la sección.

Ajustes de ancho

Ajustes de ancho controlan el ancho del contenido y el ancho exterior de la sección. El ancho del contenido es la principal elección de ancho de lectura, mientras que el ancho de la sección importa más cuando usa un color de fondo, imagen, degradado o video.

Los anchos de contenido más estrechos suelen mejorar la legibilidad de textos más largos. Los anchos de sección más amplios pueden generar un impacto visual más fuerte, pero conviene comprobar la página en vivo porque el editor puede no reflejar por completo el diseño final.

Notas de uso

1. Mantenga el mensaje centrado. Use un encabezado claro, una idea de apoyo y una acción principal para que la sección sea fácil de revisar.
2. Ajuste la ubicación del icono al diseño. La colocación superior o inferior es adecuada para contenido editorial centrado, mientras que la colocación izquierda o derecha suele funcionar mejor para mensajes más breves y orientados a la acción.
3. Use claramente la jerarquía de botones. Si combina el botón de la sección con bloques Button, haga que una acción sea principal y estilice las demás como secundarias.
4. Proteja el contraste del texto. Vuelva a revisar encabezados, subtítulos y cuerpo de texto cada vez que añada colores personalizados, degradados, imágenes o fondos de video.
5. Previsualice los cambios de ancho en la tienda online. El ancho de lectura y el ancho de la sección pueden percibirse de forma diferente en el editor que en la página en vivo.
6. Revise ambos puntos de interrupción. Los controles de escritorio y móvil pueden cambiar la alineación, la visibilidad, la elección de medios y el espaciado de distintas maneras.
7. Observe el estilo de reserva. Los valores transparentes o de estilo predeterminado suelen conservar el aspecto del tema circundante, mientras que las opciones explícitas de color o medios hacen que la sección se sienta más independiente.
8. Elija los medios de forma deliberada. Si establece medios distintos para escritorio y móvil, compruebe el recorte y la legibilidad en ambos tamaños antes de publicar.