كيفية إنشاء رأس مثبت بخيارات ديفي اللاصقة

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

في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء رأس ثابت يحتوي على ما يلي:

• يحتوي الرأس الذي نقوم بإنشائه على شريط رأس علوي + شريط قوائم
• نقوم بتدوير القسم الذي يحتوي على شريط القوائم عند المرور به ، وبمجرد العودة إلى الأعلى ، يظهر شريط الرأس مرة أخرى
• نحن نغير أنماط تصميم القسم اللاصق (وعناصره) بمجرد أن يصبح القسم لزجًا

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل قالب Global Header مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. بناء هيكل عنصر الرأس داخل قالب رأس جديد

إنشاء قالب رأس عمومي جديد

انتقل إلى Divi Theme Builder وابدأ في إنشاء رأس عالمي أو مخصص جديد.

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

خلفية متدرجة

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

• اللون 1: # ffba60
• اللون 2: # ffd6a0
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

لإنشاء شريط الرأس العلوي ، سنضيف صفًا جديدًا إلى قسمنا باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتعديل إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 95٪
• العرض الأقصى: 2580 بكسل

تباعد

أضف بعض الحشو العلوي والسفلي المخصص أيضًا.

• الحشوة العلوية: 15 بكسل
• الحشو السفلي: 15 بكسل

العنصر الرئيسي CSS

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

display: flex;

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 1

أضف الشبكات الاجتماعية المفضلة

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

قم بإزالة لون الخلفية لكل شبكة اجتماعية

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

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

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

• لون الايقونة: # 26333a

تباعد

أضف بعض الهامش العلوي أيضًا.

• الهامش العلوي: 5 بكسل

أضف وحدة الزر إلى العمود 2

أضف نسخة

في العمود 2 ، الوحدة الوحيدة التي نحتاجها هي وحدة الأزرار. أضف نسخة من اختيارك.

إضافة رابط

أضف ارتباطًا بعد ذلك.

محاذاة الزر

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الزر.

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

إعدادات الزر

نحن نصمم الزر أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 14 بكسل
• لون نص الزر: # 26333a
• عرض حد الزر: 2 بكسل
• لون حدود الزر: # 26333a
• نصف قطر حدود الزر: 0 بكسل

• تباعد حرف الزر: 4 بكسل
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة
• زر العرض: نعم

تباعد

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

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل

أضف القسم رقم 2

خلفية متدرجة

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

• اللون 1: #ffffff
• اللون 2: # f7f7f7
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 25٪
• موضع النهاية: 25٪

تباعد

انتقل إلى علامة تبويب تصميم القسم وقم بإزالة جميع الحشوة الافتراضية العلوية والسفلية.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

انتقل إلى علامة تبويب تصميم الصف وقم بتغيير إعدادات التحجيم كما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض الأقصى: 2580 بكسل

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل

إضافة وحدة قائمة إلى العمود

اختر قائمة

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

تحميل الشعار

قم بتحميل الشعار بعد ذلك.

إزالة لون الخلفية

بعد ذلك ، قم بإزالة لون الخلفية البيضاء الافتراضي للوحدة.

إعدادات نص القائمة

انتقل إلى علامة تبويب التصميم وقم بتصميم إعدادات نص القائمة أيضًا.

• وزن خط القائمة: غامق
• لون نص القائمة: # 002d4c
• حجم نص القائمة: 15 بكسل
• تباعد أحرف القائمة: 4 بكسل
• محاذاة النص: صحيح

إعدادات نص القائمة المنسدلة

بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات القائمة المنسدلة.

• لون خلفية القائمة المنسدلة: #ffffff
• لون خط القائمة المنسدلة: # 002d4c

إعدادات الرموز

جنبا إلى جنب مع إعدادات الرموز.

• لون أيقونة عربة التسوق: # 002d4c
• لون رمز البحث: # 002d4c
• لون أيقونة قائمة همبرغر: # 002d4c

تحجيم

وأكمل إعدادات الوحدة بإضافة أقصى ارتفاع للشعار إلى إعدادات التحجيم.

• أقصى ارتفاع للشعار: 60 بكسل

2. تطبيق تأثيرات لاصقة مخصصة

بدوره قسم # 2 مثبت

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

• موقف مثبت: التمسك بالأعلى
• الإزاحة العلوية اللاصقة: 0 بكسل
• حد الالتصاق السفلي: لا شيء
• الإزاحة من العناصر اللاصقة المحيطة: نعم
• الانتقال الافتراضي والأنماط الثابتة: نعم

تغيير خلفية التدرج للقسم في الحالة اللاصقة

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

• اللون 1: # 26333a
• اللون 2: # 1e272f

تمدد الصف في الحالة اللاصقة

بعد ذلك ، سنفتح الصف الذي يحتوي على وحدة القائمة وسنقوم بتعديل العرض في حالة ثابتة.

• العرض: 95٪

إزالة حشوة الصف في الحالة اللاصقة

نحن نزيل الحشوة العلوية والسفلية اللاصقة لصفنا أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

تغيير لون نص القائمة في الحالة اللاصقة

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

• لون نص القائمة: # ffbd68

تغيير ألوان أيقونة القائمة في الحالة اللاصقة

جنبا إلى جنب مع ألوان الأيقونة.

• لون أيقونة عربة التسوق: #ffffff
• لون رمز البحث: #ffffff
• لون أيقونة قائمة همبرغر: #ffffff

قم بإزالة ارتفاع الشعار في الحالة اللاصقة

وأخيرًا وليس آخرًا ، سنقوم بتغيير الحد الأقصى لارتفاع الشعار إلى صفر في حالة الالتصاق. سيؤدي هذا إلى إزالة الشعار من رأسنا بالكامل بمجرد تمكين الإعدادات الثابتة للقسم. هذا كل شيء! تأكد من حفظ جميع تغييرات Divi Theme Builder بمجرد الانتهاء من تصميم الرأس ومعاينته على موقع الويب الخاص بك.

• أقصى ارتفاع للشعار: 0 بكسل

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.