كيفية إنشاء وحدات عائمة تتصادم في مساحة ثلاثية الأبعاد في Divi

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

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

نظرة خاطفة

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

قم بتنزيل الوحدات العائمة التي تتصادم في تخطيط الفضاء ثلاثي الأبعاد مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

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

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

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

تنفيذ الدعاية العائمة في تصميم الفضاء ثلاثي الأبعاد في Divi

خلق الصف الأول من الدعاية

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

الآن باستخدام ميزة التحديد المتعدد لـ Divi (اضغط باستمرار على ctrl / cmd أثناء تحديد كل دعاية) ، حدد 5 من الدعاية في العمودين أدناه واسحبها إلى صف العمود الجديد في الجزء العلوي من القسم.

يمكنك الآن حذف الصفين اللذين يأتيان مع التخطيط المسبق أدناه. بعد ذلك ، يجب أن يكون لديك صف واحد من عمود واحد يحتوي على 5 دعاية.

إضافة منظور إلى قسمنا

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

افتح إعدادات القسم وأضف CSS المخصص التالي إلى العنصر الرئيسي:

perspective: 1000px;

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

لمزيد من المعلومات ، تحقق من كيفية عمل المنظور مع خيارات التحويل في Divi.

تخصيص الصف

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

1. نحتاج إلى محاذاة دلالاتنا الدعاية أفقيًا باستخدام "display: flex". سيؤدي ذلك إلى إبقاء تصميمنا متسقًا ومتجاوبًا على جميع الأجهزة (بدلاً من استخدام تخطيط من 5 أعمدة ينكسر على الجهاز اللوحي والهاتف).
2. نحتاج إلى التخلص من هوامش العمود الافتراضية عن طريق تعيين عرض هامش التوثيق على 1.
3. نحتاج إلى استخدام استدارة التحويل لتدوير الصف 45 درجة على المحور X. مع إضافة خاصية المنظور إلى الأصل (القسم) ، يكون للصف وجميع عناصره تأثير ثلاثي الأبعاد الذي نبحث عنه.

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

عرض الحضيض: 1
العرض: 80٪ (كمبيوتر مكتبي) ، 100٪ (كمبيوتر لوحي) ، 100٪ (هاتف)
تحويل محور X: 45 درجة

العمود الرئيسي العنصر CSS:

display: flex;
justify-content: center;

ضبط نمط الدعاية والتباعد

حان الوقت الآن لتعديل محتوى وأسلوب دعاية الدعاية لدينا قليلاً.

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

أولاً ، احذف محتوى الجسم.

ثم أضف لون الخلفية:

لون الخلفية: rgba (20،241،217،0.16)

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

الهامش المخصص (سطح المكتب): 2vw يمين
الهامش المخصص (الجهاز اللوحي والهاتف): 0vw صحيح

حشوة مخصصة: 2٪ أعلى ، 2٪ أسفل ، 3٪ يسار ، 3٪ يمين

بعد ذلك ، أضف حدًا كما يلي:

عرض الحدود: 2 بكسل
لون الحدود: rgba (20،241،217،0.66)

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

إنشاء الصف الثاني من الدعاية

لإنشاء الصف الثاني من الدعاية المغلوطة ، ما عليك سوى تكرار صف 5 دعاية مغالى فيها قمت بتخصيصها للتو.

لإنشاء تأثير الاصطدام ، يمكننا تدوير الصف المكرر في الاتجاه المعاكس (-45 درجة).

افتح الصف المكرر وقم بتحديث ما يلي:

تحويل محور X: -45deg

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

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

حشوة مخصصة: 15٪ علوي ، 15٪ سفلي

استخدام خيارات التحويل لتغيير الحجم والموضع لكل إعلان دعاية بشكل فردي

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

لتسهيل الأمور ، سأقوم بترقيم الدعاية من 1 إلى 10 بدءًا من دعاية في أقصى اليسار في الصف العلوي (Blurb # 1) وتنتهي بالدعاية المغلوطة في أقصى اليمين في الصف الثاني (Blurb # 10).

دعاية رقم 1

لنبدأ بأول دعاية مغالى فيها في الصف العلوي. افتح إعدادات blurb وقم بتحديث ما يلي:

مقياس التحويل (المحور x و y): 90٪

دعاية رقم 2

افتح إعدادات Blurb # 2 وقم بتحديث ما يلي:

مقياس التحويل (المحور x و y): 80٪
تحويل محور X للترجمة: -10٪

دعاية # 3

مقياس التحويل (المحور x و y): 80٪
تحويل محور X للترجمة: 20٪

دعاية # 4

مقياس التحويل (المحور x و y): 85٪
تحويل محور X للترجمة: -30٪

دعاية رقم 5

مقياس التحويل (المحور x و y): 60٪

بمجرد الانتهاء من ذلك ، يجب أن يبدو صفك الأول مثل هذا.

استمر في تخصيص خيارات التحويل للنصوص الدسمة من 6 إلى 10 ، بدءًا من دعاية دعاية رقم 6 في أقصى يسار الصف الثاني.

دعاية # 6

مقياس التحويل (المحور x و y): 60٪
تحويل محور X للترجمة: -40٪
تحويل محور ص للترجمة: -20٪

دعاية # 7

مقياس التحويل (المحور x و y): 90٪
تحويل محور X للترجمة: 20٪

دعاية # 8

مقياس التحويل (المحور x و y): 70٪
تحويل محور X للترجمة: -50٪

دعاية # 9

مقياس التحويل (المحور x و y): 80٪
تحويل محور X للترجمة: -20٪

دعاية # 10

مقياس التحويل (المحور x و y): 70٪
تحويل محور X للترجمة: -60٪

الآن دعنا نتحقق من كيف يبدو الصف الثاني عندما يصطدم بالصف الأول في مساحة ثلاثية الأبعاد.

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

تصميم نهائي

الآن دعنا نتحقق من التصميم النهائي لوحداتنا العائمة ثلاثية الأبعاد.

سطح المكتب

لوح

هاتف

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

افكار اخيرة

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

استمتع بالاستكشاف.

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

هتافات!