Importa layout Bootstrap-5
Scopri l'importazione completa del layout: dal controllo di Bootstrap-5 e del file ZIP, fino al processo automatico e al controllo del layout importato nell'editor.
Obiettivo del tutorial
Imparerai come importare un layout Bootstrap-5 come file ZIP nel CMS bluetronix, controllare l'importazione e successivamente verificare le immagini del layout, l'HTML del layout, CSS/JS e i modelli di sezioni di pagina generati.
Importante: Utilizza un layout Bootstrap-5 per l'importazione che soddisfi i requisiti descritti di seguito. L'importazione effettiva può richiedere fino a 15 minuti.
1. Importa - Apri layout
Apri nella CMS la sezione Layout e poi seleziona Importa - Layout.
2. Seleziona file ZIP
Nella finestra Importa - Layout, fai clic su Seleziona file ZIP. Con questa funzione apri il file manager e puoi selezionare il file ZIP del tuo layout Bootstrap-5.
Inoltre, sono disponibili immagini tematiche che possono essere utilizzate in seguito come sostituti delle immagini del layout, se le immagini originali non devono essere utilizzate.
3. Apri cartella bx_Import
Nel file manager, apri successivamente la cartella sviluppatore bx_Import. Questa cartella è utilizzata per caricare il file ZIP da importare.
4. Carica layout.zip
Adesso carica il tuo file ZIP nella cartella bx_Import. Nel nostro esempio, il file si chiama Layout.zip. Seleziona poi questo file per l'importazione del layout.
5. Requisiti per il layout Bootstrap-5
Il CMS verifica prima dell'importazione se nella cartella ZIP può essere trovata una struttura Bootstrap-5 adeguata. Troverai i requisiti completi e le estensioni file supportate nella seguente panoramica tecnica.
Detecting and Importing a Bootstrap Layout
When importing a layout, the system first checks whether it is a valid Bootstrap layout.
1. Detecting a Bootstrap Layout
For a layout to be recognized and imported as a Bootstrap layout, two requirements must be met:
1. A Bootstrap CSS file must be present.
2. An index.html or index.htm file must exist at the corresponding directory level.
The following files, for example, are recognized as Bootstrap files:
bootstrap.css
bootstrap.min.css
bootstrap-grid.css
bootstrap-grid.min.css
bootstrap-reboot.css
bootstrap-*.css
In general, the system searches for a file whose name matches the following pattern:
bootstrap***.css
The file must belong to Bootstrap version 5.
Example 1
/index.html
/assets/css/bootstrap.min.css
The layout is recognized. The index.html file is located at the root level, while the Bootstrap file is located in:
/assets/css/
Example 2
/index.html
/assets/css/bootstrap.css
This layout is also recognized.
Example 3
/index.html
/css/bootstrap.min.css
A Bootstrap file located in the /css/ directory is also recognized.
Important:
Once a matching index.html or index.htm file and a Bootstrap CSS file have been found, that directory level is used as the starting point of the layout. From this level onward, the required files are extracted from the ZIP archive and processed.
2. Which Files Are Imported?
During the import process, only supported file types are included.
HTML Files
.html
.htm
JavaScript and CSS Files
.js
.mjs
.css
Fonts
.woff
.woff2
.ttf
.otf
.eot
Images and Graphics
.svg
.jpg
.jpeg
.jpg
.webp
.avif
.gif
.ico
Video Files
.mp4
.webm
Audio Files
.mp3
.ogg
.wav
Data Files
.json
Documents
.pdf
All other file extensions are excluded from the layout import process.
6. Controlla i passaggi di importazione
Dopo aver selezionato il file ZIP, il CMS mostra sotto le immagini tematiche i vari passaggi che vengono eseguiti durante l'importazione. Controlla questa panoramica prima di avviare l'importazione.
L'importazione nella versione mostrata comprende i seguenti passaggi:
- Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
- HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
- Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
- index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
- Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
- Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
- CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.
7. Avvia importazione
Fai clic su Importa. Il CMS avvisa che l'importazione può richiedere fino a 15 minuti e la finestra non deve essere chiusa durante questo tempo.
Conferma il messaggio con OK. Successivamente, inizia l'importazione del layout.
8. Controlla importazione completata
Al termine dell'importazione, appare inizialmente il messaggio che il layout è stato importato con successo.
Successivamente, puoi controllare se tutti i singoli passaggi di elaborazione sono stati completati con successo. I passaggi eseguiti con successo saranno contrassegnati in verde.
9. Controlla nuovo layout sul sito web
Chiudi la finestra di importazione e torna alla homepage del tuo sito web. Subito dopo l'importazione, potrebbe essere visibile ancora la rappresentazione precedente.
Se necessario, fai clic su Ricarica. Dopo, dovrebbe essere visualizzato il layout importato. Confronta la rappresentazione con il layout originale che volevi importare.
10. Controlla le immagini importate
Apri poi Layout → Importa - Immagini. Qui puoi controllare quali immagini sono state trasferite dal layout importato o sostituite con immagini tematiche.
Il CMS mostra immagini per cui mancano informazioni sulla licenza o sulla fonte. Controlla attentamente questi avvisi e decidi se le immagini possono essere riutilizzate o se devono essere sostituite con immagini tematiche appropriate.
Se non desideri utilizzare le immagini originali esistenti, puoi selezionare immagini tematiche adatte o creare immagini tematiche proprie. Dopo la sostituzione, il layout dovrebbe essere controllato visivamente di nuovo.
11. Controllare l'HTML del layout
Apri sotto Layout la sezione Layout - HTML. Qui puoi controllare la struttura HTML di base generata dall'import.
Nel database layout puoi vedere il codice HTML importato. Controlla qui in particolare se la struttura di base è completamente presente e se i marcatori CMS necessari sono stati trasferiti nel layout.
12. Verificare i file CSS e JavaScript importati
Apri successivamente Layout → Importa - CSS JS.
Qui puoi vedere le risorse CSS, JavaScript e altre che sono state riconosciute durante l'importazione. Se una risorsa è contrassegnata come Fonti esterne, non verrà caricata esclusivamente localmente dal layout importato. Dovresti controllare e gestire attentamente tali collegamenti esterni prima della pubblicazione.
13. Testare la modifica nell'editor
Apri la pagina importata nell'editor e controlla se i contenuti possono essere modificati come previsto. Testa in particolare testi, link, immagini e aree ripetibili.
14. Controllare i modelli di sezioni di pagina generati
Apri nell'editor Inserisci → Sezione pagina. L'importazione genera categorie di template aggiuntive dal layout originale. Queste includono Intestazione layout, Corpo layout e Piè di pagina layout.
Se ad esempio scegli Corpo layout, le sezioni principali estratte dal layout originale verranno visualizzate come modelli singoli. Puoi quindi inserirle liberamente nelle pagine e modificarle ulteriormente.
15. Controllo finale
Dopo l'importazione dovresti controllare completamente il risultato: visualizzazione layout, immagini, HTML, CSS/JS, risorse esterne, modificabilità e i modelli di sezione pagina generati. Solo quando queste verifiche sono completate dovresti iniziare con l'ulteriore adattamento dei contenuti del layout importato.
FAQ
cosa ci chiedono spesso i clienti
Quali layout possono essere importati?
L'importazione è prevista per i layout Bootstrap 5. Il CMS cerca un file CSS Bootstrap corrispondente e un file index.html o index.htm al livello di cartella appropriato.
Dove avvio l'importazione del layout?
Apri nell CMS la sezione Layout e seleziona Importa - Layout.
In quale cartella verrà trasferito il file ZIP?
Il file ZIP del layout selezionato verrà utilizzato nella sezione sviluppatore bx_Import.
Quali file di Bootstrap vengono riconosciuti?
Vengono riconosciuti file CSS di Bootstrap come bootstrap.css, bootstrap.min.css e altri file secondo lo schema bootstrap***.css. Per questo tutorial deve trattarsi di Bootstrap 5.
Quali tipi di file vengono importati?
Vengono importati i tipi di file HTML, CSS, JavaScript, Font, Immagine, Video, Audio, JSON e PDF elencati nel tutorial. Altre estensioni di file non vengono trasferite.
Quanto tempo può richiedere l'importazione?
L'avviso visualizzato indica una possibile durata di fino a 15 minuti. La finestra di importazione non deve essere chiusa nel frattempo.
Come riconosco un'importazione riuscita?
I singoli passaggi di importazione vengono evidenziati in verde e successivamente appare il messaggio che il layout è stato importato con successo.
Cosa faccio se dopo l'importazione viene mostrato ancora il vecchio layout?
Torna alla homepage e, se necessario, utilizza Ricarica. Dopo, dovrebbe essere visualizzato il nuovo layout importato.
Dove controlla le immagini importate?
Apri Layout → Importa - Immagini. Lì puoi controllare le immagini originali, le immagini tematiche e le informazioni su licenza e fonte.
Dove controllo il codice HTML importato?
Sotto Layout → Layout - HTML puoi controllare la struttura HTML generata nel record del layout.
Dove controllo le risorse CSS e JavaScript?
Apri Layout → Import - CSS JS. Lì vedrai le risorse riconosciute durante l'importazione e possibili indicazioni su fonti esterne.
Quali modelli di sezioni della pagina vengono generati dal layout?
L'importazione fornisce modelli nelle categorie Layout-Header, Layout-Main e Layout-Footer.
Cosa dovrei testare infine dopo l'importazione?
Controlla la visualizzazione del layout, immagini, HTML, CSS/JS, risorse esterne, la modificabilità nell'editor e i modelli di sezioni della pagina generati.