هل ترغب في إنشاء قسم Hero بتنسيق Divi ما هو السائل بدلاً من الاستجابة التقليدية؟
قسم البطل من أ موقع انترنت هي واحدة من أفضل المرشحين للتصميم المرن. على عكس التصميم التقليدي المتجاوب الذي يتكيف مع نقاط التوقف المختلفة ، يتكيف التصميم المرن بسلاسة مع إطار عرض المتصفح ويحافظ على اتساق التصميم عبر أي جهاز. بعد كل شيء ، قسم Hero هو أول شيء يراه المستخدمون في ملف موقع انترنت.
في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء قسم بطل سلس بالكامل في Divi. المفتاح لإنشاء هذا التصميم المرن هو إضافة حجم خط الجذر السائل إلى كل من الوحدات النمطية المستخدمة ثم دمج وحدة الطول em (الذي هو بالنسبة لحجم خط نص الجذر ) في إعدادات الوحدة.
لنبدأ!
مسح
إليك نظرة سريعة على التصميم الذي سنقوم بإنشائه في هذا البرنامج التعليمي.
لاحظ كيف يتكيف التصميم المرن بسلاسة مع عرض نافذة المتصفح.
قم بإنشاء صفحة جديدة باستخدام Divi Builder
للبدء ، سوف تحتاج إلى القيام بما يلي:
من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
أعطه عنوانًا منطقيًا لك وانقر استعمل Divi منشئ
ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك سيكون لديك لوحة فارغة لبدء التصميم فيها Divi.
اقرأ أيضا: Divi: كيفية إنشاء قسم Hero باستخدام وحدة Fullwidth Header
كيفية تصميم قسم Fluid Hero في Divi
إعدادات القسم
للبدء ، دعنا نقوم بتحديث إعدادات التصميم الحالية للقسم. افتح إعدادات القسم وقم بتحديث ما يلي:
- توقفات متدرجة:
- 30٪: # ff2000
- 30٪: # 121212
- اتجاه التدرج: 45 درجة
تحت علامة التبويب تصميم، قم بتحديث المساحة المتروكة:
- المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل
قم بإنشاء خط
بعد ذلك ، أضف صفًا من عمود واحد إلى القسم.
إعدادات الخط
افتح إعدادات الخط وقم بتحديث ما يلي ضمن علامة التبويب تصميم :
- عرض الحضيض: 1
- العرض: 100٪
- العرض الأقصى: 1 بكسل
- الحد الأدنى للارتفاع: 100 فولت في الساعة (سطح المكتب) ، لا شيء (الجهاز اللوحي والهاتف)
- المساحة المتروكة: 0 بكسل (أعلى وأسفل)
إنشاء نص رأس متدفق بحدود
الآن بعد أن اكتمل القسم والخط ، يمكننا إضافة نص الرأس المتدفق إلى قسم Hero. سنضيف أيضًا حدًا مرنًا إلى وحدة النص لعنصر تصميم إبداعي.
أضف وحدة نصية
لإنشاء نص العنوان والحدود ، أضف وحدة نصية جديدة إلى العمود.
إعدادات النص
تحت علامة التبويب وصف المنتج، قم بتحديثه محتويات من الجسم بكود HTML التالي:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
لجعل عناصر التصميم مرنة ، نحتاج أولاً إلى إضافة حجم خط الجذر السائل إلى الوحدة النمطية باستخدام وظيفة CSS Clamp ().
تحت علامة التبويب متقدم، الصق مقتطف CSS التالي:
font-size: clamp(32px, 4.1vw, 70px);
تحت علامة التبويب تصميم، قم بتحديث إعدادات تصميم نص العنوان التالية:
- نص العنوان:
- النوع: H1
- الخط: مونتسيرات
- وزن الخط: ثقيل
- اللون: #ffffff
- الحجم: 1em
- تباعد الأحرف: 0,1em
- ارتفاع الخط: 1,2 م
قم أيضًا بتحديث حشوة التعديل على النحو التالي:
- الحشو: الأول (أعلى ، أسفل ، يسار ويمين)
لإنشاء تصميم الحد المرن ، قم بتحديث ما يلي:
- عرض الحدود: 1em
- لون الحدود: #ffffff
- لون الحد السفلي: واضح
- لون الحد الأيسر: واضح
إنشاء حدود تشكيل
لإنشاء حد اللكنة ، يمكننا تكرار وحدة النص الحالية.
احذفه محتويات من الجسم الحالي وتحديث معلمات التصميم على النحو التالي:
- أقصى عرض: 6,5 سم
- الارتفاع: 3,25 م
- عرض الحدود: 0,5em
- لون الحدود: # ff2000
لتعيين موضع حد التوكيد ، أضف موضعًا مطلقًا مع إزاحة مساوية لعرض الحد في وحدة نص العنوان (1em).
تحت علامة التبويب متقدم، قم بتحديث خيارات المركز التالية:
- الموقف: مطلق
- الموقع: أعلى اليمين
- الإزاحة العمودية: 1em
- الإزاحة الأفقية: 1em
إنشاء نص الترجمة
أسفل نص العنوان ، سنضيف نص العنوان الفرعي المتدفق. نظرًا لأن هذا النص أصغر ، فسنضيف حجم خط جذر سائل أصغر.
أضف وحدة نصية جديدة
لإنشاء نص التسمية التوضيحية ، أضف وحدة نص جديدة أسفل وحدة نص العنوان الحالية.
يمكنك إضافة بعض الجمل النصية على النحو التالي:
- المحتوى: الدهليز ac Diam sit amet quam videicula elementum sed sit amet dui. Lorem ipsum dolor sit amet، consectetur adipiscing elit.
أضف حجم خط الجذر السائل
بعد ذلك ، نحتاج إلى إضافة حجم خط مرن جديد يعمل بشكل أفضل مع النصوص الصغيرة. ضمن علامة التبويب خيارات متقدمة ، الصق مقتطف CSS التالي أسفل العنصر الرئيسي:
font-size: clamp(14px, 1.4vw, 24px);
إعدادات تصميم النص
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
- النص:
- وزن الخط: شبه عريض
- اللون: #ffffff
- الحجم: 1em
- الارتفاع: 1,6 م
ثم قم بتحديث الحجم والتباعد كما يلي:
- أقصى عرض: 19 سم
- الهامش: 2 م (سفلي) ، تلقائي (يسار) ، 5 ش (يمين)
قم بإنشاء الزر السائل
لإنشاء الزر المرن ، أضف وحدة زر جديدة أسفل وحدة نص الترجمة.
بعد ذلك ، قم بتحديث نص الزر لقراءة "7 Day Free Tral".
أضف حجم خط الجذر السائل
بعد ذلك ، نحتاج إلى إضافة حجم خط مرن جديد مناسب لزر.
تحت علامة التبويب متقدم، الصق مقتطف CSS التالي أسفل العنصر الرئيسي:
font-size: clamp(20px, 2.35vw, 40px);
إعدادات تصميم الزر
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
- محاذاة الزر: يمين
- استخدام حجم مخصص للزر: نعم
- لون نص الزر: # ff2000
- توقفات متدرجة:
- اللون 1 25٪: واضح
- اللون 2 25٪: #ffffff
- اتجاه التدرج: 45 درجة
- زر:
- عرض الحدود: 0 بكسل
- نصف قطر الحدود: 0 بكسل
- الخط: مونتسيرات
- وزن الخط: سميك
- النمط: مائل
- إظهار رمز الزر: نعم
- الرمز: سهم على شكل مثلث إلى اليمين (انظر لقطة الشاشة)
- وضع الرمز: صحيح
- الهامش: 8em (يمين)
- الحشو: 0,2 بوصات (علوي وسفلي) ، 1,5 بيم (يسار) ، 1 بيم (يمين)
قم بإنشاء صورة لقسم Hero
مع كل محتويات من قسم البطل إلى الحجم الصحيح للصفحة، نحن على استعداد لإضافة صورة قسم البطل على الجانب الأيسر. للقيام بذلك، قم أولاً بإضافة وحدة صورة أسفل الزر.
افتح إعدادات الصورة وقم بتحميل صورة.
إعدادات تصميم الصورة
تحت علامة التبويب تصميم، قم بتحديث الإعدادات التالية:
- محاذاة الصورة: يسار (سطح المكتب وجهاز لوحي) ، في المنتصف (هاتف)
- أقصى عرض: 48٪ (سطح المكتب والكمبيوتر اللوحي) ، 70٪ (الهاتف)
- حشوة: 4٪ (يسار)
أخيرًا ، امنح الصورة موضعًا مطلقًا مع إزاحة باستخدام وحدة الطول vmin على النحو التالي:
- الوظيفة: مطلق (سطح المكتب والجهاز اللوحي) ، نسبي (الهاتف)
- الموقع: أعلى اليسار (سطح المكتب والجهاز اللوحي)
- الإزاحة العمودية: 30vmin (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
نتيجة نهائية
ها هي النتيجة النهائية على صفحة مباشرة.
أنظر أيضا: Divi: كيفية استخدام الأقنعة وأنماط الخلفية لقسم البطل
هذه هي الطريقة التي يتكيف بها التصميم المرن بسلاسة مع عرض نافذة المتصفح.
تحميل DIVI الآن !!!
وفي الختام
يمكن أن تكون إضافة تصميم سلس إلى قسم Hero طريقة سهلة لضمان تناسق الجزء العلوي من الجزء المرئي بشكل جميل عبر جميع أحجام المتصفح ، دون الحاجة إلى تحديث التصميم عند نقاط توقف محددة أو استخدام استعلامات الوسائط.
نأمل أن تضيف هذه التقنية مهارة تصميم مفيدة أخرى للمشاريع المستقبلية.
نأمل أيضًا أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
