كيفية تغيير شعارك اللاصق في التمرير باستخدام Divi

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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

لون الخلفية

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

• لون الخلفية: # 556de0

تباعد

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

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

مربع الظل

إضافة ظل مربع أيضا.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.15)

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

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 1
• معادلة ارتفاعات العمود: نعم
• عرض:
  • سطح المكتب: 80٪
  • الجهاز اللوحي والهاتف: 100٪
• العرض الأقصى: 2580 بكسل

تباعد

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

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

تباعد العمود 1

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

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

لون خلفية العمود 2

انتقل إلى إعدادات العمود الثاني وأضف لونًا للخلفية.

• لون الخلفية: # 6eba01

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

اختر قائمة

الآن وقد تم وضع إعدادات الصف والعمود العامة في مكانها الصحيح ، فقد حان الوقت لإضافة وحدات نمطية ، بدءًا من "وحدة القائمة" في العمود 1.

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

قم بإزالة لون الخلفية الأبيض الافتراضي للوحدة.

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

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

• خط القائمة: مونتسيرات
• وزن خط القائمة: غامق
• لون نص القائمة: #ffffff
• حجم نص القائمة: 16 بكسل
• محاذاة النص: صحيح

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

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

• لون خلفية القائمة المنسدلة: # 556de0
• لون خط القائمة المنسدلة: rgba (0،45،76،0)
• لون خلفية قائمة الجوال: # 556de0
• لون نص قائمة الجوال: #ffffff

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

قم بتغيير ألوان الأيقونة بعد ذلك.

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

تباعد

وقم بتطبيق بعض قيم التباعد المستجيبة.

• الهامش العلوي:
  • الجهاز اللوحي والهاتف: 10 بكسل
• الهامش السفلي:
  • الجهاز اللوحي والهاتف: 10 بكسل
• الهامش الأيسر:
  • الجهاز اللوحي والهاتف: 5٪
• الهامش الأيمن: 5٪

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

أضف نسخة

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

محاذاة الزر

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

• محاذاة الزر: الوسط

إعدادات الزر

صمم الزر التالي.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 17 بكسل
• لون نص الزر: #ffffff
• عرض حد الزر: 0 بكسل

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

تباعد

وقم بتطبيق بعض قيم التباعد المستجيبة.

• الهامش العلوي:
  • سطح المكتب: 30 بكسل
  • الجهاز اللوحي والهاتف: 20 بكسل
• الهامش السفلي:
  • سطح المكتب: 30 بكسل
  • الجهاز اللوحي والهاتف: 20 بكسل

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

اجعل القسم مثبتًا

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

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

لون خلفية القسم اللاصق

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

• لون الخلفية: #FFFFFF

تحجيم الصف اللزجة

قم بتعديل عرض الصف في حالة ثابتة بعد ذلك.

• العرض: 100٪

عمود مثبت 1 تباعد

بعد ذلك ، سنزيل الحشوة العلوية والسفلية للعمود 1 في حالة لزجة.

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

لون خلفية العمود اللاصق 2

سنقوم بتغيير لون خلفية العمود اللاصق 2 أيضًا.

• لون الخلفية: # 556de0

لون نص القائمة اللاصقة

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

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

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

قم بتغيير بعض ألوان القائمة المنسدلة في حالة ثابتة أيضًا.

• لون خلفية القائمة المنسدلة: #ffffff
• لون خلفية قائمة الجوال: #ffffff
• لون نص قائمة الجوال: # 556de0

إعدادات رمز القائمة الثابتة

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

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

قائمة التباعد اللاصقة

بعد ذلك ، انتقل إلى إعدادات التباعد وقم بتطبيق بعض الهامش الأيسر اللاصق.

• الهامش الأيسر: 5٪

تباعد الأزرار اللاصقة

أخيرًا وليس آخرًا ، قم بتعديل قيم الهامش اللاصق لوحدة الأزرار في إعدادات التباعد.

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

3. تغيير الشعار في الحالة اللاصقة

قم بتحميل كلا الأيقونات إلى مكتبة الوسائط

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

حدد شعار ثابت

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

قم بتطبيق Max Logo Width & Height بالبكسل

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

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

انسخ عنوان URL للشعار اللاصق

الآن ، عد إلى مكتبة الوسائط الخاصة بك وانسخ عنوان URL لشعارك اللاصق.

إضافة عنوان URL مثبت في حالة مثبتة (عنصر شعار القائمة الرئيسي)

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

content: url(addlinkhere);

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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