HTML-Abschnittsvorlagen individuell gestalten

Voraussetzungen und Ziel des Tutorials

Du benötigst Zugriff auf den HTML-Editor und den Datei-Manager des bluetronix CMS sowie die entsprechenden Entwicklerrechte für den Vorlagenordner. In diesem Tutorial lernst du, wie du vorhandene Seitenabschnitte anpasst, eigene HTML Section Templates anlegst und deinen Redakteuren bei Bedarf ausschließlich freigegebene Vorlagen anbietest.

Wir arbeiten mit den Beispielvorlagen Clients und Banner. Die Standarddateien bleiben unverändert; individuelle Änderungen werden über die Kennzeichnung _own vorgenommen.

1. Seitenabschnittsvorlagen im Editor finden

Öffne eine bestehende CMS-Seite, wähle Editieren und öffne über Einfügen → Seiten-Abschnitt die Vorlagenauswahl. Das Kontextmenü bietet außerdem den Eintrag Text-Baustein für kleinere wiederverwendbare Inhalte. Dieses Tutorial behandelt zunächst die Seitenabschnitte.

Im Fenster Seiten-Abschnitt werden die verfügbaren Vorlagen mit einer Vorschau angezeigt. 

Wähle als Beispiel die Kategorie Clients. Dort stehen mehrere Layoutvarianten bereit.

2. Wo die Vorlagen gespeichert sind

Die Vorlagendateien liegen im Entwicklerordner /bx_Layout/. Öffne im Datei-Manager diesen Ordner. Dort findest du unter anderem Dateien für Seitenabschnitte (Section*.txt) und Textbausteine (Tag*.txt).

Der Dateiname bestimmt die Zuordnung zur Vorlagenauswahl. Eine Seitenabschnittsvorlage beginnt immer mit Section; danach folgt ihr individueller Name. Für eigene Varianten wird vor der Dateiendung der Zusatz _own verwendet.

Du kannst auch eine vollständig neue Vorlage anlegen. Für sie wählst du einen eigenen Namen hinter Section. Wenn keine gleichnamige Standarddatei existiert, erscheint die neue Vorlage zusätzlich, statt eine vorhandene Vorlage zu ersetzen.

3. Warum du Standarddateien nicht direkt bearbeiten solltest

Die mit dem CMS ausgelieferten Standarddateien aus /bx_Layout/ werden bei Systemupdates überschrieben. Änderungen direkt an SectionClients.txt oder SectionBanner.txt sind deshalb nicht dauerhaft. Kopiere die gewünschte Standarddatei und kennzeichne die eigene Fassung mit _own. Die zugehörigen _own-Varianten sind für deine individuellen, updatebeständigen Anpassungen vorgesehen.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Existieren beide Dateien, verwendet das CMS die passende SectionClients_own.txt anstelle der Standardvorlage SectionClients.txt. Du musst dafür die Kategorie Clients im Editor nicht umbenennen.

Erstellst du dagegen eine eigene Datei unter einem neuen Namen, zum Beispiel SectionMyTemplate_own.txt, bleibt die Standardvorlage Clients ebenfalls verfügbar.

4. Aufbau einer HTML Section Template: die Trennmarkierung

Eine Section-Datei kann mehrere Layoutvarianten derselben Kategorie enthalten. Damit der CMS-Editor die einzelnen Varianten erkennt, werden sie mit der folgenden Trennmarkierung voneinander getrennt:

<!--__SP_SectionTemplate__-->

Die Marke steht am Anfang, zwischen den Varianten und am Ende der Beispiel-Datei. Übernimm die Schreibweise exakt. Fehlt die Trennmarkierung, kann der Editor mehrere Varianten nicht zuverlässig als getrennte Auswahl darstellen.

Die Standardvorlage SectionBanner.txt zeigt dieses Prinzip mit mehreren unterschiedlichen Banner-Layouts. Du kannst sie als Grundlage für eine eigene, einfach aufgebaute Section verwenden.

