كيفية إضافة ظلال مربع من جانب واحد إلى عناصر التصميم في Divi

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

هيا بنا نبدأ.

نظرة خاطفة

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

ابدء

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

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

الجزء 1: تنظيم التخطيط

في هذا التخطيط المُعد مسبقًا ، سنركز انتباهنا على القسم الثاني الذي يحتوي على أسئلة وهمية داخل وحدات تبديل متعددة. بالنسبة للمبتدئين ، دعنا نغير تخطيط عمود الصف إلى ثلاثة أعمدة (1/3 1/3 1/3).

بعد ذلك ، انقل جميع الوحدات في العمود 2 إلى العمود 3 باستخدام ميزة Divi Multiselect. للقيام بذلك ، اضغط باستمرار على Command (أو Control) وانقر على كل وحدة في العمود 2 حتى يتم تحديد الكل. ثم اسحبهم إلى العمود 3.

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

العرض: 80٪
عرض المزراب: 2
معادلة ارتفاعات العمود: نعم

الجزء 2: تصميم وحدات التبديل

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

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

فتح تبديل لون النص: #ffffff
فتح تبديل لون الخلفية: rgba (0،0،0،0)
مغلق تبديل لون النص: #ffffff
مغلق تبديل لون الخلفية: rgba (0،0،0،0)

لون النص الأساسي: #ffffff

الحشو المخصص: 3vw Top ، 3vw Bottom ، 2vw Left ، 2vw Right

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

مربع الظل الوضع الأفقي: -30 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
مربع قوة طمس الظل: 40 بكسل
قوة انتشار الظل المربع: -35 بكسل
لون الظل: rgba (0،0،0،0.4)

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

احفظ التغييرات.

الآن تم تحديث جميع وحدات التبديل الخاصة بك بالتصميم الجديد.

ومع ذلك ، نريد وضع ظل المربع لوحدات التبديل في العمود الأيمن على الجانب الأيمن (وليس اليسار). لتغيير ذلك ، استخدم التحديد المتعدد لتحديد جميع وحدات التبديل في العمود الأيمن وافتح إعدادات العنصر. ثم قم بتغيير الوضع الأفقي من -30 بكسل إلى 30 بكسل على النحو التالي:

مربع الظل الأفقي: 30 بكسل

ثم احفظ الإعدادات.

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

الجزء 3: إضافة ظلال مربعة من جانب واحد إلى الأعمدة

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

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

مربع الظل: 30 بكسل 0 بكسل 70 بكسل -45 بكسل rgba (0،0،0،0.4)

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

30 بكسل هي قيمة الموضع الأفقي
0px هي قيمة الوضع الرأسي
70 بكسل هي قيمة قوة التمويه
-45 بكسل هي قيمة قوة الانتشار
rgba (0،0،0،0.4) هو لون الظل

لقد أعطيت ظل مربع العمود قوة تمويه أكبر من وحدات التبديل لإنشاء عمق أكبر قليلاً.

لإضافة ظل المربع الأيسر إلى العمود 3 ، ستحتاج إلى إضافة CSS التالي إلى العمود 3 الرئيسي العنصر:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

مرة أخرى ، الاختلاف الوحيد بين CSS والمستخدم للعمود 1 هو الموضع الأفقي السلبي.

الجزء 4: إضافة رموز دعاية مغالى فيها إلى العمود 2

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

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

لون الأيقونة: rgba (203،241،252،0.37)
حجم خط الأيقونة: 20vw
الهامش المخصص: 0 بكسل للأسفل

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

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

حجم خط الأيقونة: 9vw
العرض: 40٪
محاذاة الوحدة: صحيح
الهامش المخصص: -2vw

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

الجزء 5: توسيط الوحدات عموديًا في العمود 2

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

margin: auto

سيتم الآن توسيط جميع وحدات الدعاية الدعاية بشكل عمودي داخل العمود 2.

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

لون الخلفية المتدرج الأيسر: # 616ce1
تدرج الخلفية اللون الصحيح: # 3846e0

هذا كل شيء. الآن اكتمل التصميم.

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

ولاحظ كيف يتوسع ظل الصندوق ويتقلص عند فتح وإغلاق مفاتيح التبديل.

افكار اخيرة

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

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

هتافات!