كان بناء موقع إلكتروني يبدو وكأنه مشروع تحتاج فيه لتوظيف شخص ما. لم يعد كذلك.
كنت أستخدم 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، يتم نقلك إلى شاشة الإعداد بعنوان “دع الذكاء الاصطناعي ينشئ حضورك على الإنترنت.”
هنا تشرح للذكاء الاصطناعي نوع الموقع الذي تريد إنشاءه.
سترى مربع نص كبير يحتوي على النص الافتراضي “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 يستحق التجربة.
ومع ذلك، بالنسبة لمعظم الأشخاص الذين ينشئون موقعًا حقيقيًا، فإن مربع الإيعاز للذكاء الاصطناعي هو المكان المناسب للبدء.
كيفية كتابة إيعاز جيد للذكاء الاصطناعي
هذا هو الجزء الأهم في العملية برمتها. اعتبر مربع الإيعاز للذكاء الاصطناعي بمثابة موجز (brief) تقدمه لمصمم. كلما زادت وضوح رؤيتك في التواصل، كان الناتج أقرب إلى ما تريده فعليًا.
هذا هو الإيعاز الذي استخدمته في هذا الدليل. كنت أقوم بإنشاء موقع لوكالة إبداعية:
“أنشئ موقعًا حديثًا واحترافيًا لوكالة إبداعية تقدم خدمات العلامات التجارية، وتصميم الجرافيك، وتصميم الويب، والتسويق الرقمي. يجب أن يكون الموقع ذو طابع إبداعي وجريء وموثوق مع الحفاظ على النظافة وسهولة التنقل. استخدم تخطيطًا حديثًا بصور قوية، وتباعد جيد، وطباعة أنيقة. أدرج الصفحات التالية: الرئيسية، حول، الخدمات، الأعمال، المدونة، والتواصل. في الصفحة الرئيسية، أضف قسمًا رئيسيًا بمع عنوان قوي، ووصف قصير يركز على القيمة، وزر دعوة لاتخاذ إجراء واضح مثل ‘ابدأ مشروعك’ أو ‘احصل على عرض’. اكتب نصًا بسيطًا وجذابًا يشرح ما نفعله، ومن نساعد، والنتائج التي نحققها. اجعل الموقع مناسبًا للجوال، وسريع التحميل، ومحسنًا لأساسيات تحسين محركات البحث.”
لاحظ مدى التحديد في ذلك. فهو يشمل الصناعة، والنبرة، وأسلوب التخطيط، والصفحات المطلوبة، وهيكل الصفحة الرئيسية، وأهداف المحتوى. يمنح هذا المستوى من التفاصيل الذكاء الاصطناعي أساسًا قويًا للعمل منه.
بمجرد كتابة وصفك، ستلاحظ ظهور زر “Improve description” في الزاوية العلوية اليمنى من مربع النص.
أنصح بالنقر عليه قبل الإرسال. سيقوم الذكاء الاصطناعي بتوسيع وتحسين إيعازك، وغالبًا ما يلتقط أمورًا قد نسيتها.
عندما تكون جاهزًا، اضغط على الزر الأرجواني arrow button (أيقونة الإرسال) في أسفل الزاوية اليمنى من مربع النص لإرسال إيعازك وبدء التوليد.
الخطوة 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، والإعدادات العامة، وIntegrations، وتقديمات النماذج، وAnalytics، ومكتبة الوسائط، ودعم اللغات المتعددة، وإدارة النسخ الاحتياطية، وتصدير المحتوى إلى WordPress، والمساعدة والموارد.
في أعلى المحرر، ستجد أيضًا شريط الأدوات الرئيسي. من اليسار إلى اليمين، يحتوي على: زر تبديل المعاينة بين سطح المكتب والهاتف المحمول، وزري التراجع والإعادة، وزر Connect domain، وزر Preview، وزر Go live الأخضر.
الخطوة 6: حرر المحتوى الخاص بك
والآن يأتي الجزء الذي تجعل فيه الموقع خاصًا بك. انقر في أي مكان على مساحة عمل موقعك لبدء التحرير.
عند تحريك المؤشر فوق أي قسم من الصفحة، ستظهر علامة زرقاء في أعلى يسار ذلك القسم توضح نوع العنصر، مثل “Section” أو “Header”. في نفس الوقت، ستظهر شريط أدوات صغير عائم فوق القسم مع خيارات التحرير.
توفر لك شريط أدوات القسم الضوابط التالية من اليسار إلى اليمين: Edit section يفتح لوحة إعدادات القسم، حيث يمكنك تغيير صورة الخلفية أو اللون، وضبط الحشو، وتعديل خيارات التخطيط.
بجانبه يوجد Generate image، الذي يفتح مولد الصور بالذكاء الاصطناعي.
بعد ذلك، لديك أيقونة النسخ (Duplicate)، ومفتاح إخفاء/عرض، وأيقونة الحذف، وسهما التحريك للأعلى والأسفل لإعادة ترتيب الأقسام، وقائمة خيارات إضافية بثلاث نقاط.
لتعديل أي نص على الصفحة، ما عليك سوى النقر عليه والبدء في الكتابة. سيصبح عنصر النص قابلًا للتحرير، وستظهر لك أدوات التنسيق. يمكنك تغيير حجم الخط، وسمكه، والمحاذاة، واللون مباشرة من هذه الأدوات.
لتغيير صورة، انقر عليها. سترى خيارات لاستبدالها بصورة من ملفاتك الخاصة، أو تصفح مكتبة الصور المخزنة في 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: إعداد تحسين محركات البحث (SEO)
قبل النشر، تحتاج إلى إعداد SEO. هذه خطوة يتخطاها الكثيرون، وهي خطأ.
قضاء 15 دقيقة في ملء إعدادات SEO بشكل صحيح يمكن أن يحدث فرقًا حقيقيًا في مدى قدرة الأشخاص على العثور على موقعك عبر Google.
انقر على SEO في الشريط الجانبي الأيسر لفتح لوحة SEO بعنوان “Let’s be found on Google (SEO).”
تنقسم اللوحة إلى قسمين. على اليسار، سترى قائمة بجميع صفحاتك. وعلى اليمين، سترى Website overview، الذي يعرض اسم نشاطك التجاري ولغة الموقع. اضغط على Edit لتحديثها إذا لم تكن صحيحة.
أسفل معلومات الموقع، سترى قسمًا يسمى “Some pages require your attention.”
كل صفحة بحاجة لعمل محددة بعلامة تحذير برتقالية. انقر على أي صفحة في اللوحة اليسرى لفتح إعدادات SEO الفردية الخاصة بها، حيث يمكنك كتابة عنوان ميتا ووصف ميتا لتلك الصفحة.
اعمل على كل صفحة في القائمة. العنوان الميتا الجيد واضح، ويحتوي على الكلمة المفتاحية الرئيسية، ويبلغ أقل من 60 حرفًا. الوصف الميتا الجيد يلخص مضمون الصفحة ويكون أقل من 160 حرفًا. هذه هي المقاطع التي تظهر في نتائج بحث Google، لذلك يستحق قضاء بضع دقائق على كل منها.
الخطوة 11: ربط النطاق الخاص بك
إذا لم تقم بعد بربط نطاق مخصص بموقعك، فقد حان الوقت الآن. اضغط على زر Connect domain في شريط أدوات المحرر العلوي.
لديك خياران. إذا كنت تملك نطاقًا بالفعل، يمكنك ربطه عن طريق تحديث إعدادات DNS للإشارة إلى خوادم Hostinger. إذا لم تكن تمتلك نطاقًا بعد، يمكنك شراء واحد مباشرة من Hostinger في هذه الشاشة نفسها.
حتى تربط نطاقًا، سيكون موقعك متاحًا عبر نطاق فرعي مؤقت من Hostinger، مثل yoursite.builder-preview.com. هذا مقبول لأغراض الاختبار، ولكنك تحتاج إلى نطاق مناسب قبل البدء في مشاركة موقعك علنًا.
الخطوة 12: معاينة موقعك ونشره
أنت على وشك الانتهاء. قبل الضغط على نشر، اضغط على زر 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 موقعك متجاوبًا تلقائيًا، لكن الصور والتباعد قد يحتاجان في بعض الأحيان إلى تعديلات بسيطة على الشاشات الصغيرة. دائمًا قم بالمعاينة على الجوال قبل البث المباشر.
املأ إعدادات SEO لكل صفحة على حدة. ليس فقط الصفحة الرئيسية. كل صفحة في موقعك تستحق عنوان ميتا ووصف ميتا مناسبين. يستغرق ذلك بضع دقائق لكل صفحة وهو أحد أبسط الأشياء التي يمكنك القيام بها لتحسين ظهورك في نتائج البحث.
استخدم مكتبة الوسائط لتنظيم عملك. ضمن More > Media library، يمكنك تحميل وإدارة جميع صورك في مكان مركزي واحد. يجعل هذا عملية إعادة استخدام الصور عبر صفحات متعددة أسهل بكثير ويحافظ على تناسق موقعك.
عد بانتظام وحسّن على مدار الوقت. نشر موقعك ليس نهاية العملية، بل هو البداية. ارجع بانتظام لتحديث المحتوى الخاص بك، وإضافة منشورات مدونة جديدة، وتحسين صفحاتك مع تطور عملك.
Hostinger Website Builder يزيل تقريبًا كل الحواجز التي كانت تقف بينك وبين موقع احترافي. يقوم الذكاء الاصطناعي بالجزء الأكبر من العمل في التصميم والنصوص، ويجعل المحرر التخصيص أمرًا بسيطًا، وتوفر أدوات SEO والتكاملات المدمجة كل ما تحتاجه في مكان واحد.
اتبع الخطوات في هذا الدليل ويمكنك بشكل واقعي الحصول على موقع مباشر ومصقول يعمل خلال أقل من ساعة.
