كيفية إنشاء معرض صور مستوحى من Airbnb في WordPress

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

سواء كنت مستخدمًا متمرسًا في WordPress أو مبتدئًا ، فإن هذا البرنامج التعليمي سيمنحك كل ما تحتاج إلى معرفته للحصول على الكرة!

ستعلمك هذه المقالة ما يلي:

• كيفية تثبيت Modula
• كيفية إنشاء معرض صور في Modula
• كيفية تخصيص معرض الصور ليبدو مثل معرض صور Airbnb
• والمزيد …

تصميم معرض Airbnb

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

دعنا نستكشف سبب نجاح معرض صور Airbnb:

• لقطات احترافية عالية الجودة للموقع
• تخطيط بسيط ونظيف وسهل الاستخدام للصور الرئيسية
• عرض نظيف للمعرض الكامل
• القدرة على التنقل بسهولة عبر جميع الصور من خلال Lightbox
• عرض التعليقات أو الأوصاف لكل صورة
• تأثيرات انتقال صورة Lightbox
• خيارات مشاركة الصور من خلال قنوات مختلفة
• أسهم التنقل

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

قم ببناء معرض صور مذهل مثل Airbnb

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

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

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

️ تثبيت Modula

الخطوة الأولى هي تثبيت وتفعيل Modula. للقيام بذلك ، انتقل إلى WordPress Dashboard > Plugins > Add New .

ستلاحظ وجود شريط بحث في الزاوية اليمنى العليا من الصفحة المفتوحة حديثًا. بمجرد كتابة "Modula" ، سيظهر بسرعة في نتيجة البحث الأولى. انقر فوق زر التثبيت الآن لبدء التثبيت.

️ إنشاء معرض للصور

بمجرد تثبيت Modula وتنشيطه ، حان الوقت لإنشاء معرض يشبه Airbnb. توجه إلى لوحة معلومات WordPress الخاصة بك ، ثم حدد Modula > Galleries .

من هناك ، حدد إضافة جديد لبدء إنشاء معرض الصور الخاص بك.

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

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

️ تحرير معرض الصور

هنا يأتي الجزء الممتع. يحتوي Modula على خيارات تخصيص متنوعة ، لذا سيكون من السهل جدًا جعله قريبًا من تصميم معرض الصور الخاص بـ Airbnb.

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

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

للحد من عدد الصور التي ستراها للوهلة الأولى ، ستجد قسم Max Images Coun t ضمن علامة التبويب " عام ". انطلق واضبط ذلك على خمسة.

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

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

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

يمكنك أيضًا تغيير رمز المؤشر عند تحريك الماوس فوق الصورة ليكون رمز مؤشر مثل على Airbnb.

لتسهيل تنقل الأشخاص بين الصور ، يمكنك تشغيل الإعدادات التالية ضمن Lightbox & Links: زر الصور المصغرة ، بدء تشغيل الصور المصغرة تلقائيًا ، الصور المصغرة في الأسفل.

يمكن لبعض قوائم Airbnb أن تعرض تسميات توضيحية أسفل كل صورة. يسمح لك Modula بتعيين التسميات التوضيحية بسهولة. لا تنس النقر فوق إظهار التسمية التوضيحية للصورة ضمن إعدادات Lightbox & Links. يمكنك حتى تعيين موضع التسمية التوضيحية ليتم عرضها على يسار أو يمين أو وسط العرض المبسط. ضمن علامة التبويب " التسميات التوضيحية " ، سيكون لديك المزيد من الخيارات لتعديل التسميات التوضيحية. يمكنك تعيين اللون والخط وحجم الخط ونمط الخط وحتى حجم الخط لإصدار الهاتف المحمول.

عندما تفتح الصندوق المبسط في معرض Airbnb ، يمكنك ملاحظة أزرار التنقل لمساعدتك في التنقل عبر معرض الصور. تقدم لك Modula هذه الوظيفة أيضًا. قم بالتبديل بين إعداد أزرار التنقل ضمن علامة التبويب Lightbox & Links.

عندما يتعلق الأمر بـ lightbox على Airbnb ، ستلاحظ لون خلفية أسود خالص. يمكنك أيضًا تحقيق ذلك باستخدام Modula. ضمن نفس علامة التبويب Lightbox & Links ، قم بالتمرير لأسفل حتى ترى لون خلفية Lightbox . هنا يمكنك تعيين أي لون تريده وتحديد العتامة أو جعله لونًا صلبًا.

يحتوي Airbnb على زر مشاركة في العرض المبسط لمشاركة القائمة على قنوات اجتماعية مختلفة. يحتوي Modula أيضًا على هذه الوظيفة ، مما يتيح الوصول إلى بعض الأنظمة الأساسية الأكثر شيوعًا. ضمن نفس علامة التبويب Lightbox & Links ، بمجرد تمكين خيار زر المشاركة ، سترى ستة خيارات مشاركة جديدة تظهر: Facebook و Twitter و Pinterest و WhatsApp و LinkedIn والبريد الإلكتروني. يمكنك اختيار بشكل فردي أي منها تريد أن تظهر في معرض الصور الخاص بك.

يحتوي العرض المبسط على Airbnb على زر إغلاق مرئي يمكن للمستخدمين النقر فوقه لإغلاق معرض العرض المبسط. يمكنك عرض زر الإغلاق مع Modula أيضًا.

أخيرًا ، لا تنس النقر فوق تحديث المعرض لحفظ الإعدادات.

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

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

لا تنس التمرير لأسفل إلى الإعدادات العامة وحذف 5 في Max Images Count . احفظ المعرض الذي تم تحريره حديثًا وانسخ الرمز المختصر على اليمين.

️ عرض معرض الصور الخاص بك

العرض الأول الذي سنفعله هو المعرض بالكامل.

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

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

توجه إلى الصفحة التي تريد عرض معرض صور يشبه Airbnb والصق الرمز القصير للمعرض الأول الذي أنشأناه.

آخر شيء يتعين علينا القيام به هو ربط هذين المعرضين. توجه إلى Modula> Galleries وحدد المعرض الأول الذي أنشأناه. انقر على أيقونة القلم الرصاص لتعديل الصورة الأولى.

بمجرد دخولك إلى قسم التحرير ، الصق عنوان URL الكامل لصفحة المعرض في مربع URL. انقر فوق الزر حفظ وإغلاق.

كرر هذه العملية مع الصور الأربع التالية ، ولا تنس النقر فوق الزر Update Gallery.

توجه إلى صفحتك وشاهد معرض الصور الذي يشبه Airbnb الذي تم إنشاؤه حديثًا

النتائج النهائية: Airbnb مقابل Modula

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

يعد Modula مكونًا إضافيًا متعدد الاستخدامات لمعرض الصور يتعدى ذلك مع المزيد من الميزات والإعدادات لنقل معرض الصور الخاص بك إلى المستوى التالي.

افكار اخيرة

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

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

احصل على Modula اليوم وابدأ في تخصيص معارض الصور الخاصة بك!