العودة إلى الدعم المحتوى والوسائط القوائم تخصيص تصميم القائمة

تخصيص تصميم القائمة

يُحدِّد قالبك شكل القائمة على موقعك. سيوضِّح لك هذا الدليل الطرق المتنوعة التي يمكنك من خلالها تغيير تصميم القائمة.

تغيير تصميم القائمة في محرر الموقع

إذا كان قالبك يستخدم محرر الموقع (على سبيل المثال: ترى المظهر ← المحرر في لوحة التحكم لديك)، فيمكنك التحكم في تصميم القائمة من إعدادات مكوّن التنقل عن طريق اتباع هذه الخطوات:

  1. من لوحة التحكم لديك، انتقل إلى المظهر ← المحرر.
  2. انقر على الجانب الأيمن من الشاشة لفتح منطقة التحرير.
    • بدلاً من ذلك، حدد الأنماط واختر الترويسة أو جزء القالب الآخر الذي يحتوي على قائمتك.
  3. افتح طريقة عرض القائمة في الزاوية العلوية اليسرى من شاشتك (إنها الأيقونة التي تظهر على شكل ثلاثة خطوط أفقية فوق بعضها).
  4. تحديد مكوّن التنقل في طريقة عرض القائمة:
طريقة عرض القائمة، مع تمييز مكون التنقل.
تحديد مكون التنقل في طريقة عرض القائمة
  1. اعرض إعدادات مكون التنقل على الجانب الأيمن من الشاشة.

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

تم تمييز أيقونة الإعدادات في الجزء العلوي من محرِّر ووردبريس.
توجد أيقونة الإعدادات في الزاوية العلوية اليسرى
  1. انقر على علامة تبويب الأنماط، الممثَّلة بدائرة سوداء وبيضاء داخل إعدادات مكون التنقل.
  2. من هنا، يمكنك استخدام إعدادات اللون لتحديد لون القائمة أو تخصيصه:
    • النص
    • الخلفية
    • القائمة الفرعية ونص التراكب
    • القائمة الفرعية وخلفية التراكب
  3. استخدم إعدادات أسلوب الطباعة لضبط حجم الخط وتباعد الحروف والحالة والمزيد.
  4. استخدم إعدادات الأبعاد لضبط المسافة بين عناصر القائمة.
  5. انقر على زر حفظ لحفظ تغييراتك.

فيديو تعليمي

تغيير ألوان القائمة في أداة التخصيص

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

  1. تفضَّل بزيارة لوحة تحكم موقعك.
  2. انتقل إلى المظهر ← تخصيص.
  3. انقر على الألوان والخلفيات؛ حيث قد تعثر على مجموعة من الدوائر. تحدِّد كل دائرة من الدوائر لون العناصر المتنوعة لموقعك، مثل: لون الرابط ولون الخلفية.
  4. يختلف كل قالب عن غيره، لذا حدِّد كل دائرة من الدوائر لاستكشاف العناصر التي تقوم بتغيير اللون. اختر لونًا جديدًا — ستعرض لك نافذة المعاينة الموجودة على اليمين اللون الجديد على موقعك.
  5. إذا كنت راضيًا عن النتيجة، فانقر على “حفظ التغييرات” لتطبيق الألوان الجديدة على موقعك.
تعرض خيارات اللون خمس دوائر قابلة للنقر عليها لتحديد الألوان.

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

نقل القائمة

إذا كنت ترغب في تغيير موضع القائمة، فضع في حسبانك الخيارات الآتية:

على الرغم من إمكانية نقل قائمة إلى موضع مختلف، فإننا لا نوفِّر CSS، ويرجع هذا إلى تعقيد مشكلات العرض ومخاطرها.

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

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

مثال لزر قائمة على جهاز محمول.

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

إعدادات قائمة التراكب على مكوّن التنقل.
إعدادات قائمة التراكب على مكوّن التنقل.

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

تغييرات التصميم الأخرى

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

فئات CSS لعناصر القائمة

تتوفر هذه الميزة على المواقع المسجَّلة في خطط Explorer وCreator وEntrepreneur في ووردبريس.كوم، والخطة الاحترافية القديمة. بالنسبة إلى المواقع المسجَّلة في الخطتين المجانية وStarter، بادر بترقية خطتك للوصول إلى هذه الميزة.

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

إذا كان قالبك يستخدم محرّر الموقع (على سبيل المثال، ترى المظهر ← المحرر)، فيمكنك العثور على خيار فئات CSS في الإعدادات المتقدمة لمكوّن التنقل.

لتمكين خيار فئات CSS على قالب تقليدي (المظهر ← التخصيص)، اتبع هذه الخطوات:

  1. تفضَّل بزيارة لوحة تحكم موقعك.
  2. انتقل إلى المظهر ← تخصيص ← القوائم.
  3. انقر على أيقونة ⚙️ (الترس) لفتح إعدادات القائمة المتقدمة.
  4. تأكَّد من تحديد مربع فئات CSS، كما هو موضَّح في الصورة على اليمين.
تم وضع علامة رقم 1 على أيقونة الإعدادات ورقم 2 على مربع اختيار فئات CSS.

ستحتوي عناصر قائمتك بعد ذلك على حقل جديد لك لكتابة فئة CSS كما هو موضَّح هنا:

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

في المثال الوارد أعلاه، يمكنك بعد ذلك تصميم عنصر القائمة باستخدام المُحدِّد .twitter في كود CSS لديك.

Copied to clipboard!