کار با صفحه ساز ویژوال کامپوزر

visual composer
خانه » مقالات وردپرس » کار با صفحه ساز ویژوال کامپوزر

کار با صفحه ساز ویژوال کامپوزر (WP Bakery). در این مقاله صفر تا صد کار کردن با ویژوال کامپوزر را یاد میگیریم.

افزونه visual composer یک افزونه حرفه ای برای طراحی و ساخت صفحات سایت های وردپرسی است.

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

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

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

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

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

در ادامه به معرفی صفحه ساز معروف و محبوب ویژوال کامپوزر پرداخته و نحوه کار کردن با آن را بررسی می کنیم.

برای دانلود این صفحه ساز، به سایت visualcomposer.com رفته و نسخه رایگان آن را دانلود کنید.

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

صفحه ویژوال کامپوزر

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

آموزش کامل نحوه کار با افزونه ویژوال کامپوزر

ویژگی ها

بعد از نصب این افزونه می بینید که دارای انواع المان و امکانات حرفه ای می باشد.

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

المان های مانند:

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

افزونه ویژوال کامپوزر فارسی دارای یک افزونه جانبی به نام addons ultimate vc نیز هست که با نصب این پلاگین در کنار صفحه ساز ویژوال کامپوزرالمان های اضافی هم خواهید داشت که می توانید از آن ها برای طراحی یک صفحه حرفه ای استفاده کنید.

ویژگی دیگر مهم آن “دراگ و دراپ کردن” است. یعنی کار با این افزونه سخت نیست.

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

درگ و دراپ کردن در ویژوال کامپوزر

نصب و فعال سازی

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

آموزش طراحی به صورت ریسپانسیو
>>

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

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

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

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

همچنین می توانید CSSهای مختلف را به دلخواه خود اضافه کنید.

در حالت کلی نگران کار با ویژوال کامپوزر نباشید.

با کمی جست و جو و تلاش و کار با این پلاگین، تنظیماتش دستگیرتون میشه!

کار با صفحه ساز ویژوال کامپوزر

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

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

در پنجره باز شده روی گزینه افزودن المان کلیک کنید.

در پنجره جدید که مربوط به انتخاب المان است، باید ابتدا رو یالمان ردیف کلیک کیند تا یک ردیف بسازید.

حالا که یک ردیف ساخته اید می توانید المان های مورد نظر خود را به درستی چیدمان کنید.

افزودن برگه در ویژوال کامپوزر

ریسپانسیو بودن صفحات (Responsive)

ریسپانسیو به معنای طراحی واکنشگرا نمونه های موبایلی است.

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

ویژگی ریسپانسیو بودن ویژوال کامپوزر

دسترسی user group ها

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

برای انجام این کار وارد قسمت Rol manager شوید و روی آن کلیک کنید. بعد از باز شدن منو قسمت های زیر را به ترتیب مشاهده می کنید:

Post Type: به صورت پیش فرض روی only page  قرار دارد. این گزینه به این معناست که ویژوال کامپوزر فقط می تواند صفحات را ویرایش کند. اما اگر گزینه custom  را انتخاب کنید علاوه بر صفحات می توانید پست های سایتتان را نیز ویرایش کنید.

Bakend Editor: در این منو دو گزینه Disable  و Enable  را مشاهده می کنید. به شما امکان استفاده از ویرایشگر Backend ویژوال کامپوزر را برای ویرایشگران سایت شما فعال یا غیرفعال می کند.

Frontend Editor: این منو هم مانند منوی بک اند است. با استفاده از آن ویرایشگر Frontend  را برای ویرایشگران فعال یا غیرفعال نمایید.

Page setting: از این منو می توان تنظیمات ویژوال کامپوزر را برای تمامی یوزرگروپ ها محدود کنید. روی گزینه Disable  قرار دهید تا محدود شود.

افزونه وردپرس چیست؟
>>

Setting options: برای کنترل ذسترسی یوزر گروپ ها به تنظیمات ادمین مانند General setting  می توان از این منو استفاده کنید.

Templates: اگر شما در این منو گزینه  Apply Templates Only  را انتخاب کنید دسترسی دیگران ر برای اضافه کردن

قالب به سایت محدود کردید.

Elements: کنترل یوزر گروپ ها به المان های محتوا

Grid builder: برای کنترل دسترسی یوزر گروپ ها به المان های Grid Builder  است.

Element Presets: کنترل دسترسی یوزرگروپ ها به تنظیمات المان ها با انتخاب گزینه Apply Present Only

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

