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

الطريقة الأولى: استخدام كتلة المعرض
يأتي WordPress مع كتلة المعرض الافتراضية. يمكنك عرض الصور جنبًا إلى جنب مع الكتلة بالطرق التالية.
الخطوة 01: إضافة كتلة المعرض إلى WordPress
ما عليك سوى فتح منشور أو صفحة. ابحث عن كتلة المعرض في مكتبة كتلة جوتنبرج بالضغط على زر الجمع (+)أضفه إلى المحرر.

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

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

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

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

الطريقة الثانية: استخدام كتلة الأعمدة
The Column block allows you to divide your content into multiple columns. You can add other blocks to add different types of content within each column.
الخطوة 01: إضافة كتلة العمود إلى موقعك
أضف كتلة العمود إلى محرر النصوص الخاص بك باتباع نفس الطريقة الموضحة أعلاه.

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

أضف كتلة الصورة عن طريق ضرب زر الجمع (+) في غضون كتلة العمود.

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

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

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

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

الخطوة 01: إضافة كتلة TableBerg
يأتي البرنامج الإضافي مع كتلة TableBergأضفه إلى محرر النصوص الخاص بك.

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

يتيح لك TableBerg إضافة أنواع مختلفة من الكتل إلى خلايا الجدول. أضف كتلة الصورة إلى خلايا الجدول.

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

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

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

# إزالة حدود الجدول
يمكنك رؤية حدود حول الطاولة. لإزالتها، انقر على أيقونة TableBerg ثلاث مرات على شريط الأدوات. انتقل إلى علامة التبويب "الأنماط" > "الحدود" على الشريط الجانبي الأيمن. ضع القيمة صفر (0) لتحديد حجم حدود الجدول.

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