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

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

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

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

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

اما آیا Visual Composer ارزش استفاده دارد؟ پاسخ کوتاه این است: بله، به‌شرط آنکه امکانات و شیوه کار آن با نیازهای سایت شما هماهنگ باشد. اگر به یک ویرایشگر دیداری، قالب‌های آماده و قابلیت طراحی بخش‌های مختلف سایت نیاز دارید، ویژوال کامپوزر می‌تواند گزینه مناسبی باشد. بااین‌حال، انتخاب نهایی باید با توجه به عواملی مانند نوع سایت، امکانات موردنیاز، بودجه، سرعت، قالب وردپرس و مقایسه آن با گزینه‌هایی مانند Elementor انجام شود.

در ادامه این مقاله از پانیسا لند، به‌صورت مرحله‌به‌مرحله بررسی می‌کنیم که ویژوال کامپوزر چیست، چگونه کار می‌کند، چه امکاناتی دارد و چه تفاوتی با WPBakery و Elementor دارد. همچنین نصب و کار با این افزونه، طراحی صفحات واکنش‌گرا، تأثیر آن بر سئو و سرعت سایت و مهم‌ترین مزایا و محدودیت‌های آن را بررسی خواهیم کرد تا بتوانید با آگاهی بیشتری درباره استفاده از آن تصمیم بگیرید.

---

ویژوال کامپوزر چیست؟

ویژوال کامپوزر یا Visual Composer Website Builder یک افزونه طراحی سایت برای وردپرس است که امکان ساخت و ویرایش صفحات را از طریق یک محیط دیداری فراهم می‌کند. در این افزونه می‌توانید عناصر مختلف را با روش کشیدن و رها کردن یا Drag & Drop به صفحه اضافه کرده و نتیجه تغییرات را در همان لحظه مشاهده کنید.

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

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

Visual Composer چه کاری انجام می‌دهد؟

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

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

• عنوان و متن
• تصویر و گالری تصاویر
• دکمه و فراخوان به اقدام
• ویدئو
• آیکون
• ستون‌بندی‌های مختلف
• فرم و عناصر تعاملی
• فهرست نوشته‌ها
• نمایش محصولات فروشگاه
• نقشه، شبکه‌های اجتماعی و عناصر چندرسانه‌ای
• بخش‌های آماده مانند معرفی خدمات، نظرات مشتریان و جدول قیمت

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

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

طراحی صفحه در Visual Composer با قرار دادن عناصر ساختاری و محتوایی در کنار یکدیگر انجام می‌شود. ابتدا ساختار کلی صفحه را با بخش‌هایی مانند Section، Row و Column ایجاد می‌کنید و سپس عناصر محتوایی مانند متن، تصویر و دکمه را داخل ستون‌ها قرار می‌دهید.

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

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

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

آیا برای استفاده از Visual Composer به کدنویسی نیاز داریم؟

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

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

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

Visual Composer برای چه نوع سایت‌هایی مناسب است؟

از Visual Composer می‌توان برای طراحی انواع مختلفی از سایت‌های وردپرسی استفاده کرد؛ اما میزان مناسب بودن آن به نیازها و ساختار هر پروژه بستگی دارد. این افزونه می‌تواند در طراحی سایت‌های زیر کاربرد داشته باشد:

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

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

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

---

مهم‌ترین امکانات Visual Composer چیست؟

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

البته همه قابلیت‌های این افزونه در نسخه رایگان ارائه نمی‌شوند. بخشی از ابزارهای پیشرفته، از جمله Theme Builder، Dynamic Content، قالب‌های سراسری و دسترسی کامل به Visual Composer Hub، به نسخه حرفه‌ای و لایسنس فعال نیاز دارند.

ویرایشگر Drag & Drop

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

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

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

ویرایشگر Frontend و مشاهده زنده تغییرات

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

این قابلیت چند مزیت مهم دارد:

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

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

عناصر آماده برای طراحی صفحات

در Visual Composer هر جزء قابل‌استفاده در صفحه یک عنصر محتوایی یا Content Element محسوب می‌شود. متن، عنوان، تصویر، دکمه، ویدئو، آیکون، گالری، تب، اسلایدر و فهرست نوشته‌ها نمونه‌هایی از این عناصر هستند.

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

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

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

قالب‌ها و Templateهای آماده

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

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

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

Visual Composer Hub چیست؟

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

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

نسخه رایگان به بخشی از محتواهای رایگان Hub دسترسی دارد؛ اما دسترسی کامل به عناصر، قالب‌ها و ابزارهای حرفه‌ای آن به نسخه Premium وابسته است. در بخش بعدی مقاله، ساختار و کاربردهای Visual Composer Hub را با جزئیات بیشتری بررسی می‌کنیم.

طراحی صفحات واکنش‌گرا برای موبایل و تبلت

امروزه بخش قابل‌توجهی از کاربران سایت‌ها از تلفن همراه استفاده می‌کنند؛ بنابراین طراحی صفحه فقط برای نمایشگر دسکتاپ کافی نیست. Visual Composer ابزارهایی برای ایجاد طراحی واکنش‌گرا یا Responsive Design ارائه می‌کند تا چیدمان صفحه با اندازه نمایشگرهای مختلف سازگار شود.

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

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

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

امکانات طراحی و استایل‌دهی

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

مهم‌ترین گزینه‌های طراحی عبارت‌اند از:

• تغییر رنگ متن و پس‌زمینه
• تنظیم Margin و Padding
• افزودن حاشیه و تعیین ضخامت آن
• گرد کردن گوشه‌ها با Border Radius
• انتخاب تصویر یا ویدئوی پس‌زمینه
• استفاده از رنگ‌های گرادیانی
• ایجاد سایه
• کنترل عرض و ارتفاع بخش‌ها
• افزودن افکت‌های حرکتی و پارالاکس
• تنظیم جداگانه برخی ویژگی‌ها برای موبایل و تبلت

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

پشتیبانی از محتوای Dynamic

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

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

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

ساخت Header، Footer و Sidebar

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

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

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

قابلیت ساخت صفحات سفارشی سایت

Visual Composer تنها برای طراحی صفحه اصلی یا برگه‌های ساده کاربرد ندارد. با استفاده از امکانات پیشرفته و Theme Builder می‌توان برای بخش‌های مختلف وردپرس طرح‌های اختصاصی ایجاد کرد.

بسته به نسخه و امکانات فعال، می‌توان موارد زیر را طراحی کرد:

• قالب اختصاصی نوشته‌ها
• قالب برگه‌ها
• صفحات آرشیو و دسته‌بندی
• صفحه نویسنده
• صفحه نتایج جست‌وجو
• صفحه خطای 404
• قالب‌های مربوط به انواع نوشته سفارشی
• برخی صفحات و بخش‌های ووکامرس
• صفحات فرود بدون هدر و فوتر معمول سایت

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

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

