تصميم صفحة هبوط احترافية: الخطوات وقوالب جاهزة

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

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

راجعناه في نوفمبر 2026: في 5 نوفمبر 2026 فتحنا النسخة العربية (/ar) من ستة عروض حية لقوالب صفحات الهبوط من Aniq UI وقرأنا شيفرة HTML وCSS فيها. والأسعار مأخوذة من صفحات القوالب في اليوم نفسه.

ما هي صفحة الهبوط؟

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

ويختلف الإجراء باختلاف النشاط: تجربة مجانية لبرنامج، أو مكالمة محجوزة لوكالة، أو شراء لمنتج، أو بريد إلكتروني لقائمة انتظار. حدّده قبل أن تبدأ تصميم صفحة الهبوط، لأن كل قرار بعده (العنوان والأقسام ونص الزر) يتبعه.

ما الأقسام التي تحتاجها صفحة الهبوط، وبأي ترتيب؟

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

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

القسم الرئيسي (Hero): قل النتيجة واعرض المنتج

القسم الرئيسي هو ما يقرّر هل سيكمل الزائر التمرير أم لا. يقول العنوان ما سيحصل عليه الزائر بكلماته هو، لا شعارًا عامًّا. والسطر الذي تحته يقول لمن هذا المنتج وكيف يعمل. ثم زر رئيسي واحد بفعل واضح («ابدأ مجانًا»، «احجز مكالمة»)، وزر ثانٍ أهدأ عند الحاجة. وعلى الهاتف يجب أن يظهر العنوان والسطر والزر قبل أي تمرير.

اعرض المنتج نفسه. صفحتا الهبوط المدفوعتان من Aniq UI تضعان معاينة للوحة التحكم تحت العنوان مباشرة، فيرى الزائر ما سيستخدمه قبل أن يقرأ قائمة المزايا.

الإثبات: شعارات حقيقية وأرقام حقيقية

يأتي الإثبات بعد القسم الرئيسي مباشرة، لأن الثقة هي السؤال التالي. شعارات العملاء، أو رقم استخدام، أو تقييمات، أو رأيان أو ثلاثة مع الاسم والمنصب والشركة. ورأي واحد محدد («اختصرنا تهيئة العملاء من أسبوعين إلى ثلاثة أيام») أنفع من عشرة آراء عامة.

لا تستخدم إلا ما هو صحيح. العروض الحية للقوالب تأتي بأرقام تجريبية (العرض العربي لـ SaaS Template يقول «موثوق به من قبل أكثر من 4,000 شركة ناشئة»)، ويجب استبدال هذه الأسطر أو حذفها قبل الإطلاق.

الفوائد: نتائج لا مزايا

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

كيف يعمل: ثلاث خطوات أو أربع

قائمة مرقّمة قصيرة (سجّل، اربط، أطلق) تزيل الخوف من أن البداية صعبة. اكتفِ بثلاث خطوات أو أربع، لكل منها فعل وكلمات قليلة. قالب Company Website المجاني مثلًا يأتي بقسم «كيف يعمل» من أربع خطوات.

الأسعار: اعرض السعر

إخفاء السعر يدفع الزائر للبحث في مكان آخر. اعرض ثلاث باقات على الأكثر، وأبرز الباقة التي تناسب أغلب الناس، واذكر ما تتضمنه كل باقة. وإذا كان لديك دفع شهري وسنوي، فأضف زر تبديل واذكر قيمة التوفير. العرضان المدفوعان من Aniq UI يعرضان ثلاث باقات تحمل الوسطى منها شارة «الأكثر شعبية»، ويضيف Publino تبديلًا بين الشهري والسنوي.

الأسئلة الشائعة: أجب عن الاعتراضات

اجمع الأسئلة التي يطرحها الناس فعلًا قبل الدفع: هل يمكنني الإلغاء؟ هل هناك استرداد؟ ما طرق الدفع؟ كم يستغرق الإعداد؟ ما الدعم المتاح؟ تكفي خمس إلى ثماني إجابات. واترك الإجابات داخل HTML (القائمة القابلة للطي لا بأس بها) لتقرأها محركات البحث ومساعدات الذكاء الاصطناعي.

