طرق مبتكرة للجمع بين تأثيرات التمرير بالتناوب مع العناصر الدائرية في Divi

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

يتمتع!

نظرة خاطفة

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

قم بتنزيل Rotating Circular Elements Blurb Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

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

إنشاء مخطط دعاية مع تدوير العناصر الدائرية على التمرير في Divi

مضيفا الصف

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

هامش القسم المؤقت

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

إنشاء تصميم الدعاية الدائرية للعنصر الدائري رقم 1

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

إليك كيفية بنائه.

أضف وحدة Blurb

في العمود 1 ، أضف وحدة دعاية مغالى فيها.

محتوى Blurb 1

افتح إعدادات وحدة blurb وقم بتحديث محتوى الجسم بما يلي:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

ثم أضف أيقونة من اختيارك لاستبدال الصورة الافتراضية.

إعدادات تصميم Blurb 1

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

• لون الخلفية: # 121212
• لون الأيقونة: # 41828d
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 75 بكسل
• محاذاة النص: مركز
• خط العنوان: أوزوالد
• نمط خط العنوان: TT
• لون نص العنوان: #ffffff
• حجم نص العنوان: 22 بكسل
• لون النص الأساسي: #ffffff

لجعل الدعاية الدعاية دائرية ، قم بتحديث الحجم والزوايا الدائرية على النحو التالي:

• العرض: 300 بكسل
• العرض الأقصى: 300 بكسل
• المساحة المتروكة: 25 بكسل للأعلى ، 25 بكسل للأسفل ، 25 بكسل لليسار ، 25 بكسل لليمين
• زوايا دائرية: 50٪

إن الجمع بين العرض والارتفاع المتساوي مع الزوايا الدائرية هو ما يجعل الدعاية الدائرية دائرية.

ثم قم بتحديث الموضع مع الإزاحة.

• الموقف: نسبي
• الإزاحة العمودية: 25 بكسل
• الإزاحة الأفقية: 25 بكسل
• الفهرس Z: 1

سيؤدي هذا إلى توسيط الدعاية المغلوطة داخل الفواصل التي سنضيفها لاحقًا. سوف يتأكد مؤشر Z من أن الدعاية المغلوطة تقع فوق الفواصل الأخرى أيضًا.

بعد ذلك ، أضف تأثير التمرير الدوار إلى الدعاية المغلوطة.

ضمن علامة التبويب "تأثيرات مستديرة" ...

• تمكين التدوير: نعم
• بدء الدوران: 45 درجة (عند 0٪ منفذ عرض)
• دوران متوسط: 0 درجة (عند منفذ عرض 40٪ -60٪)
• إنهاء الدوران: -45 درجة (عند منفذ عرض 100٪)

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

أضف مقسم دائري # 1

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

أضف وحدة فاصل أسفل وحدة دعاية مغالى فيها.

إعدادات الفاصل 1

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

• إظهار المقسم:
• لون الخلفية المتدرج الأيسر: # 311847
• تدرج الخلفية اللون الصحيح: # ec4067
• موقف البداية: 50٪
• موقف النهاية: 50٪

والآن نجعلها دائرية على النحو التالي:

• العرض: 350 بكسل
• العرض الأقصى: 350 بكسل
• الارتفاع: 350 بكسل
• زوايا دائرية: 50٪

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

• الموقف: مطلق

إذا كان الحاجز أعلى الدعاية المغطاة ، فتأكد من تحديث فهرس الدعاية الدسمة إلى 1.

بعد ذلك ، أضف تأثيرات التمرير التالية إلى الحاجز:

تحت علامة تبويب تأثير التدوير ...

• تمكين التدوير: نعم
• بدء الدوران: 0 درجة (عند 0٪ منفذ عرض)
• دوران متوسط: 45 درجة (عند منفذ عرض بنسبة 50٪)
• إنهاء الدوران: -180 درجة (عند منفذ عرض 100٪)

إضافة مقسم دائري 2

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

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

بالنسبة لهذا الحاجز ، دعنا نعطيه لون خلفية متدرج مختلفًا على النحو التالي:

• تدرج الخلفية ، اللون الأيسر: rgba (160،26،125،0.5)
• تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)

