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

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

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

هيا بنا نبدأ.

بدأت Gettings

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

أنت الآن جاهز للبدء.

إنشاء تصميم مخطط Blurb # 1

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

قم بإنشاء الصف الأول

للبدء ، أنشئ قسمًا عاديًا ثم أضف تخطيط العمود التالي للصف: 1/2 1/6 1/6 1/6

إضافة وتصميم وحدة النص

في العمود 1/2 على اليسار ، أضف وحدة نصية بالمحتوى التالي:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

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

لون الخلفية: #ffffff
العرض: 500 بكسل
الهامش المخصص (سطح المكتب): -70 بكسل متبقي
الهامش المخصص (الجهاز اللوحي): 20 بكسل متبقٍ
الحشو المخصص: 20 بكسل للأعلى ، 20 بكسل للأسفل

تحديث قسم الحشو

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

الحشو المخصص: 20vw أعلى

إعدادات التحديث للصف الأول

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

عرض الحضيض: 1
الحشو المخصص: 10vw أعلى ، 0 بكسل أسفل
عرض الحدود: 5 بكسل
لون الحدود: #eeeeee

أضف الصف الثاني

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

إنشاء وتصميم الوحدات النمطية

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

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

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

لون الأيقونة: #ffffff
رمز الدائرة: نعم
لون الدائرة: # 5e89fb
خط العنوان: نونيتو
محاذاة نص العنوان: الوسط
حجم نص العنوان: 16 بكسل
الحشو المخصص: 1vw top ، 1vw bottom ، 1vw left ، 1vw right

ثم قم بتحديث الهامش الافتراضي الموجود أسفل أيقونة blurb عن طريق إضافة CSS التالي إلى مربع Blurb Image CSS ضمن علامة التبويب خيارات متقدمة:

margin-bottom: 5px

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

قم بإضافة تأثيرات التحويل إلى الحجم ووضع الدلالات

نحن الآن جاهزون لاستخدام عناصر التحكم في التحويل لوضع الدعاية المغلوطة وتوسيع نطاقها في تصميم فريد.

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

مقياس تحويل المحور س: 242٪
مقياس التحويل Y- المحور: 242٪

تحويل المحور X للترجمة: -96 بكسل
تحويل المحور ص للترجمة: -44 بكسل

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

مقياس التحويل - المحور السيني: 192٪
مقياس التحويل Y- المحور: 192٪

تحويل المحور X للترجمة: -70 بكسل
تحويل محور ص للترجمة: -13 بكسل

بعد ذلك ، قم بتحديث وحدة blurb في العمود 4 من الصف العلوي كما يلي:

مقياس التحويل X- المحور: 158٪
مقياس التحويل Y- المحور: 158٪

تحويل المحور X للترجمة: 33 بكسل
تحويل محور ص للترجمة: -13 بكسل

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

مقياس التحويل المحور السيني: 132٪
مقياس التحويل Y- المحور: 132٪

تحويل المحور X للترجمة: 89 بكسل
تحويل ترجمة المحور ص: 39 بكسل

ثم أعطه لون الخلفية التالي لإنشاء فاصل في حدود الصف لعنصر تصميم دقيق:

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

هذا كل شيء!

بالنسبة لعنصر تصميم إضافي ، يمكنك زيادة عتامة لون الدائرة تدريجيًا على كل من الرموز المستخدمة في التخطيط.

تعديلات المحمول

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

في مشروط إعدادات العناصر ، قم بتحديث ما يلي:

مقياس التحويل المحور السيني: 100٪
مقياس التحويل المحور ص: 100٪

تحويل محور س للترجمة: 0 بكسل
تحويل ترجمة المحور ص: 0 بكسل

سيؤدي هذا إلى استعادة الموضع الأصلي وحجم الدعاية الدعاية على الأجهزة اللوحية وشاشات الهاتف.

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

ها هو التصميم النهائي.

إنشاء تخطيط الوحدة النمطية رقم 2

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

أنشئ العنوان

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

<h2>Our Process</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

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

خط العنوان 2: Nunito
وزن خط العنوان 2: شبه عريض
حجم نص العنوان 2: 50 بكسل
العنوان 2 تباعد الأحرف: 7 بكسل
العرض: 500 بكسل

