إنشاء موقع ويب ذو صفحة واحدة مع التنقل في صفحة واحدة في WordPress (مع مكافأة)

هل تتطلع إلى إنشاء موقع ويب لعملك ولكن ليس لديك الوقت لإنشاء موقع كبير؟ أو لست مستعدًا للالتزام بصيانة موقع الويب لفترة طويلة؟

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

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

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

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

ما هو التنقل في صفحة واحدة؟

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

"البساطة هي التطور في نهاية المطاف." - ليوناردو دافنشي

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

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

ما هي فوائد موقع الصفحة الواحدة مع التنقل في صفحة واحدة؟

لا يجب أن تفكر في الحصول على موقع ويب من صفحة واحدة لعملك لمجرد أن عملك صغير. هناك الكثير من الفوائد الأخرى لامتلاك موقع ويب من صفحة واحدة وخاصة موقع WordPress من صفحة واحدة. دعنا نلقي نظرة على بعض الإيجابيات:

• أولاً ، إنه متوافق مع الجوّال. هذا شيء مهم يجب مراعاته عندما يتعلق الأمر بـ SEO (تحسين محرك البحث). اعتبارًا من عام 2021 ، يستخدم 70 ٪ من المواطنين الأمريكيين جهازًا محمولًا للبحث على الإنترنت. مثل هذه البيانات هي سبب إعطاء Google الأولوية لموقع الويب المتوافق مع الجوّال. مع تصميم صفحة واحدة ، يحصل موقع الويب الخاص بك على كتب Google الجيدة منذ البداية.

• يفضل معظم الناس موقعًا بسيطًا وجميلًا ومباشرًا بدلاً من موقع طويل بلا داعٍ.
• تحسب Google سلطة الارتباط على مستوى الصفحة والنطاق بدرجة 40٪. هذا مجال آخر حيث سيكون لموقعك المكون من صفحة واحدة ميزة.
• يتم تحميل مواقع الويب ذات الصفحة الواحدة بشكل أسرع من مواقع الويب التي تحتوي على عدد كبير من الصفحات. بالنظر إلى حقيقة أن الأشخاص في الوقت الحاضر لديهم خيارات غير محدودة ، فإن امتلاك موقع سريع التحميل هو حقًا غير قابل للتفاوض.
• من السهل الحفاظ على مواقع صفحة واحدة.
• نظرًا لأن موقع الويب الذي يحتوي على صفحة واحدة يحتوي على جميع المعلومات في صفحة واحدة ، فإن التنقل بالتمرير يجعل التنقل أسهل كثيرًا كما أن تأثير التمرير السلس يجعل تجربة المستخدم تجربة مريحة.

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

كيفية إنشاء موقع ويب واحد باستخدام التنقل في صفحة واحدة في WordPress

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

لذلك دعونا نبدأ…

الخطوة رقم 1: قم بتثبيت ملحقات WordPress المطلوبة

بمجرد تثبيت WordPress على نظامك. تحتاج إلى تثبيت مكونات WordPress الإضافية التالية:

• Elementor (نسخة مجانية)
• ElementsKit (الإصداران المجاني والمحترف على حد سواء)
• MetForm (نسخة مجانية)

بمجرد الانتهاء من تثبيت وتفعيل مكونات WordPress الإضافية المطلوبة ، فقد حان الوقت لإنشاء الموقع.

الخطوة # 2: قم بإنشاء موقع ويب باستخدام صفحة ElementsKit معدة مسبقًا

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

لإنشاء موقع الويب الخاص بك ، من لوحة تحكم WordPress ، انتقل إلى الصفحات ⇒ إضافة جديد

• أعط عنوانًا مثل الصفحة الرئيسية ، واختر Elementor Full Width من خيارات النموذج
• انقر لنشر وبعد النشر ، انقر فوق تحرير باستخدام Elementor

• انقر فوق زر ElementsKit (EK) بمجرد فتح نافذة Elementor Builder

• انتقل إلى علامة التبويب الصفحة ، وابحث عن صفحة الزفاف وانقر على إدراج

الآن انقر فوق التحديث للحفظ

الخطوة # 3: كيفية إضافة التنقل في صفحة واحدة Elementor باستخدام ElementsKit

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

