بناء لافتات مستجيبة مع خيارات الخلفية الجديدة لديفي

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

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

إعلانات Html مقابل إعلانات بانر الصور

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

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

هيا بنا نبدأ.

نظرة خاطفة

قبل أن ننطلق رسميًا. إليك نظرة خاطفة على اللافتات التي سنبنيها في هذا المنشور.

تنفيذ التصميم مع Divi

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

المثال رقم 1: شعار بانر

باستخدام Visual Builder ، أضف قسمًا عاديًا بعمود واحد وصف واحد.

بعد ذلك ، أضف وحدة زر إلى الصف.

ثم قم بتحديث إعدادات وحدة الزر على النحو التالي:

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

نص الزر: [أدخل النص الذي تريد استخدامه لرسالة البانر الخاصة بك]
عنوان URL للزر: [أدخل عنوان URL]

خيارات التصميم

محاذاة الزر: الوسط
لون النص: فاتح
استخدام الأنماط المخصصة للزر: نعم
حجم نص الزر: 32 بكسل
عرض حد الزر: 0 بكسل
خط الزر: Arvo
رمز الزر: [إضافة أيقونة. أنا أستخدم رمز المؤشر]
فقط إظهار الأيقونة عند التحويم للزر: NO

خيارات متقدمة

نحتاج إلى ضبط عرض الزر على 100٪ لملء عرض العمود. نحتاج أيضًا إلى توسيع ارتفاع الزر لتوفير مساحة كافية لمحتوى البانر الخاص بنا. للقيام بذلك ، أدخل CSS المخصص التالي في المربع Main Element:

 Width: 100%;
padding: 20px 0 200px; 

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

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

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

انتقل إلى إعدادات الصف التي توجد بها وحدة الزر الخاصة بك وقم بتحديث ما يلي:

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

تحت علامة تبويب صورة الخلفية

صورة الخلفية: [إدراج الصورة]
موضع صورة الخلفية: [استخدم هذا الخيار لضبط صورة الشعار الخاص بك. كنت أرغب في إظهار الجزء السفلي من صورتي ، لذا حددت "المركز السفلي".]

الآن قم بالتمرير لأسفل قليلاً لتحديث خيارات خلفية العمود 1.

حدد علامة التبويب تدرج الخلفية في العمود 1 ثم انقر فوق الزر الدائري الرمادي مع رمز زائد أبيض.

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

ألوان تدرج الخلفية: rgba (131،0،233،0.92) ، rgba (0،0،0،0.69)
اتجاه التدرج للعمود: 180 درجة
موضع بداية العمود: 50٪
موضع نهاية العمود: 0٪

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

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

حجم صورة خلفية العمود 1: الحجم الفعلي (شعاري بحجم 120 × 120 png)

العمود 1 موقف صورة الخلفية: المركز

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

لنقم بمثال آخر.

المثال الثاني: لافتة نصية بسيطة

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

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

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

صورة الخلفية: [أدخل صورة جديدة]
موقف صورة الخلفية: المركز
ألوان تدرج الخلفية للعمود 1: rgba (0،0،0،0.41) ، rgba (12،113،195،0.66)
اتجاه العمود التدرج: 270deg

انقر بعد ذلك على علامة تبويب صورة الخلفية في العمود 1 واحذف الصورة / الشعار.

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

انتقل إلى " إعدادات وحدة الزر" وقم بتحديث ما يلي:

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

نص الزر: [أدخل نصًا لإعلانك]
عنوان URL للزر: [أدخل عنوان URL للشعار]

خيارات التصميم

حجم نص الزر: 42 بكسل
عرض حد الزر: 19 بكسل
لون حدود الزر: rgba (0،0،0،0.17)
تباعد حرف الزر: 8 بكسل
خط الزر: مونتسيرات ، بولد (B)
إضافة رمز الزر: NO
زر تمرير لون الحدود: rgba (0،0،0،0.46)
نصف قطر حدود الزر تحوم: 0 بكسل
تباعد الأحرف التي تحوم على الزر: 12 بكسل

كما ترى ، فإن نموذج البانر هذا له تأثير تمرير فريد يغير لون الحدود ويزيد تباعد الأحرف:

كيفية جعل شعارك بعرض كامل

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

الحشو المخصص: 0 بكسل أعلى ، 0 بكسل يمين ، 0 بكسل أسفل ، 0 بكسل يسار

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

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

اجعل هذا الصف بعرض كامل: نعم
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 1

يمتد الشعار الآن إلى عرض الشاشة بالكامل على جميع الأجهزة.

كيفية عمل لافتة لاصقة

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

لتقليل الارتفاع ، انتقل إلى Button Module Settings (إعدادات وحدة الزر) ضمن علامة التبويب Advanced (خيارات متقدمة) ، وأضف CSS التالي في مربع Main Element :

padding: 0px 0px !important;

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

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

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

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

إضافة لافتات إلى تخطيطات متعددة الأعمدة

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

هيا نحاول.

أضف قسمًا عاديًا آخر بهيكل صف 1/2 1/2 عمود.

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

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

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

تحت علامة تبويب صورة الخلفية

خلفية العمود 1: [أدخل صورة الخلفية]
العمود 1 موضع صورة الخلفية: [اضبط موضع الصورة حسب رغبتك]
مزيج صورة الخلفية في العمود 1: مضاعفة

تحت علامة التبويب تدرج الخلفية

ألوان التدرج للعمود 1: rgba (255،255،255،0) ، # e02b20
العمود 1 اتجاه التدرج: 180 درجة
موضع البداية للعمود 1: 70٪
موضع نهاية العمود 1: 0٪

الخطوة الأخيرة هي تحديث إعدادات وحدة الزر :

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

نص الزر: سلسلة السفر

خيارات التصميم

حجم نص الزر: 32 بكسل
عرض حد الزر: 2 بكسل
تباعد حرف الزر: 0 بكسل
لون حدود تمرير الزر: # edf000
تباعد الأحرف التي تحوم على الزر: 0 بكسل

خيارات متقدمة

CSS مخصص في مربع العنصر الرئيسي:

padding: 350px 0px 50px;
width: 100%;

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

لا تتردد في تكرار هذه العملية للشعار في العمود التالي وتحديث المحتوى كما تريد.

تحقق من النتيجة.

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

مستجيب؟

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

فيما يلي مثال على الشكل الذي تبدو عليه هذه عند تصغير حجم الشاشات إلى أحجام أصغر:

التوافق المتصفح

حاليًا ، خاصية CSS لوضع مزيج الخلفية غير مدعومة من قبل Internet Explorer أو Edge ولدى Safari خيارات مزج محدودة. ومع ذلك ، فإن التراجع ليس كبيرًا في تجربتي في معظم الحالات.

افكار اخيرة

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

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

هتافات!