كيف تقود الزائرين بشكل مقنع إلى أسفل الصفحة باستخدام إعدادات الرسوم المتحركة المضمنة في Divi

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

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

معاينة

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

سطح المكتب

متحرك

لنبدأ في الإنشاء!

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

أضف القسم رقم 1

لون الخلفية

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

• لون الخلفية: # 0f0f0f

مقسم سفلي

استمر بإضافة حاجز سفلي للقسم.

• نمط الحاجز: البحث في القائمة
• لون المقسم: #ffffff
• ارتفاع الحاجز: 30 بكسل
• تكرار الحاجز الأفقي: 10x (سطح المكتب) ، 4x (الكمبيوتر اللوحي والهاتف)

تباعد

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

• الحشوة العلوية: 269 بكسل (سطح المكتب) ، 100 بكسل (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 674 بكسل (سطح المكتب) ، 200 بكسل (الجهاز اللوحي والهاتف)

اضف سطر

هيكل العمود

بعد ذلك ، أضف صفًا جديدًا باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف ، وانتقل إلى إعدادات التحجيم وقم بتمكين خيار "Make This Row Fullwidth".

• جعل هذا الصف بعرض كامل: نعم

أضف وحدة نصية

إضافة محتوى

الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة نصية. انطلق وأضف بعض محتوى H1 المفضل.

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

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

• خط العنوان: Didact Gothic
• وزن خط العنوان: غامق
• محاذاة نص العنوان: الوسط
• لون نص العنوان: #ffffff
• حجم نص العنوان: 170 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط العنوان: 0.8em

• طول ظل نص العنوان الرأسي: 1.5em
• لون ظل نص العنوان: rgba (0،0،0،0.11)

أضف القسم رقم 2

لون الخلفية

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

• لون الخلفية: # 0f0f0f

أعلى الحاجز

أضف حاجزًا علويًا إلى القسم أيضًا.

• نمط الحاجز: البحث في القائمة
• لون المقسم: #ffffff
• ارتفاع الحاجز: 30 بكسل
• تكرار الحاجز الأفقي: 10x (سطح المكتب) ، 4x (الكمبيوتر اللوحي والهاتف)

تباعد

وزيادة قيم التباعد في إعدادات التباعد.

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

اضف سطر

هيكل العمود

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

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2

أضف الوحدة النمطية Blurb

حدد أيقونة

الوحدة الأولى التي نحتاجها في العمود الأول هي Blurb Module. الجزء الوحيد من عنصر Blurb Module الذي نحتاجه هو الرمز. حدد رمز السهم الذي يشير إلى أسفل.

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

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

• لون الأيقونة: # 4ffcff
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 150 بكسل

تباعد

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

• الهامش الأعلى: -550 بكسل
• الحشوة العلوية: 550 بكسل

حيوية

أخيرًا وليس آخرًا ، أضف رسمًا متحركًا إلى Blurb Module باستخدام الإعدادات التالية:

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

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

إضافة محتوى

الوحدة التالية التي نحتاجها في العمود الأول هي وحدة نصية. أضف بعض المحتوى المفضل.

إعدادات النص

تابع عن طريق تغيير إعدادات النص.

• خط النص: Didact Gothic
• وزن خط النص: غامق
• لون النص: rgba (255،255،255،0.03)
• حجم النص: 350 بكسل
• اتجاه النص: الوسط

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

إضافة محتوى

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

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

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

• عنوان الخط 3: Didact Gothic
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 40 بكسل (سطح المكتب) ، 30 بكسل (الجهاز اللوحي والهاتف)
• العنوان 3 تباعد الأحرف: -1 بكسل

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

الرؤية

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

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

اللون

تابع عن طريق تغيير لون الحاجز في علامة تبويب التصميم.

• اللون: #ffffff

تحجيم

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

• العرض: 59٪
• محاذاة الوحدة: المركز

حيوية

وإضافة رسم متحرك للوحدة أيضًا.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: المركز
• مدة الرسوم المتحركة: 2000 مللي ثانية
• كثافة الرسوم المتحركة: 10٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

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

إضافة محتوى

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

إعدادات النص

تابع عن طريق تغيير إعدادات النص.

• وزن خط النص: خفيف
• لون النص: # b7b7b7
• حجم النص: 18 بكسل
• ارتفاع خط النص: 1.8em
• اتجاه النص: الوسط

حيوية

وإضافة رسم متحرك للوحدة.

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

استنساخ الوحدات النمطية 3 مرات ووضع التكرارات في الأعمدة المتبقية

الآن بعد أن انتهينا من تعديل جميع الوحدات في العمود 1 ، يمكننا استنساخ جميع الوحدات في العمود مرة واحدة 3 مرات ووضع التكرارات في الأعمدة المتبقية.

تغيير محتوى الوحدة

قم بتغيير محتوى التكرارات.

إضافة تأخير الرسوم المتحركة إلى وحدات تقسيم التكرارات

أضف بعض التأخير للرسوم المتحركة لكل واحد من تكرارات Divider Module أيضًا.

• وحدة التقسيم في العمود 2: 400 مللي ثانية
• وحدة التقسيم في العمود 3: 800 مللي ثانية
• وحدة التقسيم في العمود 4: 1200 مللي ثانية

إضافة تأخير الرسوم المتحركة إلى وحدة النص رقم 3 مكررة

افعل نفس الشيء مع آخر وحدة نصية في كل عمود.

• آخر وحدة نصية في العمود 2: 400 مللي ثانية
• آخر وحدة نصية في العمود 3: 800 مللي ثانية
• آخر وحدة نصية في العمود 4: 1200 مللي ثانية

تخصيص رمز Blurb # 2

لون الأيقونة

نقوم أيضًا بتعديل لون الرسوم المتحركة لأيقونة دعاية مغالى فيها لكل نسخة مكررة. افتح الوحدة النمطية Blurb في العمود 2 وقم بتغيير لون الرمز.

• لون الأيقونة: # ff6b86

حيوية

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

• نوع الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• مدة الرسوم المتحركة: 2000 مللي ثانية
• تأخير الرسوم المتحركة: 800 مللي ثانية
• كثافة الرسوم المتحركة: 62٪
• بدء تعتيم الرسوم المتحركة: 100٪
• صورة / أيقونة متحركة: لا توجد رسوم متحركة

تخصيص رمز Blurb # 3

لون الأيقونة

تابع عن طريق فتح Blurb Module في العمود 3 وتغيير لون الرمز.

• لون الأيقونة: # ffe500

حيوية

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

• نوع الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• مدة الرسوم المتحركة: 1000 مللي ثانية
• تأخير الرسوم المتحركة: 600 مللي ثانية
• كثافة الرسوم المتحركة: 69٪
• بدء تعتيم الرسوم المتحركة: 100٪
• صورة / أيقونة متحركة: لا توجد رسوم متحركة

تخصيص رمز Blurb # 4

لون الأيقونة

افتح آخر وحدة Blurb Module ، في العمود 4 ، وقم بتغيير لون الرمز.

• لون الأيقونة: # 00ff9d

حيوية

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

• نوع الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• مدة الرسوم المتحركة: 3000 مللي ثانية
• تأخير الرسوم المتحركة: 400 مللي ثانية
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪
• صورة / أيقونة متحركة: لا توجد رسوم متحركة

افكار اخيرة

في هذا المنشور ، أوضحنا لك كيفية إقناع الزائرين أسفل الصفحة باستخدام إعدادات الرسوم المتحركة لـ Divi. الفكرة الأساسية هي أنك تستخدم Blurb Modules لأيقوناتها وتزيد من وصول الرسوم المتحركة إلى قسم البطل. يمكنك استخدام هذا الأسلوب على أي نوع من مواقع الويب التي تنشئها وتصبح مبدعًا كما تريد. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!