Créer des HTML Section Templates avec l'IA

Créer des HTML Section Templates avec l'IA

Avec ChatGPT ou une autre IA, vous pouvez créer de nouveaux HTML Section Templates pour le CMS bluetronix, retravailler les modèles existants et développer des variantes de mise en page supplémentaires pour votre site web. Vous pouvez formuler vos exigences de manière totalement personnalisée en tant que propre prompt.

Il est important que les fichiers générés respectent les règles techniques du CMS bluetronix. Cela inclut en particulier la structure des fichiers Section, les marqueurs de séparation entre plusieurs modèles, la désignation des fichiers personnels avec _own et les balises de texte nécessaires au CMS.

Formulez vos propres exigences

Décrivez dans votre prompt quel type de section de page vous souhaitez créer, combien de variantes de mise en page sont nécessaires et quel design vous envisagez. Par exemple, vous pouvez utiliser un fichier Section existant comme base ou décrire une nouvelle mise en page.

Pour les spécifications techniques, vous pouvez également vous référer à notre exemple de prompt. Il documente les exigences pour des HTML Section Templates compatibles, y compris pour Bootstrap, les animations WOW, les mises en page réactives, le recadrage d'images CMS et les balises de traduction. Vous pouvez également intégrer ces exigences directement dans votre propre prompt.

Le prompt suivant montre une approche possible pour de nouvelles sections de résumé de blog. C'est un exemple complètement formulé et peut être adapté à votre propre projet.

Exemple de prompt pour de nouvelles sections de blog

Vous pouvez adopter le prompt, modifier des exigences individuelles ou créer un prompt complètement personnalisé.

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/

Personnaliser l'exemple de prompt

Pour d'autres types de section, vous pouvez par exemple changer les noms de fichiers et le design souhaité. Au lieu de nouveaux résumés de blog, vous pouvez créer des modèles HTML Section pour des équipes, des bannières, des pieds de page ou d'autres. Avec un prompt propre, vous devez veiller à respecter les règles CMS spécifiques et, le cas échéant, les exigences particulières de la catégorie de section choisie.

Les fichiers Section personnels sont enregistrés avec le suffixe _own et ensuite téléchargés dans le répertoire /bx_Layout/ via le gestionnaire de fichiers du CMS bluetronix. Ainsi, vos modèles individuels sont séparés des fichiers standards.

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.