كيفية إضافة سهام زر الزاوية المتحركة إلى تصميمك باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

إضافة قسم تخصص جديد

أضف قسم تخصص جديد إلى الصفحة التي تعمل عليها. حدد هيكل العمود التالي له:

خلفية متدرجة

افتح إعدادات القسم وقم بتطبيق خلفية التدرج التالية:

• اللون 1: # fff8f5
• اللون 2: # f9f3ef
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل اليسار
• موقف البداية: 40٪
• موضع النهاية: 40٪

تحجيم

انتقل إلى علامة تبويب تصميم القسم وقم بتغيير إعدادات التحجيم كما يلي:

• معادلة ارتفاعات العمود: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض الداخلي: 90٪
• أقصى عرض داخلي: 1580 بكسل

تباعد

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

• الحشوة اليمنى للعمود 1: 6٪

أضف وحدة النص رقم 1 إلى العمود 1

أضف محتوى H2

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

إعدادات نص H2

صمم إعدادات نص H2 للوحدة على النحو التالي:

• خط العنوان 2: Kumbh Sans
• وزن خط العنوان 2: غامق
• لون نص العنوان 2: # 08665c
• حجم نص العنوان 2:
  • سطح المكتب: 75 بكسل
  • الجهاز اللوحي: 60 بكسل
  • الهاتف: 45 بكسل

تباعد

أضف بعض الهامش العلوي والسفلي بعد ذلك.

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 50 بكسل

أضف وحدة النص رقم 2 إلى العمود 1

إضافة وصف المحتوى

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

إعدادات النص

قم بتغيير إعدادات نص الوحدة كما يلي:

• خط النص: كومبه سانس
• لون النص: # 08665c
• حجم النص: 16 بكسل
• ارتفاع خط النص: 1.8em

تباعد

أضف بعض الهامش السفلي على أحجام أصغر للشاشة أيضًا.

• الهامش السفلي:
  • سطح المكتب: /
  • الجهاز اللوحي والهاتف: 50 بكسل

أضف الصف رقم 1 إلى العمود 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

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

لون الخلفية

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

• لون الخلفية: #cccccc

تباعد

انتقل إلى إعدادات تباعد العمود واستخدم القيم المتجاوبة التالية:

• الحشوة العلوية:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي والهاتف: 70 بكسل
• الحشوة اليسرى:
  • سطح المكتب والجهاز اللوحي: 8٪
  • الهاتف: 10٪
• الحشوة اليمنى:
  • سطح المكتب والجهاز اللوحي: 8٪
  • الهاتف: 10٪

الحدود

أضف بعض الزوايا الدائرية إلى إعدادات الحدود أيضًا.

• جميع الزوايا: 10 بكسل

الرؤية

أكمل إعدادات العمود عن طريق إعدادات الفائض لتظهر في علامة التبويب خيارات متقدمة.

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

أضف وحدة النص رقم 1 إلى العمود 1

إضافة محتوى

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

إعدادات النص

قم بتغيير إعدادات نص الوحدة:

• خط النص: كومبه سانس
• وزن خط النص: خفيف
• لون النص: # 08665c
• حجم النص: 30 بكسل
• ارتفاع خط النص: 1em

تباعد

قم بتطبيق بعض الهامش السفلي أيضًا.

• الهامش السفلي: 15 بكسل

أضف وحدة Divider Module إلى العمود 1

الرؤية

ثم أضف وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # fff8f5

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• وزن الحاجز: 2 بكسل
• الارتفاع: 2 بكسل

تباعد

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

• الهامش السفلي: 50 بكسل

أضف وحدة النص رقم 2 إلى العمود 1

أضف محتوى H3

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

إعدادات نص H3

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

• خط العنوان 3: Kumbh Sans
• وزن خط العنوان 3: غامق
• لون نص العنوان 3: # 08665c
• حجم نص العنوان 3:
  • سطح المكتب: 48 بكسل
  • الجهاز اللوحي: 38 بكسل
  • الهاتف: 32 بكسل

تباعد

استخدم بعض الهامش السفلي أيضًا.

• الهامش السفلي: 15 بكسل

أضف وحدة النص رقم 3 إلى العمود 1

إضافة محتوى

أضف آخر وحدة نصية إلى العمود 1 مع بعض محتوى الوصف الذي تختاره.

