INHALTSVERZEICHNIS
- Was sind Selektoren?
- Wie finde ich ein Element im Quellcode?
- Wie kann ich Elemente ansprechen?
- Wir haben den Selektor Picker
Was sind Selektoren?
Bildquelle: Kreativkonzentrat
Bei Selektoren handelt es sich um Aufrufe, mit denen alle Elemente einer Seite spezifisch ausgewählt und angesprochen werden können, basierend auf dem Quelltext der jeweiligen Seite.
Um die Selektoren eines Elements herauszufinden, musst du dir den Quelltext der Seite ansehen.
Um diesen anzuzeigen gibt es mehrere Möglichkeiten:
- Die Tastenkombination Strg+Umschalt+I
- Die Taste F12
- Rechtsklick und dann die Option "Untersuchen"(Chrome) / "Element untersuchen"(Firefox & Microsoft Edge)
Letzteres macht es möglich, die per Rechtsklick ausgewählte Stelle direkt im Quelltext anzuzeigen. Solltest du keine HTML-Kenntnisse haben, ist diese Funktion besondern nützlich, da sie dir das Durchsuchen des Quelltextes nach der entsprechenden Stelle weitestgehend erspart.
Wie finde ich ein Element im Quellcode?
Ist der Quelltext geöffnet gilt es das gesuchte Element zu finden.
Hierbei kann dir die Schaltfläche in der linken oberen Ecke des Quelltext-Fensters helfen.
Ist diese aktiv, wird auf der Website das jeweilige Element markiert über dem du dich mit der Maus befindest. So kannst du das gewünschte Element leicht finden und indem du es anklickst navigiert der Quelltext automatisch an die richtige Stelle.
Wenn du außerdem im Quelltext mit der Maus über einzelne Abschnitte fährst, werden die Elemente für die diese stehen auf der Seite ebenfalls markiert. Mit diesen Hilfsmitteln solltest Du in der Lage sein das von dir gesuchte Element im Quelltext zu finden.
Wie kann ich Elemente ansprechen?
Nun gilt es herauszufinden, mit welchen Selektoren das Element angesprochen werden kann. Wenn du dir die Elemente im Quelltext ansiehst, wirst du feststellen, dass viele den Anhang "class=" oder "id=" haben. Über diese Attribute kannst du die Elemente nun letztendlich ansprechen.
Eine id kann nur einmal vergeben werden und ist daher eine eindeutige Identifikationsmöglichkeit für ein Element. Der Selektor für eine id wird mit dem Raute(#)-Symbol markiert.
Angenommen, du möchtest ein Element, welches das Attribut "id="a-simple-id"" besitzt, aus dem Quelltext selektieren, musst du an der entsprechenden Schnittstelle "#a-simple-id" eingeben.
Klassen verhalten sich etwas anders als ids, da diese auch mehrmals vergeben werden können. Somit werden Klassen dazu verwendet, mehrere Elemente auf einmal anzusprechen. Solltest du daher ein einzelnes Element ansprechen wollen solltest du besser zum id-Attribut greifen, falls vorhanden.
Klassen und ids werden auf die gleiche Weise selektiert, hier wird allerdings anstatt dem Raute-Symbol ein Punkt(.) verwendet. Sollte ein Element übrigens mehrere Klassen haben, sind diese durch ein Leerzeichen getrennt.
Wir haben den Selektor Picker
In einigen Plugins (es werden laufend mehr) haben wir bereits unseren Selektor Picker eingebaut.
Damit ist die Wahl der Selektoren noch einfacher. Im Auswahlfeld für Selektoren findest du jeweils am Zeilenende einen Knopf mit einem Fadenkreuz darauf (Selektor Picker).
Über diesen kommst du in einen Auswahlmodus, der das Shop-Frontend lädt.
Dort navigierst du zu der Seite, auf der du das jeweilige Element einbinden willst, wählst dann im Fenster oben rechts "Picker aktivieren" aus und klickst dann auf das Element, dessen Selektor du auswählen willst.
Die Elemente werden jeweils umranded. Hast du einen Selektor ausgewählt, kannst du noch über das DropDown-Menü darunter die Position bestimmen und dann mittels dem "Übernehmen"-Knopf zum Backend zurückkehren.
Der Selektor Picker wird dir u.U. auch so im Shop Frontend angezeigt, also wenn du ganz normal durch den Shop navigierst.
Tags: