Importar diseño de Bootstrap-5
Conoce la importación de diseño completa: desde la verificación de Bootstrap-5 y el archivo ZIP hasta el procesamiento automático y el control del diseño importado en el editor.
Objetivo del tutorial
Aprenderás cómo importar un diseño Bootstrap-5 como archivo ZIP en el CMS de bluetronix, verificar la importación y luego controlar las imágenes del diseño, el HTML del diseño, CSS/JS y las plantillas de secciones de página generadas.
Importante: Utiliza un diseño Bootstrap-5 para la importación que cumpla con los requisitos descritos a continuación. La importación en sí puede tardar hasta 15 minutos.
1. Importar - Abrir diseño
Abre en el CMS la sección Diseño y luego selecciona Importar - Diseño.
2. Seleccionar archivo ZIP
En la ventana Importar - Diseño, haz clic en Seleccionar archivo ZIP. A través de esta función, abrirás el gestor de archivos y podrás seleccionar el archivo ZIP de tu diseño Bootstrap-5.
Además, tienes disponibles imágenes de tema que se pueden usar más tarde como reemplazo de imágenes de diseño si no deseas seguir usando las imágenes originales.
3. Abrir carpeta bx_Import
En el gestor de archivos, abre la carpeta de desarrollador bx_Import. Esta carpeta se utiliza para proporcionar el archivo ZIP a importar.
4. Subir Layout.zip
Ahora sube tu propio archivo ZIP a la carpeta bx_Import. En nuestro ejemplo, el archivo se llama Layout.zip. Luego selecciona este archivo para la importación del diseño.
5. Requisitos para el diseño Bootstrap-5
El CMS verifica antes de la importación si se puede encontrar una estructura Bootstrap-5 adecuada en el archivo ZIP. Los requisitos completos y las extensiones de archivo admitidas se encuentran en el siguiente resumen 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 pasos de importación
Después de seleccionar el archivo ZIP, el CMS muestra debajo de las imágenes de tema los pasos individuales que se ejecutarán durante la importación. Revisa esta vista general antes de iniciar la importación.
La importación abarca los siguientes pasos en la versión 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 importación
Haz clic en Importar. El CMS indicará que la importación puede tardar hasta 15 minutos y que la ventana no debe cerrarse durante este tiempo.
Confirma el aviso con OK. Luego comenzará la importación del diseño.
8. Verificar importación exitosa
Una vez finalizada la importación, aparecerá primero el mensaje de que el diseño se ha importado correctamente.
Luego puedes verificar si todos los pasos de procesamiento individuales se han completado con éxito. Los pasos ejecutados con éxito estarán marcados en verde.
9. Verificar nuevo diseño en el sitio web
Cierra la ventana de importación y vuelve a la página de inicio de tu sitio web. Justo después de la importación, aún puede ser visible la representación anterior.
Si es necesario, haz clic en Recargar. Luego debería mostrarse el diseño importado. Compara la representación con el diseño original que querías importar.
10. Verificar imágenes importadas
Luego abre Diseño → Importar - Imágenes. Allí puedes verificar qué imágenes se han trasladado del diseño importado o han sido reemplazadas por imágenes temáticas.
El CMS muestra imágenes para las cuales faltan detalles sobre licencia o fuente. Revisa estos avisos cuidadosamente y decide si las imágenes pueden ser reutilizadas o si deben ser reemplazadas por imágenes temáticas adecuadas.
Si no deseas usar las imágenes originales existentes, puedes seleccionar imágenes temáticas adecuadas o crear tus propias imágenes temáticas. Después de reemplazarlas, el diseño debe revisarse visualmente de nuevo.
11. Verificar HTML del diseño
Abre en Diseño la sección Diseño - HTML. Allí puedes verificar la estructura HTML básica generada por la importación.
En la base de datos de diseño verás el código HTML importado. Comprueba aquí especialmente si la estructura básica está completamente presente y si las marcas CMS necesarias han sido incorporadas al diseño.
12. Verificar archivos CSS y JavaScript importados
Luego abre Diseño → Importar - CSS JS.
Aquí verás los recursos CSS, JavaScript y otros que han sido detectados durante la importación. Si un recurso está marcado como Fuentes Externas, no se carga exclusivamente de forma local desde el diseño importado. Esos enlaces externos debes revisarlos cuidadosamente antes de la publicación y tratarlos adecuadamente.
13. Probar editabilidad en el editor
Abre la página importada en el editor y comprueba si los contenidos se pueden editar como se espera. Prueba especialmente textos, enlaces, imágenes y áreas repetibles.
14. Verificar plantillas de secciones de página generadas
Abre en el editor Insertar → Sección de Página. La importación genera categorías de plantillas adicionales a partir del diseño original. Esto incluye Encabezado de Diseño, Principal de Diseño y Pie de Diseño.
Si seleccionas, por ejemplo, Principal de Diseño, se mostrarán las Secciones Principales extraídas del diseño original como plantillas individuales. Puedes luego insertarlas libremente en páginas y editarlas.
15. Control final
Después de la importación, deberías verificar completamente el resultado: representación del diseño, imágenes, HTML, CSS/JS, recursos externos, posibilidad de edición y las plantillas de sección de página generadas. Solo cuando estas verificaciones se hayan completado, deberías comenzar con el adaptación del contenido del diseño importado.
Preguntas Frecuentes
lo que los clientes nos preguntan con frecuencia
¿Qué diseños se pueden importar?
La importación está destinada a diseños de Bootstrap 5. El CMS busca un archivo CSS de Bootstrap adecuado, así como un index.html o index.htm en el nivel de carpeta correspondiente.
¿Dónde empiezo la importación del diseño?
Abre en el CMS la sección Diseño y selecciona Importar - Diseño.
¿En qué carpeta se carga el archivo ZIP?
El archivo ZIP de diseño seleccionado se utiliza en el área de desarrollador bx_Importar.
¿Qué archivos de Bootstrap se reconocen?
Se reconocen archivos CSS de Bootstrap como bootstrap.css, bootstrap.min.css y otros archivos con el esquema bootstrap***.css. Para este tutorial, debe ser Bootstrap 5.
¿Qué tipos de archivos se importan?
Se importan los tipos de archivo HTML, CSS, JavaScript, fuente, imagen, video, audio, JSON y PDF mencionados en el tutorial. Otras extensiones de archivo no se aceptan.
¿Cuánto tiempo puede tardar la importación?
La indicación mostrada menciona una duración posible de hasta 15 minutos. La ventana de importación no debe cerrarse durante este tiempo.
¿Cómo reconozco una importación exitosa?
Los pasos de importación se marcan en verde y luego aparece el mensaje de que el diseño se ha importado con éxito.
¿Qué hago si después de la importación todavía se muestra el viejo diseño?
Vuelve a la página de inicio y usa Recargar si es necesario. Luego deberías ver el nuevo diseño importado.
¿Dónde reviso las imágenes importadas?
Abre Diseño → Importar - Imágenes. Allí puedes revisar las imágenes originales, las imágenes de temas y notas sobre licencias y fuentes.
¿Dónde controlo el código HTML importado?
Bajo Diseño → Diseño - HTML puedes revisar la estructura HTML generada en el registro de diseño.
¿Dónde controlo los recursos CSS y JavaScript?
Abre Diseño → Importar - CSS JS. Allí verás los recursos reconocidos durante la importación y posibles notas sobre fuentes externas.
¿Qué plantillas de secciones de página se generan a partir del diseño?
La importación proporciona plantillas en las categorías Encabezado del Diseño, Principal del Diseño y Pie del Diseño.
¿Qué debería probar al final después de la importación?
Revisa la presentación del diseño, imágenes, HTML, CSS/JS, recursos externos, la editabilidad en el editor y las plantillas de secciones de página generadas.