> ## 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.
# Primeros pasos con el Graphic editor
> Abra y navegue por el Graphic editor de Kameleoon para crear variaciones de experimentos A/B directamente en su sitio web sin escribir código.
*Vea el [tutorial en vídeo](https://academy.kameleoon.com/get-started-with-web-experimentation/164219) para obtener instrucciones sobre el uso del Graphic Editor.*
El Graphic editor es la herramienta visual y sin código de Kameleoon para crear variaciones de experimentos A/B. Se carga directamente sobre su sitio web en el navegador, lo que le permite hacer clic en cualquier elemento y modificarlo sin escribir código. Puede actualizar textos, sustituir imágenes, cambiar el estilo de los botones y ajustar los diseños, para luego previsualizar y lanzar su experimento de inmediato.
Crear variaciones de prueba normalmente requiere escribir y desplegar código, lo que crea un cuello de botella cuando los gestores de producto, especialistas de marketing o diseñadores dependen de los recursos de ingeniería. El Graphic editor elimina ese cuello de botella para que todo su equipo pueda realizar experimentos de forma independiente.
**Antes de empezar:**
* El Graphic editor no funciona en modo incógnito.
* Cuando las cookies entre sitios están bloqueadas, el Graphic editor no funcionará.
* Firefox bloquea las cookies por defecto. Si utiliza Firefox, debe habilitar las cookies manualmente.
**Mejore el uso del Graphic Editor con la [extensión Kameleoon Graphic Editor](#extensión-kameleoon-graphic-editor).**
Para solucionar problemas con el Graphic Editor y ver las prácticas recomendadas, [consulte el artículo de solución de problemas](./troubleshooting-the-graphic-editor).
## Abrir el Graphic editor
El modo de edición de Kameleoon ofrece las herramientas para crear variaciones de páginas web y lanzar experimentos A/B.
### A través de su sitio web
Para iniciar Kameleoon:
1. Vaya a una página web en la que tenga instalado el script de Kameleoon.
2. Pulse **shift + F2** en Windows o **fn + shift + F2** en Mac.
Si no ocurre nada, añada `#kameleoon=true` al final de su URL.
3. Una vez que Kameleoon se cargue, se abrirá una ventana emergente. Rellene su nombre de usuario y contraseña para acceder al editor.
4. Se abre una ventana emergente que le pide seleccionar un experimento (si ya ha creado uno) o crear uno nuevo. Haga clic en **Create** para crear un experimento.
5. Rellene la información de su experimento y seleccione **Classic A/B** en **Experiment type**.
6. Haga clic en **Start**.
El Graphic editor se abre en su página web.
### A través de la aplicación Kameleoon
También puede iniciar el editor desde la aplicación Kameleoon.
1. Inicie sesión en su [aplicación Kameleoon](https://login.kameleoon.com/app).
2. Haga clic en **New experiment** > **With the graphic editor**.
3. Rellene la información de su experimento y seleccione **Graphic A/B** en **Experiment type**.
4. Haga clic en **Create**.
El Graphic editor se abre en su página web.
## Estructura
### Panel de experimentos (lado izquierdo)
**Función**: gestiona el experimento actual, incluidas las variaciones y los elementos de la página.
**Características**:
* Añadir variaciones y elementos.
* Editar selectores CSS.
* Ver y gestionar elementos presentes en distintas páginas.
### Área principal de edición (centro)
**Función**: permite interactuar directamente con los elementos de la página web para editarlos.
**Características**:
* Seleccionar y modificar texto, imágenes y otros contenidos.
* Acceder a atajos de edición.
### Panel derecho (lado derecho)
**Pestañas:** Design, State, History
**Características**:
* Personalizar contenido, texto, fondo, borde, sombra, padding, margin y más.
* Gestionar estados de los elementos (por ejemplo, default, hovered, active, focus, disabled).
* Gestionar el historial de cambios de cada elemento.
### Barra de herramientas superior
**Función**: ofrece herramientas para visualizar y finalizar los cambios.
**Características**:
* Cambio de modo de dispositivo.
* Simular cambios.
* Finalizar el experimento.
## Personalizar la visualización del Graphic editor
* **Zoom**: ajuste el nivel de zoom para adaptarlo a su pantalla y preferencias.
* **Reduce Left Panel**: minimice el panel izquierdo para aumentar el espacio de trabajo.
* **Hide Left Panel**: oculte completamente el panel izquierdo para una vista sin distracciones.
* **Modo pantalla completa**: amplíe el editor a pantalla completa para una experiencia de edición inmersiva.
## Simulación y finalización
* **Simulación**: haga clic en **SIMULATE** para previsualizar cómo se verán y funcionarán los cambios en su sitio web.
* **Finalización**: haga clic en **FINALIZE** para acceder a los pasos de finalización.
## Cambio de dispositivo
Utilice la barra de herramientas superior para alternar entre distintas vistas de dispositivo (escritorio, tableta, móvil) para asegurarse de que el diseño es adaptable y se muestra correctamente en todos los dispositivos.
## Extensión Kameleoon Graphic editor
Mejore el uso del Graphic Editor con la extensión Kameleoon Graphic Editor.
### Cuándo utilizar la extensión del Graphic editor
* Algunos sitios web restringen el uso de un iframe. Para hacer frente a las restricciones de iframe, utilice la extensión Graphic Editor para anular estas limitaciones e iniciar el Graphic Editor.
* Ciertos sitios web presentan una versión móvil cuando detectan un user agent móvil. Para garantizar que el Graphic Editor muestre correctamente la versión móvil, el navegador debe identificarse como un dispositivo móvil. La extensión facilita el proceso de identificación móvil.
### Cómo instalar la extensión Graphic Editor
[Visite la Chrome Store](https://chromewebstore.google.com/detail/kameleoon-graphical-edito/jglbnpagaignkdmebicmmblgmledhpip) para descargar la extensión Kameleoon Graphic Editor.