إنشاء صفحات هبوط جذابة  دليل خطوة بخطوة

مقدمة

هل تمنيت يوماً أن تصمم مقاطع لقِطع صفحات الهبوط جذابة ومتجاوبة — دون كتابة سطر واحد من الكود؟ مع ملحق Selldone في ChatGPT يتحول هذا الحلم إلى واقع.

في هذا الدليل، ستتعلم خطوة بخطوة كيف تنتقل من صورة إلهام إلى مقطع حي متجاوب بالكامل داخل Page Builder الخاص بـ Selldone — وكل ذلك مدعوم بالذكاء الاصطناعي.

بنهاية الدليل سيكون لديك مقطع مصمم بشكل احترافي جاهز للنشر في موقعك على Selldone.

💡 ملاحظة: بنيت أداة Page Builder في Selldone على Vuetify (Vue 3) — لذا كل مقطع يُنتج بواسطة الملحق متوافق تماماً مع إطار العمل الحديث والمتجاوب الخاص بـ Selldone.

الخطوة 1 – حضّر مرجع الإلهام

ابدأ بالعثور على تصميم لمقطع يلهمك. في هذا الدرس نستخدم مقطعًا من الصفحة الرئيسية لـ نون (Noon) كمثال مرجعي — تصميم نظيف وحديث يعرض منتجات مميزة بصور قوية ونداءات واضحة لاتخاذ إجراء.

التقط لقطة شاشة لذلك المقطع من موقع نون؛ سنستخدمها كمرجع بصري في ChatGPT عند توليد التصميم المخصص باستخدام ملحق Selldone.

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

⚠️ تنبيه استخدام عادل: لقطة الشاشة من نون المستخدمة هنا للشرح والتوضيح فقط كمصدر إلهام. جميع العلامات التجارية والصور والتصاميم تعود إلى أصحابها — هذا الدرس غير مرتبط بنون ولا معتمد منها.

الخطوة 2 – افتح ChatGPT مع ملحق Selldone

تأكد من تفعيل ملحق Selldone في ChatGPT:

1. اذهب إلى ChatGPT → Settings → Beta Features → Plugins وفعل خيار الإضافات.
2. زر Plugin Store وثبّت ملحق Selldone.
3. ابدأ محادثة جديدة مع تفعيل الملحق.

سيتعين عليك رؤية شعار Selldone بجانب صندوق الدردشة — هذا يعني أن الملحق جاهز للاستخدام.

الخطوة 3 – ارفع تصميمك المرجعي

ارفع لقطة الشاشة التي التقطتها واكتب مطالبة واضحة، على سبيل المثال:

من قائمة الأعلى تأكد من أنك تستخدم أحدث إصدار من ChatGPT.

“أريد بناء مقطع يشبه هذه الصورة، مع أحجام خطوط متجاوبة، وخيارات لتغيير الخط ولون البطاقات، وبطاقات يمكن أن تكون دائرية أو مربعات بزوايا منحنية.”

سيقوم ChatGPT (مع Selldone) بتحليل الصورة وتوليد كود مبني على Vuetify (Vue 3) متوافق بالكامل مع Page Builder في Selldone.

إنشاء صفحة هبوط جديدة في Selldone

قبل إضافة مقطعتك المخصصة، لننشئ أولاً صفحة هبوط خام داخل Selldone لاستخدامها.

1. من قائمة المتجر الأعلى، انتقل إلى Pages → Landing → Add New Landing.
   
2. سترى على هذه الشاشة ثلاث قوالب افتراضية لصفحات الهبوط.
3. انقر على أيٍ منها لاختيار قالب ودخول مصمم صفحة الهبوط. داخل المصمم، افتح اللوحة الجانبية اليسرى، ابحث عن عنصر “Code” واسحبه إلى مساحة Page Builder. هذا عنصر “Code” هو المكان الذي ستلصق أو تستورد فيه المقطع الذي ولّده ChatGPT عبر ملحق Selldone.
4. انقر داخل صندوق الكود لتفعيل شريط الأدوات — ستظهر شريط أدوات علوي سنستخدمه كثيرًا.

-الأيقونة الأولى (<>) تفتح محرر الكود، حيث يمكنك لصق أو تعديل الـ HTML ومقاطع Vue التي ولّدها ChatGPT.-الأيقونة الثانية تفتح Properties، حيث يمكنك تعديل تخطيط المقطع، التباعد، وإعدادات العرض.

