Importar layout do Bootstrap-5
Conheça a importação completa de layout: da verificação do Bootstrap-5 e do arquivo ZIP ao processamento automático e ao controle do layout importado no editor.
Objetivo do tutorial
Você aprenderá como importar um layout Bootstrap-5 como arquivo ZIP no CMS bluetronix, verificar a importação e depois controlar as imagens do layout, HTML do layout, CSS/JS, assim como os modelos de seção de página gerados.
Importante: Use para a importação um layout Bootstrap-5 que atenda aos requisitos descritos abaixo. A importação real pode levar até 15 minutos.
1. Importar - Abrir layout
Abra na CMS a área Layout e depois selecione Importar - Layout.
2. Selecionar arquivo ZIP
Na janela Importar - Layout, clique em Selecionar arquivo ZIP. Com essa função, você abrirá o gerenciador de arquivos e poderá selecionar o arquivo ZIP do seu layout Bootstrap-5.
Além disso, você tem imagens temáticas disponíveis que podem ser usadas posteriormente como substitutas para imagens do layout, caso as imagens originais não devam ser reutilizadas.
3. Abrir pasta bx_Import
No gerenciador de arquivos, abra a pasta de desenvolvedor bx_Import. Essa pasta é usada para fornecer o arquivo ZIP a ser importado.
4. Fazer upload de Layout.zip
Agora, faça o upload do seu próprio arquivo ZIP na pasta bx_Import. No nosso exemplo, o arquivo se chama Layout.zip. Em seguida, selecione esse arquivo para a importação do layout.
5. Pré-requisitos para o layout do Bootstrap-5
O CMS verifica antes da importação se uma estrutura Bootstrap-5 adequada pode ser encontrada no arquivo ZIP. Os requisitos completos e as extensões de arquivo suportadas podem ser encontrados no seguinte resumo técnico.
Detecting and Importing a Bootstrap Layout
When importing a layout, the system first checks whether it is a valid Bootstrap layout.
1. Detecting a Bootstrap Layout
For a layout to be recognized and imported as a Bootstrap layout, two requirements must be met:
1. A Bootstrap CSS file must be present.
2. An index.html or index.htm file must exist at the corresponding directory level.
The following files, for example, are recognized as Bootstrap files:
bootstrap.css
bootstrap.min.css
bootstrap-grid.css
bootstrap-grid.min.css
bootstrap-reboot.css
bootstrap-*.css
In general, the system searches for a file whose name matches the following pattern:
bootstrap***.css
The file must belong to Bootstrap version 5.
Example 1
/index.html
/assets/css/bootstrap.min.css
The layout is recognized. The index.html file is located at the root level, while the Bootstrap file is located in:
/assets/css/
Example 2
/index.html
/assets/css/bootstrap.css
This layout is also recognized.
Example 3
/index.html
/css/bootstrap.min.css
A Bootstrap file located in the /css/ directory is also recognized.
Important:
Once a matching index.html or index.htm file and a Bootstrap CSS file have been found, that directory level is used as the starting point of the layout. From this level onward, the required files are extracted from the ZIP archive and processed.
2. Which Files Are Imported?
During the import process, only supported file types are included.
HTML Files
.html
.htm
JavaScript and CSS Files
.js
.mjs
.css
Fonts
.woff
.woff2
.ttf
.otf
.eot
Images and Graphics
.svg
.jpg
.jpeg
.jpg
.webp
.avif
.gif
.ico
Video Files
.mp4
.webm
Audio Files
.mp3
.ogg
.wav
Data Files
.json
Documents
.pdf
All other file extensions are excluded from the layout import process.
6. Verificar etapas de importação
Depois de selecionar o arquivo ZIP, o CMS exibirá os passos individuais que serão realizados durante a importação abaixo das imagens temáticas. Verifique essa visão geral antes de iniciar a importação.
A importação inclui os seguintes passos na versão mostrada:
- Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
- HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
- Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
- index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
- Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
- Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
- CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.
7. Iniciar importação
Clique em Importar. O CMS informa que a importação pode levar até 15 minutos e a janela não deve ser fechada durante esse tempo.
Confirme a notificação com OK. Em seguida, a importação do layout começará.
8. Verificar importação bem-sucedida
Após a conclusão da importação, inicialmente aparecerá a mensagem de que o layout foi importado com sucesso.
Em seguida, você pode verificar se todos os passos de processamento individuais foram concluídos com sucesso. Os passos executados com sucesso são destacados em verde.
9. Verificar novo layout na página
Feche a janela de importação e retorne à página inicial do seu site. Imediatamente após a importação, pode ser que a apresentação anterior ainda esteja visível.
Se necessário, clique em Recarregar. Em seguida, o layout importado deve ser exibido. Compare a apresentação com o layout original que você queria importar.
10. Verificar imagens importadas
Em seguida, abra Layout → Importar - Imagens. Lá você pode verificar quais imagens do layout importado foram mantidas ou substituídas por imagens temáticas.
O CMS exibe imagens para as quais faltam informações sobre licença ou origem. Verifique cuidadosamente essas informações e decida se as imagens podem ser reutilizadas ou se devem ser substituídas por imagens temáticas adequadas.
Se você não quiser usar as imagens originais disponíveis, poderá selecionar imagens temáticas apropriadas ou criar suas próprias imagens temáticas. Após a substituição, o layout deve ser revisado visualmente novamente.
11. Verificar HTML do layout
Abra em Layout a área Layout - HTML. Lá você pode verificar a estrutura HTML gerada pela importação.
Na base de dados do layout, você verá o código HTML importado. Verifique aqui especialmente se a estrutura básica está completamente presente e se as marcas de CMS necessárias foram incorporadas ao layout.
12. Verificar arquivos CSS e JavaScript importados
Em seguida, abra Layout → Importar - CSS JS.
Aqui você vê os recursos CSS, JavaScript e outros que foram reconhecidos durante a importação. Se um recurso estiver marcado como Fontes Externas, ele não será carregado exclusivamente localmente do layout importado. Você deve verificar e tratar essas conexões externas antes da publicação.
13. Testar editabilidade no editor
Abra a página importada no editor e verifique se o conteúdo pode ser editado conforme esperado. Teste especialmente textos, links, imagens e áreas repetíveis.
14. Verificar modelos de seção de página gerados
No editor, abra Inserir → Seção da Página. A importação gera categorias de modelos adicionais a partir do layout original. Isso inclui Cabeçalho do Layout, Main do Layout e Rodapé do Layout.
Se você selecionar Main do Layout, as seções principais extraídas do layout original serão exibidas como modelos individuais. Você pode então inserir e editar livremente essas seções nas páginas.
15. Verificação final
Após a importação, você deve verificar completamente o resultado: apresentação do layout, imagens, HTML, CSS/JS, recursos externos, editabilidade e os modelos de seções da página gerados. Somente após essas verificações serem concluídas, você deve começar a ajustar o conteúdo do layout importado.
FAQ
o que os clientes nos perguntam frequentemente
Quais layouts podem ser importados?
A importação é destinada a layouts Bootstrap 5. O CMS procura um arquivo CSS Bootstrap apropriado, bem como um index.html ou index.htm no nível de pasta correspondente.
Onde inicio a importação do layout?
Abra a seção Layout no CMS e selecione Importar - Layout.
Em qual pasta o arquivo ZIP será importado?
O arquivo ZIP de layout selecionado será usado na área de desenvolvedor bx_Import.
Quais arquivos Bootstrap são reconhecidos?
São reconhecidos arquivos CSS Bootstrap como bootstrap.css, bootstrap.min.css e outros arquivos com o padrão bootstrap***.css. Para este tutorial, deve ser Bootstrap 5.
Quais tipos de arquivo são importados?
Os tipos de arquivo HTML, CSS, JavaScript, Fonte, Imagem, Vídeo, Áudio, JSON e PDF listados no tutorial são importados. Outros tipos de extensão não são aceitos.
Quanto tempo pode levar a importação?
A notificação exibida menciona uma duração possível de até 15 minutos. A janela de importação não deve ser fechada durante esse tempo.
Como reconheço uma importação bem-sucedida?
As etapas individuais da importação serão marcadas em verde e, em seguida, a mensagem aparecerá indicando que o layout foi importado com sucesso.
O que faço se o layout antigo ainda estiver sendo exibido após a importação?
Volte para a página inicial e use Recarregar, se necessário. Depois disso, o novo layout importado deve ser exibido.
Onde verifico as imagens importadas?
Abra Layout → Importar - Imagens. Lá você pode verificar imagens originais, imagens de tema, assim como informações sobre licença e fonte.
Onde verifico o código HTML importado?
Em Layout → Layout - HTML, você pode verificar a estrutura HTML gerada no registro de layout.
Onde controlo os recursos CSS e JavaScript?
Abra Layout → Importar - CSS JS. Lá você verá os recursos reconhecidos durante a importação e possíveis indicações de fontes externas.
Quais modelos de seções de página são gerados a partir do layout?
A importação fornece modelos nas categorias Cabeçalho do Layout, Principal do Layout e Rodapé do Layout.
O que eu devo testar após a importação?
Verifique a apresentação do layout, imagens, HTML, CSS/JS, recursos externos, a editabilidade no editor e os modelos de seções de página gerados.