ديفي: أفضل موضوع وورد في كل العصور!

أكثر تنزيلات 901.000، Divi هو موضوع WordPress الأكثر شعبية في العالم. إنها كاملة وسهلة الاستخدام وتأتي مع أكثر من 62 قوالب مجانية.

هل ترغب في تقديم وظائفك أو منتجاتك في شكل علامة تبويب ديفي مع تأثير التحويم؟

هل تبحث عن طرق إبداعية جديدة لعرض الميزات و / أو المنتجات على صفحات الويب الخاصة بك؟ 

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

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

دعونا نذهب!

مسح

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

علامة التبويب Divi مع تأثير التمرير

لنبدأ عملية الإنشاء مع Divi

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

خلفية التدرج

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

  • اللون الأيسر: # f2f2f2
  • اللون الصحيح: #ffffff
  • اتجاه التدرج: 87 درجة
  • المركز الأيسر: 20٪
  • الموضع الصحيح: 80٪

مباعدة

بعد ذلك ، قم بتغيير إعدادات التباعد التالية:

  • المساحة المتروكة (أعلى وأسفل): 0 بكسل

أضف سطرًا جديدًا

هيكل العمود

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

لون الخلفية

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

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

التحجيم والمحاذاة

في علامة التبويب تصميم، اسحب الخيار التحجيم وقم بتغيير الإعدادات التالية:

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

تحوم التحجيم

تغيير الخيار عرض في إعدادات تحجيم التمرير. سيسمح هذا للخط بالتمدد عند التمرير.

  • العرض (تحوم): 2 بكسل

مباعدة

ثم انتقل إلى إعدادات التباعد في الخيار التباعد

  • المساحة المتروكة (أعلى وأسفل): 0 بكسل

الحدود (سطح المكتب)

أضف "20 بكسل" إلى الركن الأيمن العلوي من الخط وأضف أيضًا حدًا يسارًا إلى السطر.

  • الزوايا الدائرية (سطح المكتب): 20 بكسل (الزاوية اليمنى العليا)
  • عرض الحد الأيسر: 20 بكسل
  • لون الحد الأيسر: # 6d44ff

الحدود على تحوم

قم بإزالة الزاوية العلوية اليمنى المستديرة "20 بكسل" عند التمرير بإضافة "0 بكسل" بدلاً من ذلك.

بسهولة إنشاء موقع الويب الخاص بك مع Elementor

يتيح لك Elementor إنشاء ملفات بسهولة ومجانا أي موقع ويب أو تصميم مدونة بمظهر احترافي. توقف عن دفع الكثير مقابل موقع ويب يمكنك القيام به بنفسك.

بوكس شادو (سطح المكتب)

أخيرًا ، أضف ظلًا دقيقًا.

  • مربع قوة طمس الظل: 80 بكسل
  • قوة انتشار الظل المربع: -10 بكسل
  • لون الظل: rgba (0,0,0,0.11،XNUMX،XNUMX،XNUMX)

تحوم الظل

وقم بتغيير لون الظل إلى لون شفاف تمامًا عند التحويم.

  • مربع الظل: rgba (255,255,255,0،XNUMX،XNUMX)

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

إضافة محتوى

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

بمجرد إضافة الوحدة ، أضف محتوى من اختيارك.

حدد الرمز

ثم حدد أيقونة من اختيارك.

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

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

  • لون الأيقونة: # 5323ff
  • وضع الصورة / الرمز: علوي
  • عرض الصورة / الرمز: 50 بكسل

إعدادات عنوان النص (سطح المكتب)

ثم قم بتغيير إعدادات العنوان.

  • خط العنوان: بوبينز
  • محاذاة النص: توسيط
  • لون نص العنوان: # 5323ff
  • حجم نص العنوان: 25 بكسل
  • تباعد الأحرف: -1 بكسل
  • ارتفاع الخط: 1 م

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

وتغيير ارتفاع صف العنوان عند التمرير.

  • ارتفاع خط العنوان: 1,5 م

إعدادات النص الأساسي (سطح المكتب)

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

  • خط الجسم: بوبينز
  • وزن خط الجسم: خفيف
  • محاذاة النص: توسيط
  • لون النص الأساسي: # 000000
  • حجم النص الأساسي: 0 بكسل (سطح المكتب) ، 15 بكسل (الجهاز اللوحي والهاتف)
  • ارتفاع الخط: 2,2 م

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

للتأكد من ظهور النص الأساسي عند التمرير ، قم بتغيير حجم نص التمرير.

  • حجم النص الأساسي: 15 بكسل
تحوم علامات التبويب

التباعد (سطح المكتب)

هل تريد بيع منتجاتك على الإنترنت؟

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

لإعطاء الوحدة بعض المساحة ، نقوم بتعديل معلمات التباعد التالية:

  • المساحة المتروكة (أعلى وأسفل): 80 بكسل
تحوم علامات التبويب

تحوم التباعد

سنقوم بتغيير إعدادات تباعد التمرير.

  • المساحة المتروكة (أعلى وأسفل): 80 بكسل
  • الحشو (يسار ويمين): 20vw

صف استنساخ 3 مرات

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

تحرير الخط والوحدة النمطية للدعاية والاعلان # 2

تغيير لون حدود الخط

لنبدأ بتغيير لون الحد الأيسر للخط.

  • لون الحد الأيسر: # 00ffcc

تحرير محتوى ورمز دعاية وإعلان

بعد ذلك ، افتح إعدادات الوحدة النمطية Blurb وقم بتغيير الرمز.

تغيير لون رمز الوحدة النمطية للدعاية والإعلان

مع لون الرمز.

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

تغيير لون العنوان

ولون نص العنوان.

  • لون نص العنوان: # 00eda6

تحرير الخط والوحدة النمطية Burb # 3

لون حد الخط

دعنا نغير لون حدود الخط الأيسر.

  • لون الحد الأيسر: #afebff

تحرير محتوى ورمز دعاية وإعلان

دعنا أيضًا نغير رمز الدعاية والمحتوى.

تغيير لون رمز الوحدة النمطية للدعاية والإعلان

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

  • لون الأيقونة: # 68d9ff

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

ولون نص العنوان أيضًا.

  • لون نص العنوان: # 68d9ff

تحرير الخط والوحدة النمطية للدعاية والاعلان # 4

تغيير لون حدود الخط

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

  • لون الحد الأيسر: # dd87cf

تحرير محتوى ورمز دعاية وإعلان

افتح الوحدة النمطية Blurb المضمنة وقم بتحرير رمز الوحدة النمطية والمحتوى.

تغيير لون رمز الوحدة النمطية للدعاية والإعلان

مع لون الرمز.

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

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

ولون نص العنوان أيضًا.

  • لون نص العنوان: # dd6aca
علامة التبويب Divi مع تأثير التمرير

مسح

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

علامة التبويب Divi مع تأثير التمرير

تحميل DIVI Now !!!

في الختام

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

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

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

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

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

...

%d المدونين مثل هذه الصفحة: