صفحه ساز وردپرس چیست؟ طراحی صفحات سایت بدون برنامه نویسی

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

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

صفحه ساز وردپرس چیست و چه کاری انجام می‌ده؟

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

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

به‌جای نوشتن HTML و CSS، اجزای آماده رو انتخاب می‌کنید و تنظیماتشون رو از پنل صفحه‌ساز تغییر می‌دید. HTML ساختار صفحه رو می‌سازه و CSS ظاهر اون رو تنظیم می‌کنه. برای نمونه، یک دکمه رو داخل صفحه می‌ذارید، متن و لینک اون رو وارد می‌کنید و رنگ، اندازه و فاصله‌اش رو تغییر می‌دید. صفحه‌ساز کد لازم برای نمایش اون بخش رو پشت صحنه تولید می‌کنه.

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

تفاوت صفحه‌ساز با قالب وردپرس چیه؟

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

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

تفاوت صفحه‌ساز با ویرایشگر بلوکی وردپرس چیه؟

ویرایشگر بلوکی وردپرس ابزار داخلی وردپرس برای ساخت محتوا با بلوک‌هایی مثل پاراگراف، تصویر، ستون و دکمه هست. برای استفاده از امکانات اصلی اون لازم نیست افزونه صفحه‌ساز جداگانه‌ای نصب کنید.

صفحه‌سازهای مستقل معمولاً المان‌های بیشتر، تنظیمات ظاهری جزئی‌تر و الگوهای آماده متنوع‌تری دارن. ویرایشگر بلوکی ساختار ساده‌تری داره و وابستگی کمتری به یک افزونه خاص ایجاد می‌کنه. قابلیت ویرایش کامل سایت یا Full Site Editing هم اجازه می‌ده بخش‌هایی مثل هدر و فوتر قالب‌های بلوکی رو با همین بلوک‌ها تغییر بدید.

صفحه‌ساز وردپرس چطور کار می‌کنه؟

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

ساخت صفحه با کشیدن و رها کردن المان‌ها

توی روش Drag & Drop یا کشیدن و رها کردن، المان موردنظرتون رو از پنل ابزار می‌گیرید و داخل جای مناسب صفحه می‌ذارید. بعد می‌تونید ترتیب المان‌ها رو عوض کنید، اون‌ها رو داخل ستون‌های مختلف بذارید یا از یک بخش نسخه دیگه‌ای بسازید.

استفاده از قالب‌ها و الگوهای آماده

خیلی از صفحه‌سازها الگوهای آماده برای صفحه اصلی، معرفی خدمات، تماس با ما یا صفحه فرود دارن. می‌تونید یک الگو رو وارد کنید و متن‌ها، تصاویر و رنگ‌های اون رو با محتوای خودتون عوض کنید. این روش شروع کار رو سریع‌تر می‌کنه، ولی بهتره بخش‌های اضافی الگو رو پاک کنید تا صفحه بی‌دلیل سنگین نشه.

تنظیم نمایش صفحه در موبایل، تبلت و کامپیوتر

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

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

صفحه‌سازهای وردپرس چه امکاناتی دارن؟

• ویرایش دیداری و پیش‌نمایش زنده برای دیدن تغییرات قبل از انتشار
• المان‌هایی مثل متن، تصویر، دکمه، فرم، ویدئو، آیکن و ستون
• کنترل رنگ، فونت، فاصله، پس‌زمینه و چیدمان بخش‌ها
• ذخیره‌کردن بخش‌های طراحی‌شده و استفاده دوباره از اون‌ها
• طراحی واکنش‌گرا برای نمایش درست در اندازه‌های مختلف
• اتصال به قالب‌ها و افزونه‌هایی مثل فروشگاه‌سازها و ابزارهای فرم‌ساز

امکانات دقیق هر ابزار با ابزار دیگه فرق داره. ممکنه یک قابلیت در نسخه رایگان ارائه بشه، فقط در نسخه حرفه‌ای باشه یا به افزونه جانبی نیاز داشته باشه. قبل از انتخاب، صفحه رسمی همون نسخه‌ای رو بررسی کنید که واقعاً می‌خواید ازش استفاده کنید.

مزایا و محدودیت‌های صفحه‌ساز وردپرس