إنشاء مخطط دعاية مع صف من ستة أعمدة

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

تصميم الوحدة النمطية للدعاية والإعلان

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

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

ثم انقر لاستخدام رمز واختر رمز فحص الدائرة.

امنح فيلم Blurb خلفية بيضاء كما يلي:

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

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

لون الأيقونة: #ffffff
رمز الدائرة: نعم
لون الدائرة: # 3d0dad
خط العنوان: نونيتو
وزن خط العنوان: غامق
نمط خط العنوان: TT
محاذاة نص العنوان: الوسط
تباعد حروف العنوان: 4 بكسل

بعد ذلك ، امنح الدعاية المغطاة ظل مربع على النحو التالي:

Box Shadow: انظر لقطة الشاشة
لون الظل: rgba (0،0،0،0.12)

وأخيرًا ، أضف تأثير تحويل التدوير إلى وحدة blurb:

تحويل تدوير المحور X: -3deg
تحويل تدوير المحور ص: -10deg
تحويل تدوير المحور Z: 31 درجة

هذا يهتم بأول وحدة دعاية مغالى فيها.

تحديث إعدادات الصف

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

عرض المزراب: 2
الحشو المخصص: 11vw أعلى ، 0 بكسل أسفل

سيساعد هذا في استخدام التباعد بين الدلالات في التخطيط.

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

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

افتح الآن إعداد الوحدة النمطية Blurb في العمود 2 وقم بتحديث ما يلي:

لون الدائرة: # 62de9d

مقياس التحويل X- المحور: 120٪
مقياس التحويل Y- المحور: 120٪

تحويل المحور ص للترجمة: -10٪ (تأكد من كتابة قيمة النسبة المئوية هنا)

بعد ذلك ، قم بتحديث وحدة blurb في العمود 3 على النحو التالي:

لون الدائرة: # 5e89fb

مقياس التحويل X- المحور: 140٪
مقياس التحويل Y- المحور: 140٪

تحويل المحور ص للترجمة: -20٪
تحويل المحور السيني للترجمة: 10٪

قم بتحديث الوحدة النمطية في العمود 4 على النحو التالي:

لون الدائرة: # 2a3fc9

مقياس التحويل X- المحور: 160٪
مقياس التحويل المحور ص: 160٪

تحويل المحور ص للترجمة: -30٪
تحويل المحور السيني للترجمة: 30٪

وأخيرًا ، قم بتحديث وحدة blurb في العمود 5 على النحو التالي:

لون الدائرة: # 62de9d

مقياس التحويل المحور السيني: 180٪
مقياس التحويل المحور ص: 180٪

تحويل المحور ص للترجمة: -40٪
تحويل المحور السيني للترجمة: 55٪

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

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

إضافة خاصية المنظور إلى كل عمود

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

أضف CSS التالي إلى مربع Column Main Element CSS لكل عمود من الأعمدة الخمسة على النحو التالي:

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

perspective: 1000px

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

perspective: 1000px

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

perspective: 1000px

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

perspective: 1000px

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

perspective: 1000px

في هذه الحالة ، يكون التغيير دقيقًا للغاية ولكنه يستحق الجهد الإضافي في رأيي.

هنا تصميم تخطيط وحدة دعاية مغالى فيها بدون منظور.

وها هو المنظور المعمول به.

إذا كنت ترغب في جعل الدعاية المغلوطة تظهر بالقرب من المستخدم ، يمكنك تقليل قيمة المنظور. على سبيل المثال ، هذا ما ستبدو عليه الدعاية المغلوطة مع إضافة "منظور: 400 بكسل" إلى كل عمود.

إضافة خلفية فاصل للقسم

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

نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: #dddddd
ارتفاع الحاجز السفلي: 27vw
تكرار المقسم السفلي الأفقي: 0.8x
الفاصل السفلي: أفقي

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

مقياس التحويل المحور السيني: 100٪
مقياس التحويل المحور ص: 100٪

تحويل المحور ص للترجمة: 0٪
تحويل المحور السيني للترجمة: 0٪

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

الآن دعنا نتحقق من النتيجة النهائية لتخطيط الوحدة النمطية.

افكار اخيرة

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

لمزيد من الإلهام ، تحقق من هذه التصميمات الخمسة الإبداعية للوحدات النمطية.

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

هتافات!