آموزش ساخت صفحه فرود یا landing page در جوملا توسط صفحه سازها

آموزش ساخت صفحه فرود یا landing page در جوملا توسط صفحه سازها

امتیاز شما به این پست
(14)
چاپ  

در تبلیغات اینترنتی اصطلاحی به نام صفحه فرود وجود دارد.لندینگ پیج یا صفحه فرود ، به صفحه‌ای میگویند که در ازای دریافت اطلاعاتی از کاربران سایت هدیه‌ای به آنها داده میشود. این هدیه ممکن است کد تخفیف، کتاب الکترونیکی، فایل صوتی، فایل ویدیویی و هر چیزی که فکرشو میکنید باشه. یکی از مهمترین بخش ها برای یک سایت تجاری صفحه فرود یا landing page هست، که وقتی با  روش های دیگر بازاریابی اینترنتی مثل ایمیل مارکتینگ و … ترکیب شوند میتواند نتایج بسیار خوبی برای یک کسب و کار اینترنتی شما رقم بزند.
خب بزارید کاملتر توضیح بدم ، گاهی اوقات شده که در تبلیغات اینترنتی دیده باشید که سایت تبلیغ دهنده ، کاربر را به صفحه خاصی هدایت می کند. یعنی تجمع و رجوع کاربران در آن صفحه بیشتر از سایر صفحات وب سایت است و بدون شک هدف مدیر سایت از این تجمع ،  فروش محصول یا خدمات و کسب در آمد است.خب قصد من از نوشتن این مطلب طریقه ایجاد چنین صفحاتی است و فکر میکنم در حال حاضر کمی با صفحات فرود یا لندینگ پیج آشنا شده باشید.

چرا کسب و کار اینترنتی شما باید صفحه فرود داشته باشد؟

صفحه فرود به تنهایی هیچ کاربردی به جز دادن هدیه‌ و دریافت اطلاعاتی از بازدیدکنندگان در ازای دادن هدیه ندارد. اما اگر شما این صفحات را با روش‌های دیگر بازاریابی اینترنتی مثل ایمیل مارکتینگ ترکیب کنید فایده و سود زیادی خواهد برای کسب و کار شما خواهد داشت. به وسیله اطلاعاتی که از کاربران سایت یا وبلاگ دریافت میکنید، بعدها با ارتباط دوستانه ای که با بازدید کنندگان برقرار میکنید باغث خواهد شد اعتماد آنها را جلب کنید و برای دریافت ایمیل‌ها و پیام‌های شما لحظه شماری کنند و شما هم میتوانید بین همین ارتباط دوستانه ای که با کاربران خود برقرار کرده اید ، تبلیغ محصول و کسب و کار خود را بکنید و آنها را به فروش برسانید ، چرا که با این روش هم کاربران شما راضی خواهند بود و هم شما به اهداف خودتان خواهید رسید.

چند نکته برای ساخت صفحات فرود :

حذف تقریبا تمامی قسمت‌های سایت مثل : منو ، لوگو ، سایدبار و...

سعی کنید از ویدیو و فیلم در صفحات فرود استفاده کنید

سعی کنید تا حد امکان از تصاویر مفهومی و زیبا استفاده کنید

تا حد امکان اطلاعات محدودی از کاربران بگیرید مثلا : فقط ایمیل

سعی کنید پشنیهاد ویژه ای یا هدیه ای ارزشمند به کاربران خود دهید

بهینه و سازگار بودن صفحه فرود یا لندینگ پیج برای تبلت و موبایل ها

 ابزار لازم برای ساخت صفحه فرود :

صفحه ساز

فریم ورک منعطف

چند نکته برای ساخت بهتر صفحات فرود: 

- این آموزش مختص به صفحه ساز خاصی نیست و با هر صفحه سازی خواهید توانست صفحه فرود در جوملای خود بسازید.

- بهتر است برای ساخت سایت خود از فریم ورک های منعطفی مانند : هلیکس (Helix) ، گانتری (Gantry) ،تی تری (T3) و.. استفاده کنید.

انواع صفحه ساز :

صفحه ساز SP Page Builder نسخه پیشرفته و حرفه ای - خرید

صفحه ساز SP Page Builder نسخه رایگان - دانلود

صفحه ساز Quix Page Builder نسخه پیشرفته و حرفه ای - خرید

صفحه ساز Quix Page Builder نسخه رایگان - دانلود

صفحه سازJA Page Builder نسخه پیشرفته و حرفه ای - (بزودی در آی سی ام اس)

