📖 GLX-HTML-Builder – Anleitung %%GLXHB_VERSION%%

Mit diesem Plugin baust du aufklappbare „Beschreibung lesen…"-Boxen und glimmernde Buttons – ganz ohne HTML-Kenntnisse. Es gibt dafür zwei Wege, die beide zum selben Ergebnis führen.

Wo finde ich das Plugin?

In der linken Admin-Leiste gibt es den Menüpunkt „GLX-HTML-Builder" (Symbol </>). Darunter findest du die Builder-Seite und diese Anleitung. In der Plugin-Liste steht außerdem ein „Öffnen"-Link.

Block 1 – „GLX Aufklapp-Box"

Ein Button, der beim Klick eine Beschreibung auf- und zuklappt.

• Text tippen: Direkt in die Box schreiben. Enter macht eine neue Zeile in derselben Box (kein Aufteilen).
• Formatieren: Text markieren → in der Toolbar F (fett), I (kursiv) und über den kleinen ⌄-Pfeil auch Unterstrichen, Textfarbe und die 5 Highlights (Button-Pille, Feld gelb, Warnung orange, OK grün, Code cyan). Immer nur ein Highlight aktiv.
• Hover-Effekt (im ⌄-Menü, Symbol Auge): lässt markierten Text sich verändern, sobald der Besucher mit der Maus drüberfährt. Es öffnet sich ein eigenes Fenster, das du am blauen Balken verschieben kannst. Darin einstellbar: Farbe (Farbfeld anklicken oder eigenen Hex-Code wie #ff9a3c eintippen), Größe (unverändert / kleiner / größer / groß) und Schriftart (Standard / Serif / Mono / Trebuchet). Das Fenster bleibt beim Einstellen offen – erst Übernehmen wendet alles an, Entfernen nimmt den Hover-Effekt wieder weg, × schließt ohne Änderung.
• Alle Effekte entfernen (im ⌄-Menü, Symbol Radiergummi): setzt den markierten Text in einem Rutsch auf Standard zurück – Fett, Kursiv, Unterstrichen, Textfarbe, Highlight, Hover-Effekt und Links auf einmal. Praktisch, wenn man sich verklickt hat oder Text aus einer anderen Quelle eingefügt hat.
• Box wieder zuklappen: Neben dem Button ganz oben gibt es am Ende der Beschreibung einen zweiten Knopf zum Schließen. Bei langen Texten muss man also nicht erst wieder hochscrollen – nach dem Klick springt die Ansicht automatisch zum Button zurück.
• Rechte Seitenleiste: Button-Text (zu/offen), Button-Farbe, Button-Höhe und Glimmer-Animation.
• Download-Modus: Schalter „Datei herunterladen (statt aufklappen)" an → Feld „Datei-URL" ausfüllen. Der Button lädt dann beim Klick direkt die Datei.

Block 2 – „GLX Button-Gruppe"

Ein Behälter für mehrere Buttons.

• Weitere Buttons: Auf das „+" in der Gruppe klicken – es wird ein weiterer GLX-Button eingefügt.
• Anordnung: Die Gruppe auswählen (auf den gestrichelten Rand klicken) → rechts unter „Anordnung" den Schalter „Buttons nebeneinander (horizontal)" setzen. Aus = untereinander.
• Abstand: Der Regler „Abstand zwischen den Buttons (px)" stellt den Zwischenraum ein.

💡 Tipp: In horizontaler Anordnung legt jedes „+" den neuen Button automatisch daneben; in vertikaler Anordnung darunter. Schaltest du um, wandern alle Buttons mit.

Builder-Seite im Detail

• Allgemeine Einstellungen: Schriftart, Textgröße, Hintergrund, Textfarbe und Akzentfarbe – gelten für alle Boxen.
• Mehrere Boxen: „➕ Weitere Box" fügt hinzu; ▲▼ verschieben, 🗑 entfernen.
• Live-Vorschau rechts zeigt sofort das Ergebnis.

Die Werkzeugleiste über dem Textfeld

• F / K / U – fett, kursiv, unterstrichen. H macht eine Überschrift, daneben liegen Aufzählung und nummerierte Liste.
• A mit Farbfeld – Textfarbe für die Markierung.
• Highlight-Auswahl – dieselben fünf Auszeichnungen wie im Beitrags-Editor: Button-Pille, Feld gelb, Warnung orange, OK grün, Code cyan.
• Hover-Bereich – Farbe, Größe und Schriftart einstellen, dann „Hover ⤴" wendet alles auf die Markierung an.
• „✖ Alle Effekte entfernen" – setzt den markierten Text vollständig auf Standard zurück, inklusive Highlights und Hover-Effekt.

Vom Builder in einen Beitrag oder eine Seite

Das ist der Schritt, der am häufigsten Fragen aufwirft – deshalb hier ganz genau:

1. Auf der Builder-Seite alles fertig gestalten und in der Vorschau rechts prüfen.
2. Im Bereich „📋 HTML-Code" auf „HTML kopieren" klicken. Der komplette Code inklusive Gestaltung liegt jetzt in der Zwischenablage.
3. Den Beitrag oder die Seite öffnen, an der gewünschten Stelle auf „+" klicken und nach „Individuelles HTML" suchen (englisch: Custom HTML).
4. In das Feld des Blocks einfügen (Strg + V) und den Beitrag speichern.
5. Über „Vorschau" im Block sieht man das Ergebnis direkt im Editor; richtig aufklappen und schließen lässt sich die Box aber erst auf der veröffentlichten Seite.

Später etwas ändern? Der eingefügte Code ist eine Momentaufnahme – er bleibt mit der Builder-Seite nicht verbunden. Für Änderungen also erneut im Builder gestalten, neu kopieren und den Inhalt des HTML-Blocks ersetzen. Wer häufig nachbessert, ist mit den beiden Blöcken aus Weg ① besser bedient: die bearbeitet man direkt im Beitrag.

Kleine Hilfe bei Problemen

Nach dem Update auf 2.8.0: Bestehende Aufklapp-Boxen haben den neuen Schließen-Knopf am Ende noch nicht. Einmal „Block-Wiederherstellung" anklicken, dann ist er da.

Meldet ein Block nach einem Update „Block enthält unerwarteten Inhalt", einmal auf „Block-Wiederherstellung" klicken – dann passt er sich der neuen Version an. Deine übrigen Beitragsinhalte bleiben davon unberührt.

← Zurück zum Builder

GLX-HTML-Builder · von Gordon · gordonx.de