كيفية تصميم خمسة أعمدة مستجيبة "عرض" تخطيط مع Divi

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

هيا بنا نبدأ.

نظرة خاطفة

الأساليب المتجاوبة المستخدمة

استخدم "عرض صف مخصص" و "عرض هامش التوثيق"

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

استخدم وحدات الطول vw للتباعد ونص العنوان

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

الجزء 1: البدء

كل ما تحتاجه لهذا البرنامج التعليمي هو Divi Theme. سنستخدم Visual Builder جنبًا إلى جنب مع تخطيط الصفحة الرئيسية لشركة الهندسة المعمارية.

لذلك للبدء ، قم بإنشاء صفحة جديدة ، وقم بتسمية صفحتك بعنوان ، وانشر Visual Builder. حدد الخيار "اختيار تخطيط Premade". في التحميل من نافذة المكتبة المنبثقة ، حدد حزمة تخطيط التصميم الداخلي ثم قم بتحميل تخطيط الصفحة الرئيسية لشركة الهندسة المعمارية إلى صفحتك.

الجزء 2: إنشاء قسم العنوان

بالنسبة للمبتدئين ، قم بتكرار القسم الثاني الذي يحتوي على الدعاية الثلاث.

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

لنكمل.

في القسم الأصلي (وليس المكرر) ، احذف الدعاية الثلاث وغير هيكل عمود الصف إلى عمود واحد.

ثم قم بالتمرير لأسفل إلى الجزء السفلي من التخطيط إلى القسم الأخير وانسخ وحدة النص في العمود الأيسر.

ثم قم بلصقه داخل صف عمود واحد قمت بإنشائه للتو وحذف كل محتوى النص الموجود أسفل عنوان h2 بحيث يتبقى فقط "Let's Build Something".

الجزء 3: تخصيص الدعاية المغلوطة لتخطيط خمسة أعمدة

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

افتح إعدادات blurb للوحدة blurb في العمود الأول ثم احذف الصورة المستخدمة كرمز.

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

افتح إعدادات الدعاية الدعائية العلوية في العمود الأول واحذف النص الأساسي في مربع المحتوى.

أضف صورة خلفية وتدرجًا إلى أعلى وحدة Blurb

ثم قم بإعطاء الدعاية نفسها صورة خلفية وأضف تدرجًا لتراكب الصورة على النحو التالي:

أضف صورة الخلفية
تدرج الخلفية اللون الأيسر: rgba (255،255،255،0)
تدرج الخلفية اللون الأيمن: rgba (18،18،18،0.65)
موقف البداية: 50٪
وضع التدرج فوق صورة الخلفية: نعم

التدرج اللوني ضروري لمساعدة نص العنوان الخاص بنا ليصبح أكثر قابلية للقراءة باستخدام صور خلفية أفتح.

استخدم وحدات VW لنص العنوان والتباعد

ثم قم بتحديث إعدادات علامة تبويب التصميم كما يلي:

حجم نص العنوان: 2.7vw (سطح المكتب) ، 46 بكسل (جهاز لوحي) ، 36 بكسل (هاتف ذكي)
تباعد حرف العنوان: -3 بكسل
الهامش المخصص: 1.5vw يسار ، 1.5vw يمين
الحشو المخصص: 35vw Top ، 2vw Bottom ، 1vw Left ، 1vw Right

احفظ التغييرات.

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

تخصيص الدعاية السفلية

ثم افتح إعدادات الوحدة النمطية الثانية التي تظهر أسفل العمود الأول واحذف نص العنوان. ثم قم بتحديث ما يلي:

محاذاة النص الأساسي: يسار
لون النص الأساسي: # 666666
الحشو المخصص: 2vw Top ، 2vw Bottom ، 2vw Left ، 2vw Right

الآن وقد صممنا الدعاية المغلوطة في العمود الأول. انسخ كلاهما والصقه في كل عمود من الأعمدة المتبقية. ستحتاج أولاً إلى حذف الوحدات النمطية الأصلية للدعاية الدعائية في العمودين 2 و 3 أولاً. الآن يجب أن يبدو تصميمك هكذا.

الجزء 4: تخصيص إعدادات القسم

الآن دعنا نقوم بتحديث إعدادات القسم الخاصة بنا للحصول على خلفية بيضاء وظل مربع في الأسفل مما سيخلق مساحة لتداخل صفنا.

لون الخلفية: #ffffff
الحشو المخصص: الافتراضي أعلى ، 5vw أسفل ، افتراضي يسار ، افتراضي يمين
Box Shadow: انظر لقطة الشاشة
مربع الظل الرأسي: -200 بكسل
مربع قوة طمس الظل: 0 بكسل
لون الظل: # 121212

الجزء 5: تخصيص إعدادات الصف

الآن دعنا نعود إلى صفنا ونقوم بتحديث الإعدادات على النحو التالي:

صورة الخلفية: #ffffff
محاذاة الصف: الوسط
العرض المخصص: 89٪
عرض الحضيض: 1
الهامش المخصص: -10vw
الحشو المخصص: 3vw top ، 3vw Bottom ، 1.5vw Left ، 1.5vw Right
Box Shadow: انظر لقطة الشاشة
مربع قوة طمس الظل: 80 بكسل

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

في هذه المرحلة ، تم الانتهاء من الهيكل الأساسي للتصميم. هذا ما يبدو عليه التصميم حتى الآن.

الجزء 6: إضافة اللمسات الأخيرة

يمكننا الآن إضافة المزيد من التعديلات على التصميم لإنهائها.

مذهل الدعاية

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

الحشو المخصص: 28vw الأعلى

وللحصول على الدعاية العلوية في العمود الثالث ، قم بتغيير المساحة المتروكة العلوية إلى 30vw.

أضف قسمًا مقسمًا لإضافة نسيج إلى صف الأعمدة الخمسة

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

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

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

ها هو التصميم النهائي.

أحد الأشياء الرائعة حول تخطيط خمسة أعمدة هو أنك تحصل على تخطيط عمودين لطيف على الجهاز اللوحي.

وإليكم ما يبدو على الهاتف الذكي.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!