Cómo usar texto enriquecido
El texto enriquecido es el elemento de texto del editor de templates. El estilo se aplica al texto que seleccionas en lugar de a todo el bloque, así que un mismo elemento puede contener a la vez varias fuentes, tamaños, colores y variables de producto.
El ejemplo clásico es una línea de precio: el precio anterior tachado en gris junto al precio actual en rojo y negrita, con los decimales elevados. Antes hacían falta dos o tres elementos de texto separados y alineados a mano, que se descolocaban en cuanto un producto tenía un precio más largo. Ahora es un solo elemento que se reajusta por sí solo.
Añadir texto enriquecido
Haz clic en "Texto" en la barra de elementos.
La barra de herramientas y dónde se aplica
La barra de herramientas está encima del editor. Lo que cambia depende de lo que tengas seleccionado:
- Texto seleccionado: el cambio solo se aplica a esa selección.
- Nada seleccionado: el cambio define el valor predeterminado del elemento, que siguen todos los fragmentos que no tengan su propio ajuste.
- Cursor en un párrafo: la alineación se aplica a ese párrafo.
Algunos controles siempre afectan a todo el elemento, y así lo indica su descripción emergente: altura de línea, relleno, desbordamiento y dirección del texto.
Controles disponibles:
| Control | Qué hace |
|---|---|
| Fuente, tamaño, peso, cursiva | Los controles tipográficos habituales, incluidas tus fuentes personalizadas |
| Relleno de texto | Color sólido o degradado con tantas paradas como necesites |
| Subrayar, tachado | Decoraciones del texto |
| Elevación | Superíndice o subíndice |
| Resaltado | Un fondo detrás del texto seleccionado |
| Contorno de texto | Un trazo alrededor de los caracteres, con su propio grosor |
| Sombra de texto | Una sombra en los caracteres, independiente de la sombra de todo el elemento |
| Espaciado | Espaciado entre letras, por selección |
| Transformar | Mayúsculas, minúsculas, primera letra en mayúscula |
| Alineación | Izquierda, centro, derecha, justificado, por párrafo |
| Borrar formato | Elimina los ajustes y vuelve a los valores predeterminados del elemento |
La negrita, la cursiva y el subrayado también funcionan con los atajos habituales Cmd/Ctrl + B, I y U.
Insertar variables de producto
Haz clic en "Insertar variable" para añadir un campo del producto, un campo extra o un campo interno. Las variables aparecen en el editor como chips que muestran el valor del producto de la vista previa actual, con el estilo con el que se renderizarán, para que veas el diseño real mientras escribes.
El selector muestra la cobertura junto a cada campo, por ejemplo only 812/1043, para que sepas antes de usar un campo cuántos de tus productos lo tienen realmente.
Un chip de variable admite estilos como cualquier otro texto. Selecciónalo y cambia la fuente, el color o el peso, y solo cambiará ese valor.
Formato numérico por variable
Haz clic en un chip de variable para abrir sus opciones de formato. El formato se define en el chip, no en el elemento, así que dos precios del mismo bloque pueden tener formatos distintos.
Puedes definir:
- Redondeo: hacia arriba, hacia abajo o al más cercano
- Decimales: mostrarlos siempre, ocultarlos o mostrarlos solo cuando hagan falta
- Decimal separator: coma o punto, y el separador de miles se ajusta en consecuencia
- Raised decimals: muestra la parte decimal como superíndice, para conseguir el aspecto de 199,95 con decimales pequeños
Los campos que solo contienen texto no muestran el formato numérico.
Tamaño de texto automático
Activa "Tamaño de texto automático" y el elemento calcula el tamaño de fuente más grande que cabe en el cuadro. Todos los fragmentos se escalan proporcionalmente, así que los estilos combinados mantienen sus tamaños relativos.
Con el tamaño de texto automático activado, el campo de altura muestra la altura calculada en lugar de aceptar un valor, y desaparecen los controladores de tamaño superior e inferior. Arrastra los controladores laterales para cambiar el ancho y el texto se volverá a ajustar.
Es lo que necesitas para cualquier campo de longitud impredecible, como los títulos de producto.
Desbordamiento
El desbordamiento controla qué pasa cuando el texto no cabe en el cuadro:
- Envolver: el texto pasa a nuevas líneas
- Elipsis: corta el texto a la altura del cuadro y lo termina con puntos suspensivos
El texto se corta a nivel de carácter, así que una palabra larga se trunca en lugar de desaparecer por completo.
Dirección del texto
La dirección del texto se define en el elemento, con el control de dirección de la barra de herramientas. Usa la dirección de derecha a izquierda para el árabe, el hebreo y escrituras similares.
Elementos de texto existentes
Los elementos de texto creados antes del texto enriquecido siguen funcionando y se pueden editar, pero no tienen las nuevas funciones. Si quieres estilos combinados o tamaño de texto automático en un elemento antiguo, añade un nuevo elemento de texto enriquecido y pasa el contenido a él.