عادةً ما يعني إنشاء جدول بيانات في WordPress القتال باستخدام HTML أو لصق رمز قصير لا يمكنك تصميمه. ال الجدول الديناميكي القطعة في الإضافات الرئيسية للعنصر يتيح لك إنشاء واحد بشكل مرئي: إضافة أعمدة الرأس، وملء الصفوف، وتصميم كل جزء من لوحة Elementor. لا يوجد ترميز للجدول، ولا يوجد قفل للمكون الإضافي.
إنه يناسب أي شيء ينتمي إلى الشبكة، مثل أدلة الموظفين أو أوراق المواصفات أو الجداول الزمنية أو قوائم الأسعار. يمكنك دمج الخلايا وإضافة أيقونات إلى الرؤوس وتقطيع الصفوف وتشغيل وضع الاستجابة للهواتف. فيما يلي تشغيل لكل إعداد، بدءًا من خلايا الرأس وحتى علامات تبويب التصميم.
ما تفعله أداة الجدول الديناميكي #
تقوم الأداة بإنشاء جدول HTML قياسي من مكررين: أحدهما لصف الرأس والآخر لخلايا الجسم. كل خلية هي عنصر خاص بها، لذلك يمكنك التحكم في النص والمحاذاة وحتى امتدادات الأعمدة أو الصفوف دون كتابة أي تعليمات برمجية.
يحتوي على ثلاث علامات تبويب: محتوى الرأس والجسم والإعدادات، ونمط الألوان والتباعد، ومتقدم لخيارات Elementor المعتادة. والنتيجة هي جدول نظيف وسريع الاستجابة يطابق السمة الخاصة بك.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- البيانات التي تريد إظهارها، مرسومة على شكل أعمدة وصفوف.
كيفية إضافة عنصر واجهة المستخدم الجدول الديناميكي #
في محرر Elementor، افتح عناصر لوحة والبحث عن الجدول الديناميكي، أو قم بالتمرير إلى قسم الإضافات الرئيسية. اسحبه إلى صفحتك. يتم تحميله بجدول نموذجي بحيث تقوم بالتحرير من تخطيط العمل بدلاً من الشبكة الفارغة.
قم بإعداد رأس الجدول #
افتح ال محتوى علامة التبويب. ال رأس الطاولة القسم يحمل صف الرأس. ال رأس الطاولة يؤدي التبديل إلى إظهار أو إخفاء الرأس و خلية رأس الجدول يحتوي المكرر على عنصر واحد لكل عمود.
تحتوي كل خلية رأس على علامات تبويب فرعية خاصة بها للمحتوى والخيارات. في محتوى قمت بتعيين اسم العمود ويمكن إضافة أيقونة بجانبه (لا شيء أو أيقونة، من مكتبة الأيقونات أو SVG تم تحميله). يستخدم إضافة عنصر لإضافة أعمدة، أيقونة النسخ لتكرار عمود، وX لإزالته.
املأ جسم الطاولة #
ال جسم الطاولة القسم يحمل الخلايا. كل عنصر عبارة عن خلية واحدة، و صف جديد؟ قم بتبديل العلامات حيث يبدأ صف جديد، بحيث تقوم بإضافة الخلايا بالترتيب ووضع علامة على بداية كل صف.
تحتوي كل خلية جسم أيضًا على علامات تبويب فرعية للمحتوى والخيارات
- نص الجسم: محتوى الخلية، مع خيار الكتابة باستخدام الذكاء الاصطناعي.
- امتداد العمود وامتداد الصف: دمج خلية عبر الأعمدة أو الصفوف.
- العرض المخصص: قم بتعيين عرض ثابت لهذا العمود.
- محاذاة: اليسار أو الوسط أو اليمين أو التبرير داخل الخلية.
- زخرفة: قم بتطبيق نمط محدد مسبقًا لجعل الخلية بارزة.
لتنمية الجدول، انقر إضافة عنصر، اكتب نص الخلية، وقم بتشغيله صف جديد؟ على الخلية الأولى من كل سطر جديد. هنا تتم إضافة صف خامس للموظفين.
اجعل الجدول مستجيبًا #
ال إعدادات القسم لديه الجدول المستجيب؟ تبديل. ومع تشغيله، تتدفق الطاولة مرة أخرى على شاشات صغيرة بدلاً من أن تفيض، لذلك يتم تكديس كل صف في بطاقة قابلة للقراءة على الهواتف. هذا هو الإعداد الذي ينساه الناس، ولهذا السبب تبدو الطاولة مكسورة على الهاتف المحمول.
نمط الطاولة #
ال أسلوب يتم تقسيم علامة التبويب إلى النمط العالمي, نمط رأس الجدول، و جسم الطاولة، زائد أنماط (خيار احترافي). ال النمط العالمي يحدد القسم المظهر على مستوى الطاولة.
- طاولة مخططة: قم بتشغيل شريط الحمار الوحشي واختر لون الصف المخطط.
- لون الخلفية: اللون الأساسي خلف الخلايا.
- حشوة الخلية الداخلية: المساحة داخل كل خلية.
- نوع الحدود ونصف قطر الحدود: الخطوط بين الخلايا والزوايا المستديرة.
تصميم الرأس والجسم #
ال نمط رأس الجدول يقوم القسم بتعيين خلفية الرأس ولون النص والطباعة والحشوة بحيث يكون الصف العلوي منفصلاً. ال جسم الطاولة القسم يفعل الشيء نفسه بالنسبة لخلايا البيانات.
- لون الخلفية ولون النص: ألوان خلايا الجسم.
- حجم الأيقونة ولون الأيقونة وحشوة الأيقونة: التصميم لأي أيقونات الخلية.
- المحاذاة والطباعة: كيف يجلس النص الأساسي ويبدو.
النتيجة على الصفحة #
قم بالنشر أو المعاينة وسيُعرض الجدول مع وضع الأعمدة والصفوف والخطوط في مكانها، مستجيبًا على الهاتف المحمول إذا قمت بتشغيل ذلك.
حالات الاستخدام الشائعة #
- أدلة الموظفين أو الفريق مع الأسماء والأدوار وتفاصيل الاتصال.
- أوراق المواصفات مقارنة ميزات المنتج وقيمه.
- الجداول والجداول الزمنية للفصول الدراسية أو الأحداث أو ساعات العمل.
- قوائم الأسعار هذا لا يحتاج إلى كامل جدول التسعير.
- ملخصات البيانات تم سحبها من جدول البيانات إلى شبكة على غرار.
نصائح للعمل مع أداة الجدول الديناميكي #
- أعمدة الخطة أولاً. قم بتعيين كل خلية رأس قبل ملء النص بحيث تصطف الصفوف.
- وضع علامة على صف جديد على الخلية الأولى فقط. ضع علامة على بداية كل صف، وليس كل خلية، أو فواصل التخطيط.
- قم بتشغيل الطاولة المستجيبة للهواتف. تفيض الجداول العريضة على الهاتف المحمول ما لم يكن هذا قيد التشغيل.
- استخدم الشريط للطاولات الطويلة. تجعل صفوف الحمار الوحشي جدول البيانات الطويل أسهل بكثير في المسح.
- إبقاء نص الخلية قصيرة. تمتد الأوتار الطويلة على عمود، لذا استخدم العرض المخصص للحفاظ على توازن الأشياء.
الأسئلة المتداولة #
ما هي أداة الجدول الديناميكي في الإضافات الرئيسية؟
إنها أداة Elementor التي تقوم بإنشاء جدول بيانات HTML بشكل مرئي. يمكنك إضافة أعمدة الرأس وخلايا الجسم من خلال أجهزة إعادة الإرسال، ثم قم بتصميم الألوان والحشو والحدود والخطوط من اللوحة. لا يوجد HTML أو رمز قصير، ويمكن جعل الجدول مستجيبًا.
هل يمكنني دمج الخلايا في الجدول الديناميكي؟
نعم. تحتوي كل خلية جسم على خيارات Column Span وRow Span في علامة التبويب الفرعية للخيارات الخاصة بها. قم بتعيين نطاق لدمج تلك الخلية عبر أعمدة أو صفوف متعددة، وهو أمر مفيد للعناوين المجمعة أو صفوف الملخص داخل الجدول.
هل الجدول الديناميكي مستجيب على الهاتف المحمول؟
نعم. يحتوي قسم الإعدادات على تبديل جدول سريع الاستجابة. مع تشغيله، يتدفق الجدول مرة أخرى على شاشات صغيرة بحيث يتم تكديس كل صف في كتلة قابلة للقراءة بدلاً من تجاوز سعة الصفحة، مما يبقي الجداول العريضة قابلة للاستخدام على الهواتف.
هل يمكنني إضافة صفوف مخططة إلى الجدول؟
نعم. في علامة التبويب "النمط"، يحتوي قسم "النمط العالمي" على مفتاح تبديل جدول مخطط ولون خلفية مخطط. قم بتشغيله لإضافة شريط حمار وحشي، والذي يتناوب لون الصف ويجعل قراءة الجداول الطويلة أسهل بكثير.
هل يمكنني إضافة أيقونات إلى رؤوس الجدول؟
نعم. تحتوي كل خلية رأس على خيار "النوع" الذي تم تعيينه على "أيقونة"، حيث يمكنك اختيار رمز من المكتبة أو تحميل SVG. يظهر الرمز بجوار اسم العمود، مما يساعد في تسمية الأعمدة مثل البريد الإلكتروني أو الهاتف أو الموقع في لمحة.
إلتحاق بالركب #
تقوم أداة Dynamic Table بتحويل صفوف وأعمدة البيانات إلى جدول نظيف ومنمق دون لمس HTML. قم بتعيين الرؤوس، وإضافة خلايا النص، ووضع علامة على كل صف جديد، ثم قم بتصميم الألوان والخطوط والحدود لتتناسب مع صفحتك. للحصول على تخطيطات البيانات ذات الصلة، راجع أداة جدول المقارنة و ال القطعة جدول التسعير، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.
