استخدام صور شفافة لإنشاء تداخل أعمدة CTA جميلة مع Divi

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

دعنا نذهب اليها.

المعاينات

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل The CTA Column Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

لنبدأ في إعادة التكوين!

إضافة قسم جديد

خلفية

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

• الخلفية: التدرج
• لون التدرج للخلفية واحد: رمادي فاتح جدًا #efefef
• لون الخلفية المتدرج الثاني: أبيض #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 52٪
• موقف النهاية: 50٪

تباعد

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

• الحشو العلوي والسفلي
  • سطح المكتب: 0vw
• حشوة سفلية
  • الجهاز اللوحي + الهاتف: 70vw

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

ثم اضبط العرض والعرض الأقصى للصف.

• العرض: 100٪
• أقصى عرض 100٪

أضف وحدة نصية

أضف H2 ومحتوى النص

حان الوقت لإضافة وحدات! أولاً ، أضف وحدة نصية وأدخل بعض محتوى H2 والفقرة من اختيارك.

نص

انتقل إلى علامة تبويب التصميم وقم بتنسيق النص على النحو التالي:

• خط النص: Open Sans
• محاذاة النص: الوسط
• لون النص: أخضر # 5bba1b
• حجم الخط:
  • سطح المكتب: 1.2vw
  • الجهاز اللوحي: 2.8vw
  • الهاتف: 3.6vw
• تباعد حروف النص: 0.2vw
• ارتفاع خط النص: 1.8em

عنوان 2 نص

بعد تصميم نص الفقرة ، قم بتنسيق نص H2 أيضًا.

• العنوان: H2
• وزن الخط H2: Doppio One
• محاذاة نص H2: الوسط
• لون نص H2: رمادي غامق جدا # 3d3d3d
• حجم نص H2:
  • سطح المكتب: 4.4vw
  • الجهاز اللوحي: 5.9vw
  • الهاتف: 6.9vw

تباعد

وإضافة بعض الحشو العلوي.

• الحشو العلوي: 212 بكسل

إضافة وحدة المقسم

الرؤية

أسفل وحدة النص ، أضف وحدة فاصل واضبط الرؤية على "نعم".

• الرؤية: نعم

خط

قم بتغيير لون الفاصل بعد ذلك.

• لون الخط: رمادي غامق # 545454

تحجيم

الآن ، اضبط حجم الحاجز بحيث يبدو أصغر.

• وزن الحاجز: 4 بكسل
• العرض: 9٪
• محاذاة الوحدة: المركز

تباعد

أضف بعض الهامش العلوي السلبي أيضًا.

• الهامش العلوي:
  • سطح المكتب: -40 بكسل
  • الجهاز اللوحي + الهاتف: -15 بكسل

أضف صفًا جديدًا

هيكل العمود

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

خلفية

قبل إضافة أي وحدات نمطية ، أضف تدرجًا إلى الخلفية إلى إعدادات الصف.

• الخلفية: التدرج
• تدرج لون الخلفية الأول: أبيض #ffffff
• تدرج لون الخلفية الثاني: شفاف
• نوع التدرج: شعاعي
• مركز الاتجاه الشعاعي
• مركز البداية: 42٪
• موقف النهاية: 50٪

تحجيم

الآن ، اضبط حجم الصف.

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 22vw
• الحشو السفلي: 10vw
• الحشوة اليسرى واليمنى: 10vw

إعدادات العمود 1

خلفية

تابع عن طريق فتح إعدادات العمود 1 وإضافة خلفية متدرجة.

• الخلفية: التدرج
• لون التدرج للخلفية واحد: أزرق # 2a4eed
• لون التدرج للخلفية الثاني: أزرق فاتح # 91f5f7
• نوع التدرج: خطي
• اتجاه التدرج: 38 درجة
• موقف البداية: 23٪

الحدود

امنح العمود الزوايا الدائرية في إعدادات الحدود بعد ذلك.

• الزوايا الدائرية: 2vw في جميع الزوايا