<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
   <div class="container py-3">
      <div class="row align-items-center g-4">
         <div class="col-lg-8 wow fadeInLeft">
            <span class="badge text-bg-warning mb-3">&#x00AD;New&#x00AD;</span>
            <h2 class="mb-2">&#x00AD;Designed for everyday success&#x00AD;</h2>
            <p class="mb-0">&#x00AD;Explore practical solutions created to make everyday work easier, clearer and more effective.&#x00AD;</p>
         </div>
         <div class="col-lg-4 text-lg-end wow fadeInRight">
            <a href="#"><button class="btn btn-light btn-lg">&#x00AD;Learn more&#x00AD;</button></a>
         </div>
      </div>
   </div>
</Section>
<!--__SP_SectionTemplate__-->

Das Beispiel ist eine vollständige Banner-Variante. Für eine zweite Variante setzt du ihren HTML-Code hinter die letzte Trennmarkierung und schließt auch diese Variante wieder mit derselben Markierung ab. Die eigentliche Section kannst du anschließend nach deinen Anforderungen gestalten.

Die Klasse sectionAll musst du nicht selbst ergänzen: Der bluetronix-Editor fügt sie beim Einfügen eines Seitenabschnitts automatisch hinzu.

5. Clients-Vorlage kopieren und die Überschrift ändern

Öffne die vorhandene SectionClients-Vorlage im Dateimanager und sieh dir ihren HTML-Code an. In unserem Beispiel enthält sie eine Überschrift, eine Beschreibung und mehrere Partner-Kacheln.

Kopiere die entsprechende Vorlage als SectionClients_own.txt und öffne die Kopie über Bearbeiten. Füge der Überschrift für unseren Test die Zeichenfolge NEW!!!! hinzu. Du kannst ebenso den Text, die Anzahl der Karten, die Symbole oder das CSS individuell verändern.

<!-- Vorher -->
<h2>&#x00AD;Trusted by growing organizations&#x00AD;</h2>

<!-- Nachher in SectionClients_own.txt -->
<h2>&#x00AD;NEW!!!! Trusted by growing organizations&#x00AD;</h2>

Klicke auf Speichern und öffne anschließend die Auswahl Einfügen → Seiten-Abschnitt → Clients erneut. Dort erkennst du die eigene Version an der geänderten Überschrift. Die zweite Clients-Variante lässt sich unabhängig davon auswählen und bearbeiten.

6. Eigene Vorlage unter neuem Namen anbieten

Du kannst statt einer gleichnamigen Ersatzdatei auch ein separates Template erstellen. Kopiere dafür beispielsweise eine Clients-Variante und speichere sie als SectionMyTemplate_own.txt. Der Teil hinter Section ist der eigene Vorlagenname; dieser bestimmt die neue Auswahl im Editor. Die ursprüngliche Clients-Vorlage wird bei einem anderen Namen nicht ersetzt.

SectionClients.txt          → Standard: Clients
SectionClients_own.txt      → eigene Version von Clients
SectionMyTemplate_own.txt   → zusätzliche eigene Vorlage MyTemplate

So kannst du für einen Kunden feste Abschnitte für bestimmte Seitentypen entwickeln, ohne alle mitgelieferten Vorlagen inhaltlich verändern zu müssen.

7. Mit Only_own.txt ausschließlich eigene Vorlagen anzeigen

Wenn der Endkunde nur deine freigegebenen Vorlagen verwenden soll, lege im Ordner /bx_Layout/ die Flag-Datei Only_own.txt an. Laut der gezeigten Vorlagenkonfiguration werden damit ausschließlich passende eigene Dateien mit dem Zusatz _own in der Vorlagenauswahl angeboten. Die Datei benötigt für diese Funktion keinen HTML-Code.

/bx_Layout/Only_own.txt

Beispiel: Liegen im Verzeichnis SectionClients.txt, SectionBanner.txt und SectionMyTemplate_own.txt, soll die Auswahl nach Aktivierung dieser Einstellung nur noch die passende eigene Vorlage enthalten. Dadurch kannst du einem Kunden eine gezielte, projektbezogene Auswahl bereitstellen.

8. Eigene Tag-Vorlagen für Textbausteine

Das gleiche _own-Prinzip gilt für die kleineren Text-Bausteine. Deren Dateien beginnen mit Tag. Aus TagTemplate.txt wird beispielsweise TagTemplate_own.txt. Diese Variante kannst du über den Eintrag Text-Baustein im Editor bereitstellen.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Bearbeitbare Spalten mit colAll duplizieren