---

Visual Composer Hub چیست و چه کاربردی دارد؟

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

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

Visual Composer Hub فقط یک مجموعه از طرح‌های آماده نیست؛ بلکه نقش یک مرکز توسعه امکانات ویژوال کامپوزر را نیز دارد. بعضی قابلیت‌های تکمیلی مانند قالب‌های سراسری، مدیریت نقش‌های کاربری، محتوای پویا و ورود و خروج قالب‌ها از طریق افزونه‌های جانبی این کتابخانه ارائه می‌شوند.

چه چیزهایی در Visual Composer Hub وجود دارد؟

محتوای موجود در Visual Composer Hub را می‌توان در چند گروه اصلی قرار داد:

• عناصر محتوایی یا Element
• قالب‌های کامل یا Template
• بلوک‌ها و بخش‌های آماده
• قالب‌های هدر، فوتر و سایدبار
• افزونه‌های جانبی یا Add-on
• تصاویر آماده از سرویس‌های تصویری متصل

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

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

Elementهای آماده

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

برخی نمونه‌های رایج عناصر عبارت‌اند از:

• عنوان و متن
• تصویر
• دکمه
• آیکون
• ویدئو
• گالری تصاویر
• تب و آکاردئون
• اسلایدر
• جدول قیمت
• فرم
• فهرست نوشته‌ها
• عناصر مربوط به ووکامرس

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

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

Templateهای آماده

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

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

قالب‌های آماده ممکن است برای موضوعات مختلفی طراحی شده باشند؛ از جمله:

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

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

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

Blockها و Sectionهای آماده

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

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

نمونه‌هایی از بلوک‌های قابل‌استفاده عبارت‌اند از:

• بخش ابتدایی یا Hero Section
• معرفی ویژگی‌های محصول
• نمایش آمار و دستاوردها
• معرفی اعضای تیم
• نظرات مشتریان
• جدول قیمت
• نمایش لوگوی مشتریان
• فرم عضویت
• پرسش‌های متداول
• فراخوان تماس یا خرید

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

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

Header و Footerهای آماده

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

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

برای استفاده حرفه‌ای از این قالب‌ها باید به موارد زیر توجه کرد:

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

قابلیت طراحی و مدیریت کامل هدر، فوتر و سایدبار در چارچوب Theme Builder و امکانات حرفه‌ای ویژوال کامپوزر ارائه می‌شود.

چگونه یک Element یا Template به Visual Composer اضافه کنیم؟

برای دریافت یک عنصر یا قالب از Hub، ابتدا یکی از صفحات سایت را با ویرایشگر Visual Composer باز کنید. سپس مراحل زیر را انجام دهید:

1. از منوی ویرایشگر، وارد بخش Visual Composer Hub شوید.
2. دسته‌بندی موردنظر مانند عناصر، قالب‌ها یا بلوک‌ها را انتخاب کنید.
3. از نوار جست‌وجو برای پیدا کردن ابزار یا طرح موردنظر استفاده کنید.
4. نشانگر ماوس را روی عنصر یا قالب قرار دهید.
5. گزینه یا آیکون دریافت را انتخاب کنید.
6. منتظر بمانید تا فایل موردنظر دریافت و به ویرایشگر اضافه شود.
7. به بخش Add Content برگردید.
8. عنصر یا قالب دریافت‌شده را انتخاب کرده و به صفحه اضافه کنید.

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

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

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

آیا همه امکانات Hub رایگان هستند؟

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

نسخه حرفه‌ای معمولاً دسترسی گسترده‌تری به موارد زیر فراهم می‌کند:

• عناصر حرفه‌ای
• قالب‌ها و بلوک‌های بیشتر
• قالب‌های هدر، فوتر و سایدبار
• محتوای پویا
• قالب‌های سراسری
• ابزارهای مرتبط با Theme Builder
• امکانات پیشرفته ووکامرس
• افزونه‌های جانبی Hub
• قابلیت ورود و خروج قالب‌ها
• مدیریت نقش‌های کاربری
• پشتیبانی حرفه‌ای

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

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

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

---

تفاوت Visual Composer و WPBakery چیست؟

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

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

آیا Visual Composer همان WPBakery است؟

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

برای درک بهتر این موضوع باید به سابقه نام‌گذاری آن‌ها توجه کنیم:

• افزونه قدیمی با نام Visual Composer یا WPBakery Visual Composer شناخته می‌شد.
• این افزونه بعداً با نام WPBakery Page Builder ادامه پیدا کرد.
• محصول جدیدی با نام Visual Composer Website Builder و ساختاری متفاوت توسعه داده شد.
• اکنون هر دو محصول به‌صورت مستقل عرضه و به‌روزرسانی می‌شوند.

بنابراین اگر در توضیحات یک قالب وردپرس عبارت «سازگار با ویژوال کامپوزر» را مشاهده کردید، نباید فوراً نتیجه بگیرید که منظور Visual Composer Website Builder است. در بسیاری از قالب‌های قدیمی، منظور فروشنده همان WPBakery Page Builder بوده است.

برای تشخیص افزونه نصب‌شده، وارد مسیر افزونه‌ها ← افزونه‌های نصب‌شده شوید و نام کامل افزونه را بررسی کنید:

• اگر نام افزونه WPBakery Page Builder یا WPBakery Visual Composer است، سایت از WPBakery استفاده می‌کند.
• اگر نام افزونه Visual Composer Website Builder است، محصول جدید Visual Composer روی سایت نصب شده است.

تفاوت Visual Composer و WPBakery در چیست؟

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

معیار مقایسه	Visual Composer Website Builder	WPBakery Page Builder
نوع ابزار	صفحه‌ساز و در نسخه حرفه‌ای، سایت‌ساز	صفحه‌ساز وردپرس
محدوده اصلی طراحی	محتوای صفحه و بخش‌های گسترده‌تر سایت	عمدتاً محتوای داخل نوشته یا برگه
ویرایشگر دیداری	دارد	دارد
ویرایشگر ساختاری در پیشخوان	تمرکز اصلی روی ویرایش زنده است	ویرایشگر Backend و Frontend دارد
هدر، فوتر و سایدبار	از طریق امکانات حرفه‌ای قابل طراحی است	به‌صورت پیش‌فرض در محدوده اصلی صفحه‌ساز نیست
ساختار خروجی	محصول جدید مستقل با خروجی مبتنی بر ساختار خودش	برای بسیاری از عناصر به Shortcode متکی است
کتابخانه ابری	Visual Composer Hub	کتابخانه قالب‌ها و اکوسیستم افزودنی‌های WPBakery
نسخه رایگان	دارد	افزونه اصلی تجاری است؛ دموی آنلاین برای آزمایش دارد
جایگزینی مستقیم	صفحات WPBakery را خودکار تبدیل نمی‌کند	صفحات Visual Composer را خودکار تبدیل نمی‌کند

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

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

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

