האם אתה חדש במכולות של Elementor Flexbox? אז מבנה פריסת בונה הדפים החדש יכול להיות מעט מבלבל. אבל יש לנו את מה שאתה צריך.
Elementor Flexbox היא מסגרת הפריסה החדשה שהופכת את עיצוב האתר לקל וידידותי יותר למשתמש. מיכלי Flexbox מסמנים עדכון מצטבר לפריסת המדור-עמודה הישנה שכולנו מכירים.
למרות שהפריסה של המדור-עמודה הפכה את עיצוב האתר לפרקטי על ידי שימוש בקטעים, תת-סעיפים ועמודות, עדיין היה חוסר גמישות מבחינת העיצוב.
לקטע ב-Elementor יכולים להיות רק עמודות ותת-סעיף. ככל שתוסיף יותר לדף, האתר שלך ייטען לאט יותר.
שלא לדבר על כמה קשה ליצור עיצובים ידידותיים לנייד עם המבנה הישן הזה.
בעוד פריסת המדורים והעמודות שירתו את המעצבים היטב, הגיע הזמן לעבור לדרך טובה יותר, יעילה וגמישה יותר לעיצוב אתרים באמצעות בונה הדפים של Elementor.
לכן, אם אתה רוצה לשלוט בקונטיינרים של Flexbox, סמן את הבלוג הזה. במדריך זה של Elementor Flexbox, נדריך אותך בכל הפרטים של מבנה הפריסה החדש הזה.
נבין גם איך זה טוב יותר מהפריסה הישנה של הסעיף-עמודה.
תוכן
מהו מיכל אלמנטור פלקסבוקס?
מיכלי Elementor Flexbox הם היישום של Elementor של תבנית Flexbox CSS בבונה הדפים שלהם. CSS Flexbox או Flexible Box Layout היא פריסת אינטרנט חדשה המופעלת על ידי CSS 3.
הוא מותאם לביצועים ותגובתיות, ומציע פריסות שמתאימות למכשירים וגדלים שונים של מסך.
שוחרר עם עדכון Elementor 3.6, Elementor Flexbox Containers מאפשרים לך לעצב דפי אינטרנט ידידותיים למכשירים באמצעות קונטיינרים כמו Flexbox CSS.
מיכלי Elementor אלה מכילים את כל הרכיבים של הדף שלך כגון טקסט, תמונות, ווידג'טים וכו'. אבל הנה החלק הכי טוב: אתה יכול לשים מכולות בתוך מכולות.
אם השתמשת בפריסת הסעיפים-עמודות הסטנדרטית, אתה כבר יודע כמה קשה לעבוד עם פריסות מרובות.
למרות שאנו מקבלים כל מיני פריסות כמו בלוקים, טבלאות, inlines וכו', העבודה איתם היא טרחה וקשה להבטיח את היענותם.
אבל, עם Flexbox, אתה יכול למקם מכולות בתוך מכולות באינסוף. זה יכול ליצור אינסוף אפשרויות בכל הנוגע לפריסות ועיצובים ייחודיים.
במילים פשוטות, מיכלים הם הקטעים החדשים שלך, אבל הם גמישים ברמה האישית והעולמית. גמישות נמצאת כמעט בכל היבט של מיכל, בין אם זה יישור, ריפוד או מיקום בשורה.
מקרי שימוש נפוצים עבור מיכלי Flexbox
להלן כמה מקרי שימוש פופולריים עבור מיכלי Flexbox:
1. מדורים רגילים
אתר אינטרנט מחולק בעיקר לחלקים כמו מבוא, גיבור, קריאה לפעולה וכו'. מיכלים מספקים הרבה יותר גמישות בעת תכנון כל אחד מהחלקים הללו. אתה יכול להוסיף תמונות, למקם טקסט וכפתורים הניתנים ללחיצה. במקביל, אתה יכול לשלוט בכיוון, היישור והמרווח של התוכן שלך.
2. פריסות כרטיסים
מכיוון שמיכלי Flexbox יכולים לארח קונטיינרים מרובים בשורות ובעמודות, הם משמשים בדרך כלל ליצירת פריסות כרטיסים. יש לך שליטה מלאה על יישור, טווח הגעה והלבשה. בנוסף, מיכלי Elementor מקוננים מאפשרים לך לשים ווידג'טים של תוכן שונים בכל כרטיס.
3. גלריית תמונות גיבורים
היכולת לקנן מיכלי צאצא בתוך מיכל אב ללא הגבלת זמן הופכת את Flexbox לאידיאלית ליצירת גלריות תמונות. אתה יכול ליצור גלריות עם זרימה אופקית או אנכית של תמונות. בנוסף, אתה יכול לשלוט ברווח הלבן בין תמונות, בגודל של כל תמונה, ואפילו להוסיף אלמנטים כמו טקסט, כפתורים וכו'.
4. תבניות בונה נושאים
מיכלים מצוינים ליצירת תבניות עבור אלמנטים כמו כותרת עליונה, כותרת תחתונה או עמוד בודד. אתה יכול להשתמש בקונטיינרים כדי ליצור פריסה בסיסית עבור אלמנטים אלה ולשמור אותה. לאחר מכן תוכל להשתמש בו בעת יצירת דפים נוספים. בנוסף, התוכן בקונטיינר מותאם לנייד, כך שדפים שנוצרו באמצעות תבניות אלו יתאימו לגדלים שונים של מסך.
5. אלמנטים ממורכזים
במבנה של חתך-עמוד, מרכז אנכי של אלמנטים בחתך היה קצת קשה. עם זאת, מיכלים מקלים על משימה זו. אתה יכול להגדיר את מאפייני היישור וההצדקה למרכז כדי למקם אלמנט באמצע המיכל.
הבדל בין חלקים ישנים למיכלי אלמנטור פלקס חדשים
בוא נראה את ההבדלים העיקריים בין מיכל ה-Elementor לבין הסעיף על הגדרות שונות.
1. הבדל טכני
קטעי Elementor מספקים מסגרת מבנית לארגון אלמנטים כמו ווידג'טים, תמונות, טקסט וכו'. אתה יכול לחלק קטע לעמודות ולהציב בהן רכיבי דף אינטרנט.
להיפך, מכולות Elementor Flexbox מציעות דרך גמישה והתאמה יותר לארגון אלמנטים של דפי אינטרנט. מיכל הוא כמו קטע אבל ללא רשת מוגדרת מראש.
במקום זאת, יש לך אפשרות למקם מכולות בתוך מכולה.
בנוסף, ווידג'טים במקטעים הם ברוחב מלא, בעוד שבמכולות הם מוטבעים כברירת מחדל. לכן, אתה יכול למקם כמה אלמנטים שאתה רוצה במיכל אב.
וככל שתוסיף עוד אלמנטים, היישור, המיקום והגודל של המיכל ישתנו אוטומטית כדי להתאים אותם.
2. הבדל ויזואלי
השלב הבא בהבדל בין מיכל Elementor למקטע הוא השינויים החזותיים.
בונה הדפים של אלמנטור עם מיכלי Flexbox שומר על ממשק המשתמש הקלאסי של בונה הדפים. אבל יש כמה שינויים בולטים.
עדיין יש לך את לוח המחוונים בצד שמאל, שבו תוכל לגשת לכל הווידג'טים, האלמנטים וההגדרות שלך. אבל הדפדפן מציג כעת מכולות ואלמנטים מתחת במקום פיצולים ומקטעים.
אתה תמיד יכול ללחוץ על הסמל + או גרור ושחרר אלמנטים כדי להוסיף אותם לדף האינטרנט שלך. ההבדל היחיד הוא שאתה צריך לבחור מיכל וכיוון במקום קטעים ומספר עמודות.
בנוסף, אתה גם מקבל אפשרויות חדשות ממוקדות מיכל כמו כיוון, יישור, הצדקה, פער אלמנט, עיוות וכו'...
![הבדל חזותי לגבי אופן השימוש ב-Elementor Flexbox Container [מדריך למתחילים]](https://blogpascher.com/wp-content/uploads/2024/09/conteneur-Elementor-Flexbox.png "הבדל חזותי | תוספות הפלוס עבור אלמנטור")
3. הבדל ביצועים
ההבדל בביצועים בין מיכלי Flexbox לבין פריסת עמודות מדור הוא עצום, במיוחד אם עיצוב האתר שלך מלא בפריסות ותתי סעיפים מורכבים.
בטח שמתם לב שלחלקים המסורתיים של Elementor יש מאפיין תצוגה מוגדר כ" גוש ". לכן, כאשר אתה מוסיף קטע או ווידג'ט חדש, הם נערמים זה על גבי זה.
אם אתה רוצה להציג אותם זה לצד זה, עליך ליצור מספר פיצולים ו-DOMs, מה שמאט את האתר הסופי שלך.
מצד שני, מיכלי Flexbox משתמשים במאפיין תצוגה שנקרא " לְהַגמִישׁ", כמו בגמישות. אז כאשר אתה מוסיף רכיבים חדשים למיכל, אתה יכול לערום אותם אנכית או למקם אותם זה לצד זה אופקית.
לכן, אין צורך ליצור חלוקות נוספות. בדרך זו, קוד דף האינטרנט נשאר קל לביצוע, ומצמצם משמעותית את זמני הטעינה.
יתרונות השימוש במיכלי אלמנטור פלקסבוקס
ישנם מספר יתרונות לשימוש במיכלי Flexbox על פני בלוקים מסורתיים לעיצוב אתרים. כמה מהיתרונות העיקריים הם:
1. בקרת פריסה גרעינית
מיכלי Flexbox מספקים רמה גבוהה של שליטה על מיקום התוכן והפריסה. אתה יכול בקלות ליצור פריסות אופקיות או אנכיות. בנוסף, אתה יכול להגדיר כיוון תוכן, יישור, ריפוד, רוחב וכו', ברמת רכיב בודד וברמה גלובלית.
2. פריסות רספונסיביות למכשיר
החלקים הגמישים החדשים מיועדים למכשירים קטנים. אתה יכול לשנות את הפריסה בכל דרך שתרצה עבור גדלי מסך שונים, כולל שולחן עבודה, טאבלט ונייד. לכן, כל התוכן בדפי האינטרנט שלך מתאים למכשירים שונים ונגיש בקלות למשתמש הקצה.
3. סימון נקי
כפי שהוסבר קודם, יצירת מקטעים או חלוקות אופקיים מרובות עם מאפיין התצוגה בלוק יוצרת נפיחות DOM ומבלבלת את הסימון. עם זאת, מיכלי Flex מאפשרים מיקום אופקי של תוכן מבלי לדרוש עמודות ומקטעים. זה הופך את קוד האתר לקל להפעלה ונטען מהר יותר במכשירים שונים.
4. מקטעים מקוננים אינסופיים
המגבלה הגדולה ביותר של בונה הבלוקים המסורתי הייתה שהוא יכול לאכלס רק תת-סעיף אחד בתוך חלק. עם זאת, Flexbox מאפשר לך להוסיף מיכל בתוך מיכל באופן אינסופי. אז אתה יכול ליצור פריסות מורכבות יותר ללא בעיות או לעמוס את הסימון ב-DOM מוגזם.
5. קטעים הניתנים ללחיצה
בעבר, אתה יכול להפוך את הווידג'טים בקטע לניתנים ללחוץ, לא את הקטע כולו. אבל עם Flex Containers, Elementor מאפשר לך קישור למקטע שלם. זוהי תכונה חיונית מנקודת המבט של משתמש הקצה, שכן הוא כבר לא צריך לחפש אלמנטים ספציפיים הניתנים ללחיצה כדי לעבור לעמוד אחר, אלא ללחוץ על הקטע במקום זאת.
כיצד להשתמש במיכלי Elementor Flexbox (שלב אחר שלב)
חוויית בונה הדפים של Elementor Flexbox דומה לבונה הבלוקים הסטנדרטי של Elementor. לכן, בין אם אתה חדש לגמרי ב-Elementor ובין אם אתה עובר מהבנאי הישן, לא תהיה לך בעיה להתרגל לזה.
ייתכן שיש לך שאלות שונות בראש, כגון: "כיצד להפעיל/לאפשר מיכל ב-Elementor?" כיצד להשתמש בקונטיינרים באלמנטור? איך מוסיפים קונטיינר באלמנטור? » סעיף זה יעזור לך לענות עליהם.
כדי לעזור לך להתחיל, הנה השלבים לשימוש במיכלי Flexbox לעיצוב אתר אינטרנט:
שלב 1. הפעל את Flexbox בהגדרות Elementor
הצעד הראשון לשימוש ב-Flexbox ב-Elementor הוא הפעלת Flexbox. אז עברו להגדרות Elementor מלוח המחוונים של וורדפרס. לאחר מכן, לחץ על הכרטיסייה חוויה, גלול מטה, מצא את מיכל ה-Flexbox ובחר באפשרות Active מהתפריט הנפתח. לבסוף, שמור את השינויים ועבור לשלב הבא.
הערה: באתרים חדשים, מיכל ה-Flexbox פעיל כברירת מחדל.
שלב 2. צור דף אינטרנט חדש
כעת עלינו ליצור דף חדש כפי שאנו עושים בדרך כלל. עבור למקטע דפים, בחר כל הדפים ולחץ הוסף דף.
שלב 3. פתח את Elementor
כעת יהיה לך חלון בונה דפי וורדפרס על המסך שלך. תן כותרת לדף החדש הזה ולחץ על ערוך עם אלמנט כדי לגשת למיכלי Flexbox.
![פתח את Elementor: כיצד להשתמש ב-Elementor Flexbox Container [מדריך למתחילים]](https://blogpascher.com/wp-content/uploads/2022/11/Modifier-avec-Elementor.png "פתח את אלמנטור | תוספות הפלוס עבור אלמנטור")
שלב 4. הוסף מיכל חדש
ממשק משתמש מוכר של בונה דפים של Elementor יופיע על המסך שלך. בנוסף, אתה יכול לגרור ולשחרר מיכל מהסרגל הצדדי כדי להוסיף מיכל חדש או ללחוץ על הסמל + ובחר את המבנה הרצוי.
![הוסף מיכל חדש כיצד להשתמש במיכל Elementor Flexbox [מדריך למתחילים]](https://blogpascher.com/wp-content/uploads/2024/09/Ajouter-un-nouveau-conteneur.gif "הוסף מיכל חדש | תוספות הפלוס עבור אלמנטור")
שלב 5. סגנון המיכל
לאחר הוספת מיכל, תוכל לגשת לאפשרויות התאמה אישית רבות. אתה יכול לשנות אפשרויות כמו סוג מיכל, רוחב, גובה, כיוון, יישור וכו'.
![מיכל עיצוב כיצד להשתמש במיכל אלמנטור Flexbox [מדריך למתחילים]](https://blogpascher.com/wp-content/uploads/2024/09/Styliser-le-conteneur.png "עצב את המיכל » BlogPasCher")
שלב 6. גרור ושחרר ווידג'טים לתוך מיכלים
הוספת ווידג'טים למכולות היא גם פשוטה. כל שעליך לעשות הוא לבחור את הווידג'ט הרצוי מהכרטיסייה אלמנטים, ולאחר מכן גרור ושחרר אותו על הסמל + במיכל.
![גרור ושחרר ווידג'טים למכולות כיצד להשתמש במיכל Elementor Flexbox [מדריך למתחילים]](https://blogpascher.com/wp-content/uploads/2024/09/Glisser-deposer-des-widgets-dans-des-conteneurs.gif "גרור ושחרר ווידג'טים למכולות | תוספות הפלוס עבור אלמנטור")
שלב 7. התאמה אישית של ווידג'טים
כמו הגדרות מיכל גלובליות, אתה יכול גם להתאים אישית את התוכן של מיכל. אתה יכול להתאים אישית אפשרויות כמו כיוון, יישור, הצדקה, פער, גלישה וכו'.
שלב 8. פרסם את דף האינטרנט הראשון שלך ב-Flexbox
אתה יכול ליצור קונטיינרים רבים, לשכפל אותם ולהחליף את המיקומים שלהם. חזור על השלבים כאשר אתה מוסיף פריטים נוספים, ולאחר שתסיים, לחץ על הכפתור לפרסם כדי לשים את דף האינטרנט שלך באינטרנט. אתה יכול גם ללחוץ על כפתור התצוגה המקדימה כדי ליצור אינטראקציה עם דף האינטרנט החדש של Flexbox.
כיצד להמיר עמוד אלמנטור מבוסס מקטע למיכל Flexbox?
אתה יכול בקלות להמיר מבנה מקטע-עמודה למיכל Flexbox. פשוט בצע את השלבים הפשוטים הבאים:
שלב 1. בחר סעיף
בחר את הקטע שברצונך להמיר למיכל על ידי לחיצה על שש הנקודות בחלק העליון של הקטע. לחלופין, אתה יכול גם לבחור את הקטע בחלון הקופץ של Elementor Navigator.
שלב 2. המר מקטע למכולה
לאחר שבחרתם קטע, תראו את כפתור ההמרה בלשונית פריסה. לחץ עליו כדי להמיר את הקטע למיכל.
שלב 3. עדכן פריסה
לאחר השלמת ההמרה, תראה שתי גרסאות נפרדות של החלק הנבחר. החלק העליון הוא החלק המקורי, ואילו התחתון הוא המיכל החדש. מחק את הקטע המקורי ולחץ על עדכן כדי לשמור את הפריסה.
חזור על השלבים עבור כל חלק שאתה מתכנן להמיר למיכל.
האם אני יכול לשלב תוספות Elementor עם מיכל ה-flexbox החדש?
כן, אתה יכול לשלב תוספות Elementor עם מיכלי Flexbox. אין צורך בפתרון עוקף מכיוון שמיכלי Flexbox משתלבים בצורה חלקה עם תוספים ותוספים של צד שלישי.
למעשה, תוספות נחוצות כדי לאפשר תכונות מתקדמות ואפשרויות התאמה אישית בבונה הדפים של Elementor. אתה יכול להתקין
משאבים נלווה
- כיצד להשתמש בגופנים גלובליים ב- Elementor
- כיצד ליצור כפתור צף עם Elementor Z Index
- כיצד ליצור דף 404 באלמנטור
- כיצד ליצור אקורדיון תמונה עם JetTabs באלמנטור
- כיצד ליצור תפריט מסך מלא באלמנטור
סיכום
מיכל Flexbox של אלמנטור הוא כלי רב עוצמה שמשנה את הדרך בה אתה מעצב ומבנה את דפי האינטרנט שלך. עם התכונות הגמישות שלו, אתה יכול לנהל יישור, הפצה וארגון של האלמנטים שלך בדיוק יוצא דופן. בין אם אתה רוצה ליצור פריסות מורכבות או פשוט לשפר את ההיענות של העיצובים שלך, Flexbox מציעה פתרון אלגנטי ואינטואיטיבי.
באמצעות מיכל ה-Flexbox, יש לך גישה למגוון פקדים המקלים על ניהול החללים והיישורים, תוך פישוט ההתאמות הנדרשות למצגת חלקה בכל המכשירים. רמה זו של התאמה אישית לא רק משפרת את חווית המשתמש, אלא גם מייעלת את תהליך העיצוב על ידי הפיכת הדפים שלך לדינמיים ומתאימים יותר.
אל תהסס לחקור את האפשרויות השונות שמציעה Flexbox כדי לגלות כיצד הם יכולים להעשיר את פרויקטי ה-Elementor שלך. בעזרת שימוש נכון בכלים אלה, אתה יכול ליצור פריסות חלקות ומקצועיות שמושכות את המבקרים שלך ומשתפות אותם. המשך להתנסות ולנצל את האפשרויות שמציעה אלמנטור כדי להפיק את המרב מעיצובי האינטרנט שלך.
אז! רק הראינו לכם כיצד להשתמש במיכל ה- Elementor Flexbox. אם יש לך חששות לגבי איך להגיע לשם, ספר לנו בפנים commentaires.
עם זאת, תוכלו גם להתייעץ המשאבים שלנו, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט, עיין במדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.
אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.
שאלות נפוצות
מה ההבדל בין Flexbox Container ל-Section באלמנטור?
חלקי Elementor מארחים ווידג'טים ברוחב מלא בדף, אבל עם מיכלי Flexbox, הווידג'טים נמצאים בתוך קונטיינר. בנוסף, החלקים קשיחים ויכולים להיות להם רק חלק פנימי אחד, בעוד שניתן לקנן מיכלי Flex ללא הגבלת זמן.
האם אני יכול להשתמש ב-Elementor Flexbox Containers עם כל נושא וורדפרס?
כן, אתה יכול להשתמש במיכלי Elementor Flexbox עם כל מיכל וורדפרס. כל מה שאתה צריך לעשות הוא להפעיל את מיכלי Flexbox בהגדרות Elementor, והם יהיו זמינים בפעם הבאה שתיגש לבונה הדפים.
כיצד אוכל להפוך את מיכלי ה- Elementor Flexbox שלי לרספונסיביים בגדלים שונים של מסך?
עם מיכל Flexbox Elementor, יש לך אפשרויות מרובות כדי להבטיח שתוכן דף האינטרנט שלך מגיב בגדלי מסך שונים. לדוגמה, אתה יכול לבחור את כיוון התוכן של המכולה כדי להציג תוכן בשורות או בעמודות. אתה יכול גם ליישר תוכן אופקית ואנכית ולהחליט מתי לעטוף תוכן בתוך כל אלמנט. בנוסף, אתה יכול גם להפעיל/לבטל ווידג'ט המבוסס על המכשיר.
