كيفية إنشاء معرض الماسونية في العنصر (3 طرق)

الوجبات السريعة الرئيسية

• تعني الماسونية أن الصور تحافظ على أبعادها الخاصة بدلاً من اقتصاصها إلى بطاقة موحدة، بحيث تظل الصورة الشخصية طويلة.
• لا تحتوي أداة معرض الصور المجانية الخاصة بـ Elementor على خيار البناء. عناصر التحكم في التخطيط الخاصة بها هي الأعمدة والفجوة.
• يحتوي معرض الصور القابل للتصفية من Master Addons على مفتاح ماسوني يوقف الاقتصاص، لكن نص الواجهة الأمامية يضع العناصر في صفوف، لذا تترك البطاقات الطويلة فجوة أسفل البطاقات القصيرة في نفس الصف.
• إذا كنت تريد أعمدة معبأة بإحكام بدون فجوات، فإن أعمدة CSS الموجودة على الحاوية هي المسار الصادق للتثبيت المجاني.
• بالنسبة للقطات المنتج وصور الفريق، عادةً ما تكون الشبكة الموحدة تُقرأ بشكل أفضل من البناء، لذا قم بتشغيل نسبة عرض الصورة بدلاً من ذلك.

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

يمكن لـ Elementor الاقتراب من هذا بثلاث طرق مختلفة، ولا تنتج جميعها نفس الشيء. يحتوي أحدهم على مفتاح يسمى Masonry والذي يفعل أقل مما يوحي به الاسم، وهو الجزء الذي يستحق القراءة قبل البناء.

البناء والشبكة والمبررة: الفرق

البناء والمبرر كلاهما يحمي المحصول الأصلي. الفرق هو الاتجاه الذي تسير فيه الرياضيات: يعمل البناء على إصلاح عرض العمود ويسمح للارتفاع بالتغير، ويصلح المبرر ارتفاع الصف ويسمح للعرض بالتغير.

الطريق 1: أداة معرض Elementor (Pro)

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

الطريق 2: مفتاح البناء في المعرض القابل للتصفية

في تثبيت Elementor المجاني، معرض الصور القابلة للتصفية يحتوي على مفتاح ماسوني في قسم الإعدادات، بجوار نسبة عرض الصورة والمزراب.

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

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

الطريق 3: أعمدة CSS على الحاوية

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

selector {
  column-count: 3;
  column-gap: 24px;
}
selector img {
  width: 100%;
  margin-bottom: 24px;
  break-inside: avoid;
}
@media (max-width: 767px) {
  selector { column-count: 2; }
}

ال selector تستهدف الكلمة الأساسية العنصر الذي تقوم بتحريره، لذلك يتم وضع هذا المقتطف في مربع CSS المخصص الموجود على الحاوية نفسها. في تثبيت Elementor المجاني، يأتي هذا المربع من ملحق مثل Css مخصص، نظرًا لأن Elementor يضع علامة على حقل CSS المخصص الخاص به على أنه Pro.

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

أحجام الصور التي تجعل البناء يبدو صحيحًا

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

عندما تكون الشبكة الموحدة هي الإجابة الأفضل

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

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

الأسئلة المتداولة

الأفكار النهائية

ثلاثة مسارات، ثلاث نتائج مختلفة. تقوم أداة معرض Elementor Pro بتعبئة الأعمدة لك. يقوم مفتاح البناء الموجود في المعرض القابل للتصفية بإيقاف الاقتصاص والحفاظ على الصفوف، وهو ما يكفي غالبًا. تعطي أعمدة CSS المظهر المعبأ عند التثبيت المجاني، على حساب ترتيب القراءة.

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

القراءة ذات الصلة

• أداة معرض الصور القابلة للتصفية
• كيفية إنشاء معرض قابل للتصفية في Elementor
• عنصر واجهة مستخدم معرض Elementor: تمت مقارنة العناصر الأساسية وPro والإضافات
• امتداد CSS مخصص
• معرض القطعة المنزلق