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

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

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

نظرة خاطفة

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

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

اشترك في قناتنا على اليوتيوب

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

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

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)

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

إنشاء تصميم عجلة قائمة الغزل في Divi

الفكرة الأساسية

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

قم بإنشاء القسم والصف 1

أنشئ قسمًا عاديًا بصف عمود واحد.

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

ثم قم بتحديث تصميم النص كما يلي:

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

أضف الصف 2 لبناء العجلة

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

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

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

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

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

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

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

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

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

display:flex;
align-items:center;

هذا يعتني بإعدادات الصف في الوقت الحالي. سنعود لإضافة تأثير التمرير الدوار لاحقًا.

إضافة الروابط

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

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

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

محتوى الجسم: "عنصر الرابط"

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

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

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

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

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

الرابط 1

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

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

الرابط 2

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

Transform Translate Y Axis: 60 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
محور Transform Rotate Z: 30 درجة (سطح مكتب) ، 0 بكسل (كمبيوتر لوحي وهاتف)
أصل التحويل: 50٪ 100٪ (المنتصف الأيمن)

الرابط 3

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

الرابط 4

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

Transform Translate Y Axis: -60px (سطح المكتب) ، 0px (الكمبيوتر اللوحي والهاتف)
محور Transform Rotate Z: -30 درجة (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
أصل التحويل: 50٪ 100٪ (المنتصف الأيمن)

الرابط 5

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

Transform Translate Y Axis: -120 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
Transform Rotate Z Axis: -60deg (سطح المكتب) ، 0px (الكمبيوتر اللوحي والهاتف)
أصل التحويل: 50٪ 100٪ (المنتصف الأيمن)

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

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

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

ثم قم بتحديث محتوى الجسم بما يلي:

<p>menu</p>

تأكد من أن تسمية القائمة ملفوفة في علامة ap. سيؤدي هذا إلى التأكد من التعرف على ارتفاع السطر في إعدادات النص.

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

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

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

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

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

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

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

position: absolute !important;

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

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

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

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

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

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

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

عمل تخطيط عمودين للقسم

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

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

display:flex;

تحديث تباعد الصف 1

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

العرض: 40٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
الهامش (سطح المكتب): 5٪ متبقي
الهامش (الكمبيوتر اللوحي): يسار 5٪ ، يمين 5٪
الهامش (الهاتف): 5٪ يمين

اللمسات الأخيرة

على الجهاز اللوحي وشاشة الهاتف ، ستحتاج إلى إضافة بعض الهامش العلوي لوحدة نص الرابط 1.

الهامش (الجهاز اللوحي): 30 بكسل في الأعلى

ويمكنك دائمًا إضافة مقسم قسم إلى القسم لإكمال التصميم.

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

الآن دعنا نتحقق من النتيجة النهائية.

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

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

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

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

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

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

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

ها هو التصميم النهائي.

افكار اخيرة

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

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

هتافات!