الدعوة إلى الإجراء: كرّر الزر الأول

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

كيف تصمم صفحة هبوط بالعربية (RTL)؟

صفحة الهبوط العربية هي الصفحة نفسها مرتّبة من اليمين إلى اليسار: القائمة تبدأ من اليمين، والنص يُحاذى إلى اليمين، والأسهم تشير إلى اليسار بمعنى «التالي». ابنِها من مكوّنات الصفحة الإنجليزية نفسها، واضبط الاتجاه في HTML، وحمّل خطًا عربيًا، وأبقِ الأرقام من اليسار إلى اليمين، واكتب النص بالعربية بدل ترجمته سطرًا سطرًا.

ما وجدناه في ستة عروض من Aniq UI. الصفحات العربية الست كلها ترسل <html lang="ar" dir="rtl"> في أول استجابة HTML، ولا يستخدم أي منها الأرقام الهندية (المشرقية)، والعدّادات المتحركة في القالبين المدفوعين تُرسم بـ direction: ltr، فيبقى رقم مثل +127% بترتيبه الصحيح.

الاتجاه: اضبطه على عنصر html

ضع dir="rtl" وlang="ar" على <html>، ويُرسَلان من الخادم لكل رابط لغة (/ar و/en). هذا ما ينصح به W3C، ويحذّر من ضبط الاتجاه الأساسي بـ CSS وحدها. ثم اكتب المسافات بالخصائص المنطقية (margin-inline-start، أو ms-4 في Tailwind CSS بدل ml-4)، فتعمل ورقة أنماط واحدة في الاتجاهين. وتجد الشيفرة في دليل RTL في Tailwind CSS.

الخطوط: حمّل خطًا عربيًا حقيقيًا

الخط الإنجليزي في التصميم كثيرًا ما يخلو من الحروف العربية، فيلجأ المتصفح إلى خط النظام الذي لا ينسجم مع التصميم. اختر عائلة عربية وزاوجها مع الخط اللاتيني. في العروض التي فحصناها، تزاوج القوالب المجانية بين Inter وNoto Sans Arabic، ويستخدم قالب 3D خط Cairo، ويحمّل SaaS Template خطّي Noto Sans Arabic وAlmarai إلى جانب DM Sans، ويعتمد Publino على خطوط النظام. والعائلات العربية الثلاث متاحة في Google Fonts. حمّلها عبر next/font، فهو يستضيف الملفات على موقعك ويمنع إزاحة التخطيط.

الخط العربي يحتاج مساحة رأسية أكبر للنقاط والحركات، فامنح العناوين العربية ارتفاع سطر أكبر، وأزل أي تباعد بين الحروف: تباعد الحروف المتصلة يكسر الكتابة العربية.

الأرقام: نمط واحد ومن اليسار إلى اليمين دائمًا

اختر نمطًا واحدًا للأرقام والتزم به في كل مكان. عروض Aniq UI تستخدم الأرقام اللاتينية (0 إلى 9) في العربية، وهي الأرقام نفسها في النسخة الإنجليزية. وإذا كنت تنسّق الأرقام بـ Intl.NumberFormat، فاللغة ar-u-nu-latn تُبقي الأرقام لاتينية في أي بلد. أما الأسعار وأرقام الهواتف والنسب والتواريخ فيجب أن تبقى من اليسار إلى اليمين داخل النص العربي: ضعها داخل <bdi> أو أعطها dir="ltr".

الأيقونات: اعكس فقط ما يدل على اتجاه

اعكس الأيقونات التي تشير في اتجاه القراءة: أسهم الرجوع والتقدّم، والسهم داخل زر «ابدأ الآن»، وأزرار التالي والسابق، وخطوات التقدّم. ولا تعكس الساعات، ولا أزرار التشغيل، ولا أيقونة البحث، ولا الشعارات، ولا ما يمثّل شيئًا ماديًا. وفي دليل Material Design عن ثنائية الاتجاه القائمة كاملة.

