كان بناء موقع إلكتروني زمان كأنه مشروع لازم توظف حد علشانه. بس دلوقتي الموضوع اختلف.
أنا بستخدم Hostinger Website Builder، وفي الدليل ده همشي معاك في العملية كلها خطوة بخطوة، من لحظة تسجيل الدخول لحد ما موقعك يبقى شغال.
يلا نبدأ.
ايه هو Hostinger Website Builder؟
Hostinger Website Builder هو منشئ مواقع بالسحب والإفلات مدعوم بالذكاء الاصطناعي ومندمج جوه حسابك في Hostinger.
مش محتاج تثبت أي حاجة، مش محتاج تعرف برمجة، ومش محتاج خلفية تصميم. إنت بتوصف اللي عايزه، والذكاء الاصطناعي بيبني موقع كامل ليك، وبعدين بتخصصه على حسب علامتك التجارية.
دي واحدة من أسرع الطرق للتحول من لا شيء لموقع احترافي وشغال بالكامل.
الخطوة 1: سجل دخول وروح للمنشئ
لما تسجل دخول في حسابك على Hostinger، هتوصل لـ hPanel. ده لوحة التحكم الرئيسية في Hostinger، ومن خلالها بتدير كل حاجة، من مواقعك ودوميناتك وإيميلاتك للمدفوعات.
في الشريط الجانبي على الشمال، هتلاقي قائمة خيارات للتنقل. اضغط على Websites. هيتفتح منه قايمة منسدلة صغيرة تحته فيها خيارين: Websites list وMigrations. اضغط على Websites list.
دلوقتي أنت في صفحة Websites list، اللي بتعرض كل المواقع المرتبطة بحسابك.
في الركن فوق على اليمين من الصفحة، هتلاقي زر أرجواني + Add website. اضغط عليه.
هيظهر قايمة منسدلة صغيرة بأربعة خيارات:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- And Custom PHP/HTML website
عايز تضغط على Hostinger Website Builder اللي موصوف إنه منشئ مواقع بالسحب والإفلات مدعوم بالذكاء الاصطناعي.
الخطوة 2: وصف موقعك للذكاء الاصطناعي
بعد ما تختار Hostinger Website Builder، هتتوجه لشاشة إعداد بعنوان “Let AI create your online presence.”
ده المكان اللي بتقول فيه للذكاء الاصطناعي نوع الموقع اللي عايز تبنيه.
هتشوف مربع نص كبير فيه نص افتراضي “Describe your website or business.” ده صندوق الإدخال بتاعك، واللي تكتبه هنا بيحدد كل حاجة الذكاء الاصطناعي هيولدها ليك. كل ما التفاصيل تكون أكتر، النتيجة هتكون أحسن.
تحت مربع النص، هتلاحظ كمان صف من الأزرار السريعة للاقتراحات. الاختيارات دي بتشمل حاجات زي “Create a business website,” “Create an online store,” “Design a portfolio,” “Launch an appointments website,” “Start a blog,” “Launch a restaurant website,” و”Create a one pager website.”
لما تضغط على أي واحد منهم، بيتم ملء صندوق الإدخال بنص مبدئي تقدر بعد كده تعدله وتوسع عليه.
في أسفل الشاشة بالظبط، هتلاقي لينكين إضافيين: Pre-made templates و Link in bio website.
لو بتفضل تعدي على AI وتتصفح التصميمات الموجودة، اضغط على Pre-made templates.
لو محتاج موقع بسيط من صفحة واحدة لصفحات السوشيال ميديا بتاعتك، خيار Link in bio يستاهل النظر فيه.
لكن بالنسبة لمعظم الناس اللي عايزين يبنوا موقع حقيقي، ده المربع بتاع الـ AI هو المكان الصح تبدأ منه.
إزاي تكتب برومبت AI كويس
ده أهم جزء في العملية كلها. فكر في برومبت الـ AI كأنه موجز Brief بتديه لمصمم. كل ما توضح رؤيتك أكتر، النتيجة هتقرب أكتر لللي انت عايزه بالظبط.
ده البرومبت اللي استخدمته في الدليل ده. كنت ببني موقع لوكالة إبداعية:
ابني موقع عصري واحترافي لوكالة إبداعية بتقدم خدمات العلامة التجارية، تصميم الجرافيك، تصميم الويب، والتسويق الرقمي. لازم يكون الموقع إحساسه إبداعي وجريء وموثوق مع الاحتفاظ بنظافة التصميم وسهولة التصفح. استخدم تنسيق حديث بصور قوية، وتباعد مناسب، وخطوط أنيقة. ضمّن الصفحات التالية: الرئيسية (Home)، عنّا (About)، الخدمات (Services)، معرض الأعمال (Portfolio)، المدونة (Blog)، والتواصل (Contact). في صفحة الرئيسية، ضيف قسم هيرو بعنوان رئيسي قوي، ووصف قصير مركز على القيمة، وزر واضح للدعوة لاتخاذ إجراء زي ‘ابدأ مشروعك’ أو ‘احصل على عرض سعر’. اكتب نص بسيط وإقناعي يشرح إيه اللي بنعمله، مين اللي بنساعده، والنتائج اللي بنقدمها. اجعل الموقع مناسب للهواتف المحمولة، سريع التحميل، ومحسّن لـ SEO أساسي.
خد بالك قد إيه البرومبت ده محدد. بيغطي الصناعة، والنبرة، ونمط التصميم، والصفحات المطلوبة، وهيكل الصفحة الرئيسية، وأهداف المحتوى. المستوى ده من التفاصيل بيدي الذكاء الاصطناعي أساس صلب يشتغل عليه.
بعد ما تكتب الوصف، هتلاحظ زر Improve description بيظهر في الركن العلوي اليمين من مربع النص.
أنصحك تضغط عليه قبل ما ترسل. الذكاء الاصطناعي هيوسع ويصقل البرومبت بتاعك، وغالبًا هيلاقط حاجات ما فكرتش تضيفها.
لما تكون جاهز، اضغط على زر السهم الأرجواني (أيقونة إرسال) في الركن السفلي اليمين من مربع النص عشان تبعت البرومبت وتبدأ عملية التوليد.
الخطوة 3: استنّي الذكاء الاصطناعي وهو بيبني موقعك
بعد ما تبعت البرومبت، الذكاء الاصطناعي بتاع Hostinger بيشتغل فورًا. هتشوف شاشة تحميل كاملة على خلفية بنفسجية غامقة مكتوب عليها “Looking for matching pictures…” وشريط تقدم بيوريك العملية وصلت لفين.
المرحلة دي عادة بتاخد من 30 لـ 60 ثانية. في الوقت ده، الذكاء الاصطناعي بيعمل حاجات كتير: بيولد تخطيطات الصفحات، بيكتب محتوى الموقع، بيختار صور مناسبة من مكتبة ستوك، بيبني القوائم، وبينظم الموقع كله بناءً على البرومبت بتاعك.
ما تقفلش التاب وإنت بتحمل. استنى وسيبه يشتغل.
الخطوة 4: راجع اللي الذكاء الاصطناعي عمله
لما يخلص الذكاء الاصطناعي، هيتعرضلك معاينة للموقع الجديد بتاعك. دي شاشة النتيجة، ومحمس جدًا تشوف إيه اللي اتولد.
الجانب الشمال من الشاشة بيعرض معاينة مباشرة للموقع اللي اتولد. والجانب اليمين بيعرض لوحة اسمها “Your idea summary,” اللي بتوريك ملخص للبرومبت اللي بعتّه وزر “Edit idea” لو عايز ترجع وتولد تاني ببرومبت مختلف أو محدث.
في حالتي، الذكاء الاصطناعي سمّى الموقع “BoldCraft Studio” وولد صفحة رئيسية بعنوان “Crafting Bold Brands That Shine”، ووصف داعم، وزرّين للدعوة لاتخاذ إجراء: “Start Now” و”Get Quote.”
شريط التنقل اشتمل على الست صفحات اللي طلبتهم: Home، About، Services، Portfolio، Blog، وContact.
في أعلى شمال شاشة المعاينة هتلاقي كمان زرين: Previous versions، اللي بيخليك تتنقل بين التصميمات البديلة اللي الذكاء الاصطناعي طرحها، وRate site، اللي بيخليك تدّي ملاحظات على النتيجة.
في أعلى يمين المعاينة هتلاقي أيقونات للتبديل بين وضع سطح المكتب والجوال. استخدمهم عشان تشيك شكل موقعك على الموبايل قبل ما تكمل. عادة كويسة تعملها بدري.
لو عجبك الاتجاه العام، اضغط زر Continue الأرجواني في اللوحة اليمينية. ده هياخدك للمحرر الكامل اللي فيه التخصيص الحقيقي.
لو مش عاجبك النتيجة، اضغط Edit idea، عدّل البرومبت بتاعك، وجدد التوليد. ممكن تعمل كده قد ما تحتاج.
الخطوة 5: اتعرف على المحرر
المحرر هو المكان اللي هتقضي فيه معظم وقتك. لما توصل له لأول مرة، خد لحظة تفهم فيها التخطيط قبل ما تبتدي تضغط في كل حتة.
المحرر فيه منطقتين رئيسيتين.
- Setup بيوفرلك وصول لإعدادات الموقع الأساسية، والدومين المتصل، ومعلومات الباقة.
- Elements بيفتح لوحة السحب والإفلات اللي تقدر تضيف منها بلوكات محتوى جديدة لأي صفحة. هاغطي ده بالتفصيل قريب.
- Pages بيعرض كل صفحاتك في مكان واحد. تقدر تنتقل بين الصفحات، تضيف صفحات جديدة، تعيد تسمية الموجودة، تغير ترتيبها، أو تحذف اللي مش محتاجها.
- Styles بيتحكم في التصميم العام للموقع بتاعك. هنا بتقدر تحدد الخطوط، لوحة الألوان، وستايلات الأزرار. أي تغييرات تعمّلها هنا هتنطبق على الموقع كله، فده المكان المناسب لاتخاذ قرارات تصميم شاملة بدل ما تغير الموضوع جزء بجزء.
- AI tools بيوفرلك وصول لذكاء Hostinger الكتابي والمحتوى. تقدر تستخدمه لإعادة كتابة أقسام من النص، توليد نص جديد، وأكثر.
- Blog ده المكان اللي بتنشئ فيه وتدير البوستات لو موقعك فيه مدونة.
- Store ده المكان اللي بتضبط فيه المتجر الإلكتروني لو بتبيع منتجات. خليك عارف إن ميزات التجارة الإلكترونية محتاجة باقة أعلى.
- SEO بيفتح مدير السيو المدمج اللي تقدر تضبط فيه عناوين الميتا، الوصفات، وتفاصيل تحسين البحث لكل صفحة.
- More بيوسع لقائمة تانية فيها أدوات إضافية زي Appointments، General settings، Integrations، Form submissions، Analytics، Media library، Multi-language support، Manage backups، Export content to WordPress، وHelp and Resources.
في أعلى المحرر، هتلاقي كمان شريط الأدوات الرئيسي. من الشمال لليمين، بيحتوي على: زر تبديل بين معاينة سطح المكتب والموبايل، أزرار التراجع والتقدم، زر Connect domain، زر Preview، وزر Go live الأخضر.
الخطوة 6: عدّل المحتوى بتاعك
دلوقتي بيجي الجزء اللي هتخصّص فيه الموقع بتاعك. اضغط في أي مكان على لوحة الموقع لتبدأ في التعديل.
لما تحوم بالمؤشر فوق أي قسم في الصفحة، هيظهر وسم أزرق في أعلى يسار القسم يوضح نوع العنصر، زي “Section” أو “Header”. وفي نفس الوقت، هتظهر شريط أدوات صغير طاير فوق القسم فيه خيارات التعديل.
شريط أدوات القسم بيديّك التحكمات دي من الشمال لليمين: Edit section بيفتح لوحة إعدادات القسم، اللي تقدر تغير فيها صورة الخلفية أو اللون، وتضبط المسافات padding، وتعديل خيارات التخطيط.
جنبها Generate image، اللي بيفتح مولّد الصور بالذكاء الاصطناعي.
بعد كده، في أيقونة Duplicate، وتبديل Hide/Show، وأيقونة Delete، وسهمين Move up وMove down لإعادة ترتيب الأقسام، وقائمة More options بثلاث نقط.
لتحرير أي نص في الصفحة، اضغط عليه مباشرة وابدأ في الكتابة. هيتحول عنصر النص لحالة التحرير، وهتشوف أدوات التنسيق تظهر. تقدر تغير حجم الخط، الوزن، المحاذاة، واللون مباشرة من الأدوات دي.
لتغيير صورة، اضغط عليها. هتشوف خيارات لاستبدالها بصورة من ملفاتك، أو تصفح مكتبة الصور الستوك بتاعة Hostinger، أو توليد صورة جديدة بالذكاء الاصطناعي.
ابدأ بصفحتك الرئيسية الأول، وبعدين استخدم لوحة Pages للتنقل لكل صفحة إضافية وعدّلها تباعًا.
الخطوة 7: استخدم مولّد الصور بالذكاء الاصطناعي
الميزة اللي تستحق تتقف عندها شوية هي AI image generator، لأنها مفيدة فعلًا لو معندكش صور احترافية خاصة بيك.
للوصول لها، حوم بالمؤشر فوق أي قسم في صفحتك واضغط Generate image في شريط أدوات القسم. هتظهر لوحة تتزحلق من ناحية اليمين للشاشة.
جوه اللوحة هتلاقي صندوق نص “Image description”. اكتب وصف للصورة اللي عايز تنشئها.
كل ما الوصف بتاعك يكون محدد وصوري أكتر، كل ما النتيجة هتكون أحسن. اللوحة بتظهر حد أقصى 3000 حرف ومؤشر جودة لحظي بيقولك إذا كان الوصف قوي كفاية.
مثال: لما كتبت “A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office,” اللوحة عرضت “Great description!” مع مؤشرات جودة ممتلئة.
لما تكون راضي عن الوصف بتاعك، اضغط زر Create images. الذكاء الاصطناعي هيولد مجموعة صور تختار منها.
حاجة لازم تعرفها: مولّد الصور بالذكاء الاصطناعي محتاج باقة Business أو أعلى. لو انت على باقة Premium، هتشوف طلب ترقية في أسفل اللوحة.
الخطوة 8: ضيف عناصر جديدة لأي صفحة
لو عايز تضيف بلوك محتوى مش موجود على صفحتك، اضغط Elements في الشريط الجانبي الشمال. ده هيفتح لوحة “Add elements”.
هتشوف شبكة بكل العناصر المتاحة، زي Text، Button، Affiliate link، Add to bag، Image، Gallery، Video، Shape، Card، Map، Instagram feed، وContact form. لإضافة أي واحد منهم لصفحتك، اسحبه من اللوحة وحطه على الكانڤاس في المكان اللي عايزه يظهر فيه.
بعد ما تحطه، اضغط على العنصر عشان توصل لإعداداته الفردية وخيارات التنسيق.
طريقة السحب والإفلات دي معناها إنك مش مربوط أبدًا بتخطيط الذكاء الاصطناعي. تقدر تضيف، تمسح، أو ترتب العناصر بحرية.
الخطوة 9: إدارة صفحاتك
اضغط Pages في الشريط الجانبي الشمال عشان تشوف كل صفحاتك متسجلة في مكان واحد. تقدر تضغط على أي اسم صفحة للانتقال لتعديلها.
للإضافة صفحة جديدة، استخدم زر الزائد. لإعادة ترتيب ظهور الصفحات في التنقل، اسحبهم فوق أو تحت في القائمة.
لو في صفحات الذكاء الاصطناعي ولدها ومش محتاجها، تقدر تحذفها من هنا. وبالمثل، لو محتاج صفحة الذكاء الاصطناعي ماضمنهاش، زي Testimonials أو Pricing، تقدر تضيفها من هنا وبعدين تبنيها باستخدام لوحة Elements.
الخطوة 10: ظبط السيو بتاعك
قبل ما تنشر، لازم تُظبط السيو. ده خطوة كتير من الناس بيتفادوها، وده غلطة.
قضاء 15 دقيقة في تعبئة إعدادات السيو صح ممكن يحدث فرق كبير في إذا الناس هتلاقي موقعك عن طريق جوجل ولا لأ.
اضغط SEO في الشريط الجانبي الشمال عشان تفتح لوحة السيو، بعنوان “Let’s be found on Google (SEO).”
اللوحة مقسمة لقسمين. على الشمال هتشوف قائمة بكل صفحاتك. وعلى اليمين هتشوف الـ Website overview، اللي بتعرض اسم نشاطك التجاري ولغة الموقع. اضغط Edit لتحديثهم لو مش مظبوطين.
تحت معلومات الموقع، هتشوف قسم اسمه “Some pages require your attention.”
كل صفحة محتاجة تظبيط بيكون عليها أيقونة تحذير برتقالي. اضغط على أي صفحة في اللوحة اليسرى عشان تفتح إعدادات السيو الفردية ليها، وتكتب عنوان ميتا ووصف ميتا للصفحة دي بالتحديد.
اشتغل على كل صفحة في القائمة. عنوان الميتا الكويس بيكون واضح وبيحتوي على الكلمة الرئيسية بتاعتك، ويكون أقل من 60 حرف. وصف الميتا الكويس بيلخص محتوى الصفحة ويكون أقل من 160 حرف. دول المقاطع اللي بتظهر في نتائج بحث جوجل، فمستحق إنك تقضي شوية دقايق في كل واحد.
الخطوة 11: وصل الدومين بتاعك
لو لسه ماوصلتش دومين مخصص لموقعك، دي اللحظة المناسبة. اضغط زر Connect domain في شريط الأدوات الأعلى للمحرر.
عندك اختيارين. لو عندك دومين بالفعل، تقدر توصّله بتحديث إعدادات DNS عشان تشير لسيرفرات Hostinger. لو لسه ماعندكش دومين، تقدر تشتري واحد مباشرة من Hostinger من نفس الشاشة.
لحد ما توصل دومين، هيبقى ممكن توصل لموقعك عن طريق دومين فرعي مؤقت من Hostinger، زي yoursite.builder-preview.com. ده تمام للاختبار، لكن عايز دومين رسمي قبل ما تبدأ تشارك موقعك للجمهور.
الخطوة 12: اعرض معاينة لموقعك وانشره
كده قربت توصل. قبل ما تضغط نشر، اضغط زر Preview في شريط الأدوات فوق على اليمين.
ده بيفتح معاينة كاملة للشاشة عشان تشوف بالظبط شكل موقعك عند الزوار. بدل بين معاينة سطح المكتب والموبايل باستخدام الأيقونات في أعلى شاشة المعاينة وتأكد إن كل حاجة شكلها صح في الاتنين.
خد بالك خصوصًا من شكل قسم الهيرو في الصفحة الرئيسية على الموبايل، وإزاي شريط التنقل بيتصرف، وإذا في أي صور متقصوصة بشكل مش مقصود.
لما تبقى راضي عن كل حاجة، ارجع للمحرر واضغط زر Go live الأخضر في الركن فوق على اليمين. موقعك بقى منشور وشغال على الإنترنت.
الخطوة 13: استكشف التكاملات
بعد ما موقعك يبقى شغال، يستاهل تتصفح التكاملات المتاحة ليك. اذهب لـ More > Integrations في الشريط الجانبي الشمال.
لوحة Integrations بتخليك توصّل موقعك لأدوات وخدمات خارجية. الخيارات الحالية بتشمل Shippo لتوليد ملصقات الشحن وإدارة تنفيذ الطلبات، Printful لإنشاء وبيع منتجات حسب الطلب بالطباعة عند الطلب، Hostinger Reach للتسويق بالإيميل وإرسال النشرات للمشتركين، Google Ads لتشغيل حملات إعلانية مدفوعة، وCustom code لو عايز تضيف كود HTML، CSS، أو JavaScript بنفسك لتوسيع وظائف الموقع.
لتفعيل أي تكامل، اضغط Get started جمبه، اتبع خطوات الربط، وبعدين حدّث موقعك بنشره من جديد.
نصائح للاستفادة القصوى من Hostinger Website Builder
كن سخي في برومبت الـ AI بتاعك. برومبت من جملتين بس هيديك نتيجة عامة. برومبت تفصيلي ومحدد بيغطي صناعتك، وجمهورك، وتفضيلات التصميم، وبنية الصفحات، ونبرة الصوت، هيديك حاجة أقرب بكتير لللي انت عايزه فعلًا. اقضي خمس دقايق في كتابة موجز كويس وده هيوفر لك ساعات من التعديل بعدين.
استخدم زر Improve description كل مرة. سهل تتجاهله، لكنه مفيد بجد. الذكاء الاصطناعي غالبًا بيكتشف الحاجات اللي خليتها غامضة ويحولها لتعليمات تصميم ومحتوى واضحة.
حرّر النصوص بتاعتك بعناية. الذكاء الاصطناعي بيكتب نصوص قابلة للتعديل كويسة، لكنه ما يعرفش نشاطك التجاري زيك انت. اتفقد كل صفحة واعد كتابة النص عشان يعكس خدماتك الحقيقية، وقيمتك الفعلية، وصوتك الأصيل.
افحص معاينة الموبايل قبل ما تنشر. Hostinger بيخلي موقعك متجاوب تلقائيًا، بس الصور والتباعد ساعات بيحتاجوا تعديلات بسيطة على الشاشات الصغيرة. دايمًا اعمل معاينة على الموبايل قبل النشر.
عبّي إعدادات السيو لكل صفحة. مش بس الصفحة الرئيسية. كل صفحة في موقعك تستحق عنوان ميتا ووصف ميتا مناسبين. الموضوع بياخد دقايق معدودة لكل صفحة، وده من أبسط الحاجات اللي ممكن تعملها لتحسين ظهورك في نتائج البحث.
استخدم مكتبة الوسائط عشان تفضل منظم. تحت More > Media library، تقدر ترفع وتدير كل صورك في مكان واحد. ده بيسهل جدًا إعادة استخدام الصور عبر صفحات متعددة ويحافظ على اتساق موقعك.
ارجع وحسّن مع الوقت. نشر موقعك مش نهاية العملية، ده البداية. ارجع بانتظام لتحديث المحتوى، وإضافة بوستات جديدة في المدونة، وتطوير صفحاتك مع تطور نشاطك.
Hostinger Website Builder بيشيل تقريبًا كل العقبات اللي كانت واقفة بينك وبين موقع احترافي. الذكاء الاصطناعي بيقوم بالشغل الشاق في التصميم والنسخ، والمحرر بيسهّل التخصيص، وأدوات السيو والتكامل المدمجة بتعني إن عندك كل اللي محتاجه في مكان واحد.
اتبع الخطوات في الدليل ده، وفي واقع الأمر تقدر يكون عندك موقع مصقول وشغال في أقل من ساعة.
