كيفية إنشاء عناوين قسم مثبتة باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

اشترك في قناتنا على اليوتيوب

1. إنشاء تصميم القسم

إضافة قسم جديد

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

أضف وحدة نصية إلى العمود

أضف محتوى H2

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

إعدادات نص H2

انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات نص H2 على النحو التالي:

• خط العنوان 2: بوبينز
• وزن خط العنوان 2: شبه عريض
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 000000
• حجم نص العنوان 2:
  • سطح المكتب: 20vw
  • الجهاز اللوحي والهاتف: 28vw

أضف الصف رقم 2

هيكل العمود

أضف صفًا آخر أسفل الصف السابق مباشرةً باستخدام بنية العمود التالية:

تحجيم

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

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

أضف وحدة نصية إلى العمود 2

إضافة محتوى

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

إعدادات النص

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

• خط النص: بوبينز
• لون النص: # 000000
• حجم الخط:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 4vw
  • الهاتف: 5vw
• تباعد الحروف النصية: -0.1vw
• ارتفاع خط النص: 1.6em

تحجيم

قم بتعديل إعدادات التحجيم عبر أحجام الشاشات المختلفة أيضًا.

• عرض:
  • سطح المكتب: 70٪
  • الجهاز اللوحي والهاتف: 90٪
• محاذاة الوحدة: المركز

أضف وحدة الصورة النمطية إلى العمود 2

تحميل الصور

إلى الوحدة التالية ، وهي وحدة صورة. قم بتحميل صورة من اختيارك.

تحجيم

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

• فرض عرض كامل: نعم

تباعد

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

• الهامش الأعلى: 100 بكسل

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

أضف نسخة

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر:
  • سطح المكتب: 1.5vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3.5vw
• لون نص الزر: #ffffff
• لون خلفية الزر: # f6223e
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: بوبينز
• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار
• فقط إظهار الرمز عند التمرير للزر: لا

تباعد

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

• الحشوة العلوية:
  • سطح المكتب والجهاز اللوحي: 3٪
  • الهاتف: 5٪
• الحشوة السفلية:
  • سطح المكتب والجهاز اللوحي: 3٪
  • الهاتف: 5٪
• الحشوة اليسرى:
  • سطح المكتب: 5vw
  • الجهاز اللوحي: 8vw
  • هاتف: 12vw
• الحشوة اليمنى:
  • سطح المكتب: 5vw
  • الجهاز اللوحي: 8vw
  • هاتف: 12vw

أضف وحدة نصية إلى العمود 2

إضافة محتوى قائمة نقطية

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

إعدادات النص

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

• خط النص: بوبينز
• لون النص: # 000000
• حجم الخط:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 4vw
  • الهاتف: 5vw
• تباعد الحروف النصية: -0.1vw
• ارتفاع خط النص: 1.6em

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

قم بإجراء بعض التغييرات على إعدادات نص القائمة المرتبة أيضًا.

• لون نص القائمة المطلوبة: # ff2340
• ارتفاع سطر القائمة المطلوبة: 1.6em
• نوع نمط القائمة المطلوبة: upper-roman
• موضع نمط القائمة المطلوبة: خارجي

أضف لون النص الأسود إلى قائمة العناصر بشكل فردي في Content Box

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

تحجيم

بعد ذلك ، سنقوم بتغيير إعدادات التحجيم عبر أحجام الشاشات المختلفة.

• عرض:
  • سطح المكتب: 70٪
  • الجهاز اللوحي والهاتف: 90٪
• محاذاة الوحدة: المركز

تباعد

سنطبق بعض قيم الهوامش والحشو المخصصة على إعدادات تباعد الوحدة أيضًا.

• الهامش الأعلى: 50 بكسل
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

2. تطبيق تأثير لاصق على عنوان القسم

أضف تأثير لاصق للصف

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

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

تعديل فهرس الصف Z

للتأكد من بقاء الصف اللاصق أسفل الصف الثاني في تصميمنا ، سنقوم بتعيين فهرس من الألف إلى الياء "1" لصفنا اللاصق. عند التمرير ، سترى الصف اللاصق ووحدة النص الخاصة به أسفل وحدات الصف الثاني.

• الفهرس Z: 1

إضافة وضع المزج للعمود 2 (الصف رقم 2)

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

• وضع المزج: الضرب

تغيير إعدادات نص Sticky H2

سنقوم بتطبيق بعض الأنماط اللاصقة على وحدة النص الخاصة بنا في الصف رقم 1 أيضًا. ابدأ بتغيير لون نص H2 في حالة لاصقة وتطبيق ظل نص مخصص أيضًا.

• لون نص H2 الثابت: #ffffff
• ظل نص العنوان 2: الخيار الثاني (انظر طباعة الشاشة أدناه)
• لون ظل نص العنوان 2:
  • الافتراضي: rgba (0،0،0،0)
  • مثبت: rgba (0،0،0،0.08)

تغيير تباعد وحدة النص اللاصق

سنقوم بتغيير موضع الوحدة أيضًا باستخدام بعض الهامش الأيسر اللاصق السلبي في إعدادات التباعد

• الهامش الأيسر الثابت: -35٪

زيادة مدة انتقال وحدة النص

ولضمان انتقال سلس ، سنزيد مدة الانتقال في علامة التبويب "خيارات متقدمة".

• مدة الانتقال: 500 مللي ثانية

3. قسم إعادة الاستخدام

قسم الاستنساخ

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

تغيير محتوى العنوان

تأكد من تغيير محتوى العنوان في الصف الأول.

تطابق حجم النص مع طول الحرف

بناءً على عدد الأحرف التي يحتوي عليها عنوان H2 الجديد ، قد ترغب في ضبط حجم نص العنوان 2.

قم بتغيير كل المحتويات والصور الأخرى

وبالطبع ، ستحتاج إلى تغيير كل المحتويات الأخرى في القسم المكرر أيضًا. هذا كل شيء!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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