HTML-basiselementen en lay-out van een pagina aanpassen
Elke nieuw aangemaakte pagina gebruikt in eerste instantie de standaard lay-out van het bluetronix CMS. In deze handleiding leer je hoe deze HTML-basiselementen zijn opgebouwd, hoe je eigen lay-outs definieert en deze vervolgens aan individuele pagina's toewijst.
De standaard lay-out van een nieuwe pagina
Een nieuw gemaakte pagina in het bluetronix CMS gebruikt automatisch de standaardindeling. Deze indeling vormt de HTML-basisstructuur waarin de inhoud van jouw website wordt weergegeven.
Via de standaardindeling worden bijvoorbeeld automatisch een header en een footer geïntegreerd. Ook andere elementen zoals de chatbot-knop kunnen onderdeel van deze basisstructuur zijn.
Als je bepaalde elementen niet wilt weergeven of eigen elementen standaard in de indeling wilt integreren, kun je de HTML-basisstructuur aanpassen.
De HTML-basiselementen openen
Open Indeling ⯈ Indeling-Html.
Daar vind je de aanwezige HTML-basisstructuren of indelingsdefinities.
De eerste vermelding is de Standaardindeling. Deze indeling wordt standaard gebruikt voor nieuwe HTML-pagina's.
Opbouw van de standaardindeling
<!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>In de standaardindeling worden onder andere header en footer automatisch geïntegreerd.
De eigenlijke inhoud van jouw HTML-pagina wordt binnen het hoofdgedeelte of aan het merk __DB_Layout_Main__ ingevoegd.
Bovendien stelt het bluetronix CMS automatisch verschillende waarden en merktekens in. Dit omvat bijvoorbeeld de Dark Mode van Bootstrap, de taal en de titel van de website.
Daarnaast worden de benodigde bluetronix-scripts automatisch uitgevoerd.
De indeling Single Page
Naast de standaardindeling is ook de indeling Single Page beschikbaar.
Deze indeling verschilt van de normale standaardindeling. Daar kunnen bijvoorbeeld de chatknop en de cookie-melding verborgen zijn.
Op deze manier kun je voor specifieke pagina's een andere basisstructuur gebruiken, zonder de standaardindeling van alle andere pagina's te hoeven wijzigen.
Een eigen indeling maken
Je kunt daarnaast eigen indelingsvermeldingen maken en daarmee eigen HTML-basisstructuren definiëren.
In dit voorbeeld maken we een eigen indelingsmelding met de naam Test-indeling.
Binnen deze indeling kun je bepalen welke onderdelen standaard op een pagina moeten worden geïntegreerd.
Een indeling voor een pagina kiezen
De gedefinieerde indelingen kun je later direct aan een HTML-pagina toewijzen.
Open daarvoor de Editor en ga naar Paginainstellingen.
Tik op de indelingsselectie. Daar worden de aanwezige indelingsdefinities weergegeven.
Ook zelf gemaakte indelingen zoals de Test-indeling worden daar aangeboden ter keuze.
De indeling van een pagina veranderen
Kies de gewenste lay-out en tik daarna op Opslaan.
De pagina gebruikt daarna de geselecteerde lay-outstructuur.
Op deze manier kun je voor verschillende pagina's verschillende structuren gebruiken en bijvoorbeeld instellen welke algemene elementen op de respectieve pagina worden weergegeven.
Samenvatting
De lay-out bepaalt de basis HTML-structuur van een pagina in het bluetronix CMS. Nieuwe pagina's gebruiken aanvankelijk de standaardlay-out.
Via Lay-out ⯈ Lay-out-Html kun je bestaande lay-outs bekijken en je eigen lay-outdefinities maken. Daarna kun je de gewenste lay-out kiezen via Paginainstellingen ⯈ Lay-out en met Opslaan toepassen.
FAQ
wat klanten ons vaak vragen
Welke lay-out gebruikt een nieuw aangemaakte pagina?
Een nieuw aangemaakte HTML-pagina gebruikt automatisch de standaard lay-out van het bluetronix CMS.
Waar vind ik de bestaande HTML-lay-outs?
Open Lay-out ⯈ Lay-out-Html. Daar vind je de bestaande lay-outdefinities.
Wat wordt er automatisch gekoppeld via de standaard lay-out?
Via de standaard lay-out kunnen bijvoorbeeld de header, footer en andere algemene elementen zoals de chatbot-knop worden gekoppeld.
Waar wordt de eigenlijke inhoud van mijn HTML-pagina ingevoegd?
De inhoud van de pagina wordt binnen het hoofdgedeelte of aan het merk DB Lay-out Hoofd in de lay-out ingevoegd.
Wat is de lay-out Single Page?
Single Page is een alternatieve lay-outdefinitie. Daar kunnen bijvoorbeeld de chat-knop en de cookie-melding verborgen zijn.
Kan ik een eigen lay-out maken?
Ja. Je kunt een eigen lay-out item maken en daarin je eigen HTML-structuur definiëren.
Hoe wijs ik een andere lay-out aan een pagina toe?
Open de Editor, ga naar Paginainstellingen, kies de gewenste lay-out en tik daarna op Opslaan.
Worden zelfgemaakte lay-outs ook in de Editor weergegeven?
Ja. Eigen lay-outdefinities zoals het in de tutorial gemaakte Test-Lay-out worden ook in de lay-outkeuze weergegeven.