كيفية الكشف عن عمود CTA في حالة لزجة مع Divi

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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

لنبدأ في إعادة التكوين!

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

لون الخلفية

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

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

أضف الصف رقم 1

هيكل العمود

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

تباعد

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

• الهامش السفلي: 5٪

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

أضف محتوى H2

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

إعدادات نص H2

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

• خط العنوان 2: Alata
• وزن خط العنوان 2: غامق
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 000000
• حجم نص العنوان 2:
  • سطح المكتب: 55 بكسل
  • الجهاز اللوحي: 40 بكسل
  • الهاتف: 30 بكسل

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

الرؤية

أسفل وحدة النص مباشرةً ، أضف وحدة Divider وتأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الخط على النحو التالي:

• لون الخط: # 3a7a84
• نمط الخط: مزدوج

تحجيم

أكمل إعدادات الوحدة عن طريق تعديل إعدادات التحجيم وفقًا لذلك:

• وزن الحاجز: 10 بكسل
• العرض: 8٪
• محاذاة الوحدة: المركز
• الارتفاع: 10 بكسل

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• معادلة ارتفاعات العمود: نعم
• العرض: 95٪
• العرض الأقصى: 2580 بكسل

تباعد

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

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

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

الصورة الخلفية

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

• حجم صورة الخلفية: الغلاف

الحدود

انتقل إلى علامة تبويب تصميم العمود وقم بتطبيق بعض الزوايا الدائرية.

• جميع الزوايا: 20 بكسل

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

إضافة محتوى

حان الوقت لإضافة الوحدات ، بدءًا من Blurb Module في العمود 2. أضف بعض المحتوى الذي تختاره.

حدد أيقونة

حدد رمزًا بعد ذلك.

لون الخلفية

ثم قم بتطبيق لون خلفية بيضاء.

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

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

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

• لون الأيقونة: # 3a7a84
• وضع الصورة / الرمز: اليسار

إعدادات نص العنوان

بعد ذلك ، قم بتحديد نمط إعدادات نص العنوان.

• مستوى عنوان العنوان: H3
• خط العنوان: Alata
• وزن خط العنوان: غامق
• لون نص العنوان: # 000000
• حجم نص العنوان:
  • سطح المكتب: 35 بكسل
  • الجهاز اللوحي: 30 بكسل
  • الهاتف: 20 بكسل

إعدادات النص الأساسي

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

• خط الجسم: كارلا
• حجم النص الأساسي:
  • سطح المكتب: 17 بكسل
  • الجهاز اللوحي: 15 بكسل
  • الهاتف: 14 بكسل
• ارتفاع خط الجسم: 2.5em

تحجيم

قم بتغيير إعدادات التحجيم بعد ذلك.

• عرض المحتوى: 100٪

تباعد

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

• حشوة علوية: 20٪
• حشوة سفلية: 20٪
• الحشوة اليسرى: 10٪
• الحشوة اليمنى: 10٪

الحدود

بعد ذلك ، سنضيف بعض الزوايا الدائرية إلى إعدادات الحدود.

• جميع الزوايا: 20 بكسل

مربع الظل

وسنقوم بتضمين ظل مربع دقيق.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (59،120،130،0.14)

حيوية

تابع عن طريق إزالة الرسوم المتحركة الافتراضية لوحدة Blurb Module في إعدادات الرسوم المتحركة التالية.

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

دعاية عنوان CSS

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

margin-bottom: 20px;

استنساخ وحدة Blurb مرتين

بمجرد الانتهاء من أول وحدة Blurb Module ، قم باستنساخ الوحدة النمطية Blurb حتى عدد المرات التي تريدها.

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

قم بتغيير المحتوى في كل وحدة مكررة.

أضف وحدة CTA إلى العمود 1

إضافة محتوى

في العمود 1 ، الوحدة الوحيدة التي نحتاجها هي وحدة Call to Action. أضف بعض المحتوى من اختيارك.

إضافة ارتباط الزر

أضف رابط الزر التالي.

خلفية متدرجة

ثم قم بتطبيق خلفية متدرجة.

• اللون 1: rgba (59،120،130،0.53)
• اللون 2: # 112730
• نوع التدرج: خطي
• اتجاه التدرج: 161 درجة

إعدادات نص العنوان

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

• مستوى عنوان العنوان: H3
• خط العنوان: Alata
• وزن خط العنوان: غامق
• لون نص العنوان: #ffffff
• حجم نص العنوان:
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 30 بكسل

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر:
  • سطح المكتب: 20 بكسل
  • الجهاز اللوحي: 17 بكسل
  • الهاتف: 15 بكسل
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: Alata
• وزن خط الزر: غامق

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشو الأيسر: 20 بكسل
• الحشوة اليمنى: 20 بكسل
• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الرأسي: 3 بكسل
• لون الظل: #ffffff

تحجيم

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

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

تباعد

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

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

الحدود

قم بتضمين بعض الزوايا الدائرية أيضًا.

• جميع الزوايا: 20 بكسل

تحويل الترجمة

أكمل إعدادات الوحدة بتطبيق إعدادات ترجمة التحويل التالية:

• حق:
  • سطح المكتب: -25 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل

تطبيق تأثير Sticky Effect على وحدة CTA

الإعدادات الثابتة

الآن بعد أن أصبحت جميع العناصر في مكانها الصحيح ، حان الوقت لتطبيق التأثير اللاصق. افتح وحدة CTA وقم بتطبيق الإعدادات اللاصقة التالية:

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

العتامة

الآن بعد أن أصبحت الوحدة النمطية لزجة ، يمكننا تطبيق الأنماط اللاصقة. انتقل إلى إعدادات المرشحات وقم بتطبيق إعدادات مرشح العتامة التالية:

• التعتيم الافتراضي:
  • سطح المكتب: 0٪
  • الجهاز اللوحي والهاتف: 100٪
• عتامة لزجة: 100٪

انتقال

أخيرًا وليس آخرًا ، سنقوم بتغيير إعدادات النقل في علامة التبويب خيارات متقدمة. هذا كل شيء!

• مدة الانتقال: 800 مللي ثانية
• منحنى سرعة الانتقال: سهولة

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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