صفحه سازJSN Page Builder نسخه پیشرفته و حرفه ای - خرید

صفحه ساز JSN Page Builder نسخه رایگان - دانلود

بریم برای آموزش : 

شاید برای خیلی ها سوال باشه که من از چه افزونه هایی در این آموزش استفاده میکنم ، من در این آموزش از صفحه ساز SP Page Builder نسخه 2 و فریم ورک محبوب و دوست داشتنی هلیکس (Helix) نسخه 3 استفاده میکنم.

اکثر صفحه سازها نسخه های رایگان و تجاری دارند اما نسخه های رایگان باهاشون کار خاص و جذاب زیادی نمیشه انجام داد مگر به صورت دستی و html خام کدهاتون رو وارد کنید.اما در نسخه های تجاری امکانات خاص و جذابی قرار داده شده که باهاشون خیلی کارها میشه کرد.

من در این آموزش میخوام مراحل ساخت و نمایش یک صفحه فرود حرفه ای رو قدم به قدم بهتون آموزش بدم که چطوری بتونید یک صفحه فرود رو از ابتدا خودتان طراحی کنید.برای اولین قدم همیشه سعی کنید طرح مورد نظرتون رو روی ورقی چیزی پیاده کنید تا در هنگام طراحی خواسته های خودتون رو بدونید و وقتتون سر پیاده سازی و فکر کردن اینکه چه چیزهایی بزارید گرفته نشود.به همین منظور من یه طرحی رو برای آموزش این پست کشیدم و قرار هست با صفحه ساز این طرح صفحه فرود خودم رو پیاده سازی کنم.قرار هست که من یه صفحه مربوط به اپلیکیشن یا اپلیکیشن ساز آی سی ام اس طراحی کنم که قسمت اینترو و هدر داره و به سکشن های مختلفی تقسیم میشه که نهایتا به فوتر ختم میشه.

آموزش جوملا در آی سی ام اس : مدیریت جوملا

برای ایجاد یک صفحه فرود زیبا و دلچسب ابتدا باید موقعیت های هدر و فوتر و سایر موقعیت های اصلی قالب رو حذف کنید و فقط موقعیت Component و موقعیت های دلخواهتون رو که فکر میکنید به زییایی قالبتون کمک میکنه رو بزارید.برای اینکار از منوی افزونه ها وارد قسمت قالب و سپس استایل ها شوید.از یکی از قالب های خود فرض مثال قالب پیش فرض کپی بگیرید. وارد قالبی که کپی گرفتید شوید.تمام موقعیت های موجود رو پاک کنید و فقط موقعیت Component رو بزارید باشه.

موقعیت پیش فرض

آی سی ام اس : مدیریت قالب در جوملا با فریم ورک helix

من در آموزش موقعیت کامپوننت و موقعیت page-scroll رو گذاشتم تا در این موقعیت دکمه بالا رونده اضافه کنم.

موقعیت پس از حذف و ویرایشمدیریت قالب و لایوت بندی در جوملا با فریم ورک هلیکس

طرحی که من برای این آموزش در نظر گرفتم و با خودکار بروی کاغذ پیادش کردم به صورت زیر هست :)

آی سی ام اس : طرح صفحه فرود اپلیکیشن بخش اول

آی سی ام اس : طرح صفحه فرود اپلیکیشن بخش دوم 

آی سی ام اس : طرح صفحه فرود اپلیکیشن بخش سوم

خب ، برای شروع وارد صفحه ساز میشویم.در ابتدا یک عنوان برای صفحه انتخاب میکنیم.مثلا : اپلیکیشن آی سی ام اس : صفحه ساز sp page builder

در منو ها توجه میکنید که گزینه های افزودن ردیف جدید ،وارد کردن(import) ، صادر کردن (Export) ، و صفحه قالب های نمونه که برای الگو گیری میتونه کمکتون کنه وجود دارد.ما در اینجا افزودن ردیف جدید رو میزنیم و اولین ستون ساخته خواهد شد.با کلیک بروی علامت مثبت یا همان Add New Addon تمامی عناصر آماده ای که در صفحه ساز میتوانید استفاده کنید لیست میشود که برای نمونه میتوان به لود کردن ماژول های جوملا ، تصاویر ، گالری تصاویر ، آیکون ، ویدیو ، فایل صوتی ،بلوک بندی ، اشتراک گذاری ،نقشه گوگل و خیلی امکانات دیگر اشاره کرد.

