هل ترغب في إنشاء رأس لاصق باستخدام 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 Theme Builder بمجرد الانتهاء من تصميم رأسك ومعاينته على جهازك موقع انترنت.
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.
تحميل DIVI Now !!!
وفي الختام
هناك ! هذا كل شيء لهذه المقالة. في الأخير ، أوضحنا لك كيفية إنشاء رأس ثابت باستخدام مُنشئ المواضيع من أنماط Divi والعرف.
للتعرف على Divi's Theme Builder ، يمكنك أيضًا قراءة مقالتنا على كيفية إنشاء رأس عالمي باستخدام منشئ سمات Divi
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
