كيفية تخصيص قائمة Divi باستخدام CSS

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

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

لماذا تحرير قائمة Divi؟

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

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

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

كيفية تخصيص قائمة Divi باستخدام CSS

في هذا القسم ، سنوضح لك كيفية تحرير قائمة Divi باستخدام CSS لتحقيق أقصى استفادة منها. تحتاج إلى لصق نصوص CSS في مُخصص WordPress بالانتقال إلى Appearance> Customize> CSS إضافي . بدلاً من ذلك ، يمكنك لصقها في ملف style.css لموضوع طفلك.

ملاحظة : قبل أن تبدأ:

• النسخ الاحتياطي : قم بإنشاء نسخة احتياطية كاملة لموقعك
• استخدم موضوعًا فرعيًا : يمكنك إنشاء سمة باتباع هذا الدليل أو استخدام أي من هذه المكونات الإضافية

الآن دعنا نرى خيارات مختلفة لتخصيص قائمة Divi بنصوص CSS.

1) تغيير لون خلفية شريط التنقل

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

.et_menu_container{background-color:red;}

2) تغيير خطوط القائمة

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

.et_menu_container{font-family: Lucida Console, Courier, monospace;}

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

• كيفية إضافة خطوط جوجل إلى ووردبريس
• تغيير الخطوط في WordPress
• عائلة الخطوط

3) تغيير لون النص على عناصر التمرير

لتغيير لون النص عند التمرير فوق عنصر ، استخدم هذا الرمز:

#top-menu li a:hover{
color:blue;
}

سيؤدي هذا إلى تغيير لون روابط شريط التنقل إلى اللون الأزرق عندما يحوم المستخدمون فوقها ولكن يمكنك ضبط الكود وتغييره إلى أي لون تريده باستخدام الكود السداسي أو تنسيق RGBA.

4) تغيير عرض القوائم المنسدلة

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

#top-menu > li > .sub-menu{
width:500px;
}

5) أضف صورة خلفية إلى شريط تنقل قائمة Divi

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

.et_menu_container{
background-image:url('http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png');
background-size:cover;
}

لاحظ أننا نستخدم صورة تم تحميلها مسبقًا. ما عليك سوى تحميل صورتك الخاصة واستبدال عنوان URL للصورة بالصورة التي تريد استخدامها.

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

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

كيفية تطبيق CSS على عنصر واحد

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

يُطلق على سطر CSS الفردي اسم القاعدة ، والتي تتكون من محدد وخاصية وقيمة.

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

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

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

تطبيق CSS على عناصر مفردة

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

سترى شيئًا كهذا:

هذا كثير من التعليمات البرمجية! لا تقلق ، فقد يبدو الأمر مربكًا ، لكن من السهل جدًا التعامل معه بمجرد أن تعتاد عليه.

سترى كيف يتم تمييز العناصر على صفحة الويب الخاصة بك أثناء فتح علامات HTML <body> ، <header> ، <div> وتحريك الماوس فوقها. بهذه الطريقة يمكنك معرفة العنصر الذي تشير إليه والحصول على فئة HTML أو المعرف الذي تحتاج إلى استخدامه في كود CSS الخاص بك.

انقر فوق العنصر الذي تريد تغييره وسترى محدد CSS

لنسخه ، انقر بزر الماوس الأيمن فوقه وحدد نسخ> محدد CSS . الآن بعد أن قمت بنسخ محدد CSS ، انتقل إلى لوحة معلومات WordPress الخاصة بك ، وتوجه إلى Customizer> CSS إضافي ، والصقه:

#top-menu > li:nth-child(1)

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

#top-menu > li:nth-child(1){background-color:red;}

لاحظ أن :nth-child(1) pseudo-class تخبرنا أن هذا هو أول عنصر قائمة (1) في نفس المستوى من التسلسل الهرمي.

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

المزيد من نماذج نصوص CSS

هناك الكثير الذي يمكنك القيام به لتخصيص قائمة Divi الخاصة بك باستخدام CSS. دعنا نلقي نظرة على بعض الأمثلة الأخرى.

أضف رمزًا إلى عنصر القائمة

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

#top-menu > li:nth-child(1) a::before{

padding-right: 10px;

font-family: "Font Awesome 5 Free";

font-weight: 900; content: "\f015";

}

إذا رأيت خطًا مكسورًا ، فهذا يعني أن Font Awesome لم يتم تحميله.

لتحميل مجموعات الأيقونات ، أدخل هذا السطر في قسم الرأس بالانتقال إلى Divi options> Advanced .

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">

إخفاء أي عنصر من عناصر القائمة باستخدام CSS

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

.et-cart-info{display:none;}

استنتاج

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

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

• قم بتغيير لون خلفية القائمة
• تعديل الخطوط
• قم بتغيير لون النص في عناصر التمرير
• قم بتغيير عرض القائمة المنسدلة
• أضف صورة خلفية إلى القائمة

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

لمزيد من الأدلة حول كيفية تحقيق أقصى استفادة من Divi ، تحقق من الأدلة التالية:

• تخصيص صفحة المنتج في Divi
• كيفية إضافة زر إضافة إلى عربة التسوق في صفحات متجر Divi
• كيفية إخفاء / إزالة التذييل في Divi
• نموذج الاتصال Divi لا يعمل - كيفية إصلاحه

هل حاولت تحرير قائمة موقعك باستخدام CSS؟ ماذا غيرت؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!