كيفية استخدام خيارات موضع Divi لإنشاء حزم صور

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على التصميمات التي سنقوم ببنائها في هذا البرنامج التعليمي.

تصميم حزمة الصور رقم 1

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

تصميم حزمة الصور رقم 2

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

تصميم حزمة الصور رقم 3

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

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك.

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

تصميم حزمة الصور رقم 1

بالنسبة لتصميم حزمة الصور الأول هذا ، سنقوم بوضع صورتين (مقلوبتين قليلاً) على كل جانب من الصورة المركزية.

ابدأ بإضافة صف من عمود واحد إلى قسم عادي.

أضف الصورة الوسطى

داخل العمود ، أضف وحدة صورة.

ثم قم بتحميل صورة للوحدة.

بالنسبة لهذه الصور ، سنستخدم لقطات شاشة من Fitness Coach Layout Pack. يجب أن يكون حجم كل منها 880 × 1200 بكسل.

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

• العرض: 50٪
• محاذاة الوحدة: مركز

أضف ظل الصندوق كما يلي:

• مربع الظل: انظر الصورة
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 38 بكسل
• قوة انتشار الظل المربع: 5 بكسل
• لون الظل: rgba (0،0،0،0.2)

ثم اضبط فهرس Z على 1 بحيث يظل فوق الصور الأخرى في الحزمة.

• الفهرس Z: 1

أضف الصورة اليسرى

لإنشاء الصورة اليسرى في الحزمة ، أضف صورة جديدة أسفل الصورة الوسطى.

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

ضمن علامة تبويب التصميم ، قم بتحديث العرض على النحو التالي:

• العرض: 30٪

ثم قم بإضافة ظل الصندوق كما يلي:

• Box Shadow: انظر لقطة الشاشة
• لون الظل: rgba (0،0،0،0.2)

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

• الموقف: مطلق
• الموقع: يسار الوسط

لإعطاء الصورة القليل من الدوران ، قم بتحديث خيار تدوير التحويل كما يلي:

تحويل المحور Z تدوير: -10deg

أضف الصورة الصحيحة

لإنشاء الصورة اليمنى ، افتح مربع الطبقات ، وقم بتكرار الصورة اليسرى.

قم بتسمية وحدات الصورة (الصورة اليسرى ، الصورة اليمنى ، إلخ) بحيث يمكنك التعرف عليها بسهولة لاحقًا. ثم افتح إعدادات الصورة المكررة واضبط الموقع على النحو التالي:

• الموقع: المركز الصحيح

ثم اضبط خيار تدوير التحويل كما يلي:

• مؤشر تحويل تدوير Z: 10deg

لا تنس تبديل الصورة المكررة بصورة جديدة.

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

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

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

لإضافة حزمة الصور إلى عدة أعمدة ، قم بتكرار الصف الذي يحتوي على حزمة الصور الحالية.

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

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

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

ها هو التصميم النهائي لحزمة الصور رقم 1.

حزمة تصميم الصور رقم 2

يتميز التصميم التالي بحزمة صور بها خمس صور - صورة واحدة في المنتصف وأربع صور في كل ركن من أركان العمود.

للبدء ، أنشئ قسمًا عاديًا جديدًا به صف عمود ربع نصف وربع.

أضف صورة المركز

في العمود الأوسط ، أضف وحدة صورة.

ثم قم بتحميل صورة للوحدة. نحن نستخدم صورًا من حزمة تخطيط متجر الأثاث (كل 800 بكسل × 1200).

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• لون الخلفية: # f7f3ec

• العرض: 55٪
• محاذاة الوحدة: مركز

• الهامش: 0 بكسل
• الحشو: 5٪ لأعلى ، 5٪ أسفل ، 5٪ يسار ، 5٪ يمين

ضمن علامة التبويب خيارات متقدمة ، ارفع مؤشر Z بمقدار 1 للتأكد من بقاء الصورة فوق الصور الأخرى في مساحة Z.

• الفهرس Z: 1

إضافة أعلى الصورة اليسرى

لإضافة الصورة اليسرى العلوية ، أضف وحدة صورة جديدة أسفل الصورة المركزية في العمود الأوسط.

قم بتحميل صورة جديدة للوحدة.

ثم قم بتحديث إعدادات التصميم على النحو التالي:

• العرض: 40٪
• الهامش: 0 بكسل للأسفل

تباعد العمود

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

• الحشو (سطح المكتب): 12٪ أعلى ، 12٪ أسفل
• الحشو (الكمبيوتر اللوحي): 24٪ أعلى ، 24٪ أسفل

بعد ذلك ، امنح الصورة اليسرى العلوية موقعًا مطلقًا كما يلي:

• الموقف: مطلق
• الموقع: أعلى اليسار

أضف الصورة اليمنى العلوية

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

(في هذه المرحلة ، من المستحسن إضافة ملصقات إلى كل صورة لتسهيل التعرف عليها لاحقًا.)

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

• الموقع: أعلى اليمين

إضافة الصورة اليسرى السفلية

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

افتح إعدادات الصورة المكررة (أسفل اليسار) وقم بتحديث موقع الموضع المطلق:

• الموقع: أسفل اليسار

أضف الصورة اليمنى السفلية

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

• الموقع: أسفل اليمين

أضف تمييز مربع الظل التصميم

لإضافة لهجة تصميم جميلة ، يمكننا إضافة ظل مربع إلى أعلى الصورة اليسرى على النحو التالي:

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الأفقي: -170 بكسل
• مربع الظل الرأسي: 170 بكسل
• لون الظل: rgba (36،57،74،0.07)

