بلاگ

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

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

امتیاز کاربران

ستاره فعالستاره فعالستاره فعالستاره فعالستاره فعال
 

در تبلیغات اینترنتی اصطلاحی به نام صفحه فرود وجود دارد.لندینگ پیج یا صفحه فرود ، به صفحه‌ای میگویند که در ازای دریافت اطلاعاتی از کاربران سایت هدیه‌ای به آنها داده میشود. این هدیه ممکن است کد تخفیف، کتاب الکترونیکی، فایل صوتی، فایل ویدیویی و هر چیزی که فکرشو میکنید باشه. یکی از مهمترین بخش ها برای یک سایت تجاری صفحه فرود یا 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 رو انتخاب کنید و سپس با انتخاب گزینه انتخاب صفحه، شما میتوانید در صفحه ای که باز میشود نام صفحه ای که ساخته اید را جستجو کرده و سپس منو خود را منتشر کنید.

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

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

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

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

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

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

طراحی و برنامه نویسی قالب و افزونه های اختصاصی

سفارش پروژه
888-3035 0933
راه آسان تری برای ارتباط با کاربران مان پیدا کرده ایم ツ کانال تلگرام آی سی ام اس

خبرنامه
اگر می‌خواهید از آخرین و محبوب‌ترین مقالات و محصولات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

1925 نفر

برخی محصولات مارکت

199,000تومان
49,000تومان
پیش نمایش: http://bit.ly/2srnaDw
مـــستنـــدات: http://bit.ly/2IXsp54
با دریافت این محصول 49 آی بُن هدیه بگیرید
75 % تخفیف با

325,000تومان
49,000تومان
پیش نمایش: http://bit.ly/2ITv7c0
مـــستنـــدات: http://bit.ly/2GQBH0Y
با دریافت این محصول 49 آی بُن هدیه بگیرید
85 % تخفیف با

25,000تومان
8,000تومان
آمـــــوزش: https://goo.gl/jTM8qj
صــــفحه افزونه: https://goo.gl/WWyBzP
با دریافت این محصول 8 آی بُن هدیه بگیرید
68 % تخفیف با

دیدگاه (16)

  1. محمد

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

  1. Mohammad

عالی

  1. امیر

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

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

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

  1. محمدحسین نیازی    امیر

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

  1. امیر    محمدحسین نیازی

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

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

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

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

  1. امیر

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

  1. محمدحسین نیازی    امیر

دشمنتون شرمنده
کافیه به کلاستون کد بدید و همه عناصیر کلاس تاریخ رو 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;
}

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

  1. امیر    محمدحسین نیازی

حل شد مرسی

  1. امیر    محمدحسین نیازی

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

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

<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; ?>

  1. محمدحسین نیازی    امیر

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

JText::_('YJ_DATE_FORMAT')

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

  1. مریم مرادی

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

  1. ارژنگ

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

  1. مهسا حریمانی

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

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

  1. حامد

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

  1. پارسا محمد

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

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

ارسال دیدگاه

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

با آی بن ارزان تر خرید کنید

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

از آی بن بیشتر بدانید

نظرات کاربران

محمدحسین نیازی نظری را ارسال کرده است در :رفع مشکل کار نکردن فیلد های کشویی ویرچومارت در زبان فارسی
سلام سپاس گذارم از لطفی که دارید
ارسال شده در Joomla Article پنج شنبه, 07 جون 2018 12:06
سلام ... طاعات و عبادات قبول : امام علی (ع) فرموندند : زک...
ارسال شده در Joomla Article پنج شنبه, 07 جون 2018 12:00
با سلام و سپاس بابت مطالب و آموزه های خیلی خوبتون. من جو...
ارسال شده در Joomla Article جمعه, 11 می 2018 08:57
منظور این دوستمون چیز دیگه بود، زمانی که کاربر تو سایت ...
ارسال شده در Joomla Article شنبه, 21 آوریل 2018 21:59

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

ثبت نام

 
محمدحسین نیازی پاسخ گوی شماست

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

مدیر و موسس آی سی ام اس