Create HTML Section Templates with AI

Create HTML Section Templates with AI

With ChatGPT or another AI, you can create new HTML Section Templates for the bluetronix CMS, revise existing templates, and develop additional layout variants for your website. You can formulate your requirements as your own custom prompt.

It is important that the generated files comply with the technical rules of the bluetronix CMS. This includes the structure of Section files, the separator markers between multiple templates, marking own files with _own, and the required CMS text markers.

Formulate your own requirements

Describe in your prompt what type of page section you want to create, how many layout variants are needed, and what design you envision. For example, you can use an existing Section file as a basis or describe a new layout.

For the technical specifications, you can also refer to our example prompt. It documents the requirements for compatible HTML Section Templates, including for Bootstrap, WOW animations, responsive layouts, the CMS image cropping, and translation markers. You can also include these requirements directly in your own prompt.

The following prompt shows a possible approach for new blog overview sections. It is a fully formulated example and can be adapted to your own project.

Example prompt for new blog sections

You can adopt the prompt, change individual requirements, or create a completely custom 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/

Adjust the example prompt

For other section types, you can change the file names and the desired design. Instead of new blog overviews, you can create team, banner, footer, or other HTML Section Templates. With a custom prompt, you need to ensure that the required CMS rules and any specific requirements of the chosen section category are considered.

Custom Section files are saved with the suffix _own and then uploaded to the directory /bx_Layout/ via the bluetronix CMS File Manager. This keeps your custom templates separate from the standard files.

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.