HTML Section Templates mit KI erstellen

HTML Section Templates mit KI erstellen

Mit ChatGPT oder einer anderen KI kannst du neue HTML Section Templates für das bluetronix CMS erstellen, bestehende Vorlagen überarbeiten und zusätzliche Layoutvarianten für deine Webseite entwickeln. Du kannst deine Anforderungen dafür ganz individuell als eigenen Prompt formulieren.

Wichtig ist, dass die erzeugten Dateien die technischen Regeln des bluetronix CMS einhalten. Dazu gehören insbesondere der Aufbau der Section-Dateien, die Trennmarker zwischen mehreren Vorlagen, die Kennzeichnung eigener Dateien mit _own und die erforderlichen CMS-Textmarkierungen.

Eigene Anforderungen formulieren

Beschreibe in deinem Prompt, welche Art von Seitenabschnitt du erstellen möchtest, wie viele Layoutvarianten benötigt werden und welche Gestaltung du dir vorstellst. Als Grundlage kannst du beispielsweise eine vorhandene Section-Datei verwenden oder ein neues Layout beschreiben.

Für die technischen Vorgaben kannst du zusätzlich unseren Beispielprompt heranziehen. Er dokumentiert die Anforderungen an kompatible HTML Section Templates, unter anderem für Bootstrap, WOW-Animationen, responsive Layouts, den CMS-Bildzuschnitt und die Übersetzungsmarkierungen. Du kannst diese Anforderungen auch direkt in deinen eigenen Prompt aufnehmen.

Der folgende Prompt zeigt eine mögliche Vorgehensweise für neue Blog-Übersichts-Sections. Er ist ein vollständig ausformuliertes Beispiel und kann an dein eigenes Projekt angepasst werden.

Beispiel-Prompt für neue Blog-Sections

Du kannst den Prompt übernehmen, einzelne Anforderungen verändern oder einen vollständig eigenen Prompt erstellen.

EXAMPLE PROMPT FOR CREATING A NEW bluetronix CMS LAYOUT SECTION
======================================================================

Please create a new custom layout section file for the bluetronix CMS.

Use the attached file:

AI_Prompt_de.txt

as the complete and mandatory technical documentation for all requirements.

Additionally, use the attached existing file:

SectionBlog.txt

as the basis for the current structure and existing section variants.

Task:

Create a new file named:

SectionBlog_own.txt

The file should contain several modern and visually distinct blog overview sections for the bluetronix CMS.

Important:

- All requirements from AI_Prompt_de.txt must be fully followed.
- Use only standard Bootstrap classes.
- Remove any Bootstrap Studio-specific classes.
- Use Bootstrap Icons exclusively.
- All sections must be responsive and work correctly in both Bootstrap Light Mode and Dark Mode.
- Use WOW animations according to the documentation.
- Use only the image URLs approved in AI_Prompt_de.txt and the CMS image cropping syntax documented there.
- Use the required  separators.
- Mark all visible text with ­.
- Use universal English example texts.
- Reuse suitable example texts instead of creating unnecessarily many different text variations.
- Text length must match the respective layout.
- Always use href="#" for links unless another URL is specified in the documentation.
- Use colAll for suitable repeatable columns.
- Ensure visually consistent spacing, column gaps, and border radii.
- Do not split HTML tags across multiple lines.
- Indent HTML using exactly 3 spaces per level.
- Do not create blog detail pages. Create only blog sections for index or overview pages.
- Do not modify technical CMS markers or required CMS structures.
- Validate the completed HTML against the checklist in AI_Prompt_de.txt.

Additionally, create the following file:

_LangTexts.txt

This file must contain every visible text used in SectionBlog_own.txt.

Requirements:

- One text per line.
- Without the ­ markers.

Output:

1. SectionBlog_own.txt
2. _LangTexts.txt

Do not display the code only in the chat. Generate both files as downloadable files.

After creation, the SectionBlog_own.txt file will be uploaded via the bluetronix CMS "Datei - Manager" to the following directory:

/bx_Layout/

Den Beispiel-Prompt anpassen

Für andere Section-Typen kannst du beispielsweise die Dateinamen und die gewünschte Gestaltung ändern. Statt neuer Blog-Übersichten kannst du Team-, Banner-, Footer- oder andere HTML Section Templates erstellen lassen. Bei einem eigenen Prompt musst du darauf achten, die jeweils erforderlichen CMS-Regeln und gegebenenfalls besondere Anforderungen der gewählten Section-Kategorie zu berücksichtigen.

Eigene Section-Dateien werden mit dem Zusatz _own gespeichert und anschließend über den bluetronix CMS Datei - Manager in das Verzeichnis /bx_Layout/ hochgeladen. So bleiben deine individuellen Vorlagen von den Standarddateien getrennt.

EXAMPLE FOR USING A DIFFERENT SECTION
==========================================

For a different section type, only the filenames need to be replaced.

For example:

SectionBlog.txt
SectionBlog_own.txt

Replace with:

SectionTeam.txt
SectionTeam_own.txt

or:

SectionFooter.txt
SectionFooter_own.txt

All requirements from AI_Prompt_de.txt remain unchanged.