الخطوة 4 – انسخ والصق كود ChatGPT الأولي في المحرر

قد تكون هذه النسخة غير صحيحة

الآن تحتاج إلى نسخ النسخة الأولى من الكود التي ولّدها ChatGPT.
كما ترى في المثال، قد يبدو الناتج مختلفًا عن الصورة المرجعية — هذا يعني أن ChatGPT أنتج نسخة غير دقيقة من المقطع. هذا أمر طبيعي تمامًا فلا تقلق.لإصلاح ذلك، أعد إرسال الصورة المرجعية واطلب مرة أخرى، مثلاً بقولك:

“ركز على الصورة التي أرسلتها أعلاه. سأعيد إرسالها الآن.”

الآن سيبدأ ChatGPT من جديد ويولّد كودًا جديدًا. هذه النسخة لن تكون نهائية بالضرورة، فقد ترغب بإضافة طلبات وتعديلات لاحقًا.الآن، انسخ الكود والصقه في محرر الكود ثم اضغط Apply:

ملاحظة هامة: الوضع الافتراضي لمحرر الكود هو HTML. يجب التحويل إلى خيار Vue — وإلا فستحصل على نتيجة فارغة.

الآن سترى النسخة الأولى الصحيحة من المقطع المُولد بواسطة ChatGPT. اضغط على العنصر الثاني في شريط الأدوات (كما ذُكر سابقًا) لفتح قائمة Properties للتعديلات. ستجد العديد من الإعدادات المتاحة لمساعدتك في تخصيص هذا المقطع بما يناسب عملك.

خيار RESET TO DEFAULT:

أحيانًا عندما تلصق نسخة محدثة من الكود قد لا ترى تغييرات مرئية. يحدث هذا إذا كانت التعديلات جوهرية. في هذه الحالة، ستحتاج إلى النقر على خيار Reset to Default. ضع في اعتبارك أن استخدام هذا الخيار سيحذف كل إعداداتك المخصصة، بما في ذلك النصوص الجديدة، الألوان، أحجام الخطوط، وحتى الصور المرفوعة — إنه إعادة ضبط للمصنع 🙂.لذا، استخدم هذا الخيار فقط عندما لا تُطبّق تغييراتك بشكل صحيح.

الخطوة 5 – ضبط المقطع

يعتمد ChatGPT، بناءً على ما تعلّمَه من مستخدمين آخرين الذين استخدموا هذه الطريقة لبناء المقاطع، على توليد تخطيطات أكثر شمولاً — لذا ليس عليك طلب كل عنصر على حدة. هذه هي الفائدة الحقيقية من استمرار المحادثة: كلما طالت محادثتك وكانت أكثر وضوحًا، كلما فهم ChatGPT تفضيلاتك التصميمية وقدم نتائج أكثر اكتمالًا ودقة.الكود المولّد افتراضيًا متجاوب إلى حد كبير، لكنك لا تزال قادرًا على ضبط التفاصيل مثل أحجام الخطوط، أوزان الخط، ارتفاعات أو عرض المقطع أو البطاقات، وعناصر بصرية أخرى وفق تفضيلاتك.
على سبيل المثال، يمكنك ضبط Selldone لعرض 8 بطاقات في الصف على شاشات سطح المكتب الكبيرة، 4 بطاقات على الأجهزة اللوحية، وبطاقتين على الهواتف المحمولة.
لنرى كيف يفسّر ChatGPT هذه التعديلات ويطبقها — قد نحتاج لإجراء بعض التعديلات أو الطلبات الإضافية في الخطوات التالية.في هذا المثال، يُنصح بتغيير الحد الأقصى لعرض المقطع إلى 1400px لتحسين التخطيط. كما يمكنك تعديل عدد البطاقات في الصف إلى 8، 4، و2 لأحجام سطح المكتب والتابلت والمحمول على الترتيب.
لتحسين التباعد، حاول تقليل Cards Gap (سطح المكتب) إلى حوالي 12px. بالإضافة إلى ذلك، يمكنك تقليل ارتفاع البطاقة من 180px إلى 160px أو تعديل حجم الصورة لتناسب تصميمك.

