هل ترغب في إضافة وحدة Fullwidth Header الخاصة بك إلى Divi زر التمرير لأسفل؟
وحدة Fullwidth Header الخاصة بـ Divi يتضمن زرًا يخبر المستخدم أنه يمكنه التمرير لأسفل. بمجرد النقر فوقه ، يتم إعادة توجيههم تلقائيًا إلى القسم التالي. إنه زر بسيط به رموز متعددة للاختيار من بينها ويمكن تخصيص لونه وحجمه بالكامل.
في هذه المقالة ، سنرى كيفية تخصيصه ونرى أربعة أزرار للتمرير لأسفل يمكنك تضمينها في وحدة Fullwidth Header الخاصة بك. سنرى أيضًا كيفية تخصيصه باستخدام CSS لمزيد من خيارات التصميم.
لنبدأ!
نظرة عامة على أزرار التمرير لأسفل
أولاً ، لنلقِ نظرة على التصميمات التي سننشئها في هذه المقالة.
مثال 1
مثال 2
تحميل DIVI الآن !!!
مثال 3
مثال 4
تحميل DIVI الآن !!!
أزرار التمرير لأسفل تصميم رأس بالعرض الكامل
أولاً ، سننشئ تصميم الرأس بالعرض الكامل. أقوم ببنائه من الصفر باستخدام تصميمات من حزمة تخطيط العلاج المجاني المتاحة في Divi . قم بإنشاء صفحة جديدة وإضافة ملف وحدة رأس عرض كامل إلى قسم جديد بعرض كامل.
مقسم مقطع كامل العرض
سنضيف حاجزًا لهذا الرأس ذي العرض الكامل. افتح إعدادات ملف قسم العرض الكامل .
ثم قم بالتمرير لأسفل إلى مقسم . انقر فوق علامة التبويب الملابس السفلية واختر نمط الفاصل الثامن. اضبط اللون على # e8e5f8 وأدخل 0vw للارتفاع. أغلق إعدادات القسم.
- المقسمات: منخفضة
- النمط: النمط الثامن
- اللون: # e5e8f0
- الارتفاع: 10vw
نص العنوان
بعد ذلك، افتح وحدة Fullwidth Header وأضف العنوان والعنوان الفرعي ونص الزر. قم بإزالة النص الوهمي لـ محتويات من الجسم وتركه فارغا.
- العنوان: ابدأ رحلتك إلى الشعور بالتحسن اليوم.
- العنوان الفرعي: ليزلي سايندون ، معالج مرخص
- الزر رقم 1: حدد موعدًا
- ارتداءها: لا شيء
صور رأس
انتقل إلى الصور واختر صورة العنوان. أختار الصورة المرفقة بامتداد حزمة تخطيط العلاج.
خلفية العنوان
انتقل إلى خلفيّة. أزل لون الخلفية وحدد علامة التبويب تدرج الخلفية.
- توقفات متدرجة:
- 25٪: # 2e5b61
- 100٪: RGBA (46 ، 91 ، 97 ، 0,5)
مكن ضع التدرج فوق صورة الخلفية .
- مربع التدرج فوق صورة الخلفية: نعم
صورة خلفية كاملة العرض للرأس
ثم حدد ملفعلامة التبويب صورة الخلفية واختر صورة بملء الشاشة. أنا أستخدم صورة أخرى من حزمة تخطيط العلاج.
- موضع صورة الخلفية: أعلى المركز
تخطيط رأس بالعرض الكامل
ثم حدد ملفعلامة تبويب التصميم وتنشيط جعل ملء الشاشة .
- جعل ملء الشاشة: نعم
العرض الكامل لرأس التمرير لأسفل
ثم تفعيل إظهار زر التمرير لأسفل. سنقوم بتصميم هذا الزر في الأمثلة الخاصة بنا ، لذلك سنتركه في الإعدادات الافتراضية في الوقت الحالي.
- إظهار زر التمرير لأسفل: نعم
صورة رأس
ثم قم بالتمرير لأسفل إلى صورة وقم بتغيير الزوايا الدائرية اليسرى العلوية إلى 200 بكسل لأجهزة الكمبيوتر المكتبية. اضبط باقي الزوايا الدائرية على 0 بكسل. قم بتغيير الزوايا الدائرية إلى 100 بكسل للأجهزة اللوحية والهواتف.
- زوايا مستديرة للصورة:
- سطح المكتب: 200 بكسل أعلى اليسار ، 0 بكسل لكل الآخرين
- الجهاز اللوحي والهاتف: 100 بكسل أعلى اليسار ، 0 بكسل لجميع الأجهزة الأخرى
نص عنوان الرأس
ثم قم بالتمرير لأسفل إلى نص العنوان. استخدم H1 لمستوى العنوان. اختر Cormorant Garamond لخط العنوان ، واضبط الوزن على Bold واللون # e1ecea.
- العنوان:
- مستوى العنوان: H1
- الخط: الغاق Garamond
- وزن الخط: عريض
- لون النص: # e1ecea
ثم اضبط ملف حجم لجميع أحجام الشاشات الثلاثة. استخدم 90 بكسل لأجهزة الكمبيوتر المكتبية و 40 بكسل للأجهزة اللوحية و 24 بكسل للهواتف. قم بتغيير ارتفاع الخط إلى 1.1em.
- حجم نص العنوان: 90 بكسل ، 40 بكسل ، 24 بكسل
- ارتفاع خط العنوان: 1,1 م
نص عنوان فرعي بعرض كامل
ثم قم بالتمرير لأسفل إلى نص الترجمة. قم بتغيير الخط إلى Inter ، والوزن إلى غامق ، واللون إلى # e1ecea.
- العنوان الفرعي:
- الخط: Inter
- وزن الخط: عريض
- لون النص: # e1ecea
تعيين حجم عند 22 بكسل لأجهزة الكمبيوتر المكتبية ، و 20 بكسل للأجهزة اللوحية ، و 16 بكسل للهواتف. غيره ارتفاع الصف عند 1,6 م.
- حجم نص الترجمة: 22 بكسل ، 20 بكسل ، 16 بكسل
- ارتفاع خط الترجمة: 1,6 em
زر الرأس
قم بالتمرير لأسفل إلى الإعدادات زر واحد وتنشيط استخدم الأنماط المخصصة للزر الأول . قم بتغيير الحجم إلى 14 بكسل ، ولون النص إلى # 2e5b61 ، ولون الخلفية إلى # e1ecea.
- استخدام الأنماط المخصصة للزر الأول: نعم
- زر واحد
- حجم النص: 14 بكسل
- لون النص: # 2e5b61
- الخلفية: # e1ecea
قم بتغيير عرض ملف bordure عند 0 بكسل ونصف قطر bordure عند 50 بكسل. استخدم Inter للخط وقم بتغيير الوزن إلى شبه غامق.
- الزر الأول:
- عرض الحدود: 0 بكسل
- نصف قطر الحدود: 50 بكسل
- الخط: Inter
- الوزن: جريء
ل المساحة المتروكة للأزرار ، استخدم 20 بكسل لأعلى ولأسفل و 40 بكسل لليسار ولليمين.
- حشوة الزر الأول: 20 بكسل من الأعلى والأسفل ، 40 بكسل لليسار واليمين
اقرأ أيضا: Divi: كيفية إنشاء قسم Fluid Hero
أمثلة على أزرار التمرير لأسفل
الآن بعد أن أصبح لدينا رأسنا الكامل العرض ، دعنا نرى كيفية تخصيص أزرار التمرير لأسفل. سنلقي نظرة على أربعة أمثلة بمجموعات مختلفة من الرموز والألوان والأحجام.
تتضمن أزرار التمرير لأسفل ثلاث معلمات. يمكن تعديل كل إعداد بشكل مستقل لكل حجم شاشة. تشمل المعلمات:
- اختيار الرموز - اختر من بين 11 أيقونة. وهي تشمل تصميمات أسهم مختلفة بخلفية أو بدون خلفية ، بما في ذلك غير محاطة بدائرة ومحاطة بدائرة وصلبة.
- اللون - منتقي الألوان Divi المعيار.
- حجم - تعديل حجم Divi القياسي.
يتضمن أيضًا حقل CSS في علامة التبويب خيارات متقدمة.
سوف نستخدم كل هذه المعايير.
أنظر أيضا: Divi: 5 تراكبات من الأقنعة والأنماط تنطبق على صورة الخلفية
مثال 1
في مثالنا الأول ، سنستخدم أيقونة غير محاطة بدائرة بدون خلفية. حدد الرمز الأول ، وقم بتغيير اللون إلى # e1ecea ، وقم بتغيير الحجم إلى 66 بكسل لأجهزة الكمبيوتر المكتبية ، و 60 بكسل للأجهزة اللوحية ، و 50 بكسل للهواتف.
- الرمز: الرمز الأول
- اللون: # e1ecea
- الحجم: 66 بكسل (سطح المكتب والجهاز اللوحي) ، 50 بكسل (الهاتف)
يؤدي هذا إلى إنشاء سهم لأسفل باللون الأخضر الفاتح يعمل بشكل جيد مع بقية التصميم ويبرز بدرجة كافية لإبلاغ المستخدم.
مثال 2
في المثال الثاني ، سنستخدم رمزًا محاطًا بدائرة. حدد الأيقونة السابعة وقم بتغيير اللون إلى # e8c553. سنقوم بتكبير أيقونة هذا. قم بتغيير الحجم إلى 78 بكسل لأجهزة الكمبيوتر المكتبية ، و 70 بكسل للأجهزة اللوحية ، و 60 بكسل للهواتف.
- الأيقونة: الأيقونة السابعة
- اللون: # e8c553
- الحجم: 78 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 60 بكسل (هاتف)
هذا اللون هو اختلاف عن اللون الأصفر في حزمة التخطيط ، ولكنه أفتح ويعمل بشكل أفضل على الخلفية الخضراء. تحتوي الأيقونة على زوايا حادة ، لكن الدائرة تتطابق مع التصميم الدائري للتخطيط.
مثال 3
في المثال الثالث ، سنستخدم رمزًا به دائرة وخلفية. يؤدي هذا إلى تلوين الخلفية وإنشاء الرمز بفتحة تكشف صورة الخلفية لـ موقع انترنت.
للحصول على أفضل النتائج ، سنحتاج إلى إيلاء اهتمام وثيق لحجم الرمز ولون خلفية الزر.
حدد الأيقونة الثامنة وقم بتغيير لونها إلى # 0e4951. اضبط الحجم على 60 بكسل لأجهزة الكمبيوتر المكتبية ، و 56 بكسل للأجهزة اللوحية ، و 50 بكسل للهواتف.
- الأيقونة: الأيقونة الثامنة
- اللون: # 0e4951
- الحجم: 60 بكسل (سطح المكتب) ، 56 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
الأخضر هو ظل أغمق من اللون الأخضر في الخلفية. يبرز الظل الغامق مقابل اللون الأخضر ولا يزال يطابق بقية التصميم.
مثال 4
ماذا لو كنت تريد دمج الألوان بحيث يكون لديك لون خلفية خلف أيقونة الفصل؟ يمكننا القيام بذلك باستخدام CSS.
في هذا المثال ، سنستخدم CSS لإنشاء شكل خلفية خلف الرمز الذي سيظهر من خلال رمز الفصل. سيستخدم الرمز نفسه الإعدادات القياسية.
حدد الرمز الحادي عشر وقم بتغيير اللون إلى # e1ecea. سنقوم بتعيين الرمز أصغر لهذا الرمز ونصنع شكل خلفية كبير. قم بتغيير الحجم إلى 50 بكسل لأجهزة الكمبيوتر المكتبية و 40 بكسل للأجهزة اللوحية و 30 بكسل للهواتف.
- الأيقونة: 11ثالث
- اللون: # e1ecea
- الحجم: 50 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
ثم انتقل إلى علامة التبويب متقدم وانتقل إلى الحقل زر التمرير لأسفل وأدخل CSS هذا:
border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61يضيف تنسيق CSS هذا مساحة متروكة للأعلى واليمين والأسفل واليسار. لقد استخدمت هذه الحشوة لإنشاء خلفية بيضاوية تتوافق بشكل جيد مع تصميم الرأس باستخدام أدلة تصميم التخطيط.
نتائج الأمثلة المختلفة
مثال 1
مثال 2
تحميل DIVI الآن !!!
مثال 3
مثال 4
تحميل DIVI الآن !!!
وفي الختام
هذه نظرة عامة على أزرار التمرير لأسفل الأربعة التي يمكنك تضمينها في وحدة Fullwidth Header Divi. يشتمل زر التمرير على العديد من الرموز للاختيار من بينها ويمكنك تعيين لونها وحجمها.
باستخدام حقل CSS ، يمكنك تخصيص الزر بشكل أكبر. تمنحك مجموعات خيارات تصميم الأزرار و CSS الكثير من إمكانيات التصميم باستخدام أزرار التمرير لأسفل.
آمل أن يكون هذا مفيدًا لموقع مدونتك التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
