تصميم قابل لإعادة الاستخدام لإنشاء تصميمات إطار فريدة باستخدام Divi
نشرت: 2018-09-27يمكن أن يكون بناء تصميمات إطارات فريدة لصفوفك باستخدام Divi طريقة مفيدة (وممتعة) لتنظيم محتوى صفحتك بطريقة إبداعية. من خلال الجمع بين فواصل أقسام Divi مع هيكل صف مضغوط ، يمكنك استكشاف إمكانيات تصميم لا حصر لها لتأطير المحتوى الخاص بك. ربما تكون قد شاهدت بالفعل هذه التقنية واردة في البرامج التعليمية السابقة أو في بعض تخطيطاتنا المعدة مسبقًا. لكن ، اليوم ، اعتقدت أنني سأريك طريقة سهلة لاستكشاف تقنية التصميم هذه بنفسك. في هذا البرنامج التعليمي ، سأوضح لك كيفية إنشاء تخطيط قسم يمكن إعادة استخدامه بسرعة ويمكن حفظه في مكتبتك. بعد ذلك ، يمكنك استخدام هذا التخطيط لاستكشاف تصميمات إطارات وأنظمة ألوان جديدة. يعمل التخطيط من خلال تأطير صفك بتصميم فريد ، بحيث يمكن استخدام جميع هياكل ووحدات الأعمدة داخل الصف.
هيا بنا نبدأ.
إنشاء تخطيط تصميم الإطار القابل لإعادة الاستخدام
لبدء الأمور ، دعنا ننشئ قسمًا جديدًا بتخطيط عمود واحد. لا نحتاج إلى إضافة أي وحدات في هذه المرحلة. بدلاً من ذلك ، سنقوم بتصميم صفنا وقسمنا أولاً ، حتى نتمكن من ملء صفنا بأي محتوى نريده لاحقًا.
صمم الصف
قم بتحديث إعدادات الصف كما يلي:
لون الخلفية: # 333333
محاذاة الصف: الوسط
العرض المخصص: 775 بكسل
عرض المزراب: 2
الحشو المخصص: 130 بكسل للأعلى ، 130 بكسل للأسفل ، 50 بكسل لليسار ، 50 بكسل لليمين
الهامش المخصص: 0 بكسل للأعلى و 0 بكسل للأسفل
تصميم القسم
قم بتحديث إعدادات القسم كما يلي:
لون الخلفية: #ffffff
نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: #ffffff
نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: #ffffff
بعد ذلك ، ستقوم بتعيين المساحة المتروكة العلوية والسفلية على 0 بكسل وإنشاء بعض المساحة العلوية والسفلية باستخدام حد كما يلي:
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل
عرض الحد العلوي: 5vw
لون الحد العلوي: #ffffff
عرض الحد السفلي: 5vw
لون الحد السفلي: #ffffff
سيؤدي إنشاء التباعد للقسم باستخدام الحد العلوي والسفلي إلى زيادة المساحة المتاحة لمقسم القسم الذي سيتداخل مع الصف. بهذه الطريقة يمكنك اختيار أي ارتفاع للمقسم للتصميم الخاص بك.
احفظ التخطيط في مكتبتك
هذا كل شيء بالنسبة لهيكل التخطيط الأساسي لتصميم الصف المؤطر الخاص بك. في هذه المرحلة ، نريد حفظ هذا القسم في مكتبة Divi من أجل استخدام تخطيط القسم للتصاميم المستقبلية.
انقر فوق أيقونة Save to Library في قائمة القسم.
ثم أدخل اسمًا للتخطيط (شيء مثل "مخطط إطار الصف") وانقر فوق الزر حفظ في المكتبة.
استكمال تصميم الإطار رقم 1
الآن بعد أن تم حفظ تخطيط القسم الخاص بنا للمساعي المستقبلية ، دعنا نضيف بعض المحتوى إلى صفنا لإكمال مثال التصميم الأول.
تغيير هيكل العمود
بالنسبة لهذا التصميم ، أعتقد أن إضافة معرض صور من ستة أعمدة سيكون أمرًا رائعًا. سيسمح لنا هيكل العمود الصغير بإنشاء مجموعة صغيرة من الصور مؤطرة بشكل جيد داخل الصف الضيق.
للقيام بذلك ، قم أولاً بتغيير بنية الصف إلى تخطيط ستة أعمدة.
إضافة محتوى إلى الصف
ثم أضف ثلاث وحدات صور (مع صور) لكل عمود. أنا أستخدم صورًا ذات اتجاه رأسي (بدلاً من أفقي) بأحجام / أبعاد مختلفة.
ها هو التصميم النهائي.
نصيحة تصميم مكافأة
قبل أن نواصل استكشاف المزيد من إمكانيات تصميم الإطارات ، أردت أن أوضح خدعة سهلة لتوسيع إطارك إلى جانب واحد من الصفحة. للقيام بذلك ، انتقل إلى إعدادات القسم وأضف تدرجًا للخلفية على النحو التالي:
لون الخلفية متدرج إلى اليسار: # 333333
تدرج الخلفية اللون الصحيح: #ffffff
اتجاه التدرج: 90 درجة
موقف البداية: 50٪
موقف النهاية: 0٪
تحقق من هذا التصميم.
تخصيص التخطيط لتصميمات ومحتوى إطار مختلف
أقل ما يقال عن الاحتمالات المثيرة لهذا التصميم البسيط عديدة. من خلال تخصيص نظام الألوان ونمط المقسم وتخطيط العمود ومحتوى الوحدة النمطية ، يمكنك إنشاء جميع أنواع تصميمات التخطيط المختلفة. بالإضافة إلى ذلك ، يمكنك استخدام ميزات Divi الرائعة مثل "Find and Replace" لإجراء تغييرات واسعة النطاق في نظام الألوان ببضع نقرات.
فيما يلي العملية الأساسية لتحديث التخطيط:
- تحميل تخطيط القسم المحفوظ إلى الصفحة
- قم بتحديث مخطط ألوان القسم باستخدام "بحث واستبدال".
- تغيير نمط الفاصل
- تخصيص الصف بخلفية جديدة وهيكل العمود.
- أضف وحدات إلى أعمدتك
مع هذه العملية ، يجب أن يكون استكشاف التصميمات الجديدة أمرًا ممتعًا للغاية! لنكمل.
تصميم الإطار # 2
بالنسبة لهذا التصميم التالي ، سنستخدم تخطيط القسم المحفوظ الذي أنشأناه سابقًا. للقيام بذلك ، انقر لإضافة قسم جديد في المنشئ المرئي. ثم حدد علامة التبويب "إضافة من المكتبة" وانقر فوق تخطيط القسم من القائمة.
نحن الآن جاهزون لتخصيص القسم لتصميم جديد.
لتغيير نظام الألوان المستخدم لهذا التخطيط ، يمكننا استدعاء بعض صلاحيات تصميم Divi باستخدام ميزة البحث والاستبدال. انتقل إلى إعدادات القسم للقسم المكرر وانقر بزر الماوس الأيمن على لون الخلفية وحدد "بحث واستبدال".
في Find & Replace modal ، قم بتحديث ما يلي:
ضمن: هذا القسم
استبدل بـ: # 443850
حدد استبدال الكل
سيحل هذا محل اللون الأبيض المستخدم لخلفية القسم والحدود والفواصل بلون جديد.
الآن قم بتحديث إعدادات القسم بنمط مقسم جديد:
ثم قم بتحديث إعدادات الصف بلون خلفية أبيض ، وظل مربع لإكمال تصميم الإطار الجديد للصف.
بالنسبة للمحتوى ، دعنا نجرب تخطيطًا من خمسة أعمدة مع بعض الدعاية. انطلق وقم بتحديث تخطيط العمود لصفك إلى تخطيط من خمسة أعمدة.
ثم أضف دعاية مغالى فيها إلى العمود الأول. احذف نص المحتوى الافتراضي واترك نص العنوان فقط. ثم استبدل الصورة المغلوطة بأيقونة نجمة. قم بتحديث إعدادات التصميم على النحو التالي:
لون الأيقونة: # 7d8491
حجم خط الأيقونة: 80 بكسل
اتجاه النص: الوسط
قم بتكرار وحدة blurb وقم بتحديث الإعدادات على النحو التالي:
لون الأيقونة: # 8cd845
حجم خط الأيقونة: 50 بكسل
الآن قم بعمل نسخة مكررة أو نسخ ولصق هاتين الوحدتين في نمط عبر أعمدةك الخمسة مع ثلاث وحدات في كل عمود.
ها هو التصميم النهائي.
تصميم الإطار # 3
بالنسبة لتصميم الإطار الثالث ، نحتاج أولاً إلى تحميل تخطيط القسم المحفوظ كما فعلنا سابقًا للتصميم الثاني.
بعد ذلك ، يمكننا استخدام البحث عن لون خلفية القسم واستبداله (كما فعلنا في التصميم السابق) لاستبدال اللون الأبيض المستخدم لخلفية القسم والمقسّم والحدود بلون أزرق جميل. للقيام بذلك ، انتقل إلى إعدادات القسم ، وانقر بزر الماوس الأيمن على لون الخلفية ، وحدد البحث والاستبدال. ثم قم بتحديث ما يلي:
ضمن: هذا القسم
استبدل بـ: # 1e3888
حدد استبدال الكل
ثم قم بتحديث مقسم القسم بنمط جديد للمقسم العلوي والسفلي (السحب):
بعد ذلك ، انتقل إلى إعدادات الصف. امنح الصف خلفية متدرجة كما يلي:
لون يسار متدرج للخلفية: افتراضي (# 2b87da)
اللون الأيمن المتدرج للخلفية: # 1E3888 (نفس لون خلفية القسم)
نوع التدرج: نصف قطري (لمنح الصف إحساسًا مستديرًا "يشبه السحابة")
موضع النهاية: 83٪ (لإخفاء حواف الصفوف قليلاً)
الآن ، كل ما علينا فعله هو إضافة بعض المحتوى إلى صفنا المؤطر. دعنا نضيف وحدة Call To Action إلى الصف ونقوم بتحديث الإعدادات على النحو التالي:
أضف "#" إلى مربع إدخال الارتباط لإظهار الزر
استخدام لون الخلفية: NO
لون نص العنوان: # ffc338
لون نص الزر: # ffc338
ها هو التصميم النهائي.
ماذا عن الجوال؟
في حال كنت أتساءل. إليك ما ستبدو عليه التصميمات على الأجهزة المحمولة.
افكار اخيرة
تهدف تصميمات الإطارات التي تم إنشاؤها في هذا البرنامج التعليمي إلى إبراز إمكانيات التصميم بدلاً من عرض قطع التصميم المصقولة بالكامل. لهذا السبب ، ركزت على تصميمات الإطار واستخدمت الأمثلة الأساسية للمحتوى. نأمل أن تلهمك على الأقل لاستكشاف تصميمات جديدة من خلال اللعب بفواصل أقسام مختلفة وأنظمة ألوان ومحتوى.
أتطلع إلى الاستماع منك في التعليقات.
هتافات!