كيفية تصميم رأس عنصر مخصص في دقيقتين

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

يقول 94٪ من الأشخاص إن تصميم الويب هو سبب عدم ثقتهم في موقع الويب.

بريندان هوفورد ، مدير تحسين محركات البحث

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

في هذا البرنامج التعليمي ، سنعرض لك عملية سهلة لتصميم رأس Elementor مخصص لموقع WordPress الخاص بك.

هيا بنا نتعمق في-

كيفية إنشاء وتخصيص رأس العنصر

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

1. إنشاء رؤوس باستخدام مُنشئ السمات Elementor
2. إنشاء وتخصيص رأس العنصر من الصفر باستخدام عنصر واجهة المستخدم

ستحتاج إلى عنصر واجهة مستخدم Elementor Nav Menu وكتلة Header Block المعدة مسبقًا للعمل مع تصميم الرأس. أيضًا ، تحتاج إلى مراعاة الأشياء التالية قبل البدء في تصميم رأس موقعك.

1. Elementor (مجاني)
2. إليمينتور برو

تأكد من تثبيت وتنشيط كل من الإصدار المجاني والمتميز من Elementor.

الطريقة الأولى: إنشاء رؤوس باستخدام مُنشئ سمات Elementor

تعد ميزة Theme Builder أسهل طريقة لإنشاء رأس باستخدام Elementor. إنها ميزة أساسية لـ Elementor وسهلة التطبيق تمامًا.

للقيام بذلك ، انتقل إلى Template-> Theme Builder-> Header . هنا ، ستحصل على الخيارات المختلفة لإنشاء قالب. ثانيا، انقر فوق الزر " إضافة جديد " العلوي أو الزر " إضافة رأس جديد" لإنشاء قالب رأس جديد وانتظر الشاشة التالية.

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

أخيرًا ، سترى مكتبة Elementor مع كتل وصفحات معدة مسبقًا. هنا ، تحتاج إلى اختيار Header Block المناسب وتثبيته على موقع الويب الخاص بك.

الطريقة الثانية: إنشاء وتخصيص Elementor Header من Scratch باستخدام Elementor Widget

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

هيا نذهب اليها.

الخطوة الأولى: إضافة أداة شعار الموقع

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

لإضافة شعار موقع ، حدد الأداة والصقها على لوحتك.

الآن قم بتخصيصه وفقًا لطريقتك. لنفترض أنه يمكنك تغيير حجمه ومحاذاته وإضافة تسمية توضيحية ورابط مخصص إليه.

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

الخطوة الثانية: إضافة أداة قائمة التنقل

الآن يأتي الجزء الرئيسي في إضافة Nav Menu Widget. إنها ميزة احترافية لـ Elementor. يجب عليك ترقية حزمتك من مجانية إلى Pro.

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

• أضف صفحات أساسية إلى موقع الويب الخاص بك
• قم بإنشاء قائمة من المظهر> منطقة القائمة
• أضف الصفحات المطلوبة إلى قائمتك
• وأخيرا احفظ القائمة

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

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

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

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

قم بتغيير نمط اللون الذي يتوافق مع تصميم موقعك. للقيام بذلك ، انقر فوق Text & Pointer Hover Color وقم بتجربة تصميمات مختلفة.

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

الخطوة الثالثة: إضافة أداة نموذج البحث أو أداة زر المشاركة الاجتماعية

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

ابحث في الأداة واسحبها إلى المنطقة المحددة.

يمكنك تغيير مظهره مثل Minimal و Classic و Full Widget في منطقة Content . أضف أيضًا عنصرًا نائبًا وقم بتغيير حجم النموذج.

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

القسم المتقدم موجود هناك لإضافة المزيد من الميزات المتقدمة والمربحة. يمكنك ضبط الهامش والحشو وإضافة مؤشر Z و CSS وميزة الحركة وما إلى ذلك.

بمجرد الانتهاء من التصميم ، يمكنك التحقق من استجابته على الجهاز اللوحي والجوال .

مرشد سريع: كيف تجعل موقعًا إلكترونيًا مناسبًا للجوّال

المعاينة النهائية لرأس العنصر

بعد تطبيق جميع التصميمات والميزات هنا كيف سيبدو-

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

اقرأ أيضًا: كيفية تخصيص قائمة Elementor Nav & Elementor Portfolio Widget (تعليمي)

قم بإنشاء قوائم كبيرة الحجم مثل Puma و Adidas و Dribbble و weDevs باستخدام عنصر واجهة Happy Mega Menu Widget الخاص بـ Happy Addons

أطلقت Happy Addons مؤخرًا عنصر واجهة مستخدم Happy Mega Menu الذي يسمح لك بإنشاء ليس فقط قائمة التنقل النموذجية في WordPress ولكن أيضًا يمكنك إنشاء قوائم واسعة النطاق مثل Puma و Adidas و Dribbble و weDevs و InVision والمزيد.

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

ومع ذلك ، يمكنك مشاهدة هذا الفيديو التعليمي لمعرفة كيفية إنشاء قائمة Dribbble مثل mega باستخدام عنصر واجهة مستخدم Happy Mega Menu.

خاتمة

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

لذا فالقرار بيدك. يمكنك اتباع كلا الطريقتين التي شاركناها أعلاه. نوصيك باتباع الأنسب.

باستخدام قائمة Elementor Nav ، و Happy Mega Menu Widget ، يمكنك بسهولة إنشاء التصميم الذي تريده مثل Elementor Header ومواد تصميم مواقع الويب الأخرى.

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

لقد قمنا بالفعل بتغطية مجموعة من المقالات العصرية والمثيرة للاهتمام حول Elementor.

إذا كنت ترغب في الحصول على كل هذه الأشياء بشغف ، يمكنك الاشتراك في النشرة الإخبارية Happy Addons.