الكتابة للقارئ العربي

اكتب النص العربي مباشرة، أو اطلب من متحدث أصلي إعادة صياغة الترجمة. العربية الفصحى المعاصرة تُفهم من الرياض إلى القاهرة إلى الجزائر، فلا تستخدم كلمة محلية إلا إذا كانت الصفحة موجّهة إلى بلد واحد. خاطب القارئ مباشرة واكتب جملًا قصيرة. واجعل الأزرار أفعال أمر: عرض Publino العربي يستخدم «ابدأ الآن» و«احجز مكالمة». واعرض الأسعار بالعملة التي يدفع بها الزائر، وأبقِ أسماء المنتجات بالحروف اللاتينية، وتأكد أن العنوان العربي، إن طال، ما زال يتسع في القسم الرئيسي على الهاتف.

سرعة صفحة الهبوط وأساسيات السيو

يجب أن تجتاز صفحة الهبوط مقاييس Core Web Vitals على الهاتف، وأن تكون سهلة القراءة لمحركات البحث بكل لغة. حدود Google «الجيدة»، مقيسة عند الشريحة 75 من الزيارات، هي: Largest Contentful Paint خلال 2.5 ثانية أو أقل، وInteraction to Next Paint خلال 200 ملّي ثانية أو أقل، وCumulative Layout Shift بقيمة 0.1 أو أقل.

• صورة القسم الرئيسي: قدّمها بالمقاس الذي تُعرض به، بصيغة WebP أو AVIF، وحمّلها أولًا (priority في مكوّن Image في Next.js). فهي غالبًا أكبر عنصر يُرسم.
• الفيديو والمشاهد ثلاثية الأبعاد: حمّلها بعد الرسم الأول. قالب 3D المجاني يؤخر تحميل نماذجه ثلاثية الأبعاد لهذا السبب.
• الخطوط: استضفها عبر next/font وحمّل الأوزان التي تستخدمها فقط.
• رابط لكل لغة: /ar و/en، لكل منهما عنوان ووصف ميتا مكتوبان حول ما يبحث عنه الناس بتلك اللغة. فالباحث العربي يكتب «تصميم صفحة هبوط» و«صفحات هبوط جاهزة»، لا ترجمة حرفية للعبارة الإنجليزية.
• hreflang: كل نسخة لغوية تذكر نفسها والنسخ الأخرى بروابط كاملة. وتتجاهل Google هذه الوسوم إذا لم تُشر الصفحتان إلى بعضهما.
• عنوان h1 واحد: عنوان القسم الرئيسي، وعناوين الأقسام h2.
• نص حقيقي: أبقِ العناوين والأسعار نصًّا في HTML لا داخل الصور، واكتب النص البديل للصور بكل لغة.

اختبر الصفحة النهائية في PageSpeed Insights على تبويب الهاتف، باللغتين.

أخطاء شائعة في تصميم صفحات الهبوط

• أكثر من هدف. زر تجربة، وصندوق نشرة بريدية، ورابط «تواصل مع المبيعات» تتنافس كلها. أبقِ إجراءً رئيسيًا واحدًا.
• شعار بدل العنوان. «مستقبل العمل» لا يقول شيئًا. قل ما سيحصل عليه الزائر.
• إثبات تجريبي منسيّ. شعارات القالب وآراؤه وأرقامه ما زالت في الصفحة المنشورة.
• سعر مخفي. «تواصل معنا لمعرفة السعر» لمنتج له سعر.
• نماذج طويلة. لا تطلب إلا ما تحتاجه للخطوة التالية.
• العربية في آخر القائمة. تخطيط معكوس بأسهم في الاتجاه الخطأ، أو تباعد حروف في النص العربي، أو خليط من أنماط الأرقام.
• قسم رئيسي ثقيل. فيديو يعمل تلقائيًا أو صورة غير مضغوطة تُسقط LCP على الهاتف.
• لا اختبار على الهاتف. كثير من الزوار يصلون من إعلان على الهاتف، فاختبر عليه أولًا.

تحميل صفحات هبوط جاهزة: قوالب مدفوعة ومجانية