أضف لهجة تصميم box-shadow مجانية إلى أعلى الصورة اليمنى على النحو التالي:

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الأفقي: 170 بكسل
• مربع الظل الرأسي: 170 بكسل
• لون الظل: rgba (36،57،74،0.07)

أضف نصًا إلى العمود الأيسر

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

المحتوى

ثم قم بتحديث المحتوى بما يلي:

<h2>Image Bundle</h2>

تصميم نصي

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• خط العنوان 2: مونتسيرات
• نمط خط العنوان 2: TT
• العنوان 2 محاذاة النص: صحيح
• لون نص العنوان 2: # 24394a
• حجم نص العنوان 2: 34 بكسل
• العنوان 2 تباعد الأحرف: 4 بكسل
• ارتفاع خط العنوان 2: 1.3em

ترك مساحة في العمود الأيسر

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

• المساحة المتروكة: 20٪ متبقي

أضف نصًا إلى العمود الأيمن

لإنشاء نص العمود الأيمن ، انسخ وحدة النص في العمود الأيسر ، والصقها في العمود الأيمن. ثم افتح إعدادات النص وقم بتحديث ما يلي:

• العنوان 2 محاذاة النص: يسار

مساحة العمود الأيمن

تمامًا كما فعلنا في العمود الأيسر ، أضف الحشو التالي إلى العمود الأيمن (العمود 3) لإسقاط وحدة النص.

• الحشو: 33٪ أعلى

خلفية القسم

لإنهاء التصميم ، افتح إعدادات القسم وأضف لون الخلفية التالي:

• لون الخلفية: # f7f3ec

ها هي النتيجة حتى الآن.

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

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

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

ثم قم بتكرار العمود مرة أو مرتين لإنشاء أعمدة متعددة مع تضمين حزم الصور.

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

• الحشو: 8٪ أعلى ، 8٪ أسفل

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

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

وها هو على الهاتف المحمول.

تصميم حزمة الصور رقم 3

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

اضف سطر

للبدء ، أضف صفًا مكونًا من عمود واحد إلى قسم عادي.

أضف الصورة الوسطى

داخل الصف ، أضف وحدة صورة.

ثم قم بتحميل صورة إلى وحدة الصورة. نحن نستخدم نفس لقطات الشاشة مقاس 880 بكسل × 1200 بكسل من حزمة تخطيط مدرب اللياقة البدنية التي استخدمناها للتصميم رقم 1.

ضمن علامة تبويب التصميم ، قم بتحديث خيارات التحجيم على النحو التالي:

• العرض: 30٪
• محاذاة الوحدة: مركز

ثم امنح الصورة ظل مربع دقيق:

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الرأسي: -12 بكسل
• مربع قوة طمس الظل: 28 بكسل
• لون الظل: rgba (0،0،0،0.11)

بعد ذلك ، أخرج الهامش السفلي الافتراضي عن طريق ضبطه على 0 بكسل.

• الهامش: 0 بكسل للأسفل

للتأكد من بقاء الصورة فوق الصور الأخرى عند التداخل ، اضبط فهرس Z.

• الفهرس Z: 2

أضف منظور العمود

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

أضف الصورة اليسرى الوسطى

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

لإنشاء الصورة الوسطى اليسرى ، قم بتكرار الصورة الوسطى.

قم بتحديث تسميات الصور في مربع الطبقات حسب الحاجة ، ثم قم بتحديث وحدة الصورة المكررة بصورة جديدة.

افتح إعدادات الصورة وقم بتحديث موقع الموضع المطلق والفهرس Z كما يلي:

• الموقع: أسفل اليسار
• الفهرس Z: 1

ثم أضف خيارات التحويل التالية لوضع الصورة وتدويرها.

• تحويل ترجمة المحور س: 75٪
• تحويل تدوير المحور X: 30deg

أضف الصورة اليسرى

لإنشاء الصورة اليسرى ، قم بتكرار الصورة اليسرى الوسطى التي أنشأناها للتو.

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

• العرض: 20٪

ثم اضبط خيار تحويل الترجمة كما يلي:

• تحويل ترجمة المحور س: 0 بكسل

ثم اضبط مؤشر Z بحيث تظل الصورة خلف الصورة اليسرى الوسطى.

• فهرس Z: 0

أضف الصورة اليمنى الوسطى

بعد ذلك ، سنقوم بإضافة الصورة اليمنى الوسطى إلى حزمة الصور.

لإنشاء الصورة ، افتح قائمة الطبقات المنبثقة. ثم قم بتكرار الصورة اليسرى الوسطى ، واسحب الصورة المكررة أسفل الصورة اليسرى ، ثم قم بتسميتها وفقًا لذلك (على سبيل المثال ، "منتصف الصورة اليمنى").

افتح إعدادات الصورة اليمنى الوسطى وقم بتغيير موقع الموضع المطلق كما يلي:

• الموقع: أسفل اليمين

ثم اضبط خيارات التحويل كما يلي:

• تحويل ترجمة المحور س: -75٪
• تحويل المحور X استدارة: -30deg

أضف الصورة الصحيحة

لإنشاء الصورة الصحيحة (الأخيرة) ، يمكننا تكرار الصورة اليسرى. ثم اسحب الصورة المكررة أسفل الصورة اليمنى الوسطى وقم بتسميتها "الصورة الصحيحة".

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

• الموقع: أسفل اليمين

بعد ذلك ، اضبط دوران التحويل.

• تحويل المحور X استدارة: -30deg

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

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

افكار اخيرة

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

آمل أن يمنحك هذا بعض الإلهام لإنشاء عروض صور مذهلة لمشروعك التالي.

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

هتافات!