Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. HTML
Business

كيفية تصميم صفحة الهبوط العظمى باستخدام القوالب بسرعة

by
Difficulty:BeginnerLength:MediumLanguages:

Arabic (العربية/عربي) translation by Mayar shaheen (you can also view the original English article)

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

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

لماذا تستخدم قوالب صفحات HTML المقصودة؟

على الرغم من وجود عدة طرق لإنشاء صفحات مقصودة لحملاتك التسويقية ، إلا أن نموذج HTML للصفحة المقصودة هو أسهل طريقة. في ما يلي عدة أسباب تدعو إلى التفكير في استخدام نموذج لصفحة HTML المقصودة مثل تلك المتوفرة من Envato Elements .

1. سهولة الاستخدام

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

2. أسرع أوقات التحميل

عند تصميم موقع ويب أو صفحة مقصودة ، ستستفيد من أوقات التحميل الأسرع من تصميم موقع الويب الخاص بك باستخدام نظام إدارة المحتوى. ويرجع ذلك إلى أن قوالب HTML تحتوي على بنية أبسط وملفات أقل بشكل عام من السمات والقوالب المستخدمة لأنظمة إدارة المحتوى.

3. لا الصيانة المطلوبة

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

العناصر الرئيسية لصفحة الهبوط العظمى

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

1. العنوان الرئيسي و Subheadline

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

2. نقاط الألم

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

3. فوائد العرض

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

4. إشارات الثقة

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

  • شهادات من المشتركين أو العملاء الحاليين
  • شارات الثقة مثل VeriSign و Norton والدفع الآمن والمزيد
  • ضمان استعادة الاموال
  • قسم الأسئلة الشائعة الذي يجيب على أي أسئلة إضافية
  • ظهرت شعارات المواقع التي أنت أو منتجك عليها

5. دعوة إلى العمل

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

كيفية إعداد قالب الصفحة المقصودة

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

كيف تعمل قوالب HTML

تتكون قوالب HTML عادة من نوعين من الملفات:

  1. ملفات HTML
  2. ملفات CSS.

تحتوي ملفات HTML على البنية الأساسية لجميع العناصر الموجودة على الصفحة. إنها مثل إطار منزلك ، وهذه الملفات هي التي ستقضيها معظم وقتك في العمل. هذه الملفات هي المكان الذي ستقوم بتغيير محتوياته وإضافة أقسام أو إزالتها.

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

في بعض الحالات ، سيحتوي القالب أيضًا على ملفات JavaScript ، والتي تُستخدم عادةً للتحقق من صحة النموذج أو لإضافة تأثيرات حركة على القالب الخاص بك.

مع هذا الخروج من الطريق ، دعونا نلقي نظرة على كيفية هيكلة قالب HTML نموذجي. لأغراض هذا البرنامج التعليمي ، سأستخدم نموذج الصفحة المقصودة لـ Spot HTMLمن Envato Elements ، لذلك قد لا تكون ملفات القالب متماثلة تمامًا. في معظم الحالات ، سيكون لديك ملفات CSS والصور ومجلدات جافا سكريبت. قد ترى أيضًا ملفات HTML أكثر أو أقل ، وفي بعض الحالات ، ستجد مجلد PHP يضيف وظائف إضافية إلى القالب.

Spot landing page HTML template

هنا كيف يتم تنظيم قالب الموقع:

  • CSS . يحتوي هذا المجلد على كافة أوراق الأنماط التي يستخدمها القالب.
  • الصور . في هذا المجلد ، ستجد كل صور العناصر النائبة المستخدمة في القالب
  • جافا سكريبت . في هذا المجلد ، ستجد جميع ملفات جافا سكريبت التي تتحكم في مختلف الرسوم المتحركة وآثار النقل.
  • PHP . هذا يحتوي على كود PHP اللازم لنموذج الاتصال
  • فيديو . يحتوي هذا على نموذج الفيديو المستخدم للتخطيط التجريبي الذي يستخدم فيديو الخلفية.
HTML template structure

بصرف النظر عن المجلدات أعلاه ، يحتوي نموذج Spot على عدة ملفات HTML ، وكلها تمثل اختلافات تخطيط مختلفة.

كيفية العمل مع HTML الصفحة المقصودة قالب

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

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

لنرى أين يقع العنوان في ملف HTML حتى نتمكن من تعديله على الفور. انقر بزر الماوس الأيمن على العنوان الذي يقرأ "Spot هو أفضل طريقة لتقديم تطبيقك إلى العالم!" وحدد Inspect .