Wenn eine Section mehrere wiederholbare Spalten enthält, kann eine Spalte mit der Klasse colAll als eigenständiger Block erkannt werden. Dadurch steht im Kontextmenü die Funktion Artikel-Spalte → Duplizieren zur Verfügung.

<div class="colAll col-md-6">
   <h2>&#x00AD;Hello world&#x00AD;</h2>
   <p>&#x00AD;Writing&#x00AD;</p>
</div>

Beim Duplizieren wird der betreffende Block als zweite Spalte eingefügt. Für eine wiederholbare Karte oder Artikelspalte musst du colAll deshalb an den richtigen Container setzen. Die übergeordnete sectionAll-Klasse kommt dagegen automatisch vom Editor.

10. Textmarkierungen und mehrsprachige Vorlagen

Die bereitgestellten Standard-Sections enthalten innerhalb der Beispieltexte die Zeichenfolge ­, zum Beispiel vor und nach Überschriften. Diese Textmarkierungen sind nicht mit der Trennmarke <!--__SP_SectionTemplate__--> zu verwechseln. Beim Kopieren vorhandener Vorlagen solltest du solche CMS-Markierungen zunächst beibehalten, wenn das bisherige Editorverhalten erhalten bleiben soll.

<h2>&#x00AD;Designed for everyday success&#x00AD;</h2>

Bei mehrsprachigen Projekten können zusätzliche Übersetzungsmarkierungen sinnvoll sein, damit Redakteure Inhalte in den benötigten Sprachen pflegen können. Das bluetronix CMS ist für 24 Sprachen ausgelegt. Für eine einfache, ausschließlich einsprachige Projektvorlage kannst du nicht benötigte zusätzliche Übersetzungsmarkierungen weglassen; die für den Editor erforderlichen Abschnittstrennmarken müssen erhalten bleiben.

11. Eigene Funktionen und benötigte Includes

Wenn du eine Vorlage um PHP-Funktionen oder Modulausgaben erweiterst, verwende für eigene Funktionen eindeutige Namen. Eine bestehende Funktion darf nicht noch einmal unter demselben Namen deklariert werden. Du kannst die Deklaration beispielsweise mit function_exists() absichern:

if(!function_exists("MyTestFunction")) {
   function MyTestFunction($Test) {
      return $Test;
   }
}

Benötigte Includes sollten mindestens einmal pro Section eingebunden sein. Ein entsprechender Include-Marker kann über den Editor kopiert werden:

<!--bxInclude--/bx_Mod/Blog_Detail-->

Die internen Vorlagendateien mit den Endungen .txt beziehungsweise .bx sind in der beschriebenen CMS-Serverkonfiguration nicht für den direkten Abruf über öffentliche HTTP-/HTTPS-URLs vorgesehen. Sie werden serverseitig gelesen und verarbeitet.

12. Warum eingeschränkte Vorlagen für Redaktionsteams sinnvoll sind

Mit eigenen Sections und Only_own.txt bestimmst du, welche fertigen Layoutbausteine der Endkunde auswählen kann. Zusätzlich lassen sich in den Benutzereinstellungen Editorfunktionen wie Schriftart- oder Farbwechsel einschränken. Die Redakteure können dann vor allem vorgegebene Abschnitte einfügen, Texte bearbeiten und Bilder austauschen, ohne das festgelegte Seitendesign frei umbauen zu müssen.

Diese Arbeitsweise eignet sich besonders für größere Kundenprojekte, Unternehmensportale und Teams mit mehreren Redakteuren. Die Gestaltung bleibt einheitlich, während die Inhalte flexibel gepflegt werden können.

13. Ergebnis und Zusammenfassung

Du öffnest /bx_Layout/, kopierst eine vorhandene Section-Datei, ergänzt _own, passt den HTML-Code an und überprüfst die Ausgabe unter Einfügen → Seiten-Abschnitt. Für neue Auswahlkategorien verwendest du einen eigenen Dateinamen, der mit Section beginnt.

SectionClients.txt
       ↓ kopieren
SectionClients_own.txt
       ↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
       ↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients

Wenn du zusätzlich Only_own.txt aktivierst und die Editorrechte passend einschränkst, können deine Redakteure gezielt mit den bereitgestellten eigenen HTML Section Templates arbeiten.