Ein Element auswählen
Der grafische Editor vereinfacht die Elementauswahl. Wenn Sie im Editor über Teile einer Webseite fahren, hebt Kameleoon jedes Element hervor. Doppelklicken Sie auf ein Element, um es auszuwählen.
Element-Details
Bei der Auswahl werden die Details des Elements, wie z. B. sein Tag, angezeigt. Element-Details helfen Ihnen, die Art des Inhalts zu verstehen, mit dem Sie interagieren.Hervorhebung
Sie können auf die Optionen Highlight in preview zugreifen, indem Sie auf das Zahnrad-Symbol klicken. Mit diesen Schaltern können Sie Elemente direkt in der Vorschau mit verschiedenen Farben hervorheben.- Hinzugefügte Elemente: Mit einer Farbe hervorgehoben, um neu hinzugefügte Elemente anzuzeigen.
- Geänderte Elemente: Mit einer anderen Farbe hervorgehoben, um Elemente zu identifizieren, die Sie geändert haben.
Suchen, Sortieren und Filtern
- Die Suchleiste ermöglicht es Ihnen, Elemente nach Namen oder Tag zu finden. Wenn Sie beispielsweise „div” eingeben, gibt die Suche alle
<div>-Elemente und alle Elemente mit „div” im Namen zurück. - Die Sortieroptionen helfen Ihnen, durch lange Listen von Elementen zu navigieren.
- Neueste oben: Sortiert Elemente nach Erstellungs- oder erstem Änderungsdatum, wobei die zuletzt erstellten oder geänderten Elemente oben erscheinen. Diese Sortiermethode respektiert das ursprüngliche Erstellungs- oder erste Änderungsdatum: Unabhängig von zukünftigen Bearbeitungen erscheinen die ältesten Elemente immer noch zuerst.
- Älteste oben: Sortiert Elemente nach Erstellungs- oder erstem Änderungsdatum, wobei die ältesten Elemente oben erscheinen. Diese Methode respektiert die ursprünglichen Erstellungs- oder Änderungsdaten, wie bei Neueste oben.
- Das Element-Panel ermöglicht es Ihnen, Elemente nach bestimmten Kriterien zu filtern, sodass Sie die Liste der Elemente auf die für Ihre aktuelle Aufgabe relevanten eingrenzen können.
Ein anderes verwandtes Element auswählen
Die Funktion Select another relative hilft Ihnen, durch die hierarchische Struktur der Webseitenelemente zu navigieren. Verwenden Sie diese Funktion, wenn Sie ein verwandtes Element auswählen müssen, auf das Sie nicht direkt zugreifen können. Wenn Sie beispielsweise eine Überschrift in einem Banner ausgewählt haben und das gesamte Banner auswählen möchten, klicken Sie auf Select another relative und navigieren Sie zum übergeordneten Element.CSS-Selektoren bearbeiten
Verwenden Sie CSS-Selektoren, um anzugeben, welche Elemente Ihre Änderungen betreffen. Sie können vorhandene Selektoren verfeinern, neue mit KI generieren oder benutzerdefinierten Code manuell eingeben. Um ein Element gezielt anzusprechen, können Sie Standard-Selektortypen (wie Hierarchie, Tag, Klasse oder Inhalt) verwenden oder KI-generierte Selektoren, wenn Sie mit der CSS-Syntax nicht vertraut sind. Manuelle Eingabe ist ebenfalls für präzises Targeting verfügbar, was nützlich ist, wenn ein Element tief verschachtelt ist oder mehrere Klassen mit anderen Elementen teilt.Verfügbare Selektortypen
Die folgende Tabelle beschreibt die verfügbaren Selektortypen, wann sie zu verwenden sind, und ihre potenziellen Risiken:| Selektortyp | Beschreibung | Empfohlene Verwendung | Risiko |
|---|---|---|---|
| AI Generation/Automatic | Generiert automatisch einen Selektor durch Kombination mehrerer Attribute zu einem Fingerabdruck. | Verwenden Sie ihn als Ausgangspunkt oder wenn Sie mit CSS nicht vertraut sind. | Komplexität: Selektoren können lang und bei Fehlschlägen schwer zu debuggen sein. |
| Hierarchy | Identifiziert ein Element anhand seiner exakten Position im DOM (z. B. body > div#main > section > ul > li:first-child). | Verwenden Sie ihn, wenn dem Element eine eindeutige ID oder Klasse fehlt und seine Position statisch ist. | Fragilität: Kleine Layout- oder Container-Änderungen brechen den Selektor oft. |
| Class | Zielt auf Elemente nach ihrem CSS-Klassennamen ab (z. B. .btn-primary oder .promo-banner). | Verwenden Sie ihn, um Gruppen von Elementen mit demselben Design anzuvisieren oder wenn eine eindeutige Klasse vorhanden ist. | Übermäßige Zielausrichtung: Änderungen können unbeabsichtigt andere Elemente betreffen, die die Klasse teilen. |
| Attribute | Zielt auf bestimmte HTML-Attribute ab (z. B. [data-testid="submit-button"]). | Verwenden Sie ihn für präzise Zielausrichtung, insbesondere wenn Testdatenattribute verfügbar sind. | Dynamische Werte: Selektoren brechen, wenn Attribute dynamische Werte enthalten (wie Sitzungs-IDs), die sich ändern. |
| Content | Wählt Elemente basierend auf sichtbarem Textinhalt aus (z. B. :contains("Sign Up")). | Verwenden Sie ihn, wenn sich die Codestruktur häufig ändert, der Text jedoch konstant bleibt. | Lokalisierung: Textaktualisierungen oder Sprachübersetzungen führen zum Versagen des Selektors. |
| Tag | Zielt auf Elemente nur nach HTML-Tag-Namen ab (z. B. <h1>, <a> oder <div>). | Verwenden Sie ihn für globales Styling oder in Kombination mit anderen Selektoren. | Breiter Geltungsbereich: Allein zielt dieser auf viele Elemente und kann Seitenlayouts brechen. |
| Manual | Wendet benutzerdefinierte CSS- oder JS-Selektoren an, die Sie schreiben. | Verwenden Sie ihn, wenn Sie komplexe Logik oder spezifisches Targeting benötigen, das von anderen Typen nicht behandelt wird. | Benutzerfehler: Erfordert CSS-Kenntnisse; Tippfehler oder Website-Updates können das Experiment brechen. |
Ein vorhandenes Element ändern
Sobald ein Element ausgewählt ist, stehen Ihnen mehrere Bearbeitungswerkzeuge zur Verfügung. Die Werkzeuge sind in der Elementsymbolleiste und im rechten Panel zugänglich.Elementsymbolleiste
- Move: Ändern Sie die Position des Elements.
- Resize: Passen Sie die Abmessungen des Elements an.
- Duplicate: Erstellen Sie eine Kopie des ausgewählten Elements.
- Delete: Entfernen Sie das Element von der Seite.
- Edit content: Ändern Sie den Text oder das Bild innerhalb des Elements.
Rechtes Panel
- Content: Bearbeiten Sie den Text, das Bild oder andere Inhalte innerhalb des Elements.
- Text: Passen Sie die Textausrichtung und Zeilenhöhe an und setzen Sie den Text in Kapitälchen, Großbuchstaben oder Kleinbuchstaben.
- Background: Ändern Sie die Hintergrundfarbe oder das Bild des Elements.
- Opacity: Ändern Sie die Deckkraft des Elements.
- Border: Fügen Sie Rahmen hinzu oder ändern Sie deren Farbe, Stil und Breite.
- Shadow: Wenden Sie Schatteneffekte an, um dem Element Tiefe zu verleihen.
- Padding and margin: Feinabstimmung des Abstands um und innerhalb des Elements.
- Device styling rules: Passen Sie an, wie das Element auf verschiedenen Geräten (Desktop, Tablet, Mobil) erscheint.
- CSS and classes: Fügen Sie benutzerdefinierte CSS-Klassen oder -Stile für eine erweiterte Anpassung hinzu.
- Attributes: Bearbeiten Sie HTML-Attribute des Elements.
- HTML content: Ändern Sie den HTML-Inhalt direkt, falls erforderlich.
Ein neues Element hinzufügen
Das Hinzufügen eines neuen Elements im grafischen Editor von Kameleoon ist unkompliziert und ermöglicht umfangreiche Anpassungen, um Ihren Designanforderungen gerecht zu werden.Das Elemente-Panel öffnen
Ein Element zum Hinzufügen auswählen
Sie haben mehrere Optionen wie Text, Überschrift, Bild, Widgets und HTML. Klicken Sie auf den Typ des Elements, das Sie hinzufügen möchten.Position des Elements auswählen
Sie können die Position des neuen Elements relativ zu anderen Elementen wählen. Die Optionen umfassen Inside the page oder Above the page und können auf Relative oder Absolute gesetzt werden. Geben Sie die genaue Position relativ zu einem ausgewählten Referenzelement an (z. B. davor, ersetzen oder danach).Manuelle Positionierung
Für eine präzise Positionierung aktivieren Sie die Option für manuelle Position und geben Sie die oberen, rechten, linken und unteren Werte des Elements in Pixeln an.Das Referenzelement definieren
Sie können den CSS-Selektor des Referenzelements definieren, um das neue Element genau zu positionieren. Klicken Sie auf das Referenzelement im Vorschaubereich oder geben Sie den CSS-Selektor manuell ein.Anzeigeeinstellungen anpassen
Wählen Sie die Anzeigeeinstellungen für verschiedene Geräte (Desktop, Tablet, Mobil). Sie können die Sichtbarkeit des Elements später im linken Panel ändern, falls erforderlich.Den Farbwähler verwenden
Pipette
Verwenden Sie das Pipettenwerkzeug, um eine beliebige Farbe auf der Seite Ihrer Website auszuwählen und sie auf ein anderes Element anzuwenden.Kontrastverhältnis
Im selben Farbwähler können Sie das Kontrastverhältnis der ausgewählten Farbe mit Weiß überprüfen.Vordefinierte Farben mit den auf Ihrer Website verwendeten
Im unteren Teil des Farbwählers finden Sie die Farben, die Sie auf Ihrer Website am häufigsten verwenden. Klicken Sie auf eine, um die Farbe auf ein Element anzuwenden.Erweiterte Aktionen
Zustände
Mit der Funktion „Zustände” können Sie das Aussehen und Verhalten von Elementen basierend auf ihren Interaktionszuständen anpassen. So bearbeiten Sie den Zustand eines Elements:- Klicken Sie auf das Element, das Sie bearbeiten möchten. Die Elementsymbolleiste und das rechte Panel werden geöffnet.
- Klicken Sie auf die Registerkarte State im rechten Panel.
- Wählen Sie den Zustand aus, den Sie dem ausgewählten Element zuweisen möchten: Hovered, Active, Focus oder Disabled.
Geräte-Styling-Regeln
In der rechten Seitenleiste können Sie Styling-Regeln für ein Element definieren, die sich von Gerät zu Gerät unterscheiden können.
Multi-Geräte-Funktion
Sie können die Multi-Geräte-Funktion im grafischen Editor von Kameleoon verwenden, um eine Vorschau anzuzeigen, wie Ihr Design auf verschiedenen Geräten erscheint. Um das Erscheinungsbild Ihrer Website auf verschiedenen Geräten anzuzeigen, klicken Sie oben im Editor auf das Telefon-, Tablet- oder Desktop-Symbol.
Dynamische Elemente aktivieren
Wenn Sie die Unterstützung für dynamische Websites aktiviert haben in Ihren Projekteinstellungen und den Geltungsbereich auf Selected elements im grafischen Editor festgelegt haben, können Sie bestimmte Elemente einbeziehen, indem Sie auf das Drei-Punkte-Menü neben einem geänderten Element klicken und Enable dynamic elements auswählen.
Versteckte Elemente bearbeiten
Um ein klick-ausgelöstes Menü oder Hover-Text auf einer Karte zu bearbeiten:- Aktivieren Sie den Navigationsmodus, indem Sie auf das Symbol in der Kopfzeile klicken.
- Bewegen Sie den Mauszeiger über das Triggerelement oder klicken Sie darauf
- Halten Sie CMD (Mac) oder CTRL (PC) auf Ihrer Tastatur gedrückt.
- Klicken Sie auf das Element.