كيفية إضافة تأثيرات التحويم الأنيقة والتسطير العلوي في قائمة Divi

قائمة Divi هي أداة تنقل متعددة الاستخدامات وقابلة للتخصيص، وهي مكون أساسي لمواقع الويب التي تم إنشاؤها باستخدام Divi Theme Builder. تتيح لنا قائمة Divi، المعروفة بمرونتها، إنشاء أنظمة تنقل مذهلة بصريًا وعملية للغاية وتتوافق تمامًا مع هوية علامتك التجارية.

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

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

كيفية إضافة تأثيرات التحويم الأنيقة والتسطير العلوي في قائمة Divi

الخطوة 1: إنشاء أو فتح قالب الرأس

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

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

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

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

الخطوة 2: إضافة CSS المخصص

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

انتقل إلى إعدادات الصفحة بالنقر فوق زر الترس (️) في محرر قالب الرأس. بعد ذلك، انتقل إلى علامة التبويب خيارات متقدمة -> Custom CSS . بمجرد دخولك إلى قسم CSS المخصص ، انسخ مقتطف CSS البسيط أدناه والصقه في حقل إدخال CSS المخصص .

فيما يلي مثال لمقتطف CSS يمكنك تطبيقه لإضافة تأثير التحويم الأنيق الذي تحته خط إلى القائمة الخاصة بك:

 .et_pb_menu_0_tb_header ul li > أ:قبل{
    محتوى: ''؛
    العرض: 0;
    اليسار: 50%؛
    الارتفاع: 4 بكسل؛
    نصف قطر الحدود: 2 بكسل؛
    الخلفية: رغب (145، 255، 2)؛
    الموقف: مطلق؛
    مؤشر z: -1؛
    أسفل: 14 بكسل؛
    العتامة: 0؛
    الانتقال: .4s cube-bezier(.27,.03,.30,1.63);
}

.et_pb_menu_0_tb_header ul li > a:hover:before{
    العرض: 110%;
    اليسار: -5%؛
    العتامة: 1؛
}

.et-القائمة لى > أ {
    العرض: 140 بكسل؛
    الحشو: 15 بكسل؛
} 

ملاحظة : إذا كنت تريد تغيير تأثير التمرير من التسطير إلى السطر العلوي، فيمكنك استبدال خاصية وقيمة " bottom: 14px; " (على سبيل المثال، top:15px ؛).

هذا كل شيء. بعد إضافة CSS المخصص، انقر فوق الزر Save Changes (حفظ التغييرات) في صفحة Theme Builder لتطبيق التعديلات.

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

ماذا فعل كود CSS؟

الحالة الأولية

 .et_pb_menu_0_tb_header ul li > a:before {
}

يستهدف محدد CSS هذا العنصر الزائف :before عناصر الربط (< a >) ضمن عناصر القائمة (< li >) لقائمة غير مرتبة (< ul >) مع الفئة.

.et_pb_menu_0_tb_header . ويطبق الأنماط التالية:

• content: '' : ينشئ محتوى فارغًا للعنصر الزائف.
• width: 0 : يضبط العرض الأولي على 0 بكسل.
• left: 50% : يضع عنصر الخط أفقيًا في المنتصف.
• height: 4px : يضبط الارتفاع على 4 بكسل.
• border-radius: 2px : يدور حول الزوايا.
• background: rgb(145, 255, 2) : يضبط لون الخلفية على قيمة RGB محددة.
• position: absolute : يضع عنصر السطر داخل الحاوية الأصلية (عناصر القائمة).
• z-index: -1 : يضع العنصر خلف محتوى آخر.
• bottom: 14px : يضع عنصر الخط على بعد 14 بكسل من أسفل عناصر القائمة.
• opacity: 0 : يجعل عنصر الخط غير مرئي في البداية.
• transition: .4s cubic-bezier(.27,.03,.30,1.63) : يضيف تأثير انتقال سلس عندما تتغير خصائص العنصر.

حالة التحويم

 .et_pb_menu_0_tb_header ul li > a:hover:before {
}

يستهدف هذا المحدد نفس العنصر الزائف كما كان من قبل، ولكن فقط عند تحريك مؤشر الماوس فوقه. يقوم بتعديل الخصائص التالية:

• width: 110% : يوسع العرض إلى 110% من عرض عنصر القائمة.
• left: -5% : يقوم بإزاحة عنصر الخط بنسبة 5% إلى اليسار.
• opacity: 1 : تجعل عنصر الخط مرئيًا.

التصميم الإضافي

 .et-القائمة لى لى > أ {
    العرض: 140 بكسل؛
    الحشو: 15px؛
}

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

• width: 140px : يضبط عرض المرساة على 140 بكسل.
• padding: 15px : يضيف 15 بكسل من الحشو حول محتوى المرساة.

الخط السفلي

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

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