مزایای صفحه‌ساز برای کاربران تازه‌کار

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

محدودیت‌هایی که بهتره قبل از انتخاب بدونید

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

معرفی صفحه‌سازهای محبوب وردپرس

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

المنتور

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

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

ویرایشگر بلوکی وردپرس و قابلیت ویرایش کامل سایت

ویرایشگر بلوکی همراه خود وردپرس ارائه می‌شه و برای ساخت نوشته‌ها و برگه‌ها به افزونه صفحه‌ساز مستقل نیاز نداره. اگه قالب بلوکی داشته باشید، با قابلیت ویرایش کامل سایت می‌تونید هدر، فوتر و قالب بعضی صفحه‌ها رو هم ویرایش کنید.

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

Divi Builder

Divi Builder صفحه‌ساز دیداری مجموعه Elegant Themes هست و با قالب Divi شناخته می‌شه. این ابزار ویرایش دیداری، ماژول‌های آماده و کتابخانه طرح‌ها رو در اختیارتون می‌ذاره. Divi Builder بیشتر برای کاربری مناسبه که می‌خواد از محیط و ابزارهای همین مجموعه استفاده کنه. قبل از انتخاب، هزینه دسترسی، سازگاری با قالبتون و وضعیت محتوا بعد از تغییر ابزار رو بررسی کنید.

BeBuilder

BeBuilder صفحه‌ساز قالب Betheme هست و ممکنه توی آموزش‌های قدیمی‌تر نام Muffin Builder رو هم برای نسخه قبلی اون ببینید. این گزینه بیشتر به کار افرادی میاد که از خود قالب Betheme استفاده می‌کنن. چون این صفحه‌ساز با اکوسیستم همون قالب ارتباط نزدیکی داره، قبل از انتخاب بهتره وابستگی طراحی به قالب و روش انتقال محتوا به یک قالب یا صفحه‌ساز دیگه رو بررسی کنید.

Visual Composer Website Builder

Visual Composer Website Builder یک ابزار مستقل برای طراحی دیداری سایت وردپرسیه و بخش‌ها، المان‌ها و الگوهای آماده‌ای برای ساخت صفحه داره. این محصول رو نباید با WPBakery Page Builder یکی بدونید، چون این دو ابزار جدا هستن. موقع دیدن آموزش یا خرید قالب، نام کامل محصول رو بررسی کنید تا محتوا مربوط به ابزار دیگه‌ای نباشه.

WPBakery Page Builder

WPBakery Page Builder صفحه‌سازی تجاریه که همراه بعضی قالب‌های وردپرس هم ارائه می‌شه. این ابزار در گذشته با نام Visual Composer Page Builder شناخته می‌شد، ولی Visual Composer Website Builder امروزی محصول جداگانه‌ایه. اگه WPBakery همراه قالبتون ارائه شده، روش دریافت به‌روزرسانی، پشتیبانی و مجوز استفاده رو از فروشنده قالب بررسی کنید. بهتره وضعیت چیدمان صفحه بعد از غیرفعال‌کردن ابزار رو هم روی نسخه آزمایشی بسنجید.

Themify Builder

Themify Builder ابزار طراحی دیداری مجموعه Themify هست و امکان ساخت چیدمان با ماژول‌ها و ردیف‌ها رو فراهم می‌کنه. اگه از قالب‌ها یا افزونه‌های همین مجموعه استفاده می‌کنید، هماهنگی بین اون‌ها ممکنه روند طراحی رو ساده‌تر کنه. قبل از انتخاب نهایی، نوع دسترسی، امکانات نسخه موردنظرتون و وضعیت محتوا بعد از تغییر ابزار رو با گزینه‌های دیگه مقایسه کنید.

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

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

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

برای ساخت اولین سایت وردپرسی

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

برای طراحی فروشگاه اینترنتی

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

برای ساخت سایت شرکتی و صفحه فرود

برای سایت شرکتی و صفحه فرود، الگوهای آماده، فرم تماس، کنترل واکنش‌گرایی و امکان ذخیره بخش‌ها خیلی کاربردی هستن. صفحه فرود صفحه‌ایه که برای یک هدف مشخص، مثل دریافت شماره تماس یا فروش یک محصول، ساخته می‌شه. المنتور، Divi Builder و Visual Composer Website Builder ابزارهایی برای این نوع طراحی دارن، ولی انتخاب نهایی به بودجه، قالب و امکانات نسخه‌ای بستگی داره که انتخاب می‌کنید.