تفاوت رابط کاربری Visual Composer و WPBakery

هر دو افزونه امکان طراحی به روش کشیدن و رها کردن را فراهم می‌کنند، اما تجربه کار با آن‌ها یکسان نیست.

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

در مقابل، WPBakery Page Builder دو محیط اصلی دارد:

• Backend Editor: نمایش ساختاری ردیف‌ها، ستون‌ها و عناصر در پیشخوان وردپرس
• Frontend Editor: طراحی دیداری و مشاهده تغییرات در نمای صفحه

ویرایشگر Backend در WPBakery می‌تواند برای مدیریت صفحاتی که ردیف‌ها و عناصر زیادی دارند مفید باشد؛ زیرا ساختار کلی صفحه را به‌صورت فشرده نمایش می‌دهد. ویرایشگر Frontend نیز برای مشاهده مستقیم ظاهر صفحه کاربرد دارد. WPBakery در تنظیمات خود امکان فعال یا غیرفعال کردن هرکدام از این ویرایشگرها را فراهم می‌کند.

نمی‌توان رابط یکی از این دو افزونه را برای همه کاربران بهتر دانست. افرادی که به محیط‌های دیداری جدید عادت دارند ممکن است Visual Composer را ساده‌تر بیابند؛ اما کاربران قدیمی WPBakery ممکن است با ساختار ویرایشگر Backend آن سریع‌تر کار کنند.

تفاوت امکانات Visual Composer و WPBakery

هر دو افزونه امکانات ضروری برای ساخت صفحات وردپرس را ارائه می‌کنند؛ از جمله:

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

بااین‌حال، تفاوت اصلی در گستره این امکانات است. Visual Composer Premium قابلیت‌هایی مانند Theme Builder، طراحی هدر و فوتر، محتوای پویا، قالب‌های سراسری و Visual Composer Hub را در یک مجموعه ارائه می‌دهد.

WPBakery بیشتر بر ساخت محتوای داخل صفحات تمرکز دارد و از عناصر آماده، ویرایشگر Backend و Frontend، قالب‌ها، تنظیمات واکنش‌گرا، ابزار ساخت Grid، مدیریت نقش‌های کاربری، کدهای سفارشی و سازگاری با افزونه‌هایی مانند ووکامرس و Advanced Custom Fields پشتیبانی می‌کند. برای افزودن برخی قابلیت‌های خارج از محدوده اصلی صفحه‌ساز ممکن است به امکانات قالب یا افزودنی‌های جداگانه نیاز باشد.

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

کدام‌یک برای کاربران جدید مناسب‌تر است؟

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

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

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

در مقابل، Visual Composer ممکن است برای کاربری مناسب‌تر باشد که:

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

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

اگر سایت قدیمی با WPBakery داشته باشیم چه کنیم؟

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

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

برای مهاجرت ایمن‌تر بهتر است مراحل زیر را انجام دهید:

1. از فایل‌ها و پایگاه داده سایت نسخه پشتیبان کامل تهیه کنید.
2. مشخص کنید کدام صفحات با WPBakery ساخته شده‌اند.
3. عناصر اختصاصی قالب و افزودنی‌های وابسته به WPBakery را شناسایی کنید.
4. مهاجرت را ابتدا روی نسخه آزمایشی یا Staging انجام دهید.
5. صفحات مهم را یکی‌یکی در Visual Composer بازطراحی کنید.
6. آدرس‌ها، عنوان‌ها، متن‌ها و ساختار هدینگ‌ها را بدون دلیل تغییر ندهید.
7. ظاهر صفحات را در موبایل، تبلت و دسکتاپ بررسی کنید.
8. فرم‌ها، دکمه‌ها، لینک‌ها و بخش‌های فروشگاهی را آزمایش کنید.
9. سرعت و شاخص‌های فنی صفحات جدید را با نسخه قبلی مقایسه کنید.
10. پس از اطمینان از بازطراحی همه صفحات، حذف WPBakery را بررسی کنید.

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

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

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

---

آموزش نصب Visual Composer در وردپرس

نصب Visual Composer Website Builder مانند بیشتر افزونه‌های وردپرس انجام می‌شود. می‌توانید نسخه رایگان را مستقیماً از مخزن وردپرس نصب کنید یا فایل افزونه را با فرمت ZIP در پیشخوان بارگذاری کنید. اگر نسخه حرفه‌ای را خریده‌اید، پس از نصب همان افزونه باید لایسنس Premium را فعال کنید و نیازی به نصب افزونه‌ای جداگانه نیست.

پیش‌نیازهای نصب Visual Composer

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

طبق مستندات رسمی، سرور باید با نیازمندی‌های وردپرس و Visual Composer هماهنگ باشد. پشتیبانی از HTTPS، دسترسی نوشتن در پوشه آپلود، فعال بودن افزونه‌های ضروری PHP و حافظه کافی برای استفاده از Hub اهمیت دارد. وضعیت فنی را می‌توانید بعد از نصب از بخش System Status در تنظیمات Visual Composer بررسی کنید. از آنجا که نیازمندی‌ها ممکن است تغییر کنند، بهتر است اعداد و نسخه‌های دقیق را پیش از نصب در مستندات رسمی کنترل کنید.

نصب Visual Composer از پیشخوان وردپرس

ساده‌ترین روش برای نصب نسخه رایگان به این ترتیب است:

1. وارد پیشخوان وردپرس شوید.
2. مسیر افزونه‌ها ← افزودن افزونه تازه را باز کنید.
3. عبارت Visual Composer Website Builder را جست‌وجو کنید.
4. نام افزونه و سازنده آن را با صفحه رسمی افزونه تطبیق دهید تا WPBakery یا افزونه مشابهی را اشتباه نصب نکنید.
5. روی نصب کلیک کنید.
6. پس از پایان نصب، گزینه فعال‌سازی را انتخاب کنید.

این افزونه در مخزن رسمی وردپرس با نام Visual Composer Website Builder منتشر شده است.

نصب افزونه به صورت دستی

اگر فایل افزونه را از وب‌سایت رسمی دریافت کرده‌اید، مراحل زیر را انجام دهید:

1. وارد بخش افزونه‌ها ← افزودن افزونه تازه شوید.
2. روی بارگذاری افزونه کلیک کنید.
3. فایل visualcomposer.zip را انتخاب کنید.
4. گزینه هم‌اکنون نصب نمایید را بزنید.
5. پس از نصب، افزونه را فعال کنید.

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

فعال‌سازی Visual Composer

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

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

فعال‌سازی نسخه Premium

