كيفية إنشاء CTA فريد مع نمط الخلفية وخيارات القناع في Divi
نشرت: 2022-05-25تجعل خيارات نمط الخلفية والقناع الجديدة لـ Divi من السهل إنشاء أقسام لافتة للنظر وفريدة من نوعها للحث على اتخاذ إجراء (CTA) على موقع الويب الخاص بك. يمكنك الجمع بين الصور والتدرجات والأنماط والأقنعة مع الكثير من خيارات التخصيص لإنشاء تصميمات خلفية فريدة من نوعها تجذب انتباه الزائر.
في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء قسم فريد للحث على اتخاذ إجراء مع نمط الخلفية الجديد وخيارات القناع الخاصة بـ Divi.
هيا بنا نبدأ!
نظرة خاطفة
فيما يلي معاينة لقسم CTA الذي سنقوم بتصميمه في هذا البرنامج التعليمي.
ما تحتاجه للبدء
قبل أن نبدأ ، قم بتثبيت وتنشيط Divi Theme وتأكد من أن لديك أحدث إصدار من Divi على موقع الويب الخاص بك.
دعنا نقفز.
كيفية إنشاء CTA فريد مع نمط خلفية Divi وخيارات القناع
قم بإنشاء صفحة جديدة باستخدام تخطيط مسبق الصنع
في برنامجنا التعليمي ، سوف نستخدم تصميمًا مُعدًا مسبقًا من مكتبة Divi. بالنسبة لهذا التصميم ، سنستخدم الصفحة المقصودة لمتجر الآيس كريم من حزمة تخطيط متجر الآيس كريم.
قم بإنشاء صفحة جديدة ، أضف عنوانًا ، ثم حدد خيار استخدام Divi Builder.
سنستخدم تخطيطًا معدًا مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد استعراض التخطيطات.
ابحث عن تخطيط الصفحة المقصودة لمتجر الآيس كريم وحدده.
حدد استخدام هذا التخطيط لإضافة التخطيط إلى صفحتك.
الآن نحن جاهزون لبناء تصميمنا.
تعديل تخطيط نمط الخلفية والقناع
سنقوم بتعديل نكهة قسم CTA الشهر من هذا التصميم. دعنا نجري بعض التغييرات على تخطيطنا لنمط الخلفية وتصميم القناع.
إعدادات الصف
افتح إعدادات الصف ، ثم حدد التصميم.
تحت Sizing ، قم بمساواة ارتفاعات العمود.
- معادلة ارتفاعات العمود: نعم
تحت التباعد ، قم بإزالة الحشوة العلوية لإحضار المخروط إلى أعلى القسم.
- الحشوة العلوية: 0 بكسل
إعدادات العمود 1
ضمن علامة التبويب "المحتوى" الخاصة بإعدادات الصف ، حدد إعدادات العمود 1. ضمن الخلفية ، احذف الخلفية البرتقالية.
إعدادات العمود 2
الآن ، حدد إعدادات العمود 2. يحتوي التصميم الأصلي على بعض المسافات التي لا نحتاجها ، لذا دعنا نتخلص منها. ضمن التصميم ، انتقل إلى التباعد وحذف المساحة المتروكة العلوية.
ثم حدد Advanced وأضف CSS المخصص التالي إلى العنصر الرئيسي بحيث يتم توسيط نص "نكهة الشهر" رأسياً.
margin:auto;
إعدادات القسم
افتح إعدادات القسم. ضمن التصميم ، حدد المساحة المتروكة. اضبط مساحة القسم بحيث يكون المخروط العلوي محاذيًا لأعلى الصفحة.
- الحشو: 0 بكسل
إضافة نمط الخلفية والقناع إلى قسم الحث على الشراء
الآن بعد أن تم تعديل تخطيطنا ، يمكننا إضافة نمط الخلفية والقناع الخاص بنا. هناك خيارات لا حصر لها لأنماط الخلفية والأقنعة مع خيارات Divi الجديدة ، مما يعني أنه يمكنك إنشاء تصميمات فريدة لقسم CTA الخاص بك ببضع نقرات فقط. تابع معنا لمعرفة كيفية تصميم خلفية جذابة باستخدام هذه الإعدادات.
إعدادات لون الخلفية والنقش والقناع
انتقل إلى قسم إعدادات الخلفية.
تحت علامة تبويب اللون ، أضف خلفية برتقالية
- اللون: # FFA256
ضمن علامة التبويب "النمط" ، قم بتعيين شكل ولون النمط.
- الشكل: حلويات
- اللون: # FF7D14
الآن دعونا نضيف القناع. حدد علامة تبويب القناع ، ثم أضف الإعدادات كما يلي:
- الشكل: ركن النقطة
- لون القناع: #FFFFFF
- تحويل القناع: أفقي
- نسبة عرض القناع: أفقي
- حجم القناع: الغطاء
تعديلات التصميم
الآن بعد أن أصبحت خلفيتنا في مكانها الصحيح ، دعونا نجري بعض التعديلات النهائية على التصميم.
افتح إعدادات الزر "شراء" وقم بتغيير المحاذاة ضمن علامة التبويب "التصميم".
- محاذاة الزر: يسار
قم بتغيير لون خلفية حالة التمرير لزر "الشراء" بحيث يبرز على الخلفية البرتقالية.
- خلفية الزر عند التمرير: # FF7D14
سنقوم أيضًا بتعديل تخطيط الصف لإضافة مزيد من المساحة بين الخلفية البرتقالية وقسم "نكهة الشهر" على اليمين. قم بتغيير التخطيط من 1: 1 إلى 3: 2.
والآن اكتمل تصميم سطح المكتب وتعلمت كيفية إنشاء قسم CTA فريد مع نمط خلفية Divi وخيارات القناع!
جعل قسم CTA مستجيبًا
عندما يتم عرض قسم CTA الخاص بنا على هاتف أو جهاز لوحي ، يتم تكديس المحتوى الموجود في العمود 2 أسفل العمود 1. وقد يتسبب هذا في بعض مشكلات سهولة القراءة في تصميمنا. دعونا نجري بعض التعديلات لتحسين المحتوى والتصميم الخاص بنا للشاشات الأصغر باستخدام إعدادات Divi المدمجة المتجاوبة.
نظرًا لأننا نريد أن يأتي النص قبل الأزرار ، انسخ نص "Highlight Flavor of the month" إلى وحدة النص "July Orange Chocolate". تأكد من إضافة هذا النص فقط إلى إصدارات الهاتف والجهاز اللوحي.
- قم بتغيير نص "Orange Chocolate" إلى H3.
بعد ذلك ، سنجري بعض التغييرات على النص بحيث يبرز في هذه الخلفية. انتقل إلى علامة التبويب "تصميم" وقم بإجراء التغييرات التالية:
- لون نص H2 (الهاتف والجهاز اللوحي): 000000 #
- حجم نص H2 (الهاتف والجهاز اللوحي): 30 بكسل
- لون نص H3 (الهاتف والجهاز اللوحي): 000000 #
- لون نص H4 (الهاتف والجهاز اللوحي): 000000 #
انتقل الآن إلى إعدادات الوحدة النصية الأصلية "نكهة الشهر" وقم بتغيير الرؤية بحيث تكون مرئية فقط على أجهزة سطح المكتب. سيؤدي ذلك إلى إخفاء وحدة النص الأصلية على الأجهزة الصغيرة. سيظهر نص نكهة الشهر أعلى الزر ، مع النص الآخر على الصفحة.
- تعطيل في: الهاتف والجهاز اللوحي
بعد ذلك ، افتح إعدادات الصف ثم افتح إعدادات العمود 1. قم بإزالة الحشوة اليمنى واليسرى.
- المساحة المتروكة اليمنى: 0 بكسل
- المساحة المتروكة اليسرى: 0 بكسل
انتقل إلى إعدادات القسم ، ثم الخلفية ، ثم قم بتحرير إعدادات القناع
- تحويل القناع: عكس
- نسبة عرض القناع: عمودي
والآن قمت بإنشاء قسم CTA سريع الاستجابة مع خلفية فريدة بفضل خيارات Divi ونمط الخلفية والقناع.
النتيجة النهائية
دعنا نلقي نظرة على النتيجة النهائية.
افكار اخيرة
من السهل جدًا تصميم قسم فريد وجذاب للحث على اتخاذ إجراء ، بفضل نمط الخلفية وخيارات القناع القوية لـ Divi. أطلق العنان لإبداعك من خلال تجربة ألوان وأنماط وأقنعة وتوليفات مختلفة. من السهل تصميمه ، ويمكنك ضبط الإعدادات الخاصة بك حتى تحصل على المظهر المثالي ببضع نقرات فقط. الأهم من ذلك ، أنه مدمج في Divi! لا حاجة بعد الآن لتصميم رسومات الخلفية في برنامج آخر. يمكنك تطبيق إعدادات الخلفية على الأقسام والصفوف والوحدات النمطية الأخرى للحصول على المزيد من التصميمات الفريدة. إذا كنت ترغب في معرفة المزيد حول نمط خلفية Divi وميزات القناع ، فراجع البرنامج التعليمي الخاص بنا للحصول على قسم البطل مع أقنعة وأنماط الخلفية وتعلم كيفية الجمع بين مُنشئ Divi المتدرج مع أقنعة وأنماط الخلفية.
كيف استخدمت نمط خلفية Divi وخيارات القناع على موقع الويب الخاص بك؟ أخبرنا بما قمت بإنشائه في التعليقات أدناه!