هل أنت جديد على حاويات Elementor Flexbox؟ لذلك قد يكون هيكل تخطيط منشئ الصفحة الجديد مربكًا بعض الشيء. ولكن لدينا ما تحتاجه.
Elementor Flexbox هو إطار التخطيط الجديد الذي يجعل تصميم موقع الويب أسهل وأكثر سهولة في الاستخدام. تمثل حاويات Flexbox تحديثًا تدريجيًا لتخطيط عمود القسم القديم الذي نعرفه جميعًا.
على الرغم من أن تخطيط عمود القسم جعل تصميم موقع الويب عمليًا باستخدام الأقسام والأقسام الفرعية والأعمدة، إلا أنه لا يزال هناك نقص في المرونة من حيث التصميم.
يمكن أن يحتوي القسم في Elementor على أعمدة وقسم فرعي فقط. كلما أضفت المزيد إلى الصفحة، كلما كان تحميل موقع الويب الخاص بك أبطأ.
ناهيك عن مدى صعوبة إنشاء تصميمات متوافقة مع الأجهزة المحمولة باستخدام هذا الهيكل القديم.
على الرغم من أن تخطيط القسم والعمود قد خدم المصممين جيدًا، فقد حان الوقت للانتقال إلى طريقة أفضل وأكثر كفاءة ومرونة لتصميم مواقع الويب باستخدام منشئ الصفحات Elementor.
لذا، إذا كنت تريد إتقان حاويات Flexbox، قم بوضع إشارة مرجعية على هذه المدونة. في دليل Elementor Flexbox هذا، سنرشدك عبر جميع تفاصيل بنية التخطيط الجديدة هذه.
سوف نفهم أيضًا كيف أنه أفضل من تخطيط عمود القسم القديم.
محتويات
- ما هي حاوية Elementor Flexbox؟
- الفرق بين الأقسام القديمة وحاويات Elementor Flex الجديدة
- فوائد استخدام حاويات Elementor Flexbox
- كيفية استخدام حاويات Elementor Flexbox (خطوة بخطوة)
- كيفية تحويل صفحة Elementor المستندة إلى القسم إلى حاوية Flexbox؟
- هل يمكنني دمج إضافات Elementor مع حاوية flexbox الجديدة؟
- وفي الختام
- الأسئلة المتداولة
ما هي حاوية Elementor Flexbox؟
حاويات Elementor Flexbox هي تطبيق Elementor لقالب Flexbox CSS في أداة إنشاء الصفحات الخاصة بها. CSS Flexbox أو Elastic Box Layout هو تخطيط ويب جديد مدعوم من CSS 3.
تم تحسينه للأداء والاستجابة، ويقدم تخطيطات تتكيف مع الأجهزة المختلفة وأحجام الشاشات.
تتيح لك حاويات Elementor Flexbox، التي تم إصدارها مع تحديث Elementor 3.6، تصميم صفحات ويب مناسبة للجهاز باستخدام حاويات مثل Flexbox CSS.
تحتوي حاويات Elementor هذه على جميع عناصر صفحتك مثل النصوص والصور والأدوات وما إلى ذلك. ولكن هذا هو الجزء الأفضل: يمكنك وضع الحاويات داخل الحاويات.
إذا كنت قد استخدمت تخطيط الأقسام والأعمدة القياسي، فأنت تعرف بالفعل مدى صعوبة العمل مع تخطيطات متعددة.
على الرغم من أننا نحصل على جميع أنواع التخطيطات مثل الكتل والجداول والسطور وما إلى ذلك، إلا أن العمل معها يعد أمرًا صعبًا ومن الصعب ضمان استجابتها.
ولكن مع Flexbox، يمكنك وضع الحاويات داخل الحاويات إلى ما لا نهاية. يمكن أن يخلق هذا إمكانيات لا حصر لها عندما يتعلق الأمر بالتخطيطات والتصميمات الفريدة.
ببساطة، الحاويات هي أقسامك الجديدة، ولكنها مرنة على المستويين الفردي والعالمي. توجد المرونة في كل جانب من جوانب الحاوية تقريبًا، سواء كان ذلك في المحاذاة أو الحشو أو الوضع في الخط.
حالات الاستخدام الشائعة لحاويات Flexbox
فيما يلي بعض حالات الاستخدام الشائعة لحاويات Flexbox:
1. الأقسام العادية
ينقسم موقع الويب بشكل أساسي إلى أقسام مثل المقدمة، والبطل، والدعوة إلى اتخاذ إجراء، وما إلى ذلك. توفر الحاويات مرونة أكبر عند تصميم أي من هذه الأقسام. يمكنك إضافة الصور ووضع النص والأزرار القابلة للنقر. وفي الوقت نفسه، يمكنك التحكم في اتجاه المحتوى الخاص بك ومواءمته وتباعده.
2. تخطيطات البطاقة
نظرًا لأن حاويات Flexbox يمكن أن تستوعب حاويات متعددة في الصفوف والأعمدة، فإنها تُستخدم بشكل شائع لإنشاء تخطيطات البطاقة. لديك سيطرة كاملة على المحاذاة والوصول والارتداء. بالإضافة إلى ذلك، تسمح لك حاويات Elementor المتداخلة بوضع عناصر واجهة مستخدم مختلفة للمحتوى في كل بطاقة.
3. معرض صور البطل
إن القدرة على دمج الحاويات الفرعية داخل الحاوية الأصلية إلى أجل غير مسمى تجعل Flexbox مثاليًا لإنشاء معارض الصور. يمكنك إنشاء معارض بتدفق أفقي أو رأسي للصور. بالإضافة إلى ذلك، يمكنك التحكم في المسافة البيضاء بين الصور، وحجم كل صورة، وحتى إضافة عناصر مثل النص والأزرار وما إلى ذلك.
4. قوالب منشئ الموضوع
تعتبر الحاويات رائعة لإنشاء قوالب لعناصر مثل الرأس أو التذييل أو الصفحة الفردية. يمكنك استخدام الحاويات لإنشاء تخطيط أساسي لهذه العناصر وحفظه. ثم يمكنك استخدامه أثناء إنشاء المزيد من الصفحات. بالإضافة إلى ذلك، فإن المحتوى الموجود في الحاوية متوافق مع الجوّال، لذا فإن الصفحات التي تم إنشاؤها باستخدام هذه القوالب سوف تتكيف مع أحجام الشاشات المختلفة.
5. العناصر المركزية
في بنية قسم العمود، كان توسيط العناصر عموديًا في القسم أمرًا صعبًا بعض الشيء. ومع ذلك، فإن الحاويات تجعل هذه المهمة أسهل. يمكنك ضبط خصائص المحاذاة والضبط على المركز لوضع عنصر في منتصف الحاوية.
الفرق بين الأقسام القديمة وحاويات Elementor Flex الجديدة
دعونا نرى الاختلافات الرئيسية بين حاوية Elementor والقسم الخاص بالإعدادات المختلفة.
1. الفرق الفني
توفر أقسام Elementor إطارًا هيكليًا لتنظيم العناصر مثل عناصر واجهة المستخدم والصور والنص وما إلى ذلك. يمكنك تقسيم قسم إلى أعمدة ووضع عناصر صفحة الويب فيها.
على العكس من ذلك، توفر حاويات Elementor Flexbox طريقة أكثر مرونة وتكيفًا لتنظيم عناصر صفحة الويب. تشبه الحاوية القسم ولكن بدون شبكة محددة مسبقًا.
بدلاً من ذلك، لديك خيار وضع الحاويات داخل الحاوية.
بالإضافة إلى ذلك، تكون عناصر واجهة المستخدم الموجودة في الأقسام كاملة العرض، بينما تكون مضمّنة في الحاويات بشكل افتراضي. لذلك، يمكنك وضع أي عدد تريده من العناصر في الحاوية الأصلية.
وكلما قمت بإضافة المزيد من العناصر، ستتغير محاذاة الحاوية وموضعها وحجمها تلقائيًا لاستيعابها.
2. الفرق البصري
الخطوة التالية فيما يتعلق بالفرق بين حاوية Elementor والقسم هي التغييرات المرئية.
يحتفظ منشئ الصفحة Elementor مع حاويات Flexbox بواجهة مستخدم منشئ الصفحات الكلاسيكية. ولكن هناك بعض التغييرات الملحوظة.
لا تزال لديك لوحة التحكم على الجانب الأيسر، حيث يمكنك الوصول إلى جميع عناصر واجهة المستخدم والعناصر والإعدادات الخاصة بك. لكن المتصفح يعرض الآن الحاويات والعناصر الموجودة أسفلها بدلاً من الانقسامات والأقسام.
يمكنك دائمًا النقر على الأيقونة + أو قم بسحب العناصر وإفلاتها لإضافتها إلى صفحة الويب الخاصة بك. والفرق الوحيد هو أنه يتعين عليك اختيار الحاوية والاتجاه بدلاً من الأقسام وعدد الأعمدة.
بالإضافة إلى ذلك، يمكنك أيضًا الحصول على خيارات جديدة تتمحور حول الحاوية مثل الاتجاه، والمحاذاة، والتبرير، وفجوة العناصر، والالتواء، وما إلى ذلك...
![الفرق المرئي في كيفية استخدام حاوية Elementor Flexbox [دليل المبتدئين]](https://blogpascher.com/wp-content/uploads/2024/09/conteneur-Elementor-Flexbox.png "الفرق البصري | الإضافات الإضافية لـ Elementor")
3. فرق الأداء
يعد فرق الأداء بين حاويات Flexbox وتخطيط عمود القسم كبيرًا، خاصة إذا كان تصميم موقع الويب الخاص بك مليئًا بالتخطيطات والأقسام الفرعية المعقدة.
لا بد أنك لاحظت أن أقسام Elementor التقليدية لها خاصية عرض تم تعيينها على أنها " كتلة ". لذلك، عند إضافة قسم أو عنصر واجهة مستخدم جديد، يتم تكديسهما فوق بعضهما البعض.
إذا كنت تريد عرضها جنبًا إلى جنب، فيجب عليك إنشاء أقسام متعددة وDOMs، مما يؤدي إلى إبطاء موقعك النهائي على الويب.
من ناحية أخرى، تستخدم حاويات Flexbox خاصية عرض تسمى " ثني"، كما هو الحال في مرنة. لذا، عند إضافة مكونات جديدة إلى حاوية، يمكنك تكديسها عموديًا أو وضعها جنبًا إلى جنب أفقيًا.
ولذلك، ليست هناك حاجة لإنشاء أقسام إضافية. بهذه الطريقة، يظل تنفيذ التعليمات البرمجية لصفحة الويب سهلاً، مما يقلل بشكل كبير من أوقات التحميل.
فوائد استخدام حاويات Elementor Flexbox
هناك العديد من المزايا لاستخدام حاويات Flexbox مقارنة بالكتل التقليدية لتصميم مواقع الويب. بعض المزايا الرئيسية هي:
1. التحكم في التخطيط الحبيبي
توفر حاويات Flexbox مستوى عاليًا من التحكم في موضع المحتوى وتخطيطه. يمكنك بسهولة إنشاء تخطيطات أفقية أو رأسية. بالإضافة إلى ذلك، يمكنك ضبط اتجاه المحتوى، والمحاذاة، والحشو، والعرض، وما إلى ذلك، على مستوى العناصر الفردية وعلى المستوى العام.
2. التخطيطات المستجيبة للجهاز
تم تصميم الأقسام المرنة الجديدة للأجهزة الصغيرة. يمكنك تغيير التخطيط بأي طريقة تريدها لأحجام الشاشات المختلفة، بما في ذلك سطح المكتب والكمبيوتر اللوحي والهاتف المحمول. ولذلك، فإن كل المحتوى الموجود على صفحات الويب الخاصة بك مناسب للأجهزة المختلفة ويمكن للمستخدم النهائي الوصول إليه بسهولة.
3. العلامات النظيفة
كما هو موضح سابقًا، فإن إنشاء أقسام أو أقسام أفقية متعددة باستخدام خاصية عرض الكتلة يؤدي إلى تضخم DOM وتشويش العلامات. ومع ذلك، تسمح الحاويات المرنة بوضع المحتوى أفقيًا دون الحاجة إلى أعمدة وأقسام. وهذا يجعل كود موقع الويب سهل التشغيل ويتم تحميله بشكل أسرع على الأجهزة المختلفة.
4. الأقسام المتداخلة اللانهائية
كان أكبر قيود أداة إنشاء الكتل التقليدية هي أنها لا يمكنها استيعاب سوى قسم فرعي واحد داخل القسم. ومع ذلك، يسمح لك Flexbox بإضافة حاوية داخل الحاوية بشكل لا نهائي. لذا يمكنك إنشاء تخطيطات أكثر تعقيدًا دون أي مشاكل أو تشويش العلامات باستخدام DOM المفرط.
5. الأقسام القابلة للنقر
في السابق، كان بإمكانك فقط جعل الأدوات الموجودة في قسم ما قابلة للنقر عليها، وليس القسم بأكمله. ولكن مع Flex Containers، يتيح لك Elementor الارتباط التشعبي بقسم كامل. تعد هذه ميزة أساسية من وجهة نظر المستخدم النهائي، حيث لم يعد بحاجة إلى البحث عن عناصر محددة قابلة للنقر للانتقال إلى صفحة أخرى، ولكن انقر فوق القسم بدلاً من ذلك.
كيفية استخدام حاويات Elementor Flexbox (خطوة بخطوة)
تشبه تجربة منشئ الصفحة Elementor Flexbox تجربة منشئ الكتلة القياسي من Elementor. لذلك، سواء كنت جديدًا تمامًا على Elementor أو قمت بالتبديل من المُنشئ القديم، فلن تجد صعوبة في التعود عليه.
قد تتبادر إلى ذهنك أسئلة مختلفة، مثل: "كيفية تمكين/تمكين الحاوية في Elementor؟" كيفية استخدام الحاويات في Elementor؟ كيفية إضافة حاوية في Elementor؟ » هذا القسم سوف يساعدك على الإجابة عليها.
لمساعدتك على البدء، إليك خطوات استخدام حاويات Flexbox لتصميم موقع ويب:
الخطوة 1. قم بتمكين Flexbox في إعدادات Elementor
الخطوة الأولى لاستخدام Flexbox في Elementor هي تنشيط Flexbox. لذا، توجه إلى إعدادات Elementor من لوحة تحكم WordPress. بعد ذلك، انقر فوق علامة التبويب "الخبرة"، ثم قم بالتمرير لأسفل، وابحث عن حاوية Flexbox وحدد الخيار "نشط" من القائمة المنسدلة. وأخيرا، احفظ التغييرات وانتقل إلى الخطوة التالية.
ملاحظة: في مواقع الويب الجديدة، تكون حاوية Flexbox نشطة بشكل افتراضي.
الخطوة 2. إنشاء صفحة ويب جديدة
نحتاج الآن إلى إنشاء صفحة جديدة كما نفعل عادةً. انتقل إلى قسم الصفحات، وحدد كافة الصفحات، ثم انقر أضف صفحة.
الخطوة 3. افتح العنصر
سيكون لديك الآن نافذة منشئ صفحات WordPress على شاشتك. أعط عنوانا لهذه الصفحة الجديدة وانقر على تحرير مع إليمنتور للوصول إلى حاويات Flexbox.
![Open Elementor: كيفية استخدام Elementor Flexbox Container [دليل المبتدئين]](https://blogpascher.com/wp-content/uploads/2022/11/Modifier-avec-Elementor.png "افتح Elementor | الإضافات الإضافية لـ Elementor")
الخطوة 4. أضف حاوية جديدة
ستظهر واجهة مستخدم منشئ صفحات Elementor المألوفة على شاشتك. بالإضافة إلى ذلك، يمكنك سحب وإسقاط حاوية من الشريط الجانبي لإضافة حاوية جديدة أو النقر فوق الرمز + واختيار الهيكل المطلوب.
![إضافة حاوية جديدة كيفية استخدام حاوية Elementor Flexbox [دليل المبتدئين]](https://blogpascher.com/wp-content/uploads/2024/09/Ajouter-un-nouveau-conteneur.gif "إضافة حاوية جديدة | الإضافات الإضافية لـ Elementor")
الخطوة 5. صمم الحاوية
بمجرد إضافة حاوية، يمكنك الوصول إلى العديد من خيارات التخصيص. يمكنك تغيير الخيارات مثل نوع الحاوية والعرض والارتفاع والاتجاه والمحاذاة وما إلى ذلك.
![كيفية استخدام حاوية Elementor 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 "سحب وإفلات الأدوات إلى الحاويات | الإضافات الإضافية لـ Elementor")
الخطوة 7. تخصيص الأدوات
مثل إعدادات الحاوية العامة، يمكنك أيضًا تخصيص محتويات الحاوية. يمكنك تخصيص خيارات مثل الاتجاه، والمحاذاة، والتبرير، والفجوة، والالتفاف، وما إلى ذلك.
الخطوة 8. قم بنشر صفحة ويب Flexbox الأولى الخاصة بك
يمكنك إنشاء العديد من الحاويات وتكرارها وتبديل مواقعها. كرر الخطوات أثناء إضافة المزيد من العناصر، وبمجرد الانتهاء، انقر فوق الزر نشر لوضع صفحة الويب الخاصة بك على الإنترنت. يمكنك أيضًا النقر فوق الزر "معاينة" للتفاعل مع صفحة الويب Flexbox الجديدة الخاصة بك.
كيفية تحويل صفحة Elementor المستندة إلى القسم إلى حاوية Flexbox؟
يمكنك بسهولة تحويل بنية عمود القسم إلى حاوية Flexbox. ما عليك سوى اتباع هذه الخطوات البسيطة:
الخطوة 1. حدد القسم
حدد القسم الذي تريد تحويله إلى حاوية من خلال النقر على النقاط الست الموجودة أعلى القسم. وبدلاً من ذلك، يمكنك أيضًا اختيار القسم في القائمة المنبثقة Elementor Navigator.
الخطوة 2. تحويل القسم إلى حاوية
بمجرد تحديد القسم، سترى زر CONVERT في علامة التبويب Layout. انقر عليه لتحويل القسم إلى حاوية.
الخطوة 3. تحديث التخطيط
بمجرد اكتمال التحويل، سترى نسختين منفصلتين من القسم المحدد. الجزء العلوي هو الجزء الأصلي، بينما الجزء السفلي هو الحاوية الجديدة. احذف القسم الأصلي وانقر فوق "تحديث" لحفظ التخطيط.
كرر الخطوات لكل قسم تخطط لتحويله إلى حاوية.
هل يمكنني دمج إضافات Elementor مع حاوية flexbox الجديدة؟
نعم، يمكنك الجمع بين إضافات Elementor وحاويات Flexbox. ليست هناك حاجة إلى حل بديل حيث تتكامل حاويات Flexbox بسلاسة مع الوظائف الإضافية والمكونات الإضافية التابعة لجهات خارجية.
في الواقع، تعد الإضافات ضرورية لتمكين الميزات المتقدمة وخيارات التخصيص في منشئ صفحات Elementor. يمكنك التثبيت
الموارد متعلق
- كيفية استخدام الخطوط العالمية في Elementor
- كيفية إنشاء زر عائم باستخدام مؤشر Elementor Z
- كيفية إنشاء صفحة 404 في Elementor
- كيفية إنشاء صورة الأكورديون مع JetTabs في Elementor
- كيفية إنشاء قائمة ملء الشاشة في Elementor
وفي الختام
تعد حاوية Flexbox الخاصة بـ Elementor أداة قوية تعمل على تغيير الطريقة التي تصمم بها صفحات الويب الخاصة بك وبنيتها. بفضل ميزاته المرنة، يمكنك إدارة المحاذاة والتوزيع والتنسيقمنظمة من العناصر الخاصة بك بدقة استثنائية. سواء كنت ترغب في إنشاء تخطيطات معقدة أو ببساطة تحسين استجابة تصميماتك، فإن Flexbox يقدم حلاً أنيقًا وبديهيًا.
باستخدام حاوية Flexbox، يمكنك الوصول إلى مجموعة من عناصر التحكم التي تسهل إدارة المساحات والمحاذاة، مع تبسيط التعديلات اللازمة لتقديم عرض تقديمي سلس عبر جميع الأجهزة. لا يعمل هذا المستوى من التخصيص على تحسين تجربة المستخدم فحسب، بل يعمل أيضًا على تحسين عملية التصميم من خلال جعل صفحاتك أكثر ديناميكية وقدرة على التكيف.
لا تتردد في استكشاف الخيارات المتنوعة التي تقدمها Flexbox لاكتشاف كيف يمكنها إثراء مشاريع Elementor الخاصة بك. من خلال الاستخدام الصحيح لهذه الأدوات، يمكنك إنشاء تخطيطات سلسة واحترافية تجذب زوار موقعك وتجذبهم. استمر في التجربة والاستفادة من الإمكانيات التي توفرها Elementor لتحقيق أقصى استفادة من تصميمات الويب الخاصة بك.
لذا ! لقد أوضحنا لك للتو كيفية استخدام حاوية Elementor Flexbox. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
الأسئلة المتداولة
ما الفرق بين حاوية Flexbox والقسم في Elementor؟
تستضيف أقسام Elementor عناصر واجهة مستخدم كاملة العرض على الصفحة، ولكن مع حاويات Flexbox، تكون عناصر واجهة المستخدم مضمنة داخل الحاوية. بالإضافة إلى ذلك، تكون الأقسام صلبة ويمكن أن تحتوي على قسم داخلي واحد فقط، بينما يمكن أن تتداخل الحاويات المرنة إلى أجل غير مسمى.
هل يمكنني استخدام حاويات Elementor Flexbox مع أي سمة WordPress؟
نعم، يمكنك استخدام حاويات Elementor Flexbox مع أي منها وورد موضوع. كل ما عليك فعله هو تمكين حاويات Flexbox في إعدادات Elementor، وستكون متاحة في المرة التالية التي تقوم فيها بالوصول إلى أداة إنشاء الصفحات.
كيف يمكنني جعل حاويات Elementor Flexbox الخاصة بي تستجيب لأحجام الشاشات المختلفة؟
باستخدام حاوية Flexbox Elementor، لديك خيارات متعددة لضمان استجابة محتوى صفحة الويب الخاصة بك لأحجام الشاشات المختلفة. على سبيل المثال، يمكنك تحديد اتجاه محتوى الحاوية لعرض المحتوى في صفوف أو أعمدة. يمكنك أيضًا محاذاة المحتوى أفقيًا وعموديًا وتحديد وقت التفاف المحتوى داخل كل عنصر. بالإضافة إلى ذلك، يمكنك أيضًا تمكين/تعطيل عنصر واجهة مستخدم بناءً على الجهاز.
