إنشاء عناوين متحركة باستخدام خيارات Divi's Hover

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

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

معاينة

قبل أن نتعمق في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة.

قم بتحميل الصفحة المقصودة لمدرسة السائقين

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

إنشاء عنوان متحرك # 1

تغيير خلفية التدرج للقسم

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

• اللون 1: rgba (0،0،0،0.94)
• اللون 2: rgba (12،12،12،0.63)

قم بإزالة آخر صفين في قسم الأبطال

تابع عن طريق إزالة الصفين الأخيرين في القسم.

تغيير محاذاة الحاجز

نحن نحتفظ بالصف الذي لا يزال موجودًا. الشيء الوحيد الذي نحتاج إلى تغييره هو محاذاة الوحدة النمطية لوحدة Divider.

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

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

هيكل العمود

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

تباعد

إزالة المساحة المتروكة الافتراضية للصف التالي.

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

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

إضافة محتوى

الوحدة الوحيدة التي سنحتاجها هي وحدة نصية. نحن نستخدم نوعين مختلفين من النص: عنوان ورابط فقرة. استمر وأضف نسختك المفضلة وتأكد من ظهور النسخة في سطرين بالضغط على shift + enter في منتصف كل جملة.

لون الخلفية الافتراضي

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

• لون الخلفية: rgba (255،255،255،0)

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

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

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

الإعدادات الافتراضية للنص

بعد ذلك ، قم بتغيير اتجاه النص في إعدادات النص الإجمالية.

• اتجاه النص: الوسط

الإعدادات الافتراضية لنص الارتباط

قم بالتبديل إلى علامة تبويب الارتباط وقم بإجراء بعض التغييرات على مظهر نسخة الارتباط.

• وزن خط الارتباط: عريض للغاية
• نمط خط الرابط: مائل ، أحرف كبيرة ، تسطير
• لون تسطير الرابط: rgba (255،255،255،0.3)
• حجم نص الرابط: 0 بكسل
• ارتفاع خط الارتباط: 0em

تحوم إعدادات الارتباط

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

• حجم نص الرابط: 40 بكسل
• ارتفاع خط الارتباط: 1.8em

الإعدادات الافتراضية لنص العنوان

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

• وزن خط العنوان: عريض للغاية
• نمط خط العنوان: أحرف كبيرة
• لون نص العنوان: #ffffff
• حجم نص العنوان: 70 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
• ارتفاع خط العنوان: 1.4em

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

مع بعض التعديلات الصغيرة على التحويم.

• لون نص العنوان: rgba (255،255،255،0)
• حجم نص العنوان: 0 بكسل

التباعد الافتراضي

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

• الحشوة العلوية: 40 بكسل
• الحشو السفلي: 0 بكسل
• الحشو الأيسر: 20 بكسل
• الحشوة اليمنى: 20 بكسل

تحوم التباعد

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

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

الحدود

نحن نستخدم الحدود أيضًا.

• عرض الحدود: 10 بكسل
• لون الحدود: # ffa53b

الانتقالات

وأضف انتقالًا سريعًا عن طريق تغيير مدة الانتقال في علامة التبويب "خيارات متقدمة".

• مدة الانتقال: 0 مللي ثانية

إنشاء عنوان متحرك # 2

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

لون الخلفية

إلى المثال التالي! أضف قسمًا جديدًا أسفل قسم الأبطال مباشرةً وأضف لونًا للخلفية.

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

تباعد

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

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

مربع الظل

لمطابقة هذا القسم مع حزمة التخطيط ، نضيف ظل مربع دقيقًا أيضًا.

• مربع الظل الأفقي: 30 بكسل
• مربع الظل الرأسي: 30 بكسل
• قوة انتشار الظل المربع: -10 بكسل
• لون الظل: # ffa53b

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

هيكل العمود

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

أضف وحدة نصية

إضافة محتوى

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

الإعدادات الافتراضية لنص الارتباط

انتقل إلى إعدادات نص الرابط وقم بإجراء بعض التغييرات على مظهر نسخة الارتباط.

• نمط خط الارتباط: تسطير
• لون نص الرابط: # 000000
• حجم نص الرابط: 0 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 13 بكسل (هاتف)
• ارتفاع خط الارتباط: 0 بكسل (سطح المكتب) ، 1.8em (الجهاز اللوحي والهاتف)

تحوم إعدادات نص الارتباط

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

• حجم نص الرابط: 30 بكسل
• ارتفاع خط الارتباط: 2.8em

الإعدادات الافتراضية لنص العنوان

يجب تعديل العنوان الذي اخترته أيضًا.

• وزن خط العنوان 2: غامق للغاية
• نمط خط العنوان 2: أحرف كبيرة
• حجم نص العنوان 2: 30 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)
• العنوان 2 تباعد الأحرف: 1 بكسل

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

تغيير حجم النص عند التمرير.

• حجم نص العنوان 2: 0 بكسل

التباعد الافتراضي

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

• الهامش الأيسر: 0 بكسل (سطح المكتب ، الجهاز اللوحي والهاتف)
• الحشوة العلوية: 40 بكسل
• الحشو الأيسر: 50 بكسل

تحوم التباعد

قم بتغيير الهامش الأيسر عند التمرير.

• الهامش الأيسر: 200 بكسل

الحد الافتراضي

بعد ذلك ، أضف حدًا يسارًا إلى وحدة النص.

• عرض الحد الأيسر: 5 بكسل
• لون الحد الأيسر: # ffa53b

تحوم الحدود

قم بإزالة كل عرض الحدود عند التمرير.

• عرض الحد الأيسر: 0 بكسل

الانتقالات

أخيرًا وليس آخرًا ، قم بإنشاء انتقال سلس باستخدام مدة انتقال أعلى قليلاً.

• مدة الانتقال: 500 مللي ثانية

معاينة

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

افكار اخيرة

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