Text, Image y Divider funcionan como secciones completas en cualquier página, y como bloques dentro de muchas otras secciones. Sus ajustes son los mismos en ambos casos, con pequeñas diferencias que se indican abajo.
Añadir uno
En el constructor, haz clic en Add new section. Text e Image están en el grupo Content, y Divider en Decoration. Por página puedes añadir hasta 3 secciones Text, 3 secciones Image y 10 Dividers. Para añadir uno como bloque, selecciona una sección y haz clic en Add new block.
Text
- Text: el editor tiene negrita, cursiva, subrayado, tachado, tamaño de texto (Small, Normal, Large, Huge), color del texto, color de resaltado y un botón para borrar el formato.
- Preset: Default, Paragraph o de Heading 1 a Heading 6. Los títulos usan tus fuentes de títulos e indican a los buscadores cómo está construida la página. Usa solo un Heading 1 por página.
- Font: Default usa la fuente del ajuste predefinido. Body, Heading, Subheading o Accent usan en su lugar esa fuente de los ajustes de Fonts.
- Size (de 10 a 30 píxeles), Line height y Letter spacing (Tight, Normal o Loose).
- Width: Fit (tan ancho como el texto) o Fill (todo el ancho). Alignment (izquierda, centro, derecha) aparece con Fill.
En la página de colección, el texto puede usar {{collection_name}}, {{collection_description}} y {{products_count}} para mostrar los valores reales de la colección que se está viendo.
Image
- Image: elige una imagen de tu biblioteca de medios.
- Width: Fit, Fill o Custom con un Custom width en porcentaje. Alignment se oculta con Fill.
- Ratio: Auto (la forma original de la imagen), Portrait, Square o Landscape. Con una proporción fija, Fit elige Cover (llena el marco, puede recortar) o Contain (muestra la imagen completa).
- Corner radius: redondea las esquinas, de 0 a 100 píxeles.
- Link: opcional. La imagen abre esta dirección al hacer clic, por ejemplo
https://example.com/products/your-link.
Divider
Una línea que separa el contenido. Es horizontal en un diseño apilado, y se vuelve vertical cuando se coloca directamente dentro de un grupo horizontal.
- Width: Fit o Fill.
- Thickness: de 1 a 10 píxeles. Length: del 5% al 100% del espacio.
- Alignment: Start, Center o End. Aparece cuando Length es menor del 100%.
- Corner radius: extremos de la línea Sharp o Rounded.
Colores y espaciado
- Como sección, cada uno tiene un Color scheme: su fondo, el color de su texto y, en el separador, el color de la línea (el color de borde del esquema). Consulta Esquemas de colores.
- Como bloque, Text tiene Use parent color scheme (activado por defecto). Desactívalo para elegir otro esquema. Las imágenes en bloques siguen a su sección.
- Padding en cada lado. Una sección Divider admite hasta 200 píxeles, para dejar más espacio entre secciones.
Bueno saberlo
- El texto vacío no aparece en la tienda, así que un bloque Text vacío no deja ningún hueco.
- La imagen aparece recortada: pon Fit en Contain, o Ratio en Auto.
- El separador no es vertical: debe estar directamente dentro de un grupo configurado en Horizontal, consulta ¿Cómo uso los bloques Group para colocar contenido lado a lado o en columnas?.