كيفية إضافة Sticky Sidebar CTAs إلى قالب منشور مدونة في Divi

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

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إضافة CTAs الشريط الجانبي اللاصق إلى قالب منشور مدونة باستخدام Divi Theme Builder. تطبيق هذا التخطيط بعيد المدى. ستعمل مع أي صفحة أو قالب منشور تقريبًا. بالإضافة إلى ذلك ، لا يتعين عليك تقييد نفسك بـ CTAs ؛ يمكنك اختيار إضافة أي وحدة (وحدات) Divi تريدها.

هيا بنا نبدأ!

قم بتنزيل قالب Sticky Sidebar CTA مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط وإضافة أحد ملفات json إلى Divi Theme Builder باستخدام خيار Theme Builder Portability.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

للبدء ، سوف تحتاج إلى تثبيت وتفعيل Divi Theme. تأكد من أن لديك أحدث إصدار من Divi.

ستحتاج أيضًا إلى منشور واحد على الأقل تم إنشاؤه باستخدام Divi Builder لأغراض الاختبار من أجل إظهار النتيجة المقصودة.

بعد ذلك ، أنت على استعداد للذهاب.

نظرة خاطفة

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

كيفية إضافة CTAs الشريط الجانبي اللاصق إلى قالب منشور المدونة الخاص بك في Divi

إضافة قالب منشئ السمة

تتضمن الخطوة الأولى استيراد نموذجنا المعد مسبقًا إلى موقعنا. سنستخدم قالب المنشور من Divi Theme Builder Pack # 1.

للبدء ، انتقل إلى Divi> Theme Builder. انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة. في حالة قابلية النقل ، حدد علامة التبويب استيراد واختر ملف divi-theme-builder-pack-1-post-template.json من المجلد. في حالة وجود أي قوالب مثبتة حاليًا على موقعك ، تأكد من إلغاء تحديد أي خيارات قد تتجاوز القوالب الحالية. ثم انقر فوق زر الاستيراد.

بناء قالب منشور المدونة

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

إضافة تخطيط شريط جانبي مزدوج للاحتفاظ بعبارات الحث على اتخاذ إجراء للشريط الجانبي

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

بعد تغيير هيكل العمود ، اسحب وحدة محتوى المنشور إلى العمود الأوسط.

تحديث إعدادات الصف

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 100٪ (كمبيوتر مكتبي) ، 90٪ (كمبيوتر لوحي)
• العرض الأقصى: 1500 بكسل

سيعطينا هذا المساحة التي نحتاجها لإعداد الشريط الجانبي المزدوج.

تحديث إعدادات العمود 1

بعد ذلك ، افتح إعدادات العمود 1 وامنح العمود فئة CSS مخصصة:

• فئة CSS: sticky-cta

إضافة شريط جانبي CTA إلى العمود الأيسر

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

تصميم الشريط الجانبي للحث على اتخاذ إجراء

قم بتحديث الإعدادات كما يلي:

المحتوى

• الزر: "انقر هنا"
• Body: "المحتوى الخاص بك يذهب هنا. قم بتحرير أو إزالة هذا النص في الصفحة أو في إعدادات محتوى الوحدة النمطية. "
• URL ارتباط الزر: #

تصميم النص الأساسي

• خط الجسم: مونتسيرات
• وزن خط الجسم: شبه عريض
• محاذاة النص الأساسي: صحيح
• لون النص الأساسي: # 444444
• حجم النص الأساسي: 22 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي)
• ارتفاع خط الجسم: 1.3em

زر

• حجم نص الزر: 14 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 6148df
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 80 بكسل
• وزن خط الزر: غامق
• نمط خط الزر: TT
• حشوة الزر: 12 بكسل للأعلى ، 12 بكسل للأسفل ، 22 بكسل لليسار ، 22 بكسل لليمين

العرض والمحاذاة والمساحة والحدود

• العرض: 100٪
• العرض الأقصى: 320 بكسل
• محاذاة الوحدة: صحيح
• المساحة المتروكة: 10 بكسل على اليسار ، و 10 بكسل على اليمين
• عرض الحد العلوي: 10 بكسل
• لون الحد العلوي: #eeeeee
• عرض الحد السفلي: 10 بكسل
• لون الحد السفلي: #eeeeee

إضافة الشريط الجانبي CTA إلى العمود الأيمن

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

• محاذاة النص الأساسي: يسار
• وحدة المحاذاة: اليسار

تحديث إعدادات العمود 3

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

أولاً ، افتح إعدادات العمود 3 وأضف نفس فئة CSS التي أضفناها إلى العمود 1:

• فئة CSS: sticky-cta

ثم أضف CSS المخصص التالي إلى العنصر الرئيسي:

سطح المكتب

margin-top: 50%

لوح

margin-top: 0%

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

إضافة CSS المخصص إلى القالب باستخدام وحدة التعليمات البرمجية

من أجل الحصول على موضعنا "الثابت" لخطابات الحث على اتخاذ إجراء للشريط الجانبي ، نحتاج إلى إضافة بعض CSS المخصصة. للقيام بذلك ، قم بإنشاء وحدة رمز نمطية جديدة ضمن وحدة محتوى النشر (أو في أي مكان على الصفحة).

ثم الصق CSS التالي في مربع الشفرة:

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

الإزاحة العلوية في هذا الرمز هي عملية حسابية تضع CTA عموديًا في الوسط على الصفحة أثناء التمرير. 50vh هو في الأساس نصف ارتفاع نافذة المتصفح و 130 بكسل هو ما يقرب من نصف ارتفاع CTA. إذا كان لديك CTA بارتفاع أكبر / أقل ، فستحتاج إلى ضبط 130 بكسل لأعلى أو لأسفل.

احفظ التغييرات

بمجرد الانتهاء ، احفظ تخطيط القالب.

ثم احفظ إعدادات منشئ السمات

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

لعرض النتيجة النهائية ، قم بزيارة منشور مدونة يستخدم القالب.

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

وها هو على شاشة الهاتف المحمول.

افكار اخيرة

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

آمل أن يساعد هذا في تحسين كيفية عرض CTAs على قوالب النشر الخاصة بك من الآن فصاعدًا.

لمزيد من الإلهام ، تحقق من منشوراتنا المماثلة حول العناصر اللاصقة.

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

هتافات!