تخفي بأناقة نسختك أدناه فواصل الأقسام بتصميم مذهل مع Divi
نشرت: 2019-06-22تتيح لك خيارات Divi المدمجة استخدام إعداد تصميم واحد معين لأغراض متعددة ، مما يساعد بدوره على تحفيز الإبداع. اليوم ، سنستخدم فواصل الأقسام بطريقة فريدة لإخفاء نسخة موقع الويب الخاص بك بأناقة. هذه طريقة رائعة لإضافة تفاعل إضافي إلى صفحتك دون الحاجة إلى رمز مخصص. سنقوم بإعادة إنشاء مثال جميل من البداية وستكون قادرًا على تنزيل ملف JSON الخاص بالمثال مجانًا أيضًا.
دعنا نذهب اليها!
معاينة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.
سطح المكتب
متحرك
قم بتنزيل Layout مجانًا
لوضع يديك على التصميم المجاني ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تنزيل مجاني
انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.
لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!
لنبدأ في إعادة التكوين!
أضف القسم رقم 1
أول شيء عليك القيام به هو إضافة قسم عادي جديد إلى الصفحة التي تعمل عليها.
أضف صفًا جديدًا
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
أضف وحدة نصية إلى العمود
أضف محتوى H2
الوحدة الأولى التي نحتاجها في هذا الصف هي وحدة نصية بها بعض محتوى H2.
إعدادات نص H2
انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H2.
- خط العنوان 2: عرض Playfair
- وزن خط العنوان 2: عادي
- العنوان 2 محاذاة النص: الوسط
- حجم نص العنوان 2: 70 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
إضافة وحدة Divider إلى العمود
الرؤية
الوحدة الثانية والأخيرة التي نحتاجها في هذا الصف هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".
- إظهار الحاجز: نعم
خط
نحن أيضًا نغير لون الخط في علامة تبويب التصميم.
- لون الخط: # 000000
تحجيم
انتقل إلى إعدادات التحجيم وقم بتطبيق الإعدادات التالية:
- وزن الحاجز: 5 بكسل
- العرض: 27٪
- محاذاة الوحدة: المركز
أضف القسم رقم 2
لون الخلفية
أضف القسم العادي الثاني إلى صفحتك ، وافتح إعدادات القسم وقم بتغيير لون الخلفية.
- لون الخلفية: # f7f7f7
تجاوز
تأكد من إخفاء تجاوز القسم في علامة التبويب المتقدمة أيضًا. سيؤدي ذلك إلى التأكد من عدم وجود شيء يفوق حاوية القسم.
- الفائض الأفقي: مخفي
- الفائض العمودي: مخفي
الانتقالات
في وقت لاحق من هذا المنشور ، سننشئ انتقالًا بالمرور. للتأكد من أن هذا يعمل بسلاسة ، سنزيد مدة الانتقال في علامة التبويب خيارات متقدمة.
- مدة الانتقال: 800 مللي ثانية
أضف صفًا جديدًا
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
تحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف واسمح للصف بأخذ العرض الكامل لحاوية القسم من خلال تطبيق الإعدادات التالية:
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- العرض: 100٪
- العرض الأقصى: 100٪
أضف وحدة نصية # 1 إلى العمود
أضف محتوى H3
حان الوقت لبدء إضافة الوحدات ، بدءًا من الوحدة النمطية النصية. أدخل بعض محتوى H3 من اختيارك.
إعدادات نص H3
انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H3.
- خط العنوان 3: عرض Playfair
- العنوان 3 محاذاة النص: الوسط
- لون نص العنوان 3: # 000000
- حجم نص العنوان 3: 3vw (سطح المكتب) ، 6vw (جهاز لوحي) ، 7vw (هاتف)
إضافة وحدة Divider إلى العمود
الرؤية
الوحدة الثانية التي نحتاجها في هذا الصف هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".
- إظهار الحاجز: نعم
خط
قم بتغيير لون الحاجز أيضًا.
- لون الخط: # 000000
تباعد
وأضف بعض الهامش العلوي والسفلي المخصص لإنشاء مساحة.
- الهامش العلوي: 2vw
- الهامش السفلي: 2vw
أضف وحدة نصية إلى العمود
إضافة محتوى
الوحدة التالية التي نحتاجها هي وحدة نصية أخرى. أضف بعض محتوى الفقرة من اختيارك.
إعدادات النص
انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص.
- خط النص: Open Sans
- محاذاة النص: الوسط
- لون النص: # 777777
- حجم النص: 0.8vw (سطح المكتب) ، 1.7vw (جهاز لوحي) ، 2.2vw (هاتف)
- ارتفاع خط النص: 1.8em
تباعد
أضف بعض قيم الهامش المخصصة بعد ذلك.
- الهامش الأيسر: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 10vw (هاتف)
- الهامش الأيمن: 3vw (سطح المكتب) ، 7vw (الجهاز اللوحي والهاتف)
أضف وحدة الزر إلى العمود
أضف نسخة
الوحدة التالية والأخيرة التي نحتاجها في هذا الصف هي وحدة الأزرار. أدخل نسخة من اختيارك.
انتقام
قم بتغيير محاذاة الزر في علامة تبويب التصميم.
- محاذاة الزر: الوسط
إعدادات الزر
تابع عن طريق تصميم إعدادات الزر.
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
- لون نص الزر: # 000000
- عرض حد الزر: 1 بكسل
- نصف قطر حدود الزر: 0 بكسل
- خط الزر: عرض Playfair
تباعد
وأضف بعض قيم التباعد المخصصة أيضًا.
- الهامش العلوي: 2vw
- الحشوة العلوية: 1vw
- الحشو السفلي: 1vw
- الحشو الأيسر: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 8vw (هاتف)
- الحشو الأيمن: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 8vw (هاتف)
إعدادات القسم الإضافية
الحاجز العلوي الافتراضي
بمجرد الانتهاء من إضافة جميع الوحدات إلى القسم ، فقد حان الوقت لتصفح بعض إعدادات القسم الإضافية. افتح إعدادات القسم ، وانتقل إلى علامة تبويب التصميم وأضف الحاجز العلوي التالي:
- نمط الحاجز: البحث في القائمة
- لون الفاصل: # e8e8e8
- ارتفاع الفاصل: 7000 بكسل
- فاصل الفاصل: عمودي
- ترتيب الفاصل: فوق محتوى القسم
تحوم فوق الحاجز العلوي
قم بتغيير ارتفاع الحاجز عند التمرير.
- ارتفاع الحاجز: 0 بكسل
مقسم سفلي
أضف أيضًا حاجزًا سفليًا.
- نمط الحاجز: البحث في القائمة
- لون الفاصل: # 5c26ff
- ارتفاع الحاجز: 600 بكسل
- ترتيب الحاجز: فوق محتوى القسم
تحوم فوق الحاجز السفلي
وقم بإزالة ارتفاع الحاجز عند التمرير.
- ارتفاع الحاجز: 0 بكسل
تباعد
كما تلاحظ في معاينة هذا المنشور ، فإننا نحول هذا القسم إلى دائرة. للقيام بذلك ، سنحتاج أولاً إلى إضافة بعض قيم الهوامش والحشو المخصصة عبر أحجام الشاشات المختلفة:
- الهامش الأيسر: 10vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 0vw (هاتف)
- الهامش الأيمن: 47vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 0vw (هاتف)
- الحشوة العلوية: 8vw (سطح المكتب) ، 15vw (كمبيوتر لوحي) ، 16vw (هاتف)
- الحشوة السفلية: 8vw (سطح المكتب) ، 15vw (كمبيوتر لوحي) ، 16vw (هاتف)
الحدود
استمر بإضافة "50vw" إلى كل زاوية لتحويل القسم إلى دائرة. نضيف أيضًا حدًا باستخدام الإعدادات التالية:
- عرض الحدود: 1 بكسل
- لون الحدود: rgba (255،255،255،0)
تحوم الحدود
تغيير لون الحد عند المرور فوق.
- لون الحدود: # 000000
قسم استنساخ مرتين
بمجرد الانتهاء من جميع إعدادات القسم ، يمكنك المضي قدمًا واستنساخ القسم مرتين.
تعديل تكرار # 1
تغيير لون الحاجز العلوي
سنقوم بتعديل كل من تكرارات القسم ، بدءًا من القسم الأول. افتح إعدادات القسم وقم بتغيير لون الحاجز العلوي.
- لون الفاصل: # 5c26ff
تغيير لون الحاجز السفلي
قم بتعديل لون الحاجز السفلي أيضًا.
- لون الفاصل: # ff3a5e
تغيير التباعد
بعد ذلك ، انتقل إلى إعدادات التباعد وتأكد من تطبيق القيم التالية:
- الهامش العلوي: -20vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
- الهامش الأيسر: 47vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 0vw (هاتف)
- الهامش الأيمن: 10vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 0vw (هاتف)
تعديل تكرار # 2
تغيير لون الحاجز العلوي
افتح إعدادات النسخة الثانية وقم بتغيير لون الفاصل العلوي.
- لون الفاصل: # ff3a5e
تغيير لون الحاجز السفلي
قم بتغيير لون الحاجز السفلي أيضًا.
- لون الفاصل: # e8e8e8
تغيير التباعد
وقم بتعديل قيم التباعد هنا أيضًا.
- الهامش العلوي: -20vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
- الهامش السفلي: 7vw
- الهامش الأيسر: 10vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 0vw (هاتف)
- الهامش الأيمن: 47vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 0vw (هاتف)
معاينة
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.
سطح المكتب
متحرك
افكار اخيرة
في هذا المنشور ، أوضحنا لك كيفية إخفاء نسختك بأناقة أسفل فواصل الأقسام. هذه طريقة رائعة لاستخدام بعض خيارات Divi المضمنة البديهية بطريقة أخرى غير التي اعتدت عليها. نأمل أن يلهمك هذا البرنامج التعليمي لإنشاء تصميماتك البديلة باستخدام هذه التقنية أيضًا. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!
إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.