كلما كانت CTA جذابة بصريًا ، كانت فرصة معدل التحويل أفضل. هناك العديد من الطرق لتصميم عبارات الحث على اتخاذ إجراء الخاصة بك ، ولكن في هذه المقالة ، سوف نوضح لك كيفية إنشاء قوالب أعمدة رائعة للحث على اتخاذ إجراء مع صور شبه شفافة وتداخلات الأعمدة. يمكنك العثور على الصور شبه الشفافة في مجلد التنزيل أدناه ، ولكن لا تتردد في استخدام الصور الأخرى. ستتمكن أيضًا من تنزيل ملف JSON مجانًا!
دعونا نذهب.
معاينات
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على كيفية ظهوره على أحجام الشاشات المختلفة.
لنبدأ إعادة!
إضافة قسم جديد
السياق
ابدأ بإنشاء صفحة جديدة أو إضافة قسم عادي جديد إلى صفحة موجودة. ثم انتقل إلى قسم الإعدادات وأضف خلفية متدرجة.
- الخلفية: التدرج
- التدرج اللوني التدرج اللوني: رمادي فاتح جدًا #efefef
- لون الخلفية اثنين: أبيض # fffff
- نوع التدرج: شعاعي
- الاتجاه شعاعي: المركز
- وضع البدء: 52٪
- الوضع النهائي: 50٪
مباعدة
قم بالتبديل إلى علامة التبويب تصميم واضبط التعبئة في إعدادات التباعد.
- الحشو العلوي والسفلي
- المكتب: 0vw
- مواد التنجيد في جوارب
- الكمبيوتر اللوحي + الهاتف: 70vw
أضف سطرًا جديدًا
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية الأعمدة التالية:
التحجيم
ثم ضبط العرض والحد الأقصى لعرض الخط.
- العرض: 100٪
- أقصى عرض 100٪
أضف وحدة نصية
أضف H2 والمحتوى النصي
حان الوقت لإضافة وحدات! أولاً، أضف وحدة نصية وأدخل بعضها محتويات H2 والفقرات من اختيارك.
نص
قم بالتبديل إلى علامة تبويب التصميم وقم بنمط النص كما يلي:
- نص الخط: فتح بلا
- محاذاة النص: المركز
- لون النص: أخضر #5bba1b
- حجم النص:
- المكتب: 1.2vw
- الكمبيوتر اللوحي: 2.8vw
- الهاتف: 3.6vw
- تباعد الأحرف النصية: 0.2vw
- ارتفاع سطر النص: 1.8em
العنوان 2 نص
بعد تصميم نص الفقرة ، قم أيضًا بتنسيق النص H2.
- القسم: H2
- H2 وزن الخط: Doppio One
- H2 Text Alignment: Center
- لون النص H2: #3d3d3d
- حجم النص H2:
- المكتب: 4.4vw
- الكمبيوتر اللوحي: 5.9vw
- الهاتف: 6.9vw
مباعدة
وإضافة القليل من الحشو في الأعلى.
- أعلى الحشو: 212px
إضافة وحدة القسمة
رؤية
تحت وحدة النص ، أضف وحدة تقسيم واضبط الرؤية على "نعم".
- الرؤية: نعم
خط
تغيير لون الفاصل ثم.
- لون الخط: رمادي غامق #545454
التحجيم
الآن ، اضبط حجم الفاصل بحيث يبدو أصغر.
- وزن الفاصل: 4px
- العرض: 9٪
- محاذاة الوحدة: المركز
مباعدة
إضافة أيضا هامش أعلى سلبية.
- الهامش العلوي:
- المكتب: -40px
- الجهاز اللوحي + الهاتف: -15px
أضف سطرًا جديدًا
هيكل العمود
تابع بإضافة صف جديد بثلاثة أعمدة متساوية في الحجم. سيكون هذا هو الأساس لتصميم عمود CTA.
السياق
قبل إضافة الوحدات النمطية ، قم بإضافة تدرج إلى خلفية معلمات الخط.
- الخلفية: التدرج
- 1 تدرج لون الخلفية: white #ffffff
- لون الخلفية التدرج الثاني: شفاف
- نوع التدرج: شعاعي
- مركز التوجيه الشعاعي
- وضع البدء: 42٪
- الوضع النهائي: 50٪
التحجيم
الآن ، اضبط حجم الخط.
- العرض: 100٪
- الحد الأقصى للعرض: 100٪
مباعدة
ثم انتقل إلى إعدادات التباعد وأضف قيم الحشو المخصصة.
- مواد التنجيد العليا: 22vw
- الحشو السفلي: 10vw
- الحشوة اليسرى واليمنى: 10vw
إعدادات عمود 1
السياق
تابع بفتح عمود 1 وإضافة خلفية متدرجة.
- الخلفية: التدرج
- لون خلفية التدرج: أزرق #2a4eed
- لون خلفية التدرج الثاني: أزرق فاتح #91f5f7
- نوع التدرج: الخطي
- اتجاه التدرج: 38deg
- وضع البدء: 23٪
الحدود
ثم حدد الزوايا المدورة للأعمدة في إعدادات الحدود.
- زوايا مدورة: 2vw في جميع الزوايا
صندوق الظل
إضافة الظل مربع خفية جدا.
- صندوق الظل: الخيار الثاني
- ظل المربع الوضع الأفقي: 6px
- Box Shadow الوضع الرأسي: -10px
- Box Shadow Blur Force: 50px
الفيضانات
تأكد من أن الفائض من العمود مرئي أيضًا.
- التدفق الأفقي والرأسي: مرئي
إعدادات عمود 2
السياق
انتقل إلى العمود الثاني وأضف خلفية التدرج اللوني التالية:
- الخلفية: التدرج
- لون التدرج الخلفي واحد: #1ba038
- تدرج لونين خلفيين: #c6f727
- نوع التدرج: الخطي
- اتجاه التدرج: 38deg
- وضع البدء: 23٪
الحدود
إضافة أيضا دائرة نصف قطرها الحدود إلى العمود.
- الزوايا المستديرة: 2vw في الزوايا الأربع
صندوق الظل
مع الظل مربع خفية.
- صندوق الظل: الخيار الثاني
- ظل المربع الوضع الأفقي: 6px
- Box Shadow الوضع الرأسي: -10px
- Box Shadow Blur Force: 50px
محول
هذا العمود أعلى قليلاً من الأعمدة الأخرى. لإنشاء هذا التأثير ، سنقوم بضبط إعدادات تحويل التحويل للعمود 2.
- ترجمة المحول:
- المكتب: -8vw ، المحور ص
- الكمبيوتر اللوحي + الهاتف: 30vw ، محور Y
الفيضانات
أيضا جعل مرئية الفيض من هذا العمود.
- الفيض الأفقي والرأسي: مرئية
إعدادات عمود 3
السياق
دعنا ننتقل إلى العمود الأخير والأخير! إضافة خلفية التدرج.
- الخلفية: التدرج
- لون خلفية متدرجة واحد: # f0562c
- تدرج لونين خلفيين: #f1a526
- نوع التدرج: الخطي
- اتجاه التدرج: 38deg
- وضع البدء: 23٪
الحدود
قم بالتبديل إلى علامة التبويب تصميم وإضافة نصف قطر حد لكل زاوية.
- زوايا مدورة: 2vw على جميع الزوايا.
صندوق الظل
إضافة مربع الظل أيضا.
- صندوق الظل: الخيار الثاني
- ظل المربع الوضع الأفقي: 6px
- Box Shadow الوضع الرأسي: -10px
- Box Shadow Blur Force: 50px
محول
في أحجام الشاشات الأصغر سنحتاج إلى تغيير موضع العمود باستخدام قيم تحويل التحويل المخصصة.
- ترجمة المحول:
- الكمبيوتر اللوحي + الهاتف: 60vw
الفيضانات
أخيرًا ، اضبط إعدادات الفائض.
- الفيض الأفقي والرأسي: مرئية
أضف وحدات الصورة
استيراد صورة شبه شفافة انقطاع
بمجرد الانتهاء من جميع معلمات العمود ، حان الوقت لإضافة الوحدات النمطية. أضف وحدة صورة إلى العمود 1 وقم بتحميل صورة شبه شفافة من اختيارك. يمكنك العثور على الصور التي استخدمناها في المجلد المضغوط الذي تمكنت من تنزيله في بداية هذه المقالة.
التحجيم
جعل وحدة العرض الكامل.
- التبديل إلى وضع العرض الكامل: نعم
مباعدة
ثم أضف الهامش المخصص واملأ القيم.
- الهامش العلوي:
- المكتب: -11vw
- الجهاز اللوحي + الهاتف: -24vw
- الحشو اليسار واليمين:
- المكتب: 5vw
- الكمبيوتر اللوحي + الهاتف: 20vw
تحويل السلم إلى تحوم
نضيف تأثير تمرير دقيق للصورة باستخدام خيار تحويل المقياس في إعدادات التحويل.
- تحويل المقياس عند التحويم: 120٪ على كلا المحورين.
Z-مؤشر
للتأكد من ظهور الصورة في أعلى العمود ، قم بزيادة قيمة الفهرس z في علامة التبويب خيارات متقدمة.
- Z- الفهرس: 1
قم بتكرار وسحب وحدات الصورة
الآن قم بنسخ وحدة الصورة مرتين ووضع التكرارات في العمودين المتبقيين. هذه العملية أسهل في الوضع السلكي.
- ابدأ بتكرار وحدة الصورة مرتين
- ثم اسحب وحدات الصورة الجديدة إلى عمودين 2 و 3.
- قم بتنزيل صور مختلفة
إضافة وحدات النص
أضف محتوى H3
أسفل الصورة في العمود 1، أضف وحدة نصية وأدخل بعضها محتويات H3 من اختيارك.
العنوان 3 نص
قم بالتبديل إلى علامة تبويب التصميم وقم بتطبيق نمط على إعدادات نص H3.
- عنوان النص: H3
- H3 الخط: Doppio واحد
- H3 وزن الخط: غامق
- H3 المحاذاة: المركز
- لون نص H3: أبيض # fffff
- حجم النص H3:
- المكتب: 1.8vw
- الكمبيوتر اللوحي: 5vw
- الهاتف: 6vw
مكررة وسحب وحدات النص
استنساخ الوحدة النمطية للنص مرتين ووضع التكرارات في العمودين المتبقيين.
- ابدأ بتكرار الوحدات النصية مرتين.
- ثم اسحبها أسفل وحدات الصورة في العمودين 2 و 3.
- غير ال محتويات في كل وحدة نصية جديدة
إضافة وحدات النص
إضافة محتوى
ضمن وحدة العنوان ، أضف وحدة نصية جديدة. أضف محتوى الفقرة في منطقة المحتوى.
نص
الآن ، على غرار النص على النحو التالي.
- نص الخط: فتح بلا
- لون النص: أبيض # fffff
- حجم النص:
- المكتب: 0.6vw
- الكمبيوتر اللوحي: 2vw
- الهاتف: 2.8vw
- ارتفاع سطر النص: 2.2em
مباعدة
لتوسيط النص ، اضبط تباعد الوحدة النمطية على النحو التالي.
- الهامش السفلي:
- المكتب: 5vw
- الكمبيوتر اللوحي + الهاتف: 10vw
- الحشو اليسار واليمين
- المكتب: 5vw
- الكمبيوتر اللوحي + الهاتف: 14vw
مكررة وسحب وحدات النص
استنساخ وحدة النص مرتين واسحب التكرارات إلى العمودين المتبقيين.
- ابدأ بتكرار الوحدات النصية مرتين
- ثم ضع التكرارات في العمودين 2 و 3
- تغيير محتوى كل مكررة
إضافة وحدات زر
إضافة محتوى
دعنا نذهب إلى الوحدة الأخيرة! أضف وحدة زر إلى عمود 1 مع نسخة من اختيارك.
إضافة رابط
أدخل رابطًا في خيارات ارتباط الوحدة النمطية.
انحياز
الآن محاذاة وحدة زر.
- محاذاة: المركز
أنماط الزر
ثم اتصل بالزر كما يلي.
- حجم نص الزر:
- المكتب: 1vw
- الكمبيوتر اللوحي: 2vw
- الهاتف: 3vw
- لون نص الزر: أزرق فاتح #2a4eed
- لون خلفية الزر: أبيض # fffff
- نصف قطر حد الزر: 50vw
- خط الزر: مزدوج واحد
- وزن الخط: غامق
- لون الأزرار: مشرق أزرق #2a4eed
مباعدة
شكل الزر وقم بإنشاء تداخل في الجزء السفلي عن طريق إضافة قيم مخصصة للهامش والحشو في إعدادات التباعد.
- الهامش السفلي:
- المكتب: -1.7vw
- الكمبيوتر اللوحي: -4vw
- الهاتف: -6vw
- تنجيد أعلى وأسفل:
- المكتب: 1vw
- الكمبيوتر اللوحي + الهاتف: 3vw
- الحشو اليسار واليمين
- المكتب: 4vw
- الكمبيوتر اللوحي + الهاتف: 10vw
صندوق الظل
أخيرًا وليس آخرًا ، أضف ظل مربعًا دقيقًا إلى الزر.
- صندوق الظل: الخيار الأول
- ظل المربع الوضع الأفقي: 0px
- ظل مربع الوضع العمودي: 2px
- Box Shadow Blur Force: 50px
وحدات مكررة وسحب زر
كما هو الحال مع الوحدات السابقة ، استنساخ الزر مرتين ووضع التكرارات في العمودين المتبقيين من السطر.
- استنساخ وحدة زر مرتين
- ضع التكرارات في العمودين 2 و 3
نص رمز الزر 2 واللون
قم بتغيير لون رمز وحدة الزر والزر في العمود 2.
- لون نص الزر: أخضر # 1ba038
- لون الأيقونة: # 1ba038
نص رمز الزر 3 واللون
افعل نفس الشيء مع الزر الموجود في العمود الأخير وانت انتهيت!
- لون نص الأزرار: Orange #f0562c
- لون الأيقونة # f0562c
لإتمام
في هذه المقالة ، أوضحنا لك كيفية استخدام الصور شبه الشفافة لإنشاء تصميم مذهل لعمود CTA. استخدمنا إعدادات تجاوز العمود Divi بحيث تتداخل الصور والأزرار بسلاسة. جرب استخدام هذا التصميم في مشروعك القادم Divi ودعنا نعرف كيف تسير الأمور في قسم التعليقات!
