تعد رؤوس وتذييلات موقع الويب عناصر أساسية. في معظم الحالات، يوفر الرأس روابط تنقل تسهل التنقل إلى أجزاء مختلفة من موقع الويب. ومن ناحية أخرى، يحتوي التذييل على معلومات حيوية قد يحتاجها زوار موقع الويب، مثل عنوان العمل أو معلومات الاتصال، على سبيل المثال لا amp .
يتم توفير الرؤوس والتذييلات من خلال السمة الحالية للمستخدم على WordPress. وهي عادةً ما تكون مصممة جيدًا وملائمة لغالبية استخداماتها. ومع ذلك، إذا كنت تريد تخصيص السمات الخاصة بك، فسيتعين عليك تغيير الكود؛ هذا هو الوقت الذي تصبح فيه plugin Page Builder في متناول اليد. يمكنك استخدامها لإنشاء مكونات صفحة الويب وتغييرها دون معرفة أي تعليمات برمجية.
سيعلمنا هذا البرنامج التعليمي كيفية إنشاء رأس وتذييل موقع الويب. سيتم استخدام Elementor Pro (نظرًا لأن الإصدار الأساسي من Elementor لا يتضمن الميزات الأكثر أهمية لإنشاء هذه المكونات). لذا قم بتنزيل Elementor Pro وتأكد من تشغيله.
- لماذا يجب عليك اختيار Elementor كمنشئ صفحتك؟
- يتيح لك Elementor اختيار التصميم الرئيسي للرأس والتذييل المخصصين لك.
- ما هو الرأس وماذا يفعل؟
- ما هو التذييل بالضبط؟
- كيفية صنع رأس
- تطوير قالب الرأس
- إجراء تغييرات على القائمة الرئيسية
- منشورات الرأس
- كيفية عمل تذييل
- تطوير قالب التذييل
- تعديلات التذييل
- المنتج النهائي
- افحص أقسام الرأس والتذييل للتأكد من الاستجابة.
- جلب الأمور إلى نهايتها
لماذا يجب عليك اختيار Elementor كمنشئ صفحتك؟
يعد Elementor منشئ الصفحات الأكثر تقدمًا، حيث يسمح للمستخدمين باستخدام عناصر متميزة لإنشاء تصميمات وتخطيطات رائعة. إنه مفيد جدًا للمبتدئين الذين ليس لديهم معرفة مسبقة بالبرمجة. يتيح محرر السحب والإفلات في Elementor للمستخدمين نقل عناصر واجهة المستخدم والعناصر.
Elementor هو منشئ صفحات مرئي يسمح للمستخدمين برؤية كيفية ظهور صفحاتهم دون تبديل الأوضاع.
حجة أخرى مقنعة لاستخدام Elementor هي أن معظم الأعمال يمكن إكمالها دون تكلفة. نسختهم المجانية أكثر من قادرة على توفير إمكانيات تحرير الموقع المناسبة. ومع ذلك، سنراجع الإصدارات المجانية والمدفوعة حتى تتمكن من اختيار أفضل ما يناسب احتياجاتك.
فيما يلي بعض الجوانب المهمة لـ Elementor التي تجعلها جديرة بالاهتمام:
- يتم دعم وظيفة السحب والإفلات.
- يحتوي على عدد كبير من القوالب.
- هناك أكثر من 90 عنصر واجهة مستخدم في المجمل.
- لا يلزم وجود أي ترميز للحصول على دعم سريع الاستجابة.
- تتوفر خيارات الإعادة والتراجع.
- الحفظ التلقائي متاح.
يتيح لك Elementor اختيار التصميم الرئيسي للرأس والتذييل المخصصين لك.
سيكون من المفيد أن تقرر الترتيب العام لأقسام الرأس والتذييل المطلوبة قبل تطوير رأس فريد. قد يوفر لك النظر إلى تخطيط قسم الرأس المُعد مسبقًا العديد من الخيارات.
يمكنك الاختيار من بين أقسام الرأس المختلفة؛ يتميز الرأس الأكثر شيوعًا وحداثة المظهر بشعار الموقع في أقصى الزاوية اليسرى، وشريط التنقل في المنتصف، وقسم شريط البحث على اليمين.
هناك احتمالات لا حصر لها، ويمكنك إنشاء أي تخطيط تريده.
لقد اخترت قالب الرأس رقم 7 المُعد مسبقًا؛ هذا هو الأسلوب الأكثر شيوعًا والبساطة لاستخدام الرأس على موقع WordPress. انسخ اسم قالب الرأس والصقه في قوالب > رأس > قالب البحث > الصق اسم الرأس المنسوخ .
عندما تجد قالب الرأس الذي تريده، حدد "تحرير باستخدام Elementor"، وسيتم نقلك إلى قسم منشئ رأس Elementor Pro.
دعونا نبدأ هذه الحفلة.
ما هو الرأس وماذا يفعل؟
يُطلق على الجزء العلوي من صفحة الويب الخاصة بك اسم "رأس موقع الويب". عادة ما يكون الرأس هو نفسه عبر موقع الويب الخاص بك بالكامل. ومع ذلك، تستخدم بعض مواقع الويب رؤوسًا مختلفة لأجزاء مختلفة من الموقع.
سيعطي تصميم الرأس الخاص بك للمستخدمين انطباعهم الأول عن موقع الويب الخاص بك، سواء وصلوا إلى صفحتك الرئيسية، أو صفحة حول، أو أي محتوى فردي آخر. وإذا كان مصممًا بشكل جيد، فسوف يجذب انتباه المستخدم ويغريه لمواصلة التمرير والقراءة.
يمكن أن يساعد العنوان أيضًا في الترويج لهوية العلامة التجارية لشركتك.
أستخدم ميزات مثل شعار الشركة والخط والألوان ولغة العلامة التجارية الشاملة.
التنقل في الموقع، والبحث في الموقع، وعربة التسوق (لمواقع المبيعات)، وأزرار الحث على اتخاذ إجراء (CTA)، وغيرها من الميزات التي تعمل على تحسين تجربة المستخدم ورفع معدلات التحويل، كلها موجودة في الرؤوس.
ما هو التذييل بالضبط؟
التذييل هو قسم من صفحة الويب يظهر في أسفل الصفحة. وعادة ما يتم عرضها باستمرار في جميع أنحاء الموقع، وفي جميع الصفحات والمشاركات، على غرار العناوين.
كثيرًا ما يتم تجاهل التذييلات، وهو ما يعد إهدارًا للإمكانات، نظرًا لأنها تظهر في كل صفحة من صفحات الموقع. إنها بنفس القدر من الأهمية بالنسبة للرؤوس.
يمكن أن يعرض تصميم التذييل الخاص بك معلومات مفيدة وحيوية مثل تسجيل الرسائل الإخبارية ومعلومات حقوق الطبع والنشر وشروط الاستخدام والخصوصية وخريطة الموقع ومعلومات الاتصال والخرائط والتنقل في موقع الويب وغير ذلك الكثير، اعتمادًا على الإعدادات التي تختارها.
كيفية صنع رأس
سنقوم بإنشاء رأس مخصص في هذا القسم. لا تقلق إذا كان ذلك يبدو مخيفًا؛ لن نبدأ من الصفر. بدلاً من ذلك، سنستخدم قوالب Elementór Pro، التي صممها فريق التصميم في Elementor.
تطوير قالب الرأس
في لوحة إدارة WordPress، قم بالتمرير فوق القوالب وانقر فوق إضافة جديد لإنشاء رأسنا.
ستظهر نافذة مشروطة بمجرد أن يتم توجيهك. حدد الرأس من القائمة المنسدلة، وقم بتسمية الرأس، ثم انقر فوق " إنشاء قالب ":
سيؤدي هذا إلى تشغيل محرر Elementor. بعد ذلك، ستظهر لك قائمة بالنماذج التي يمكنك الاختيار منها. لذا اختر واحدة تنال إعجابك:
من المفترض أن يظهر أعلى قسم تحرير Elementor بمجرد اختيار القالب:
إنشاء شعار: الخطوة الأولى هي إنشاء شعار. قم بتعيين الشعار في Live Editor الخاص بالموقع لوضعه في Header. اختر شعارًا بالنقر فوق "هوية الموقع".
بمجرد اتخاذ قرار بشأن الشعار، انقر فوق نشر .
يجب أن يكون شعار موقعك الآن في الرأس إذا قمت بتحديث واجهة Elementor:
وبعد ذلك، يمكنك إجراء أي تغييرات تريدها.
إجراء تغييرات على القائمة الرئيسية
والشيء التالي الذي يتعين علينا القيام به هو تغيير القائمة. إذا قمت بإنشاء قائمة، فسيقوم القالب بدمجها تلقائيًا:
إليك بنية القائمة الخاصة بنا، والتي يمكنك رؤيتها تنعكس في قالب الرأس:
إذا كان لديك أكثر من قائمة واحدة، فيمكنك تحديث المحتويات إذا لزم الأمر.
يمكنك تعديل خصائصه تمامًا مثل أي عنصر واجهة مستخدم آخر.
إذا كنا بحاجة إلى إضافة المزيد من العناصر، يمكننا إضافة المزيد من الأقسام إلى رأسنا:
لنبدأ بإضافة رأس وبعض أيقونات الوسائط الاجتماعية:
وبعد ذلك يمكنك إجراء أي تغييرات تريدها. وإليك كيف تم تحريرنا:
منشورات الرأس
يمكنك الآن نشر الرأس بمجرد الانتهاء من تعديله. سنستخدم الرأس على موقعنا بالكامل في المثال amp ، لذلك سنحدد هذا الاختيار بعد تحديد إضافة شرط:
وإليك amp لصفحة من موقعنا المباشر:
كيفية عمل تذييل
تطوير قالب التذييل
تشبه عملية إنشاء التذييل إلى حد ما عملية إنشاء الرأس. لإنشاء قالب، قم بإنشاء قالب تذييل جديد مثل هذا:
ثم اتخاذ قرار بشأن القالب. تأتي التذييلات في مجموعة متنوعة من الأشكال والأحجام. يتضمن بعضها معلومات ثابتة، بينما يحتوي البعض الآخر على نماذج اتصال. حدد القالب المناسب لمتطلباتك.
القالب الذي اخترناه لموقعنا هو كما يلي:
تعديلات التذييل
سترى الرأس بمجرد بدء التحرير (إذا قمت بتعيين شرط ظهوره في جميع الصفحات).
قم بتغيير التذييل حسب الحاجة؛ هكذا تبدو مراجعتنا:
انشر التذييل بعد الانتهاء:
المنتج النهائي
وإليك كيف تبدو النتيجة النهائية. يتم الآن استخدام كل من الرأس والتذييل على موقعنا:
افحص أقسام الرأس والتذييل للتأكد من الاستجابة.
هذه هي المرحلة الأكثر أهمية، ويجب عليك التأكد من استجابة أقسام الرأس والتذييل لديك. نظرًا لأن القائمة ذات العرض الكامل لا تتناسب عادةً مع عرض الهاتف المحمول، يجب أن تعرف كيف سيظهر تصميمك على شاشة الهاتف المحمول. يمكن للمفاتيح المستجيبة الموجودة أسفل قسم الشريط الجانبي Elementor تغيير إصدارات الهاتف المحمول وعلامة التبويب.
يمكنك اختبار مدى استجابة رأسك وتذييلك بطرق مختلفة. على سبيل amp ، يمكنك استخدام أدوات مثل Browserstack، وCrossBrowser Testing، وGoogle Resizer للتأكد من أن صفحات الويب الخاصة بك تستجيب قدر الإمكان. يمكنك أيضًا القيام بذلك يدويًا عن طريق تجربة أجهزة مختلفة.
جلب الأمور إلى نهايتها
آمل أن يكون هذا الدليل قد ساعدك في تطوير أقسام الرأس والتذييل الفريدة بسرعة باستخدام Elementor Pro. يحتوي WordPress على العديد من الميزات، لكنه يسمح فقط ببعض التعديلات في أقسام الرأس والتذييل، والتي تم إصلاحها أخيرًا باستخدام أداة إنشاء الصفحات Elementor Pro. بفضل التحكم الأفضل في عناصر موقعك، يمكنك الآن إظهار رؤية موقعك بشكل أفضل. علاوة على ذلك، تم تحسين وظائف Elementor باستخدام إضافات مجانية، مما يسمح للمستخدمين بتخصيص مواقع الويب الخاصة بهم بقدرات أكثر تقدمًا.
