6 معارض صور جديدة تم تصميمها مع صفوف Divi 5 المتداخلة (تنزيل مجاني)

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

حتى في Divi 4 ، غالبًا ما تعني هياكل الصور المعقدة تكديس صفوف متعددة وأقسام متخصصة ، وتباعد التغيير والتبديل ، وساعات التخصيص اليدوي. ولكن مع Divi 5 ، يمكنك تخطي كل ذلك.

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، ولكن انتظر قليلاً قبل ترحيل المواقع الموجودة.

استخدام الصفوف المتداخلة لبناء تخطيطات معقدة

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

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

ما هي الصفوف المتداخلة؟

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

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

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

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

تعلم كل شيء عن صفوف Divi 5 المتداخلة

ما الذي يجعل الصفوف المتداخلة مختلفة؟

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

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

6 تخطيطات معرض الصور يمكنك البناء مع صفوف متداخلة

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

التصميم 1: معرض CTA المضمن

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

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

كيفية بنائه

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

هذا التصميم فريد من نوعه في كيفية استخدام الصفوف المتداخلة داخل كل قسم بصري. تتيح الصفوف المتداخلة لـ Divi 5 المرونة الهيكلية ، وخلط تنسيقات الصف داخل عمود واحد ووضعها تحت عناصر سياقية.

التصميم 2: معرض التركيز المنقسمة

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

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

كيفية بنائه

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

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

التصميم 3: معرض Project Spotlight

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

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

كيفية بنائه

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

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

التصميم 4: معرض SCROLL DESLE

تم تصميم تخطيط معرض Scroll Delect لرواية القصص المرئية التي تتكشف كمستخدمين تمرير. يتميز كل قسم بصورة كبيرة مقترنة مع صور داعمة أصغر (تم إنشاؤها عن طريق تعشيش صفوف متعددة معًا).

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

كيفية بنائه

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

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

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

التصميم 5: معرض المنتج المتداخل

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

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

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

كيفية بنائه

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

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

التصميم 6: شبكة محفظة غير متماثلة

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

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

كيفية بنائه

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

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

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

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

أهم النصائح لبناء معارض الصور التفاعلية

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

1. إنشاء آثار التحويم

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

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

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

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

2. استخدم سمات النسخ/لصق لتطبيق الأنماط على الصور بسرعة

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

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

على سبيل المثال ، قم بتخصيص عنصر واحد ونسخ ولصق سماته على العناصر الأخرى لتكرار النمط.

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

3. استخدم المشبك لإنشاء صور سائلة وسريعة الاستجابة

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

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

على سبيل المثال ، يخبر المشبك (1200px ، 30VW ، 1400px) Divi أبدًا أن يذهب إلى ما يقل عن 1200 بكسل ، وتوسيع نطاقه إلى 30 ٪ من عرض ميناء العرض ، ولكنه أقامه عند 1400 بكسل.

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

4. معاينة وتعديل للأجهزة المختلفة

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

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

قم بتنزيل تخطيطات المعرض مجانًا

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

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

تنزيل مجانًا

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

تحميل

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

بناء معارض الصور المتداخلة (وأكثر) مع Divi 5

تبسيط صفوف Divi 5 المتداخلة تخطيطات معقدة من خلال السماح لك بوضع صفوف داخل الصفوف. كما أنها توفر قابلية عش لا حصر لها والتحكم الدقيق في التصميمات الخاصة بك.

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

مع استمرارنا في تحسين Divi 5 ، يمكنك توقع المزيد من الميزات التي تعزز قدرات التصميم الخاصة بك وتبسيط سير العمل الخاص بك.

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، ولكن انتظر قليلاً قبل ترحيل المواقع الموجودة.