Seleccionar un elemento
El Graphic Editor simplifica la selección de elementos. Cuando pasa el cursor sobre partes de una página web en el editor, Kameleoon resalta cada elemento. Haga doble clic en un elemento para seleccionarlo.
Detalles del elemento
Al seleccionarlo, se muestran los detalles del elemento, como su etiqueta. Los detalles del elemento le ayudan a comprender el tipo de contenido con el que está interactuando.Resaltado
Puede acceder a las opciones de Highlight in preview haciendo clic en el icono de engranaje. Estos interruptores le permiten resaltar elementos directamente en la vista previa con distintos colores.- Elementos añadidos: resaltados con un color para mostrar los elementos recién añadidos.
- Elementos modificados: resaltados con otro color para identificar los elementos que ha modificado.
Búsqueda, ordenación y filtrado
- La barra de búsqueda le permite encontrar elementos por nombre o etiqueta. Por ejemplo, si escribe “div”, la búsqueda devolverá todos los elementos
<div>y cualquier elemento con “div” en su nombre. - Las opciones de ordenación le ayudan a navegar por listas largas de elementos.
- Newest on top: ordena los elementos por su fecha de creación o primera modificación, con los elementos creados o modificados más recientemente en la parte superior. Este método de ordenación respeta la fecha original de creación o primera modificación: independientemente de las ediciones futuras, los elementos más antiguos siguen apareciendo primero.
- Oldest on top: ordena los elementos por su fecha de creación o primera modificación, con los elementos más antiguos en la parte superior. Este método respeta las fechas originales de creación o modificación, como en Newest on top.
- El panel de elementos le permite Filter elementos según criterios específicos, para restringir la lista a aquellos relevantes para su tarea actual.
Seleccionar otro relativo
La función Select another relative le ayuda a navegar por la estructura jerárquica de los elementos de la página web. Utilice esta función cuando necesite seleccionar un elemento relacionado al que no pueda acceder directamente. Por ejemplo, si ha seleccionado un encabezado dentro de un banner y desea seleccionar el banner completo, haga clic en Select another relative y navegue hasta el elemento padre.Editar selectores CSS
Utilice los selectores CSS para especificar a qué elementos afectan sus cambios. Puede refinar los selectores existentes, generar nuevos con IA o introducir manualmente código personalizado. Para apuntar a un elemento, puede utilizar tipos de selectores estándar (como jerarquía, etiqueta, clase o contenido), o utilizar selectores generados por IA si no está familiarizado con la sintaxis CSS. La entrada manual también está disponible para un targeting preciso, lo que es útil cuando un elemento está profundamente anidado o comparte varias clases con otros elementos.Tipos de selectores disponibles
La siguiente tabla describe los tipos de selectores disponibles, cuándo utilizarlos y sus posibles riesgos:| Tipo de selector | Descripción | Uso recomendado | Riesgo |
|---|---|---|---|
| AI Generation/Automatic | Genera automáticamente un selector combinando varios atributos en una huella digital. | Utilícelo como punto de partida o si no está familiarizado con CSS. | Complejidad: los selectores pueden ser largos y difíciles de depurar si fallan. |
| Hierarchy | Identifica un elemento según su posición exacta en el DOM (por ejemplo, body > div#main > section > ul > li:first-child). | Utilícelo cuando el elemento carece de un ID o clase único y su posición es estática. | Fragilidad: pequeños cambios de diseño o contenedor a menudo rompen el selector. |
| Class | Apunta a elementos por su nombre de clase CSS (por ejemplo, .btn-primary o .promo-banner). | Utilícelo para apuntar a grupos de elementos con el mismo diseño o cuando existe una clase única. | Sobre-targeting: los cambios podrían afectar involuntariamente a otros elementos que compartan la clase. |
| Attribute | Apunta a atributos HTML específicos (por ejemplo, [data-testid="submit-button"]). | Utilícelo para un targeting preciso, especialmente cuando hay atributos de prueba de datos disponibles. | Valores dinámicos: los selectores se rompen si los atributos contienen valores dinámicos (como IDs de sesión) que cambian. |
| Content | Selecciona elementos según el contenido de texto visible (por ejemplo, :contains("Sign Up")). | Utilícelo cuando la estructura del código cambia con frecuencia, pero el texto permanece constante. | Localización: las actualizaciones de texto o traducciones de idioma hacen que el selector falle. |
| Tag | Apunta a elementos solo por nombre de etiqueta HTML (por ejemplo, <h1>, <a> o <div>). | Utilícelo para estilos globales o en combinación con otros selectores. | Alcance amplio: por sí solo apunta a muchos elementos y puede romper los diseños de página. |
| Manual | Aplica selectores CSS o JS personalizados que usted escribe. | Utilícelo cuando necesite lógica compleja o un targeting específico no gestionado por otros tipos. | Error de usuario: requiere conocimientos de CSS; errores tipográficos o actualizaciones del sitio pueden romper el experimento. |
Modificar un elemento existente
Una vez seleccionado un elemento, dispone de varias herramientas de modificación. Las herramientas son accesibles en la barra de herramientas del elemento y en el panel derecho.Barra de herramientas del elemento
- Move: cambia la posición del elemento.
- Resize: ajusta las dimensiones del elemento.
- Duplicate: crea una copia del elemento seleccionado.
- Delete: elimina el elemento de la página.
- Edit content: modifica el texto o la imagen dentro del elemento.
Panel derecho
- Content: edita el texto, la imagen u otro contenido dentro del elemento.
- Text: ajusta la alineación del texto, la altura de línea y aplica capitalización, mayúsculas o minúsculas.
- Background: cambia el color o la imagen de fondo del elemento.
- Opacity: cambia la opacidad del elemento.
- Border: añade bordes o modifica su color, estilo y ancho.
- Shadow: aplica efectos de sombra para dar profundidad al elemento.
- Padding and margin: ajusta el espaciado alrededor y dentro del elemento.
- Device styling rules: personaliza cómo aparece el elemento en distintos dispositivos (escritorio, tableta, móvil).
- CSS and classes: añade clases CSS o estilos personalizados para una personalización más avanzada.
- Attributes: edita los atributos HTML del elemento.
- HTML content: modifica directamente el contenido HTML si es necesario.
Añadir un nuevo elemento
Añadir un nuevo elemento en el Graphic Editor de Kameleoon es sencillo y permite una amplia personalización para adaptarse a sus necesidades de diseño.Abrir el panel de elementos
Elegir un elemento para añadir
Tiene varias opciones como Text, Heading, Image, Widgets y HTML. Haga clic en el tipo de elemento que desea añadir.Seleccionar la posición del elemento
Puede elegir la posición del nuevo elemento en relación con otros. Las opciones incluyen Inside the page o Above the page, y pueden establecerse como Relative o Absolute. Especifique la posición exacta en relación con un elemento de referencia seleccionado (por ejemplo, antes, reemplazar o después).Posicionamiento manual
Para un posicionamiento preciso, habilite la opción de posición manual y especifique los valores top, right, left y bottom del elemento en píxeles.Definir el elemento de referencia
Puede definir el selector CSS del elemento de referencia para posicionar el nuevo elemento con precisión. Haga clic en el elemento de referencia en la zona de vista previa o introduzca manualmente el selector CSS.Ajustar la configuración de visualización
Elija la configuración de visualización para los distintos dispositivos (escritorio, tableta, móvil). Puede modificar la visibilidad del elemento en el panel izquierdo más tarde si es necesario.Usar el selector de color
Cuentagotas
Utilice la herramienta cuentagotas para seleccionar cualquier color de la página de su sitio y aplicarlo a otro elemento.Ratio de contraste
En el mismo selector de color, puede comprobar la relación de contraste del color seleccionado con el blanco.Colores preestablecidos con los utilizados en su sitio
En la parte inferior del selector de color, encontrará los colores que más utiliza en su sitio. Haga clic en uno para aplicarlo a un elemento.Acciones avanzadas
Estados
La función de estados le permite personalizar la apariencia y el comportamiento de los elementos en función de sus estados de interacción. Para editar el estado de un elemento:- Haga clic en el elemento que desea editar. Se abren la barra de herramientas del elemento y el panel derecho.
- Haga clic en la pestaña State del panel derecho.
- Seleccione el estado que desea asignar al elemento seleccionado: Hovered, Active, Focus o Disabled.
Reglas de estilo por dispositivo
En la barra lateral derecha, puede definir reglas de estilo para un elemento que pueden diferir de un dispositivo a otro.
Función multidispositivo
Puede utilizar la función multidispositivo en el Graphic Editor de Kameleoon para previsualizar cómo aparece su diseño en distintos dispositivos. Para ver la apariencia de su sitio web en distintos dispositivos, haga clic en el icono de teléfono, tableta o escritorio en la parte superior del editor.
Habilitar elementos dinámicos
Si ha habilitado el soporte para sitios web dinámicos en la configuración de su proyecto y ha establecido el alcance en Selected elements en el Graphic editor, puede incluir elementos específicos haciendo clic en el menú de tres puntos junto a un elemento modificado y seleccionando Enable dynamic elements.
Editar elementos ocultos
Para editar un menú activado por clic o el texto al pasar el cursor sobre una tarjeta:- Entre en el modo de navegación haciendo clic en el icono del header.
- Pase el cursor o haga clic en el elemento que activa el desplegable
- Mantenga presionada CMD (Mac) o CTRL (PC) en su teclado.
- Haga clic en el elemento.