Bootstrap-5-Layout importieren
Lerne den vollständigen Layout-Import kennen: von der Bootstrap-5-Prüfung und ZIP-Datei über die automatische Verarbeitung bis zur Kontrolle des importierten Layouts im Editor.
Ziel des Tutorials
Du lernst, wie du ein Bootstrap-5-Layout als ZIP-Datei in das bluetronix CMS importierst, den Import prüfst und anschließend Layout-Bilder, Layout-HTML, CSS/JS sowie die erzeugten Seitenabschnittsvorlagen kontrollierst.
Wichtig: Verwende für den Import ein Bootstrap-5-Layout, das die unten beschriebenen Voraussetzungen erfüllt. Der eigentliche Import kann bis zu 15 Minuten dauern.
1. Import - Layout öffnen
Öffne im CMS den Bereich Layout und wähle anschließend Import - Layout.
2. ZIP-Datei auswählen
Im Fenster Import - Layout klickst du auf ZIP-Datei auswählen. Über diese Funktion öffnest du den Datei-Manager und kannst die ZIP-Datei deines Bootstrap-5-Layouts auswählen.
Zusätzlich stehen dir Themenbilder zur Verfügung, die später als Ersatz für Layout-Bilder verwendet werden können, wenn die Originalbilder nicht weiterverwendet werden sollen.
3. Ordner bx_Import öffnen
Im Datei-Manager öffnest du anschließend den Entwicklerordner bx_Import. Dieser Ordner wird für die Bereitstellung der zu importierenden ZIP-Datei verwendet.
4. Layout.zip hochladen
Lade jetzt deine eigene ZIP-Datei in den Ordner bx_Import hoch. In unserem Beispiel heißt die Datei Layout.zip. Wähle anschließend diese Datei für den Layout-Import aus.
5. Voraussetzungen für das Bootstrap-5-Layout
Das CMS prüft vor dem Import, ob im ZIP-Archiv eine passende Bootstrap-5-Struktur gefunden werden kann. Die vollständigen Voraussetzungen und die unterstützten Dateiendungen findest du im folgenden technischen Überblick.
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. Import-Schritte kontrollieren
Nachdem du die ZIP-Datei ausgewählt hast, zeigt das CMS unterhalb der Themenbilder die einzelnen Schritte an, die während des Imports ausgeführt werden. Prüfe diese Übersicht, bevor du den Import startest.
Der Import umfasst in der gezeigten Version folgende Schritte:
- 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. Import starten
Klicke auf Importieren. Das CMS weist darauf hin, dass der Import bis zu 15 Minuten dauern kann und das Fenster währenddessen nicht geschlossen werden darf.
Bestätige den Hinweis mit OK. Anschließend startet der Import des Layouts.
8. Erfolgreichen Import prüfen
Nach Abschluss des Imports erscheint zunächst die Meldung, dass das Layout erfolgreich importiert wurde.
Anschließend kannst du kontrollieren, ob alle einzelnen Verarbeitungsschritte erfolgreich abgeschlossen wurden. Erfolgreich ausgeführte Schritte werden grün markiert.
9. Neues Layout auf der Webseite kontrollieren
Schließe das Importfenster und kehre zur Startseite deiner Webseite zurück. Direkt nach dem Import kann zunächst noch die vorherige Darstellung sichtbar sein.
Klicke bei Bedarf auf Reload. Anschließend sollte das importierte Layout angezeigt werden. Vergleiche die Darstellung mit dem ursprünglichen Layout, das du importieren wolltest.
10. Importierte Bilder prüfen
Öffne anschließend Layout → Import - Bilder. Dort kannst du kontrollieren, welche Bilder aus dem importierten Layout übernommen beziehungsweise durch Themenbilder ersetzt werden.
Das CMS zeigt Bilder an, bei denen Angaben zu Lizenz oder Quelle fehlen. Prüfe diese Hinweise sorgfältig und entscheide, ob die Bilder weiterverwendet werden dürfen oder durch geeignete Themenbilder ersetzt werden sollen.
Wenn du die vorhandenen Originalbilder nicht verwenden möchtest, kannst du passende Themenbilder auswählen oder eigene Themenbilder erstellen. Nach dem Ersetzen sollte das Layout erneut visuell kontrolliert werden.
11. Layout-HTML kontrollieren
Öffne unter Layout den Bereich Layout - HTML. Dort kannst du das aus dem Import erzeugte HTML-Grundgerüst kontrollieren.
In der Layout-Datenbank siehst du den importierten HTML-Code. Prüfe hier insbesondere, ob das Grundgerüst vollständig vorhanden ist und die benötigten CMS-Marken in das Layout übernommen wurden.
12. Importierte CSS- und JavaScript-Dateien prüfen
Öffne anschließend Layout → Import - CSS JS.
Hier siehst du die CSS-, JavaScript- und weiteren Ressourcen, die beim Import erkannt wurden. Wenn eine Ressource als Externe Quellen markiert ist, wird sie nicht ausschließlich lokal aus dem importierten Layout geladen. Solche externen Verknüpfungen solltest du vor der Veröffentlichung gezielt prüfen und entsprechend behandeln.
13. Bearbeitbarkeit im Editor testen
Öffne die importierte Seite im Editor und prüfe, ob die Inhalte wie vorgesehen bearbeitet werden können. Teste insbesondere Texte, Links, Bilder und wiederholbare Bereiche.
14. Erzeugte Seitenabschnittsvorlagen prüfen
Öffne im Editor Einfügen → Seiten-Abschnitt. Der Import erzeugt zusätzliche Vorlagenkategorien aus dem ursprünglichen Layout. Dazu gehören Layout-Header, Layout-Main und Layout-Footer.
Wählst du beispielsweise Layout-Main, werden die aus dem ursprünglichen Layout extrahierten Main-Sections als einzelne Vorlagen angezeigt. Diese kannst du anschließend frei in Seiten einfügen und weiterbearbeiten.
15. Abschlusskontrolle
Nach dem Import solltest du das Ergebnis vollständig kontrollieren: Layout-Darstellung, Bilder, HTML, CSS/JS, externe Ressourcen, Bearbeitbarkeit und die erzeugten Seitenabschnittsvorlagen. Erst wenn diese Prüfungen abgeschlossen sind, solltest du mit der weiteren inhaltlichen Anpassung des importierten Layouts beginnen.
FAQ
was Kunden uns häufig Fragen
Welche Layouts können importiert werden?
Der Import ist für Bootstrap-5-Layouts vorgesehen. Das CMS sucht nach einer passenden Bootstrap-CSS-Datei sowie nach einer index.html oder index.htm auf der entsprechenden Ordnerebene.
Wo starte ich den Layout-Import?
Öffne im CMS den Bereich Layout und wähle Import - Layout.
In welchen Ordner wird die ZIP-Datei übernommen?
Die ausgewählte Layout-ZIP-Datei wird im Entwicklerbereich bx_Import verwendet.
Welche Bootstrap-Dateien werden erkannt?
Erkannt werden Bootstrap-CSS-Dateien wie bootstrap.css, bootstrap.min.css und weitere Dateien nach dem Schema bootstrap***.css. Für dieses Tutorial muss es sich um Bootstrap 5 handeln.
Welche Dateitypen werden importiert?
Importiert werden die im Tutorial aufgeführten HTML-, CSS-, JavaScript-, Font-, Bild-, Video-, Audio-, JSON- und PDF-Dateitypen. Andere Dateiendungen werden nicht übernommen.
Wie lange kann der Import dauern?
Der angezeigte Hinweis nennt eine mögliche Dauer von bis zu 15 Minuten. Das Importfenster darf währenddessen nicht geschlossen werden.
Woran erkenne ich einen erfolgreichen Import?
Die einzelnen Import-Schritte werden grün markiert und anschließend erscheint die Meldung, dass das Layout erfolgreich importiert wurde.
Was mache ich, wenn nach dem Import noch das alte Layout angezeigt wird?
Kehre zur Startseite zurück und verwende bei Bedarf Reload. Danach sollte das neu importierte Layout angezeigt werden.
Wo prüfe ich die importierten Bilder?
Öffne Layout → Import - Bilder. Dort kannst du Originalbilder, Themenbilder sowie Hinweise zu Lizenz und Quelle kontrollieren.
Wo kontrolliere ich den importierten HTML-Code?
Unter Layout → Layout - HTML kannst du das erzeugte HTML-Grundgerüst im Layout-Datensatz prüfen.
Wo kontrolliere ich CSS- und JavaScript-Ressourcen?
Öffne Layout → Import - CSS JS. Dort siehst du die beim Import erkannten Ressourcen und mögliche Hinweise auf externe Quellen.
Welche Seitenabschnittsvorlagen werden aus dem Layout erzeugt?
Der Import stellt Vorlagen in den Kategorien Layout-Header, Layout-Main und Layout-Footer bereit.
Was sollte ich nach dem Import abschließend testen?
Prüfe die Darstellung des Layouts, Bilder, HTML, CSS/JS, externe Ressourcen, die Bearbeitbarkeit im Editor und die erzeugten Seitenabschnittsvorlagen.