كيفية استخدام وحدة التنقل كاملة العرض على Divi Builder

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

كيفية إضافة وحدة قائمة ملء الشاشة إلى صفحتك

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

بمجرد دخولك إلى Visual Builder ، يمكنك النقر فوق زر علامة الجمع الرمادي لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة وحدات عرض كامل جديدة إلا داخل أقسام fullwidth. إذا كنت تبدأ صفحة جديدة ، فلا تنس إضافة قسم كامل العرض إلى صفحتك أولاً. لدينا بعض البرامج التعليمية الرائعة حول كيفية استخدام عناصر قسم Divi.

حدد موقع وحدة القائمة ذات العرض الكامل في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "Fullwith menu" أو "قائمة العرض الكامل" (اعتمادًا على إصدارك) ثم انقر فوق Enter للبحث تلقائيًا وإضافة وحدة قائمة العرض الكامل ! بمجرد إضافة الوحدة ، سيتم الترحيب بك من خلال قائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .

مثال على حالة الاستخدام: إضافة قائمة عرض كامل أسفل رأس الصفحة

في هذا المثال ، سأوضح لك كيفية إضافة قائمة عرض كامل أسفل قسم رأس الصفحة.

وإليك مثالا على ذلك:

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

لتحرير قالب صفحتك ، انتقل إلى محرر صفحتك وحدد قالب "صفحة فارغة" في منطقة سمات الصفحة في الشريط الجانبي الأيمن.

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

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

قم بتحديث إعدادات قائمة Fullwidth كما يلي:

خيارات المحتوى

القائمة: [حدد القائمة التي يجب استخدامها في الوحدة النمطية] السياق: # 333333

خيارات التصميم

لون النص: اتجاه النص الفاتح: خط القائمة المركزية: قائمة Roboto حجم الخط: 20 بكسل

هذا كل شيئ !

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

خيارات محتوى قائمة Fullwidth

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

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

لون الخلفية

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

لون خلفية القائمة المنسدلة

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

لون خلفية قائمة الجوال

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

تسمية الإدارة

سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، تظهر هذه الملصقات في كتلة الوحدة النمطية لواجهة Divi Builder.

خيارات تصميم قائمة كاملة العرض

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

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

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

إنشاء ارتباطات قائمة كاملة العرض

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

لون خط القائمة المنسدلة

في القوائم المنسدلة ، يتم فصل الروابط بخط 1 بكسل. إذا كنت تريد تخصيص لون هذا الصف ، يمكنك اختيار لون مخصص باستخدام منتقي الألوان في هذا الإعداد.

لون النص

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

اتجاه النص

يتحكم هذا في كيفية محاذاة النص الخاص بك في الوحدة النمطية. يمكنك الاختيار بين اليسار واليمين والوسط.

لون الرابط النشط

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

لون نص القائمة المنسدلة

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

لون نص القائمة المتنقلة

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

خط القائمة

يمكنك تغيير خط خط القائمة عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.

قائمة حجم الخط

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

لون نص القائمة

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

تباعد حروف القائمة

يؤثر تباعد الأحرف على المسافة بين كل حرف. إذا كنت تريد زيادة المسافة بين كل حرف في النص الرقمي الخاص بك ، فاستخدم شريط تمرير النطاق لضبط المسافة أو أدخل حجم التباعد المطلوب في حقل الإدخال على يمين شريط التمرير. تدعم حقول الإدخال وحدات قياس مختلفة ، مما يعني أنه يمكنك إدخال "px" أو "em" اعتمادًا على قيمة الحجم لديك لتغيير نوع الوحدة.

ارتفاع خط القائمة

يؤثر ارتفاع السطر على المسافة بين كل سطر من نصك الرقمي إذا كنت تريد زيادة المسافة بين كل سطر ، فاستخدم شريط تمرير النطاق لضبط المسافة أو أدخل حجم التباعد المطلوب في حقل الإدخال يقع على يمين المؤشر. تدعم حقول الإدخال وحدات قياس مختلفة ، مما يعني أنه يمكنك إدخال "px" أو "em" اعتمادًا على قيمة الحجم لديك لتغيير نوع الوحدة.

خيارات قائمة Fullwidth المتقدمة

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

معرف CSS

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

فئة CSS

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

عرف المغلق

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

الرسوم المتحركة من القائمة المنسدلة

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

رؤية

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

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

كيفية استخدام وحدة ملاحة Divi Builder كاملة العرض