الترويسات والتذييلات

The website header is the top section of a web page and typically includes elements such as the logo, navigation menu, search bar, and sign-in or customer account button. The footer is displayed at the bottom of a web page and usually contains contact details, links, legal notices, and other useful information. Both can be customized as needed.

محتوى الترويسة

The header includes company information, quick-access buttons, and website menus to help users navigate the website effectively. Well-structured, user-friendly headers and menus also play an important role in improving search engine rankings.

محرر القائمة

The menu editor allows you to edit the website header and add menu items and mega menus.

To open the menu editor, go to Website ‣ Site ‣ Menu Editor. From there, you can:

• Rename a menu item or change its URL using the (Edit Menu Item) icon.

• Delete a menu item using the (Delete Menu Item) icon.

• Move a menu item by dragging and dropping it to the desired location in the menu.

• Create a regular drop-down menu by dragging and dropping the sub-menu items to the right, underneath their parent menu.

نصيحة

You can also access the menu editor from the website editor. To do so, either:

• Select any menu item and click Edit Menu, or

  

• انتقل إلى علامة التبويب النمط، وانقر على تحرير القائمة بجانب عنوان قسم الترويسة.

إضافة عناصر قائمة

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

1. في محرر القائمة، انقر على إضافة عنصر قائمة.

2. في النافذة المنبثقة، أدخل العنوان الذي سيظهر في القائمة.

3. في حقل عنوان URL أو البريد الإلكتروني، اكتب / للبحث عن صفحة موجودة على الموقع الإلكتروني أو # للبحث عن رابط داخلي مخصص موجود.

   ملاحظة

   لإضافة عنصر قائمة لصفحة غير موجودة بعد، أدخل عنوان URL الجديد أو الرابط الداخلي وانقر على إنشاء صفحة في النافذة المنبثقة تحرير القائمة. إذا أضفت عنصر القائمة دون إنشاء الصفحة المقابلة، فسيؤدي الرابط إلى صفحة خطأ 404.

4. انقر على متابعة.

5. عدّل هيكل القائمة إذا لزم الأمر.

6. انقر فوق حفظ.

تصميم عناصر القائمة

لتعديل تصميم عناصر القائمة، انقر على تحرير في الزاوية العلوية اليمنى وحدد الترويسة. ثم، انتقل إلى علامة التبويب النمط وانتقل إلى قسم التنقل. تتوفر الخيارات التالية:

• عدّل محاذاة قائمة سطح المكتب لأجهزة سطح المكتب.

• عدّل محاذاة وموضع قائمة الجوال لأجهزة الجوال.

• اختر ما إذا كانت القوائم الفرعية تفتح عند التحويم أو عند النقر.

• حدد نمط الرابط لتمييز الصفحة الحالية في القائمة.

ملاحظة

قد تختلف الخيارات المتوفرة في قسم التنقل حسب القالب المحدد.

إخفاء عنصر قائمة ديناميكي عن المستخدمين غير المسجلين الدخول

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

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

1. Enable developer mode.

2. انتقل إلى Website ‣ Configuration ‣ Menus.

3. وسّع قائمة القوائم الخاصة بالموقع الإلكتروني المعني إذا لزم الأمر.

4. حدد عنصر القائمة الذي ترغب في إخفائه.

5. في قسم المجموعات المرئية، انقر على إضافة سطر.

6. ابحث عن المجموعة الاسم دور / البوابة، ثم :guilabel:`حدد`ها.

7. حفظ.

نصيحة

يمكنك تخصيص عناصر القائمة بشكل أكبر من خلال نموذج عنصر القائمة هذا. على سبيل المثال:

• فعّل خانة الاختيار نافذة جديدة لفتح الصفحة في علامة تبويب جديدة عند النقر عليها.

• أضف صفحة ذات صلة أو صفحة نموذج ذات صلة.

• خصص قائمة رئيسية، و/أو قوائم فرعية لإنشاء تسلسل هرمي.

انظر أيضًا

إدارة ظهور الصفحات الثابتة

القوائم الضخمة

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

لإنشاء قائمة ضخمة، اتبع الخطوات التالية:

1. في محرر القائمة، انقر على إضافة عنصر قائمة ضخمة.

2. في النافذة المنبثقة، أدخل عنوان القائمة الضخمة.

3. انقر على متابعة.

4. عدّل هيكل القائمة إذا لزم الأمر.

5. انقر فوق حفظ.

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

• حرّر النص مباشرة داخل الكتلة البنائية.

• حرّر عنوان URL لعنصر القائمة عن طريق تحديد عنصر القائمة الضخمة والنقر على زر تحرير.

  

• انقل عنصر قائمة عن طريق سحب وإفلات الكتلة ذات الصلة إلى الموضع المطلوب في قائمة الميجا.

• احذف عنصر قائمة بالنقر على أيقونة (إزالة) الخاصة بالكتلة ذات الصلة.

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

لتخصيص التصميم العام للقائمة الضخمة و:doc:كتلها البنائية <../web_design/building_blocks> الفردية، افتح محرر الموقع الإلكتروني، وانتقل إلى علامة تبويب النمط، ثم انتقل إلى قسم القائمة الضخمة. الخيارات التالية متاحة:

• اختر قالب.

• اختر الحجم: إما بعرض كامل أو ضيق.

• فعّل فئات المتجر الإلكتروني إذا كان ذلك مناسباً.

تصميم الترويسة والتذييل

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

• اختر قالباً من القائمة المنسدلة.

• حدد لون الخلفية من خلال تحديد نمط السمة، أو خيار لون مخصص، أو تدرج لوني.

• حدد عرض المحتوى.

• Add a Border to the footer and customize its size, style, and color.

• قم بتكييف الزوايا الدائرية لتناسب التصميم.

• أضف ظلاً وحدد اللون و:guilabel:الإزاحة و:guilabel:التمويه و:guilabel:الانتشار.

Header-specific design optionsFooter-specific design options

To further customize the website's header, use the following header-specific design options in the Header section:

• Add a Scroll Effect to determine how the header behaves while scrolling the page. Hover over an effect to preview it.

• Choose the Header Position for the selected page: Regular, Hidden, or Over The Content. When Over The Content is selected, you can also customize the Background and Text Color.

  نصيحة

  • To hide the header on all pages, go to the Theme tab of the website editor. Scroll down to the Advanced section and toggle Show Header off.

  • Hidden elements, including the header when applicable, are available under Invisible Elements.

• Change the Default Accent Color to either the Primary or Secondary color to visually distinguish drop-down buttons in the header.

• Define a font.

• Set the Format size and add a color if needed.

To control the visibility of specific elements, navigate to the Show/Hide Elements section of the Style tab and click the option related to the element you wish to show or hide. You can show or hide:

• Visuals, such as the Company logo, Text Elements (e.g., a phone number), and Social Links for linking all social media accounts.

• Actions, such as the Search Bar, the Language Selector, the Sign in button, and the Header Button (a Contact us button by default).

• eCommerce-specific elements: the Add to cart and Add to wishlist buttons.

• You can enable a Background for navigation icons, such as the wishlist or search bar icon.

نصيحة

You can also add Inner Content blocks to the header or footer for further customization, such as e-commerce-specific footer options.