من در این آموزش فقط از هفت عنصر در لیست Addon ها یعنی تصویر ، بلوک نوشته ، دکمه ها ، نظرات مشتریان ، درصد پیشرفت ، باکس ویژه و پاپ آپ ویدیو استفاده کردم تا این طرح مورد نظرمو پیاده کنم.

لیست عناصر صفحه ساز جوم شیپر

همونظور که توی طرح میبنید من در بخش اول من یک تصویر در سمت راست و نوشته و کمی توضبحات زیرش قرار دادم که در بخش پایین نوشته در سمت چپ آیکون های مارکت قرار میگیره.

ابتدا ردیف رو به دو ستون تقسیم میکنم و برای گذاشتن تصویر گوشی از عنصر تصاویر از لیست Addon ها انتخاب میکنم و برای عنوان و توضیحات زیرش در سمت چپ از عنصر باکس ویژه یا همون Feature Box استفاده میکنم.برای قرار دادن آیکون مارکت ها هم در ستون چپ یک زیر ردیف ایجاد میکنم و از عنصر تصویر که در لیست Addon ها هست تصویر مارکت و لینک هاشون رو قرار میدم.

آی سی ام اس : ستون بندی صفحه ساز sp page builder

به همین صورت و خیلی ساده و ویژوال میتونید بخش های دیگه رو مثل بخش نمونه کارها ، نظرات مشتریان و فوتر رو ایجاد و ویرایش کنید.در صورتی هم که یک مرحله کاری رو به اشتباه انجام دادید میتوانید از تولبار صفحه ساز بالا و سمت راست گزینه های برگشت (Undo) به یک مرحله قبل از ویرایش و انجام مجدد (ReDo) برای برگشت به حالت فعلی استفاده کنید.

همچنین اگر طرحی زدید و خواستید در سایت دیگه ای از طرحتون استفاده کنید و ایجاد مجدد طرح براتون وقت گیره میتوانید از تولبار صفحه ساز سمت چپ و بالا گزینه صادر کردن یا Export رو بزنید و در سایتی که قرار هست ازش استفاده کنید گزینه وارد کردن یا import رو بزنید و سپس فایلی که در بخش خروجی گرفتید را انتخاب کنید تا بخش های صفحه رو به همون صورت که ساختید بارگذرای و لود بشه.در تصویر زیر میتوانید تمام ستون و ردیف ها و عناصری که قرار داده ام را مشاهده کنید.

نکته : برای نمایش صفحه در هر مرحله از ساخت میتوانید از گزینه پیش نمایش یا Preview استفاده کنید و در صورتی که طرح شما نهایی و آماده استفاده شد میتوانید از قسمت مدیریت منو ، یک منو ساخته و از بین گزینه ها صفحه ساز SP Page Builder رو انتخاب کنید و سپس با انتخاب گزینه انتخاب صفحه، شما میتوانید در صفحه ای که باز میشود نام صفحه ای که ساخته اید را جستجو کرده و سپس منو خود را منتشر کنید.

تصویری از تمامی ستون و ردیف بندی های انجام شده در صفحه ساز

تصویر مدیریت و ستون بندی صفحه ساز جوم شیپیر

و نهایتا خروجی طرحی که زدم به شکل زیر شد.

امیدوارم این آموزش هم همچون آموزش های قبلی مورد استفاده دوستان عزیز قرار بگیره :)

آپدیت : لینک دانلود به انتهای پست اضافه شد.

آی سی ام اس : صفحه فرود اختصاصی اپلیکیشن

نیاز به مشاوره بیشتر دارید؟ برای صحبت با متخصصان ما تماس بگیرید.
0933-8883035 5 دقیقه رایگان

مطالعه در 8 دقیقه

به همراه یک فنجان قهوه

دیدگاه کاربران

مکانی برای پرسش و پاسخ شما

دیدگاه های اخیر

دیدگاه (16)

This comment was minimized by the moderator on the site

با تشکر از پست خوبتون
ممنون بابت این که به سادگی و با توضیحات کامل مطالب را بیان کردید
امیدوارم موفق و موید باشید

This comment was minimized by the moderator on the site

عالی

This comment was minimized by the moderator on the site

آقای نیازی شرمنده من سوالام بی ربط با پسته

این سایت چحوری لینک هاشو به این شکل تقریبا شبیه وورد پرس در آورده
http://www.sorenmedia.com/education

و اینکه نظر شما در این رابطه چی هست؟
متشکر

This comment was minimized by the moderator on the site