البدء من قالب يوفّر عليك التخطيط والتجاوب مع الشاشات وعمل RTL. لدى Aniq UI صفحتا هبوط مدفوعتان بسعر $39 وأربع صفحات هبوط مجانية. الست كلها مبنية بـ Next.js وReact 19، ولكل منها نسخة عربية على /ar بتخطيط من اليمين إلى اليسار، فتحناها في 5 نوفمبر 2026.

القالب	السعر	التقنيات	عربي RTL	ما يتضمنه	الأنسب لـ
SaaS Template	$39	Next.js 16، Tailwind CSS 4	نعم	الرئيسية، والأسعار، والمدونة، والتواصل، والتسجيل، وصفحات قانونية وصفحات أخطاء	برنامج يُباع باشتراكات
Publino	$39	Next.js 16، Tailwind CSS 4	نعم	الرئيسية، وصفحة أسعار بباقات شهرية وسنوية، وصفحة تواصل بنموذج متحقَّق منه	منتج أو خدمة باشتراك
SaaS Landing Page with Pricing	مجاني	Next.js 15، Tailwind CSS 3	نعم	صفحة واحدة: المزايا، والخطوات، والباقات، وجدول مقارنة، والأسئلة الشائعة	أول صفحة SaaS
Web Design Agency Portfolio	مجاني	Next.js 15، Tailwind CSS 3	نعم	صفحة واحدة: المشاريع، ومراحل العمل، والأسعار، ونموذج تواصل	الوكالات والمستقلون
Company Website	مجاني	Next.js 15، Tailwind CSS 3	نعم	صفحة واحدة: كيف يعمل، والتكاملات، والآراء، والمقالات	شركة أو شركة ناشئة
3D Landing Page	مجاني	Next.js 15، Three.js، GSAP	نعم	صفحة واحدة: مشهد ثلاثي الأبعاد للمنتج	منتج واحد

SaaS Template ($39)

صفحة هبوط داكنة لمنتج برمجي، مبنية بـ Next.js 16 وReact 19 وTailwind CSS 4 وTypeScript وnext-intl. إلى جانب الصفحة الرئيسية تضم صفحات الأسعار والمدونة والتواصل والتسجيل، وصفحات قانونية (الخصوصية والشروط وملفات تعريف الارتباط وGDPR) وصفحات الأخطاء، مع React Hook Form وZod في النماذج. ويحمل قسمها الرئيسي معاينة لوحة التحكم الكاملة الظاهرة أدناه. شاهد SaaS Template أو افتح عرضه الحي بالعربية.

Publino ($39)

صفحة هبوط لمنتج باشتراك، مبنية أيضًا بـ Next.js 16 وReact 19 وTailwind CSS 4، بوضعين داكن وفاتح. فيها صفحة رئيسية مع نموذج للوحة عمليات النشر، وصفحة أسعار بباقات شهرية وسنوية وتصفية للمزايا، وأسئلة شائعة مقسّمة حسب الفئة، وصفحة تواصل بنموذج يتحقق منه React Hook Form وZod. شاهد Publino أو افتح عرضه الحي بالعربية.

قوالب صفحات هبوط مجانية

ثلاثة من القوالب المجانية الأربعة مواقع من صفحة واحدة مبنية بـ Next.js 15 بترخيص MIT: صفحة SaaS بباقات وجدول مقارنة، وموقع أعمال لوكالة بالأبيض والأسود مع نموذج تواصل، وموقع شركة بقسم «كيف يعمل» من أربع خطوات. ولا يحتوي أي منها على واجهة خلفية. ويقارنها دليل قوالب صفحات الهبوط المجانية قسمًا قسمًا، ويشرح كيف تحصل على كل قالب وتشغّله وتنشره.

تصميم صفحة هبوط للمنتجات: قالب 3D المجاني

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

ولمقارنتها بقوالب صفحات هبوط من جهات أخرى، راجع أفضل قوالب صفحات هبوط Next.js لعام 2026.

من القالب إلى صفحة هبوط منشورة

