تعتبر رؤوس وتذييلات موقع الويب من العناصر الأساسية. في معظم الحالات ، يوفر الرأس ارتباطات تنقل تعمل على تبسيط التنقل إلى أجزاء مختلفة من موقع الويب. من ناحية أخرى، تذييل يحتوي على المعلومات الحيوية التي زوار الموقع قد تتطلب، مثل عنوان العمل أو معلومات الاتصال، على سبيل المثال لا الحصر السابق amp ليه.
يتم توفير الرؤوس والتذييلات بواسطة الموضوع الحالي للمستخدم على WordPress. هذه عادة ما تكون جيدة التصميم ومناسبة لغالبية استخداماتها. ومع ذلك ، إذا كنت ترغب في تخصيص السمات الخاصة بك ، فسيتعين عليك تغيير الكود ؛ هذا هو الوقت الذي تصبح فيه plugin الإضافية Page Builder مفيدة. يمكنك استخدامها لإنشاء مكونات صفحة الويب وتغييرها دون معرفة أي رمز.
سيعلمنا هذا البرنامج التعليمي كيفية إنشاء رأس وتذييل موقع ويب. سيتم استخدام Elementor Pro (نظرًا لأن الإصدار الأساسي من Elementor لا يتضمن الميزات الأكثر أهمية لإنشاء هذه المكونات). لذا قم بتنزيل Elementor Pro وتأكد من تشغيله.
Elementor هو أداة إنشاء الصفحات الأكثر تقدمًا ، مما يسمح للمستخدمين باستخدام عناصر متميزة لإنشاء تصميمات وتخطيطات رائعة. إنه مفيد جدًا للمبتدئين الذين ليس لديهم معرفة مسبقة بالبرمجة. يسمح محرر السحب والإسقاط في Elementor للمستخدمين بتحريك عناصر واجهة المستخدم والعناصر.
Elementor هو منشئ الصفحات المرئي الذي يسمح للمستخدمين برؤية كيف تظهر صفحاتهم دون تبديل الأوضاع.
حجة مقنعة أخرى لاستخدام Elementor هي أنه يمكن إكمال معظم العمل دون تكلفة. نسختهم المجانية أكثر من قادرة على توفير إمكانات مناسبة لتحرير الموقع. ومع ذلك ، سنستعرض كلاً من الإصدارات المجانية والمدفوعة حتى تتمكن من اختيار أفضل ما يناسب احتياجاتك.
فيما يلي بعض الجوانب المهمة لـ Elementor التي تجعلها جديرة بالاهتمام:
قد يساعدك إذا قررت الترتيب العام لأقسام الرأس والتذييل التي تريدها قبل تطوير رأس فريد. قد يوفر لك النظر إلى تخطيط قسم الرأس المعد مسبقًا العديد من الخيارات.
يمكنك الاختيار من بين أقسام الرأس المختلفة ؛ يتميز العنوان الأكثر شيوعًا وحداثة المظهر بشعار موقع في الزاوية اليسرى القصوى وشريط تنقل في المنتصف وقسم شريط بحث على اليمين.
هناك احتمالات لا حصر لها ، ويمكنك إنشاء أي تخطيط تريده.
لقد اخترت القالب الرأسي المعد مسبقًا رقم 7 ؛ هذا هو الأسلوب الأكثر شيوعًا وبسيطًا لاستخدام رأس الصفحة على موقع WordPress. انسخ والصق اسم قالب الرأس في القوالب> الرأس> قالب البحث> الصق اسم الرأس المنسوخ .
عندما تعثر على قالب العنوان الذي تريده ، حدد "تحرير باستخدام Elementor" ، وسيتم نقلك إلى قسم Elementor Pro header builder.
دعونا نبدأ هذه الحفله.
يُطلق على الجزء العلوي من صفحة الويب الخاصة بك اسم "رأس موقع الويب". عادةً ما يكون الرأس هو نفسه عبر موقع الويب بالكامل. ومع ذلك ، تستخدم بعض مواقع الويب رؤوسًا مختلفة لأجزاء مختلفة من الموقع.
سيعطي تصميم العنوان الخاص بك المستخدمين انطباعهم الأول عن موقع الويب الخاص بك ، سواء كانوا قد وصلوا إلى صفحتك الرئيسية أو حول الصفحة أو أي محتوى فردي آخر. وإذا كان مصممًا جيدًا ، فسوف يجذب انتباه المستخدم ويغريه لمواصلة التمرير والقراءة.
يمكن أن يساعد Header أيضًا في الترويج لهوية العلامة التجارية لشركتك.
أستخدم ميزات مثل شعار الشركة والخط والألوان ولغة العلامة التجارية الشاملة.
تم العثور على التنقل في الموقع ، والبحث في الموقع ، وعربة التسوق (لمواقع المبيعات) ، وأزرار الحث على اتخاذ إجراء (CTA) ، وغيرها من الميزات التي تعمل على تحسين تجربة المستخدم ورفع معدلات التحويل في العناوين.
التذييل هو قسم من صفحة الويب يظهر أسفل الصفحة. عادة ما يتم عرضها باستمرار في جميع أنحاء موقع الويب ، في جميع الصفحات والمنشورات ، على غرار الرؤوس.
كثيرًا ما يتم تجاهل التذييلات ، وهو ما يعد إهدارًا للإمكانيات ، نظرًا لظهورها في كل صفحة من صفحات الموقع. إنها مهمة بنفس القدر للرؤوس.
يمكن أن يعرض تصميم تذييل الصفحة معلومات مفيدة وحيوية مثل تسجيل النشرة الإخبارية ومعلومات حقوق النشر وشروط الاستخدام والخصوصية وخريطة الموقع ومعلومات الاتصال والخرائط والتنقل في موقع الويب وغير ذلك الكثير ، اعتمادًا على الإعدادات التي تختارها.
سنقوم بإنشاء رأس مخصص في هذا القسم. لا تقلق إذا كان ذلك يبدو مخيفًا ؛ لن نبدأ من الصفر. بدلاً من ذلك ، سنستخدم قوالب Elementór Pro ، التي صممها فريق تصميم Elementor.
في لوحة إدارة WordPress ، مرر مؤشر الماوس فوق القوالب وانقر فوق إضافة جديد لإنشاء عنواننا.
ستظهر نافذة مشروطة بمجرد توجيهك. حدد Header من القائمة المنسدلة ، وقم بتسمية Header ، ثم انقر فوق " إنشاء نموذج ":
سيؤدي هذا إلى تشغيل محرر Elementor. بعد ذلك ، ستظهر لك قائمة بالقوالب للاختيار من بينها. لذا اختر واحدًا يروق لك:
يجب أن يظهر أعلى قسم تحرير Elementor بمجرد اختيار قالب:
إنشاء شعار: الخطوة الأولى هي إنشاء شعار. قم بتعيين الشعار في Live Editor بالموقع لوضعه في الرأس. اختر شعارًا بالنقر فوق Site Identity.
بمجرد أن تقرر الشعار ، انقر فوق نشر .
يجب أن يكون شعار موقعك الآن في الرأس إذا قمت بتحديث واجهة Elementor:
بعد ذلك ، يمكنك إجراء أي تغييرات تريدها.
الشيء التالي الذي يجب أن نفعله هو تغيير القائمة. إذا قمت بإنشاء قائمة ، فسيقوم القالب بتضمينها تلقائيًا:
إليك هيكل القائمة الخاص بنا ، والذي يمكنك رؤيته ينعكس في قالب الرأس:
إذا كان لديك أكثر من قائمة ، فيمكنك تحديث المحتويات إذا لزم الأمر.
يمكنك تحرير خصائصه تمامًا مثل أي عنصر واجهة مستخدم آخر.
إذا احتجنا إلى إضافة المزيد من العناصر ، فيمكننا إضافة المزيد من الأقسام إلى رأسنا:
لنبدأ بإضافة رأس وبعض أيقونات الوسائط الاجتماعية:
بعد ذلك ، يمكنك إجراء أي تغييرات تريدها. إليك كيف انتهى تعديلنا:
يمكنك الآن نشر الرأس بمجرد الانتهاء من تعديله. سنستخدم العنوان على موقعنا بالكامل في ex amp le أدناه ، لذلك سنحدد هذا الخيار بعد تحديد Add Condition:
وهنا بحكم amp لو صفحة من الموقع مباشرة لدينا:
تشبه عملية إنشاء تذييل إلى حد ما عملية إنشاء رأس الصفحة. لإنشاء واحد ، قم بإنشاء قالب تذييل جديد مثل هذا:
ثم حدد القالب. تأتي التذييلات في مجموعة متنوعة من الأشكال والأحجام. يتضمن بعضها معلومات ثابتة ، بينما لدى البعض الآخر نماذج اتصال. حدد قالبًا مناسبًا لمتطلباتك.
النموذج الذي اخترناه لموقعنا هو كما يلي:
سترى الرأس بمجرد بدء التحرير (إذا قمت بتعيين الشرط الذي يظهر في جميع الصفحات).
تغيير التذييل حسب الحاجة ؛ هكذا تبدو مراجعتنا:
انشر التذييل بعد انتهائه:
إليك كيف تبدو النتيجة النهائية. يتم الآن استخدام كل من الرأس والتذييل على موقعنا على الويب:
هذه هي المرحلة الأكثر أهمية ، ويجب عليك التأكد من استجابة أقسام الرأس والتذييل. نظرًا لأن قائمة العرض الكامل لا تتناسب عادةً مع عرض الهاتف المحمول ، يجب أن تعرف كيف سيظهر تصميمك على شاشة الهاتف المحمول. يمكن للمفاتيح المستجيبة الموجودة أسفل قسم الشريط الجانبي Elementor تغيير إصدارات الأجهزة المحمولة وعلامات التبويب.
يمكنك اختبار استجابة رأس الصفحة وتذييلها بطرق مختلفة. لالسابقين amp جنيه، يمكنك استخدام أدوات مثل Browserstack، التوافقية مع متصفحات الويب اختبار، وجوجل رسزر للتأكد من أن صفحات الويب الخاصة بك هي تستجيب ممكن. يمكنك أيضًا القيام بذلك يدويًا عن طريق تجربة أجهزة مختلفة.
آمل أن يساعدك هذا الدليل في التطوير السريع لأقسام الرأس والتذييل الفريدة الخاصة بك باستخدام Elementor Pro. يحتوي WordPress على العديد من الميزات ، ولكنه يسمح فقط ببعض التعديلات في أقسام الرأس والتذييل ، وأخيراً تم إصلاحه باستخدام منشئ الصفحة Elementor Pro. مع تحكم أفضل بكثير في عناصر موقعك ، يمكنك الآن إظهار رؤية موقعك بشكل أفضل. علاوة على ذلك ، تم تحسين وظائف Elementor باستخدام الوظائف الإضافية المجانية ، مما يسمح للمستخدمين بتخصيص مواقع الويب الخاصة بهم بقدرات أكثر تقدمًا.
اثنان من أكثر موضوعات WordPress شيوعًا في السوق هما Astra و OceanWP. احترافي…
لا يتطلب إنشاء موقع إخباري ممتاز أن تصبح مصمم ويب. نحن…
تعد سمة الجريدة واحدة من أهم سمات WordPress التي صممها tagDiv ، وهو ...
عندما يتعلق الأمر بإعداد متجر على الإنترنت ، فإن WooCommerce هو plugin go-to. هو - هي…
عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك ، ...
مُنشئ الصفحات الخاص بنا ، Avada Builder ، متاح الآن في واجهتين: Avada ...