برای فعال‌سازی نسخه حرفه‌ای، پس از خرید لایسنس مراحل زیر را انجام دهید:

1. وارد حساب خود در وب‌سایت رسمی Visual Composer شوید.
2. کلید لایسنس را از بخش مجوزها کپی کنید.
3. در پیشخوان وردپرس، مسیر Visual Composer ← Activate Premium را باز کنید.
4. کلید را در کادر مربوط قرار دهید.
5. روی Activate کلیک کنید.

پس از تأیید لایسنس، امکانات Premium و دسترسی کامل‌تر به Visual Composer Hub فعال می‌شود. برای نسخه حرفه‌ای فایل نصب جداگانه‌ای وجود ندارد و همان افزونه پس از ثبت لایسنس ارتقا پیدا می‌کند.

بعد از نصب چه تنظیماتی را انجام دهیم؟

پس از نصب، پیش از شروع طراحی این موارد را بررسی کنید:

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

در داشبورد Visual Composer بخش‌هایی مانند تنظیمات عمومی، وضعیت سیستم، لایسنس و ابزارهای پیشرفته در دسترس‌اند؛ البته بعضی گزینه‌ها فقط در نسخه Premium نمایش داده می‌شوند.

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

---

آموزش ساخت اولین صفحه با Visual Composer

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

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

از پیشخوان وردپرس وارد مسیر برگه‌ها ← افزودن برگه تازه شوید و گزینه Add New with Visual Composer را انتخاب کنید. سپس عنوان مناسبی برای برگه بنویسید.

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

ورود به ویرایشگر Visual Composer

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

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

آشنایی با محیط ویرایشگر

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

• Add Content: افزودن عناصر، بلوک‌ها و قالب‌ها
• Visual Composer Hub: دریافت ابزارها و طرح‌های بیشتر
• Responsive View: پیش‌نمایش در دسکتاپ، تبلت و موبایل
• Page Options: تنظیمات کلی صفحه
• Publish Options: ذخیره، پیش‌نمایش و انتشار

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

اضافه کردن Section، Row و Column

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

Section بخش کلی، Row ردیف محتوا و Column محل قرار گرفتن عناصر است. در صفحات ساده ممکن است مستقیماً از Row و Column استفاده شود. بهتر است ساختار را بیش از حد تو‌در‌تو نکنید؛ زیرا مدیریت صفحه را دشوارتر می‌کند.

اضافه کردن Text و Image

روی علامت + داخل ستون کلیک کرده و عنصر Text Block را انتخاب کنید. متن را بنویسید و در صورت نیاز، اندازه، رنگ و ترازبندی آن را تغییر دهید.

برای افزودن تصویر، عنصر Single Image را انتخاب کرده و فایل موردنظر را از کتابخانه رسانه وردپرس وارد کنید. بهتر است تصویر را پیش از بارگذاری فشرده کرده، ابعاد متناسبی برای آن در نظر بگیرید و متن جایگزین توصیفی بنویسید.

اضافه کردن Button

برای افزودن دکمه، عنصر Button را انتخاب کنید. سپس متن دکمه، آدرس مقصد و ظاهر آن را تعیین کنید. متن‌هایی مانند مشاهده محصولات یا دریافت مشاوره معمولاً از عبارت‌های مبهمی مانند «اینجا کلیک کنید» بهتر هستند.

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

جابه‌جایی و ویرایش عناصر

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

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

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

ذخیره و انتشار صفحه

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

پیش از انتشار نهایی، این موارد را کنترل کنید:

• عنوان و متن‌ها کامل باشند.
• فقط یک عنوان اصلی H1 در صفحه وجود داشته باشد.
• ترتیب H2 و H3 منطقی باشد.
• تصاویر متن جایگزین مناسب داشته باشند.
• دکمه‌ها و لینک‌ها درست کار کنند.
• صفحه در موبایل و تبلت خوانا باشد.
• فاصله‌ها و اندازه فونت‌ها مناسب باشند.
• صفحه با سرعت قابل‌قبولی بارگذاری شود.

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

---

آشنایی با عناصر و ساختار صفحات در Visual Composer

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

شناخت تفاوت Section، Row، Column و Content Element به شما کمک می‌کند صفحاتی منظم‌تر، واکنش‌گراتر و قابل‌ویرایش‌تر طراحی کنید.

Section چیست؟

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

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

Row چیست؟

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

برای مثال، یک ردیف دوستونه می‌تواند تصویر را در یک سمت و متن معرفی را در سمت دیگر نمایش دهد. تنظیم عرض، فاصله میان ستون‌ها، پس‌زمینه و رفتار واکنش‌گرا معمولاً از تنظیمات Row قابل‌کنترل است.

Column چیست؟

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

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

Content Element چیست؟

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

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

تفاوت Structure Element و Content Element

عناصر Visual Composer به‌طور کلی در دو گروه قرار می‌گیرند:

نوع عنصر	کاربرد	نمونه
Structure Element	ایجاد اسکلت و چیدمان صفحه	Section، Row و Column
Content Element	نمایش محتوای واقعی داخل ساختار	Text، Image، Button و Video

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

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

چگونه یک Layout حرفه‌ای طراحی کنیم؟

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

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

مستندات Visual Composer نیز Row و Section را عناصر اصلی ساختار معرفی می‌کند و توضیح می‌دهد که Row را می‌توان به ستون‌های مختلف تقسیم کرد و عناصر محتوا را درون آن‌ها قرار داد.

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

---

طراحی واکنش‌گرا در Visual Composer؛ Responsive Design

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

آیا Visual Composer با موبایل سازگار است؟

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

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

تنظیم نمایش عناصر در موبایل

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

در نسخه موبایل به این نکات توجه داشته باشید:

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

تنظیم نمایش در تبلت و دسکتاپ

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

Visual Composer اجازه می‌دهد برخی گزینه‌های طراحی مانند Margin، Padding، پس‌زمینه و انیمیشن را متناسب با دستگاه تنظیم کنید. هدف، یکسان‌کردن کامل ظاهر نیست؛ بلکه ایجاد تجربه‌ای هماهنگ و قابل‌استفاده در تمام نمایشگرهاست.

تغییر اندازه ستون‌ها در موبایل

ستون‌هایی که در دسکتاپ کنار یکدیگر قرار دارند، معمولاً در موبایل زیر هم نمایش داده می‌شوند. در تنظیمات واکنش‌گرای Row و Column می‌توان عرض و رفتار ستون‌ها را برای دستگاه‌های مختلف تغییر داد.

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

مخفی کردن عناصر در دستگاه‌های خاص

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

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

تغییر ترتیب ستون‌ها در موبایل

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

