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)
• لون تدرج الخلفية على اليمين: #02366b
• نوع التدرج: دائري
• اتجاه شعاعي: المركز
• موقف البداية: 36٪
• المركز النهائي: 0٪

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

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

• زوايا دائرية: 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 مللي ثانية
• انتقال منحنى السرعة: سهولة للداخل والخارج

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

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

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

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

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

display:flex;

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

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

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

نتيجة نهائية

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

تحميل DIVI Now !!!

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

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

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

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

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

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

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

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

ثم قم بضبط ظهور القسم إلى مخفي كما يلي:

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

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

تحميل DIVI Now !!!

الخاتمة

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

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

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

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

...