לייבא עיצוב Bootstrap-5

מטרת המדריך

אתה לומד כיצד לייבא לייאט של Bootstrap-5 כקובץ ZIP למערכת הניהול של bluetronix, לבדוק את הייבוא ולאחר מכן לבדוק את תמונות הלייאט, ה-HTML של הלייאט, CSS/JS וכן את תבניות החלקים שנוצרו.

חשוב: השתמש בלייאט של Bootstrap-5 לייבוא המפיץ את הדרישות המתוארות למטה. הייבוא עצמו יכול להימשך עד 15 דקות.

1. ייבוא - פתח עיצוב

פתח במערכת הניהול את התחום לייאוט ולאחר מכן בחר ייבוא - לייאוט.

2. בחר קובץ ZIP

בחwindow ייבוא - לייאוט לחץ על בחר קובץ ZIP. באמצעות פונקציה זו תוכל לפתוח את מנהל הקבצים ולבחור את קובץ ה-ZIP של הלייאט של Bootstrap-5 שלך.

בנוסף, זמינים לך תמונות נושא שניתן להשתמש בהן מאוחר יותר כתחליף לתמונות הלייאט, אם לא רוצים להשתמש בתמונות המקור.

3. פתח את התיקייה bx_Import

במנהלי הקבצים פתח לאחר מכן את התיקייה המפתחת bx_Import. תיקייה זו משמשת לספק את קובץ ה-ZIP לייבוא.

4. העלה את Layout.zip

העלה כעת את קובץ ה-ZIP שלך לתוך תיקיית bx_Import. בדוגמה שלנו, הקובץ נקרא Layout.zip. לאחר מכן בחר קובץ זה לייבוא הלייאט.

5. דרישות לעיצוב Bootstrap-5

ה-CMS בודק לפני הייבוא אם ניתן למצוא במארז ה-ZIP מבנה מתאים של Bootstrap-5. תוכל למצוא את הדרישות המלאות ואת סיומות הקבצים הנתמכות בסיכום הטכני הבא.

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. בדוק את שלבי הייבוא

לאחר שבחרת את קובץ ה-ZIP, ה-CMS מציג מתחת לתמונות הנושא את השלבים השונים שבוצעו במהלך הייבוא. בדוק את הסקירה הזו לפני שתתחיל את הייבוא.

הייבוא כולל בגרסה המוצגת את השלבים הבאים:

1. Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
2. HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
3. Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
4. index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
5. Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
6. Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
7. CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.

7. התחל ייבוא

לחץ על ייבוא. ה-CMS מציין כי הייבוא יכול להימשך עד 15 דקות ושהחלון לא יכול להיסגר במהלך זאת.

אשר את ההודעה עם אישור. לאחר מכן מתחיל ייבוא הלייאט.

8. בדוק את הייבוא המוצלח

לאחר סיום הייבוא, תוצג תחילה ההודעה שהלייאט יובא בהצלחה.

לאחר מכן תוכל לבדוק אם כל שלבי העיבוד בוצעו בהצלחה. שלבים שבוצעו בהצלחה מסומנים בירוק.

9. בדוק את העיצוב החדש באתר

סגור את חלון הייבוא וחזור לדף הבית של האתר שלך. מיד לאחר הייבוא עשויה להיראות התצוגה הקודמת.

אם יש צורך, לחץ על רענן. לאחר מכן, הלייאט המיובא אמור להת显示. השווה את התצוגה עם הלייאט המקורי שכתבת לייבוא.

10. בדוק את התמונות המיובאות

לאחר מכן פתח את לייאוט → ייבוא - תמונות. שם תוכל לבדוק אילו תמונות מהלייאט המיובא אומצו או הוחלפו בתמונות נושא.

ה-CMS מציג תמונות שאין בהם פרטים על רישוי או מקור. בדוק הנחיות אלה בקפידה והחליט אם ניתן להמשיך להשתמש בתמונות או להחליפן בתמונות נושא מתאימות.

אם אינך רוצה להשתמש בתמונות המקוריות הקיימות, תוכל לבחור תמונות נושא מתאימות או ליצור תמונות נושא משלך. לאחר ההחלפה יש לבדוק את הלייאט מחדש מבחינה ויזואלית.

11. בדוק את ה-HTML של הלייאט

פתח תחת לייאוט את התחום לייאוט - HTML. שם תוכל לבדוק את מבנה ה-HTML שנוצר מהייבוא.

במסד הנתונים של העיצוב אתה רואה את קוד ה-HTML המיובא. בדוק כאן במיוחד אם המבנה הבסיסי קיים במלואו ואם המותגים הנדרשים של ה-CMS הועברו לעיצוב.

12. בדוק את קבצי ה-CSS וה-JavaScript שהורדו

לאחר מכן פתח את עיצוב → ייבוא - CSS JS.

כאן אתה רואה את משאבי ה-CSS, JavaScript ומשאבים נוספים שזוהו במהלך הייבוא. אם משאב מסומן כמקורות חיצוניים, הוא לא נטען באופן בלעדי מהעיצוב המיובא. עליך לבדוק ולדאוג לקשרים חיצוניים כאלה לפני הפרסום.

13. בדוק את היכולת לעריכה בעורך

פתח את העמוד המיובא בעורך ובדוק אם התוכן ניתן לעריכה כפי שנועד. בדוק במיוחד טקסטים, קישורים, תמונות ואזורים חוזרים.

14. בדוק את תבניות החלקים שנוצרו

פתח בעורך את הכנסה → חלק עמוד. הייבוא יוצר קטגוריות תבנית נוספות מהעיצוב המקורי. אלו כוללות כותרת-עיצוב, עיקר-עיצוב ותחתית-עיצוב.

אם תבחר בעיקר-עיצוב, sections העיקריים שהוצאו מהעיצוב המקורי יוצגו כתבניות נפרדות. תוכל לאחר מכן להכניסם בחופשיות לעמודים ולערוך אותם.

15. בדיקת סיום

לאחר הייבוא עליך לבדוק את התוצאה באופן מלא: הצגת עיצוב, תמונות, HTML, CSS/JS, משאבים חיצוניים, יכולת עריכה ותבניות חלקי העמוד שנוצרו. רק לאחר סיום בדיקות אלו, עליך להתחיל עם ההתאמות התוכן הנוספות של העיצוב המיובא.