Adattare la struttura HTML e il layout di una pagina
Ogni nuova pagina creata utilizza inizialmente il layout standard del bluetronix CMS. In questo tutorial scoprirai come è strutturato questo modello HTML, come definire layout personali e come assegnarli successivamente a singole pagine.
Il layout standard di una nuova pagina
Una pagina appena creata nel CMS bluetronix utilizza automaticamente il layout standard. Questo layout costituisce la struttura HTML di base in cui viene visualizzato il contenuto del tuo sito web.
Nel layout standard vengono automaticamente inclusi ad esempio un'intestazione e un piè di pagina. Anche ulteriori elementi come il pulsante del chatbot possono far parte di questa struttura di base.
Se desideri nascondere determinati elementi o integrare elementi personalizzati nel layout di default, puoi modificare la struttura HTML di base.
Aprire la struttura HTML
Apri Layout ⯈ Layout-Html.
Lì troverai le strutture HTML di base esistenti, ossia le definizioni del layout.
La prima voce è il layout standard. Questo layout è utilizzato di default per le nuove pagine HTML.
Struttura del layout standard
<!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>Nel layout standard vengono automaticamente inclusi tra l'altro l'intestazione e il piè di pagina.
Il contenuto effettivo della tua pagina HTML viene inserito all'interno della sezione Main, ossia nel marker __DB_Layout_Main__.
Inoltre, il CMS bluetronix imposta automaticamente diversi valori e marcatori. Questi includono ad esempio la modalità scura di Bootstrap, la lingua e il titolo del sito web.
In aggiunta, gli script necessari di bluetronix vengono eseguiti automaticamente.
Il layout Single Page
Insieme al layout standard è disponibile anche il layout Single Page.
Questo layout si distingue dal normale layout standard. Ad esempio, lì il pulsante di chat e l'avviso sui cookie possono essere nascosti.
In questo modo puoi utilizzare una struttura di base diversa per determinate pagine, senza dover modificare il layout standard di tutte le altre pagine.
Creare un layout personalizzato
Puoi inoltre creare voci di layout personalizzate e definire così le tue strutture HTML di base.
In questo esempio creiamo una voce di layout personalizzata con la denominazione Test-Layout.
All'interno di questo layout puoi specificare quali componenti devono essere inclusi di default su una pagina.
Selezionare un layout per una pagina
I layout definiti possono essere assegnati direttamente a una pagina HTML in seguito.
Per fare ciò, apri il Editor e vai a Impostazioni della pagina.
Tocca la selezione del layout. Lì verranno visualizzate le definizioni del layout esistenti.
Anche i layout creati da te, come il Test-Layout, saranno offerti per la selezione.
Cambiare il layout di una pagina
Seleziona il layout desiderato e poi fai clic su Salva.
La pagina userà quindi la struttura di layout selezionata.
In questo modo puoi utilizzare diverse strutture di base per pagine differenti e, ad esempio, definire quali elementi generali vengono mostrati su ciascuna pagina.
Riepilogo
Il layout determina la struttura HTML di base di una pagina nel bluetronix CMS. Le nuove pagine utilizzano inizialmente il layout standard.
Attraverso Layout ⯈ Layout-Html puoi visualizzare i layout esistenti e creare le tue definizioni di layout. Puoi quindi selezionare il layout desiderato tramite Impostazioni pagina ⯈ Layout e fare clic su Salva per applicarlo.
FAQ
cosa ci chiedono spesso i clienti
Quale layout utilizza una nuova pagina creata?
Una nuova pagina HTML utilizza automaticamente il layout standard del bluetronix CMS.
Dove posso trovare i layout HTML esistenti?
Apri Layout ⯈ Layout-Html. Lì troverai le definizioni di layout esistenti.
Cosa viene automaticamente incluso con il layout standard?
Attraverso il layout standard possono essere inclusi, ad esempio, intestazioni, piè di pagina e altri elementi generali come il pulsante del chatbot.
Dove viene inserito il contenuto effettivo della mia pagina HTML?
Il contenuto della pagina viene inserito all'interno dell'area principale o nel tag DB Layout Main nel layout.
Cos'è il layout Single Page?
Single Page è una definizione di layout alternativa. Qui possono essere nascosti, ad esempio, il pulsante di chat e il messaggio sui cookie.
Posso creare un layout personalizzato?
Sì. Puoi creare una tua voce di layout e definire la tua struttura HTML di base.
Come assegno un altro layout a una pagina?
Apri l'Editor, vai su Impostazioni pagina, seleziona il layout desiderato e fai clic su Salva.
I layout creati personalmente vengono mostrati anche nell'editor?
Sì. Le tue definizioni di layout, come il Test-Layout creato nel tutorial, vengono mostrate anche nella selezione dei layout.