إعدادات النص

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

• خط النص: كومبه سانس
• لون النص: # 08665c
• حجم النص: 16 بكسل
• ارتفاع خط النص: 1.8em

تباعد

قم بتضمين بعض الهامش السفلي أيضًا.

• الهامش السفلي:
  • سطح المكتب: 200 بكسل
  • الجهاز اللوحي والهاتف: 150 بكسل

أضف الوحدة النمطية للدعاية إلى العمود 1

اترك مربعات المحتوى فارغة

إلى آخر وحدة نحتاجها في هذا العمود ، وهي Blurb Module. اترك مربعات المحتوى فارغة.

الرمز الافتراضي

حدد رمز السهم التالي.

تحوم أيقونة

قم بتغيير الرمز عند التمرير.

إضافة رابط

استخدم ارتباطًا لهذه الوحدة أيضًا.

لون الخلفية تحوم

ثم أضف لون خلفية تحوم.

• لون خلفية التمرير: # 08665c

إعدادات الرمز الافتراضية

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

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: علوي
• محاذاة الصورة / الرمز: صحيح
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 80 بكسل

إعدادات رمز التمرير

قم بتعديل حجم خط الأيقونة عند التمرير.

• حجم خط رمز التمرير: 40 بكسل

تحجيم

ثم أضف بعض العرض إلى إعدادات التحجيم.

• العرض: 80 بكسل

تحوم التباعد

تعديل المساحة المتروكة العلوية واليمنى عند التمرير.

• تحوم أعلى الحشوة: 25 بكسل
• تحوم لليمين الحشو: 10 بكسل

الحدود

قم بتضمين بعض الزوايا الدائرية في إعدادات الحدود أيضًا.

• جميع الزوايا: 5 بكسل

مقياس تحوم

بعد ذلك ، استخدم خيار مقياس التحويل عند التمرير.

• تحوم كلاهما: 130٪

العنصر الرئيسي & Blurb Image CSS

بعد ذلك ، انتقل إلى علامة التبويب المتقدمة واستخدم السطر التالي من كود CSS للعنصر الرئيسي:

cursor: pointer;

استخدم هذا السطر لمربع css لصورة Blurb:

margin-bottom: 0px;

موقع

أكمل إعدادات الوحدة بإعادة وضعها في إعدادات الموضع:

• الموقف: مطلق
• الموقع: أسفل اليمين

أعد استخدام العمود 1

قم بإزالة العمود 2

بمجرد الانتهاء من العمود الأول ، يمكنك إعادة استخدامه في العمود الثاني. للقيام بذلك ، قم بإزالة العمود الثاني أولاً.

عمود الاستنساخ 1

ثم استنساخ الأول.

تغيير لون خلفية العمود 2

بالطبع ، ستحتاج إلى إجراء بعض التغييرات على العمود المكرر ، بدءًا من لون الخلفية.

• لون خلفية العمود 2: # f0c7b1

أضف تحويل الترجمة إلى العمود 2

نحن نضيف قيمة تحويل التحويل على أحجام الشاشات الأصغر أيضًا.

• حق:
  • سطح المكتب: /
  • الجهاز اللوحي والهاتف: 50 بكسل

تغيير المحتوى المكرر

تأكد من تغيير كل المحتوى المكرر.

تغيير رابط الوحدة النمطية Blurb

أكمل العمود المكرر عن طريق تغيير الارتباط داخل الوحدة النمطية Blurb.

إعادة استخدام الصف

بمجرد الانتهاء من الصف الأول وأعمدته ، يمكنك استنساخ الصف بأكمله.

قم بإزالة العمود 2

احذف العمود الثاني داخل إعدادات الصف.

تغيير لون خلفية العمود

ثم قم بتغيير لون خلفية العمود المتبقي.

• لون خلفية العمود: # dfe7f2

أضف الهامش العلوي للصف

ارجع إلى إعدادات الصف العامة وأضف بعض الهامش العلوي سريع الاستجابة.

• الهامش العلوي:
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 100 بكسل

تغيير المحتوى المكرر

بعد ذلك ، قم بتغيير كل المحتوى المكرر في العمود.

تغيير رابط الوحدة النمطية Blurb

أكمل البرنامج التعليمي عن طريق تغيير الارتباط داخل الوحدة النمطية Blurb. هذا كل شيء!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.