إنشاء CTAs Slide-in مع إعدادات Divi لمحاذاة الصف والرسوم المتحركة

كل أسبوع ، نقدم لك حزم تخطيط Divi جديدة ومجانية يمكنك استخدامها لمشروعك التالي. بالنسبة لإحدى حزم التخطيط ، نشارك أيضًا حالة استخدام ستساعدك في نقل موقع الويب الخاص بك إلى المستوى التالي. هذا الأسبوع ، كجزء من مبادرة تصميم Divi المستمرة الخاصة بنا ، سوف نوضح لك كيفية إنشاء CTAs المنزلقة مع محاذاة صف Divi وإعدادات الرسوم المتحركة باستخدام Cleaning Company Layout Pack.

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

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

معاينة

دعنا نلقي نظرة على الأمثلة الثلاثة المختلفة التي سنتعامل معها في هذا المنشور:

تحميل الصفحة المقصودة لشركة التنظيف

إضافة صفحة جديدة والتبديل إلى Visual Builder

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

تحميل الصفحة المقصودة لشركة التنظيف

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

ابحث عن حزمة تخطيط شركة التنظيف ، وحدد تخطيط الصفحة المقصودة وقم بتحميله على صفحتك.

إزالة جميع إعدادات الرسوم المتحركة على الصفحة

حدد موقع القسم على الصفحة

بمجرد تحميل التخطيط على صفحتك ، انطلق وحدد القسم التالي.

إزالة الرسوم المتحركة

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

تمديد النمط لجميع الأقسام

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

تمديد النمط لجميع الصفوف

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

تمديد النمط لجميع الوحدات

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

إنشاء CTA # 1

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

موقع

لنبدأ في إنشاء أول CTA منزلق! أضف صفًا جديدًا في الجزء السفلي من القسم التالي:

هيكل العمود

اختر بنية العمود التالية للصف الذي أضفته للتو:

محاذاة الصف

سنقوم بدفع الصف إلى اليسار للمساعدة في إنشاء تأثير الانزلاق.

• محاذاة الصف: اليسار

تحجيم

سنقوم أيضًا بتقليل عرض الصف.

• استخدام العرض المخصص: نعم
• العرض المخصص: 500 بكسل

تباعد

وللتخلص من المساحة البيضاء غير الضرورية ، قم بإزالة الحشوة العلوية والسفلية للصف.

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

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

أضف نسخة

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

إضافة رابط

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

إزالة لون الخلفية

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

نسخ قسم التدرج

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

لصق التدرج في وحدة CTA

الصق هذه الخلفية المتدرجة في وحدة CTA.

إعدادات نص العنوان

افتح إعدادات CTA Module مرة أخرى ، وانتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات لمطابقة حزمة التخطيط:

• خط العنوان: أوبونتو
• وزن خط العنوان: غامق
• حجم نص العنوان: 24 بكسل (سطح المكتب والجهاز اللوحي) ، 16 بكسل (الهاتف)
• ارتفاع خط العنوان: 1.2em

إعدادات النص الأساسي

قم بتغيير وزن خط الجسم أيضًا.

• وزن خط الجسم: شبه عريض

إعدادات الزر

قم بتغيير إعدادات الزر بعد ذلك.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 18 بكسل
• لون نص الزر: # 557df3
• لون خلفية الزر: #FFFFFF
• عرض حد الزر: 10 بكسل
• لون حدود الزر: #FFFFFF
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: أوبونتو
• وزن الخط: عريض

تباعد

قم بزيادة المساحة المتروكة للوحدة أيضًا.

• الحشوة العلوية: 80 بكسل
• الحشو السفلي: 80 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

الحدود

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

• أعلى اليمين: 100 بكسل
• أسفل اليمين: 100 بكسل

مربع الظل

لإنشاء مزيد من العمق ، سنضيف ظل مربع دقيق.

• قوة مربع الظل الضبابية: 71 بكسل
• قوة انتشار الظل المربع: -5 بكسل

حيوية

أخيرًا وليس آخرًا ، امنح وحدة CTA الخاصة بك تأثيرًا متحركًا.

• اتجاه الرسوم المتحركة: صحيح
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: خطي

إنشاء CTA # 2

استنساخ CTA # 1 صف وإجراء التغييرات

صف استنساخ

لإنشاء المثال الثاني ، امض قدمًا وقم باستنساخ الصف الأول.

اسحب إلى القسم

قم بالتمرير لأسفل الصفحة وضع النسخة المكررة هنا:

قم بإزالة الحشوة العلوية للقسم

افتح إعدادات القسم الذي وضعت فيه الصف وقم بإزالة الحشوة العلوية.

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

قم بإزالة نصف قطر الحد الأيسر العلوي للقسم

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

قم بإزالة CTA Top Right Border Radius

بعد ذلك ، افتح وحدة CTA وأزل نصف قطر الحد الأيمن العلوي للسماح للقسم والوحدة بالاندماج.

تغيير الرسوم المتحركة

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

• اتجاه الرسوم المتحركة: المركز
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: خطي

إنشاء CTA # 3

استنساخ CTA # 1 صف وإجراء التغييرات

صف استنساخ

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

اسحب إلى القسم

ضع النسخة المكررة في القسم التالي:

تغيير محاذاة الصف

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

• محاذاة الصف: صحيح

قم بإزالة CTA Gradient Background

قم بإزالة الخلفية المتدرجة للوحدة أيضًا.

استخدم لون الخلفية بدلاً من ذلك

استخدم لون الخلفية بدلاً من ذلك.

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

تغيير لون نص الزر

لمطابقة لون الخلفية ، قم بتغيير لون نص الزر أيضًا.

• لون نص الزر: # f2835a

إزالة CTA Border Radius

نقوم بتحويل وحدة CTA إلى مربع عن طريق إزالة كل نصف قطر الحدود الذي تم إعطاؤه.

تغيير الرسوم المتحركة

قم بتغيير إعدادات الرسوم المتحركة بعد ذلك.

• اتجاه الرسوم المتحركة: لأسفل
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: خطي

إزالة الحشوة السفلية للقسم

أخيرًا وليس آخرًا ، سنقوم بدفع الوحدة إلى أسفل القسم عن طريق إزالة الحشوة السفلية للقسم الذي تم وضعه فيه وقد انتهينا!

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

معاينة

دعنا نلقي نظرة أخيرة على الأمثلة الثلاثة لعبارات الحث على الشراء المنزلقة التي أنشأناها.

افكار اخيرة

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