> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Editar sus widgets
> Añada, diseñe, redimensione, mueva y anime elementos en el Widget Studio, e inserte datos personalizados o fuentes para crear experiencias de widget personalizadas.
## Añadir un elemento
En la sección **Añadir elemento**, haga clic en un tipo de elemento para añadirlo a su widget.
Hay varios elementos disponibles.
### Tipografía
* Encabezado
* Texto
* Enlace
### Encuesta
* Botón
* Respuesta corta
* Respuesta larga
* Opción múltiple
* NPS
* Escala
* Entrada oculta
### Medios
* iFrame
* Imagen
* Vídeo
* HTML
* Slider
* Cuenta regresiva
* Clic para copiar
* Barra de progreso
* Barra de progreso por pasos
* Código QR
* Ruleta de la fortuna
### Diseño
* Bloque
* Botón de cierre
* Forma
* Información sobre herramientas
### Formulario
* Entrada
* Fecha
* Hora
* Conmutador
* Casilla de verificación
* Botón de opción
* Selección
* Área de texto
* Entrada de rango
* Mensaje de error
La pila de capas refleja la posición de los elementos en primer plano o en segundo plano.
## Diseñar un elemento
Puede diseñar los elementos de su widget en la sección **Contenido**.
### Seleccionar un elemento
Haga clic en un elemento para seleccionarlo, o haga clic en su nombre en el panel de jerarquía a la izquierda.
### Pasar el cursor por un elemento
Al pasar el cursor sobre un elemento en el panel izquierdo se mostrarán acciones secundarias. Haga clic en el icono **+** para añadir un elemento debajo del elemento seleccionado. Haga clic en el menú de **tres puntos** para editar, renombrar, duplicar, ocultar o eliminar el elemento.
Si hay un evento asociado a uno de sus elementos, no podrá eliminar el elemento. Primero debe eliminar el evento.
#### Duplicar
Puede duplicar un elemento en la misma pantalla, o duplicar un elemento de una pantalla a otra.
### Hacer clic en un elemento
Haga clic en un elemento para acceder a su configuración.
Puede utilizar IA para editar o generar su texto.
Para añadir un enlace, resalte una palabra, un grupo de palabras o un bloque entero de texto.
Para modificar la URL asociada a un texto, puede crear un evento de clic y asociarle una acción **URL**.
También puede añadir emojis a sus encabezados, texto y enlaces.
### Cargar su propia fuente
Puede añadir su propia fuente a su widget.
1. Haga clic en el icono **T** en el editor de texto y, a continuación, haga clic en **+ Añadir una fuente**.
2. En la configuración de importación de fuentes, elija la **Fuente de su tipografía:**
* **Desde su sitio web:** Seleccione esta opción si la fuente ya está alojada en el mismo sitio web que el widget.
* **Enlace a un archivo de fuente:** Proporcione la URL directa al archivo de fuente (por ejemplo, `.woff`, `.woff2` o `.tiff`).
* **Código de incrustación:** Inserte el código CSS para importar la fuente mediante `@import` o `@font-face` (de servicios como Google Fonts o Adobe Fonts). Al pegar Google Fonts, copie solo el código desde `@import` hasta ``.
3. Especifique la **Familia de fuente**.
4. Haga clic en **Vista previa y añadir** para ver al instante cómo se verá la fuente con su texto.
También puede ajustar el texto de vista previa y alternar la visualización en cursiva. Puede seleccionar uno o varios grosores de fuente. Haga clic en **Añadir** para confirmar.
Una vez guardada, su fuente aparecerá en el menú desplegable **Familia de fuente**. Puede aplicar la fuente a cualquier elemento de texto y previsualizarlo en tiempo real.
### Utilizar colores personalizados
Con el cuentagotas del panel del selector de colores, puede elegir cualquier color de la pantalla y utilizarlo en un elemento.
### Insertar textos y enlaces dinámicos
Puede insertar texto generado o parámetros de enlaces basados en el valor de una entrada de formulario/API/dato personalizado.
### Redimensionar un elemento
Puede redimensionar sus elementos en la ventana de vista previa (a la derecha). Coloque el cursor en el borde de un elemento, luego haga clic y arrástrelo para editar sus dimensiones.
También puede modificar estas dimensiones en el panel izquierdo.
#### Redimensionar automáticamente texto y encabezados
Esta opción ajusta automáticamente el tamaño del elemento, de modo que se expande o reduce para ajustarse al contenido del texto.
#### Guías inteligentes
Las guías inteligentes le ayudan a alinear y posicionar elementos tanto vertical como horizontalmente mientras edita su widget.
#### Restringir proporciones
Una vez redimensionado el elemento, puede bloquear sus dimensiones.
Para restringir 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 **candado**.
## Editar los estados de un elemento
Cuando selecciona un elemento, aparecen dos pestañas en la parte superior del menú de edición: **General** y **Estados**.
Seleccione la pestaña **Estados** para encontrar propiedades adicionales que le permiten editar los estados del elemento (Hover, Activo, Deshabilitado).
Por ejemplo, puede personalizar el aspecto de hover de un elemento de encabezado según su estado.
Cuando seleccione la pestaña **Estados**, la vista previa de su widget cambiará a su estado predeterminado si hace clic en la pestaña **General**. Puede elegir el estado predeterminado del elemento en la pestaña **General**.
## Mover un elemento
Arrastre y suelte un elemento en la vista previa para moverlo.
## Rotar un elemento
Si desea rotar un elemento, selecciónelo e introduzca el ángulo de rotación deseado en el parámetro de rotación situado en el panel izquierdo.
## Editar una imagen en el Editor de imágenes
Para editar una imagen en el Editor de imágenes:
1. Vaya a la imagen que desea editar.
2. Seleccione **Abrir en el Editor de imágenes**. Se abrirá el Editor de imágenes.
3. Aplique las ediciones deseadas.
Hay cuatro pestañas disponibles en este editor:
* Marco
* Dibujar
* Formas
* Filtros
En la parte superior derecha del Editor de imágenes, puede ampliar y reducir el zoom, deshacer los cambios, volver a aplicarlos o cambiar la imagen que está editando.
### Marco
Aquí puede redimensionar, recortar o voltear su imagen.
#### Redimensionar
Para redimensionar su imagen:
1. Haga clic en la herramienta **Redimensionar**.
2. Introduzca las dimensiones deseadas o utilice el deslizador para ajustar el tamaño de la imagen.
#### Recortar
Si necesita recortar los bordes de su imagen:
1. Haga clic en la herramienta **Recortar**.
2. Elija una dimensión predefinida o seleccione el área de recorte.
#### Voltear
Puede voltear su imagen horizontal o verticalmente utilizando la herramienta **Voltear**.
### Dibujar
Utilice la herramienta **Dibujar** para dibujar en su imagen. Seleccione el tamaño y el color del pincel para personalizar su dibujo.
### Formas
Inserte formas, como círculos, cuadrados o flechas, con la herramienta **Formas**. Puede ajustar el tamaño, el color y la posición de la forma.
### Filtros
Mejore su imagen con filtros seleccionando la opción **Filtros**. Puede ajustar el brillo, el ruido y el umbral de su imagen.
## Editar el HTML de un elemento de texto
Puede seleccionar cualquier elemento de texto en su widget y editarlo en HTML.
## Animar un elemento
Puede animar un elemento del widget.
Cuando un elemento está seleccionado, puede activar dos parámetros (**Animación de entrada** y **Animación de salida**).
Debe elegir un efecto de animación, una duración y un retraso (opcional). Haga clic en **Previsualizar** para previsualizar su animación.
## Insertar un dato personalizado en un elemento
Puede utilizar datos personalizados en su widget para crear mejores oportunidades de personalización. Con esta opción, puede insertar un valor dinámico en cualquier campo de texto.
Para insertar un valor dinámico en un campo de texto:
1. Seleccione un elemento de texto y haga clic en **dato personalizado** en el panel izquierdo.
2. Seleccione una fuente de datos (un dato personalizado que ya haya creado). Puede atribuir un valor predeterminado a su dato personalizado. Este valor predeterminado se mostrará si el valor de su dato personalizado no está definido o es nulo.
3. Haga clic en **Validar**.
A continuación, puede simular cómo se mostrará el dato personalizado en producción.