الآن ، دعنا نلقي نظرة على العملية خطوة بخطوة لإضافة رابط تنقل تمرير صفحة واحدة إلى موقع WordPress الخاص بك:

3.1 قم بتشغيل وحدة التمرير على الصفحة

لإضافة تنقل بالتمرير إلى موقع WordPress الخاص بك ، نحتاج أولاً إلى تشغيل On Page Scroll Module.

• انتقل إلى: WordPress Dashboard ⇒ ElementsKit Modules
• قم بتشغيل التمرير على الصفحة
• انقر فوق حفظ التغييرات للتحديث

3.2 تمكين تمرير صفحة واحدة من إعدادات الصفحة

• انقر فوق رمز الإعدادات في الزاوية اليسرى السفلية من لوحة Elementor
• افتح علامة التبويب إعدادات ElementsKit
• تفعيل خيار On Page Scroll

ملاحظة: إذا لم تتمكن من العثور على خيار On Page Scroll Setting ، فمن المحتمل أنك لم تقم بتنشيط ElementsKit Pro

3.3 اختر نمط التنقل

حان الوقت الآن لاختيار نمط التنقل. تمنحك ElementsKit خيارات متعددة للتنقل. على سبيل المثال ، تحت الدائرة ، ستحصل على مقياس ، وملء ، وملء ، وما إلى ذلك. بالنسبة لنمط المربع ، سيكون لديك خيارات مثل توسيع النطاق وكجزء من الخط ، ستحصل على خيارات مثل الخط الذي يجب أن ينمو ، وملء الخط ، تقليص الخط ، إلخ.

يمكنك اختيار أي نمط تريده ، وسأختار الرمز المخصص لهذه المدونة. بمجرد اختيار رمز مخصص ، ستحصل على خيار لاختيار رمز لخيار One Page Scroll Navigation Style. يمكنك اختيار رمز إما من مكتبة الرموز أو تحميل رمز SVG مخصص.

لاختيار رمز مخصص

• اختر خيار Custom Icon من القائمة المنسدلة لنمط التنقل
• قم بالمرور على أيقونة التنقل وانقر على مكتبة الأيقونات
• ابحث وأدخل الرمز الذي تريده

3.4 قم بإعداد إعدادات التنقل الأخرى

بمجرد اختيار نمط التنقل ، ستتمكن من الوصول إلى الإعدادات التالية:

• وضع التنقل: يمكنك تعيين موضع التنقل على أنه أعلى أو يمين أو أسفل أو يسار.
• إزاحة موضع التنقل: هنا يمكنك اختيار قيمة إزاحة موضع التنقل.
• تباعد التنقل: اختر المساحة التي تريدها بين كل رمز تنقل.
• لون التنقل: اختر لونًا لرمز التنقل.
• طباعة تلميح الأدوات: هنا يمكنك اختيار العائلة وحجم الخط وتحويل الوزن والأسلوب والديكور وارتفاع الخط لتلميح الأداة.

3.5 إضافة أقسام الصفحة إلى روابط التنقل

الآن وقد تم الانتهاء من جميع الإعدادات ، حان الوقت لإضافة الأقسام التي تريد ظهورها في قائمة التنقل. لنفعل ذلك

• قم بالمرور فوق القسم وانقر على أيقونة تحرير القسم
• انتقل إلى علامة التبويب خيارات متقدمة
• قم بتوسيع خيار ElementsKit Onpage Scroll
• قم بتشغيل تمكين القسم لجعل القسم مرئيًا
• قم بتشغيل خيار تمكين do t لإضافة هذا القسم كأحد روابط التنقل
• أدخل اسمًا لنص تلميح الأداة . سيظهر نص تلميح الأداة عندما يقوم شخص ما بالمرور فوق الارتباط
• أخيرًا ، انقر فوق "تحديث" للحفظ

يمكنك تكرار نفس العملية المذكورة أعلاه لإضافة جميع الأقسام التي تريدها إلى قائمة التنقل.

ملاحظة: يمكنك إضافة قسم إلى التنقل وليس القسم الداخلي. لذلك ، لن تجد خيار ElementsKit Onpage Scroll ضمن علامة التبويب المتقدمة للقسم الداخلي أو أي عنصر واجهة مستخدم آخر.

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

