كيفية إنشاء قائمة CTA مثبتة أثناء التمرير لأسفل الصفحة

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

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

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/kpjbG8frPTQ

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

كيفية إنشاء قائمة CTA مثبتة أثناء التمرير عبر صفحة في Divi

بناء CTA # 1

للبدء في إنشاء أول CTA لدينا ، سنستخدم وحدة دعاية مغالى فيها زر CTA مخصص سيبقى في أعلى وأسفل الصفحة أثناء قيام المستخدم بالتمرير.

للبدء ، أنشئ صفًا جديدًا من عمود واحد داخل القسم العادي.

أضف دعاية مغالى فيها

داخل عمود الصف ، أضف وحدة دعاية مغالى فيها.

افتح إعدادات blurb وأضف صورة من اختيارك بدلاً من الرمز الافتراضي. أنا أستخدم صورة من Cryptocurrency Layout Pack.

ضمن علامة تبويب التصميم ، قم بتحديث أنماط النص على النحو التالي:

• مستوى عنوان العنوان: H2
• خط العنوان: Titillium Web
• وزن خط العنوان: شبه عريض
• محاذاة نص العنوان: الوسط
• حجم نص العنوان: 36 بكسل (سطح المكتب) ، 28 بكسل (هاتف)
• ارتفاع خط العنوان: 1.5em
• ارتفاع خط الجسم: 2em

إضافة صف لزر الحث على الشراء

تحت الصف الذي يحتوي على الدعاية المغلوطة التي أنشأناها للتو ، أضف صفًا جديدًا مكونًا من عمود واحد.

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

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

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 1400 بكسل (سطح المكتب) ، 100٪ (الكمبيوتر اللوحي)

إضافة زر دعوة لإجراء

داخل الصف الجديد ، أضف وحدة دعوة للعمل. التحديث التالي:

• سنحتاج فقط إلى عنصر الزر داخل هذه الوحدة حتى نتمكن من التخلص من العنوان والنص الأساسي.
• تأكد من إضافة زر رابط URL (سيفعل "#" في الوقت الحالي) بحيث يكون الزر مرئيًا عند تصميم التخطيط. يمكنك دائمًا تحديث هذا لاحقًا.
• قم بتعطيل خيار "استخدام لون الخلفية".

(ملاحظة: لن تتمكن من رؤية الزر الأبيض على خلفية بيضاء بعد ولكن سيتغير ذلك في الخطوة التالية)

ضمن علامة تبويب التصميم ، قم بتحديث أنماط الأزرار التالية:

• حجم نص الزر: 14 بكسل (سطح المكتب) ، 11 بكسل (الهاتف)
• لون نص الزر: # 1b1f50
• لون خلفية الزر: # 09d5fe
• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 2 بكسل
• خط الزر: Titillium Web
• وزن خط الزر: غامق
• نمط خط الزر: TT
• حشوة الزر: 1em أعلى ، 1em أسفل

استمر في تحديث التصميم على النحو التالي:

• العرض: 33.33٪
• محاذاة الوحدة: مركز
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

سيتيح عرض 33.33٪ للزر للزر أن يشغل 1/3 من نافذة المتصفح بالضبط عندما يكون في وضع الالتصاق. الجمع بين هذا مع زرين آخرين (كل منهما بنفس العرض 33.33٪) سيعطي شريط قائمة CTA كامل من الأزرار.

ضمن علامة التبويب خيارات متقدمة ، أضف مقتطف CSS المخصص التالي إلى وصف العرض الترويجي (يحتوي على مسافات غير ضرورية لسنا بحاجة إليها):

display:none;

ثم أضف مقتطفًا آخر من الزر الترويجي:

display:block;

جعل الزر لزج

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

قم بتحديث ما يلي:

• موقف مثبت: التمسك بالأعلى والأسفل
• الإزاحة العلوية اللاصقة: 54 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي)
• الإزاحة من العناصر اللاصقة المحيطة: لا

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

قم بتحديث نمط التحويل التالي في الحالة اللاصقة:

• تحويل محور X للترجمة (ثابت): -100٪

سيؤدي هذا إلى تحريك الزر على مسافة مساوية للعرض الدقيق للزر (وهو 33.33٪) بمجرد أن يلتصق بأعلى الصفحة أو أسفلها.

بناء CTA # 2

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

أولاً ، قم بتكرار المقطع.

افتح إعدادات وحدة Call to Action في القسم الجديد وقم بتحديث خيارات التحويل كما يلي:

• تحويل محور X للترجمة (مثبت): 0 بكسل

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

بناء CTA # 3

لإنشاء قسم CTA الثالث ، قم بتكرار القسم السابق.

ثم افتح إعدادات وحدة Call to Action في القسم الجديد وقم بتحديث خيارات التحويل كما يلي:

• تحويل المحور X للترجمة (مثبت): 100٪

سيؤدي هذا إلى تحريك الزر إلى اليمين مسافة مساوية للعرض الدقيق للزر (وهو 33.33٪) بمجرد أن يلتصق بأعلى الصفحة أو أسفلها.

تحديث نص الزر والألوان

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

للحث على اتخاذ إجراء # 2 ...

• نص الزر: عرض خططنا
• لون نص الزر: #ffffff
• لون خلفية الزر: # 1b1f50

للحث على اتخاذ إجراء # 3 ...

• نص الزر: دردش معنا
• لون نص الزر: #ffffff
• لون خلفية الزر: # 4328b7

أضف هامشًا مؤقتًا إلى القسم العلوي والسفلي لاختبار الوظائف

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

في القسم العلوي ، أضف هامشًا علويًا بمقدار 90 ساعة.

في القسم السفلي ، أضف هامش سفلي 90vh.

النتيجة النهائية

الآن دعنا نتحقق من النتيجة النهائية.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!