6 تصاميم فريدة للحدود لصور وحدة معرض Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

# 1 معرض صور بولارويد

ابدأ تصميم المبنى رقم 1

# 2 تصميم الشبكة النظيفة

ابدأ تصميم المبنى رقم 2

# 3 صورة خلفية مخصصة خلف المعرض بأكمله

ابدأ تصميم المبنى رقم 3

# 4 صورة خلفية مخصصة خلف كل عنصر معرض

ابدأ تصميم المبنى رقم 4

# 5 بوكس ​​شادو وبوردر كومبو

ابدأ تصميم المبنى رقم 5

# 6 تصميم شريط فيلم الحدود

ابدأ تصميم المبنى رقم 6

ما تحتاجه للبدء

اشترك في قناتنا على اليوتيوب

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

إنشاء صفحتك الجديدة

بالنسبة للمبتدئين ، ستحتاج إلى إنشاء صفحة جديدة ، وإعطاء صفحتك عنوانًا ، ونشر Divi Builder. حدد الخيار "Build from Scratch" ثم انشر صفحتك. ثم انقر للبناء على الواجهة الأمامية.

حفظ قالب وحدة معرض Divi

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

أنشئ قسمًا جديدًا بصف عمود واحد ثم أضف وحدة المعرض إلى الصف.

ستقوم Divi بتعبئة وحدة المعرض ببعض الصور من معرض الوسائط الخاص بك في عرض شبكي مثل ما يلي:

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

ثم قم بتحديث إعدادات Divi Gallery Module كما يلي:

عدد الصور: 12
إظهار العنوان والتسمية التوضيحية: NO
إظهار ترقيم الصفحات: NO

سيعمل هذا كقالب جيد للمضي قدمًا. لحفظ وحدة المعرض في مكتبة Divi الخاصة بك ، انقر فوق أيقونة Save to Library في قائمة الوحدة الرمادية عند التمرير فوق الوحدة النمطية. ثم قم بتسمية النموذج "Gallery Module Template" واحفظه في المكتبة.

عندما تريد إضافة وحدة المعرض المحفوظة إلى صفحتك ، كل ما عليك فعله هو النقر لإضافة وحدة نمطية جديدة كالعادة. ثم حدد علامة التبويب "إضافة من المكتبة" في النافذة المنبثقة وانقر على وحدة المعرض بالاسم "قالب وحدة المعرض".

هذا كل شيء. الآن دعنا نصل إلى تلك التصاميم الحدودية!

# 1 معرض صور بولارويد

هذا التصميم التالي هو حد شائع للصور التي تشبه صورة بولارويد. هذا تخطيط مفيد بشكل خاص إذا كنت تريد عرض عناوين الصور الخاصة بك.

هيريس كيفية القيام بذلك.

إعدادات القسم

قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف قالب وحدة معرض Divi المحفوظ من المكتبة (الموضح أعلاه). قبل تحرير وحدة المعرض ، افتح إعدادات القسم وأضف لون خلفية رمادية بحيث تظهر حدودنا البيضاء قليلاً.

الخلفية: #dddddd

إعدادات الصف

بعد ذلك ، قم بتحديث إعدادات الصف بما يلي:

عرض الحضيض: 1

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

إعدادات وحدة المعرض

افتح إعدادات وحدة المعرض وقم بتحديث ما يلي:

عرض العنوان والتعليق: نعم

وزن خط العنوان: غامق
نمط خط العنوان: TT
محاذاة نص العنوان: الوسط
ارتفاع خط العنوان: 2em

عرض الحد العلوي للصورة: 10 بكسل
لون الحد العلوي للصورة: #ffffff
عرض الحد الأيسر للصورة: 10 بكسل
لون الحد الأيسر للصورة: #ffffff
عرض الحد الأيمن للصورة: 10 بكسل
لون الحد الأيمن للصورة: #ffffff

لإنشاء تباعد بين صورنا ، أضف الحد التالي إلى عناصر المعرض:

عرض الحدود: 10 بكسل
لون الحدود: #dddddd (يتطابق مع لون خلفية القسم)

لتلوين الجزء السفلي من تصميم الحدود المستقطبة ، نحتاج إلى إضافة خلفية بيضاء إلى الوحدة.

لون الخلفية: #ffffff

النتيجة النهائية

هذه هي النتيجة النهائية لتصميم حدود بولارويد.

# 2 تصميم الشبكة النظيفة

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

هيريس كيفية القيام بذلك.

قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف قالب وحدة معرض Divi المحفوظ من المكتبة (الموضح أعلاه).

إعدادات الصف

قبل تحرير وحدة المعرض ، افتح إعدادات القسم وقم بتحديث ما يلي:

عرض الحضيض: 1
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل
عرض الحدود: 10 بكسل
لون الحدود: #dddddd

يعد حد الصف هذا ضروريًا لمطابقة التباعد الخارجي لمعرضنا مع التباعد بين الصور.

إعدادات وحدة المعرض

افتح الآن إعدادات وحدة المعرض وأضف حدًا لعناصر المعرض وصور المعرض عن طريق تحديث ما يلي:

عرض حدود الصورة: 20 بكسل
لون حدود الصورة: #ffffff

عرض الحدود: 10 بكسل
لون الحد: شفاف (هذا مهم لإظهار لون الخلفية)

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

لون الخلفية: #dddddd (هذا يطابق لون حد الصف)