مربع الظل

أضف ظل مربع دقيقًا أيضًا.

• ظل المربع: الخيار الثاني
• مربع الظل الأفقي: 6 بكسل
• مربع الظل الرأسي: -10 بكسل
• مربع قوة طمس الظل: 50 بكسل

فيضانات

تأكد من أن الفائض في العمود مرئي أيضًا.

• تدفق أفقي ورأسي: مرئي

إعدادات العمود 2

خلفية

انتقل إلى العمود الثاني وأضف خلفية التدرج التالية:

• الخلفية: التدرج
• لون التدرج للخلفية واحد: # 1ba038
• لون الخلفية المتدرج الثاني: # c6f727
• نوع التدرج: خطي
• اتجاه التدرج: 38 درجة
• موقف البداية: 23٪

الحدود

أضف بعض نصف قطر الحدود إلى العمود أيضًا.

• الزوايا الدائرية: 2vw في جميع الزوايا الأربع

مربع الظل

جنبا إلى جنب مع الظل مربع خفية.

• ظل المربع: الخيار الثاني
• مربع الظل الأفقي: 6 بكسل
• مربع الظل الرأسي: -10 بكسل
• مربع قوة طمس الظل: 50 بكسل

تحول

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

• ترجمة التحويل:
  • سطح المكتب: -8vw ، محور ص
  • جهاز لوحي + هاتف: 30vw ، محور ص

فيضانات

اجعل الفائض في هذا العمود مرئيًا أيضًا.

• الفيضانات الأفقية والعمودية: مرئية

إعدادات العمود 3

خلفية

إلى العمود التالي والأخير! أضف خلفية متدرجة.

• الخلفية: التدرج
• لون التدرج للخلفية واحد: # f0562c
• لون التدرج للخلفية الثاني: # f1a526
• نوع التدرج: خطي
• اتجاه التدرج: 38 درجة
• موقف البداية: 23٪

الحدود

انتقل إلى علامة تبويب التصميم وأضف بعض نصف قطر الحدود إلى كل زاوية.

• الزوايا الدائرية: 2vw في جميع الزوايا.

مربع الظل

إضافة ظل مربع أيضا.

• ظل المربع: الخيار الثاني
• مربع الظل الأفقي: 6 بكسل
• مربع الظل الرأسي: -10 بكسل
• مربع قوة طمس الظل: 50 بكسل

تحول

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

• ترجمة التحويل:
  • الكمبيوتر اللوحي + الهاتف: 60vw

فيضانات

أخيرًا ، اضبط إعدادات الفائض.

• الفيضانات الأفقية والعمودية: مرئية

إضافة وحدات الصورة

قم بتحميل صورة مقطوعة وشبه شفافة

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

تحجيم

اجعل الوحدة ذات عرض كامل.

• فرض عرض كامل: نعم

تباعد

أضف بعض القيم المخصصة للهامش والحشو بعد ذلك.

• الهامش العلوي:
  • سطح المكتب: -11vw
  • الجهاز اللوحي + الهاتف: -24vw
• الحشوة اليسرى واليمنى:
  • سطح المكتب: 5vw
  • الجهاز اللوحي + الهاتف: 20vw

مقياس التحويل عند التمرير

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

• مقياس التحويل عند التمرير: 120٪ على كلا المحورين.

مؤشر Z

للتأكد من ظهور الصورة أعلى العمود ، سنزيد قيمة الفهرس z في علامة التبويب "خيارات متقدمة".

• الفهرس Z: 1

نسخ وحدات الصورة وسحبها

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

• أولاً ، قم بتكرار وحدة الصورة مرتين
• بعد ذلك ، اسحب وحدات الصورة النمطية الجديدة إلى العمودين 2 و 3
• تحميل صور مختلفة

أضف وحدات نصية

أضف محتوى H3

أسفل الصورة في العمود 1 ، أضف وحدة نصية وأدخل بعض محتوى H3 من اختيارك.

