Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Mobile App
Business

كيفية إنشاء صفحة مقصودة للتطبيقات الجوّالة مع النماذج

by
Difficulty:BeginnerLength:MediumLanguages:

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

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

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

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

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

ما الذي تبحث عنه في نموذج الصفحة المقصودة للتطبيق

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

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

ما الذي يجعل الصفحة المقصودة للتطبيقات الرائعة؟

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

1. نسخة مقنعة

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

2. لقطات شاشة التطبيق

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

3. مراجعات المستخدم

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

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

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

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

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

هيكل قالب HTML

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

تضيف ملفات جافا سكريبت وظائف إضافية ، وعادةً ما تتحكم في الرسوم المتحركة وعمليات النقل والتحقق من صحة النموذج.

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

s briefly. 

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

Focus mobile app landing page template

فيما يلي كيفية تنظيم قالب التركيز:

  •  CSS . يحتوي هذا المجلد على كافة أوراق الأنماط التي يستخدمها القالب.
  • الخطوط . في هذا المجلد ، ستجد الخطوط التي تم استخدامها في القالب والتي يجب تحميلها إلى خادمك
  • الصور . يحتوي مجلد الصور على جميع صور العناصر النائبة ويمكنك استخدامه لإضافة صورك إلى القالب
  • شبيبة . يحتوي هذا على شفرة JavaScript المطلوبة للقالب
  • php . هذا يحتوي على كود PHP لنماذج الاتصال والنشرة الإخبارية
  • Index.html . الصفحة الرئيسية لقالب الصفحة المقصودة للتطبيق المحمول الخاص بك

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

Focus mobile app landing page template HTML structure

1. إنشاء الصفحة المقصودة التطبيق الخاص بك مع قالب

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

1. بالنسبة للمبتدئين ، سترغب في فتح ملف HTML في متصفحك. للقيام بذلك ، انقر بزر الماوس الأيمن على ملف index.html وحدد " فتح باستخدام" ثم اختر المتصفح الافتراضي. ثم انقر بزر الماوس الأيمن فوق الملف مرة أخرى واختر هذا الخيار " فتح باستخدام"واختر "محرر نصوص" مثل "المفكرة " أو " نص أساسي " أو "TextEdit". سيسمح لك ذلك بمشاهدة القالب والرمز الذي تحتاج إلى تعديله:

Inspecting HTML template

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

Editing HTML template

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

3. قم بالتبديل إلى محرر النص الخاص بك وقم بالتمرير لأسفل حتى ترى نفس <h1>. في قالب التركيز ، يقع حول الخط 105.

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

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

الخيار الآخر هو البقاء في محرر النصوص ومتابعة تحرير علامات HTML التي تحتوي على نص زائف. كما يمكنك رؤيته من لقطة الشاشة أدناه ، يمكنك تحرير الفقرة التي تقع مباشرة أسفل علامات <h1> ، ثم المتابعة من خلال تحرير نص الزر ونص الميزات وما إلى ذلك.

أيًا كان الخيار الذي تختاره ، استمر في تكرار هذه الخطوات حتى تقوم بتحرير كل المحتوى التجريبي.

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

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

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

سترى رمز HTML لعلامات الصور التي تبدو كالتالي: <img src = "images / iphones-hero.png" alt = "picture" class = "hero-picture width-100">.

6. الآن كل ما عليك القيام به هو تحرير ملف index.html في محرر النص الخاص بك.افتح index.html في محرر النص وابحث عن سطر الشفرة الموضح أعلاه. احذف كل شيء بعد الصور / واستبدل اسم الصورة بالصورة الخاصة بك.

2. نمط القالب

الخطوة التالية بعد تحرير المحتوى هي تغيير طريقة ظهور القالب الخاص بك. يمكن القيام بذلك عن طريق تحرير ملف CSS ولكن عليك أولاً معرفة الأنماط المرتبطة بعنصر HTML.

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

Inspecting CSS file

2. لتحرير ملف CSS ، انتقل إلى مجلد القالب الخاص بك وافتح مجلد CSS. الآن ، انقر بزر الماوس الأيمن على ملف style.css ، وانقر فوق فتح باستخدام وحدد محرر النص.

Editing CSS file

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

.section-grey{

الخلفية: # f2f7f8؛

مساحة الحبر: 70 بكسل ×

}

لقد غيرت رمز اللون السداسي واستبدلته بهذا:

 background: #f4f3f2;

يتيح لك CSS أيضًا تغيير الخطوط وألوان النص الخاص بك. ما عليك سوى تكرار الخطوات كما فعلت مع ملف HTML وضبط الأنماط حسب رغبتك.

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

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

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

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

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

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

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.