Crear HTML Section Templates con IA
Con un archivo de sección existente y la documentación técnica AI_Prompt, se pueden generar nuevas plantillas HTML Section personalizadas para el CMS bluetronix y luego integrarlas a través del administrador de archivos.
Crear HTML Section Templates con IA
Con ChatGPT u otra IA, puedes crear nuevas plantillas HTML Section para el CMS bluetronix, revisar plantillas existentes y desarrollar variantes de diseño adicionales para tu sitio web. Puedes formular tus requisitos de manera personalizada como tu propia solicitud.
Es importante que los archivos generados cumplan con las normas técnicas del CMS bluetronix. Esto incluye, en particular, la estructura de los archivos de sección, los delimitadores entre varias plantillas, la identificación de archivos propios con _own y las marcas de texto requeridas por el CMS.
Formular requisitos propios
Describe en tu solicitud qué tipo de sección de página deseas crear, cuántas variantes de diseño se necesitan y qué estilo imaginas. Puedes usar, por ejemplo, un archivo de sección existente como base o describir un nuevo diseño.
Para los requisitos técnicos, puedes consultar además nuestro ejemplo de solicitud. Este documenta las exigencias para plantillas HTML Section compatibles, entre otras cosas para Bootstrap, animaciones WOW, diseños responsivos, recortes de imágenes del CMS y marcas de traducción. También puedes incluir estos requisitos directamente en tu propia solicitud.
La siguiente solicitud muestra un posible enfoque para nuevas secciones de resumen del blog. Es un ejemplo completamente redactado y se puede adaptar a tu propio proyecto.
Ejemplo de solicitud para nuevas secciones de blog
Puedes adoptar la solicitud, modificar requisitos individuales o crear una solicitud completamente propia.
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/
Personalizar el ejemplo de solicitud
Para otros tipos de secciones, puedes cambiar, por ejemplo, los nombres de los archivos y el diseño deseado. En lugar de nuevos resúmenes de blog, puedes hacer que se creen plantillas HTML Section de equipo, banner, pie de página u otras. Cuando crees una solicitud propia, debes asegurarte de considerar las reglas CMS requeridas y, si es necesario, requisitos especiales de la categoría de sección elegida.
Los archivos de sección propios se guardan con el sufijo _own y se cargan en el directorio /bx_Layout/ a través del Administrador de Archivos del CMS bluetronix. De este modo, tus plantillas individuales permanecen separadas de los archivos estándar.
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.
Preguntas Frecuentes
lo que los clientes nos preguntan con frecuencia
¿Puedo crear plantillas HTML Section con una solicitud de IA propia?
Sí. Puedes formular tus requisitos completamente por ti mismo. Describe qué tipo de sección de página necesitas, cuántas variantes deberían generarse y qué diseño imaginas. Los archivos generados deben cumplir con las normas técnicas del CMS bluetronix.
¿Debo usar el ejemplo de prompt sin cambios?
No. El prompt del blog es solo un ejemplo. Puedes ajustarlo o escribir tu propio prompt para plantillas de secciones como equipo, banner, pie de página y otros HTML.
¿Para qué sirve el archivo AI_Prompt_de.txt?
Contiene las especificaciones técnicas para plantillas de secciones HTML compatibles, por ejemplo, para Bootstrap, animaciones WOW, diseños responsivos, recorte de imágenes del CMS y marcas de traducción. Puedes usarlo como referencia o describir las reglas necesarias directamente en tu propio prompt.
¿Puedo usar un archivo de sección existente como base?
Sí. En el ejemplo, SectionBlog.txt se utiliza como base para la estructura existente y las variantes. También puedes usar otro archivo de sección existente o describir un nuevo diseño.
¿Qué archivo debería crear la IA en el ejemplo del blog?
En el ejemplo, se crea SectionBlog_own.txt. Contiene varias secciones de resumen de blog visualmente diferentes, pero no páginas de detalles del blog.
¿Por qué los archivos de sección propios tienen el sufijo _own?
Con el sufijo _own, las plantillas individuales se mantienen separadas de los archivos estándar. Los archivos estándar pueden ser sobrescritos durante una actualización del CMS.
¿Cómo se separan varias variantes de diseño en un archivo?
Las distintas variantes se separan mediante el marcador exacto del CMS <!--__SP_SectionTemplate__-->. Este marcador no debe cambiarse durante la creación por IA.
¿Por qué deben marcarse los textos visibles?
Para el procesamiento de traducción, los textos visibles se rodean con la marca del CMS ­. En el ejemplo, se espera que las secciones generadas contengan textos de ejemplo universales en inglés.
¿Qué contiene el archivo _LangTexts.txt?
Contiene cada texto visible del archivo de sección generado, un texto por línea y sin la marca ­.
¿Qué requisitos de diseño menciona el ejemplo de prompt?
Las secciones deben usar, entre otras cosas, clases originales de Bootstrap e iconos de Bootstrap, ser responsivas y funcionar tanto en modo claro como en modo oscuro. Además, el prompt menciona animaciones WOW, rutas de imágenes del CMS aprobadas y la clase colAll para columnas repetibles adecuadas.
¿Cómo adapto el prompt del ejemplo del blog para otra sección?
Cambia los nombres de los archivos y el tipo deseado de diseños. Para plantillas de equipo, por ejemplo, usarías SectionTeam.txt y SectionTeam_own.txt, para plantillas de pie de página SectionFooter.txt y SectionFooter_own.txt. Ten en cuenta los requisitos técnicos y específicos de categoría aplicables.
¿Dónde se sube un archivo de sección propio terminado?
El archivo _own terminado se sube a través del Administrador de Archivos del CMS bluetronix al directorio /bx_Layout/.