استخدام Hover Text Shadows لإنشاء محتوى تفاعلي باستخدام Divi

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

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

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

معاينة

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

سطح المكتب

متحرك

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

مقاربة

• يعد المثال الذي سنعيد إنشائه رائعًا بخصوص الصفحات ، ولكن يمكنك جعله يعمل مع أي كلمة مكونة من 5 أحرف أو 6 أحرف (تطابقها مع بنية العمود)
• سيتم تخصيص كل حرف من الأحرف لوحدة نصية فردية
• نحن نستخدم صفًا يحتوي على عدد كافٍ من الأعمدة لربط الأحرف المختلفة للكلمة وجعلها تظهر كما لو تم إنشاؤها في نفس الوحدة النمطية
• بشكل افتراضي ، سنجعل لون نص وحدة النص يتطابق مع لون خلفية القسم
• للتأكد من بقاء الحرف قابلاً للقراءة ، سنقوم بتطبيق ظل نص أبيض على الحرف أيضًا
• بمجرد تحريك الحرف ، سيختفي ظل النص وسيتغير لون النص مما يمنحك الشعور بأن النص يمتلئ
• أثناء تحريك شخصية ما ، ستظهر بعض المعلومات الإضافية أيضًا
• في أحجام الشاشات الأصغر ، ستكون حقائق و / أو معلومات الشركة موجودة منذ البداية

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

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

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

لون الخلفية

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

• لون الخلفية: # 03006d

تباعد

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

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

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

هيكل العمود

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

تحجيم

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

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

تباعد

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

• الحشو الأيسر: 9vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 5vw (الجهاز اللوحي والهاتف)

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

إضافة محتوى

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

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

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

• وزن خط النص: غامق للغاية
• لون النص: # 03006d
• حجم النص: 27vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 1.1em
• قوة تمويه ظل النص: 0.01em
• لون ظل النص: #ffffff
• اتجاه النص: يسار

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

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

• لون النص: #ffffff
• لون ظل النص: rgba (255،255،255،0)

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

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

• وزن خط القائمة غير المرتبة: خفيف
• لون نص القائمة غير المرتبة: #ffffff
• حجم نص القائمة غير المرتبة: 0 بكسل (سطح المكتب) ، 18 بكسل (الجهاز اللوحي والهاتف)
• لون ظل نص القائمة غير المرتبة: rgba (255،255،255،0)
• نوع نمط قائمة غير مرتبة: دائرة
• موضع نمط قائمة غير مرتبة: خارجي
• مسافة بادئة لعنصر قائمة غير مرتبة: 0 بكسل

تحوم إعدادات نص القائمة

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

• حجم نص القائمة غير المرتبة: 18 بكسل

تباعد

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

• الهامش السفلي: 50 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيمن: -4vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

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

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

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

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

افتح النسخة المكررة في العمود 2 وقم بتغيير المحتوى.

تغيير التباعد

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

• الهامش السفلي: 50 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -2vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش الأيمن: -2vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

تغيير وحدة النص في العمود 3

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

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

تغيير التباعد

جنبًا إلى جنب مع إعدادات التباعد في علامة تبويب التصميم.

• الهامش السفلي: 50 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -5.5vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش الأيمن: 1.5vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

تغيير وحدة النص في العمود 4

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

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

تغيير التباعد

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

• الهامش السفلي: 50 بكسل
• الهامش الأيسر: -6vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش الأيمن: 2vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

تغيير وحدة النص في العمود 5

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

إلى آخر نسخة مكررة. قم بتغيير المحتوى في مربع المحتوى.

تغيير التباعد

جنبا إلى جنب مع إعدادات التباعد المخصصة.

• الهامش السفلي: 50 بكسل
• الهامش الأيسر: -7vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش الأيمن: 3vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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