Elementos - Texto

Utilice el Texto Tipo de contenido para agregar un contenedor de texto con un editor WYSIWYG ("Lo que ve es lo que obtiene") en la Page Builder stage. Además, puede agregar vínculos, imágenes, variablesy añaden widgets al texto desde la barra de herramientas del editor.

Texto con formato en un titular {width="700"}

NOTE
Si está realizando cambios importantes en Page Builder contenido, se recomienda aumentar el Duración de sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

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, consulte Uso del editor.

Herramienta de edición de texto: TinyMCE {width="600"}

Cuadro de herramientas Contenedor de texto

Cuadro de herramientas Contenedor de texto {width="600"}

Herramienta
Icono
Descripción
Mover
Icono Mover {width="25"}
Mueve el contenedor de texto a otro lugar válido de la página.
(etiqueta)
TEXTO
Identifica el contenedor actual como un elemento de texto.
Configuración
Icono de configuración {width="25"}
Abre las propiedades del contenedor de texto en modo de edición.
Hide
Icono Ocultar {width="25"}
Oculta el contenedor de texto.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de texto oculto.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia del contenedor de texto.
Eliminar
Icono Eliminar {width="25"}
Elimina el contenedor de texto y su contenido del escenario.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Añadir texto

  1. En el Page Builder panel, expandir Elements y arrastre un Text marcador de posición a una fila, columna o ficha establecida en el escenario.

    Arrastrar un marcador de posición de texto al escenario {width="600" modal="regular"}

  2. Utilice el editor para introducir y dar formato al texto, según sea necesario.

    Para obtener más información, consulte Uso del editor.

    Editor de texto con contenido {width="600"}

Creación de 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 un correo electrónico, consulte Adición de variables personalizadas.

  1. 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.

    URL completa - https://mystore.com/women/tops-women/tees-women.html

    URL relativa - ../women/tops-women/tees-women.html

  2. Seleccione el texto en el espacio del editor y haga clic en Insertar/editar vínculo ( Botón Insertar/editar vínculo {width="20"} ) en la barra de herramientas del editor.

    Adición de un vínculo a texto con formato {width="500" modal="regular"}

  3. Para URL, introduzca el vínculo relativo que ha preparado.

  4. Establecer Target hasta None.

    Esta configuración abre la página en la misma ventana del explorador, en lugar de abrir una nueva pestaña.

  5. Para Title, introduzca Shop Tees.

    El Title algunos exploradores utilizan el atributo de vínculo como información de objeto.

  6. Para guardar el vínculo y volver a Page Builder workspace, haga clic en OK.

    Detalles del vínculo {width="500" modal="regular"}

Insertar una imagen

  1. Coloque el cursor en el texto donde desee insertar la imagen.

  2. Clic Insertar/editar imagen ( Botón Insertar/editar imagen {width="20"} ) en la barra de herramientas del editor.

  3. Para Source, haga clic en el icono de búsqueda para utilizar el almacenamiento de medios para localizar y seleccionar una imagen.

  4. Para Image Description, introduzca un texto descriptivo para la imagen.

    Este texto rellena el alt atributo de vínculo para la imagen y lo utilizan algunos exploradores para la accesibilidad.

  5. Introduzca la anchura y la altura Dimensions, en píxeles, para representar la imagen en la página.

    Guarde el Constrain proportions casilla de verificación seleccionada para mantener automáticamente la proporción de aspecto de la imagen.

  6. Para insertar la imagen y volver al Page Builder workspace, haga clic en OK.

Cambiar la configuración de texto

  1. Pase el ratón sobre el contenedor de texto para mostrar el cuadro de herramientas y elegir la Configuración ( Icono de configuración {width="20"} ) icono.

    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.
  2. Actualice el contenido según sea necesario.

  3. Actualice el Advanced ​ajustes según sea necesario.

    • Para controlar la posición del texto dentro del contenedor principal, elija una 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.
    • Configure las variables Border estilo 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 bordes:

      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 aplicarla al contenedor.

      Separe los distintos nombres de clase con un espacio.

    • Introduzca valores, en píxeles, para Margins and Padding para determinar los márgenes exteriores y el relleno 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
  4. Cuando termine, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d