Divi: كيفية إنشاء علامات تبويب مع تأثير التمرير من الخطوط

هل تريد إنشاء علامات تبويب تحوم من الصفوف باستخدام Divi؟

تُعدّ علامات التبويب مفيدةً للغاية لعرض المعلومات المهمة في مكانٍ مُختصر على موقعك الإلكتروني، مما يُقلّل من حاجة المستخدمين إلى التمرير عبر صفحاتٍ طويلة. وحدة علامات التبويب في Divi سهلة الاستخدام ومثالية للتنقل بين المحتوى البسيط بنقرة واحدة.

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

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

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

دعونا نبدأ.

مسح

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

تحميل DIVI Now !!!

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

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

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

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

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

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

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

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

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

• لون التدرج الأيسر: # 284f91
• لون التدرج الأيمن: # 4646c4

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

• ظل الصندوق: انظر لقطة الشاشة
• لون ظل الصندوق: rgba (70,70,196,0.66،XNUMX،XNUMX،XNUMX)

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

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

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

• رابط الزر: # (لعرض الزر مؤقتًا فقط)

• استخدام لون الخلفية: 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، وانقل علامة التبويب إلى اليمين بحيث عندما يتداخل هذا السطر مع السطر أعلاه، يمكنك رؤية علامة التبويب مباشرة على يمين علامة التبويب في السطر الأول.

• الهامش: 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-Index بحيث يظهر التبويب الأول أولًا حتى تُمرر مؤشر الماوس فوق تبويب آخر.

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

للقيام بذلك، افتح إعدادات السطر الأول وقم بتحديث مؤشر z كما يلي:

مؤشر Z: 10

بعد ذلك، قم بتعيين قيمة Z للخطين الآخرين عند تمرير المؤشر فوقهما.

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

انتهى الأمر! لنرَ النتيجة النهائية.

نتيجة نهائية

تحميل DIVI Now !!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نتيجة نهائية

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

تحميل DIVI Now !!!

الخاتمة

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

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

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

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

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

...