علامات التبويب

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

ال علامات التبويب المتقدمة القطعة في الإضافات الرئيسية للعنصر يأخذ الأساسية القطعة علامات التبويب العنصر ويضيف المزيد من المرونة. تحصل على ثلاثة تخطيطات مجانية محددة مسبقًا بالإضافة إلى إعداد مسبق واحد لـ Pro، وخيار إضافة صورة أو رمز إلى كل علامة تبويب، ومع Master Addons Pro، القدرة على تحميل قسم Elementor المحفوظ داخل أي لوحة علامات تبويب. للحصول على نظرة عامة سريعة وعروض توضيحية، راجع عنصر واجهة مستخدم علامات التبويب المتقدمة Elementor صفحة.

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

ما تفعله أداة علامات التبويب المتقدمة Elementor #

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

بالمقارنة مع أداة علامات التبويب Elementor الافتراضية، يمنحك إصدار Master Addons مزيدًا من التحكم. يمكنك التبديل بين الإعدادات المسبقة المرئية، وإضافة صور أو أيقونات إلى علامات التبويب الفردية، واستخدام نص عادي (مجاني) أو قالب محفوظ (Pro) كمحتوى اللوحة، ونمط الحالات العادية والتحويمية والنشطة بشكل منفصل.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. إذا لم تكن قد قمت بتثبيته بعد، فتحقق من دليل التثبيت.
• تم تمكين عنصر واجهة المستخدم Advanced Tabs في لوحة خيارات Master Addons.
• اختياري: قالب Elementor محفوظ إذا كنت تريد تحميل واحد داخل علامة تبويب (يحتاج هذا إلى Master Addons Pro).

أضف عنصر واجهة المستخدم لعلامات التبويب المتقدمة #

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

اختر تخطيطًا محددًا مسبقًا #

أسرع طريقة لتغيير المظهر هي النمط المحدد مسبقًا منسدلة في علامة التبويب المحتوى. لديك أربعة خيارات، والأخير يحتاج إلى Pro:

• علامات التبويب الأفقية: يتم تشغيل التسميات في الأعلى مع وجود محتوى أسفلها. هذا هو الافتراضي.
• علامات التبويب العمودية: يتم تكديس التسميات على اليسار ويظهر المحتوى على اليمين.
• الحدود النشطة اليسرى: تشبه علامات التبويب الرأسية، لكن علامة التبويب النشطة تحصل على حد ملون على اليسار.
• المحتوى الجدولي (Pro): تصبح التسميات أزرارًا أكبر على شكل بطاقة أعلى لوحة المحتوى.

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

تكوين علامات التبويب والمحتوى #

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

إعدادات لكل علامة تبويب #

• تعيين كافتراضي: اختر علامة التبويب التي تفتح أولاً عند تحميل الصفحة.
• نوع الأيقونة: يختار لا أحد, أيقونة، أو صورة لتسمية علامة التبويب.
• الصورة / الأيقونة: الأصل المرئي الموضح بجوار عنوان علامة التبويب.
• عنوان علامة التبويب: انقر على زوار النص.
• نوع المحتوى: يستخدم محتوى لمحرر نصوص عادي، أو مع Pro القسم المحفوظ, القطعة المحفوظة، أو قالب الصفحة المحفوظة.
• محتوى علامة التبويب: المحتوى الفعلي أو القالب الذي يملأ اللوحة.

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

بالنسبة لعلامة التبويب الثانية، يتحول العرض التوضيحي إلى أيقونة. اختر نوع الأيقونة واختر شيئًا يطابق التسمية. في هذه الحالة، يعمل رمز نمط عداد السرعة بشكل جيد مع “Better Performance.”

قم بتحميل قسم محفوظ داخل علامة التبويب (Pro) #

باستخدام Master Addons Pro، قم بتغيير نوع المحتوى إلى القسم المحفوظ واختر أي قالب من مكتبة Elementor الخاصة بك. يقوم العرض التوضيحي بتحميل أكورديون الأسئلة الشائعة بالكامل داخل علامة تبويب واحدة، مما يعني أن اللوحة الخاصة بك يمكن أن تحتوي على عناوين أو أكورديون أو نماذج أو أي شيء آخر قمت بحفظه كقالب.

قم بتصميم علامات التبويب والمحتوى #

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

• علامات التبويب: يغطي تسميات علامات التبويب، بما في ذلك لون العنوان، وطباعة العنوان، ولون الخلفية، ولون المحتوى، وطباعة المحتوى، ومحاذاة المحتوى، ونصف قطر الحدود، وظل المربع، والحشو، والهامش.
• محتوى: أنماط اللوحة التي تظهر عندما تكون علامة التبويب نشطة.

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

إعدادات متقدمة #

ال متقدم تحتوي علامة التبويب على عناصر تحكم Elementor المعتادة التي تتوقعها: الهامش، والحشو، والرسوم المتحركة للمدخل، والرؤية سريعة الاستجابة، وCSS المخصص، والسمات. استخدمها لضبط موضع علامات التبويب أو إخفائها على أحجام شاشات محددة.

النتيجة على الصفحة #

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

حالات الاستخدام الشائعة #

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

نصائح لعلامات تبويب أفضل #

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

الأسئلة المتداولة #

إلتحاق بالركب #

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

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