ملاحظة: من المهم استخدام ألوان شبه شفافة هنا من أجل كشف الخلفية خلفها. هذا يخلق مزيجًا جميلًا من الألوان.

بعد ذلك ، قم بتحديث تأثيرات التمرير على النحو التالي:

ضمن علامة التبويب تأثيرات التدوير ...

• دوران متوسط: 90 درجة (عند منفذ عرض بنسبة 50٪)
• إنهاء التدوير ز: 180 درجة (عند منفذ عرض 100٪)

إضافة مقسم دائري 3

استمر في نفس العملية لإنشاء الحاجز الثالث والأخير عن طريق تكرار الفاصل 2.

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

بالنسبة إلى هذا الحاجز ، دعنا نمنحه أيضًا لون خلفية متدرجًا مختلفًا على النحو التالي:

• تدرج الخلفية اللون الأيسر: rgba (255،255،255،0)
• تدرج الخلفية اللون الأيمن: rgba (41،196،169،0.5)

ثم قم بتحديث تأثيرات التمرير على النحو التالي:

ضمن علامة التبويب تأثيرات التدوير ...

• دوران متوسط: 180 درجة (عند منفذ عرض بنسبة 50٪)
• إنهاء التدوير g: 360 درجة (عند منفذ عرض 100٪)

ضمن علامة التبويب "التوسع لأعلى ولأسفل" ...

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 110٪ (عند 0٪ منفذ عرض)
• مقياس متوسط: 110٪ (عند 50٪ منفذ عرض)
• مقياس النهاية: 100٪ (عند 100٪ منفذ عرض)

إنشاء تصميم الدعاية الدائرية للعنصر الدائري رقم 2

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

تحديث تصميم الوحدة النمطية Blurb

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

هيريس كيفية القيام بذلك.

افتح إعدادات وحدة blurb في العمود 2 وقم بتحديث ما يلي:

• الخلفية: #ffffff

ثم قم بتغيير لون العنوان والنص الأساسي إلى اللون الأسود.

• لون نص العنوان: # 000000
• لون النص الأساسي: # 000000

ثم أضف وضع المزج التالي:

• وضع المزج: الشاشة

تحديث تأثيرات التمرير للمقسّم 1

افتح إعدادات وحدة التقسيم مباشرةً أسفل وحدة blurb في العمود 2 وقم بتحديث تأثيرات التمرير التالية:
ضمن علامة تبويب تأثيرات Scaling Up and Down ...

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 100٪ (عند 0٪ منفذ عرض)
• النطاق المتوسط: 120٪ (عند 40٪ -60٪ من منفذ العرض)
• مقياس النهاية: 100٪ (عند 100٪ منفذ عرض)

سيؤدي هذا إلى زيادة حجم الحاجز بنسبة 20٪ في منتصف الطريق أثناء قيام المستخدم بالتمرير لأسفل الصفحة.

إنشاء تصميم الدعاية الدائرية للعنصر الدائري رقم 3

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

هيريس كيفية القيام بذلك.

عمود مكرر 1

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

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

أولاً ، دعنا نضيف وضع الدمج المضاعف لإظهار ألوان الفاصل من خلال النص الأبيض على النحو التالي:

• وضع المزج: متعدد

ثم قم بتحديث لون الرمز إلى الأبيض أيضًا.

• لون الأيقونة: #ffffff

تحديث إعدادات Divider 3

الآن دعنا نخرج تأثير التمرير المتدرج على الحاجز الأخير (الثالث) في العمود 3.
افتح إعدادات الحاجز الثالث وقم بتحديث ما يلي:

ضمن علامة التبويب "تأثيرات التحجيم لأعلى ولأسفل" ...

• تمكين التحجيم لأعلى ولأسفل: لا

اضبط موضع العمود 2 على الهاتف المحمول

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

افتح إعدادات العمود 2 وقم بتحديث ما يلي:

Transform Scale X Axis: 40٪ (على الكمبيوتر اللوحي) ، 15٪ (على الهاتف)

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

هذا كل شيء! دعنا نتحقق من النتيجة النهائية على صفحة مباشرة.

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

هذا هو التصميم على الجهاز اللوحي.

وها هو على الهاتف.

افكار اخيرة

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

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

هتافات!