تسليط الضوء على برنامج Divi Plugin: Table Maker

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

تثبيت Table Maker

التثبيت بسيط ومباشر.

1. انتقل إلى الإضافات > إضافة جديد > تحميل البرنامج المساعد
2. انقر فوق اختيار ملف
3. حدد موقع ملف zip للمكون الإضافي على جهاز الكمبيوتر الخاص بك وحدده
4. انقر فوق التثبيت الآن
5. انقر فوق تنشيط

وحدة صانع الجدول

تمت إضافة وحدة نمطية جديدة إلى Divi Builder تسمى Table Maker. دعونا نلقي نظرة على الميزات الرئيسية.

علامة تبويب "محتوى صانع الجدول"

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

الوحدات الفرعية العمود

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

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

تتضمن الأعمدة تخصيصات التصميم لكل عنصر بما في ذلك النص والخلفية والخلايا وخلايا الرأس والتذييل وما إلى ذلك.

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

الرؤوس والتذييلات

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

يمكنك أن تفعل الشيء نفسه بالنسبة للصفوف. في هذا المثال ، قمت بتعيين صفين كرؤوس (الصفان على اليسار) وواحد كتذييل (الموجود على اليمين).

الجدول التمرير

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

أيقونات الجدول

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

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

أزرار الجدول

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

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

صور الجدول

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

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

علامة تبويب تصميم صانع الجدول

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

إطار الجدول

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

بالنسبة إلى الفجوات ، يمكنك ضبط فجوات العمود والصف بشكل مستقل. لقد قمت بزيادة فجوة العمود إلى 8 بكسل وفجوة الصف إلى 4 بكسل.

تضع الخطوط حدًا حول كل خلية. يمكنك التحكم في نمط الخطوط ولونها وسمكها. هذا هو الافتراضي.

في هذا المثال ، قمت بتعيين النمط على منقط ، وغيرت اللون ، وضبطت عرض الخط إلى 3 بكسل.

الجدول المشارب

ينشئ Table Stripes تأثيرًا شريطيًا مثل جدول بيانات قياسي. يمكنك اختيار المكان الذي ينطبق عليه واختيار الترتيب وضبط تدرج اللون والتشبع والسطوع. هذه هي الإعدادات الافتراضية.

في هذا المثال ، قمت بضبط تدرج لون الشريط إلى 86 درجة والتشبع إلى 172٪ والسطوع إلى 82٪. تعمل جميع التعديلات الثلاثة معًا لإنشاء خيارات ألوان مثيرة للاهتمام.

في هذا المثال ، قمت بضبط لون خلايا الجدول وخلايا الرأس وخلايا رأس العمود.

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

تصميم رأس وتذييل الصفحة

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

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

أمثلة على صانع الجدول

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

تستخدم الخلايا خطوطًا وخطًا أكبر من التخطيط وزوايا دائرية. يعرض العمود الأخير أيقونات لتوضيح ما إذا كان المنتج في المخزن. لقد أضفت ظل مربع لكل من الرؤوس والخلايا. يستخدم إطار الجدول فجوات مع 4 بكسل لفجوة العمود و 7 بكسل لفجوة الصف.

إليك نفس التصميم بدون الصور الموجودة في رأس الصف.

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

يمكنك أيضًا تقسيمها إلى صفوف. يزيل هذا المثال الصور ويظهر الجدول مقسماً بالصفوف.

هذا يظهر الصفوف كأكورديون. النقر فوق واحد يفتحه لإظهار محتواه.

من أين تشتري Table Maker

يمكنك شراء Table Maker في Divi Marketplace. يكلف 35 دولارًا لمواقع الويب غير المحدودة ويتضمن ضمانًا لاسترداد الأموال لمدة 30 يومًا وسنة واحدة من الدعم والتحديثات. يتم توفير الوثائق على شكل مقاطع فيديو إرشادية ونصوص.

خواطر ختامية

هذه هي نظرتنا إلى Table Maker for Divi. يحتوي على الكثير من الميزات لإنشاء وتخصيص جداول لـ Divi بما في ذلك العديد من الميزات التي لم أغطيها هنا. كنت بحاجة فقط إلى التوثيق لمعرفة كيفية استخدام الصور والرموز والأزرار.

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

يُعد Table Maker مكونًا إضافيًا ممتازًا لإنشاء الجداول باستخدام Divi. إن القدرة على إضافة محتوى مثل HTML ، والأكواد القصيرة ، و iFrames ، و CSS ، وما إلى ذلك ، تعزز بشكل كبير أنواع الجداول التي يمكنك إنشاؤها. إذا كنت مهتمًا ببناء طاولاتك المخصصة باستخدام Divi ، فإن Table Maker يستحق نظرة.

نريد أن نسمع منك. هل جربت Table Maker for Divi؟ أخبرنا برأيك في التعليقات.

صورة مميزة عبر PCH.Vector / shutterstock.com