كيفية إنشاء صورة مجمعة تفاعلية باستخدام خيارات موقف Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف JSON إلى Divi Builder.

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

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

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

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

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

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

تحسين الصف والعمود

للبدء ، قم بإنشاء صف من عمود واحد.

إعدادات الصف

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

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

ضبط ارتفاع العمود

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

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

height: 40vw;

ضمن علامة تبويب الهاتف ، قم بإعادة الارتفاع إلى حالته الافتراضية لأننا نقوم أيضًا بتغيير الصور مرة أخرى إلى موضع ثابت على الهاتف. أضف CSS المخصص التالي إلى علامة تبويب الهاتف:

height: auto !important;

إضافة نص العنوان

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

محتوى وحدة النص

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

<h2>Recent Work</h2>

إعدادات وحدة النص

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

• خط العنوان 2: لايملايت
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 24005b
• حجم نص العنوان 2: 5vw (سطح المكتب والجهاز اللوحي) ، 50 بكسل (هاتف)
• العرض: 100٪
• أقصى عرض: 35vw (سطح المكتب والجهاز اللوحي) ، 100٪ (الهاتف)
• الموضع: مطلق (سطح المكتب) ، افتراضي (الهاتف)
• الأوفست الأفقي (سطح المكتب): 35vw

إنشاء الصور وتحديد مواضعها

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

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

أولاً ، أضف وحدة صورة ضمن وحدة النص.

ثم قم بتحميل صورة إلى الوحدة النمطية واختر خيار فتح الصورة في Lightbox. الآن ستظهر الصورة في lightbox عند النقر.

تحجيم الصورة عند التمرير

بالإضافة إلى تفاعل Lightbox ، أضف تأثير تمرير يؤدي إلى زيادة حجم الصورة قليلاً. للقيام بذلك ، قم بتحديث خيار التحويل التالي:

• مقياس التحويل (تحوم): 115٪

تحديد الموضع المطلق مع أولوية مؤشر Z على التحويم

لتحديد موضع صورتنا ، سنستخدم الموضع المطلق بوحدات طول vw. قم بتحديث خيارات المركز على النحو التالي:

على سطح المكتب (والكمبيوتر اللوحي)

• المركز: مطلق
• الموقع: أعلى اليسار
• الإزاحة العمودية: 5vw
• الإزاحة الأفقية: -2vw

علي الهاتف

• الوظيفة: الافتراضي

على التحويم

• الفهرس Z: 2

تصميم الصور وإعدادات الاستجابة

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

• محاذاة الصورة: يسار (سطح المكتب) ، مركز (هاتف)
• العرض: 75٪ (هاتف)
• أقصى عرض: 20vw (سطح المكتب والجهاز اللوحي) ، 100٪ (الهاتف)
• الهامش (الهاتف): 30 بكسل للأسفل
• Box Shadow: انظر لقطة الشاشة
• التشبع: 0٪ (سطح المكتب) ، 100٪ (تحوم)

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

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

ها هي العملية ...

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

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

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

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

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

• الإزاحة العمودية: 10.06 فولكس فاجن
• الإزاحة الأفقية: 16.51 فولكس فاجن
• العرض الأقصى: 18 فولكس فاجن

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

• الإزاحة العمودية: 24.25vw
• الإزاحة الأفقية: 7.13vw
• العرض الأقصى: 20vw

تحديثات الصورة رقم 4

• الإزاحة العمودية: 17.69vw
• الإزاحة الأفقية: 31.91vw
• العرض الأقصى: 18vw

تحديثات الصورة رقم 5

• الإزاحة العمودية: 12vw
• الإزاحة الأفقية: 46.82vw
• العرض الأقصى: 15vw

تحديثات الصورة # 6

• الإزاحة العمودية: 19.13vw
• الإزاحة الأفقية: 58.84vw
• العرض الأقصى: 12vw

تحديثات الصورة # 7

• الإزاحة العمودية: 28.24vw
• الإزاحة الأفقية: 54.2vw
• العرض الأقصى: 10vw

تحديثات الصورة رقم 8

• الإزاحة العمودية: 32.5vw
• الإزاحة الأفقية: 74.04vw
• العرض الأقصى: 8vw

تحديثات الصورة رقم 9

• الإزاحة العمودية: 1.01vw
• الإزاحة الأفقية: 75.5vw
• العرض: 27vw
• العرض الأقصى: 27vw

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

لللمسة الأخيرة ، أضف صورة خلفية إلى القسم وتكون قد انتهيت!

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

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

هذا هو التصميم على شاشة الهاتف.

تغيير نقطة الموقع للصور لتصميمات تخطيط مختلفة

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

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

ثم يمكنك تغيير الموقع لكل زاوية من الزوايا الأربع لهياكل مختلفة من التخطيط.

موقع الزاوية اليمنى العليا

موقع الزاوية اليسرى السفلية

موقع الزاوية اليمنى السفلية

افكار اخيرة

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

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

هتافات!