1. افتح العرض الحي على هاتفك، بالعربية (/ar) والإنجليزية، وتأكد أن أقسامه تناسب عرضك.
2. اشترِ القالب، أو اضغط Get Free في القالب المجاني. يظهر ملف ZIP في لوحة حسابك على Aniq UI.
3. شغّله على جهازك باتباع التوثيق الموجود في صفحة القالب.
4. أعد كتابة النصوص في ملفّي اللغتين. ابدأ بالعنوان والزر، بكل لغة.
5. استبدل كل شعار ورأي ورقم وسعر تجريبي ببياناتك، أو احذفه.
6. اضبط عنوان موقعك في الإعدادات التي يذكرها التوثيق، لتشير روابط canonical وروابط اللغات إلى نطاقك.
7. انشر الصفحة، ثم اختبر اللغتين في PageSpeed Insights على الهاتف.

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

كيف أنشئ صفحة هبوط مجانية؟

ابدأ من قالب مجاني، واستبدل النصوص والصور، وانشره على أي استضافة تشغّل Next.js. لدى Aniq UI أربعة قوالب صفحات هبوط مجانية، كل منها بالعربية والإنجليزية، ويشرح دليل قوالب صفحات الهبوط المجانية كيف تحصل عليها وتشغّلها.

ما الفرق بين صفحة الهبوط والموقع؟

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

كم قسمًا تحتاج صفحة الهبوط؟

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

أين أجد صفحات هبوط جاهزة بالعربية للتحميل؟

قوالب صفحات الهبوط الستة من Aniq UI كلها تأتي بنسخة عربية مرتّبة من اليمين إلى اليسار: SaaS Template وPublino بسعر $39 لكل منهما، وأربعة قوالب مجانية. ويمكنك فتح كل عرض حي على /ar قبل التحميل.

ما أفضل خط لصفحة هبوط عربية؟

لا يوجد خط واحد هو الأفضل. Noto Sans Arabic وCairo وAlmarai خيارات شائعة، وهي المستخدمة في العروض التي فحصناها. اختر خطًا ينسجم مع خطك اللاتيني، وحمّله عبر next/font، وامنح العناوين العربية ارتفاع سطر إضافيًا.

كم سعر قالب صفحة هبوط؟

في Aniq UI، سعر كل من صفحتي الهبوط المدفوعتين $39 بدفعة واحدة، وأربعة قوالب صفحات هبوط مجانية. وإذا احتجت أيضًا إلى حفظ التسجيلات أو الطلبات، فباقات Full Stack (الموقع ولوحة التحكم والـ API) بسعر $149.

الخلاصة

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

ما يناسبه كل قالب وسعره، بدفعة واحدة:

• SaaS Template (برنامج يُباع باشتراكات، بالعربية والإنجليزية): $39.
• Publino (منتج أو خدمة باشتراك، بالعربية والإنجليزية): $39.
• أربعة قوالب صفحات هبوط مجانية (SaaS، ووكالة، وشركة، ومنتج بتقنية 3D): مجانًا.
• Full Stack (الموقع ولوحة التحكم والـ API، عندما تحتاج واجهة خلفية): $149.

تصفّح القوالب وافتح أي عرض حي بالعربية قبل الشراء.

أدلة ذات صلة

• قوالب صفحات هبوط مجانية
• أفضل قوالب صفحات هبوط Next.js لعام 2026 (مجانية ومدفوعة)
• دليل RTL في Tailwind CSS: الخصائص المنطقية والمتغيّر rtl:
• كيف تطلق موقع SaaS بالإنجليزية والعربية باستخدام Next.js

المصادر

• web.dev: مقاييس Web Vitals (حدود LCP وINP وCLS)
• Google Search Central: إبلاغ Google بالنسخ المترجمة من صفحتك
• W3C: الترميز البنيوي والنص من اليمين إلى اليسار في HTML
• Next.js: تحسين الخطوط باستخدام next/font
• Material Design: ثنائية الاتجاه
• MDN: Intl.NumberFormat
• PageSpeed Insights

راجعناه في نوفمبر 2026.