در ادامه پست قبلی که در خصوص صفحه فرود (لندینگ پیج) نوشتیم اهمیت آنرا برایتان بازگو نمودیم. طبق قولی که داده بودیم در این مطلب به اصول طراحی صفحه فرود مناسب میپردازیم و به شما خواهیم گفت که چگونه با چند ابزار ساده یک صفحه فرود مناسب ایجاد نمایید.
اصول طراحی صفحه فرود
- صفحه فرود میبایست عاری از هرگونه حواس پرتی برای کاربر باشد
- صفحه فرود باید شامل اطلاعات کامل خدمات یا کالای موجود باشد
- دارای دکمه “تشویق به اقدام” یا Call to Action در بالا، وسط و پایین صفحه باشد
- اگر صرفاً معرفی خدمات است، میبایست فرمی برای دریافت ایمیل کاربر ایجاد شود
- استفاده از رنگهای شاد و تصاویر با کیفیت ضروری است
فرض کنیم میخواهید در صفحه فرود یک گوشی جدید را معرفی و جهت فروش عرضه نمایید. این صفحه باید حاوی اطلاعاتی کامل در باره گوشی و همینطور عکس از تمامی زوایای گوشی را شامل شود. سپس همانگونه که کاربر با اسکرول کردن صفحه به سمت پایین با امکانات آن آشنا و تصاویر مربوطه را میبیند، دکمه اقدام نیز در دسترس وی میبایست قرار بگیرد تا اگر تا آن لخظه تصمیم به خرید گرفت از ادامه دیدن صفحه منصرف و خرید را انجام دهد. و همچنین همانگونه که عرض کردیم در این صفحه نباید هیچگونه حواسپرتی برای بازدید کننده ایجاد شود، مانند هدر سایت، لوگوی سایت، منوها، فوتر… صفحه فرود شما باید تمام و کمال به همان محصول اختصاص یابد.
و اما اگر قرار است محصولی بصورت فایل دانلودی یا معرفی خدماتی در صفحه فرود صورت گیرد بهتر است فرمی برای دریافت ایمیل و نام بازدید کننده ایجاد نموده که تنها در صورت ورود اطلاعات، وی بتواند فایل را دریافت نماید. دلیل این امر نیز مشخص است، شما با جمع آوری ایمیلهای کاربران بعدها برای ایمیل مارکتینگ و تبلیغات به آنها نیاز خواهید داشت.
اگر از کاربران دائمی وردپرس داغ باشید احتمالا اطلاع دارید که چندی پیش افزونه ای با عنوان المنتور معرفی کردیم که این افزونه قابلیت ساخت انواع صفحات را دارد. البته افزونه های زیادی برای این کار وجود دارد حتی افزونه هایی برای ساخت لندینگ پیج های تخصصی ولی تا آنجایی که ما اطلاع داریم اغلب برای زبان فارسی بهینه شده نیستند. اما المنتور کاملا زبان فارسی را پشتیبانی میکند.
برای ساخت لندینگ پیج یکی از راهها استفاده از المنتور است که در پست مربوط به آن مقداری درباره آن شرح دادیم. بهتر است آنرا مطالعه نمایید
همچنین افزونه هایی چون Parallax Gravity ، WordPress Landing Pages ، Beaver Builder نیز برای ساخت لندینگ پیج بسیار مناسبند.
روش دیگر ساخت یک صفحه بصورت HTML است اگر دانش کافی برای ایجاد فایلهای HTML ندارید کافیست در گوگل عبارت “Free Online Landing Page Creator” را جستجو کنید. خواهید دید که سایتهای زیادی هستند که این نوع صفحات را میسازند. و تنها کاری که باید انجام دهید وارد کردن اطلاعات و تصاویر مورد نظرتان است.
یکی از مشکلاتی که بعد از ایجاد لندینگ پیج بوسیه افزونه، کاربران با آن مشکل دارند وجود موارد اضافی قالب اصلی سایت است، بعنوان مثال منوها و سایدبار و فوتر و غیره…
برای حل این مشکل راه حل آسان پنهان نمودن این عناصر از صفحه تنها با استفاده از یک کد کوتاه CSS است. مهم نیست از چه افزونه ای برای ساخت صفحه فرود استفاده میکنید. همه آنها بخشی را برای نوشتن کدهای CSS دارند
کافیست شما هر عنصری را که میخواهید پنهان کنید، کلاس یا آیدی آنرا در قالب بیابید. انجام اینکار نیز بسیار ساده است، سایتتان را در مرورگر کروم باز کنید و روی هر عنصری که میخواهید کلاسش را بیابید کلیک راست و گزینه Inspect Element را بزنید. سورسی که به شما نمایش داده میشود حاوی کلاسها و آی دی های آن بخش است که با کمی دقت میتوانید آنرا بیابید.
حال کافیست در قسمت کدهای CSS افزونه صفحه ساز عبارتی مانند زیر را وارد نمایید
.class ya #id{
display:none!important;
}
دقت داشته باشید که در مثال بالا شما میبایست بجای کلمه id و class عبارت مربوط به کلاس آن بخش را وارد نمایید همچنین کلاسها با نقطه و آیدی ها با علامت # در سی اس اس شروع میشوند.
موفق باشید.