با قابلیت Reverse Stacking می‌توان ترتیب قرارگیری ستون‌ها را در نمایش موبایل تغییر داد. Visual Composer همچنین از کنترل ترتیب راست‌به‌چپ ستون‌ها پشتیبانی می‌کند که برای سایت‌های فارسی کاربردی است.

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

---

طراحی ظاهر سایت با امکانات Visual Composer

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

تنظیم فاصله‌ها؛ Margin و Padding

Margin فاصله بیرونی یک عنصر با اجزای اطراف و Padding فاصله محتوای داخل عنصر با لبه‌های آن است. استفاده درست از این دو گزینه باعث می‌شود صفحه منظم و خوانا باشد.

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

تنظیم Border و Border Radius

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

برای حفظ هماهنگی بصری، بهتر است شعاع گوشه دکمه‌ها، تصاویر و کادرهای مشابه یکسان یا نزدیک به یکدیگر باشد.

تغییر رنگ و پس‌زمینه

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

تعداد رنگ‌های اصلی صفحه را محدود نگه دارید و از رنگ‌های هماهنگ با هویت بصری سایت استفاده کنید. رنگ‌های متعدد و بدون الگو معمولاً ظاهر صفحه را غیرحرفه‌ای می‌کنند.

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

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

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

افکت Parallax چیست؟

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

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

استفاده از Gradient و Video Background

Gradient ترکیبی تدریجی از دو یا چند رنگ است و می‌تواند جایگزین سبک‌تری برای تصاویر پس‌زمینه باشد. بهتر است رنگ‌های گرادیان هماهنگ و متن روی آن کاملاً خوانا باشد.

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

طراحی بخش‌های جذاب برای Landing Page

در طراحی صفحه فرود، زیبایی باید در خدمت هدف صفحه باشد. یک Landing Page مؤثر معمولاً شامل عنوان روشن، توضیح کوتاه، تصویر مرتبط، مزایا، نشانه‌های اعتماد و یک فراخوان به اقدام مشخص است.

برای طراحی بهتر:

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

Visual Composer ابزارهای متنوعی مانند پس‌زمینه، گرادیان، ویدئو، پارالاکس و تنظیمات فاصله را ارائه می‌کند؛ اما نتیجه حرفه‌ای از سادگی، هماهنگی و توجه به نیاز کاربر به دست می‌آید، نه استفاده هم‌زمان از همه امکانات.

---

Theme Builder در Visual Composer چیست؟

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

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

Theme Builder چه کاربردی دارد؟

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

ساخت Header اختصاصی

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

هدر باید در موبایل به‌درستی نمایش داده شود، منوی قابل‌استفاده‌ای داشته باشد و فضای بیش از حدی از صفحه را اشغال نکند.

ساخت Footer اختصاصی

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

طراحی Sidebar

با Visual Composer می‌توان سایدباری متناسب با نوع صفحه طراحی کرد؛ برای مثال، سایدبار نوشته‌ها می‌تواند شامل جست‌وجو، دسته‌بندی‌ها و مطالب مرتبط باشد. بهتر است سایدبار فقط اطلاعات مفید ارائه کند و باعث شلوغی صفحه نشود.

ساخت Template برای نوشته‌ها

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

طراحی صفحات Archive

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

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

ساخت صفحه 404 سفارشی

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

صفحه 404 نباید کاربر را در بن‌بست قرار دهد؛ هدف آن هدایت دوباره بازدیدکننده به محتوای مفید است.

ساخت Search Page اختصاصی

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

اعمال Template به‌صورت سراسری یا برای یک صفحه خاص

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

قبل از اعمال سراسری، قالب را روی نسخه آزمایشی بررسی کنید؛ زیرا یک تنظیم اشتباه ممکن است ظاهر تعداد زیادی صفحه را هم‌زمان تغییر دهد. همچنین اگر هدر، فوتر یا سایدبار در چند Layout استفاده می‌شود، ساخت آن به‌صورت Global Template مدیریت تغییرات را ساده‌تر می‌کند.

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

---

استفاده از Visual Composer برای طراحی سایت فروشگاهی

Visual Composer می‌تواند در کنار ووکامرس برای طراحی صفحات و بخش‌های فروشگاهی استفاده شود. این ابزار جایگزین WooCommerce نیست؛ ووکامرس مدیریت محصول، قیمت، موجودی، سبد خرید و سفارش‌ها را انجام می‌دهد و Visual Composer بیشتر برای کنترل چیدمان و ظاهر محتوا به کار می‌رود.

آیا Visual Composer با WooCommerce سازگار است؟

بله، Visual Composer از WooCommerce پشتیبانی می‌کند و عناصر مربوط به نمایش محصول، دسته‌بندی و افزودن به سبد خرید را ارائه می‌دهد. بخشی از امکانات کامل فروشگاهی به نسخه Premium وابسته است؛ بنابراین پیش از خرید باید ویژگی‌های پلن فعلی را بررسی کنید.

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

طراحی صفحات محصولات

با استفاده از Visual Composer می‌توان توضیحات و بخش‌های محتوایی صفحات محصول را جذاب‌تر کرد؛ برای مثال:

• معرفی ویژگی‌ها و مزایا
• تصاویر و ویدئوهای محصول
• جدول مقایسه
• پرسش‌های متداول
• راهنمای استفاده
• نظرات یا نشانه‌های اعتماد
• دکمه فراخوان به خرید

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

نمایش محصولات و دسته‌بندی‌ها

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

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

طراحی بخش‌های فروشگاهی

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

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

آیا Visual Composer برای فروشگاه‌های بزرگ مناسب است؟

امکان استفاده از Visual Composer در فروشگاه‌های بزرگ وجود دارد، اما مناسب بودن آن به نحوه پیاده‌سازی وابسته است. در فروشگاهی با محصولات و افزونه‌های متعدد، تعداد عناصر صفحه‌ساز، تصاویر، اسکریپت‌ها، فیلترها و کوئری‌های پویا می‌تواند بر سرعت اثر بگذارد.

برای فروشگاه بزرگ بهتر است:

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

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

---

Visual Composer و سئو؛ آیا برای SEO مناسب است؟

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

آیا استفاده از Visual Composer به سئو آسیب می‌زند؟

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

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

تأثیر Page Builder بر سرعت سایت

صفحه‌سازها ممکن است فایل‌های CSS و JavaScript یا کدهای بیشتری به صفحه اضافه کنند. میزان تأثیر به تعداد عناصر، تصاویر، انیمیشن‌ها، افزونه‌ها و کیفیت هاست وابسته است.

سرعت را با ابزارهایی مانند PageSpeed Insights و گزارش Core Web Vitals سرچ کنسول اندازه‌گیری کنید. امتیاز خوب به‌تنهایی رتبه بالا را تضمین نمی‌کند، اما تجربه کاربری مناسب می‌تواند به موفقیت صفحه کمک کند.

