Elementos - Texto
Utilice el tipo de contenido Text para agregar un contenedor de texto con un editor WYSIWYG ("Lo que ves es lo que obtienes") en Page Builder stage. Además, puede agregar vínculos, imágenes, variables y widgets al texto desde la barra de herramientas del editor.
Herramientas del editor de texto
Puede acceder al editor de texto directamente desde el escenario o desde una página de configuración. Los cambios realizados directamente en la fase se guardan automáticamente. Para obtener más información, vea Usar el editor.
Cuadro de herramientas Contenedor de texto
Añadir texto
-
En el panel Page Builder, expanda Elements y arrastre un marcador de posición Text a una fila, columna o conjunto de pestañas en el escenario.
{width="600" modal="regular"}
-
Utilice el editor para introducir y dar formato al texto, según sea necesario.
Para obtener más información, vea Usar el editor.
{width="600"}
Crear un vínculo
El botón Insertar vínculo del editor facilita la adición de un hipervínculo a una imagen de la galería. Sin embargo, también se puede utilizar para crear un vínculo en línea en texto, si tiene la URL por adelantado. A diferencia del botón Widget, el botón Insertar/Editar vínculo no está integrado con páginas, productos o categorías de la tienda.
Para crear un vínculo para un número de teléfono o correo electrónico, consulte Agregar variables personalizadas.
-
En la tienda, vaya a la página que va a ser el destino de destino del vínculo y copie la información del vínculo.
Puede utilizar la dirección URL completa o una dirección URL relativa que omita la referencia al dominio de almacén.
Dirección URL completa:
https://mystore.com/women/tops-women/tees-women.html
URL relativa -
../women/tops-women/tees-women.html
-
Seleccione el texto en el espacio del editor y haga clic en Insertar/editar vínculo ( {width="20"} ) en la barra de herramientas del editor.
{width="500" modal="regular"}
-
Para URL, escriba el vínculo relativo que ha preparado.
-
Establezca Target en
None
.Esta configuración abre la página en la misma ventana del explorador, en lugar de abrir una nueva pestaña.
-
Para Title, escriba
Shop Tees
.Algunos exploradores utilizan el atributo de vínculo
Title
como información de objeto. -
Para guardar el vínculo y volver al área de trabajo Page Builder, haga clic en OK.
{width="500" modal="regular"}
Insertar una imagen
-
Coloque el cursor en el texto donde desee insertar la imagen.
-
Haga clic en Insertar/editar imagen ( {width="20"} ) en la barra de herramientas del editor.
-
Para Source, haga clic en el icono de búsqueda para usar el almacenamiento de medios para buscar y seleccionar una imagen.
-
Para Image Description, escriba el texto descriptivo de la imagen.
Este texto rellena el atributo de vínculo
alt
para la imagen y lo utilizan algunos exploradores para fines de accesibilidad. -
Escriba la anchura y altura Dimensions, en píxeles, para representar la imagen en la página.
Mantenga la casilla de verificación Constrain proportions seleccionada para mantener automáticamente la relación de aspecto de la imagen.
-
Para insertar la imagen y, a continuación, volver al espacio de trabajo Page Builder, haga clic en OK.
Cambiar la configuración de texto
-
Pase el ratón sobre el contenedor de texto para mostrar la caja de herramientas y elija el icono Configuración ( {width="20"} ).
note note NOTE Dado que el contenedor de texto está perfectamente anidado dentro de otro contenedor, asegúrese de que dispone del cuadro de herramientas correcto. -
Actualice el contenido según sea necesario.
-
Actualice la configuración de Advanced según sea necesario.
-
Para controlar la colocación del texto dentro del contenedor principal, elija un Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Opción Descripción Default
Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual. Left
Alinea la lista a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique. Center
Alinea la lista en el centro del contenedor principal, con margen para cualquier relleno que se especifique. Right
Alinea el bloque a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique. -
Establezca el estilo Border que se aplica a los cuatro lados del contenedor de texto:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Opción Descripción Default
Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada. None
No proporciona ninguna indicación visible de los bordes del contenedor. Dotted
El borde del contenedor aparece como una línea de puntos. Dashed
El borde del contenedor aparece como una línea discontinua. Solid
El borde del contenedor aparece como una línea sólida. Double
El borde del contenedor aparece como una línea doble. Groove
El borde del contenedor aparece como una línea ranurada. Ridge
El borde del contenedor aparece como una línea discontinua. Inset
El borde del contenedor aparece como una línea de margen. Outset
El borde del contenedor aparece como una línea de inicio. -
Si establece un estilo de borde distinto de
None
, complete las opciones de visualización de borde:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Border Width Introduzca el número de píxeles de la anchura de la línea del borde. Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde. -
(Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor.
Separe los distintos nombres de clase con un espacio.
-
Escriba valores, en píxeles, para que Margins and Padding determine los márgenes externos y el margen interno del contenedor de texto.
Introduzca los valores correspondientes en el diagrama.
table 0-row-2 1-row-2 2-row-2 layout-auto Área del contenedor Descripción Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left
Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left
-
-
Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.