استكشاف كيفية إنشاء وتحريك أشكال CSS في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

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

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

استكشاف كيفية إنشاء أشكال CSS بالرسوم المتحركة في Divi

هيكل الصف والعمود

أولاً ، أضف صف عمود ثلثي وثلثين إلى القسم.

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

• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 95٪
• العرض الأقصى: 900 بكسل

ملاحظة: هذه الإعدادات ضرورية لإعداد تصميمنا. على سبيل المثال ، هيكل عمود الثلث والثلثين مدمجًا مع صف يبلغ عرضه الأقصى 900 بكسل بدون أي هوامش (عرض التوثيق 1) ، دعنا نعرف أن العمود الأيسر سيكون عرضه 300 بكسل بالضبط. علاوة على ذلك ، إذا احتفظت بتصميمي ضمن عمود عرض 300 بكسل هذا ، فيمكنني أيضًا التأكد من أنه سيبدو جيدًا على الأجهزة اللوحية والأجهزة المحمولة أيضًا.

إضافة فاصل وحدة Divider Module

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

في هذه المرحلة ، يجب عليك فتح نموذج عرض الطبقات لإدارة الطبقات / الوحدات للمضي قدمًا والتي يمكن العثور عليها في قائمة الإعدادات الخاصة بـ Divi Builder.

افتح إعدادات الحاجز وقم بتحديث ارتفاع الحاجز كما يلي:

• إظهار المقسم:
• الارتفاع: 150 بكسل

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

إنشاء أول شكل CSS باستخدام خيارات الحدود

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

لإنشاء شكل CSS ، قم بتكرار وحدة التقسيم التي تم إنشاؤها مسبقًا بالفعل.

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

• العرض: 0 بكسل
• الارتفاع: 0 بكسل

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

• لون الحدود: rgba (245،44،143،0.5)
• عرض الحد العلوي: 150 بكسل
• عرض الحد الأيسر: 150 بكسل
• لون الحد الأيسر: شفاف

ملاحظة: سيساعد منح لون الحد شبه شفافية في الكشف عن الأشكال المتداخلة لعنصر تصميم إضافي.

من الجيد أيضًا تسمية هذا الحاجز الجديد "بالشكل 1" لتسهيل التعرف عليه لاحقًا.

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

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

• الموقف: مطلق
• موقع Postion: أعلى اليمين (افتراضي)

ملاحظة: من المهم الاحتفاظ بموقع الموضع في أعلى اليمين لأن أي مواقع أخرى تضيف تحديدًا مركزيًا (مثل المركز العلوي أو المركز) ستتعارض مع خيارات التحويل التي سنضيفها إلى أشكال CSS لاحقًا.

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

إنشاء الشكل 2 بالرسوم المتحركة التمرير

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

ثم قم بتسمية "الشكل 2".

افتح إعدادات حاجز "الشكل 2" وأضف تأثير التحويل الدوار التالي:

• تأثيرات تحويل التمرير: تدوير
• تمكين التدوير: نعم
• بدء الدوران: 0 درجة (عند 30٪)
• دوران متوسط: 45 درجة (عند 45٪)
• دوران النهاية: 90 درجة (عند 60٪)

إنشاء الشكل 3 بالرسوم المتحركة التمرير

قم بتكرار وحدة فاصل "الشكل 2" وقم بتسمية "الشكل 3" المكرر.

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

• منتصف الدوران: 90 درجة
• دوران النهاية: 180 درجة

لإنشاء الشكل الأخير (الرابع) ، قم بتكرار وحدة فاصل الشكل 3 وقم بتسميتها "الشكل 4".

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

• منتصف الدوران: 180 درجة
• الدوران الختامي: 270 درجة

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

اختبار الرسوم المتحركة التمرير

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

• الهامش: 80vh أعلى ، 80vh أسفل

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

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

إضافة عنوان وهمي إلى العمود الأيمن (اختياري)

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

عمود CSS مخصص

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

display:flex;
flex-direction:column;
align-items:center;

بمجرد وضع CSS في مكانه ، أضف وحدة نصية جديدة إلى العمود 2.

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

<h2>elegant design</h2>

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

• خط العنوان 2: بوبينز
• العنوان 2 محاذاة النص: افتراضي (سطح المكتب) ، المركز (الكمبيوتر اللوحي والهاتف)
• حجم نص العنوان 2: 55 بكسل (سطح المكتب) ، 45 بكسل (الجهاز اللوحي) ، 35 بكسل (الهاتف)
• العرض: 100٪