نظرًا لأن حد عنصر المعرض الخاص بك شفاف ، فإنه يرث لون الخلفية.

تصميم نهائي

تغيير ألوان الحدود عن طريق تغيير لون الخلفية

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

الحشو المخصص: 10 بكسل للأعلى ، 10 بكسل للأسفل ، 10 بكسل لليسار ، 10 بكسل لليمين

يمكنك الآن ضبط لون الخلفية على ما تريد:

# 3 صورة خلفية مخصصة خلف المعرض بأكمله

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

هيريس كيفية القيام بذلك.

قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف قالب وحدة معرض Divi المحفوظ من المكتبة (الموضح أعلاه).

إعدادات الصف

قبل تحرير وحدة المعرض ، افتح إعدادات القسم وقم بتحديث ما يلي:

عرض الحضيض: 1
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

إعدادات وحدة المعرض

الآن قم بتحديث إعدادات وحدة المعرض كما يلي:

صورة الخلفية: [إضافة صورة] (لن تتمكن من رؤيتها بعد)
لون الخلفية: #dddddd (يظهر هذا فقط إذا كنت تستخدم صورة خلفية png مع شفافية)
عرض حدود الصورة: 10 بكسل
لون حدود الصورة: #ffffff

عرض الحدود (للوحدة النمطية): 10 بكسل
لون الحدود: #ffffff

ثم أضف CSS المخصص التالي إلى عنصر المعرض:

padding: 3%;

يؤدي هذا إلى إنشاء الفصل بين عناصر المعرض لإكمال التصميم.

النتيجة النهائية

# 4 صورة خلفية مخصصة خلف كل عنصر معرض

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

هيريس كيفية القيام بذلك.

قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف قالب وحدة معرض Divi المحفوظ من المكتبة (الموضح أعلاه).

إعدادات الصف

قبل تحرير وحدة المعرض ، افتح إعدادات القسم وقم بتحديث ما يلي:

اجعل هذا الصف بعرض كامل: نعم
عرض المزراب: 2

إعدادات وحدة المعرض

الآن قم بتحديث إعدادات وحدة المعرض كما يلي:

عرض حدود الصورة: 10 بكسل
لون حدود الصورة: #ffffff

ثم أضف CSS المخصص التالي إلى عنصر المعرض:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

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

عد الآن وافتح إعدادات وحدة المعرض والصق عنوان URL في CSS المخصص حيث يقول "أدخل عنوان url للصورة هنا". تأكد من الاحتفاظ بعنوان url داخل الاقتباسات.

النتيجة النهائية

هنا هو النتيجة النهائية.

# 5 بوكس ​​شادو وبوردر كومبو

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

هيريس كيفية القيام بذلك.

قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف قالب وحدة معرض Divi المحفوظ من المكتبة (الموضح أعلاه).

أضف حدود الصورة ومربع الظل

افتح إعدادات المعرض وقم بتحديث ما يلي:

عرض حدود الصورة: 10 بكسل
لون حدود الصورة: #ffffff

ظل مربع الصورة: انظر الصورة
مربع الظل الوضع الأفقي: -30 بكسل
الوضع الرأسي للظل المربع: -30 بكسل
قوة انتشار الظل المربع: -10 بكسل
لون الظل: # e08474

أضف حدود عنصر المعرض

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

عرض الحد الأيمن: 7 بكسل
لون الحد الأيمن: #dddddd
نمط الحد الأيمن: منقط
عرض الحد السفلي: 7 بكسل
لون الحد السفلي: #dddddd
نمط الحد السفلي: منقط

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

إعدادات الصف

لمنح تصميمك مساحة أكبر ، افتح إعدادات الصف وقم بتحديث ما يلي:

جعل العرض الكامل للصف: نعم

تصميم نهائي

ها هو التصميم النهائي.

رقم 6: تصميم حدود شريط الفيلم

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

هيريس كيفية القيام بذلك.

قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف قالب وحدة معرض Divi المحفوظ من المكتبة (الموضح أعلاه).

إعدادات الصف

قبل تحرير وحدة المعرض ، افتح إعدادات الصف وقم بتغيير عرض هامش التوثيق إلى 1.

عرض الحضيض: 1

سيؤدي هذا إلى التخلص من تباعد الهامش الافتراضي بين صورك.

إعدادات وحدة المعرض

بعد ذلك ، افتح إعدادات المعرض وقم بتحديث ما يلي:

أضف حدود الصورة المتقطعة

عرض الحد الأيمن للصورة: 8 بكسل
لون الحد الأيمن للصورة: #dddddd
نمط الحد الأيمن للصورة: متقطع
عرض الحد الأيسر للصورة: 8 بكسل
لون الحد الأيسر للصورة: #dddddd
نمط الحد الأيسر للصورة: متقطع

أضف حدود عنصر المعرض للتباعد

عرض الحد الأيسر: 20 بكسل
لون الحد الأيسر: #ffffff
عرض الحد الأيمن: 20 بكسل
لون الحد الأيمن: #ffffff

إضافة ظل مربع الصورة

ظل مربع الصورة: انظر الصورة
مربع قوة طمس الظل: 0 بكسل
قوة انتشار الظل المربع: -10 بكسل
لون الظل: # 222222

أضف لون الخلفية

لون الخلفية: # 222222

ثم أضف CSS المخصص التالي إلى عنصر المعرض:

padding: 5px 10px;

النتيجة النهائية

الآن تحقق من النتيجة.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!