📖 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.
• Rot, beim Drüberfahren orange (im ⌄-Menü, Symbol Palette): färbt den markierten Text rot; fährt ein Besucher mit der Maus darüber, wechselt er nach orange. Praktisch für Hinweise, die ins Auge fallen sollen.
• 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. In der rechten Seitenleiste unter „Schließen am Ende der Box" lässt sich einstellen, ob er überhaupt erscheint, ob er als Button oder als reiner Text dargestellt wird, ob er links, mittig oder rechts steht und wie er heißen soll (leer lassen übernimmt den Button-Text „Geöffnet").
• 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