Divi: كيفية إنشاء قائمة عجلة دوارة عند التمرير

هل ترغب في إنشاء قائمة Divi أصلية على شكل عجلة دوارة عند التمرير؟

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

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

مسح

قبل الدخول في هذا البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة التي نريد تحقيقها.

تحميل DIVI Now !!!

قم بإنشاء صفحة جديدة باستخدام Divi Builder

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

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

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

تصميم عجلة القائمة الدوارة في Divi

إنشاء قسم وسطر 1

في القسم الموجود افتراضيًا ، أضف صفًا بهيكل العمود التالي.

ثم أضف وحدة نصية إلى السطر بالمحتوى التالي.

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

• خط النص: Share Tech
• تباعد حروف النص: 1 بكسل
• حجم نص العنوان 2: 8vw

أضف السطر 2 لبناء العجلة

بعد ذلك ، نحتاج إلى إضافة صف جديد إلى عمود أسفل الصف 1.

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

اقرأ أيضا: كيفية الكشف عن المحتوى في مقسم قسم التحويم في Divi 

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

• لون الخلفية: # 02366b
• لون التدرج للخلفية اليسرى: rgba (0,0,0,0.45،XNUMX،XNUMX،XNUMX)
• لون التدرج للخلفية اليمنى: # 02366b
• نوع التدرج: دائري
• اتجاه شعاعي: المركز
• موقف البداية: 36٪
• المركز النهائي: 0٪

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 1
• العرض: 500 بكسل
• العرض الأقصى: 500 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
• الارتفاع: 500 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
• المساحة المتروكة (سطح المكتب): 0 بكسل (أعلى وأسفل)
• الحشوة (الجهاز اللوحي والهاتف): 20 بكسل (أعلى ، أسفل ، يسار)
• الهامش (الهاتف): -10٪ (يمين)

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

• زوايا دائرية: 50٪

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

• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 210 بكسل
• لون الظل: rgba (2,54,107,0.66،XNUMX،XNUMX،XNUMX)

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

display:flex;align-items:center;

إضافة روابط

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

ابدأ بإنشاء وحدة "نصية" جديدة.

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

• ارتداءها: "العنصر 1"

• خط النص: Share Tech
• لون النص: #ffffff
• الحجم: 16 بكسل (افتراضي) ، 20 بكسل (تحوم)
• تباعد الأحرف: 1 بكسل
• ارتفاع خط النص: 60 بكسل
• العرض: 250 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
• الارتفاع: 60 بكسل
• الحشو (يسار): 20 بكسل

احفظ الإعدادات الآن. ثم قم بتكرار وحدة النص 4 مرات لإنشاء إجمالي 5 وحدات نصية.

وضع روابط / وحدات نصية

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

اكتشف أيضًا: كيفية إنشاء شبكة عمود السوائل عند المرور بالماوس في divi

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

رابط 1

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

• ترجمة التحويل (المحور Y): 120 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

• تدوير التحويل (المحور Z): 60 درجة (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)

• الأصل: 50٪ (يمين الوسط)

رابط 2

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

• تحول
  • الترجمة (المحور ص): 60 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
  • دوران المحور Z: 30 درجة (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
  • الأصل: 50٪ (يمين الوسط)

رابط 3

نظرًا لأن الوحدة النصية للرابط 3 في المنتصف ، يمكننا تركها في مكانها.

رابط 4

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

• تحول :
  • ترجمة المحور ص: -60 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
  • دوران المحور Z: -30 درجة (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
  • الأصل: 50٪ (يمين الوسط)

رابط 5

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

• تحول :
  • ترجمة المحور ص: -120 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
  • دوران المحور Z: -60 درجة (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
  • الأصل: 50٪ (يمين الوسط)

الآن دعونا نرى النتيجة حتى الآن. لاحظ كيف تعمل الروابط / النصوص في وحدات النص بشكل مثالي على طول محيط الدائرة.

تسمية القائمة المضافة

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

بعد ذلك ، قم بتحديث محتوى الجسم بما يلي:

Menu

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

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

• ارتفاع سطر النص: 300 بكسل (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)
• الارتفاع: استعادة الإعداد الافتراضي (تلقائي)

• دوران التحويل (المحور Z): 180 درجة (سطح المكتب) ، 0 درجة (الكمبيوتر اللوحي والهاتف)
• أصل التحويل: 50٪ (يمين الوسط)

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

position: absolute!important;

الآن اكتشف النتيجة. يجب أن ترى عنصر القائمة مقلوبًا على يمين العجلة.

تمت إضافة تأثير التمرير الدوار إلى الخط / العجلة

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

• دوران التحويل (المحور Z): 180 درجة (سطح المكتب) ، 0 درجة (تحوم) ، 0 درجة (الكمبيوتر اللوحي والهاتف)

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

• مدة الانتقال: 450 مللي ثانية
• انتقال منحنى السرعة: سهولة للداخل والخارج

شاهد الآن كيف تدور العجلة عندما تحوم فوقها.

إنشاء تخطيط من عمودين للقسم

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

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

افتح إعدادات القسم وأضف css المخصص التالي إلى العنصر الرئيسي:

display:flex;

تحديث تباعد السطر 1

بعد ذلك ، قم بتحديث حجم وتباعد السطر 1 على النحو التالي:

• العرض: 40٪ (سطح المكتب)
• الهامش (سطح المكتب): 5٪ متبقي

نتيجة نهائية

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

تحميل DIVI Now !!!

تصميم نصف عجلة بديل

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

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

في القسم المكرر ، قم بتحديث المعلمات في السطر 1 على النحو التالي:

• العرض: 70٪ (سطح المكتب)

بعد ذلك ، قم بتحديث المعلمات في السطر 2 لدفع العجلة خارج القسم كما يلي:

• الهامش: -250 بكسل يمين

نحتاج إلى استخدام -250 بكسل لأن العرض الإجمالي للعجلة هو 500 بكسل ونريد إخفاء نصف الخط بالضبط.

ثم اضبط رؤية القسم على المخفي كما يلي:

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

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

تحميل DIVI Now !!!

وفي الختام

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...