كيفية إعادة ترتيب العناصر على نقاط توقف مختلفة في Divi 5

يتطلب التصميم المتجاوب أكثر من تخطيطات التحجيم ، ويتطلب أيضًا التحكم في كيفية تكديس المحتوى عبر الأجهزة. يمكن أن يكون التصميم الذي يشعر بالتنظيم على سطح المكتب أمرًا مربكًا على الهاتف المحمول ، مع الأشرطة الجانبية أو العناصر الثانوية التي تدفع المحتوى الرئيسي عن العرض. يعالج Divi 5 هذا مع نظام Flexbox الجديد ، والذي يقدم هياكل الأعمدة المستجيبة المسبقة وضوابط الطلب الدقيقة.

في هذا المنشور ، سننظر في سبب إعادة ترتيب العناصر المهمة ، وكيف تجعل أدوات Flexbox الخاصة بـ Divi 5 بسيطة ، وتجول عبر خطوات لإعادة هيكلة التخطيطات عند نقاط توقف مختلفة.

لماذا تريد إعادة ترتيب العناصر

عندما ينتقل تخطيط من سطح المكتب إلى الهاتف المحمول ، لا يعكس ترتيب التراص دائمًا تجربتك المقصودة. يمكن أن ينهار تصميم سطح المكتب المتوازن المكون من ثلاثة أعمدة في مكدس رأسي حيث يأتي العمود الأيسر دائمًا أولاً ، أو دفع نموذج الاتصال أو التسجيل أو معلومات الاتصال بعيدًا عن الصفحة ، حيث قد لا يراها المستخدمون أبدًا.

اشترك في قناتنا على YouTube

يقوم نظام Flexbox من Divi 5 بإصلاح هذا من خلال السماح لك بإعادة ترتيب العناصر بصريًا عند كل نقطة توقف. يمكنك نقل CTA مباشرة تحت عنوان الهاتف المحمول ، أو إحضار الشهادات فوق جدول التسعير ، أو تسليط الضوء على معلومات الاتصال قبل المحتوى الطويل. بدلاً من أن تكون عالقًا مع منطق التراص الافتراضي للمتصفح ، فإنك تقرر التسلسل الهرمي. هذا يضمن ظهور محتوىك الأكثر أهمية دائمًا حيث يهم أكثر.

كيف يجعل Divi 5's Flexbox إعادة ترتيب سهلة

يمنحك Divi 5 تحكمًا مباشرًا في كيفية تكديس العناصر عبر نقاط التوقف. يمكنك استخدام هياكل عمود Flex Flex المصنوعة مسبقًا لإعداد تخطيطات تتكيف بشكل طبيعي ، ثم ضبط هياكل العمود وأوامر الأعمدة في كل حجم شاشة.

يعمل Flexbox مثل حاوية رائعة تعتمد على المساحة. بدلاً من تكديس المحتوى بشكل عشوائي ، يمكنك التحكم في الطلب على كل جهاز.

Divi 5 يتعامل أيضًا مع تخطيطات متداخلة ومعقدة جيدًا. يمكنك تغيير هياكل الصف وأحجام الأعمدة وترتيب الوحدة النمطية في كل نقطة توقف دون نسخ المحتوى أو الترميز.

كما أنه يدير تلقائيًا المحاذاة الرأسية وتحديد المواقع ، مما يجعل المحتوى الخاص بك يبدو هادفًا ومستجيبًا تمامًا ، وليس ترتيبًا عشوائيًا.

دليل خطوة بخطوة لإعادة ترتيب الاستجابة في Divi 5

دعنا نلقي نظرة على كيفية إعادة ترتيب العناصر في Divi 5 بالضبط باستخدام نظام Flexbox الجديد. تسير الخطوات أدناه لك من خلال إعداد هياكل العمود وضبط الطلب عند نقاط توقف مختلفة ، بحيث تظل تخطيطاتك واضحة ومتسقة على كل جهاز.

1. قم بإعداد نقاط التوقف السبع المخصصة

يمنحك Divi 5 سبع نقاط توقف بدلاً من ثلاث نقاط. يمكنك تغيير كل قيمة بكسل بحيث يبدو موقعك مباشرة على أي جهاز.

