هل ترغب في إنشاء رأس ثابت باستخدام Divi؟
أصبح إنشاء رؤوس ثابتة أمرًا سلسًا منذ ظهور أداة إنشاء القوالب، لكننا لاحظنا أن الكثيرين لا يعرفون كيفية إنشائها دون استخدام أكواد إضافية. مع ذلك، من السهل جدًا القيام بذلك باستخدام خيارات التثبيت في Divi.
في الواقع، ليس الأمر أسهل فحسب، بل إن هذه الطريقة توفر المزيد من الإمكانيات لتخصيص التصميم.
في هذا الدرس التعليمي، سنخصص بعض الوقت لنوضح لك كيفية إنشاء رأس ثابت مخصص للغاية باستخدام إعدادات Divi.
مسح
قبل أن نتعمق في هذا البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة التي نريد تحقيقها.
قم ببناء هيكل عنصر العنوان
أنشئ قالب رأس عالمي جديد
قم بالوصول إلى Divi Theme Builder وابدأ في إنشاء رأس عالمي أو مخصص جديد.
قسم 1 معلمات
خلفية التدرج
بمجرد دخولنا إلى محرر القوالب، سنبدأ ببناء هيكل عناصر رأس الصفحة. في الجزء الثاني من هذا الدرس، سنركز على تطبيق مختلف خصائص التثبيت لإكمال تصميم رأس الصفحة الثابت.
اقرأ أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI
ستلاحظ وجود قسم في محرر القوالب. افتح هذا القسم وقم بتطبيق خلفية متدرجة الألوان.
- اللون 1: # ffba60
- اللون 2: # ffd6a0
- اتجاه التدرج: 90 درجة
- موقف البداية: 50٪
- المركز النهائي: 50٪
مباعدة
ثم قم بإزالة جميع الهوامش الداخلية (العلوي والسفلي) افتراضيًا.
- رأس الهامش الداخلي: 0 بكسل
- الهامش الداخلي السفلي: 0 بكسل
أضف سطرًا جديدًا
هيكل العمود
لإنشاء شريط العنوان العلوي، سنضيف صفًا جديدًا إلى قسمنا باستخدام بنية الأعمدة التالية:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:
- استخدام عرض مزراب مخصص: نعم
- تباعد العمود: 1
- أقصى عرض: 95٪
- أقصى عرض: 2 بكسل
مباعدة
أضف أيضًا هوامش داخلية مخصصة (أعلى وأسفل).
- رأس الهامش الداخلي: 15 بكسل
- الهامش الداخلي السفلي: 15 بكسل
CSS العنصر الرئيسي
ولضمان بقاء الأعمدة متجاورة على أحجام الشاشات الأصغر، سنضيف سطرًا من كود CSS إلى عنصر الصف الرئيسي في علامة التبويب المتقدمة.
display: flex;
أضف وحدة "تابعنا على وسائل التواصل الاجتماعي" إلى العمود 1
أضف الشبكات الاجتماعية التي تختارها
حان الوقت لإضافة الوحدات، بدءًا بوحدة "تابعنا على وسائل التواصل الاجتماعي" في العمود 1. أضف شبكات التواصل الاجتماعي التي تختارها مع روابطها المقابلة.
قم بإزالة لون الخلفية من كل شبكة اجتماعية
تابع عن طريق إزالة كل لون من ألوان الخلفية من الشبكة الاجتماعية بشكل فردي.
إعدادات الرمز
بعد ذلك، ارجع إلى الإعدادات العامة للوحدة وقم بتغيير لون الأيقونة في علامة تبويب التصميم.
- لون الأيقونة: #26333a
مباعدة
أضف أيضًا هامشًا علويًا.
- الهامش العلوي: 5 بيكسل
أضف وحدة الزر إلى العمود 2
إضافة نص إلى الزر
في العمود 2 ، الوحدة الوحيدة التي نحتاجها هي وحدة زر. أضف نصًا من اختيارك.
إضافة رابط
ثم أضف ارتباطًا.
محاذاة الزر
بعد ذلك، انتقل إلى علامة التبويب "النمط" وقم بتغيير محاذاة الزر.
- محاذاة الزر: صحيح
إعدادات زر
نقوم أيضًا بتخصيص الزر.
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 14 بكسل
- لون نص الزر: # 26333a
- عرض حد الزر: 2 بكسل
- لون حدود الزر: # 26333a
- نصف قطر حدود الزر: 0 بكسل
- أزرار تباعد الأحرف: 4 بكسل
- زر Soft Light: نص غامق
- زر نمط النسخ: أحرف كبيرة
- زر العرض: نعم
مباعدة
وسنكمل إعدادات الوحدة النمطية بإضافة هوامش داخلية (أعلى وأسفل) إلى معلمات التباعد.
- رأس الهامش الداخلي: 10 بكسل
- الهامش الداخلي السفلي: 10 بكسل
أضف القسم 2
خلفية التدرج
أضف قسمًا عاديًا آخر أسفل القسم السابق مباشرةً. سيخصص هذا القسم لقائمتنا وسيصبح لزجًا في الجزء الثاني من هذا البرنامج التعليمي.
انظر أيضا: كيفية إنشاء رأس عام باستخدام نموذج تسجيل الدخول في DIVI
بمجرد إضافة القسم ، قم بتطبيق خلفية متدرجة.
- اللون 1: #ffffff
- اللون 2: # f7f7f7
- نوع التدرج: خطي
- اتجاه التدرج: 90 درجة
- موقف البداية: 25٪
- المركز النهائي: 25٪
مباعدة
انتقل إلى علامة التبويب "النمط" في القسم وقم بإزالة جميع الهوامش الداخلية الافتراضية (العلوية والسفلية).
- رأس الهامش الداخلي: 0 بكسل
- الهامش الداخلي السفلي: 0 بكسل
أضف سطرًا جديدًا
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
التحجيم
انتقل إلى علامة التبويب "النمط" وقم بتعديل إعدادات الحجم كما يلي:
- استخدام عرض مزراب مخصص: نعم
- تباعد العمود: 1
- أقصى عرض: 2 بكسل
مباعدة
ثم قم بإزالة جميع الهوامش الداخلية (العلوي والسفلي) افتراضيًا.
- رأس الهامش الداخلي: 10 بكسل
- الهامش الداخلي السفلي: 10 بكسل
أضف وحدة قائمة إلى العمود
حدد قائمة
بعد ذلك ، أضف وحدة قائمة إلى عمود الصف وحدد قائمة ديناميكية من اختيارك.
تنزيل الشعار
ثم تحميل الشعار.
قم بإزالة لون الخلفية
بعد ذلك، قم بإزالة لون الخلفية الأبيض الافتراضي للوحدة.
إعدادات نص القائمة
انتقل إلى علامة التبويب "النمط" وقم أيضاً بتخصيص إعدادات نص القائمة.
- قائمة ضوء خافت: نص غامق
- لون نص القائمة: # 002d4c
- حجم نص القائمة: 15 بكسل
- تباعد أحرف القائمة: 4 بكسل
- محاذاة النص: صحيح
إعدادات نص القائمة المنسدلة
بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات القائمة المنسدلة.
- لون خلفية القائمة المنسدلة: #ffffff
- لون خط القائمة المنسدلة: # 002d4c
إعدادات الرمز
مع إعدادات الرمز.
- لون أيقونة سلة التسوق: #002d4c
- لون أيقونة البحث: #002d4c
- لون أيقونة قائمة همبرغر: # 002d4c
التحجيم
وأكمل إعدادات الوحدة بإضافة أقصى ارتفاع للشعار إلى إعدادات التحجيم.
- أقصى ارتفاع للشعار: 60 بكسل
2. تطبيق تأثيرات لاصقة مخصصة
اجعل القسم رقم 2 لزجًا
الآن وقد أنشأنا هيكل عناصر رأس الصفحة، فقد حان الوقت لجعل القسم الثاني ثابتًا وتخصيص عناصره عندما تكون في حالة ثابتة.
انظر أيضا: كيفية إنشاء قائمة تنقل عمودية في DIVI
افتح الإعدادات في القسم الثاني وانتقل إلى علامة التبويب "متقدم". هناك، انتقل إلى إعدادات تأثيرات التمرير وقم بتطبيق خيارات التثبيت التالية:
- موقف مثبت: التمسك بالأعلى
- الإزاحة العلوية اللاصقة: 0 بكسل
- حد الالتصاق السفلي: لا شيء
- الإزاحة من العناصر اللاصقة المحيطة: نعم
- الانتقال الافتراضي والأنماط الثابتة: نعم
قم بتغيير خلفية التدرج اللوني للقسم في الحالة الثابتة
بعد تثبيت القسم، سيظهر خيار إضافي في إعدادات القسم والصف والوحدة: خيار التثبيت. عند النقر على هذا الرمز، يمكنك إنشاء نمط بديل للعنصر الذي حددته في حالة التثبيت.
ابدأ بالوصول إلى إعدادات الخلفية في القسم الثاني وقم بتطبيق خلفية التدرج اللوني الثابتة التالية:
- اللون 1: # 26333a
- اللون 2: # 1e272f
قم بتمديد الخط حتى يصبح لزجًا
ثم سنفتح السطر الذي يحتوي على وحدة Menu وسنقوم بتغيير العرض في حالة لزجة.
- أقصى عرض: 95٪
قم بإزالة الهوامش الداخلية في حالة الالتصاق
نقوم أيضًا بإزالة الهوامش الداخلية (العلوية والسفلية) من حالة الالتصاق الخاصة بسطرنا.
- رأس الهامش الداخلي: 0 بكسل
- الهامش الداخلي السفلي: 0 بكسل
قم بتغيير لون نص القائمة في الحالة الثابتة
بعد ذلك ، سنقوم بتغيير لون نص القائمة إلى حالة ثابتة.
- لون نص القائمة: # ffbd68
قم بتغيير ألوان أيقونات القائمة في الحالة الثابتة
مع ألوان الأيقونة.
- لون أيقونة سلة التسوق: #ffffff
- لون أيقونة البحث: #ffffff
- لون أيقونة قائمة همبرغر: #ffffff
قم بإزالة ارتفاع الشعار في الحالة اللاصقة
وأخيرًا ، سنقوم بتغيير الحد الأقصى لارتفاع الشعار إلى صفر في حالة الالتصاق. سيؤدي هذا إلى إزالة الشعار تمامًا من رأسنا بمجرد تمكين الإعدادات الثابتة للقسم.
أقصى ارتفاع للشعار: 0 بكسل
لقد تم !
تأكد من حفظ جميع التغييرات في أداة إنشاء قوالب Divi بمجرد الانتهاء من تصميم رأس الصفحة ومعاينتها على موقعك الإلكتروني.
مسح
والآن بعد أن مررنا بجميع الخطوات، دعونا نلقي نظرة أخيرة على النتيجة.
تحميل DIVI Now !!!
خاتمة
هذا كل شيء! هذا كل ما يتعلق بهذه المقالة. لقد أوضحنا فيها كيفية إنشاء رأس ثابت باستخدام أداة إنشاء قوالب Divi والأنماط المخصصة.
للتعرف على Divi's Theme Builder ، يمكنك أيضًا قراءة مقالتنا على كيفية إنشاء رأس عالمي باستخدام منشئ سمات Divi
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...