تزيين صفحتك بتحويل الأشكال عند التمرير باستخدام Divi

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

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

دعنا نذهب اليها!

معاينة

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

مثال 1

المثال رقم 2

قم بتنزيل تراكبات الصور المُشكلة

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

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

تنزيل مجاني

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

تحميل

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

لنبدأ في الإنشاء!

إضافة قسم جديد

لون الخلفية

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

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

تجاوز

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

overflow: hidden;

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

إضافة وحدة الصورة إلى الصف

تحميل تراكب صورة على شكل

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

لون الخلفية الافتراضي

انتقل إلى إعدادات الخلفية لوحدة الصورة وأضف لون الخلفية الافتراضي التالي:

• لون الخلفية: # 6a00ff

لون الخلفية تحوم

قم بتغيير لون الخلفية عند التمرير باستخدام رمز اللون التالي:

• لون الخلفية: # ffa216

خلفية متدرجة

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

• اللون 1: # ff2841
• اللون 2: rgba (255،255،255،0)
• اتجاه التدرج: 168 درجة
• موضع النهاية: 68٪

تحجيم

انتقل إلى علامة تبويب التصميم وقم بتمكين خيار "فرض العرض الكامل".

• فرض عرض كامل: نعم

تباعد

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

• الهامش العلوي: -22vw (سطح المكتب والكمبيوتر اللوحي) ، 0vw (الهاتف)

تدوير التحويل الافتراضي

يمكننا الآن البدء في تحويل الوحدة! أضف إعدادات تدوير التحويل الافتراضية التالية إلى وحدة الصورة:

• المركز: 359deg

تحوم تحويل استدارة

وقم بتغيير هذه القيم عند التمرير لإنشاء شكل تحويل.

• اليسار: 250 درجة
• المركز: 320 درجة

معرف CSS

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

الانتقالات

أخيرًا وليس آخرًا ، نقوم بإنشاء انتقال سلس عن طريق زيادة مدة الانتقال في علامة التبويب "خيارات متقدمة".

• مدة الانتقال: 950 مللي ثانية

أضف وحدة نصية # 1 إلى الصف

أضف محتوى H2

الوحدة التالية التي نحتاجها هي وحدة نصية. أضف بعض محتوى H2 من اختيارك.

إعدادات نص H2

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات نص H2.

• خط العنوان 2: Didact Gothic
• وزن خط العنوان 2: غامق
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2: 7vw
• ارتفاع خط العنوان 2: 0.9em

تباعد

قم بإنشاء تداخل بين هذه الوحدة ووحدة الصورة باستخدام بعض قيم الهامش المخصصة.

• الهامش العلوي: -68vw
• الهامش السفلي: 8vw
• الهامش الأيسر: 29vw
• الهامش الأيمن: 29vw

أضف وحدة نصية رقم 2 إلى الصف

إضافة محتوى

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

إعدادات النص

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات النص.

• خط النص: Open Sans
• لون النص: #ffffff
• حجم النص: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• ارتفاع خط النص: 1.8em
• اتجاه النص: الوسط

تباعد

أضف بعض قيم الهامش المخصصة أيضًا.

• الهامش السفلي: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)
• الهامش الأيسر: 30vw (سطح المكتب) ، 10vw (كمبيوتر لوحي وهاتف)
• الهامش الأيمن: 30vw (سطح المكتب) ، 10vw (الجهاز اللوحي والهاتف)

أضف وحدة المقسم إلى الصف

الرؤية

الوحدة التالية والأخيرة التي نحتاجها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير لون الحاجز.

• اللون: #ffffff

تحجيم

قم بتعديل قيم التحجيم أيضًا.

• وزن الحاجز: 7 بكسل
• العرض: 15٪
• محاذاة الوحدة: المركز

تباعد

وإضافة بعض الحشو السفلي المخصص.

• الهامش السفلي: 5vw

استنساخ قسم كامل

إلى المثال الثاني! استنساخ القسم الذي أكملته للتو.

تغيير وحدة الصورة

تحميل تراكب صورة على شكل جديد

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

تغيير لون الخلفية الافتراضي

بعد ذلك ، انتقل إلى إعدادات الخلفية في وحدة الصورة وقم بتغيير لون الخلفية الافتراضي.

• لون الخلفية: # 2d007c

تغيير لون خلفية التمرير

قم بتغيير لون خلفية التمرير أيضًا.

• لون الخلفية: # 008089

تغيير خلفية التدرج

جنبا إلى جنب مع خلفية متدرجة.

• اللون 1: # 0c0c0c
• اللون 2: rgba (255،255،255،0)
• اتجاه التدرج: 168 درجة
• موضع النهاية: 68٪

تغيير إعدادات تدوير التحويل الافتراضية

نحن أيضًا نغير تأثير التحويل. انتقل إلى إعدادات التحويل وقم بتغيير قيم تدوير التحويل الافتراضية.

• اليسار: 270 درجة
• المركز: 359deg

قم بتغيير إعدادات Hover Transform Rotate

قم بتعديل هذه القيم نفسها عند التمرير.

• اليسار: 192 درجة
• المركز: 280deg
• اليمين: 15 درجة

إضافة رمز مخصص إلى الصفحة

افتح إعدادات الصفحة

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

أضف كود CSS

ثم انتقل إلى علامة التبويب خيارات متقدمة وأضف كود CSS التالي.

.hover-state:hover {
z-index: -99; }

نحن نستخدم فئة CSS التي خصصناها للأقسام خلال البرنامج التعليمي.

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.

مثال 1

المثال رقم 2

افكار اخيرة

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