كيفية إنشاء موقع ويب بصفحة واحدة باستخدام Elementor (طريقة مجانية)

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

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

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

ما هو موقع الويب ذو الصفحة الواحدة، ومتى يعمل فعليًا

يضع موقع الويب المكون من صفحة واحدة كل المحتوى الخاص بك على عنوان URL واحد. بدلا من الانتقال إلى /about أو /services، تنتقل القائمة إلى الأقسام المثبتة في نفس الصفحة.

يعمل بشكل جيد ل:

• المستقلون يعرضون محفظة صغيرة
• الصفحات المقصودة للحدث (حفل زفاف، مؤتمر، إطلاق المنتج)
• شركات الخدمات الصغيرة (استشاريون، حلاقون، مصممون)
• الصفحات القادمة قريبًا أو إعلانات MVP
• السيرة الذاتية والمحافظ الشخصية

إنه يعمل بشكل أقل جودة من أجل:

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

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

ما تحتاجه قبل أن تبدأ

ثلاثة مكونات:

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

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

اختر الموضوع الصحيح وقالب الصفحة

تثبيت Hello Elementor من المظهر > السمات > إضافة جديد. إنها قائمة فارغة: لا توجد أشرطة جانبية، ولا أنماط افتراضية، ولا آراء. يقوم Elementor برسم الصفحة بأكملها.

بمجرد أن يصبح نشطًا:

1. إنشاء صفحة جديدة (الصفحات > إضافة جديد).
2. افتحه في العنصر.
3. انقر فوق ترس الإعدادات في أسفل اليسار، وانتقل إلى تخطيط الصفحة، واختيار قماش العنصر.

يقوم Canvas بتجريد رأس وتذييل WordPress. يصبح جهاز النداء الواحد الخاص بك هو الصفحة بأكملها.

إذا كنت تريد مقارنة خيارات السمة، فإن أفضل سمات WordPress خفيفة الوزن لـ Elementor يغطي Roundup البدائل، ولكن Hello هو الإعداد الافتراضي لسبب ما.

الأقسام الـ 11 لتخطيط عنصر الصفحة الواحدة

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

1. قائمة التنقل (لزجة)
2. قسم البطل
3. عن
4. الخدمات أو الميزات
5. فريق
6. المحفظة أو دراسات الحالة
7. التسعير
8. الشهادات
9. نموذج الاتصال
10. الرموز الاجتماعية
11. تذييل

ليس كل موقع يحتاج إلى الأحد عشر. ربما يتخطى الموظف المستقل المنفرد الفريق. قد يتخطى مستشار B2B التسعير. اختر تلك التي تقرب زائرك من الاتصال بك، وقم بإسقاط الباقي.

إنشاء قائمة التنقل

أولاً، قم بإنشاء القائمة في WordPress: المظهر > القوائم > إنشاء قائمة جديدة.

