هل تريد استخدام تأثيرات الظل والتحويم في Divi لإنشاء محتوى تفاعلي وإبراز موقع الويب الخاص بك؟
قد يكون من الصعب جعل موقعك الإلكتروني يتميّز عن المواقع المشابهة. ولكن بمجرد تحقيق ذلك، ستجد أنه يستحق الجهد والفكر المبذول فيه.
سنوضح لك كيفية إنشاء محتوى تفاعلي عند إنشاء مواقع الويب باستخدام Divi.
دعونا نذهب!
مسح
قبل أن نتعمق في هذا البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة التي يمكنك توقعها.
حاسوب مكتب
الهاتف
لنبدأ الإدراك مع Divi!
إضافة قسم جديد
لون الخلفية
أنشئ صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا عاديًا إليها. افتح إعدادات القسم وقم بتغيير لون الخلفية.
- الخلفية: # 03006d
مباعدة
ثم انتقل إلى إعدادات تباعد الأقسام وقم بتغييرها على النحو التالي:
- المساحة المتروكة (أعلى وأسفل): 50 بكسل
أضف سطرًا جديدًا
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية.
التحجيم
ثم انتقل إلى إعدادات التحجيم واترك الخط يملأ العرض الكامل للشاشة.
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- العرض: 100٪
مباعدة
لنقم أيضًا بتغيير إعدادات التباعد التالية:
- الحشو (يمين): 9vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
- الحشو (يمين): 5vw (الجهاز اللوحي والهاتف)
أضف وحدة نصية إلى العمود 1
إضافة محتوى
بمجرد الانتهاء من تحرير إعدادات الصف ، أضف وحدة النص الأولى إلى العمود 1.
أضف الحرف الأول كنص فقرة. ثم أضف المحتوى الذي تريد ظهوره كنص قائمة.
إعدادات النص (سطح المكتب)
ثم انتقل إلى علامة التبويب تصميموتغيير الإعدادات الافتراضية لنص الفقرة. تأكد من استخدام نفس اللون لنص القسم والخلفية.
- وزن الخط: عريض للغاية
- لون النص: # 03006d
- حجم النص: 27vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
- ارتفاع الخط: 1,1 م
- ظل النص: انظر الالتقاط
- قوة الظل الضبابية: 0,01em
- لون الظل: #ffffff
- محاذاة النص: يسار
تحوم إعدادات النص
لإنشاء تأثير التمرير الجميل ، سنحتاج إلى تغيير إعدادات نص فقرة التمرير هذه.
- لون النص (تحوم): #ffffff
- لون الظل (تحوم): rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
إعدادات القائمة (سطح المكتب)
استمر بالذهاب إلى إعدادات القائمة.
- وزن الخط: خفيف
- لون نص القائمة: #ffffff
- حجم نص القائمة: 0 بكسل (سطح المكتب) ، 18 بكسل (الجهاز اللوحي والهاتف)
- موقف النمط: الدائرة
- موضع نمط قائمة غير مرتبة: خارجي
- مسافة بادئة لعنصر قائمة غير مرتبة: 0 بكسل
قائمة إعدادات النص عند التمرير (التمرير)
نريد أن يظهر نص القائمة عند التمرير. هذا هو السبب في أننا سنغير حجم النص عند التمرير.
- حجم نص القائمة غير المرتبة (التمرير): 18 بكسل
مباعدة
تابع بالذهاب إلى إعدادات تباعد الوحدات وإجراء بعض التغييرات هناك أيضًا.
- الهامش (السفلي): 50 بكسل (الجهاز اللوحي والهاتف)
- الهامش (يمين): -4vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
استنساخ وحدة النص 4 مرات ووضع التكرارات في الأعمدة المتبقية
الآن وقد انتهينا من تعديل الوحدة الأولى في العمود 1 ، قم باستنساخ الوحدة أربع مرات. ثم ضع كل من التكرارات في الأعمدة المتبقية. سنقوم بتعديل كل من التكرارات لتتناسب مع ما نريد.
قم بتغيير وحدة النص في العمود 2
تعديل المحتوى
افتح النسخة المكررة في العمود 2 وقم بتحرير المحتوى.
تغيير التباعد
بعد ذلك ، انتقل إلى إعدادات التباعد وقم بتغيير قيم الهوامش المخصصة.
- الهامش (السفلي): 50 بكسل (الجهاز اللوحي والهاتف)
- الهامش (يسار ويمين): -2vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
- الهامش الأيمن: -2vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
قم بتغيير وحدة النص في العمود 3
تعديل المحتوى
قم أيضًا بتغيير محتويات النسخة المكررة في العمود 3.
تغيير التباعد
مع إعدادات التباعد في علامة تبويب التصميم.
- الهامش (على اليسار): 2,5 vw
- الهامش (يمين): 1,5 فولط
قم بتعديل وحدة النص في العمود 4
تعديل المحتوى
تابع عن طريق فتح إعدادات وحدة النص في العمود 4 وقم بتحرير المحتوى هناك أيضًا.
تغيير التباعد
بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وقم بتعديل قيم الهوامش المخصصة في إعدادات التباعد.
- الهامش (يسار): -6vw
- الهامش (يمين): 2vw
قم بتعديل وحدة النص في العمود 5
محتويات
أفسح المجال لآخر نسخة مكررة. قم بتحرير المحتوى في منطقة المحتوى.
تغيير التباعد
مع إعدادات التباعد المخصصة.
- الهامش (يسار): -7vw
- الهامش (يمين): 3vw
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
اقرأ أيضًا: Divi: كيفية تخصيص أيقونات عربة التسوق والبحث في وحدة "القائمة ذات العرض الكامل"
مكتب
الهاتف
تحميل DIVI Now !!!
الخاتمة
نحن ندرك أهمية تميز موقعك الإلكتروني عن غيره. مع خيارات Divi المدمجة، يمكنك إطلاق العنان لإبداعك.
هذه المقالة هي مثال على كيفية إنشاء محتوى تحوم تفاعلي.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...