من المهم أن تتذكر أنك تستطيع تخصيص الشكل والمظهر بسهولة من خلال تجربة هذه القيم — جرّب الأرقام وابحث عن الأنسب لأسلوبك.

لرؤية النتيجة بشكل أفضل، يمكنك رفع صورك الخاصة. نوصي باستخدام صور بخلفيات شفافة حتى يطبَّق خيار Card Background Color بشكل متناسق على جميعها — مما يمنح مقطعتك مظهرًا أنظف وأكثر احترافية.بعد رفع الصور وتحرير النصوص وإنهاء التفاصيل، اضغط زر الحفظ — أو استخدم Ctrl + S على ويندوز للحفظ الفوري.
حان الآن وقت فتح الصفحة الحية لمعاينة مقطعتك أثناء العمل.
لعرضها مباشرة، يمكنك استخدام خيار Live Preview أو النقر على الزر المجاور الذي يعرض اسم صفحة الهبوط — سيفتح ذلك الصفحة في عرض الزائرين كما سيشاهدها زوار موقعك. مع ذلك، لا أوصي باستخدام Live Preview كمعيار نهائي لفحص الاستجابة، لأنه لا يعكس تمامًا تجاوب الصفحة عبر الأجهزة المختلفة — وسنناقش ذلك أدناه بمزيد من التفاصيل.هذا هو ناتج الكود. الآن نحتاج لاختباره عبر أحجام شاشات مختلفة للتأكد من أن كل شيء يعمل بشكل صحيح.
لفتح أدوات مطوّر الويب في متصفحات ويندوز اضغط F12.الآن، من القائمة العلوية اختر Responsive لمعاينة كيف يبدو مقطعتك على أحجام شاشات مختلفة.كما ترى، الإصدار المحمول يبدو نظيفًا ومتجاوبًا بالكامل.في عرض التابلت — على سبيل المثال على جهاز iPad Pro بمقاس 11 بوصة — إعداداتنا (4 بطاقات في الصف على التابلت) قد لا تُطبّق وتظهر فقط بطاقتين. نحتاج أن نطلب من ChatGPT إصلاح هذه المشكلة وإعادة الترميز.

الخطوة 6 – التكرار والتنقيح

لا تتوقّف عند النسخة الأولى — هنا تبدأ الإبداع الحقيقي. يمكنك الاستمرار في المحادثة مع ChatGPT لتعديل تفاصيل مثل:

• جعل المقطع متجاوبًا على جميع الشاشات.
• إضافة تأثير تحويم (hover animation).
• استخدام أزرار متدرجة (gradient buttons).

كل جولة تحدث تحديثًا فوريًا لمقطعك.

💡 نصيحة احترافية: كلما تحدثت أكثر وحدّدت ما تريد بوضوح، زادت قدرة ChatGPT على التعرّف على أسلوبك التصميمي. مع الوقت سيتعلم تفضيلاتك ويقدّم نتائج أدق وأعلى جودة.
هنا عليك شرح المشكلة بوضوح لمساعدة ChatGPT على فهمها بشكل أفضل.
تذكّر، لا يستطيع قراءة أفكارك — عليك وصف المشكلة بتفصيل، مثل المثال التالي:

لقد اخترت عرض 4 بطاقات في صف في حجم التابلت لكن يظهر 2 بطاقة فقط في iPad Pro 11 inch. أصلح ذلك. لقد اخترت 2 في الصف للهواتف.

عندما يرد ChatGPT على طلبك، أحيانًا يقدم فقط تعديلات الكود المحددة التي تحتاج إلى استبدالها أو إضافتها يدويًا. لتسهيل الأمر، اطلب ببساطة: “أرسل الكود الكامل.”غالبًا ما يقترح ChatGPT في نهاية رسالته إعدادات إضافية ربما أغفلتها — مثل إضافة روابط إلى البطاقات، وهو أمر أساسي لمقطعنا.قارب الإنتهاء! انسخ والصق الكود المحدث في المحرر، احفظ تغييراتك، واستعرضه في الوضع الحي للتأكد من أن كل شيء يبدو صحيحًا.
كما ترى، الآن يعرض بشكل مثالي 4 بطاقات في الصف في نسخة التابلت.

الخطوة 7 – إنهاء الكود وحفظ المقطع

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

أضف كتلة وصف مفهومي فوق وسم