HTML-Grundgerüst und Layout einer Seite anpassen

Das Standard-Layout einer neuen Seite

Eine neu erstellte Seite im bluetronix CMS verwendet automatisch das Standard-Layout. Dieses Layout bildet das HTML-Grundgerüst, in dem der Inhalt deiner Webseite angezeigt wird.

Über das Standard-Layout werden beispielsweise automatisch ein Header und ein Footer eingebunden. Auch weitere Elemente wie der Chatbot-Button können Bestandteil dieses Grundgerüsts sein.

Wenn du bestimmte Elemente nicht anzeigen oder eigene Elemente standardmäßig in das Layout integrieren möchtest, kannst du das HTML-Grundgerüst anpassen.

Das HTML-Grundgerüst öffnen

Öffne Layout ⯈ Layout-Html.

Dort findest du die vorhandenen HTML-Grundgerüste beziehungsweise Layout-Definitionen.

Der erste Eintrag ist das Standard-Layout. Dieses Layout wird standardmäßig für neue HTML-Seiten verwendet.

Aufbau des Standard-Layouts

<!DOCTYPE html>
<html class="wide wow-animation" data-bs-theme="__DB_GB_HTMLDarkMode__" lang="__DB_WebSiteLang__">
<head>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   __DB_HeadTitle__
   <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
   <script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
   <link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
</head>
<body>

__DB_Layout_/bx_Header.html__

<main>
   __DB_Layout_Main__
</main>

__DB_Layout_/bx_Footer.html__

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
</body>
</html>

Im Standard-Layout werden unter anderem Header und Footer automatisch eingebunden.

Der eigentliche Inhalt deiner HTML-Seite wird innerhalb des Main-Bereichs beziehungsweise an der Marke __DB_Layout_Main__ eingefügt.

Zusätzlich setzt das bluetronix CMS automatisch verschiedene Werte und Marken. Dazu gehören beispielsweise der Dark Mode von Bootstrap, die Sprache und der Titel der Webseite.

Außerdem werden die benötigten bluetronix-Skripte automatisch ausgeführt.

Das Layout Single Page

Neben dem Standard-Layout steht auch das Layout Single Page zur Verfügung.

Dieses Layout unterscheidet sich vom normalen Standard-Layout. Dort können beispielsweise der Chat-Button und der Cookie-Hinweis ausgeblendet sein.

Damit kannst du für bestimmte Seiten ein anderes Grundgerüst verwenden, ohne das Standard-Layout aller anderen Seiten verändern zu müssen.

Ein eigenes Layout erstellen

Du kannst zusätzlich eigene Layout-Einträge erstellen und damit eigene HTML-Grundgerüste definieren.

In diesem Beispiel erstellen wir einen eigenen Layout-Eintrag mit der Bezeichnung Test-Layout.

Innerhalb dieses Layouts kannst du festlegen, welche Bestandteile standardmäßig auf einer Seite eingebunden werden sollen.

Ein Layout für eine Seite auswählen

Die definierten Layouts kannst du später direkt einer HTML-Seite zuweisen.

Öffne dazu den Editor und gehe zu Seiteneinstellungen.

Tippe auf die Layout-Auswahl. Dort werden dir die vorhandenen Layout-Definitionen angezeigt.

Auch selbst erstellte Layouts wie das Test-Layout werden dort zur Auswahl angeboten.

Das Layout einer Seite wechseln

Wähle das gewünschte Layout aus und tippe anschließend auf Speichern.

Die Seite verwendet danach das ausgewählte Layout-Grundgerüst.

Auf diese Weise kannst du für unterschiedliche Seiten verschiedene Grundgerüste verwenden und beispielsweise festlegen, welche allgemeinen Elemente auf der jeweiligen Seite angezeigt werden.

Zusammenfassung

Das Layout bestimmt das grundlegende HTML-Gerüst einer Seite im bluetronix CMS. Neue Seiten verwenden zunächst das Standard-Layout.

Über Layout ⯈ Layout-Html kannst du vorhandene Layouts ansehen und eigene Layout-Definitionen erstellen. Anschließend kannst du das gewünschte Layout über Seiteneinstellungen ⯈ Layout auswählen und mit Speichern übernehmen.