كان بناء موقع إلكتروني بحال شي مشروع خاصك تشرك شي حدّ يعملوا. دابا ما بقاش ضروري.
أنا كنتسعمل 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
- وموقع PHP/HTML مخصص
خاصك تضغط على 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. إذا كنتي بغيت تجتاز الذكاء الاصطناعي وتطلّع على التصاميم الجاهزة، ضغط على Pre-made templates.
إلى كنتي محتاج غير موقع صفحة وحدة بسيطة لملفاتك على السوشيال ميديا، خيار Link in bio غادي ينفعك.
لكن بالنسبة لغالبية الناس اللي باغيين يبنيو موقع حقيقي، مربع البرومبت ديال الذكاء الاصطناعي هو البداية الصحيحة.
كيفاش تكتب برومبت مزيان للذكاء الاصطناعي
هادي هي أهم مرحلة فالكامل ديال العملية. فكر في البرومبت ديال الذكاء الاصطناعي بحال ملخص اللي كتقدم لمصمم. كل ما وضّحت الرؤية ديالك مزيان، كل ما كان الناتج قريب أكثر لما بغيتي.
هاهو البرومبت اللي استعملتو فهاد الدليل. كنت كنتبنّى موقع لوكالة إبداعية:
“بني موقع عصري واحترافي لوكالة إبداعية كتوفر خدمات الهوية البصرية وتصميم الجرافيك وتصميم الويب والتسويق الرقمي. خليه يعطي إحساس بالإبداع، والجرأة، والثقة، وفي نفس الوقت يكون نقي وسهل التنقل. استعمل تصميم عصري بصور قوية، وتباعد مريح، وطباعات أنيقة. ضمّن الصفحات التالية: Home، About، Services، Portfolio، Blog، وContact. فصفحة Home، زيد قسم Hero بعنوان قوي، ووصف قصير مركز على القيمة، وزر دعوة للفعل واضح بحال ‘Start Your Project’ أو ‘Get a Quote’. كتب نص بسيط ومقنع كيشرح شنو كنديرو، شكون كساعدو، والنتائج اللي كنحقّقوها. خلّي الموقع ملائم للهاتف، سريع فالتّحميل، ومحسّن لـSEO الأساسي.”
لاحظ شحال كاين فيها من تفاصيل. كيغطي الصناعة، النبرة، ستايل التخطيط، الصفحات المطلوبة، بنية الصفحة الرئيسية، وأهداف المحتوى. هاد المستوى من التفاصيل كيمنح الذكاء الاصطناعي أساس صلب يخدم عليه.
مني كتكمّل كتابة الوصف ديالك، غتشوف زر “Improve description” كيطلع فالأعلى على اليمين ديال مربع النص.
كننصحك تضغط عليه قبل ما تسيفط. الذكاء الاصطناعي غادي يوسع وينقح البرومبت ديالك، وفي الغالب كيضيف تفاصيل اللي ما تخيلاتش.
ملي كتكون جاهز، ضغط على الزر البنفسجي اللي فيه السهم (أيقونة الإرسال) فالأسفل على اليمين ديال مربع النص باش تسيفط البرومبت وتبدا عملية الإنشاء.
الخطوة 3: استنى حتى الذكاء الاصطناعي يصاوب الموقع ديالك
من بعد ما تسيفط البرومبت، الذكاء الاصطناعي ديال Hostinger كييبدا الخدمة فالحين. غتشوف تحمّيل بملء الشاشة على خلفية بنفسجية غامقة فيها الرسالة “Looking for matching pictures…” ورافقتها شريط تقدم كيوريك نسبة الإنجاز.
هاد المرحلة كتستغرق تقريباً ما بين 30 و60 ثانية. فهاذ الوقت، الذكاء الاصطناعي كيولّد تخطيطات الصفحات، كيكتب نصوص الموقع، كيختار صور مناسبة من مكتبة Stock، كيصاوب لك نظام التنقل، وكينظم الموقع كامل بناءً على البرومبت ديالك.
ما تسدّش التبّ ديال المتصفح حتى يكمّل التحميل. برّا غير استنى وخليه يخدم.
الخطوة 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 كيتفتح مدير 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 في ثلاث نقاط.
باش تحرّر أي نص فالصفحة، غير ضغط عليه مباشرة وبدأ الكتابة. العنصر ديال النص غيولي قابل للتحرير، وغاينبانو لك أدوات التنسيق. تقدر تغيّر حجم الخط، سمكه، المحاذاة، واللون مباشرة من هاد الأدوات.
باش تبدّل صورة، ضغط عليها. غتشوف اختيارات باش تعوضها بصورة من الملفات ديالك، تستعرض مكتبة الصور Stock ديال Hostinger، أو تولّد وحدة جديدة بالذكاء الاصطناعي.
خدم أولاً على الصفحة الرئيسية ديالك، ثم استعمل لوحة Pages باش تنتقل لكل صفحة إضافية وتحرّرهم واحدًا تلو الآخر.
الخطوة 7: استعمل مولّد الصور بالذكاء الاصطناعي
واحد الميزة اللي تستحق توقف عليها هي مولّد الصور بالذكاء الاصطناعي، حيت فعلاً مفيد إلا ماعندكش صور احترافية ديالك.
باش توصل ليه، حلّ المؤشر فوق أي قسم فصفحتك واضغط Generate image فشريط أدوات القسم العائم. غينزل بانيل من الجهة اليمنى ديال الشاشة.
داخل البانيل، غتشوف مربع نص “Image description”. كتب وصف للصورة اللي بغيتي تولّد.
كل ما كان الوصف ديالك محدد وبصري أكثر، كل ما كان الناتج حسن. البانيل كيوريك حد أقصى لحروف 3,000 ومؤشر جودة في الوقت الحقيقي كيقولك واش الوصف ديالك قوي بما فيه الكفاية.
مثلاً، ملي كتبت “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: حضّر SEO ديالك
قبل ما تنشر، خاصك تحضّر SEO ديالك. هادي خطوة بزاف ديال الناس كيتجاوزوها، وهادشي خطأ.
تخصيص 15 دقيقة لملء إعدادات SEO ديالك مزيان كيقدر يبدّل بزاف في واش الناس غايلقاو الموقع ديالك عبر Google.
ضغط SEO فالشريط الجانبي الأيسر باش تفتح بانيل SEO اللي عنوانو “Let’s be found on Google (SEO)”.
البانيل مقسّم لجوج ديال الأقسام. فليسار، غتشوف لائحة بجميع الصفحات ديالك. فليمن، غتشوف Website overview، اللي كيوريك اسم المشروع ديالك ولغة الموقع. ضغط Edit باش تحدّثهم إلا ما كانوش صحيحين.
تحت معلومات الموقع، غتشوف قسم مسمّى “Some pages require your attention.”
كل صفحة محتاجة تعديلات كتكون معنونة بأيقونة تحذير برتقالية. ضغط على أي صفحة فالبانيل اليسار باش تفتح إعدادات SEO الفردية ديالها، فين تقدر تكتب meta title وmeta description لهاد الصفحة بالذات.
خدم على كل صفحة فالقائمة. meta title مزيان هو يكون واضح، كيحمل الكلمة المفتاحية الرئيسية ديالك، ويكون أقل من 60 حرف. meta description مزيان هو يلخص محتوى الصفحة ويكون أقل من 160 حرف. هادو هما المقتطفات اللي كيبانوا فنتائج بحث Google، وهام تخصّص شوية دقائق لكل صفحة.
الخطوة 11: ربط الدومين ديالك
إلا ما زلتي ما ربطتيش دومين مخصص بالموقع ديالك، دابا هو الوقت. ضغط زر Connect domain فشريط الأدوات العلوي ديال المحرر.
عندك جوج خيارات. إلا كنتي مالك دومين بالفعل، تقدر تربطو عبر تحديث إعدادات DNS باش تشير لسيرفرات Hostinger. إلا مازال ما عندكش دومين، تقدر تشري واحد مباشرة من Hostinger من نفس هاد الشاشة.
حتى تربط الدومين، الموقع ديالك غيكون متاح عبر دومين فرعي مؤقت ديال Hostinger، بحال yoursite.builder-preview.com. هادشي مزيان للاختبار، ولكن بغيت دومين خاص حقيقي قبل ما تبدا تشارك الموقع علنياً.
الخطوة 12: عاين الموقع ديالك ومن بعد انشره
باقي قريب. قبل ما تضغط publish، ضغط زر Preview فشريط الأدوات أعلى اليمين.
هادشي كيحل معاينة بملء الشاشة كيف ما غيظهر الموقع للزوار. بدّل بين عرض الكمبيوتر والهاتف باستعمال الأيقونات فوق شاشة المعاينة وتأكد بأن كلشي باين مزيان في الجوج.
ركز مزيان على كيفاش باين قسم Hero فالصفحة الرئيسية على الموبايل، كيفاش كيطيح شريط التنقل، وإلى كان شي تقصّ للصورة ما بغيتوش.
ملي تكون مرتاح مع كلشي، رجع للمحرر واضغط الزر الأخضر Go live فالأعلى على اليمين. دابا الموقع ديالك منشور ومباشر على الإنترنت.
الخطوة 13: استكشف التكاملات
مني الموقع ديالك كيبقى مباشر، كيستاهل تشوف التكاملات المتاحة ليك. سير ل More > Integrations فالشريط الجانبي الأيسر.
بانيل Integrations كيسمح لك تربط الموقع ديالك بأدوات وخدمات خارجية. الاختيارات الحالية كتضم Shippo لتوليد بطاقات الشحن وتسيير تنفيذ الطلبات، Printful لإنشاء وبيع منتجات حسب الطلب مطبوعة، Hostinger Reach للتسويق عبر البريد الإلكتروني وإرسال النشرات للمشتركين ديالك، Google Ads لتشغيل حملات إعلانية مدفوعة، وCustom code إلا بغيت تزيد HTML، CSS، أو JavaScript ديالك باش توسّع وظيفة الموقع.
باش تفعّل أي تكامل، ضغط Get started حداه، تبع خطوات الربط، ومن بعد حدّث الموقع ديالك عبر إعادة النشر.
نصائح باش تستافد أقصى ما يمكن من Hostinger Website Builder
كون كريمة فالبرومبت ديالك للذكاء الاصطناعي. برومبت من جملتين غيخرج لك نتيجة عامة. برومبت مفصّل ودقيق كيغطي الصناعة ديالك، الجمهور، تفضيلات التصميم، بنية الصفحات، ونبرة الصوت غيعطيك نتيجة أقرب بزاف للي بغيتي فعلاً. خصص خمس دقايق لكتابة ملخص مزيان وغادي يربّحك ساعات ديال التعديل من بعد.
استعمل زر Improve description فكل مرة. ساهل يفلت من البال، ولكن مفيد بزاف. الذكاء الاصطناعي غالباً كيقبض على الحوايج اللي خليتيها مبهمة وكيحوّلها لتعليمات تصميم ومحتوى واضحة.
حرّر النص ديالك بعناية. الذكاء الاصطناعي كينتج نصوص مؤقتة معقولة، ولكن ما كيعرفش المشروع ديالك كيفما كتعرفه أنت. مر على كل صفحة وأعد كتابة النص باش يعكس الخدمات الحقيقية ديالك، القيمة اللي كتقدمها، والصوت الأصيل ديالك.
شيك العرض ديال الموبايل قبل ما تنشر. Hostinger كيخلي الموقع ديالك responsive أوتوماتيكياً، ولكن الصور والمساحات مرات خاصهم تعديلات بسيطة على الشاشات الصغيرة. ديما جرب المعاينة على الموبايل قبل ما تنشر مباشرة.
عمر إعدادات SEO لكل صفحة. ماشي غير الصفحة الرئيسية. كل صفحة فالموقع ديالك كتستاهل meta title وdescription مزيانين. تاخد شوية دقائق في كل صفحة وهادشي من أبسط الحوايج اللي تقدر ديرها باش تحسّن الظهور ديالك فنتائج البحث.
استعمل Media library باش تبقى منظم. تحت More > Media library، تقدر ترفع وتسيّر جميع الصور ديالك فبلاصت وحدة. هادشي كيخلّي إعادة استخدام الصور عبر صفحات متعددة أسهل ويحافظ على توحيد الموقع.
رجع وطوّر مع الوقت. نشر الموقع ماشي النهاية ديال العملية، ولكن البداية. رجع بانتظام باش تحدّث المحتوى ديالك، تزيد تدوينات جديدة فالمدونة، وتنقّح الصفحات ديالك مع تطور المشروع.
Hostinger Website Builder كيحيد تقريباً جميع الحواجز اللي كانت واقفة بينك وبين موقع احترافي. الذكاء الاصطناعي كيتكلف بالقسم الثقيل فالتصميم والنصوص، المحرر كيخلي التخصيص ساهل، وأدوات SEO والتكامل المدمجة كتعني بلي عندك كلشي فبلاصت واحدة.
تبع الخطوات فهاد الدليل وقدّر يكون عندك موقع مباشر، مصقول، وخدام فـأقل من ساعة.