ساختار HTML و هدینگ‌ها در Visual Composer

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

گوگل استفاده از HTML معنایی و متن قابل‌دسترسی در ساختار صفحه را توصیه می‌کند؛ زیرا این موارد در درک موضوع محتوا مؤثرند.

استفاده صحیح از H1، H2 و H3

عنوان اصلی صفحه را با H1 مشخص کنید و معمولاً یک عنوان اصلی روشن داشته باشید. بخش‌های اصلی مقاله باید H2 و زیرموضوع‌های هر بخش H3 باشند.

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

بهینه‌سازی تصاویر در صفحات ساخته‌شده با Visual Composer

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

گوگل برای درک تصاویر از متن اطراف و ویژگی alt استفاده می‌کند و از تکرار افراطی کلمات کلیدی در آن پرهیز می‌دهد.

سازگاری Visual Composer با Yoast SEO

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

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

چگونه با Visual Composer صفحه‌ای SEO-Friendly بسازیم؟

برای ساخت یک صفحه SEO-Friendly:

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

اشتباهات سئویی رایج هنگام استفاده از Page Builder

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

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

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

---

آیا Visual Composer سرعت سایت را کاهش می‌دهد؟

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

چرا Page Builderها ممکن است روی Performance تأثیر بگذارند؟

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

چه عواملی بیشترین تأثیر را روی سرعت صفحات Visual Composer دارند؟

مهم‌ترین عوامل عبارت‌اند از:

• تصاویر و ویدئوهای حجیم
• تعداد زیاد عناصر و ستون‌های تو‌در‌تو
• فونت‌ها و آیکون‌های متعدد
• اسلایدرها و افکت‌های حرکتی
• افزونه‌های ناسازگار یا سنگین
• پاسخ‌گویی کند سرور و پایگاه داده
• نبود کش مناسب
• بارگذاری منابع خارجی متعدد

برای یافتن علت واقعی باید صفحه را آزمایش کرد؛ نمی‌توان افت سرعت را بدون بررسی فقط به Visual Composer نسبت داد.

بهینه‌سازی تصاویر و فایل‌های CSS و JavaScript

تصاویر را با ابعاد متناسب و فرمت‌هایی مانند WebP یا AVIF بارگذاری کنید. فایل‌های CSS و JavaScript نیز در صورت امکان باید فشرده شوند و منابع غیرضروری حذف شوند.

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

استفاده از Lazy Load

Lazy Load بارگذاری تصاویر و رسانه‌های خارج از محدوده اولیه نمایش را تا زمان نیاز به تعویق می‌اندازد. Visual Composer برای بعضی محتواهای رسانه‌ای گزینه بارگذاری تنبل ارائه می‌کند.

تصویر اصلی بالای صفحه معمولاً نباید بی‌دلیل به‌صورت تنبل بارگذاری شود؛ زیرا تأخیر آن می‌تواند معیار LCP را ضعیف کند.

تأثیر هاست و افزونه‌های دیگر بر سرعت

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

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

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

برای بهبود سرعت:

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

گوگل معیارهای Core Web Vitals را برای سنجش سرعت بارگذاری، پاسخ‌گویی و ثبات بصری معرفی می‌کند، اما تأکید دارد که کسب امتیاز کامل به‌تنهایی رتبه بالا را تضمین نمی‌کند.

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

---

مزایا و معایب Visual Composer

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

مزایای Visual Composer

مهم‌ترین مزایای Visual Composer عبارت‌اند از:

• رابط Drag & Drop: عناصر صفحه را می‌توان با کشیدن و رها کردن اضافه یا جابه‌جا کرد.
• ویرایش زنده: تغییرات طراحی در نمای نزدیک به خروجی نهایی مشاهده می‌شوند.
• امکانات طراحی گسترده: تنظیم فاصله، رنگ، پس‌زمینه، حاشیه، گرادیان و افکت‌ها بدون کدنویسی امکان‌پذیر است.
• Templateهای آماده: قالب‌ها و بلوک‌های آماده، زمان شروع طراحی را کاهش می‌دهند.
• امکانات Responsive: ظاهر و رفتار عناصر در موبایل، تبلت و دسکتاپ قابل‌کنترل است.
• Theme Builder: نسخه حرفه‌ای امکان طراحی هدر، فوتر، سایدبار و قالب صفحات را فراهم می‌کند.
• Dynamic Content: می‌توان اطلاعات وردپرس و فیلدهای سفارشی را به‌صورت پویا نمایش داد.
• امکانات توسعه‌دهندگان: پشتیبانی از کدهای سفارشی و API، امکان توسعه عناصر اختصاصی را فراهم می‌کند.
• Visual Composer Hub: عناصر، قالب‌ها و ابزارهای تکمیلی از داخل ویرایشگر قابل‌دریافت هستند.

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

معایب Visual Composer

مهم‌ترین محدودیت‌های Visual Composer عبارت‌اند از:

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

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

---

Visual Composer رایگان است یا پولی؟

Visual Composer در دو نسخه رایگان و Premium ارائه می‌شود. نسخه رایگان برای شروع طراحی صفحات ساده مناسب است و نسخه حرفه‌ای امکانات گسترده‌تری برای طراحی کل سایت در اختیار کاربر قرار می‌دهد.

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

نسخه رایگان Visual Composer چه امکاناتی دارد؟

نسخه رایگان از مخزن وردپرس قابل‌نصب است و امکانات پایه‌ای مانند موارد زیر را ارائه می‌دهد:

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

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

نسخه Premium چه امکاناتی اضافه می‌کند؟

نسخه حرفه‌ای Visual Composer دسترسی گسترده‌تری به Visual Composer Hub و ابزارهای ساخت سایت فراهم می‌کند. مهم‌ترین قابلیت‌های آن عبارت‌اند از:

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

امکانات دقیق هر پلن ممکن است در طول زمان تغییر کند و باید پیش از خرید بررسی شود.

آیا خرید نسخه Premium ارزش دارد؟

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

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

Visual Composer برای چه کسانی ارزش خرید بیشتری دارد؟

نسخه Premium معمولاً برای گروه‌های زیر ارزش بیشتری دارد:

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

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

---

Visual Composer برای چه کسانی مناسب است؟

Visual Composer برای افرادی مناسب است که می‌خواهند صفحات وردپرس را در یک محیط دیداری طراحی کنند و روی چیدمان و ظاهر سایت کنترل بیشتری داشته باشند. بااین‌حال، نوع پروژه و میزان نیاز به شخصی‌سازی تعیین می‌کند که این ابزار انتخاب مناسبی باشد یا نه.

Visual Composer برای کاربران مبتدی

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

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

Visual Composer برای طراحان سایت

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

Visual Composer برای فریلنسرها

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

