رأس ملف موقع على شبكة الإنترنت هي أول معلومة يراها آخر من موقعك. يسمح لك بتمييز شعار علامتك التجارية وتنظيم صفحات موقعك بالإضافة إلى توفير ميزات مهمة أخرى (البحث والاتصال وما إلى ذلك). بالإضافة إلى ذلك ، من الضروري وجود رأس عائم وشفاف لأنه يحسن تجربة المستخدم.
في هذه المقالة سوف نوضح لك كيفية إنشاء رأس وجعلها شفافة مع Elementor. لكن قبل ذلك ، سنرى ما هو الرأس العائم والشفاف.
ما هو الرأس العائم والشفاف؟
الرأس العائم هو شريط تنقل يظل ثابتًا دائمًا حتى عندما يقوم الزائر بالتمرير لأسفل في صفحة الويب. إنه مناسب جدًا للمواقع التي تحتوي على صفحات بها مقالات طويلة ومراجعات ومواقع من صفحة واحدة. ويسمح لك جانبها الشفاف بمشاهدة لون خلفية الصفحة بالإضافة إلى محتواها.
لماذا نستخدم الرؤوس العائمة والشفافة
تستخدم مواقع الويب الحديثة بشكل متزايد الرؤوس العائمة والشفافة لأن لها تأثيرًا مرئيًا على آخر من الموقع. تهدف أسباب اعتمادها إلى:
- زيادة الوعي بعلامتك التجارية ،
- تعزيز تجربة المستخدم ،
- تحسين الملاحة
اكتشف كيفية إنشاء عنوان ثنائي اللون في Elementor
قم بتثبيت الرأس وجعله شفافًا باستخدام Elementor
لإنشاء رأس شفاف وعائم ، يجب أن يكون لديك كلا الإصدارين منElementor (Pro و Lite). خلاف ذلك ، قم بتنزيل (Elementor, إليمنتور برو) قبل البدء.
بمجرد التثبيت ، اتبع الخطوات التالية.
خطوة 1: إنشاء قائمة باستخدام Elementor
لإنشاء قائمة ، اتبع الخطوات التالية:
- اختر تباعا المظهر >> القوائم
- اسم القائمة
- حدد موقع القائمة
- تحقق من خلال النقر على الزر حفظ القائمة
- تحقق من الصفحات أو المقالات أو المنشورات في المجموعة أضف عناصر القائمة
- انقر أضف إلى القائمة لإضافة العناصر المميزة إلى القائمة
- أخيرًا انقر فوق حفظ القائمة
ليرة aussi العنصر: كيفية عرض النص فوق صورة
الخطوة 2: حدد قالب الرأس من مكتبة قوالب Elementor
مستخدموElementor يتمتع Pro بإمكانية الوصول إلى مكتبة من القوالب الجاهزة للاستخدام المفيدة لتصميم أقسام مختلفة من ملف موقع انترنت. ستجد أيضًا مجموعة متنوعة من قوالب الرأس هنا. لفعل هذا،
- انتقل تباعا إلى نماذج >> إضافة
- سترى نافذة منبثقة مشروطة
- اختر في الراس
- أخيرًا انقر فوق قم بإنشاء قالب
من ذلك الحين فصاعدًا ، يتم عرض المكتبة. بشكل افتراضي ، يعرض كتل الرأس. تصفح من خلال القوالب المعروضة ، ثم أدخل القالب الذي يثير اهتمامك.
سيتم فتح قالب الرأس في لوحة Elementor.
الخطوة 3: رأس الدبوس مع Elementor
لتثبيت الرأس ، اتبع الخطوات التالية:
- انقر فوق الزر تحرير مقطع الرأس
- ثم حدد علامة التبويب متقدم
- ثم تأثير الحركة
- هدم القائمة دبوس وحدد القيمة في الأعلى، سيؤدي ذلك إلى تجميد رأس موقعك أثناء قيام الزائر بالتمرير لأسفل الصفحات.
- بشكل افتراضي ، سيتم تثبيت الرأس تلقائيًا على وسائط مثل سطح المكتب والجهاز اللوحي والجوال
تصفح أيضا العنصر: كيفية تصدير القوالب واستيرادها
الخطوة 4: اجعل الرأس شفافًا باستخدام Elementor
لتحقيق ذلك ، كرر الطريقة أدناه:
- اذهب إلى نمط >> خلفية >> منتقي الألوان
- ثم قم بتغيير عتامة الخلفية
إذا كنت تريد أن تجعل العنوان شفافًا تمامًا ، فغيّر نوع الخلفية بتحديد النوع كلاسيكي. لذلك ، ستكون قوائم التنقل غير مرئية بسبب تباين لون النص (أبيض).
لعلاج هذا الموقف ، قم بما يلي:
- انقر تباعا على تعديل قائمة من تصفح >> الأنماط
- ثم على أداة انتقاء اللون
- اختر اللون المطلوب (في حالتنا لم تكن هناك حاجة لتغييره).
بمجرد الانتهاء ، يمكنك نشر صفحة الويب الخاصة بك. ولكن قبل ذلك ، دعنا نرى كيفية استبدال قوائم التنقل في نموذجنا بالقوائم التي أنشأناها. تذكر أن الاسم المخصص لنا هو قائمة الرأس (انظر الخطوة 1):
- حدد علامة التبويب محتويات
- ثم قم بتعديل ملف menu عن طريق تحديد اسم العنوان الخاص بك
وها أنت ذا :).
وفي الختام
يمكن أن تكون الرؤوس الشفافة والعائمة مفيدة لك في العديد من الحالات. نأمل أن تكون هذه المقالة قادرة على تلبية احتياجاتك حول كيفية إنشاء رؤوس شفافة وعائمة باستخدام Elementor. إذا كانت لديك أي مخاوف أخرى بخصوص هذا الموضوع ، فأخبرنا بذلك في التعليقات.
صباح الخير ،
شكرا لك على مقالك.
لقد قمت بالفعل بإنشاء رأس شفاف بحيث تظل الصورة الموجودة في الخلفية مرئية.
لكن هذه الصورة موجودة فقط في الصفحة الرئيسية.
أود أن أوضح أن هذا الرأس يكون شفافًا فقط على الصفحة الرئيسية، وإلا فلن أراه في مقالاتي!
لقد كنت أبحث بشدة عن حل ... بدون نجاح!
شكرا لك على مساعدتك