Skip to main content
Diseñar un elemento define cómo se ve y dónde se ubica en la pantalla. Realice estos cambios en la sección Content del Widget Studio, donde cada elemento aparece en la lista Elements.
Pestaña Content del Widget Studio con Screen Default y la lista Elements: Wrapper, Button, Image, Text y Heading

​
Seleccionar y organizar elementos

​
Seleccionar un elemento

Haga clic en un elemento para seleccionarlo, o haga clic en su nombre en el panel de jerarquía de la izquierda.

​
Añadir, duplicar, editar o eliminar un elemento

Al pasar el cursor sobre un elemento del panel izquierdo, se muestran acciones secundarias. Haga clic en el icono + para añadir un elemento debajo del elemento seleccionado. Haga clic en el menú three-dots para editar, cambiar el nombre, duplicar, ocultar o eliminar el elemento.
Pestaña Content con el elemento Image seleccionado en la lista Elements, bajo Wrapper
Si un evento está asociado a uno de sus elementos, no puede eliminar el elemento. Primero debe eliminar el evento.

​
Duplicar un elemento

Puede duplicar un elemento en la misma pantalla o duplicarlo de una pantalla a otra.

​
Cambiar el tamaño de un elemento

Puede cambiar el tamaño de sus elementos en la ventana de vista previa (a la derecha). Coloque el cursor en el borde de un elemento y, a continuación, haga clic y arrastre para editar sus dimensiones. También puede modificar estas dimensiones en el panel izquierdo.

​
Auto-resize text and heading

Panel del elemento Heading, pestaña General, con Auto-resize block to fit text marcado
Esta opción ajusta automáticamente el tamaño del elemento, de modo que se expande o se reduce para adaptarse al contenido del texto.

​
Smart guides

Smart guides le ayudan a alinear y posicionar los elementos en vertical y en horizontal mientras edita su widget.

​
Constrain proportions

Una vez cambiado el tamaño del elemento, puede bloquear sus dimensiones. Para bloquear las proporciones de un elemento:
  1. Seleccione un elemento en el panel izquierdo.
  2. Pase el cursor sobre el elemento y haga clic en el padlock.

​
Mover un elemento

Arrastre y suelte un elemento en la vista previa para moverlo.

​
Girar un elemento

Para girar un elemento, selecciónelo e introduzca el ángulo de rotación deseado en el parámetro de rotación del panel izquierdo.

​
Editar el contenido de un elemento

Haga clic en un elemento para acceder a su configuración. Puede usar IA para editar o generar su texto.
Panel del elemento Text, pestaña General, con el editor de contenido de texto que muestra Obtenga un 20 % de descuento en su primer pedido al unirse hoy a nuestra lista
Para añadir un enlace, resalte una palabra, un grupo de palabras o un bloque de texto completo.
Para modificar la URL asociada al texto, puede crear un evento de clic y asociarle una acción URL.
También puede añadir emojis a sus encabezados, textos y enlaces.

​
Subir su propia fuente

Puede añadir su propia fuente a su widget.
  1. Haga clic en el icono T del editor de texto y, a continuación, haga clic en + Add a font.
Panel del elemento Text con la ventana emergente de ajustes de fuente que muestra Font size, Font family y Font weight, y un botón Apply
  1. En los ajustes de importación de fuentes, elija su Font Source:
    • From your website: Seleccione esta opción si la fuente ya está alojada en el mismo sitio web que el widget.
    • Link to a font file: Indique la URL directa del archivo de fuente (por ejemplo, .woff, .woff2, .ttf u .otf).
    • Embed code: Inserte el código CSS para importar la fuente con @import o @font-face (desde servicios como Google Fonts o Adobe Fonts). Al pegar Google Fonts, copie solo el código desde @import hasta </style>.
  2. Especifique el Font family.
  3. Haga clic en Preview & Add para ver al instante cómo quedará la fuente con su texto.
Cuadro de diálogo de vista previa de fuente personalizada para Pacifico con los grosores de fuente desde Thin 100 hasta SemiBold 600, con los botones Back, Cancel y Add
También puede ajustar el texto de vista previa y activar o desactivar la visualización en cursiva. Puede seleccionar uno o varios grosores de fuente. Haga clic en Add para confirmar. Una vez guardada, su fuente aparece en la lista desplegable Font family. Puede aplicar la fuente a cualquier elemento de texto y verla en vista previa en tiempo real.

​
Usar colores personalizados

Con el cuentagotas del panel del selector de color, puede tomar cualquier color de la pantalla y usarlo en un elemento.
Panel del elemento Text con Enable background color marcado y el Custom color picker abierto con el valor Hex #ffffff

​
Configurar los estados de un elemento

Al seleccionar un elemento, aparecen dos pestañas en la parte superior del menú de edición: General y States. Seleccione la pestaña States para encontrar propiedades adicionales que le permiten editar los estados del elemento (Hover, Active, Disabled).
Panel del elemento Text, pestaña States, con Choose state en default y un mensaje para seleccionar un estado para editar
Por ejemplo, puede personalizar el aspecto de un elemento de encabezado en estado Hover según su estado.
Panel del elemento Text, pestaña States, con Choose state en hover y las secciones Font, Background Color, Background Image y Border
Al hacer clic en la pestaña General, la vista previa del widget cambia al estado predeterminado del elemento. Puede elegir el estado predeterminado del elemento en la pestaña General.

​
Editar el HTML de un elemento de texto

Utilice el editor de código HTML para cambiar el marcado de un elemento de texto, por ejemplo, las etiquetas strong alrededor de una parte del mensaje. Para editar el HTML de un elemento de texto:
  1. Seleccione un elemento de texto.
  2. En la barra de herramientas Text content, haga clic en el menú de tres puntos y, después, en Code.
  3. Edite el HTML en el editor de código.
Panel de ajustes del elemento Text, pestaña General, con el contenido mostrado como código HTML, incluidas las etiquetas strong alrededor de 20% off