كيفية تحويل صفوف Divi إلى علامات تحويم أفقية ورأسية

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قم بتنزيل Divi Rows Hover Tabs Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

ما تحتاجه للبدء

للبدء ، ستحتاج إلى الإعداد التالي:

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. ثلاث صور لاستخدامها لمحتوى وهمي

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

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

للبدء ، أنشئ قسمًا عاديًا جديدًا بصف من عمودين.

خلفية الصف ، والمساحة المتروكة ، وظل المربع

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

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

لون الخلفية المتدرج الأيسر: # 284f91
تدرج الخلفية اللون الصحيح: # 4646c4

المساحة المتروكة: 50 بكسل للأعلى ، و 50 بكسل للأسفل ، و 50 بكسل لليسار ، و 50 بكسل لليمين
Box Shadow: انظر لقطة الشاشة
لون ظل الصندوق: rgba (70،70،196،0.66)

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

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

في العمود 1 ، أضف صورة مع وحدة صورة. أنا أستخدم واحدًا من Design Conference Layout Pack.

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

عنوان URL لارتباط الزر: # (فقط لعرض الزر الآن)
استخدام لون الخلفية: NO

محاذاة النص: يسار
خط العنوان: Lato
حجم نص العنوان: 60 بكسل (سطح المكتب) ، 50 بكسل (هاتف)

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

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

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

المحتوى: "Tab One"

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

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

position: absolute !important;
top: 0;

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

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

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

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

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

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

الآن احفظ إعداداتك ودعنا نعود إلى إضافة هذه الصفوف الأخرى.

إنشاء الصف الثاني لمحتوى علامة التبويب

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

افتح إعدادات الصف الثاني وقم بتبديل ألوان التدرج في الخلفية بالمرور فوق منطقة معاينة الخلفية والنقر فوق رمز "التبديل" الصغير.

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

لون الخلفية: # 4646c4

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

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

إضافة تأثير تحوم مرشح التعتيم للصف الثاني

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

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

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

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

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

إنشاء الصف الثالث لمحتوى علامة التبويب

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

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

لون الخلفية المتدرج الأيسر: # 333333
تدرج الخلفية اللون الصحيح: # 4646c4

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

لون الخلفية: # 333333
الهامش: 150 بكسل متبقية

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

تداخل الصفوف مع الوضع المطلق

لتداخل صفوفنا ، نحتاج إلى استخدام تحديد الموضع المطلق. ثم سنستخدم خيار Z index لإحضار كل صف إلى المقدمة عند التمرير فوق علامات التبويب. ولكن نظرًا لأننا نعطي صفوفنا موضعًا مطلقًا (وللجزء الرئيسي / القسم ارتفاع محدد) ، يمكننا إضافة ارتفاع بنسبة 100٪ لكل صف بحيث يمتد على الارتفاع الكامل للقسم.

هيريس كيفية القيام بذلك.

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

ارتفاع: 100٪

سيؤدي هذا إلى ضبط ارتفاع الصفوف الثلاثة على 100٪.

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

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

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

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

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

للقيام بذلك ، ارجع إلى وضع عرض الإطار الشبكي وافتح الإعدادات للصف الأول الذي قمت بإنشائه (مع علامة التبويب الأولى). ثم قم بتحديث الفهرس z كما يلي:

الفهرس Z: 10

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

الفهرس Z: 11 (تحوم)

هذا كل شيء. دعنا نتحقق من النتيجة النهائية.

النتيجة النهائية

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

وإليك كيف يبدو على الهاتف المحمول.

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

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

إليك ما يجب فعله.

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

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

الحشو: يسار 10٪ ، يمين 10٪

ثم استخدم التحديد المتعدد لتحديد جميع الصفوف الثلاثة وتحديث إعدادات العنصر بما يلي:

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

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

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

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

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

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

إعداد الهامش للهاتف هو إعادة علامة التبويب أعلى الصف لعرض علامة تبويب أفقية.

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

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

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

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

النتيجة النهائية

الآن دعنا نتحقق من النتيجة النهائية.

وها هو جهاز لوحي واحد وهاتف.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!