برای طراحی سبک و سریع با بلوک‌های وردپرس

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

قبل از انتخاب صفحه‌ساز چه چیزهایی رو بررسی کنید؟

1. سازگاری: صفحه‌ساز رو با قالب، فروشگاه‌ساز، فرم‌ساز و افزونه‌های اصلی سایتتون آزمایش کنید.
2. سرعت و حجم خروجی: یک صفحه نمونه بسازید و سرعت اون رو قبل از تصمیم نهایی بسنجید.
3. نسخه رایگان و حرفه‌ای: صفحه رسمی محصول رو ببینید و مشخص کنید کدوم امکانات رایگان هستن و برای چه قابلیت‌هایی باید هزینه بدید.
4. سادگی رابط: مطمئن بشید خودتون یا اعضای تیمتون می‌تونید بدون سردرگمی صفحه‌ها رو ویرایش کنید.
5. پشتیبانی و آموزش: مستندات، آموزش‌ها و روش دریافت پشتیبانی رو بررسی کنید.
6. امکان انتقال محتوا: ببینید بعد از غیرفعال‌کردن ابزار چه اتفاقی برای متن، تصاویر و چیدمان صفحه می‌افته.
7. کنترل نمایش در دستگاه‌های مختلف: تنظیمات موبایل و تبلت رو روی یک صفحه واقعی امتحان کنید.

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

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

مراحل زیر روند کلی کار رو نشون می‌دن. اسم دکمه‌ها و محل تنظیمات توی هر صفحه‌ساز فرق داره، پس برای جزئیات دقیق بهتره راهنمای همون ابزار رو هم ببینید.

1. صفحه‌ساز رو انتخاب کنید: نیازها، بودجه و سازگاری با قالبتون رو بررسی کنید.
2. بک‌آپ بگیرید: اگه روی یک سایت فعال کار می‌کنید، قبل از نصب یا تغییر ابزار از فایل‌ها و پایگاه داده سایت نسخه پشتیبان بگیرید.
3. ابزار رو نصب و فعال کنید: در پیشخوان وردپرس وارد «افزونه‌ها» و بعد «افزودن افزونه تازه» بشید. نام افزونه رو جست‌وجو کنید و دکمه نصب و بعد فعال‌سازی رو بزنید. برای ابزارهای پولی باید فایل افزونه رو از منبع رسمی دریافت و بارگذاری کنید.
4. یک برگه تازه بسازید: از منوی «برگه‌ها» وارد «افزودن برگه تازه» بشید و یک عنوان مشخص وارد کنید.
5. الگو یا صفحه خالی رو انتخاب کنید: اگه تازه‌کارید، یک الگوی ساده شروع خوبی هست. بخش‌هایی رو که لازم ندارید حذف کنید.
6. المان‌ها رو اضافه کنید: اول ساختار اصلی رو بسازید و بعد متن، تصویر، دکمه و فرم رو داخل اون قرار بدید.
7. نسخه موبایل و تبلت رو بررسی کنید: اندازه نوشته‌ها، فاصله‌ها، ترتیب ستون‌ها و راحتی لمس دکمه‌ها رو کنترل کنید.
8. پیش‌نمایش بگیرید و منتشر کنید: لینک‌ها و فرم‌ها رو آزمایش کنید و بعد دکمه انتشار یا به‌روزرسانی رو بزنید.

اگه هدفتون طراحی صفحه اول سایته، راهنمای ساخت صفحه اصلی سفارشی در وردپرس جزئیات بیشتری درباره انتخاب و تنظیم صفحه اصلی داره.

چطور سرعت صفحه‌های ساخته‌شده رو بهتر کنید؟

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

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

جمع‌بندی

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

قبل از انتخاب، فقط به تعداد المان‌ها توجه نکنید. سازگاری، سرعت، هزینه، راحتی استفاده و امکان انتقال محتوا مهم‌ترن. بهترین انتخاب ابزاریه که نیاز واقعی سایتتون رو با کمترین پیچیدگی برطرف کنه.

سؤال‌های رایج

تیم تولید محتوا

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