بعد از شخصی سازی این تنظیمات باید گزینه ذخیره تغییرات را بزنید تا اعمال شود.

تغییر ظاهر سایت

ظاهر سایت، از بخش های مهم سایت است که در جذب کاربران سایت شما بسیار تاثیرگذار است.

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

حالا بهتر است بدانید با استفاده از افزونه ویژوال کامپوزر می توانید کار زیباسازی سایت خود را نیز انجام دهید.

برای ایجاد تغییرات وارد بخش Designing Options  شوید. با استفاده از این بخش می توانید تنظیمات رنگ و دیزاین ظاهر سایت خود را شخصی سازی کنید.

بعد از ورد به این قسمت با گزینه های زیر روبرو می شوید. به ترتیب نام می بریم و کاربردشان را توضیح می دهیم.

Main accent color: رنگ زمینه اصلی سایت

Hover color: رنگ ثانویه سایت

:Call to action background color رنگ کلید CTA

Google maps background color: رنگ زمینه گوگل مپ

Post slider caption background color: رنگ زمینه پست اسلایدر

Progress bar background color: رنگ زمینه نوار پیشرفت

Separator border color: رنگ حاشیه جداساز

Tabs navigation background color: رنگ زبانه زمان کلیک کردن روی آن

Active tab background color: رنگ زیبانه های فعال

Elements bottom margin: حاشیه پایینی المان ها

Grid gutter Width: تعیین فاصله در بین گریدها

Mobile Screen Width: اندازه پهنای صفحه سایت زمان نمایش روی موبایل ها

در این قسمت نیز بعد از ایجاد تغییرات، گزینه ذخیره تغییرات را حتما بزنید.

افزودن کد css به سایت

اگر بخواهید در سایت خود تغییراتی ایجاد کنید به صورتی که یک طراحی منحصر به فرد در سایت خود داشته باشید، باید کدهای CSS را به سایت خود اضافه کنید.

افزودن CSS ها به سایت با بخش   Custom CSSدر افزونه ویژوال کامپوزر به آسانی امکان پذیراست.

( حتما باید از ورژن جدید ویژوال کامپوزر استفاده کنید تا این بخش را در منوی این پلاگین ببینید.)

بعد از پیدا کردن این قسمت و باز کردن آن صفحه ای برای شما باز می شود. می توانید کدCSS  مورد نظر خود را در این بخش اضافه نمایید.

آموزش نصب قالب وردپرس
>>

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

Shortcode Mapper

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

حالا می خواهیم نحوه افزودن شورت کد را توضیح دهیم.

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

سپس وارد بخش Shortcode Mapper شوید. درکادر خالی زیر عبارت ShortCode String، شورت کد مربوطه را وارد کنید و بر روی دکمه Parse shortcode کلیک کنید.

چگونه از شورت کدها استفاده کنیم

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

در ویژوال کامپوزر ویرایشگر Frontend را باز کنید.

سپس روی Add Element کلیک کنید.

گزینه My Shortcode را بزنید و روی گزینه Embedyt نیز کلیک کنید.

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

در بخش Desigining Options هم می توانید تغییرات در شورت کد ایجاد کنید.

عملکرد shourtcode ها در ویژوال کامپوزر

ویرایشگر backend

ویژوال کامپوزر هم قابلیت ویرایش در Backend را دارد و هم در Frontend.

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

شما می توانید بر خلاف عادت خود که از ویرایشگر پیش فرض وردپرس یا ویرایشگر Backend ویژوال کامپوز استفاده می کنید، از ویرایشگر Frontend که دارای عملکرد بهتر و ساده تری است نیز استفاده کنید.

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

در بخش آخر مقاله تعدادی زیادی از امکانات بی نظیر افزونه ویژوال کامپوزر را برای شما نام برده ایم.

دارا بودن نسخه اورجینال و پرمیوم

پنل تنظیمات فارسی و رابط کاربری آسان

امکانات و المان های ویژه

راه اندازی و آپدیت های رایگان

سئوی بهینه سازی شده

شبکه های اجتماعی محبوب

فلیتر تصاویر

امکان پخش ویدیو

ویرایش در صفحه برگه یا نوار مدیریت

ساخت صفحه به عنوان Frontend(سمت کاربر) یا Backend (خارج از دید کاربر)

پشتیبانی از پوسته های فارسی

سازگاری با افزونه Yoast SEO، WPML و qTranlate.

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.