Visual Composer برای آژانس‌های طراحی سایت

آژانس‌ها می‌توانند از Global Templates، Role Manager و Theme Builder برای حفظ هماهنگی طراحی و محدودکردن دسترسی مشتریان استفاده کنند.

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

Visual Composer برای فروشگاه‌های اینترنتی

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

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

چه کسانی بهتر است از Page Builder دیگری استفاده کنند؟

بررسی گزینه‌های دیگر می‌تواند برای این گروه‌ها منطقی‌تر باشد:

• سایت‌هایی که قبلاً با صفحه‌ساز دیگری ساخته شده‌اند و مهاجرت آن‌ها هزینه‌بر است.
• پروژه‌هایی که اولویت اصلی آن‌ها کمترین کد و حداکثر عملکرد فنی است.
• کاربرانی که امکانات نسخه رایگان Visual Composer برایشان کافی نیست و بودجه Premium ندارند.
• توسعه‌دهندگانی که قصد دارند رابط سایت را کاملاً اختصاصی کدنویسی کنند.
• تیم‌هایی که اکوسیستم قالب و افزونه‌هایشان با ابزار دیگری هماهنگ شده است.

Visual Composer برای صاحبان کسب‌وکار، طراحان، بازاریابان، فروشگاه‌ها و توسعه‌دهندگان عرضه شده است؛ اما مناسب‌ترین انتخاب همیشه به نیاز پروژه وابسته است.

---

Visual Composer یا Elementor؛ کدام بهتر است؟

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

مقایسه رابط کاربری

هر دو ابزار ویرایشگر Drag & Drop دارند. Visual Composer بر ویرایش Frontend و دسترسی به ابزارها از نوار کناری تمرکز دارد. Elementor نیز یک بوم دیداری و پنل تنظیمات عناصر ارائه می‌دهد.

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

مقایسه امکانات طراحی

هر دو صفحه‌ساز امکان کنترل رنگ، تایپوگرافی، فاصله، پس‌زمینه، حاشیه و افکت‌ها را دارند. Elementor در نسخه‌های حرفه‌ای ابزارهای طراحی و بازاریابی گسترده‌ای ارائه می‌کند و Visual Composer نیز Design Options، کدهای سفارشی و Presetهای قابل‌استفاده مجدد دارد.

مقایسه Templateها و Elementها

Visual Composer عناصر، قالب‌ها و Add-onهای خود را از طریق Visual Composer Hub ارائه می‌کند. Elementor نیز دارای کتابخانه‌ای از Widgetها، Blockها و قالب‌های آماده است.

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

مقایسه امکانات Responsive

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

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

مقایسه Theme Builder

نسخه حرفه‌ای هر دو محصول امکان طراحی هدر، فوتر، قالب نوشته‌ها و آرشیوها را فراهم می‌کند. Elementor Pro برای صفحات محصول و آرشیو ووکامرس نیز Theme Builder اختصاصی دارد. Visual Composer Premium هم می‌تواند Layoutهای سراسری و قالب‌های پویا ایجاد کند.

مقایسه عملکرد و سرعت

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

برای مقایسه منصفانه باید یک طرح مشابه را با شرایط یکسان بسازید و معیارهای Core Web Vitals را اندازه‌گیری کنید.

مقایسه امکانات رایگان و Premium

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

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

برای سایت شرکتی کدام مناسب‌تر است؟

برای سایت شرکتی ساده، نسخه رایگان هر دو می‌تواند کافی باشد. اگر به فرم‌های پیشرفته، پاپ‌آپ و اکوسیستم گسترده افزودنی‌ها نیاز دارید، Elementor گزینه قابل‌بررسی است. اگر استفاده از Hub، قالب‌های سراسری و ابزارهای یکپارچه Visual Composer با روند کاری شما هماهنگ‌تر است، Visual Composer می‌تواند مناسب‌تر باشد.

برای فروشگاه اینترنتی کدام مناسب‌تر است؟

هر دو با WooCommerce سازگارند. Elementor Pro ابزارهای اختصاصی WooCommerce Builder برای طراحی قسمت‌های مختلف فروشگاه دارد. Visual Composer نیز عناصر فروشگاهی و Theme Builder ارائه می‌کند.

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

در نهایت Visual Composer یا Elementor؟

Elementor برای کاربرانی مناسب است که اکوسیستم گسترده، ابزارهای بازاریابی و افزودنی‌های متعدد را ترجیح می‌دهند. Visual Composer برای افرادی جذاب است که ویرایش Frontend، Visual Composer Hub و مجموعه ابزارهای طراحی سایت آن را می‌پسندند.

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

---

قابلیت‌های پیشرفته Visual Composer برای کاربران حرفه‌ای

Visual Composer علاوه بر ابزارهای پایه طراحی، قابلیت‌هایی برای ساخت پروژه‌های پویا، حفظ هماهنگی صفحات و توسعه عناصر اختصاصی ارائه می‌دهد. بسیاری از این امکانات به نسخه Premium یا افزونه‌های جانبی موجود در Hub نیاز دارند.

Dynamic Content

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

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

Global Templates

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

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

Element Presets

با Element Presets می‌توان تنظیمات یک عنصر را به‌عنوان الگوی آماده ذخیره کرد. برای مثال، سبک ثابت دکمه‌های اصلی یا کادرهای خدمات را یک‌بار تنظیم و در صفحات دیگر استفاده کنید.

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

Custom CSS و JavaScript

Visual Composer امکان افزودن CSS و JavaScript سفارشی را در سطح صفحه یا سایت فراهم می‌کند. این ویژگی برای تغییرات ظاهری و رفتارهایی کاربرد دارد که از طریق تنظیمات معمول قابل‌اجرا نیستند.

کدهای سفارشی باید توسط فرد آشنا با توسعه وب نوشته و ابتدا در محیط آزمایشی بررسی شوند؛ زیرا خطای کدنویسی می‌تواند ظاهر یا عملکرد سایت را مختل کند.

Role Manager

Role Manager دسترسی نقش‌های مختلف وردپرس به قابلیت‌های Visual Composer را کنترل می‌کند. برای مثال، می‌توان اجازه ویرایش محتوا را به نویسنده داد، اما تغییر ساختار اصلی صفحه را محدود کرد.

این ابزار برای سایت‌های چندکاربره و پروژه‌هایی که پس از تحویل توسط مشتری مدیریت می‌شوند، مفید است.

Import و Export Templateها

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

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

استفاده از API برای توسعه Elementهای اختصاصی

Visual Composer برای توسعه‌دهندگان API ارائه می‌کند تا عناصر سفارشی متناسب با نیاز پروژه بسازند. این عناصر می‌توانند تنظیمات اختصاصی داشته باشند و مانند عناصر اصلی در ویرایشگر استفاده شوند.

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