إضافة روابط مخصصة مع عناوين URL للعنصر النائب. في الوقت الحالي، استخدم التجزئة (#) متبوعة باسم القسم: #about, #services, #pricing. ستقوم بتوصيلها بشكل صحيح في النهاية، بمجرد أن يكون لكل قسم معرف مطابق.

احفظ القائمة.

الآن، داخل Elementor، قم بإسقاط قسم في الأعلى بعمودين. ضع شعارك في العمود الأيسر. بالنسبة للعمود الأيمن، لديك خياران:

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

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

تصميم قسم البطل

البطل يحدد النغمة. اجعلها قصيرة: وعد، خط داعم، زر.

أضف قسمًا جديدًا أسفل القائمة مباشرةً. افتح إعدادات القسم وقم بتعيين:

• عرض المحتوى: العرض الكامل
• ارتفاع: مناسب للشاشة
• محاذاة عمودية: وسط

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

إذا كنت تريد السبق، يقوم Master Addons بشحن قوالب قسم البطل في مكتبة القوالب. قم باستيراد واحدة، وقم بتبديل النسخة والصورة، وستنتهي في بضع دقائق.

أضف قسم حول

لا شيء يتوهم هنا. قسم قياسي بعمودين:

• العمود الأيسر: صورة (صورتك أو صورة فريقك أو مساحة عملك)
• العمود الأيمن: العنوان + محرر النص + الزر

قم بتوجيه رابط ربط الزر في قسم الخدمات أدناه (“شاهد ما أفعله”) حتى يظل لدى الزائرين الذين يمرون عبر About مسار واضح للأمام.

بناء قسم الخدمات

هذا هو المكان الذي تكتسب فيه أداة Infobox مكانها. يحتوي Free Elementor على Icon Box، ولكنه محدود. الإضافات الرئيسية القطعة صندوق المعلومات يمنحك تخطيطات متعددة، وموضع الأيقونات، وحالات التمرير، وحقل URL في المربع بأكمله بحيث تكون البطاقة بأكملها قابلة للنقر عليها.

قم بإنشاء قسم، وأضف عنوانًا (“Services” أو“What I Do”)، ثم ينقسم القسم الداخلي إلى ثلاثة أو أربعة أعمدة. إسقاط صندوق معلومات واحد لكل عمود.

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

إضافة قسم الفريق

تخطي هذا القسم إذا كنت منفردًا.

لعدد 1-4 أشخاص: استخدم أداة عضو الفريق. يحصل كل عضو على بطاقة تحتوي على صورة واسم ودور وسيرة ذاتية قصيرة وأيقونات اجتماعية.

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

احتفظ بجميع صور الفريق بنفس نسبة المحصول والعرض. تبدو أحجام الرأس غير المتطابقة في الشبكة أقل مما تتوقع. التوثيق: القطعة عضو الفريق و دائري أعضاء الفريق. للحصول على دليل مستقل، انظر كيفية إنشاء قسم لأعضاء الفريق.

إضافة محفظة قابلة للتصفية

يعد معرض صور Elementor المجاني مناسبًا للشبكة الثابتة، ولكنه لا يتم تصفيته حسب الفئة.

إذا كنت تريد من الزائرين النقر فوق “Branding” أو “Web” وإجراء تعديل وزاري على الشبكة، فأنت بحاجة إلى معرض قابل للتصفية. تحتوي الإضافات الرئيسية على واحدة. وهو يدعم علامات تبويب الفئات، وصندوق الإضاءة المنبثق، والأشرطة (مثل شارات “NEW” أو “FEATURED”)، وتراكب البيانات التعريفية عند التمرير.

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

إضافة جداول التسعير

إذا كنت تبيع خدمات منتجة أو اشتراكات، فإن قسم التسعير يتحول بشكل أفضل من “contact الغامض لعرض الأسعار.”

لا يحتوي Free Elementor على عنصر واجهة مستخدم للتسعير، لذا فهذه هي منطقة Master Addons. ال القطعة جدول التسعير موجود في الإصدار المجاني ويمنحك العناوين والسعر وقائمة الميزات مع أيقونات الاختيار أو التقاطع وشارة للخطة الموصى بها وزر CTA.

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

إضافة شهادات العملاء

لقد تغلبت شهادتان أو ثلاث شهادات حقيقية على جدار من الشهادات المزيفة.

يتعامل Free Elementor's Testimonial Carousel مع التخطيط الأساسي. إذا كنت تريد إصدارًا أنظف بعمود واحد (اقتباس واحد كبير يتم تدويره)، فمن الغريب أن دائري أعضاء الفريق في الإضافات الرئيسية يعمل بشكل جيد هنا أيضًا: قم بإسقاط صور العملاء في فتحات الأعضاء ووضع الاقتباس في المجال الحيوي.

اطلب شهادات تذكر نتيجة محددة (“got 3 عملاء في الشهر الأول من”) بدلاً من الثناء العام (“great للعمل مع”). التفاصيل مقنعة. الصفات الغامضة هي حشو.

أضف نموذج اتصال

تثبيت مجانا نموذج الاتصال 7 البرنامج المساعد من دليل البرنامج المساعد. قم بإنشاء نموذج، واحصل على الرمز القصير.

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

هذا هو المكان الذي تتولى فيه أداة نموذج الاتصال 7 من Master Addons المسؤولية. بدلاً من لصق رمز قصير، فإنه يتيح لك تصميم التسميات والحقول والحدود ورسائل الخطأ وزر الإرسال من لوحة Elementor. لا يوجد CSS مخصص.

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

إضافة أيقونات اجتماعية

يتضمن Free Elementor أداة Social Icons. ويغطي فيسبوك، X (تويتر سابقًا)، لينكد إن، انستغراميوتيوب، وحفنة من الآخرين. يمكنك التحكم في اللون (العلامة التجارية أو المخصصة)، والحجم، والشكل (مربع أو دائرة مستديرة)، والتباعد.

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

ترتيب التذييل

على جهاز النداء الواحد، يمكن أن يكون التذييل سطرًا واحدًا.

أضف قسمًا أسفل نموذج الاتصال، عمودًا واحدًا، في المنتصف. سطر قصير لحقوق الطبع والنشر (© 2026 Your Name. جميع الحقوق محفوظة.) يقوم بالمهمة. إذا كنت بحاجة إلى روابط لسياسة الخصوصية أو الشروط، قم بإسقاطها هنا أيضًا. لا شيء آخر ينتمي إلى تذييل النداء الواحد.

قم بربط القائمة بكل قسم (الجزء الذي يخطئ فيه معظم الأشخاص)

هذه هي الخطوة التي تنقل المبتدئين للأعلى. عناصر القائمة التي قمت بإعدادها في البداية (#about, #services، وما إلى ذلك) لا تفعل أي شيء بعد، لأن الأقسام لا تحتوي على معرفات مطابقة.

إليك الإصلاح، الذي يتم مرة واحدة لكل قسم

1. قم بالتمرير فوق قسم، وانقر فوق المقبض المكون من ست نقاط في المنتصف لتحديده.
2. اذهب إلى متقدم علامة التبويب في اللوحة اليسرى.
3. انتقل إلى معرف CSS.
4. اكتب المعرف بدون التجزئة. لذا aboutلا #about.

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

ثم العودة إلى المظهر > القوائم وتأكيد أن رابط كل عنصر في القائمة هو إصدار التجزئة (#about, #services, #pricing). احفظ القائمة.

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

html { scroll-behavior: smooth; }

منتهي.

تخطي العمل اليدوي: ابدأ من مجموعة القوالب

إذا كنت لا ترغب في بناء أحد عشر قسمًا من الصفر، فإن Master Addons يأتي ممتلئًا بمعدل 30+ مجموعات القالب، العديد منهم أجهزة استدعاء واحدة لصناعات محددة (وكالة، مطعم، محفظة، SaaS، مستشار).

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

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

نصائح السرعة والأداء لمواقع الصفحة الواحدة

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

انتصارات سريعة:

• اضغط على كل صورة قبل التحميل (TinyPNG، Squoosh، أو مكون إضافي مثل Imagify).
• استخدم تنسيق WebP حيثما أمكن ذلك. ال أفضل المكونات الإضافية لتحسين الصور WordPress يغطي التقرير الخيارات.
• تحميل كسول للصور الموجودة أسفل الطي (يتعامل Elementor مع هذا بشكل افتراضي في الإصدارات الحديثة).
• قصر خطوط الويب على عائلتين كحد أقصى.
• قم بتصغير CSS وJS باستخدام مكون إضافي للتخزين المؤقت (LiteSpeed Cache أو WP Rocket أو Autoptimize).

أكثر في كيفية تسريع مواقع Elementor. يعد Master Addons v3 أسرع بثلاث مرات من v2 ويقوم فقط بتحميل عنصر واجهة المستخدم CSS وJS لعناصر واجهة المستخدم المستخدمة بالفعل، وهو أمر مهم على موقع URL واحد أكثر من موقع متعدد الصفحات.

الأسئلة الشائعة

إلتحاق بالركب

موقع ويب مكون من صفحة واحدة يحتوي على Elementor ليس بالأمر الصعب. اختر Hello Elementor، وقم بتعيين الصفحة على Canvas، وقم بإنشاء أحد عشر قسمًا (أو أقل)، وقم بتعيين معرفات CSS، وقم بتوصيل القائمة بروابط التجزئة. منتهي.

حيث تعمل الإضافات الرئيسية على تسريع الأمور:

• أداة قائمة التنقل مع القائمة الضخمة وتبديل الهاتف المحمول
• أداة صندوق المعلومات للخدمات
• معرض قابل للتصفية للمحافظ
• جدول الأسعار (مجاني) مع شريط مدمج وقائمة الميزات
• تصميم نموذج الاتصال 7 دون كتابة CSS
• أعضاء الفريق وأعضاء الفريق دائري
• 30+ مجموعة قوالب كاملة عندما تريد تخطي البناء اليدوي

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

القراءة ذات الصلة: أفضل 100 إضافة للعناصر · كيفية استيراد قوالب العنصر · الحاجيات والإضافات · تسعير الإضافات الرئيسية