الخطوة رقم 4: إضافة Header Footer باستخدام قسم تذييل رأس الصفحة ElementsKit

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

توفر لك ElementsKit العديد من أقسام الرأس والتذييل المعدة مسبقًا للاختيار من بينها. لاستخدام تذييل رأس ElementsKit:

• انتقل إلى ElementsKit ⇒ Header Footer ⇒ انقر فوق Add New

• اختر النوع كرأس ، الشروط كموقع كامل ، قم بتشغيل خيار تنشيط / إلغاء التنشيط ، ثم انقر أخيرًا على حفظ التغييرات .

• الآن لإضافة قسم الرأس ، انقر فوق تحرير في القائمة التي قمت بإنشائها
• انقر فوق تحرير المحتوى
• انقر فوق زر EK وانتقل إلى علامة التبويب "الأقسام"
• اختر تصميم العنوان الذي تريده وانقر فوق إدراج

يمكنك متابعة الفيديو أدناه لإنشاء تذييل رأس جميل لموقعك على الويب.

ملاحظة: يمكنك اتباع نفس خطوات Header لإنشاء قسم تذييل لموقع الويب الخاص بك باستخدام أقسام Premade بواسطة ElementsKit.

الخطوة رقم 5: إضافة نموذج الاتصال على شكل نافذة منبثقة مشروطة (BONUS)

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

لإضافة نافذة منبثقة مشروطة ، سأستبدل زر RSVP بنوافذ منبثقة وأضيف نموذج اتصال إليه.

• انتقل إلى ElementsKit ⇒ Widgets ⇒ قم بتشغيل Popup modal انقر فوق حفظ التغييرات

• انتقل إلى صفحة All Page الرئيسية (أو أيًا كانت صفحتك التي قمت بتسميتها) وانقر فوق تحرير باستخدام Elementor

• في وضع التحرير ، قم بالتمرير إلى قسم RSVP واحذف زر RSVP
• سحب وإسقاط المنبثقة مشروطة على مكان زر RSVP

• لتغيير نص الزر المشروط ، انتقل إلى المحتوى ⇒ زر التبديل ⇒ تسمية وتغيير "فتح الوضع" إلى RSVP (أو أي شيء تريده)

• انتقل إلى علامة تبويب النمط ⇒ زر التبديل لتغيير لون خلفية الزر ولون النص ونصف قطر الحدود والإعدادات الأخرى لكل من العرض العادي وطريقة التمرير.

• انتقل الآن إلى المحتوى وقم بتشغيل وضع تمكين القالب حتى نتمكن من إضافة نموذج الاتصال الخاص بنا.
• انقر فوق الزر المنبثق. بمجرد الفتح ، انقر فوق رمز التحرير في الجسم لفتح محرر Elementor

• ابحث عن Metform ، واسحب الأداة وأفلتها
• انقر فوق نموذج التحرير لاختيار نموذج الاتصال
• اختر النموذج الذي تريده من القائمة وانقر على حفظ وإغلاق
• أخيرًا ، انقر فوق "تحديث" للحفظ

ملاحظة: لقد قمت بالفعل بإنشاء نموذج RSVP باستخدام Metform وقمت أيضًا بتغيير اللون والنمط قليلاً لمطابقة قالب الصفحة المقصودة الذي نستخدمه. يمكنك التحقق من المدونة حول كيفية إنشاء نماذج الاتصال وتصميمها باستخدام Metform .

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

الخطوة # 6: قم بالتحديث والاطلاع على معاينة موقع الويب الفردي باستخدام ميزة التنقل في صفحة واحدة

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

بشرط أن تكون قد اتبعت جميع الخطوات بشكل صحيح ، يجب أن تحصل على موقع ويب من صفحة واحدة يحتوي على صفحة واحدة للتنقل في WordPress مثل الموقع أدناه:

يتم إحتوائه

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

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

لمعرفة المزيد حول إنشاء مواقع الويب باستخدام WordPress و Elementor و Magical ElementsKit ، تابعنا على حساباتنا على وسائل التواصل الاجتماعي.