این ابزارهای پیشرفته Visual Composer را برای پروژه‌های حرفه‌ای منعطف‌تر می‌کنند؛ اما استفاده مؤثر از آن‌ها به ساختار منظم، مستندسازی و کنترل دسترسی کاربران نیاز دارد.

---

اشتباهات رایج هنگام استفاده از Visual Composer

امکانات فراوان Visual Composer می‌تواند طراحی را سریع‌تر کند؛ اما استفاده نادرست از آن ممکن است به صفحه‌ای شلوغ، کند یا نامناسب برای موتورهای جست‌وجو منجر شود.

مهم‌ترین اشتباهات عبارت‌اند از:

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

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

بی‌توجهی به نسخه موبایل

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

استفاده نادرست از Headingها

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

تغییر اندازه نوشته باید از تنظیمات تایپوگرافی انجام شود، نه با انتخاب هدینگ نامرتبط.

آپلود تصاویر بسیار حجیم

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

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

ساخت صفحات بسیار سنگین

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

استفاده از افزونه‌های متعدد برای یک قابلیت

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

بی‌توجهی به به‌روزرسانی‌ها و سازگاری افزونه‌ها

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

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

طراحی بدون توجه به Search Intent و سئو

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

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

در نهایت، بهترین نتیجه زمانی به دست می‌آید که از Visual Composer با هدف سادگی، سرعت، خوانایی و هدایت درست کاربر استفاده شود.

---

پرسش‌های متداول درباره Visual Composer

ویژوال کامپوزر چیست؟

Visual Composer Website Builder یک صفحه‌ساز و سایت‌ساز دیداری برای وردپرس است که امکان طراحی با کشیدن و رها کردن عناصر را فراهم می‌کند.

آیا Visual Composer رایگان است؟

بله، نسخه رایگان دارد؛ اما امکاناتی مانند دسترسی کامل به Hub، Theme Builder و ابزارهای پیشرفته در نسخه Premium ارائه می‌شوند.

آیا Visual Composer به کدنویسی نیاز دارد؟

برای طراحی صفحات معمولی نیازی به کدنویسی نیست. بااین‌حال، برای تغییرات کاملاً اختصاصی، آشنایی با CSS و JavaScript مفید است.

آیا Visual Composer همان WPBakery است؟

خیر. Visual Composer Website Builder و WPBakery Page Builder دو افزونه مستقل هستند. افزونه‌ای که قبلاً با نام WPBakery Visual Composer شناخته می‌شد، همان WPBakery امروزی است.

آیا Visual Composer با WooCommerce سازگار است؟

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

آیا Visual Composer برای سئو مناسب است؟

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

آیا Visual Composer سایت را کند می‌کند؟

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

آیا Visual Composer با قالب‌های وردپرس سازگار است؟

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

آیا می‌توان با Visual Composer سایت را بدون برنامه‌نویسی طراحی کرد؟

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

Visual Composer بهتر است یا Elementor؟

پاسخ مطلقی وجود ندارد. Elementor اکوسیستم گسترده‌ای دارد و Visual Composer نیز Hub و ابزارهای یکپارچه سایت‌سازی ارائه می‌کند. بهترین گزینه باید براساس نیاز پروژه و آزمایش عملی انتخاب شود.

آیا امکان ساخت Header و Footer با Visual Composer وجود دارد؟

بله، در نسخه Premium و با استفاده از Theme Builder می‌توان هدر و فوتر اختصاصی ساخت و آن‌ها را به‌صورت سراسری یا در بخش‌های مشخص سایت نمایش داد.

---

جمع‌بندی؛ آیا Visual Composer برای سایت وردپرسی مناسب است؟

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

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

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

به‌طور خلاصه:

• اگر به ویرایش زنده، قالب‌های آماده و کنترل گسترده طراحی نیاز دارید، Visual Composer گزینه‌ای قابل‌بررسی است.
• اگر فقط صفحات ساده می‌سازید، بهتر است ابتدا نسخه رایگان را آزمایش کنید.
• اگر به طراحی هدر، فوتر، قالب‌های پویا و امکانات کامل Hub نیاز دارید، نسخه Premium کاربرد بیشتری خواهد داشت.
• اگر سرعت بسیار بالا یا توسعه کاملاً اختصاصی اولویت اصلی پروژه است، ویرایشگر بلوکی وردپرس یا طراحی سفارشی را نیز مقایسه کنید.
• اگر سایت فعلی شما با صفحه‌ساز دیگری بدون مشکل کار می‌کند، مهاجرت را فقط با دلیل فنی و برنامه مشخص انجام دهید.

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

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

---

منابع معتبر

اطلاعات این مقاله با استفاده از مستندات رسمی و منابع زیر تهیه و بررسی شده است:

منابع رسمی Visual Composer

• صفحه اصلی Visual Composer Website Builder
• فهرست امکانات Visual Composer
• مرکز راهنمای رسمی Visual Composer
• آموزش نصب Visual Composer
• پیش‌نیازهای فنی Visual Composer
• آموزش ساخت صفحه جدید
• آشنایی با محیط ویرایشگر
• ساختار و عناصر محتوایی
• Visual Composer Hub چیست؟
• عناصر و قالب‌های Visual Composer Hub
• راهنمای قالب‌های Visual Composer
• راهنمای Theme Builder
• راهنمای Dynamic Content
• راهنمای Design Options
• مقایسه نسخه رایگان و Premium
• فعالسازی نسخه Premium
• افزونه Visual Composer در مخزن وردپرس

منابع مقایسه Visual Composer و WPBakery

• مقایسه رسمی Visual Composer و WPBakery
• راهنمای رسمی مهاجرت از WPBakery به Visual Composer
• وب‌سایت رسمی WPBakery Page Builder
• فهرست امکانات WPBakery
• مقایسه WPBakery و Visual Composer در مستندات WPBakery

منابع رسمی Elementor

• آشنایی با Elementor Pro
• مقایسه Elementor رایگان و Pro
• راهنمای Theme Builder المنتور
• سازگاری Elementor با WooCommerce

منابع رسمی گوگل برای سئو و تجربه کاربری

• اصول اساسی جست‌وجوی گوگل
• راهنمای تولید محتوای مفید و قابل‌اعتماد
• راهنمای تجربه صفحه در نتایج گوگل
• راهنمای Core Web Vitals
• بهترین روش‌های سئوی تصاویر
• راهنمای فنی سئو برای توسعه‌دهندگان

تاریخ آخرین بررسی منابع: شهریور ۱۴۰۵

با توجه به تغییر احتمالی امکانات، شرایط لایسنس و پلن‌های Visual Composer، بهتر است پیش از نصب یا خرید، اطلاعات نهایی در وب‌سایت رسمی محصول دوباره بررسی شود.