تريد إنشاء علامات تبويب مع تأثير التمرير من الصفوف باستخدام Divi ?

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

ولكن في هذا البرنامج التعليمي سنوضح لك كيفية تحويل الصفوف Divi مبوبة وتظهر عند التمرير. 

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

لا حاجة لإضافات!

دعونا نبدأ.

مسح

فيما يلي نظرة عامة على علامات التبويب التي سننشئها معًا في هذا البرنامج التعليمي.

تحميل DIVI Now !!!

قم بإنشاء صفحة جديدة باستخدام Divi Builder

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

تم تحويل خطوط Divi إلى علامات تبويب

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

تم تحويل خطوط Divi إلى علامات تبويب

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

إنشاء علامات تبويب أفقية باستخدام "صفوف Divi"

في القسم الافتراضي الموجود ، أضف صفًا من عمودين.

خلفية الخط ، تعبئة الصندوق والظل

قبل أن نضيف وحداتنا ، دعنا نخصص إعدادات الصف أولاً قليلاً. افتح إعدادات الخط وقم بتحديث ما يلي:

  • لون التدرج الأيسر: # 284f91
  • لون التدرج الأيمن: # 4646c4
  • المساحة المتروكة: 50 بكسل (أعلى وأسفل) ، 50 بكسل (يسار ويمين)
  • Box Shadow: انظر لقطة الشاشة
  • لون ظل الصندوق: rgba (70,70,196,0.66،XNUMX،XNUMX،XNUMX)

أضف محتوى إلى الصف

سنقوم الآن بإضافة محتوى نائب إلى صفنا. في العمود 1 ، أضف صورة من اختيارك باستخدام وحدة صورة. استخدمنا هنا صورة من حزمة التخطيط « حزمة تخطيط مؤتمر التصميم« .

في العمود الأيمن ، أضف وحدة نمطية انطلق معنا وتحديث ما يلي:

  • عنوان URL لارتباط الزر: # (فقط لعرض الزر الآن)
  • استخدام لون الخلفية: NO
  • محاذاة النص: يسار
  • خط العنوان: Lato
  • حجم نص العنوان: 60 بكسل (سطح المكتب) ، 50 بكسل (هاتف)

إنشاء علامة التبويب

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

انطلق وأضف وحدة نصية جديدة أسفل الصورة في العمود 1 وقم بتحديث ما يلي:

  • النص الأساسي: "علامة التبويب 1"
  • الخلفية: # 284f91 (يجب أن يتطابق هذا مع لون التدرج الأيسر للخط)
  • محاذاة النص: توسيط
  • لون النص: #ffffff
  • العرض: 100 بكسل
  • الارتفاع: 50 بكسل
  • الهامش: -100 بكسل (أعلى) ، -50 بكسل (يسار)
  • المساحة المتروكة: 14 بكسل (أعلى)

أخيرًا ، أضف css المخصص التالي إلى العنصر الرئيسي لمنحه موضعًا مطلقًا في أعلى السطر.

position: absolute !important;
top: 0;

ارتفاع المقطع والتباعد

في الوقت الحالي ، افتح إعدادات القسم وقم بتحديث ما يلي:

  • الحد الأدنى للارتفاع: 500 بكسل (سطح المكتب) ، 900 بكسل (جهاز لوحي) ، 750 بكسل (هاتف)
  • الهامش: 100 بكسل (أعلى وأسفل)
  • المساحة المتروكة: 0 بكسل (أعلى وأسفل)

إنشاء السطر الثاني

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

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

  • الهامش: 50 بكسل (يسار)

تمت إضافة تأثير التمرير

افتح إعدادات الصف وأضف عامل التصفية التالي:

  • العتامة: 70٪ (افتراضي) ، 100٪ (تحوم)

ثم أضف مدة انتقال ومنحنى السرعة لتأثير تمرير مرشح العتامة.

  • وقت الانتقال: 500 مللي ثانية
  • منحنى سرعة الانتقال: خطي

إنشاء علامة التبويب الثالثة

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

قم بتحديث إعدادات الخط بتدرج خلفية جديد.

  • لون التدرج للخلفية اليسرى: # 333333
  • لون التدرج للخلفية اليمنى: # 4646c4

ثم افتح إعداد وحدة النص المستخدم لإنشاء علامة التبويب في العمود 1 وتحديث اللون والهامش.

  • الخلفية: # 333333
  • الهامش: 150 بكسل (يسار)

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

خطوط متداخلة مع تحديد المواقع المطلق

لتداخل الخطوط ، نحتاج إلى استخدام الموضع المطلق. أولاً ، قم بتحديث ارتفاع جميع الصفوف الثلاثة إلى 100٪.

  • ارتفاع: 100٪

ثم أضف CSS المخصص التالي إلى العنصر الرئيسي لجميع الأسطر الثلاثة:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

هذا ما تبدو عليه علامات التبويب الخاصة بنا في الوقت الحالي.

تغيير ترتيب الصف عند المرور بالماوس باستخدام الفهرس Z.

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

اقرأ أيضا: كيفية إنشاء تراكبات صور مخصصة في Divi

للقيام بذلك ، افتح إعدادات الصف الأول وقم بتحديث الفهرس على النحو التالي:

مؤشر Z: 10

ثم ضع الفهرس Z للخطين الآخرين في وضع التحويم.

مؤشر Z: 11 (تحوم)

لقد تم ! دعونا نرى النتيجة النهائية.

نتيجة نهائية

تحميل DIVI Now !!!

إنشاء علامات تبويب عمودية

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

انطلق وقم بتكرار القسم الذي يحتوي على علامات تبويب التمرير التي أنشأناها للتو حتى يكون لديك تصميم جديد للعمل به.

ثم افتح إعدادات القسم وقم بتحديث ما يلي:

  • الحشو: 10٪ (يسار ويمين)

قم بتحديث الإعدادات التالية لجميع الأسطر الثلاثة للمقطع المكرر بما يلي:

  • العرض: 70٪ (كمبيوتر مكتبي) ، 70٪ (كمبيوتر لوحي) ، 80٪ (هاتف)
  • العرض الأقصى: 980 بكسل

بعد ذلك ، قم بتحديث اتجاه التدرج إلى 90 درجة لجميع الخطوط الثلاثة.

  • اتجاه التدرج: 90 درجة

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

انظر أيضا: كيفية إنشاء قائمة عجلة دوارة على Hover in Divi

افتح إعداد علامة تبويب وحدة النص في السطر الأول وقم بتحديث ما يلي:

  • الهامش (سطح المكتب): -50 بكسل (أعلى) ، -150 بكسل (يسار)

بعد ذلك ، افتح إعدادات علامة تبويب الوحدة النمطية للسطر الثاني من القسم وقم بتحديث ما يلي:

  • الهامش (سطح المكتب): 0 بكسل (أعلى) ، -150 بكسل (يسار)

وللحصول على علامة التبويب الأخيرة في الصف الثالث ، قم بتحديث ما يلي:

  • الهامش (سطح المكتب): 50 بكسل للأعلى ، -150 بكسل لليسار
Divi

نتيجة نهائية

الآن دعونا نرى النتيجة النهائية.

تحميل DIVI Now !!!

وفي الختام

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

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

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

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

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

...