سلام
چون تعداد مطالب کم هست و همینطور این سایتی هم دادید میتونید برای هر مطلب یک منو بسازید و نام مستعار بدید که برای مطالب زیاد کلافه کنندست
منو هم میتونید یک نوع منویی بسازید که در هیچ کجای سایت نمایش داده نمیشه که به اصطلاح hidden menu بهش میگند
با افزونه های seo مثل sh404 هم شدنی هست
اما در جوملا مشکل canonical و داپلیکت کانتنت یا مطالب تکراری حل شده و از جوملا 3.5 به بعد دیگه چنین مشکلی وجود نداره اصلا

This comment was minimized by the moderator on the site

ممنون از پاسختون

منظورم اینه که اگه به مطالب این سایت مراجعه کنید

لیکن مطالب رو به این شکل در آورده
http://site.com/article

دسته بندی رو از لینک حذف کرده
فک کنم سورس رو دستکاری کرده

This comment was minimized by the moderator on the site

آقای نیازی شرمنده در این صفحه
تاریخ مقاله
به چه شکلی به صورت عمودی
یعنی
سال
روز
ماه
میاد
http://joomla.templaza.net/exception-light/index.php/blog/blog-large-image
متشکر

This comment was minimized by the moderator on the site

دشمنتون شرمنده
کافیه به کلاستون کد بدید و همه عناصیر کلاس تاریخ رو display: inline-block کنید
مثلا اگر کلاس تاریخ شما published-date باشه کدهای زیر رو بهش بدید

 {
    width: 90px;
    height: 93px;
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 22px 9px;
    background: #3f51b5;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    margin-top: -46px;
    z-index: 100;
    letter-spacing: -0.5px;
}

و با مارجین میتونید راحت پوزشین رو بالا و پایین کنید
فقط دقت کنید اندازه واید رو طوری بدید که همشون در یک راستا باشند

This comment was minimized by the moderator on the site

حل شد مرسی

This comment was minimized by the moderator on the site

ممنون مشکلی که من دارم در قالب فعلی برای کی دو
تاریخ رو در یک خط میاره و
در صورتی که ماه ها و کارکترها کم و زیاد میشه شکل رو به هم میزنه
کدی که به صورت جدا گانه ماه سال و روز رو تولید کنه رو نیاز دارم

چیزی که الان دارم

<span class="catItemDateCreated yjk2_date"> <span class="fa fa-calendar yjk2circle"></span> <?php echo JHTML::_('date', $this->item->created , JText::_('YJ_DATE_FORMAT')); ?> </span>
          <?php endif; ?>

This comment was minimized by the moderator on the site

کدی که دادید php هست
من فرمت نمایش تاریخ شما رو ندیدم که بتونم دقیق بگم
این کد

JText::_('YJ_DATE_FORMAT')

که از ظاهرش مشخص هست نوشته ای رو در کنار تاریخ نشون میده و کلاس های fa fa- .. هم مربوط به آیکون های اون کلاس هست
باید دید تا دقیق گفت

This comment was minimized by the moderator on the site

قالب خیلی خوشگلی شده
لطفا از این نوع قالب برای صفحه سازها بیشتر بزارید

This comment was minimized by the moderator on the site

اموزشی بود که نکات مهم مثل حذف همه موقعت ها توی صفحه فرود گفته شده بود

This comment was minimized by the moderator on the site

وقتی اون شکل کلی ستون بندی اینارو دیدم فکر نمیکردم خروجی اینقدر زیبا بشع
یعنی واقعا همچین چیز هایی میشه راحت بدون هیچ دانش کد نویسی ساخت؟

This comment was minimized by the moderator on the site

چرا که نه !
با هر نوع صفحه سازی میتونید بهترین و زیباترین صفحات رو بدون حتی دونستن یک خط کد بسازین
فقط یکمی خلاقیت و حوصله میخواد همین

This comment was minimized by the moderator on the site

ja builder رو لطفا زودتر بیاریدش
کاراتون خاصه جناب نیازی
موفق باشید

This comment was minimized by the moderator on the site

شما بی نظیرین
لطفا زودتر سورسشو منتشر کنید
جناب نیازی لطفا صفحه های فرود بومی و به سبک ایرانی طراحی کنید و خیلی از کاربرها حاضرند براش هزینه کنند و خریدارش هستند
سپاس از تمام زحمت هاتون

هنوز دیدگاهی بیان نشده است

ارسال دیدگاه

پیوست ها (0 / 3)
Share Your Location