تعتبر الأشرطة الجانبية اللاصقة فعالة للغاية في جذب انتباه آخر دون تدخل أو تشتيت الانتباه. تكمن الحيلة في تضمين عنصر أو عنصرين في الشريط الجانبي "يظلان مرئيين" أو ثابتين على جانب الصفحة محتويات للمنشور عندما يقوم المستخدم بتمرير الصفحة. يعد هذا بديلاً منعشًا لتخطيط الشريط الجانبي التقليدي، لأنه يعطي انطباعًا بوجود تخطيط حديث كامل العرض (بدون شريط جانبي)، مع ميزة تقديم عبارات تحث المستخدم على اتخاذ إجراء مهمة على جانب الصفحة عند الضرورة.
في هذا البرنامج التعليمي ، سنوضح لك كيفية إضافة استدعاءات ثابتة للعمل إلى قالب منشور مدونة باستخدام Divi Theme Builder. تطبيق هذا التخطيط كبير. ستعمل مع أي صفحة أو قالب منشور تقريبًا. بالإضافة إلى ذلك ، لا يتعين عليك تقييد نفسك بـ CTAs ؛ يمكنك اختيار إضافة وحدة (وحدات) Divi من اختيارك.
ما تحتاجه للبدء
لتبدأ ، يجب عليك لتثبيت وتفعيل موضوع Divi . تأكد من أن لديك أحدث إصدار من Divi.
ستحتاج أيضًا إلى رسالة واحدة على الأقل تم إنشاؤها باستخدام Divi Builder للاختبار لعرض النتيجة المرجوة.
بعد ذلك ، أنت مستعد للمغادرة.
مسح
فيما يلي نظرة عامة سريعة على الإجراءات اللزجة التي تمت إضافتها إلى قالب نشر مدونة في Divi.
كيفية إضافة دعوات ثابتة إلى العمل في قالب منشور مدونتك في Divi
إضافة قالب باني السمة
تتمثل الخطوة الأولى في استيراد نموذجنا المحدد مسبقًا على موقعنا. سنستخدم قالب المنشور Divi Theme Builder Pack # 1.
للبدء ، انتقل إلى Divi> Generator المواضيع. انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة. في مشروط قابلية النقل ، حدد علامة التبويب استيراد واختر ملف divi-theme-builder-pack-1-post-template.json من المجلد. إذا كان لديك قوالب مثبتة حاليًا على موقعك ، فتأكد من إلغاء تحديد أي خيارات قد تحل محل القوالب الحالية. ثم انقر فوق زر الاستيراد.
بناء قالب نشر المدونة
بمجرد استيراد النموذج ، نحن على استعداد لإضافة CTAs الجديدة الخاصة بنا إلى الشريط الجانبي اللاصق لتخطيط القالب. للقيام بذلك ، انقر فوق رمز التحرير لمنطقة النص المخصصة.
تمت إضافة تخطيط الشريط الجانبي المزدوج لعقد عبارات الحث على اتخاذ إجراء للشريط الجانبي
في محرر تخطيط النموذج، ابحث عن الصف الذي يحتوي على وحدة النشر. محتويات واستبدل تخطيط العمود ببنية عمود خمس في ثلاثة أخماس في خمس (1/5 3/5 1/5). سيسمح لنا ذلك بإبقاء العمود في المنتصف لـ محتويات من المنشور مع توفير قسمين على كلا الجانبين لعبارات الحث على اتخاذ إجراء اللزجة.
بعد تغيير بنية العمود ، اسحب وحدة نشر المحتوى إلى العمود الأوسط.
تحديث معلمات الخط
افتح إعدادات الخط وقم بتحديث خيارات التصميم التالية:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 2
- العرض: 100٪ (سطح المكتب) ، 90٪ (الكمبيوتر اللوحي)
- أقصى عرض: 1500px
هذا سيتيح لنا مساحة نحتاجها لتكوين الشريط الجانبي المزدوج لدينا.
تحديث إعدادات عمود 1
ثم افتح إعدادات عمود 1 ومنح هذا العمود فئة CSS مخصصة:
- فئة CSS: لزجة- cta
إضافة شريط CTA الجانبي إلى العمود الأيسر
نحن الآن جاهزون لأول دعوة للعمل. أضف دعوة إلى وحدة الإجراء في العمود الأيمن.
أسلب شريط CTA الجانبي
تحديث الإعدادات كما يلي:
محتويات
- زر: «انقر هنا»
- Body: "المحتوى الخاص بك يذهب هنا. قم بتحرير أو حذف هذا النص عبر الإنترنت أو في إعدادات محتوى الوحدة. "
- عنوان URL لرابط الزر: #
تصميم نص الجسم
- خط الجسم: مونتسيرات
- وزن الخط: شبه جريئة
- النص الأساسي: المحاذاة الصحيحة
- لون النص الأساسي: # 444444
- حجم النص الأساسي: 22px (سطح المكتب) ، 18px (الكمبيوتر اللوحي)
- ارتفاع الجسم: 1.3em
زر
- حجم نص الزر: 14px
- لون نص الزر: #ffffff
- لون خلفية الزر: # 6148df
- عرض حد الزر: 0px
- نصف قطر الزر: 80px
- وزن الخط: غامق
- نمط خط الزر: TT
- حشوة الأزرار: 12px في الأعلى ، 12px في الأسفل ، 22px في اليسار ، 22px في اليمين
العرض ، المحاذاة ، الحشو والقيود
- العرض: 100٪
- أقصى عرض: 320px
- محاذاة الوحدة: اليمين
- الحشو: 10px على اليسار ، 10px على اليمين
- عرض الحد العلوي: 10px
- لون الحد العلوي: #eeeeee
- عرض الحد السفلي: 10px
- لون الحد السفلي: #eeeeee
إضافة الشريط الجانبي CTA إلى العمود الأيمن
لإنشاء CTA للعمود الأيمن ، انسخ الذي أنشأناه للتو والصقه في العمود الأيمن أقصى. ثم قم بتحديث إعدادات النسخة المكررة كما يلي:
- محاذاة النص الأساسي: يسار
- محاذاة الوحدة: اليسار
تحديث إعدادات عمود 3
بالنسبة إلى CTA في العمود الأيمن ، سنضيف الهامش العلوي إلى العمود لتأسيس موضع بداية للشريط الجانبي لـ CTA عند نقطة أقل من الصفحة.
ابدأ بفتح معلمات عمود 3 وإضافة نفس فئة CSS التي أضفناها إلى عمود 1:
- فئة CSS: لزجة- cta
ثم أضف CSS المخصص التالي إلى العنصر الرئيسي:
مكتب
margin-top: 50%
لوحة
margin-top: 0%
سيعطينا هذا نقطة بداية مختلفة للحث على اتخاذ إجراء اللاصق في العمود الأيمن ، وهو 50٪ من عرض الصف. لا تتردد في تعديل هذه القيمة حسب الحاجة لمنشور المدونة الخاص بك.
إضافة CSS مخصص إلى القالب باستخدام وحدة نمطية للكود
من أجل الحصول على موضعنا "الثابت" لخطابات CTA للشريط الجانبي ، نحتاج إلى إضافة 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 بأي وحدة Divi أو مجموعة من الوحدات لإنشاء أي شيء تريده. يمكنك أيضًا اختيار الاحتفاظ بعبارة CTA واحدة فقط على جانب واحد. يبدو أن لديها العديد من التطبيقات.
