هل تتمنى أن يكون لديك المزيد من التحكم في موقع الويب الخاص بك دون الحاجة إلى الكود؟ مثل انشاء هيدر مخصص
إذا كنت معتادًا على منشئ الصفحات الشهير Elementor ، فأنت تعلم أنه يوفر مرونة لا تصدق في بناء موقعك – لا حاجة إلى الترميز!
ومع ذلك ، فإن Elementor يأخذك فقط حتى الآن ، لأنه موضوع WordPress الخاص بك هو الذي يتحكم في عناصر مثل الهيدر ، بما في ذلك الشعار ومنطقة التنقل.
هذه ليست مشكلة إذا كنت راضيًا عن خيارات الهيدر التي تأتي مع قالبك ، ولكن كل سمة WordPress مختلفة ، لذلك قد لا تكون الخيارات المضمنة هي بالضبط ما تبحث عنه. أو ربما تعجبك رؤوس، ولكن تتمنى أن تتمكن بسهولة من تطبيق هيدر فريد على صفحة مقصودة على موقعك.
مهما كان التخصيص الذي تحتاجه في رؤوسك ، فهناك بعض الطرق الرائعة لاستخدام Elementor والاستمتاع بالتحكم الكامل بالسحب والإفلات على هيدر موقع الويب الخاص بك. إليك ما تحتاج إلى معرفته لإنشاء رؤوس مخصصة جميلة باستخدام Elementor!
كيفية تحرير الهيدر في Elementor
من الواضح ، من حيث الجماليات والوظائف ، أن هيدر موقع الويب الخاص بك ضروري لتجربة مستخدم جيدة. بعد كل شيء ، هذا هو المكان الذي توجد فيه قائمة التنقل والشعار وعربة التسوق والعناصر المهمة الأخرى!
لتخصيص الهيدر لـ Elementor ، ستستخدم ميزة رائعة تسمى Theme Builder ، والتي تتوفر في Elementor Pro فقط.
( ملاحظة : يتطلب هذا الأسلوب أن يكون لديك الإصدار المدفوع من Elementor ، لكننا سنكتشف أيضًا بديلًا مجانيًا لاحقًا.)
إنشاء هيدر عنصر باستخدام مُنشئ السمات
إليك كيفية بدء استخدام Theme Builder.
الخطوة 1: ابحث عن علامة تبويب العنصر في الشريط الجانبي
انتقل إلى الواجهة الخلفية لموقع WordPress الخاص بك ، وقم بتثبيت الإضافة Elementor من الإضافات > إضافة جديد .
تأكد من تثبيت الإصدار المحترف من أداة إنشاء الصفحات هذه. يتضمن العشرات من قوالب الهيدر المعدة مسبقًا ، ولكن من أجل التحكم الكامل ، يجب أن تصنع بنفسك من البداية!
انتقل إلى القوالب > منشئ القوالب .
الخطوة 2: إنشاء قالب جديد في Elementor
انقر فوق إضافة قالب جديد لإنشاء قالب جديد في Elementor.
ضمن مربع الحوار هذا ، يمكنك تحديد خيار الهيدر وإنشاء اسم للقالب الخاص بك.
الخطوة 3: انقر فوق “إنشاء نموذج” للبدء
بمجرد إنشاء القالب ونشره ، يمكنك تحرير الهيدر مباشرة باستخدام Elementor!
العناصر
يعمل تصميم الهيدر بنفس طريقة عمل أي صفحة أو قسم باستخدام Elementor. ما عليك سوى سحب أدوات مختلفة إلى الصفحة الرئيسية لإنشاء شيء مذهل.
عند الحديث عن الأدوات المصغّرة ، ستجد جميع أنواع أدوات Elementor سهلة الاستخدام لبناء هيدر مخصص بسرعة في الشريط الجانبي Elementor Pro.
فيما يلي بعض من أكثرها فائدة:
- شعار الموقع
- عنوان الموقع
- عنوان الصفحة
- قائمة التنقل
- نموذج بحث
- خريطة الموقع
باستخدام خيارات عناصر واجهة المستخدم هذه في Elementor Pro ، يمكنك إنشاء هيدر يحتوي على كل عنصر تحتاجه!
فقط تذكر ، إذا كنت تصمم هيدرًا مخصصًا ، فأنت تريد الاستفادة من المحتوى الديناميكي بحيث يسحب موقع الويب نفس العنصر من كل صفحة.
على سبيل المثال ، للحصول على شعار متسق ، يمكنك تحميل شعار موقع إلى أداة التخصيص الخاصة بك باستخدام عنصر واجهة مستخدم شعار الموقع واستخدامه كعنصر ديناميكي في قالب الهيدر ، بدلاً من استخدام عنصر واجهة مستخدم صورة للشعار.
بهذه الطريقة ، ستظهر بنفس الشكل في أي صفحة تستخدم قالب الهيدر هذا – وعندما يحين وقت تحديث شعارك ، ما عليك سوى تبديل الشعار في مكان واحد!
الخطوة 4: اختر شروط العرض
الآن لديك خطوة واحدة أخرى لإكمالها وأنت على استعداد لتحريك الهيدر الجديد.
بمجرد النقر على “نشر” ، سيُطلب منك تحديد حالة العرض.
تعني شروط العرض فقط المكان الذي تريد إظهار العنوان في موقع WordPress الخاص بك فيه.
هناك ثلاثة خيارات:
- الموقع بالكامل : إذا تم تحديده ، فسيظهر العنوان في جميع الصفحات وجميع منشورات المدونة على موقع الويب الخاص بك.
- المحفوظات : إذا حددت هذا الخيار ، يمكنك إظهار الهيدر في صفحة أو منشور مؤرشف معين.
- فردي : إذا حددت هذا الخيار ، فيمكنك إظهار العنوان في صفحة أو فئة أو منشور معين.
يعد هذا العرض المستهدف أحد أقوى الأشياء في Elementor. يمكنك استخدام هذا لإنشاء صفحات مخصصة ومنشورات وحتى صفحات مقصودة داخل موقع WordPress الخاص بك.
تثبيت الهيدر أثناء التمرير
لإنشاء هيدر مثبت لقالب الهيدر الخاص بك ، كل ما عليك فعله هو الانتقال إلى اللوحة وتحديد متقدم > تأثير التمرير .
ثم اختر ” أعلى ” أو ” أسفل ” لجعل العنوان الذي أنشأته ” يلتصق ” بأعلى الصفحة أو أسفلها أثناء قيام المستخدم بالتمرير.
هناك ميزات إضافية لتحديد كيفية تحريك الهيدر ، ويمكنك أيضًا تحديد الأجهزة التي تريد أن يتم تطبيقها على سطح المكتب والجوال والكمبيوتر اللوحي.
هيدر العنصر الشفاف
إذا كنت تريد حقًا أن يثير الهيدر المخصص إعجابك ، فيمكنك إضافة الشفافية إليه عن طريق تغيير العتامة إلى رقم مثل 0.5 باستخدام بعض فئات CSS المخصصة و Elementor’s CSS.
بعد ذلك ، يمكنك دمجها مع ميزة الهيدر اللاصق ، لذلك عندما يقوم المستخدم بالتمرير ، سيكشف هيدر Elementor الشفاف الصفحة الموجودة خلفه.
تتطلب هذه الميزة القليل من التعليمات البرمجية ، ولكن لحسن الحظ ، فهي بسيطة مثل النسخ واللصق.
إليك فيديو Elementor رسمي يوضح كيف يتم ذلك.
إنشاء هيدر المحمول
يمنحك Elementor Pro الحرية في تخصيص هيدر هاتفك المحمول تمامًا مثلما تقوم بتخصيص صفحة.
يمكنك تحديد طريقة عرض الهاتف المحمول أو الجهاز اللوحي بالنقر فوق زر وضع الاستجابة الموجود في الجزء السفلي الأيسر من الشاشة ، أسفل لوحة عنصر واجهة المستخدم Elementor مباشرة.
بمجرد تحديده ، ستلاحظ ظهور شريط أعلى منطقة التحرير. يمكنك تحديد حجم الشاشة من هنا.
تشبه هذه العملية إلى حد كبير تحرير الصفحات باستخدام الإصدار المجاني من Elementor.
ملخص منشئ موضوع العنصر
هذه نظرة عامة سريعة على كيفية إنشاء رؤوس مخصصة في Elementor. إنه ليس حلاً مثاليًا ، ولكنه يمنحك الكثير من المرونة في إنشاء الهيدر المخصص الذي تحتاجه لموقع الويب الخاص بك.
باستخدام الشروط ، يتيح لك Theme Builder أيضًا إنشاء أكثر من هيدر واحد وتخصيصها لمناطق مختلفة على موقعك ، وهي فائدة كبيرة قد لا تحصل عليها مع قالبك الحالي.
هل تريد معرفة المزيد حول طريقة Theme Builder؟ إليك الفيديو الرسمي الذي يرشدك خلال إنشاء هيدر WordPress الخاص بك باستخدام Elementor’s Theme Builder.
الايجابيات منشئ السمات:
- يمنحك التخصيص الكامل لتصميم الهيدر الخاص بك
- يستخدم منشئ صفحات Elementor بديهيًا
- يتضمن مجموعة كبيرة من الحاجيات المفيدة
سلبيات منشئ السمات:
- لا يتضمن مخطط الترميز
- لا توجد قائمة ضخمة متضمنة
- يتطلب Elementor Pro (النسخة المدفوعة من Elementor)
بديل مجاني لـ Elementor Pro لإنشاء هيدر مخصص
يعد Theme Builder في Elementor Pro قويًا بلا شك ، ولكن للوصول إليه ، عليك شراء اشتراك Personal Elementor ، والذي يكلف 49 دولارًا سنويًا لموقع ويب واحد.
الخبر السار هو أنه إذا كنت تستخدم الإصدار المجاني من Elementor ، فلديك خيار آخر.
لقد أنشأنا مكونًا إضافيًا مجانيًا رائعًا يسمى المكون الإضافي Elementor – Header، Footer & Blocks . هذا ملحق لـ Elementor يسمح لك بإنشاء تخطيط وتعيينه كهيدر أو تذييل على موقع الويب الخاص بك.
كيف يعمل؟ الأمر سهل مثل 1-2-3:
- صمم تخطيطًا في Elementor كما تفعل عادةً
- عينه كهيدر
- سيتم تطبيق القالب الذي قمت بإنشائه تلقائيًا كهيدر
تمنحك الإضافة Elementor – Header، Footer & Blocks الكثير من الوظائف نفسها مثل Theme Builder في Elementor Pro ، مع ميزة إضافية لترميز المخطط .
لمعرفة كيفية تثبيت الإضافات اضغط هنا.
فائدة كبيرة أخرى لهذه الإضافة للبناء هي أنه يمكنك استخدامه مجانًا إلى أجل غير مسمى – لا داعي للقلق بشأن فقدان الوصول إذا لم تحتفظ باشتراك مدفوع.
تأتي تالإضافة مزودة بأدوات مدمجة تسهل عملية تصميم الهيدر.
توفر هذه الأدوات ميزات أساسية مطلوبة حتى لا تضطر إلى البحث عن مكونات إضافية.
- شعار الموقع
- عنوان الموقع
- سطر شعار الموقع
- قائمة الإبحار
- عنوان الصفحة
- حقوق النشر
يعمل هذا البرنامج المساعد مع جميع السمات. قليل من السمات لها توافق مدمج مع هذه الإضافة بينما ستحتاج لبعضها إلى اختيار طريقة توافق.
في حالة بعد تنشيط المكون الإضافي ، سترى إشعارًا للتحقق من طرق التوافق المتاحة.
انتقل إلى Appearance > Header Footer Builder > Theme Support ، وحدد طريقة مناسبة.
بمجرد إضافة دعم السمة ، ما عليك سوى تصميم مخطط باستخدام Elementor ، وتحديد ما إذا كان يجب تطبيقه كهيدر أو تذييل ، وقد انتهيت!
هل يجب عليك استخدام هيدر العنصر؟
حتى الآن في هذا المنشور ، نظرنا في بعض الطرق لإنشاء هيدر مخصص باستخدام Elementor. ولكن مع كل ما قيل ، هل يستحق بالفعل التخلي عن خيارات هيدر السمة الخاصة بك لصالح هيدر Elementor مخصص؟
ليس بالضرورة.
أكبر فائدة للالتصاق بالهيدر المدمج في القالب الخاص بك هو أنه مدعوم بالكامل بالفعل.
فيما يلي بعض الميزات التي قد يتضمنها المظهر الخاص بك:
- اختلافات تخطيط متعددة
- هيدر مثبت
- استجابة المحمول
- خيارات هيدر المحمول
- خيارات التصميم المخصصة
بعبارات أخرى،
إذا كان بإمكانك الحصول على الهيدر الذي تريده دون الحاجة إلى Elementor ، فقد تتمكن من إنهاء المهمة ببضع نقرات فقط. بواسطة إضافات اخرى فيمكنك فعل ذلك.
استنتاج
أصبح إنشاء مواقع ويب رائعة المظهر أسهل من أي وقت مضى باستخدام ميزات السحب والإفلات الخاصة بمنشئ صفحات WordPress الأكثر شيوعًا. بغض النظر عن النهج الذي تتبعه ، فمن المؤكد أن موقع الويب الخاص بك سيبدو ويعمل بشكل رائع مع Elementor! ليس هذا فقط ، ولكن يمكنك أيضًا تصميم مدونتك باستخدام Elementor .