انقر فوق قائمة Ellipsis في شريط المهام الخاص بك وابحث عن مفاتيح تبديل نقطة الإيقاف. لكل منها نطاقات افتراضية ، ولكن يمكنك تغيير هذه الأرقام لتناسب جمهورك بشكل أفضل.

سترى الهاتف (أقل من 767 بكسل) ، واسعة الهاتف (أقل من 860 بكسل) ، والكمبيوتر اللوحي (تحت 980 بكسل) ، وأجهزة الكمبيوتر اللوحي (أقل من 1024 بكسل) ، وسطح المكتب (أكثر من 981 بكسل) ، وعريضة الشاشة (أكثر من 1280 بكسل) ، وعرضها (أكثر من 1440 بكسل).

بعد تشغيلها ، تظهر أيقونات صغيرة في شريط المهام الخاص بك. انقر فوق أي رمز لمعرفة كيف ينظر موقعك إلى حجم الشاشة على الفور.

بدلاً من النقر فوق كل أيقونة والقيود في الاختبار الخاص بك ، يمكنك الحصول على حافة قماشك وسحبه يسارًا أو يمينًا. يتقلص التصميم الخاص بك أو يتوسع عند سحبه ، مما يوضح كيف يتغير تخطيطك بعرض مختلف.

اسحب القماش إلى 300 بكسل وشاهد تخطيط سطح المكتب المكون من ثلاثة أعمدة يتحول إلى مكدس جوال واحد. اسحبه مرة أخرى إلى 1200 بكسل وشاهد المحتوى الخاص بك ينتشر مرة أخرى. لا تحتاج إلى تبديل أوضاع المعاينة أو تغيير حجم نافذة المتصفح.

2. الوصول إلى عناصر التحكم المرنة

انقر فوق أيقونة الإعدادات لأي صف لفتح لوحة الإعدادات على الجانب الأيمن. انتقل إلى علامة تبويب التصميم في الجزء العلوي من هذه اللوحة. تحت قائمة التخطيط ، ستجد جميع عناصر التحكم Flexbox من Divi 5. بشكل افتراضي ، يتم تحديد Flex تحت نمط التصميم.

إذا لم يتم تطبيقه على تخطيطك الحالي ، فيمكنك تغييره إلى الثني بنقرة.

قم بالتمرير لأسفل لتحديد موقع حقل اتجاه التصميم. سيحدد هذا الترتيب والطريقة التي تظهر بها الأعمدة (جنبًا إلى جنب أو أعلى وتحت بعضها البعض).

فيما يلي خيارات المحتوى المبرر للتحكم في المحاذاة والتوزيع. وفي الوقت نفسه ، تظهر خيارات عناصر المحاذاة مباشرة أسفل خيارات تحديد المواقع.

3. بنية تخطيط النقطة الدقيقة لكل حجم شاشة

أصبحت عناصر التحكم Flexbox نشطة الآن ، ولكن قد تحتاج تخطيطات سطح المكتب إلى تعديلات هيكلية للشاشات الأصغر. قد يعمل تخطيط من ثلاثة أعمدة بشكل جميل على سطح المكتب ولكنه يصبح ساحقًا ومزدحمًا على جهاز لوحي ، ويتطلب شبكة 2 × 2 بدلاً من ذلك ، حتى أكثر على جهاز محمول حيث توجد مساحة فقط لشبكة واحدة.

لحسن الحظ ، تتيح لك أيقونات الجهاز الموجود في أعلى يمين عناصر التحكم الخاصة بك معاينة تخطيطك على شاشات مختلفة وضبط إعدادات Flexbox لكل نقطة توقف. يتيح لك ذلك ضبط التصميم بحيث يبدو جيدًا ويعمل بشكل جيد على كل جهاز.

قم بالتبديل إلى نقطة توقف اللوحي وانقر فوق الزر "تغيير بنية العمود". بدلاً من الإعداد الحالي ، اختر تخطيطًا متماثلًا 2 × 2. هذا على الفور يجعل المنظر أقل هشاشة من خلال إظهار عدد أقل من البطاقات في كل صف. اضبط الفجوات الرأسية والأفقية حسب الحاجة لإلقاء نظرة متوازنة. ثم حدد عمود CTA ، وقم بتعيين فئة العمود الخاصة به على FullWidth ضمن إعدادات التحجيم ، وحدد "تنمو للملء".

