كيفية وضع الصور جنبًا إلى جنب في WordPress (ثلاث طرق)

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

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

في هذه المقالة، سنعرض لك ثلاث طرق سهلة لكيفية وضع الصور جنبًا إلى جنب في WordPress.

إنشاء جداول جميلة
مع محرر الكتل

يأتي WordPress مع كتلة المعرض الافتراضية. يمكنك عرض الصور جنبًا إلى جنب مع الكتلة بالطرق التالية.

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

ابحث عن كتلة معرض جوتنبرج وأضفها إلى 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 هو مكون إضافي لبناء الجداول يعتمد على الكتل. وباستخدامه، يمكنك أيضًا إنشاء أعمدة وعرض الصور جنبًا إلى جنب. اتبع الخطوات الموضحة أدناه بعد التثبيت و تفعيل المكون الإضافي.

تثبيت وتفعيل البرنامج الإضافي TableBerg

الخطوة 01: إضافة كتلة TableBerg

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

أضف كتلة TableBerg إلى منشورك أو صفحتك

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

حدد صفًا وأعمدة للجدول

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

أضف كتلة الصورة إلى خلايا TableBerg

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

تحميل الصورة إلى الجدول

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

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

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

الصور المعروضة جنبًا إلى جنب مع جدول TableBerg

# إزالة حدود الجدول

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

إزالة حدود الجدول

وبذلك، يمكنك عرض الصور جنبًا إلى جنب على مواقع WordPress.


خاتمة

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

يمكنك القيام بالمزيد على موقعك من خلال إنشاء أنواع مختلفة من الجداول باستخدام البرنامج الإضافي TableBerg. ألق نظرة على كيفية إنشاء جدول مقارنة منتجات أمازون في ووردبريس.



فريق Tableberg