Criar modelos de seção HTML com IA
Com um arquivo de seção existente e a documentação técnica do AI_Prompt, é possível criar novos modelos de seção HTML personalizados para o CMS bluetronix e, em seguida, integrá-los através do Gerenciador de Arquivos.
Criar modelos de seção HTML com IA
Com o ChatGPT ou outra IA, você pode criar novos modelos de seção HTML para o CMS bluetronix, revisar modelos existentes e desenvolver variantes adicionais de layout para seu site. Você pode formular seus requisitos de maneira totalmente personalizada como um prompt.
É importante que os arquivos gerados atendam às regras técnicas do CMS bluetronix. Isso inclui, em especial, a estrutura dos arquivos de seção, os marcadores de separação entre vários modelos, a identificação de arquivos próprios com _own e as marcações de texto necessárias do CMS.
Formular requisitos próprios
Descreva em seu prompt que tipo de seção de página você deseja criar, quantas variantes de layout são necessárias e qual design você tem em mente. Como base, você pode usar um arquivo de seção existente ou descrever um novo layout.
Para os requisitos técnicos, você também pode se referir ao nosso prompt de exemplo. Ele documenta as exigências para modelos de seção HTML compatíveis, incluindo para Bootstrap, animações WOW, layouts responsivos, recortes de imagem do CMS e marcações de tradução. Você também pode incluir esses requisitos diretamente em seu próprio prompt.
O seguinte prompt mostra uma possível abordagem para novas seções de resumo de blog. É um exemplo completamente elaborado e pode ser ajustado ao seu próprio projeto.
Prompt de exemplo para novas seções de blog
Você pode adotar o prompt, modificar requisitos individuais ou criar um prompt completamente próprio.
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/
Ajustar o exemplo do prompt
Para outros tipos de seção, você pode, por exemplo, alterar os nomes dos arquivos e o design desejado. Em vez de novos resumos de blog, você pode criar modelos de seção HTML para equipes, banners, rodapés ou outros. Com um prompt próprio, você deve se certificar de observar as regras necessárias do CMS e, se necessário, requisitos especiais da categoria de seção escolhida.
Os arquivos de seção personalizados são salvos com o sufixo _own e, em seguida, carregados através do Gerenciador de Arquivos do CMS bluetronix no diretório /bx_Layout/. Assim, seus modelos personalizados permanecem separados dos arquivos padrão.
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.
FAQ
o que os clientes nos perguntam frequentemente
Posso criar modelos de seção HTML com um prompt de IA próprio?
Sim. Você pode formular completamente seus requisitos. Descreva que tipo de seção de página você precisa, quantas variantes devem ser criadas e qual design você imagina. Os arquivos gerados devem, no entanto, estar em conformidade com as regras técnicas do CMS bluetronix.
Preciso usar o prompt de exemplo sem alterar?
Não. O prompt para blog é apenas um exemplo. Você pode ajustá-lo ou escrever um prompt próprio para modelos de seção HTML para equipes, banners, rodapés e outros.
Para que serve o arquivo AI_Prompt_de.txt?
Ele contém as diretrizes técnicas para modelos de seção HTML compatíveis, por exemplo, para Bootstrap, animações WOW, layouts responsivos, recortes de imagem do CMS e marcações de tradução. Você pode usá-lo como referência ou descrever diretamente as regras necessárias em seu próprio prompt.
Posso usar um arquivo de seção existente como base?
Sim. No exemplo, SectionBlog.txt serve como base para a estrutura atual e as variantes existentes. Você também pode usar outro arquivo de seção existente ou descrever um novo layout.
Qual arquivo a IA deve criar no exemplo do blog?
No exemplo, é criado o SectionBlog_own.txt. Ele contém várias seções de resumo de blog visualmente diferentes, mas não contém páginas detalhadas do blog.
Por que os arquivos de seção próprios têm o sufixo _own?
Com o sufixo _own, os modelos personalizados permanecem separados dos arquivos padrão. Os arquivos padrão podem ser sobrescritos em uma atualização do CMS.
Como várias variantes de layout são separadas em um arquivo?
As variantes individuais são separadas pelo marcador CMS escrito exatamente <!--__SP_SectionTemplate__-->. Este marcador não deve ser alterado durante a criação pela IA.
Por que os textos visíveis precisam ser marcados?
Para o processamento de traduções, textos visíveis são envolvidos pela marcação CMS ­. No exemplo, as seções geradas devem conter textos de exemplo em inglês universal.
O que contém o arquivo _LangTexts.txt?
Ele contém cada texto visível do arquivo de seções gerado, um texto por linha e sem a marcação ­.
Quais requisitos de layout são mencionados no prompt de exemplo?
As seções devem usar, entre outras coisas, classes originais do Bootstrap e ícones do Bootstrap, ser responsivas e funcionar no Modo Claro e no Modo Escuro. Além disso, o prompt menciona animações WOW, caminhos de imagens do CMS liberados e a classe colAll para colunas adequadas que possam ser repetidas.
Como adapto o prompt de exemplo do blog para uma outra seção?
Altere os nomes dos arquivos e o tipo desejado de layouts. Para templates de equipe, por exemplo, você usaria SectionTeam.txt e SectionTeam_own.txt; para templates de rodapé, SectionFooter.txt e SectionFooter_own.txt. Considere os requisitos técnicos e específicos de categoria aplicáveis.
Onde é feito o upload de um arquivo de seção próprio pronto?
O arquivo _own pronto é carregado através do bluetronix CMS Gerenciador de Arquivos no diretório /bx_Layout/.