HTML Section Templates met AI maken

HTML Section Templates met AI maken

Met ChatGPT of een andere AI kun je nieuwe HTML-sectie sjablonen voor het bluetronix CMS maken, bestaande sjablonen bewerken en aanvullende lay-outvarianten voor je website ontwikkelen. Je kunt je eisen volledig individueel als een eigen prompt formuleren.

Belangrijk is dat de aangemaakte bestanden voldoen aan de technische regels van het bluetronix CMS. Dit omvat met name de opbouw van de sectie-bestanden, de scheidingstekens tussen meerdere sjablonen, de markering van eigen bestanden met _own en de vereiste CMS-tekstmarkeringen.

Eigen eisen formuleren

Beschrijf in je prompt welk type pagina-sectie je wilt maken, hoeveel lay-outvarianten nodig zijn en hoe je de vormgeving voor je ziet. Als basis kun je bijvoorbeeld een bestaand sectie-bestand gebruiken of een nieuwe lay-out beschrijven.

Voor de technische vereisten kun je bovendien onze voorbeeldprompt raadplegen. Deze documenteert de eisen voor compatibele HTML-sectie sjablonen, onder andere voor Bootstrap, WOW-animaties, responsieve lay-outs, de CMS-afbeeldingssnede en de vertaalmarkeringen. Je kunt deze vereisten ook direct in je eigen prompt opnemen.

De volgende prompt laat een mogelijke werkwijze zien voor nieuwe blogoverzicht-secties. Het is een volledig geformuleerd voorbeeld en kan worden aangepast aan je eigen project.

Voorbeeldprompt voor nieuwe blogsecties

Je kunt de prompt overnemen, specifieke eisen veranderen of een volledig eigen prompt maken.

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/

Pas de voorbeeldprompt aan

Voor andere sectietypen kun je bijvoorbeeld de bestandsnamen en het gewenste ontwerp wijzigen. In plaats van nieuwe blogoverzichten kun je team-, banner-, footer- of andere HTML-sectie sjablonen laten creëren. Bij een eigen prompt moet je erop letten dat je de vereiste CMS-regels en indien nodig speciale vereisten van de gekozen sectiecategorie in acht neemt.

Eigen sectie-bestanden worden opgeslagen met de toevoeging _own en vervolgens via de bluetronix CMS Bestandsbeheerder in de map /bx_Layout/ geüpload. Zo blijven je individuele sjablonen gescheiden van de standaardbestanden.

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.