آموزش ساخت لندینگ پیج با Gutenberg در وردپرس؛ صفحه فرود حرفه‌ای بدون صفحه‌ساز
🗓 آخرین به‌روزرسانی:
ساخت لندینگ پیج با Gutenberg به شما اجازه می‌دهد یک صفحه فرود سریع، متمرکز و قابل ویرایش را بدون وابستگی کامل به صفحه‌سازهای سنگین طراحی کنید. در این روش، بخش‌هایی مانند Hero، مزایا، معرفی محصول یا خدمت، اعتمادسازی، فرم، پرسش‌های متداول و Call to Action با بلوک‌های هسته وردپرس، Patternها و در صورت استفاده از قالب بلوکی، Site Editor ساخته می‌شوند.
لندینگ پیج با صفحه اصلی تفاوت دارد. صفحه اصلی معمولاً چند مسیر و چند هدف دارد؛ اما Landing Page برای یک کمپین، محصول، ثبت‌نام، دانلود، رزرو مشاوره یا اقدام مشخص طراحی می‌شود. هر عنصر صفحه باید کاربر را به همان اقدام نزدیک‌تر کند. منوی شلوغ، لینک‌های غیرضروری و چند CTA متضاد معمولاً تمرکز صفحه را کاهش می‌دهند.
در این آموزش پروژه‌محور، یک لندینگ پیج کامل از صفر می‌سازیم. ساخت Template اختصاصی بدون هدر شلوغ، Hero، CTA، فرم، مزایا، اثبات اجتماعی، قیمت‌گذاری، FAQ، نسخه موبایل، سئو، سرعت، دسترس‌پذیری، اندازه‌گیری تبدیل، A/B Testing و تفاوت مسیر قالب بلوکی با WoodMart را بررسی می‌کنیم.
نسخه بررسی‌شده
این مقاله در ژوئیه ۲۰۲۶ براساس WordPress 7.0.2 و مستندات رسمی Block Editor، Cover، Group و Buttons بازبینی شده است. امکانات دقیق واکنش‌گرایی و Template براساس قالب و افزونه‌های فعال تفاوت دارند.
لندینگ پیج چیست؟
Landing Page صفحه‌ای است که برای دریافت یک اقدام مشخص از کاربر طراحی می‌شود. کاربر معمولاً از تبلیغ، شبکه اجتماعی، ایمیل، موتور جست‌وجو یا کمپین وارد آن می‌شود و باید با کمترین اصطکاک به هدف برسد.
نمونه هدف‌های رایج:
- ثبت‌نام در دوره
- خرید محصول
- رزرو مشاوره
- دریافت فایل
- عضویت در خبرنامه
- ثبت درخواست دمو
- ارسال اطلاعات تماس
- استفاده از کد تخفیف یا پیشنهاد محدود
یک لندینگ خوب قبل از طراحی بصری به پیشنهاد روشن، مخاطب مشخص و CTA واحد نیاز دارد.
تفاوت لندینگ پیج با صفحه اصلی
| موضوع | لندینگ پیج | صفحه اصلی |
|---|---|---|
| هدف | یک تبدیل مشخص | معرفی کلی سایت |
| مسیرهای کاربر | محدود و کنترل‌شده | چند مسیر |
| منو | ساده یا حذف‌شده | کامل |
| CTA | یک CTA اصلی تکرارشونده | چند اقدام ممکن |
| محتوا | متمرکز بر یک پیشنهاد | نمای کلی برند و بخش‌ها |
| اندازه‌گیری | نرخ تبدیل و کمپین | تعامل کلی سایت |
برای طراحی صفحه اصلی، مقاله آموزش ساخت صفحه اصلی با Gutenberg و Site Editor را مطالعه کنید.
آیا Gutenberg برای ساخت لندینگ پیج کافی است؟
برای بسیاری از صفحات فرود شرکتی، آموزشی، خدماتی و دانلودی، بله. بلوک‌های Group، Cover، Columns، Media & Text، Image، Heading، Paragraph، Buttons، Details و Pattern بخش بزرگی از نیازهای طراحی را پوشش می‌دهند.
فرم، پرداخت، شمارش‌گر، A/B Test، شخصی‌سازی و اتصال به CRM معمولاً به افزونه یا سرویس جداگانه نیاز دارند. Gutenberg ساختار صفحه را می‌سازد؛ قابلیت تجاری تخصصی باید با ابزار معتبر اجرا شود.
مزایای ساخت Landing Page با Gutenberg
- وابستگی کمتر به Shortcode و Page Builder
- ویرایش مستقیم داخل وردپرس
- استفاده از بلوک‌های هسته
- امکان ذخیره بخش‌ها به‌صورت Pattern
- هماهنگی با Global Styles
- خروجی معمولاً ساده‌تر در پروژه‌های سبک
- انتقال آسان‌تر محتوا میان قالب‌های سازگار
- کنترل بهتر ساختار Heading و HTML
با این حال، کیفیت نهایی به قالب، تعداد افزونه‌ها، تصاویر، فونت‌ها و نحوه طراحی بستگی دارد. Gutenberg به‌تنهایی سرعت بالا را تضمین نمی‌کند.
قبل از طراحی، هدف تبدیل را مشخص کنید
پیش از افزودن اولین بلوک، این جمله را کامل کنید:
کاربری که وارد این صفحه می‌شود باید در پایان چه کاری انجام دهد؟
پاسخ باید یک اقدام باشد. اگر هم‌زمان خرید، دنبال‌کردن شبکه اجتماعی، خواندن وبلاگ، عضویت و تماس را هدف بگیرید، صفحه تمرکز خود را از دست می‌دهد.
شناخت مخاطب
متن و ساختار صفحه باید بر اساس نیاز مخاطب باشد. این پرسش‌ها را پاسخ دهید:
- مخاطب چه مشکلی دارد؟
- چه نتیجه‌ای می‌خواهد؟
- بزرگ‌ترین تردید او چیست؟
- چه مدرکی اعتماد او را افزایش می‌دهد؟
- چه اطلاعاتی برای اقدام لازم دارد؟
- چه اصطکاکی ممکن است مانع تبدیل شود؟
ساختار پیشنهادی لندینگ پیج
- هدر ساده
- Hero و پیشنهاد اصلی
- CTA اولیه
- اعتمادسازی فوری
- مشکل و نتیجه مورد انتظار
- مزایا و ویژگی‌ها
- نحوه کار
- نمونه، دمو یا تصویر محصول
- نظرات و شواهد
- قیمت یا پیشنهاد
- FAQ
- CTA نهایی
- فوتر حقوقی ساده
ترتیب ثابت نیست. در یک محصول ساده ممکن است قیمت زودتر نمایش داده شود؛ در خدمت پیچیده، توضیح و اعتمادسازی قبل از فرم اهمیت بیشتری دارد.
مرحله اول: ساخت برگه لندینگ
- به Pages → Add New بروید.
- عنوان داخلی روشنی مانند «لندینگ دوره وردپرس» وارد کنید.
- Slug انگلیسی و کوتاه انتخاب کنید.
- برگه را ابتدا Draft نگه دارید.
- Comments را در صورت عدم نیاز غیرفعال کنید.
- Template مناسب را انتخاب کنید.
عنوان داخلی برگه می‌تواند برای مدیریت واضح باشد، اما نمایش Post Title در Front-end براساس Template کنترل می‌شود.
مرحله دوم: ساخت Template اختصاصی لندینگ
در Block Theme می‌توانید Custom Template بدون Header و Sidebar بسازید:
- Appearance → Editor → Templates را باز کنید.
- Add New Template را بزنید.
- Custom Template انتخاب کنید.
- نامی مانند Landing Page وارد کنید.
- یک Header مینیمال یا فقط Logo اضافه کنید.
- Post Content را قرار دهید.
- Footer ساده حقوقی اضافه کنید.
- Template را ذخیره و به برگه لندینگ اختصاص دهید.
Post Content را حذف نکنید؛ محتوای ساخته‌شده در برگه داخل همین بلوک نمایش داده می‌شود.
برای آموزش کامل، مقاله ساخت Template نوشته و برگه با Site Editor را ببینید.
آیا منوی اصلی را حذف کنیم؟
در بسیاری از Landing Pageها، Navigation کامل حذف یا بسیار محدود می‌شود تا کاربر از مسیر کمپین خارج نشود. با این حال تصمیم باید براساس اعتماد، برند و نوع پیشنهاد باشد.
برای پیشنهاد ناشناخته یا صفحه‌ای که به اعتبار برند نیاز دارد، لوگو، لینک حریم خصوصی و راه تماس می‌توانند مفید باشند. حذف کامل همه مسیرها همیشه بهترین انتخاب نیست.
مرحله سوم: ساخت Hero
Hero باید چهار پیام را در نمای اولیه منتقل کند:
- پیشنهاد چیست؟
- برای چه کسی است؟
- چه نتیجه‌ای می‌دهد؟
- چگونه اقدام کنم؟
برای ساخت Hero از Group، Cover یا Columns استفاده کنید. Cover می‌تواند تصویر یا رنگ پس‌زمینه همراه متن Overlay داشته باشد و برای Banner و CTA مناسب است. Group نیز کنترل دقیق‌تری بر Layout، Padding، رنگ، Border و عرض محتوا ارائه می‌دهد.
ساخت Hero با Group و Columns
- یک Group تمام‌عرض اضافه کنید.
- رنگ پس‌زمینه و Padding را تنظیم کنید.
- داخل آن Columns دو ستونه قرار دهید.
- در ستون متن، H1، توضیح و Buttons بگذارید.
- در ستون دوم، تصویر محصول یا نتیجه را نمایش دهید.
- چیدمان موبایل را بررسی کنید.
در زبان فارسی معمولاً متن باید در موبایل قبل از تصویر نمایش داده شود.
نوشتن تیتر اصلی
تیتر Hero باید نتیجه را واضح بیان کند. از شعارهای مبهم مانند «تحولی نو در تجربه شما» پرهیز کنید مگر اینکه بلافاصله توضیح دقیق ارائه شود.
فرمول ساده:
نتیجه اصلی + مخاطب + تمایز مهم
مثال: «طراحی سایت وردپرسی را با پروژه‌های واقعی و بدون سردرگمی یاد بگیرید».
زیرتیتر Hero
زیرتیتر باید جزئیاتی را که در H1 جا نشده توضیح دهد: روش، مدت، سطح، محدودیت یا مزیت اصلی. متن را کوتاه نگه دارید.
CTA اصلی
Buttons Block برای افزودن یک یا چند دکمه استفاده می‌شود. CTA باید اقدام روشن داشته باشد:
- ثبت‌نام در دوره
- دریافت نسخه آزمایشی
- رزرو مشاوره
- دانلود راهنما
- مشاهده قیمت
عبارت «کلیک کنید» اطلاعاتی درباره نتیجه نمی‌دهد. متن دکمه را براساس اقدام بنویسید.
CTA ثانویه
اگر لازم است، یک دکمه ثانویه با تأکید کمتر برای «مشاهده دمو»، «دیدن سرفصل‌ها» یا «پرسش‌های متداول» اضافه کنید. CTA ثانویه نباید با CTA اصلی رقابت کند.
اعتمادسازی فوری زیر Hero
یک Row کوتاه می‌تواند موارد زیر را نمایش دهد:
- تعداد مشتری واقعی
- ضمانت مشخص
- پشتیبانی
- امتیاز معتبر
- لوگوی مشتریان یا رسانه‌ها با اجازه
- امنیت پرداخت
از آمار و لوگوی ساختگی استفاده نکنید.
مرحله چهارم: توضیح مشکل و نتیجه
کاربر باید احساس کند صفحه مشکل او را می‌شناسد. یک Section با Heading، Paragraph و List بسازید. ابتدا وضعیت فعلی و سپس نتیجه مطلوب را توضیح دهید.
ترساندن افراطی یا وعده قطعی غیرواقعی اعتبار صفحه را کاهش می‌دهد. مشکل را روشن و محترمانه بیان کنید.
مرحله پنجم: معرفی مزایا
مزایا نتیجه‌ای هستند که کاربر دریافت می‌کند؛ ویژگی‌ها اجزای محصول یا خدمت‌اند. هر دو مهم‌اند، اما Landing Page باید ویژگی را به منفعت ترجمه کند.
| ویژگی | مزیت برای کاربر |
|---|---|
| دسترسی دائمی | کاربر می‌تواند با برنامه خودش یاد بگیرد. |
| فایل تمرین | مطالب را در پروژه واقعی اجرا می‌کند. |
| پشتیبانی | در زمان گیرکردن مسیر ادامه کار دارد. |
| قالب آماده | شروع پروژه سریع‌تر می‌شود. |
ساخت کارت‌های مزیت
از Columns یا Grid استفاده کنید. هر کارت شامل Icon یا Image، Heading و Paragraph باشد. Group والد را برای Border، Radius، Padding و Shadow تنظیم کنید.
از سه تا شش مزیت اصلی استفاده کنید. کارت‌های زیاد باعث تکرار و خستگی می‌شوند.
مرحله ششم: نحوه کار یا فرایند
اگر اقدام چند مرحله دارد، آن را ساده نمایش دهید:
- فرم را تکمیل کنید.
- نیاز شما بررسی می‌شود.
- پیشنهاد یا دسترسی ارسال می‌شود.
فرایند روشن، عدم قطعیت را کاهش می‌دهد. از وعده زمان‌بندی غیرواقعی پرهیز کنید.
مرحله هفتم: نمایش محصول، دمو یا نمونه
برای محصول دیجیتال، تصویر رابط، ویدئوی کوتاه، نمونه فصل یا Preview مفید است. برای خدمت، نمونه‌کار، قبل و بعد واقعی یا خروجی قابل مشاهده ارائه کنید.
Media & Text برای قرار دادن تصویر در کنار توضیح مناسب است. ویدئو را بهینه کنید و Autoplay همراه صدا استفاده نکنید.
مرحله هشتم: اثبات اجتماعی
Testimonial باید واقعی، مشخص و مرتبط باشد. اطلاعات مفید:
- نام یا مشخصات قابل تأیید
- موقعیت یا نوع استفاده
- نتیجه مشخص
- عکس با اجازه
چند نظر کوتاه و واقعی بهتر از ده‌ها نقل‌قول عمومی است.
ساخت بخش نظرات با Gutenberg
یک Columns سه‌ستونه بسازید. در هر ستون Quote یا Group قرار دهید. نام، نقش و نتیجه را نمایش دهید. در موبایل ستون‌ها باید عمودی شوند.
مرحله نهم: معرفی پیشنهاد و قیمت
قیمت یا شرایط پیشنهاد باید شفاف باشد. هزینه‌های جانبی، محدودیت، مدت دسترسی و شرایط بازگشت وجه را پنهان نکنید.
برای یک پیشنهاد از Group یا Columns استفاده کنید:
- نام پلن یا محصول
- قیمت
- موارد شامل‌شده
- شرایط
- CTA
اگر چند پلن دارید، تفاوت آن‌ها باید قابل فهم باشد. پلن‌ها را صرفاً برای ایجاد انتخاب مصنوعی زیاد نکنید.
تخفیف و فوریت
تخفیف، موجودی یا زمان پایان باید واقعی باشد. شمارش‌گر جعلی و تمدید همیشگی کمپین اعتماد را کاهش می‌دهد و می‌تواند از نظر حقوق مصرف‌کننده مسئله‌ساز باشد.
مرحله دهم: افزودن فرم
وردپرس هسته فرم کامل Lead Generation ارائه نمی‌کند. باید از افزونه فرم معتبر یا سرویس خارجی استفاده کنید. فرم باید حداقل اطلاعات لازم را درخواست کند.
اصول فرم تبدیل‌محور
- تعداد فیلد کم
- Label واضح
- Validation قابل فهم
- پیام موفقیت روشن
- حفظ حریم خصوصی
- رضایت برای بازاریابی در صورت نیاز
- محافظت ضداسپم
- اتصال امن به ایمیل یا CRM
درخواست اطلاعات زیاد قبل از ایجاد اعتماد، نرخ تکمیل فرم را کاهش می‌دهد.
فرم بالای صفحه یا پایین صفحه؟
برای پیشنهاد ساده و کم‌ریسک، فرم کوتاه می‌تواند در Hero باشد. برای خدمت گران یا پیچیده، بهتر است ابتدا توضیح و اعتمادسازی ارائه شود و سپس فرم نمایش داده شود.
مرحله یازدهم: ساخت FAQ
Details Block برای پرسش‌های متداول مناسب است. سؤال‌ها را براساس تردید واقعی کاربران انتخاب کنید:
- این پیشنهاد برای چه کسی مناسب است؟
- چه چیزی دریافت می‌کنم؟
- مدت دسترسی چقدر است؟
- پشتیبانی چگونه است؟
- شرایط لغو یا بازگشت چیست؟
FAQ نباید اطلاعات مهم قیمت یا محدودیت را پنهان کند.
مرحله دوازدهم: CTA نهایی
در انتهای صفحه، پیشنهاد را خلاصه کنید و CTA اصلی را دوباره نمایش دهید. متن و رنگ دکمه با CTA Hero هماهنگ باشد.
کاربر نباید برای اقدام دوباره تا بالای صفحه اسکرول کند.
فوتر ساده لندینگ
فوتر می‌تواند شامل موارد زیر باشد:
- نام و لوگوی برند
- حریم خصوصی
- شرایط استفاده
- اطلاعات تماس
- حق نشر
فوتر کامل سایت با چند منو ممکن است تمرکز Landing Page را کاهش دهد.
استفاده از Patternها
Hero، کارت مزایا، Testimonial، Pricing و CTA را می‌توانید به‌صورت Pattern ذخیره کنید. Pattern معمولی برای Layout مشابه با محتوای متفاوت مناسب است. Synced Pattern برای بخشی است که باید در چند صفحه یکسان بماند.
راهنمای کامل در مقاله آموزش Pattern و Synced Pattern موجود است.
استفاده از Global Styles
رنگ، فونت، دکمه، Border و فاصله را تا حد ممکن از Global Styles و Presetهای قالب کنترل کنید. تنظیم محلی زیاد باعث ناسازگاری و دشواری نگهداری می‌شود.
مقاله Global Styles و تنظیم رنگ و فونت روش ساخت سیستم طراحی مرکزی را توضیح می‌دهد.
طراحی واکنش‌گرا
بخش بزرگی از ورودی کمپین ممکن است از موبایل باشد. لندینگ را ابتدا یا حداقل هم‌زمان با موبایل طراحی کنید.
- H1 در صفحه کوچک بیش از حد بزرگ نباشد.
- CTA در عرض مناسب و قابل لمس باشد.
- Columns به ترتیب منطقی Stack شوند.
- فرم بدون Zoom و Scroll افقی کار کند.
- تصویر Hero از عرض خارج نشود.
- جدول قیمت در موبایل خوانا باشد.
- فاصله‌ها کاهش یابند.
- Sticky CTA مزاحم محتوا نباشد.
Sticky CTA در موبایل
CTA ثابت پایین صفحه می‌تواند اقدام را در دسترس نگه دارد، اما فضای محدود موبایل را اشغال می‌کند. اگر استفاده می‌کنید:
- ارتفاع کم باشد.
- قابل بستن یا مزاحم کنترل مرورگر نباشد.
- روی Cookie Banner و فرم قرار نگیرد.
- کنتراست و متن واضح داشته باشد.
- در همه دستگاه‌ها آزمایش شود.
عرض و فاصله حرفه‌ای
برای Sectionهای تمام‌عرض، Group بیرونی را Full Width و Group داخلی را محدود به Content Width کنید. متن طولانی نباید تمام عرض مانیتور را بگیرد.
از Padding و Block Gap استفاده کنید و Spacerهای متعدد نسازید.
سئو لندینگ پیج
- یک H1 اصلی داشته باشید.
- Title و Meta Description اختصاصی بنویسید.
- هدف و پیشنهاد در متن اولیه روشن باشد.
- URL کوتاه و توصیفی باشد.
- تصاویر Alt مناسب داشته باشند.
- لینک داخلی محدود اما مفید باشد.
- Canonical صحیح تنظیم شود.
- صفحه تشکر جداگانه در صورت نیاز Noindex شود.
Landing Page تبلیغاتی همیشه لازم نیست برای جست‌وجوی ارگانیک بهینه شود. هدف کمپین، محتوا و سیاست ایندکس باید هماهنگ باشند.
آیا لندینگ را Noindex کنیم؟
اگر صفحه فقط برای کمپین کوتاه، نسخه تکراری یا آزمایش ساخته شده، Noindex ممکن است منطقی باشد. اگر صفحه محتوای مستقل و ارزشمند دارد و برای جست‌وجو هدف‌گذاری شده، ایندکس می‌تواند مناسب باشد.
این تصمیم را براساس استراتژی سئو بگیرید، نه به‌صورت خودکار.
صفحه تشکر
بعد از ثبت فرم یا خرید، کاربر را به Thank You Page هدایت کنید. این صفحه می‌تواند اقدام بعدی، زمان پاسخ، فایل دانلود یا اطلاعات تماس را نمایش دهد.
صفحه تشکر برای اندازه‌گیری تبدیل نیز مفید است، اما باید از ثبت تبدیل تکراری جلوگیری شود.
اندازه‌گیری نرخ تبدیل
قبل از انتشار مشخص کنید چه رویدادی تبدیل محسوب می‌شود:
- ارسال موفق فرم
- خرید تکمیل‌شده
- کلیک روی تماس
- دانلود فایل
- رزرو موفق
فقط Page View معیار کافی نیست. رویداد موفق باید پس از تکمیل واقعی اقدام ثبت شود.
UTM و کمپین
برای تشخیص منبع، Medium و Campaign از پارامترهای UTM استاندارد استفاده کنید. نام‌گذاری باید ثابت باشد تا گزارش‌ها پراکنده نشوند.
اطلاعات حساس یا شخصی را داخل URL قرار ندهید.
A/B Testing
در A/B Test یک متغیر مهم را مقایسه کنید؛ مانند تیتر، CTA، فرم یا تصویر Hero. تغییر هم‌زمان چند عنصر باعث می‌شود علت نتیجه مشخص نباشد.
حجم نمونه، مدت آزمایش و کیفیت ترافیک باید کافی باشند. تصمیم‌گیری با چند تبدیل محدود قابل اعتماد نیست.
سرعت لندینگ پیج
- تصویر Hero را فشرده کنید.
- ویدئوی پس‌زمینه سنگین حذف شود.
- فونت و وزن‌ها محدود باشند.
- اسکریپت‌های تبلیغاتی بررسی شوند.
- چند ابزار Analytics مشابه نصب نشود.
- تصاویر پایین صفحه Lazy Load شوند.
- DOM تودرتو محدود باشد.
- فرم و CAPTCHA روی موبایل آزمایش شوند.
Cover Block می‌تواند تصویر، ویدئو یا رنگ پس‌زمینه همراه متن Overlay نمایش دهد، اما ویدئو و تصویر بزرگ باید از نظر LCP و حجم بررسی شوند.
دسترس‌پذیری
- Headingها ترتیب منطقی داشته باشند.
- کنتراست رنگ کافی باشد.
- دکمه‌ها متن واضح داشته باشند.
- Focus State حذف نشود.
- فرم Label واقعی داشته باشد.
- خطاها فقط با رنگ نمایش داده نشوند.
- تصاویر محتوایی Alt مناسب داشته باشند.
- ویدئو زیرنویس و کنترل داشته باشد.
اعتماد و حریم خصوصی
اگر اطلاعات شخصی جمع می‌کنید، هدف جمع‌آوری، نحوه استفاده و لینک حریم خصوصی را روشن کنید. Checkbox بازاریابی نباید به‌صورت گمراه‌کننده طراحی شود.
فرم فقط اطلاعات ضروری را دریافت کند و داده‌ها در ابزارهای امن نگهداری شوند.
ساخت لندینگ در WoodMart
قالب فعال dev-source.ir یعنی WoodMart 8.3.7 از Site Editor کامل استفاده نمی‌کند. برای این سایت می‌توانید برگه لندینگ را با Gutenberg یا Page Builder فعال بسازید و Header، Footer و Layout را از تنظیمات WoodMart کنترل کنید.
- Template برگه و Sidebar را بررسی کنید.
- Header مینیمال را با Header Builder بسازید.
- بخش‌های تکراری را با HTML Blocks مدیریت کنید.
- رنگ و فونت را از Theme Settings تنظیم کنید.
- افزونه‌های Elementor و WPBakery را بدون نیاز هم‌زمان استفاده نکنید.
لندینگ فروش محصول ووکامرس
برای فروش مستقیم می‌توانید دکمه CTA را به صفحه محصول یا Checkout متصل کنید. خرید مستقیم، Variation، موجودی، مالیات، حمل‌ونقل و درگاه باید آزمایش شوند.
برای محصول متغیر یا قوانین پیچیده، دور زدن صفحه محصول بدون تست کامل توصیه نمی‌شود.
رفع مشکل تمام‌عرض نشدن لندینگ
Template برگه باید Full Width باشد. Group یا Cover را روی Align Full قرار دهید و محدودیت Container قالب را بررسی کنید.
رفع مشکل نمایش Header و Footer اضافی
Custom Template بدون Header کامل بسازید یا از تنظیمات قالب برای غیرفعال‌کردن عناصر استفاده کنید. CSS برای مخفی‌کردن بخش‌ها آخرین گزینه است؛ بهتر است ساختار Template درست باشد.
رفع مشکل فرم
- ایمیل دریافت‌کننده صحیح باشد.
- SMTP تنظیم و تست شود.
- پیام موفقیت نمایش داده شود.
- ضداسپم و CAPTCHA بررسی شوند.
- اتصال CRM خطا نداشته باشد.
- فرم در موبایل تکمیل شود.
- صفحه کش‌شده Token فرم را خراب نکند.
رفع مشکل CTA
URL، Anchor و Target را بررسی کنید. اگر CTA به فرم پایین صفحه می‌رود، برای Section مقصد HTML Anchor تعریف کنید و لینک را با #anchor تنظیم کنید.
رفع مشکل Anchor و پرش صفحه
در Advanced → HTML Anchor یک نام انگلیسی بدون فاصله وارد کنید. اگر Sticky Header دارید، ممکن است عنوان مقصد زیر هدر پنهان شود و به CSS مانند Scroll Margin نیاز باشد.
رفع مشکل نسخه موبایل
Min Height ثابت، Padding زیاد، تصویر بزرگ، Row بدون Wrap و فونت بزرگ از علت‌های رایج هستند. هر Section را جداگانه بررسی کنید.
اشتباهات رایج
- چند CTA متضاد
- تیتر مبهم
- فرم طولانی
- منوی شلوغ
- ادعای غیرقابل اثبات
- فوریت و شمارش‌گر جعلی
- تصاویر و ویدئوی سنگین
- نداشتن صفحه تشکر
- اندازه‌گیری فقط Page View
- تست نکردن موبایل
- حذف اطلاعات حقوقی و حریم خصوصی
- استفاده از چند Page Builder در یک صفحه
چک‌لیست نهایی لندینگ پیج
- یک هدف تبدیل مشخص دارد.
- تیتر و پیشنهاد در نمای اولیه روشن‌اند.
- CTA اصلی واضح و تکرارشونده است.
- Template تمرکز صفحه را حفظ می‌کند.
- منو و لینک‌های غیرضروری محدود شده‌اند.
- مزایا و شواهد واقعی هستند.
- فرم کوتاه و تست‌شده است.
- FAQ تردیدهای واقعی را پاسخ می‌دهد.
- موبایل و تبلت بررسی شده‌اند.
- تصویر Hero بهینه است.
- سئو و Canonical کنترل شده‌اند.
- حریم خصوصی و رضایت کاربر رعایت شده‌اند.
- رویداد تبدیل ثبت می‌شود.
- صفحه تشکر درست کار می‌کند.
- لینک‌ها، Anchorها و CTAها تست شده‌اند.
📌 همچنین بخوانید: دسترس‌پذیری در Gutenberg و Site Editor وردپرس، طراحی ریسپانسیو در Gutenberg و Site Editor وردپرس و تفاوت قالب بلوکی و قالب کلاسیک وردپرس
پرسش‌های متداول
آیا با Gutenberg می‌توان لندینگ حرفه‌ای ساخت؟
بله، برای بسیاری از صفحات فرود می‌توان با بلوک‌های هسته، Pattern و افزونه فرم معتبر نتیجه حرفه‌ای ساخت.
لندینگ پیج باید منو داشته باشد؟
معمولاً منوی کامل محدود یا حذف می‌شود، اما لوگو، حریم خصوصی و مسیر اعتماد ممکن است باقی بمانند.
برای لندینگ Block Theme لازم است؟
خیر. Gutenberg در قالب کلاسیک نیز کار می‌کند؛ Block Theme فقط کنترل کامل‌تر Template و Site Editor را فراهم می‌کند.
چگونه فرم اضافه کنیم؟
از افزونه فرم معتبر یا سرویس خارجی استفاده کنید و ایمیل، پیام موفقیت، ضداسپم و اتصال CRM را تست کنید.
آیا Landing Page باید Noindex باشد؟
به هدف صفحه بستگی دارد. صفحات کمپینی تکراری یا آزمایشی ممکن است Noindex شوند؛ صفحات مستقل و ارزشمند می‌توانند ایندکس شوند.
برای CTA از Button استفاده کنیم یا لینک؟
برای اقدام اصلی Buttons Block مناسب است. متن دکمه باید نتیجه کلیک را توضیح دهد.
در WoodMart چگونه لندینگ بسازیم؟
محتوای برگه را با Gutenberg یا Builder فعال بسازید و Header، Layout، رنگ و فونت را با ابزارهای WoodMart کنترل کنید.
جمع‌بندی
ساخت لندینگ پیج با Gutenberg زمانی موفق است که پیش از طراحی، هدف تبدیل و پیشنهاد روشن باشند. صفحه باید یک مسیر اصلی داشته باشد و Hero، مزایا، شواهد، فرم، FAQ و CTA همگی همان تصمیم را تقویت کنند.
از Group، Cover، Columns، Buttons، Details و Pattern برای ساخت Sectionها استفاده کنید. در Block Theme یک Custom Template ساده بسازید و Post Content را حفظ کنید. نسخه موبایل، سرعت، فرم، حریم خصوصی، سئو و اندازه‌گیری تبدیل را قبل از انتشار آزمایش کنید.
در dev-source.ir با WoodMart 8.3.7، Site Editor کامل مسیر اصلی نیست؛ اما می‌توان محتوای Landing Page را با Gutenberg ساخت و Header و Layout را از ابزارهای WoodMart مدیریت کرد.