سيتم تحميل لوحة في القاع. هذه اللوحة هي لوحة أدوات مطوري Chrome وتتكون من جزأين: الجانب الأيسر الذي يعرض شفرة HTML والجانب الأيمن الذي يعرض شفرة CSS أو الأنماط المرتبطة بالعنصر الذي تقوم بفحصه:

inspecting the template

يتداخل العنوان الذي نقوم بفحصه بين علامات <h2> . الآن ، نحن بحاجة إلى العثور على هذا الجزء من التعليمات البرمجية في القالب وتحريره.

للقيام بذلك ، ارجع إلى مجلد القالب وانقر بزر الماوس الأيمن فوق index1.html مرة أخرى. اختر فتح مع هذا الوقت وحدد محرر نصوص مثل Notepad.

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

في حالتي ، يقع هذا السطر من التعليمات البرمجية على سطر 106.

الآن ، يمكنك البدء في تحرير المحتويات. حدد النص <h2>بين علامات  واحذفها. ثم أدخل النص الخاص بك:

editing HTML template

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

يمكنك ببساطة تكرار هذه الخطوات مرارًا وتكرارًا إلى أن تحل محل كل المحتوى التوضيحي الخاص بك.

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

الآن ، دعنا نلقي نظرة على كيفية استبدال صورة بنفسك. يمكنك بعد ذلك إعادة استخدام الخطوات نفسها لاستبدال كل الصور المستخدمة في القالب:

Inspecting images

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

Editing CSS

لتحريره ، انتقل إلى مجلد القالب الخاص بك ، وافتح مجلد CSS ، ثم افتح ملف CSS الصحيح. في هذا المثال ، أحتاج إلى تعديل لوحة الألوان blue.css. أحتاج لتحرير خط 66 في الملف. للقيام بذلك ، قمت بحذف كل شيء بعد / images / واستبدل اسم الصورة بصورتي الخاصة. احفظ ملف CSS ، ثم حدّث نافذة المتصفح ، وسترى صورة الخلفية الجديدة:

background image

كيف تصمم القالب

عندما تنتهي من تعديل المحتويات واستبدال المعلومات التجريبية ، ستحتاج إلى تصميم القالب لمطابقة علامتك التجارية. يأتي نموذج Spot مع العديد من أنظمة الألوان المعدة مسبقًا ، والتي يتم حفظها كملفات CSS منفصلة في مجلد الألوان الموجود في مجلد CSS. هذا يجعل من السهل ضبط جميع الألوان دفعة واحدة دون تحرير ملفات CSS.

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

<link href="css/colors/color_palette_blue.css" rel="stylesheet" media="screen">

قم بتغيير الاسم إلى نظام الألوان المفضل لديك. في هذا المثال ، قمت باستبداله بـ

<link href="css/colors/color_palette_red.css" rel="stylesheet" media="screen">

إذا لم تكن أي من سمات الألوان تروق لك ، فيمكنك تحرير ملف main.css وضبط الخطوط والألوان يدويًا. ما عليك سوى فحص الرمز في نافذة المتصفح والنظر إلى الجانب الأيسر من الشاشة لمعرفة الأنماط المستخدمة. ثم ، ابحث عن سطر رمز CSS واضبطه. على سبيل المثال ، يمكنك تحرير لون الزر في ملف CSS عن طريق إدخال رمز HEX للون المطلوب ، مثل:

لون الخلفية: # 65b5c1.

كيفية تحميل القالب الخاص بك إلى الخادم

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

ابدأ بإطلاق عميل FTP الخاص بك مثل FileZilla ، وهو مجاني وعبر المنصة. استخدم شريط QuickConnect لإدخال اسم مستخدم وكلمة مرور FTP ، ثم انقر فوق اتصال.

ابحث عن المجلد الذي يتضمن نموذج HTML للصفحة المقصودة على الجانب الأيمن من الشاشة. حدد جميع الملفات والمجلدات ، واسحبها إلى الجانب الأيمن من الشاشة ، وقم بإفلاتها في مجلد public_html .

انتظر حتى تنتهي عملية التحميل وستصبح الصفحة المقصودة الخاصة بك حية.

تعرف على المزيد حول تصميم الصفحة المقصودة

إذا كنت ترغب في معرفة المزيد عن تصميم الصفحة المقصودة ، فلدينا عدد من الموارد المفيدة على Envato Tuts +. إليك بعض البرامج التعليمية لمساعدتك على البدء:

تسرد المقالة التالية بعض أفضل نماذجنا مع تصميمات رائعة للصفحة المقصودة التي يمكنك تنزيلها على الفور:

الحصول على الصفحة المقصودة الخاصة بك وتشغيلها بسرعة باستخدام قالب HTML

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.