كيفية إنشاء علامات التبديل الرأسية في WordPress مع Elementor
نشرت: 2025-09-17تتيح لك علامات التمرير الرأسية إظهار المحتوى المتبادل في تصميم طويل القامة جنبًا إلى جنب. تبقى علامات التبويب مكدسة على الجانب الأيسر أو الأيمن ، بينما يظهر المحتوى لكل علامة تبويب على الجانب الآخر. يمكن للزوار التمرير لأسفل علامات التبويب لاستكشاف المحتوى داخلهم.
هذا يبقي الصفحة نظيفة ، ويمكن للأشخاص عرض الكثير من المعلومات دون مغادرة الصفحة الحالية. لا يمكنك فقط عرض النصوص ، ولكن يمكنك أيضًا عرض الصور ومقاطع الفيديو والقوالب في علامات التبديل العمودية. يمكن للمستخدمين النقر فوق أو النقر فوق علامة تبويب لرؤية المحتوى المرتبط به ، بينما تظل الأقسام الأخرى مخفية.
Elementor هو منشئ موقع الويب الشهير بدون رمز. باستخدام هذا البرنامج المساعد ، يمكنك إنشاء موقع ويب كامل من نقطة الصفر باستخدام وظائف السحب والإفلات. في هذا المنشور التعليمي ، سنعرض لك كيفية إنشاء علامات تبويب رأسية في WordPress مع Elementor.
استخدام حالات التمرير العمودي
تساعدك علامات التمرير الرأسية على تنظيم كمية كبيرة من المحتوى في مساحة صغيرة. يسمحون للزائرين بالانتقال عبر الموضوعات دون تحميل صفحة جديدة. هذا التصميم سهل الاستخدام على سطح المكتب والجوال. دعنا نلقي نظرة على بعض حالات الاستخدام لعلامات التمرير الرأسية أدناه.
أ. تفاصيل المنتج أو الخدمة
يمكنك عرض العديد من أوصاف المنتج أو الخدمة جنبًا إلى جنب. يمكن لكل علامة تبويب الاحتفاظ بمواصفات أو أسعار أو ميزات أو مراجعات. يمكن للزوار مقارنة خيارات مختلفة بسرعة دون مغادرة الصفحة.
ب. الأسئلة المتداولة (الأسئلة الشائعة)
علامات التبويب الرأسية مثالية للأسئلة الشائعة. يمكنك تجميع أسئلة مماثلة تحت علامة تبويب واحدة وإجابات تحت أخرى. يمكن للقراء التمرير والنقر فقط على الأسئلة التي تهمهم.
ج. أدلة خطوة بخطوة أو دروس
إذا كنت ترغب في مشاركة عملية مع العديد من الخطوات ، فإن علامات التبويب الرأسية تبقي كل خطوة واضحة. يمكن للمستخدمين النقر فوق كل علامة تبويب لمتابعة الدليل بالترتيب. هذا يجعل التعلم سهلاً ويبقي الصفحة أنيقًا.
د. أعضاء الفريق أو ملفات تعريف الموظفين
قدم فريقك بطريقة احترافية من خلال منح كل عضو علامة تبويب. يمكن لكل علامة تبويب أن تعرض صورة ودورًا وسيارة قصيرة. يمكن للزوار التمرير عبر القائمة والتعرف على الجميع دون فوضى. استكشف بعض من أفضل أمثلة صفحات الفريق.
ه. محفظة أو عرض للمشروع
اعرض عملك أو مشاريعك في علامات التبويب الرأسية لتوفير المساحة. يمكن لكل علامة تبويب عرض الصور والأوصاف والروابط إلى التفاصيل. هذا يساعد الزوار على استكشاف العديد من المشاريع من صفحة واحدة.
كيفية إنشاء علامات تبويب رأسية في Elementor
الجزء النظري قد انتهى. آمل أن يكون لديك الآن فكرة واضحة عن ماهية علامة التبويب الرأسية وما هي حالات استخدامها. سنقوم بتغطية الجزء التعليمي الآن. سنشرح كيفية إنشاء علامات تبويب رأسية مع Elementor على WordPress في هذا القسم. استمر في القراءة!
المتطلبات المسبقة لبدء البرنامج التعليمي
لإنشاء علامات تبويب عمودية على WordPress مع Elementor ، تحتاج إلى المكونات الإضافية التالية المثبتة وتفعيلها على موقعك.
- Elementor خالية
- Happyaddons مجانا
- Happyaddons Pro
ملاحظة: أنت بحاجة إلى HappyAddons Pro لأن Elementor ليس لديه خيار مدمج لإنشاء علامات تبويب. تقدم HappyAddons Pro عنصر واجهة مستخدم تسمى علامات التبويب Scroll والتي تتيح لك إنشاء علامات تبويب رأسية بسهولة.
بمجرد أن تكون هذه المكونات الإضافية جاهزة على موقعك ، اتبع البرنامج التعليمي الموضح أدناه.
الخطوة 01: افتح صفحة مع Elementor
ما عليك سوى فتح صفحة مع Elementor حيث تريد إنشاء علامات تمرير رأسية.
الخطوة 02: اسحب وعنصر علامات التبويب Scroll على اللوحة القماشية
ابحث عن عنصر واجهة مستخدم Tabs Scroll على لوحة Elementor. اسحبه وإسقاطه على قماش Elementor.
تأتي أداة Scroll Tabs مع بعض المحتوى الافتراضي. بمجرد إضافة عنصر واجهة المستخدم إلى القماش ، سترى هذا المحتوى الافتراضي.
الخطوة 03: ابدأ في إضافة محتوى إلى علامات التبويب
يمكنك إضافة محتوى إلى أداة Scroll Tabs وتصميم التصميم بعدة طرق. استكشفهم في هذه الخطوة.
# أضف عنوانًا إلى أداة التمرير
يجب أن يكون لكل قسم ويب عنوان يخبر بوضوح نوع المحتوى الذي يحتوي عليه. لذلك ، يجب أن تكتب عنوانًا لقسم أداة Scroll Tabs.
انتقل إلى Content> Tabs Content> TITLE . ستحصل على مساحة لكتابة عنوان. يمكنك أن ترى أننا كتبنا عنوانًا ، "رؤى Watch الأنيقة".
# اكتب وصفًا للعناصر واجهة المستخدم
اكتب تحت العنوان ، يمكنك كتابة وصف للعناصر واجهة المستخدم. إذا لم يكن الوصف ضروريًا ، فيمكنك إزالته فقط.
# أضف محتوى إلى علامات التبويب
اصطحب المؤشر إلى علامة تبويب وانقر عليها. سيؤدي ذلك إلى توسيع علامة التبويب ويسمح لك بإضافة محتوى.
# اكتب عنوان علامة التبويب
يجب عليك كتابة عنوان لكل علامة تبويب . بعد توسيع علامة التبويب ، ستحصل على مربع أسفل نص NAV. هنا ، يمكنك كتابة عنوان لعلامة التبويب.
# تغيير أيقونة علامة التبويب
يمكنك إزالة الرمز إذا لم يكن هناك حاجة إليها. ولكن لتغيير الأيقونة ، انقر فوق الرمز الذي يمكنك رؤيته تحت أيقونة NAV.
سيتم فتح مكتبة الأيقونة على الفور. اختر أيقونة تحبها واضغط على زر إدراج .
يمكنك أن ترى أنه تم تغيير الرمز.
# أضف محتوى إلى علامة التبويب عبر المحرر
تتيح لك كل علامة تبويب إضافة نوعين من المحتوى. يمكنك اختيار ما إذا كنت تريد استخدام المحرر أو القالب .
دعنا أولاً نختار خيار المحرر .
باستخدام هذا المحرر ، يمكنك إضافة أي نوع من النصوص والصور ، والتي سيتم عرضها على الفور على قماش علامة التبويب المعنية.
# تغيير لون الخلفية للمحتوى المتبادل
لتسليط الضوء بشكل أفضل على المحتوى في علامة التبويب ، يمكنك تغيير لون الخلفية الخاص به ، لذلك يتوافق بشكل جيد مع جميع المحتوى الذي أضفته إلى علامة التبويب.
# أضف محتوى إلى علامة التبويب عبر القالب
كما ذكر أعلاه ، يتيح لك القطعة إضافة محتوى إلى علامة التبويب عبر المحرر والقالب. دعنا الآن نلقي نظرة على كيفية إضافة محتوى باستخدام القوالب.
اختر خيار القالب من نوع المحتوى . إذا كان لديك بالفعل قوالب مصممة مسبقًا تم حفظها على موقعك ، فسيكون هذا الخيار مناسبًا.
انقر فوق أيقونة القائمة المنسدلة بجانب اختيار القالب . ثم ، حدد القالب الذي تريد عرضه في علامة التبويب.
يمكنك أن ترى أن القالب المطلوب تمت إضافته بالفعل إلى علامة التبويب.
بالطريقة نفسها ، أضف محتوى إلى جميع علامات التبويب لعنصر علامات التبويب Scroll.
الخطوة 04: تكوين إعدادات أداة التمرير
بعد الانتهاء من جزء المحتوى ، قم بتوسيع قسم الإعدادات .
ستتمكن من تغيير عرض لوحة المستكشف وارتفاع لوحة المحتوى ، بما في ذلك تعديلات المحاذاة المختلفة ، من هذا القسم.
# اضبط عرض لوحة NAV
يحتوي عنصر Tabs Scroll على جزأين - لوحة Navigator (لوحة NAV) ولوحة المحتوى .
يمكنك تغيير عرض لوحة Navigator عن طريق سحب المقياس تحت هذا الخيار. أيضا ، يمكنك ضبط موقفها والمحاذاة. يتم عرض العملية في مقطع الفيديو المرفق أدناه.
# ضبط ارتفاع لوحة التحكم
بنفس الطريقة ، اضبط ارتفاع لوحة التحكم. أيضا ، تأكد من أن المحتوى محاذاة رأسيا بشكل صحيح.
الخطوة 05: مصفاة أداة التمرير بعناية علامات التبويب
تعال إلى علامة التبويب النمط . دعنا أولاً نضع لون الخلفية للوحة Navigator .
# تخصيص طباعة محتوى لوحة NAV
قم بتحديث الطباعة ، واحدة تلو الأخرى ، لكل محتوى قمت بإضافته إلى لوحة Navigator. يمكنك تغيير عائلة الخط ، والحجم ، والوزن ، وارتفاع الخط ، وما إلى ذلك ، حسب الحاجة.
# stylize tabs
عن طريق إضافة نوع الحدود ، وعرض الحدود ، الحشو ، لون الحدود ، نصف قطر الحدود ، لون النص ، ولون الخلفية ، يمكنك تصنيف علامات التبويب وتقديمها مثل الصورة التالية. آمل أن تتمكن من القيام بذلك بنفسك.
بنفس الطريقة ، قم بتوسيع وتوسيع المحتوى المتعلق بلوحة المحتوى والتمرير.
الخطوة 06: قم بتحسين عنصر واجهة مستجمعات تبويب التمرير للهاتف المحمول
لتحسين عنصر واجهة المستخدم لحجم شاشة الهاتف المحمول ، انتقل إلى وضع Portrait Mobile على الشريط العلوي.
سترى أن علامات تبويب Navigator تظهر في الأعلى بشكل افتراضي.
# اضبط ارتفاع لوحة المحتوى للأجهزة المحمولة
قد لا يكون الارتفاع الحالي كافيًا لوحة المحتوى. في هذه الحالة ، يجب عليك زيادة الارتفاع بحيث يمكن رؤية جميع المحتوى داخل علامة التبويب على أحجام شاشة الهاتف المحمول.
الخطوة 07: قم بتحسين عنصر واجهة مستخدم علامات التبويب للأجهزة اللوحية
وبالمثل ، قم بالتبديل إلى وضع صورة الكمبيوتر اللوحي لتحسين المحتوى للعرض الأمثل على أحجام شاشة الكمبيوتر اللوحي.
يمكنك المشاهدة في مقطع الفيديو المرفق أدناه أن القطعة تبدو جيدة بالفعل على شاشة الجهاز اللوحي. لذلك ، لا نحتاج إلى تعديله على أي حال.
الخطوة 08: معاينة عنصر واجهة مستخدم علامات التبويب SCROLL
تعال إلى صفحة المعاينة وتحقق مما إذا كانت القطعة تعمل بشكل جيد أم لا. يمكنك أن ترى أن القطعة تعمل بشكل جيد في نهايتنا.
وبالتالي ، يمكنك إنشاء علامات التمرير الرأسية في WordPress مع Elementor.
الوجبات النهائية!
تعتبر علامات التمرير الرأسية طريقة ذكية للحفاظ على صفحة الويب رائعة أثناء مشاركة الكثير من المعلومات. سمحوا للزائرين بالعثور على ما يحتاجون إليه دون القفز إلى صفحات جديدة. بعد اتباع الخطوات المذكورة أعلاه ، يمكنك بسهولة تصميم علامات التبويب هذه باستخدام Elementor و HappyAddons Pro.
يمنح هذا موقعك مظهرًا عصريًا ويحسن كيفية استكشاف المستخدمين للمحتوى الخاص بك. ومع ذلك ، أثناء إنشاء هذا القسم ، ضع في اعتبارك بعض الممارسات الأفضل. استخدم عناوين واضحة لكل علامة تبويب حتى يعرف المستخدمون ما يمكن توقعه. تأكد من أن النصوص والصور ومقاطع الفيديو خفيفة بحيث يتم تحميل الصفحة بسرعة.
تحقق من التصميم على أحجام الشاشة المختلفة وضبط التباعد لمستخدمي الهاتف المحمول. حافظ على الألوان والخطوط بما يتوافق مع نمط موقعك بحيث تمتزج علامات التبويب بشكل طبيعي مع بقية التصميم. تساعد هذه التفاصيل الصغيرة في إنشاء تجربة سلسة ومهنية لكل زائر.
تعلم كيفية تصميم مربع الوجه في WordPress مع Elementor.