عنوان 3 نص

انتقل إلى علامة تبويب التصميم وحدد إعدادات نص H3.

• نص العنوان: H3
• خط H3: Doppio One
• وزن الخط H3: غامق
• محاذاة H3: الوسط
• لون نص H3: أبيض #ffffff
• حجم نص H3:
  • سطح المكتب: 1.8vw
  • الجهاز اللوحي: 5vw
  • الهاتف: 6vw

تكرار وحدات النص واسحبها

استنساخ وحدة النص مرتين وضع التكرارات في العمودين المتبقيين.

• أولاً ، قم بتكرار الوحدات النصية مرتين
• ثم اسحبها أسفل وحدات الصورة النمطية في العمودين 2 و 3
• قم بتغيير المحتوى في كل وحدة نصية جديدة

أضف وحدات نصية

إضافة محتوى

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

نص

الآن ، قم بتنسيق النص على النحو التالي.

• خط النص: Open Sans
• لون النص: أبيض #ffffff
• حجم الخط:
  • سطح المكتب: 0.6vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 2.8vw
• ارتفاع خط النص: 2.2em

تباعد

لتوسيط النص ، اضبط تباعد الوحدة على النحو التالي.

• الهامش السفلي:
  • سطح المكتب: 5vw
  • الجهاز اللوحي + الهاتف: 10vw
• الحشو الأيسر والأيمن
  • سطح المكتب: 5vw
  • الجهاز اللوحي + الهاتف: 14vw

تكرار وحدات النص واسحبها

انسخ وحدة النص مرتين واسحب التكرارات إلى العمودين المتبقيين.

• أولاً ، قم بتكرار الوحدات النصية مرتين
• ثم ضع التكرارات في العمودين 2 و 3
• قم بتغيير المحتوى في كل نسخة

أضف وحدات الأزرار

إضافة محتوى

إلى آخر وحدة! أضف وحدة زر إلى العمود 1 مع نسخة من اختيارك.

إضافة رابط

أدخل ارتباطًا في خيارات ارتباط الوحدة النمطية.

انتقام

الآن ، قم بمحاذاة وحدة الزر.

• المحاذاة: المركز

أنماط الزر

بعد ذلك ، قم بتصميم الزر على النحو التالي.

• حجم نص الزر:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• لون نص الزر: أزرق ساطع # 2a4eed
• لون خلفية الزر: أبيض #ffffff
• نصف قطر حدود الزر: 50vw
• خط الزر: Doppio One
• وزن خط الزر: غامق
• لون رمز الزر: أزرق ساطع # 2a4eed

تباعد

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

• الهامش السفلي:
  • سطح المكتب: -1.5vw
  • الجهاز اللوحي: -4 vw
  • الهاتف: -6vw
• الحشوة العلوية والسفلية:
  • سطح المكتب: 1vw
  • الجهاز اللوحي + الهاتف: 3vw
• الحشو الأيسر والأيمن
  • سطح المكتب: 4vw
  • الجهاز اللوحي + الهاتف: 10vw

مربع الظل

أخيرًا وليس آخرًا ، أضف ظل مربع دقيقًا إلى الزر.

• ظل الصندوق: الخيار الأول
• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• مربع قوة طمس الظل: 50 بكسل

وحدات زر مكررة وسحب

تمامًا مثل الوحدات السابقة ، انسخ الزر مرتين وضع التكرارات في العمودين المتبقيين من الصف.

• استنساخ وحدة الزر مرتين
• ضع التكرارات في العمودين 2 و 3

الزر 2 لون النص والرمز

قم بتغيير لون الزر والرمز لوحدة الزر في العمود 2.

• لون نص الزر: أخضر # 1ba038
• لون الأيقونة: # 1ba038

الزر 3 لون النص والرمز

افعل نفس الشيء مع الزر في العمود الأخير ، وقد انتهيت!

• لون نص الزر: برتقالي # f0562c
• لون الأيقونة: # f0562c

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

انها التفاف

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