Creare HTML Section Templates con l'IA

Creare HTML Section Templates con l'IA

Con ChatGPT o un'altra IA, puoi creare nuovi HTML Section Templates per il bluetronix CMS, modificare modelli esistenti e sviluppare varianti di layout aggiuntive per il tuo sito web. Puoi formulare le tue esigenze in modo completamente personalizzato come un prompt.

È importante che i file generati rispettino le regole tecniche del bluetronix CMS. Questo include in particolare la struttura dei file Section, i marcatori di separazione tra più modelli, l'etichettatura dei file personali con _own e i marcatori di testo richiesti dal CMS.

Formulare esigenze personali

Descrivi nel tuo prompt che tipo di sezione desideri creare, quante varianti di layout sono necessarie e quale design hai in mente. Puoi utilizzare ad esempio un file Section esistente come base o descrivere un nuovo layout.

Per le specifiche tecniche puoi anche fare riferimento al nostro esempio di prompt. Documenta i requisiti per HTML Section Templates compatibili, tra cui Bootstrap, animazioni WOW, layout responsive, ritagli delle immagini CMS e marcatori di traduzione. Puoi includere questi requisiti direttamente nel tuo prompt.

Il seguente prompt mostra una possibile procedura per nuove sezioni di riepilogo del blog. È un esempio completamente formulato e può essere adattato al tuo progetto.

Esempio di prompt per nuove sezioni di blog

Puoi utilizzare il prompt, modificare singoli requisiti o creare un prompt completamente tuo.

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/

Adattare l'esempio di prompt

Per altri tipi di sezione, puoi ad esempio cambiare i nomi dei file e il design desiderato. Invece di nuove sezioni di riepilogo del blog, puoi generare modelli di HTML Section per Team, Banner, Footer o altre sezioni. Con un prompt personale, devi prestare attenzione a rispettare le regole del CMS necessarie e eventuali requisiti specifici della categoria di sezione scelta.

I file Section personali vengono salvati con il suffisso _own e poi caricati nella directory /bx_Layout/ tramite il Gestore File del bluetronix CMS. In questo modo, i tuoi modelli personalizzati rimangono separati dai file standard.

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.