أثناء وجودنا فيه ، امض قدمًا وأضف تأثير تحويل التمرير التالي "الحركة الأفقية" إلى النص على النحو التالي:

• تأثيرات تحويل التمرير: الحركة الأفقية
• تمكين الحركة الأفقية: نعم
• تعويض البدء: 2 (عند 20٪)
• تعويض متوسط: 1 (عند 35٪)
• إزاحة النهاية: -0.6

ثم افتح علامات التبويب المتجاوبة وقم بتحديث إزاحة النهاية على النحو التالي:

• إزاحة النهاية (الجهاز اللوحي والهاتف): 0

استكشاف الرسوم المتحركة لشكل المثلث الأيمن العلوي

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

تتمثل إحدى الطرق السهلة للقيام بذلك في استخدام التحديد المتعدد لتحديد جميع أشكال CSS الأربعة (التي تم إنشاؤها باستخدام وحدات المقسم).

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

ثم حدد علامة تبويب التصميم وافتح علامة تبويب أصل التحويل. ضع طريقة عرض الطبقات وشروط إعدادات العنصر على اليسار بحيث يمكنك رؤية التغييرات بصريًا في Divi Builder.

استكشاف الرسوم المتحركة لتصميم شكل CSS المثلث التصاعدي

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

في هذا المثال التالي ، سنقوم بإنشاء شكل CSS مثلث صاعد (تقنيًا مثلث متساوي الساقين).

للقيام بذلك ، تأكد من التحديد المتعدد لجميع الأشكال وتحديث أنماط الحدود لكل منها على النحو التالي:

• عرض الحد الأيمن: 100 بكسل
• لون الحد الأيمن: شفاف
• عرض الحد السفلي: 100 بكسل
• لون الحد السفلي: rgba (245،44،143،0.5)
• عرض الحد الأيسر: 100 بكسل
• لون الحد الأيسر: شفاف

قم بتحديث Transform Origin لاستكشاف تصميمات الرسوم المتحركة الجديدة للتمرير

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

استكشاف الرسوم المتحركة لتصميم شكل Teardrop CSS

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

للقيام بذلك ، تأكد من التحديد المتعدد لجميع الأشكال وتحديث أنماط الحدود لكل منها على النحو التالي:

• الزوايا الدائرية: 0 بكسل أعلى اليمين ، 50٪ أعلى اليمين ، 50٪ أسفل اليمين ، 50٪ أسفل اليسار
• عرض الحد السفلي: 150 بكسل
• لون الحد السفلي: rgba (245،44،143،0.5)
• عرض الحد الأيسر: 150 بكسل
• لون الحد الأيسر: شفاف

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

استكشاف القطاع (أو شريحة البيتزا) الرسوم المتحركة لتصميم شكل CSS

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

للقيام بذلك ، تأكد من التحديد المتعدد لجميع الأشكال وتحديث أنماط الحدود لكل منها على النحو التالي:

• الزوايا الدائرية: 0 بكسل أعلى اليمين ، 0 بكسل أعلى اليمين ، 50٪ أسفل اليمين ، 50٪ أسفل اليسار
• عرض الحد الأيمن: 75 بكسل
• لون الحد الأيمن: شفاف
• عرض الحد السفلي: 75 بكسل
• لون الحد السفلي: rgba (245،44،143،0.5)
• عرض الحد الأيسر: 75 بكسل
• لون الحد الأيسر: شفاف

ثم اضبط أصل التحويل لاستكشاف تصميمات الرسوم المتحركة المختلفة للتمرير.

استكشاف الرسوم المتحركة لتصميم شكل شبه منحرف CSS

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

للقيام بذلك ، تأكد من التحديد المتعدد لجميع الأشكال وتحديث أنماط الحدود لكل منها على النحو التالي:

• الزوايا الدائرية: 0 بكسل
• عرض الحد الأيمن: 100 بكسل
• لون الحد الأيمن: شفاف
• عرض الحد السفلي: 100 بكسل
• لون الحد السفلي: rgba (245،44،143،0.5)
• عرض الحد الأيسر: 100 بكسل
• لون الحد الأيسر: شفاف

ثم قم بتحديث عرض الأشكال / الوحدات كما يلي:

• العرض: 100 بكسل

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

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

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

افكار اخيرة

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

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

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

هتافات!