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

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

هيا بنا نبدأ!

نظرة خاطفة

قم بتنزيل 3D Sign Post Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

1. تأكد من تثبيت Divi Theme وتنشيطه على موقع WordPress الخاص بك.
2. إذا كنت ترغب في إنشاء صورة المنشور الخاصة بك ، فستحتاج إلى محرر صور مثل Photoshop أو Gimp أو Sketch. أو يمكنك استخدام الصورة المقدمة في تنزيل التخطيط المجاني لهذا التصميم أعلاه.
3. بخلاف ذلك ، سنبني كل شيء من نقطة الصفر في الواجهة الأمامية لـ Divi Builder.

إنشاء الصورة للتوقيع

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

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

في Photoshop ، انقر لإنشاء مستند جديد بارتفاع وعرض مخصصين 25 بكسل.

اضبط اللون الأمامي على اللون الأسود (# 000000) أو أي لون تريده.

ثم حدد أداة دلو الطلاء وانقر داخل الطبقة المربعة الفارغة لطلاء المربع الأسود.

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

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

بمجرد أن تكون جاهزًا ، تأكد من إنشاء صفحة جديدة ، وإعطائك عنوانًا للصفحة ، ونشر Divi Builder في الواجهة الأمامية. حدد الخيار "البناء من الصفر".

قماشك الفارغ في انتظارك!

الآن قم بإنشاء قسم عادي جديد بصف من عمود واحد.

تخصيص الصف

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

صورة الخلفية: [أدخل صورة مربعة مخصصة للنشر]
حجم صورة الخلفية: الحجم الفعلي
تكرار صورة الخلفية: كرر Y (عموديًا)

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

عرض الحضيض: 1
العرض الأقصى: 980 بكسل
الحشو المخصص: 2vw top، 2vw bottom

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

perspective: 1000px;

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

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

إنشاء علامة مع وحدة دعاية مغالى فيها

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

ثم افتح إعدادات دعاية مغالى فيها وقم بتحديث محتوى الدعاية الدعاية كالتالي:

تقليل المحتوى الوهمي ليشمل سطرين فقط من النص.

استخدام الأيقونة: نعم
الرمز: السهم الأيسر (انظر لقطة الشاشة)

لون الخلفية: # 1a233f

لون الأيقونة: # 9eb3c2
وضع الصورة / الرمز: اليسار
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 80 بكسل

اتجاه النص: الوسط
خط العنوان: عرض Playfair
لون نص العنوان: # 9eb3c2
حجم نص العنوان: 38 بكسل (سطح المكتب) ، 26 بكسل (هاتف)
العرض الأقصى: 600 بكسل
محاذاة الوحدة: المركز
حشوة مخصصة: 5٪ علوي ، 5٪ سفلي ، 5٪ يسار ، 5٪ يمين

الزوايا الدائرية: 20 بكسل

عرض الحدود: 3 بكسل
لون الحدود: # 21335e

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

تحويل تدوير المحور X: 20deg

كرر الصف لمزيد من العلامات

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

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

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

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

تحويل المحور X تدوير: 40deg

تغيير اتجاه الإشارة الثانية

تشير جميع الأسهم الآن في نفس الاتجاه. لتغيير الاتجاه من اليسار إلى اليمين ، نحتاج إلى تحديث إعدادات وحدة blurb قليلاً.

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

الرمز: السهم الأيمن (انظر لقطة الشاشة)

اتجاه النص: يسار

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

direction: rtl;

الآن يتم عكس محتوى الدعاية الدعاية ولديك علامة تشير إلى اتجاه جديد!

قم بتدوير الإشارات إلى الحالة الأصلية عند التحويم

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

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

تحويل محور X (تحوم): 0deg

حفظ الإعدادات وهذا كل شيء!

الآن تحقق من التصميم والوظائف حتى الآن.

تخصيص قسمنا بصورة خلفية

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

افتح القسم وأضف صورة خلفية جديدة. (أنا أستخدم صورة من حزمة تخطيط الوكالة الخاصة بنا)

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

استخدام تأثير المنظر: نعم
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

افكار اخيرة

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

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

هتافات!