Area Bricks: Wysiwyg
Ein WYSIWYG (What You See Is What You Get)-Editor in Pimcore ist ein visueller Editor, der es Benutzern ermöglicht, Inhalte zu erstellen und zu bearbeiten, ohne HTML oder andere Programmiersprachen direkt schreiben zu müssen. Stattdessen können Benutzer den Text so formatieren und strukturieren, wie er später auf der Webseite angezeigt wird, ähnlich wie in einer Textverarbeitungssoftware wie Microsoft Word.
Wysiwyg Text
Dies ist das Standard Textfeld und wird für das Einbetten von Texten auf CMS-Seiten verwendet. Der im Textfeld hinterlegte Text kann anhand des Pimcore Editors formatiert werden. Die Funktionsweise des Editors kann mit Microsoft Word verglichen werden und wird nicht spezifisch erklärt.
In den Einstellungen der CMS-Komponente können verschiedene Textfeld Breiten (Width) konfiguriert werden.
Dies ermöglicht auch eine Darstellung von zwei Komponenten nebeneinander.
Wysiwyg Text with Link
Analog Wisiwyg Text, jedoch mit zusätzlichem Call-to-action-Button, der eine Weiterleitung auf eine andere Seite ermöglicht. In den Einstellungen der Komponente ist neben der Breite des Textfelds ist zusätzlich noch die Breite des Buttons (Spacing) konfigurierbar.
Durch Klick auf das Symbol mit dem blauen Stift auf dem Button, kann der Zielpfad konfiguriert werden:
Basis
Auswahl
Erklärung
Text
Text des Call-to-action-Buttons
Pfad
Zielpfad (Hinzufügen via Drag&Drop aus der Baumstruktur oder Einfügen einer URL)
Ziel
Einstellung wie der Pfad geöffnet werden soll:
1. _blank: In neuem Tab öffnen
2. _self: in demselben Tab öffnen
3. _top: im obersten Frame öffnen
4. _parent: im übergeordneten Frame öffnen
Parameter
zusätzliche benutzerdefinierte Attribute zu einem Link hinzuzufügen
Anker
Ein Sprungziel innerhalb derselben Seite setzen
Titel
Der Titel-Attribut des Links, der als Tooltip angezeigt wird, wenn der Benutzer über den Link fährt
Fortgeschritten
Auswahl
Erklärung
Zugangsschlüssel
Ein Zugangsschlüssel ermöglicht es Benutzern, direkt zu einem Link (oder einem anderen HTML-Element) zu springen, indem sie eine bestimmte Tastenkombination verwenden. Dies verbessert die Tastaturzugänglichkeit. Ermöglicht direkten Zugriff auf den Link über eine Tastenkombination.
Definition:
Ein Buchstabe oder eine Zahl, die als Zugangsschlüssel dient.
Nutzung:
Benutzer können den Zugangsschlüssel aktivieren, indem sie in Kombination mit der Alt-Taste (auf Windows) oder der Control-Taste (auf Mac) die definierte Taste drücken. In manchen Browsern kann dies je nach Betriebssystem und Konfiguration variieren.
Verknüpfung +Tabindex
Der tabindex-Wert steuert die Tabulatorreihenfolge von Links und anderen fokussierbaren Elementen auf einer Webseite. Unterstützt die Navigation und Benutzerfreundlichkeit für Tastaturbenutzer.
Positive Werte:
Definieren eine spezifische Reihenfolge. Elemente mit niedrigeren Werten werden zuerst fokussiert.
0:
Das Element folgt der natürlichen Reihenfolge im Dokument.
Negative Werte:
Das Element ist fokussierbar, wird aber nicht in die normale Tab-Reihenfolge aufgenommen.
Klasse
Das class-Attribut wird verwendet, um CSS-Klassen auf ein HTML-Element anzuwenden. Dies ermöglicht es Ihnen, spezifische Stile und Verhaltensweisen auf das Element anzuwenden, die in einer CSS-Datei definiert sind.
Mehrere Klassen: Sie können mehrere Klassen durch Leerzeichen getrennt angeben.
Stilanpassung: Die Klassen können verwendet werden, um das Aussehen und Verhalten des Links zu ändern, z.B. Farbe, Schriftart, Hintergrund, Rahmen, etc.
Wysiwyg Image
Wisiwyg-image erlaubt eine Kombination aus Text und Bild in verschiedenen Darstellungsoptionen.
Titel
Langtext
+
Image right: Bild rechts vom Text darstellen
Image left: Bild Links vom Text darstellen
Image-text ratio: Verhältnis von Bild zu Text in verschiedenen Varianten
Wysiwyg Video
Wisiwyg erlaubt eine Kombination aus Text und Video (nur mp4) in verschiedenen Darstellungsoptionen.
Titel
Langtext
+
Video right: Video rechts vom Text darstellen
Video left: Video Links vom Text darstellen
Video-text ratio: Verhältnis von Video zu Text in verschiedenen Varianten
Wysiwyg Icon
Nebst der gängigen Text-Funktion lässt sich mit Wysiwyg Icon zusätzlich noch eine Illustration / Symbol bzw. Icon darzustellen um die Textinhalte visuell zu unterstützen. Sie findet Anwendung in Navigationen, Menus, Infografiken.
Wysiwyg with Table
Diese Komponente wird ausgebaut und in die Standard Komponente "Wysiwyg Text" integriert
Kategorie Teasers & Lists
Unter Teasers & Lists findet sich eine Sammlung von CMS-Komponenten (Area Bricks), die speziell für die strukturierte oder visuell ansprechende Darstellung von Vorschauinhalten (Teasern) und Listen konzipiert sind. Viele dieser Komponenten nutzen Datenobjekte als flexible und wiederverwendbare Datenquelle, was eine effiziente und zentrale Verwaltung der Inhalte ermöglicht. Datenobjekte sind strukturierte Datenentitäten, die verschiedene Arten von Inhalten repräsentieren können, wie z. B. Produkte, News, Jobs, Events etc. Datenobjekte können somit direkt eingebunden oder referenziert werden. Dies ermöglicht es Benutzern, strukturierte Daten in ihre Inhalte bzw. CMS-Seiten einzufügen, ohne die Struktur oder Konsistenz zu verlieren.
Teaser with link
Die Area Brick "Teaser with Link" ist ein flexibler Content-Baustein in Pimcore, der jeweils einen Teaser mit Verlinkung zu einem weiterführenden Inhalt erstellt. Im Unterschied zu datenobjektbasierten Ansätzen verzichtet dieser Baustein vollständig auf den Einsatz von Datenobjekten und ermöglicht stattdessen die direkte Eingabe von Text, Bild und Link, wodurch Inhalte schnell und unkompliziert erstellt werden können.
Die CMS-Komponente erlaubt eine Pflege eines Titels, Bild für Desktop und Mobile sowie eines Links.
Die Area Brick "Teaser with Link" eignet sich ideal für statische Inhalte, bei denen keine dynamische Datenanbindung erforderlich ist. Für umfangreiche Produktdarstellungen oder regelmäßig aktualisierte, strukturierte Inhalte sind jedoch andere Area Bricks bzw. datenobjektbasierte Ansätze effizienter.
Teaser list with link
Die Area Brick "Teaser List with Link" ist eine Weiterentwicklung der "Teaser with Link" und ermöglicht die Darstellung mehrerer Teaser neben- und untereinander. Wie der Vorgänger verzichtet sie vollständig auf den Einsatz von Datenobjekten und erlaubt die direkte Eingabe von Texten, Bildern und Links. Dadurch lassen sich Inhalte schnell und unkompliziert erstellen, ohne eine dynamische Datenanbindung zu erfordern.
Grundsätzlich funktioniert die CMS-Komponente gleich wie "Teaser with link", jedoch ist das Ganze Element klickbar. Zudem bietet die Komponente eine Reihe von zusätzlichen Konfigurationsmöglichkeiten.
Hinzufügen / Löschen / Verschieben
Durch Klick auf das Grüne + , das rote X oder die Pfeil Symbole lassen sich Teaser erstellen, löschen oder verschieben.
Background Color
Die Hintergrundfarbe des Teasers kann wahlweise weiss oder grau konfiguriert werden.
Columns
Hier kann konfiguriert werden, wie viele Teaser in einer Reihe dargestellt werden sollen
Image Format
Hier kann das Bildformat auf 1:1 oder 16:9 angepasst werden
CTA (Link hinterlegen)
Die Funktion entspricht 1:1 der aus "Teaser with link". Der CTA geht immer über ganze Breite. Default CTA-Text ist “Mehr dazu” sofern man nichts pflegt. Dies kann weiterhin individuell angepasst werden
Titel
Je Teaser kann ein Titel gesetzt werden. Die Schriftart im Titel wurde vergrössert und ist in Grossbuchstaben
Beschrieb
Je Teaser kann ein Kurzbeschrieb hinterlegt werden. Bei mehr als drei Zeilen Text wird mit “…” abgeschnitten. Wenn die Beschreibungstexte gepflegt werden, wird die Kachelhöhe für die gesamte Komponente erhöht
Die Area Brick "Teaser List with Link" eignet sich hervorragend für die Darstellung statischer Inhalte, die neben- oder untereinander angeordnet werden sollen und keine dynamische Datenanbindung erfordern. Für umfangreiche Produktpräsentationen oder regelmäßig aktualisierte, strukturierte Inhalte bieten hingegen datenobjektbasierte Ansätze oder andere Area Bricks eine effizientere Lösung.
Last updated