كيفية تصميم قسم Fluid Hero في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

لاحظ كيف يتوسع التصميم المرن بسلاسة مع عرض إطار عرض المتصفح.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

كيفية تصميم قسم Fluid Hero في Divi

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

إعدادات القسم

للبدء ، دعنا نقوم بتحديث إعدادات التصميم الحالية للقسم. افتح إعدادات القسم وقم بتحديث ما يلي:

• لون الخلفية المتدرج الأيسر: # ff2000
• تدرج الخلفية اللون الصحيح: # 121212
• اتجاه التدرج: 45 درجة
• موقف البداية: 30٪
• موقف النهاية: 0٪

ضمن علامة تبويب التصميم ، قم بتحديث المساحة المتروكة:

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إنشاء صف

بعد ذلك ، أضف صفًا من عمود واحد إلى القسم.

إعدادات الصف

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

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 1700 بكسل
• الحد الأدنى للارتفاع: 100vh (سطح المكتب) ، لا شيء (الجهاز اللوحي والهاتف)
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إنشاء نص عنوان مرن بحدود

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

أضف وحدة نصية

لإنشاء نص العنوان والحد ، أضف وحدة نصية جديدة إلى العمود.

إعدادات النص

ضمن علامة تبويب المحتوى ، قم بتحديث محتوى النص باستخدام HTML التالي:

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

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

font-size: clamp(32px, 4.1vw, 70px);

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

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

• نوع العنوان: H1
• خط العنوان: مونتسيرات
• وزن خط العنوان: ثقيل
• لون نص العنوان: #ffffff
• حجم نص العنوان: 1em
• تباعد حروف العنوان: 0.1em
• ارتفاع خط العنوان: 1.2em

أيضًا ، قم بتحديث حشوة الوحدات النمطية على النحو التالي:

• المساحة المتروكة: 1em (أعلى ، أسفل ، يسار ، يمين)

لإنشاء تصميم الحد المرن ، قم بتحديث ما يلي:

• عرض الحدود: 1em
• لون الحدود: #ffffff
• لون الحد السفلي: شفاف
• لون الحد الأيسر: شفاف

إنشاء حدود تشكيل

لإنشاء حد اللكنة ، يمكننا تكرار وحدة النص الحالية.

أخرج محتوى الجسم الحالي وقم بتحديث إعدادات التصميم على النحو التالي:

• العرض الأقصى: 6.5em
• الطول: 3.25em
• عرض الحدود: 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.6em

ثم قم بتحديث الحجم والتباعد كما يلي:

• العرض الأقصى: 19em
• الهامش: 2em أسفل ، يسار تلقائي ، 5em يمين

قم بإنشاء زر السوائل

لإنشاء الزر المرن ، أضف وحدة زر جديدة أسفل وحدة نص الترجمة.

ثم قم بتحديث نص الزر ليقرأ "إصدار تجريبي مجاني لمدة 7 أيام".

أضف حجم خط الجذر المرن

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

font-size: clamp(20px, 2.35vw, 40px);

إعدادات تصميم الزر

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• محاذاة الزر: يمين

• لون نص الزر: # ff2000
• زر خلفية متدرجة اللون الأيسر: شفاف
• لون خلفية الزر متدرج لليمين: #ffffff
• اتجاه التدرج: 45 درجة
• موقف البداية: 25٪
• موقف النهاية: 0٪
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: ثقيل
• نمط خط الزر: مائل
• رمز الزر: سهم مثلث لليمين (انظر لقطة الشاشة)
• وضع رمز الزر: يسار

• الهامش: 8em صحيح
• الحشو: 0.2em أعلى ، 0.2em أسفل ، 1.5em يسار ، 1em يمين

إنشاء صورة لقسم البطل

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

افتح إعدادات الصورة وقم بتحميل صورة.

إعدادات تصميم الصورة

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

• محاذاة الصورة: يسار (سطح مكتب وجهاز لوحي) ، في المنتصف (هاتف)
• أقصى عرض: 48٪ (سطح المكتب والجهاز اللوحي) ، 70٪ (الهاتف)
• المساحة المتروكة: يسار 4٪

أخيرًا ، امنح الصورة موضعًا مطلقًا مع إزاحة باستخدام وحدة الطول vmin على النحو التالي:

• المنصب: مطلق (سطح المكتب والجهاز اللوحي) ، نسبي (الهاتف)
• الموقع: أعلى اليسار (سطح المكتب والجهاز اللوحي)
• الأوفست العمودي 30vmin (سطح المكتب والجهاز اللوحي) ، 0 بكسل (الهاتف)

النتيجة النهائية

ها هي النتيجة النهائية على الصفحة الحية.

إليك كيفية توسع التصميم المرن بسلاسة مع عرض إطار عرض المتصفح.

دعم المتصفح

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

افكار اخيرة

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

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

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

هتافات!