ال كتلة الصورة في ووردبريس is super helpful when inserting and showcasing a single image on your website. But if you want to display multiple photos at once, the Gallery block is the right choice.
Therefore, you must learn how to use the gallery block in WordPress. Once you master the gallery block’s features, you can use it to enhance your website’s visuals, making it more professional and appealing.
اليوم، في هذا البرنامج التعليمي، سنناقش كتلة معرض WordPress وميزات شريط الأدوات وخيارات التخصيص وكيفية استخدامها بشكل صحيح. تأكد من متابعتنا من البداية إلى النهاية.
ما هي كتلة معرض WordPress؟
كتلة معرض ووردبريس is a core block in the WordPress block editor. It lets you create and display a collection of images in a شبكة format. It is perfect for displaying event photos, organizing images into an attractive layout, or presenting images with minimal effort.
هناك بعض الميزات التي تفيدك عند استخدامك للكتلة. اطلع على هذه الميزات أدناه.
- التخصيص:اضبط الأعمدة والمسافات والتسميات التوضيحية لتناسب تصميمك. يمكنك أيضًا تعيين دقة مختلفة للصور الفردية في المعرض.
- تصميم متجاوب:تتكيف الصور تلقائيًا مع أحجام الشاشات المختلفة لتوفير تجربة سلسة على الهاتف المحمول والكمبيوتر اللوحي وسطح المكتب.
- التكامل المدمج:لا حاجة إلى مكونات إضافية؛ تعمل الكتلة بشكل أصلي في WordPress.
- صديق لمحركات البحث: Alt text and captions can improve your content’s accessibility and search engine ranking. You can also set ALT text for separate images within the gallery.
ميزات شريط أدوات كتلة المعرض
عند إدخال كتلة المعرض، يظهر شريط أدوات في أعلى كتلة المعرض مع ميزات متنوعة لتخصيص المعرض. هذه الميزات موجودة أدناه.
- تحويل: يمكنك تحويل هذه الكتلة إلى كتلة صورة وأعمدة وتفاصيل ومجموعة.
- يجر: يتيح لك سحب الكتلة المخصصة وإفلاتها في أي مكان في المحرر.
- مقبض متحرك: يتيح لك تحريك الكتلة الخاصة بك لأعلى ولأسفل.
- محاذاة: يتيح لك خيار المحاذاة تعيين محاذاة الصورة إلى لا شيء، والعرض العريض، والعرض الكامل، واليسار، والمركز، واليمين.
- وصلة: يتيح لك هذا الخيار إضافة روابط للمحتوى المحدد داخل الكتلة.
- التسمية التوضيحية: بإمكانك إضافة تعليقات توضيحية باستخدام خيار المحرر لكل صورة.
- يضيف: يتيح لك خيار الإضافة إضافة صور جديدة أو تحميلها إلى المعرض.
- المزيد من الخيارات: يقدم المزيد من الخيارات المتعلقة بقسم الكتلة، مثل التكرار والنسخ والتجميع وما إلى ذلك.
كيفية استخدام كتلة المعرض في ووردبريس
Using the Gallery block in WordPress is simple. Just follow the below steps:
الخطوة 1: إضافة كتلة المعرض في المحرر
افتح المنشور أو الصفحة، وانقر على أيقونة "+" لإضافة كتلة، ثم ابحث عن "المعرض". حدد كتلة المعرض لإدراجها في منشورك أو صفحتك.
الخطوة 2: تحميل صورك
يمكنك إما تحميل صورك أو تحديد صورك من مكتبة الوسائط.
كيفية إدراج الصور عبر خيار التحميل
لإدراج ملفات الصور، انقر فوق زر التحميل، حدد صورك باستخدام المؤشر بينما الضغط على زر CTRL من لوحة المفاتيح، ثم انقر فوق "فتح". هذا كل شيء. يمكنك رؤية صورك في المحرر.
كيفية إدراج صورة عبر خيار مكتبة الوسائط
انقر فوق زر مكتبة الوسائط، وحدد صورك، ثم انقر فوق زر إنشاء معرض جديد وإدراج معرض لإدراج الصور في المحرر.
عند إدراج جميع الصور في المعرض، يمكنك رؤية جميع ميزات شريط الأدوات الخاصة بكتلة الصورة. يمكنك التحقق من هذه الميزات هنا.
الخطوة 3: تخصيص المعرض
لتخصيص المعرض، انتقل إلى الإعدادات (1) > الكتلة (2) > الإعدادات (3). ستجد خيارات تحديد الأعمدة والدقة وخيارات أخرى.
- الأعمدة: تتيح لك الأعمدة تحديد عدد الصور التي تريد عرضها في محرر الصور. وكلما زاد عدد الصور التي تضيفها، زاد عدد الأعمدة التي ستتم إضافتها إلى المعرض. (4)
- دقة: يمكنك ضبط دقة الصورة على الصورة المصغرة والحجم الكامل. (5)
- قص الصور لتناسب: تحافظ هذه الميزة على نسبة كل صورة وتجعل حجمها مناسبًا.
- ترتيب عشوائي: لا تقوم هذه الميزة بالحفاظ على التسلسل بل تقوم بعرض الصور بتسلسل عشوائي.
يتضمن خيار الأنماط الخيارات التالية.
- لون: يتيح لك خيار اللون تغيير لون الخلفية لكتلة المعرض الخاصة بك.
- أبعاد: يتيح لك خيار الأبعاد تعديل مسافة الكتلة (المسافة بين كتلتين مثل الصور) والهامش والحشو.
- الحدود ونصف القطر: باستخدام هذه الميزة، يمكنك إضافة حدود ولون حدود ونصف قطر حدود إلى معرض الصور الخاص بك.
إليكم العرض التوضيحي الكامل للمعرض الذي قمت بإنشائه.
Create an Interactive Gallery with Galleryberg
While the default Gallery block is excellent for simple grids, it lacks features such as a lightbox, hover effects, and diverse layouts.
If you want a more engaging gallery without writing code, the جاليري بيرج plugin is a free alternative that extends the block editor with extra tools. It lets you switch between tile, masonry, justified, and square layouts, and adds a built‑in lightbox for zooming and navigation.
Galleryberg also includes subtle hover effects and responsive controls so your galleries feel modern on desktop and mobile.
Now let’s see how to use the Galleryberg plugin.
الخطوة 1: تثبيت مُلحق Galleryberg Plugin
Go to your WordPress dashboard and navigate to Plugins → Add New and search for Galleryberg. Then install and activate the plugin.
Step 2: Insert the Galleryberg Gallery Block
Create a new post/page or edit an existing one. Click the “+” button, search for Galleryberg, and add the block.
Step 3: Add Your Images
Upload new images or select them from the Media Library and click Select.
الخطوة 4: اختر تخطيطاً
By default, the block uses a Tiles layout. In the block’s sidebar, you can switch to البناء, مبررأو المربع to better match your design.
Each layout automatically rearranges the images, and you can adjust the columns, spacing, and borders.
Step 5: Enable the lightbox
Toggle Enable Lightbox in the block settings to let visitors click an image and view it in a pop‑up with zoom and slide navigation.
The lightbox includes keyboard and touch controls, so it works smoothly on desktops and phones.
Step 5: Explore hover effects and captions
Use the Caption settings to display text below images or as an overlay that appears on hover. Galleryberg’s hover animations (zoom in/out and overlays) make the gallery feel interactive without distracting the
الخطوة 6: المعاينة والنشر
Once satisfied, preview your gallery and publish or update the post. Your gallery will be responsive and performance‑optimised thanks to server‑side rendering.
Why Use Galleryberg Instead of the Core Block?
The core Gallery block offers basic grid layouts but lacks features such as a lightbox, hover animations, and varied layouts. Galleryberg provides four different gallery styles, a responsive lightbox with zoom and keyboard navigation, and intuitive controls for spacing, colors, and captions. It even supports responsive hover effects to add subtle animations. If you need a gallery that encourages visitors to interact with your images and fits seamlessly into the block editor, Galleryberg is a lightweight, user‑friendly solution.
الأفكار النهائية!
تُعد Gallery Block أداة قوية مع محرر Gutenberg block. تتيح لك عرض مجموعات الصور الخاصة بك دون الحاجة إلى أي مكونات إضافية.
إنه خيار ممتاز للجميع بسبب مرونته وخيارات التخصيص والتكامل السلس مع WordPress.
جربه وشاهد كيف يمكنه تحويل طريقة عرض الصور على موقع الويب الخاص بك.
أخبرني برأيك حول البرنامج التعليمي في قسم التعليقات أدناه. كما يمكنك إخبار زملائك به من خلال منصة الوسائط الاجتماعية الخاصة بك.
اقرأ المزيد!