يعرض إصدار الجهاز اللوحي الآن بطاقتين في وقت واحد ، مع الحفاظ على هذا المظهر الموحد. يجلس زر Call-to-action بشكل جيد في الصف في الأسفل ، مما يجعله بارزًا ، على غرار تصميم سطح المكتب. يساعد هذا التحديث في إنشاء تجربة أنظف وأكثر جاذبية تتجنب الشعور بالتشويش للعديد من الخيارات المزدحمة معًا.

بالنسبة للجوال ، استخدم خيار هيكل عمود التغيير للتبديل إلى بنية عمود واحد. في عناصر التحكم Flexbox ، اضبط اتجاه التخطيط على العكس العمود. اضبط الفجوة على ما يبدو أفضل للمحتوى الخاص بك.

4. إعادة ترتيب الأعمدة عبر نقاط التوقف

يعد استخدام قيم الطلب وسيلة رائعة لتحديد ترتيب عناصر أطفال الحاويات المرنة (في كثير من الأحيان) عبر مختلف أحجام الشاشة. تمنح علامة تبويب الطلب في إعدادات الصف كل عمود رقمًا يخبر المتصفح ، "أظهر هذا العمود في الموضع 1 ، هذا واحد في الموضع 2 ،" وهكذا. تظهر الأرقام الأدنى أولاً ، وتظهر الأرقام الأعلى أخيرًا. بسيط على هذا النحو.

يمكنك حتى استخدام الطلب "0" أو الأرقام السلبية مثل "-1" لإجبار محتوى معين على الظهور أولاً ، بغض النظر عن القيم الأخرى.

تدعم كل نقطة توقف نظام الطلب الخاص بها ، مما يتيح لك تحكمًا كاملاً في تحديد موقع العناصر عبر الأجهزة.

دعنا نلقي نظرة على مثال عملي: على سطح المكتب ، حدد العمود 1 وضبط طلبه على 1. حدد العمود 2 وضبط طلبه على "2" ، وافعل نفس الشيء لبقية العمود (العمود). يتدفق تخطيط سطح المكتب بشكل طبيعي من اليسار إلى اليمين ، وينتهي مع دعوة للعمل.

تخصيص الطلب على الأجهزة اللوحية والهواتف المحمولة

الآن ، قم بالتبديل إلى نقطة توقف الجهاز باستخدام تبديل الجهاز. وتغيير أوامر العمود:

قم بتعيين العمود 6 (Call to-action) إلى "3" بحيث يظهر في الصف الأوسط. اترك الأعمدة 1 و 2 كما هي ، العمود 3 AS 4 ، والباقي حسب الرغبة. يرى مستخدمو الكمبيوتر اللوحي الاتصال الخاص بك مباشرة بعد اقتراح القيمة ، تليها التفاصيل الداعمة.

ثم ، قم بالتبديل إلى الهاتف المحمول باستخدام تبديل الجهاز. قم بتغيير ترتيب عمود CTA إلى "3" واترك ترتيب العمودين الأولين كما هو. اجعل بقية ترتيب العمود مشابهًا لترتيب الجهاز اللوحي.

يبقى ترتيب المصدر الأساسي للمحتوى الخاص بك كما هو ، لكن CTA ينتقل من الموضع الأخير إلى الثالث دون التأثير على تخطيط سطح المكتب. وبهذه الطريقة ، يمكنك التحكم في كيفية ظهور الأقسام عند نقاط توقف مختلفة دون تكرار المحتوى الخاص بك أو إعادة هيكلة.

تحكم في كيفية تداخل كل شيء مع Divi 5

يمنحك نظام Flexbox الجديد من Divi 5 تحكمًا دقيقًا في كيفية تكديس المحتوى عبر الأجهزة. من خلال سبعة نقاط توقف قابلة للتخصيص وتوسيع نطاق القماش المباشر ، يمكنك معاينة وضبط التخطيطات في أي حجم شاشة في الوقت الفعلي.

بدلاً من الاعتماد على ترتيب التراص الافتراضي للمتصفح ، يمكنك تحديد المكان الذي تظهر فيه الأشرطة الجانبية و CTAs ومحتوى المفتاح. يتيح لك Flexbox الحفاظ على التسلسل الهرمي والوضوح على كل جهاز دون حلول أو رمز إضافي.