Skapa HTML Section Templates med AI

Skapa HTML Section Templates med AI

Med ChatGPT eller en annan AI kan du skapa nya HTML-sektionmallar för bluetronix CMS, revidera befintliga mallar och utveckla ytterligare layoutvarianter för din webbplats. Du kan formulera dina krav helt individuellt som en egen prompt.

Det är viktigt att de skapade filerna följer de tekniska reglerna för bluetronix CMS. Detta inkluderar särskilt uppbyggnaden av sektionfiler, avskiljare mellan flera mallar, märkning av egna filer med _own och de nödvändiga CMS-textmarkeringarna.

Formulera egna krav

Beskriv i din prompt vilken typ av sidsektion du vill skapa, hur många layoutvarianter som behövs och vilken design du föreställer dig. Som grund kan du till exempel använda en befintlig sektionfil eller beskriva en ny layout.

För de tekniska kraven kan du dessutom hänvisa till vår exempelpump. Den dokumenterar kraven för kompatibla HTML-sektionmallar, bland annat för Bootstrap, WOW-animationer, responsiva layouter, CMS-bildbeskärningar och översättningsmarkeringar. Du kan också integrera dessa krav direkt i din egen prompt.

Följande prompt visar en möjlig arbetsmetod för nya bloggsammanställnings-sektioner. Den är ett helt formulerat exempel och kan anpassas till ditt eget projekt.

Exempelpump för nya blog-sektioner

Du kan ta över prompten, ändra enskilda krav eller skapa en helt egen prompt.

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/

Anpassa exempelpumpen

För andra sektionstyper kan du till exempel ändra filnamn och önskad design. Istället för nya bloggsammanställningar kan du skapa team-, banner-, footer- eller andra HTML-sektionmallar. I en egen prompt måste du se till att följa de erforderliga CMS-reglerna och eventuella särskilda krav för den valda sektionkategorin.

Egen sektionfiler sparas med tillägget _own och laddas sedan upp via bluetronix CMS Filhanterare till katalogen /bx_Layout/. På så sätt hålls dina individuella mallar åtskilda från standardfilerna.

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.