كيفية التأكيد على الزر اللاصق الخاص بك في قسم رائع للحث على اتخاذ إجراء باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. بناء هيكل العنصر

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

لون الخلفية

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

• لون الخلفية: # 00965a

تحجيم

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

• إرتفاع max: 100vh

فيضانات

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

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

هيكل العمود

بمجرد أن تصبح إعدادات القسم في مكانها الصحيح ، أضف صفًا جديدًا باستخدام بنية العمود التالية:

تحجيم

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

• العرض: 100٪
• العرض الأقصى: لا شيء

إعدادات العمود 2

تباعد

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

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Work Sans
• وزن خط النص: غامق
• لون النص: # 000000
• حجم النص: 10vw
• ارتفاع خط النص: 0.2em

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Work Sans
• لون النص: #ffffff
• حجم النص: 56 بكسل
• ارتفاع خط النص: 1.2em

تحجيم

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

• العرض الأقصى: 400 بكسل

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

أضف نسخة

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: # 000000
• لون خلفية الزر:
  • الافتراضي: #ffffff
  • تحوم: rgba (255،255،255،0.7)
• عرض حد الزر: 5 بكسل
• لون حدود الزر: rgba (0،0،0،0)

• نصف قطر حدود الزر: 5 بكسل
• خط الزر: العمل بلا
• إظهار رمز الزر: لا

2. تطبيق تأثيرات التمرير والتثبيت

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

الآن وقد تم تعيين أساس تصميمنا ، فقد حان الوقت لتطبيق تأثيرات التمرير واللصق! افتح وحدة النص في العمود 1 وقم بتطبيق بعض الحركة العمودية سريعة الاستجابة.

• تمكين الحركة العمودية: نعم
• بداية الإزاحة:
  • سطح المكتب: 10
  • الجهاز اللوحي والهاتف: 0
• الإزاحة المتوسطة: 0
• إزاحة النهاية:
  • سطح المكتب: -10
  • الجهاز اللوحي والهاتف: 0
• مشغل تأثير الحركة: قمة العنصر

أضف تأثير Sticky Effect إلى العمود 2

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

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

أضف نمطًا مثبتًا إلى الزر في العمود 2

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

• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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