كيفية استخدام المنظور مع خيارات التحويل لتصميم جدران صور ثلاثية الأبعاد في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل أمثلة تصميم 3D Photo Wall مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

ابدء

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

فهم كيفية عمل المنظور مع خيارات التحويل

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

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

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

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

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

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

تصميم جدران الصور ثلاثية الأبعاد العلوية والسفلية

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

إنشاء أعلى جدار صور ثلاثي الأبعاد

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

في العمود 1 ، أضف وحدة صورة مع صورتك الأولى. جميع الصور التي أستخدمها في هذا المثال هي 600 × 800 بكسل.

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

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

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

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

قم بتخصيص القسم لإضافة منظور وإخفاء تجاوز السعة

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

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

لون الخلفية: # 000000
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

لإضافة خاصية المنظور ، أضف CSS المخصص التالي إلى العنصر الرئيسي:

العنصر الرئيسي CSS:

perspective: 400px;

انظر خصائص الفائض على النحو التالي:

الفائض الأفقي: مخفي
الفائض العمودي: مخفي

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

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

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

عرض الحضيض: 1
العرض: 300 بكسل (سطح المكتب والجهاز اللوحي والهاتف)

تحديث إعدادات الصف: Transform Rotate and Origin

الآن استخدم خيار استدارة التحويل لتدوير الصف كما يلي:

تحويل محور Y تدوير: -58deg

يتم تغيير Transform Origin على النحو التالي:

أصل التحويل: المركز السفلي (أو 100٪ 50٪)

تحديث إعدادات الصف: عرض العمود المخصص

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

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

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

width: 25% !important;

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

width: 25% !important;

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

width: 25% !important;

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

width: 25% !important;

هذا كل شيء. تم إنشاء أول جدار صور ثلاثي الأبعاد لدينا.

قم بإنشاء قسم العنوان

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

قبل إضافة وحدة نمطية ، قم بتحديث القسم بخلفية سوداء:

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

ثم أضف نفس خاصية المنظور إلى العنصر الرئيسي للقسم كما فعلنا من قبل على النحو التالي:

ثم أضف وحدة نصية إلى الصف بما يلي:

المحتوى: تصوير

خط النص: Titillium Web
نمط خط النص: TT
لون نص النص: #ffffff
حجم نص النص: 5vw
تباعد حروف النص: 6 بكسل
ارتفاع خط النص: 1em
اتجاه النص: الوسط

الآن ، يمكننا إضافة دوران تحويل إلى وحدة النص. مع تعيين المنظور على الأصل (أو القسم) ، سيحدث التأثير ثلاثي الأبعاد بمجرد تدوير النص.

أضف قيم تدوير التحويل كما يلي:

تحويل المحور X تدوير: -12deg
تحويل تدوير المحور Y: 32deg

نحن الآن جاهزون لإنشاء جدار الصور ثلاثي الأبعاد السفلي.

إنشاء الجدار السفلي للصور ثلاثية الأبعاد (أو الأرضية)

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

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

تحويل تدوير المحور Y: 58deg

أصل التحويل: المركز العلوي

تصميم نهائي

هذا كل شيء! دعنا نتحقق من التصميم النهائي.

سيظل التصميم أيضًا كما هو على الهاتف المحمول أيضًا (بصرف النظر عن التدفق الزائد قليلاً).

إنشاء جدران صور ثلاثية الأبعاد يسار ويمين

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

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

بعد ذلك ، قم بتكرار الصف.

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

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

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

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

(لاحظ أننا نقوم بزيادة قيمة المنظور إلى 700 بكسل لإنشاء مسافة "Z space" أكبر من منظور المستخدم.)

العنصر الرئيسي CSS:

perspective: 700px;
display:flex;

وفويلا! جدراننا في مكانها وجاهزة للدوران.

أضف المزيد من الصور لجدار أعلى

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

تغيير عرض الصفوف الجانبية

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

العرض: 100٪ (سطح المكتب ، الجهاز اللوحي ، الهاتف)
أقصى عرض: 100٪

ثم افعل الشيء نفسه بالنسبة للصف الموجود على الجانب الأيمن.

تدوير الصفوف الجانبية للحصول على تأثير ثلاثي الأبعاد

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

تحويل تدوير المحور X: 90 درجة

بعد ذلك ، افتح إعدادات الصف للصف الموجود على الجانب الأيمن وقم بتحديث ما يلي:

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

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

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

دعنا نتحقق من النتيجة النهائية.

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

تأثير التحويم الإضافي: قم بتأرجح تلك الجدران في العرض عند التحويم!

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

أصل التحويل: يسار الوسط
Transform Rotate X Axis (تحوم): 0deg

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

أصل التحويل: يمين الوسط
تحويل محور X (تحوم): 0deg

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

تأثير تصميم إضافي: اجعل الصور تتفكك في الفضاء

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

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

افكار اخيرة

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

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

هتافات!