افزونه Visual Composer
معرفی افزونه Visual Composer
افزونه Visual Composer یکی از صفحه ساز های قدرتمند برای قالب وردپرس می باشد که می تواند بهترین گزینه برای کسانی که می خواهند به سرعت سایتی فوق العاده طراحی کنند باشد.مدت ها پس از اینکه نرم افزار های مدیریت محتوا محبوبیت خود را بین عموم مردم و حتی طراحان سایت بدست آوردند بالاخره امپراتوری طراحی با Cms ها با افزونه صفحه ساز ویژوال کامپوسر کامل شد.این افزونه قدرتمند با قالب های بسیاری سازگاری دارد اما قبل از اقدام باید از سازگاری آنها مطمئن شوید ، البته بسیاری از امکانات افزونه مانند ( دکمه ها ، نمودار ها ، باکس ها و … ) در همه قالب ها قابل استفاده است.
در ادامه در این سری از آموزش طراحی رایگان سایت از صفر تا صد با ما همراه باشید.
ویژگی های افزونه Visual Composer
- ساخت صفحه به عنوان Frontend (سمت کاربر) / Backend (خارج از دید کاربر)
- پشتیبانی از هر پوسته وردپرسی
- افزونه، المنت و پوسته های آماده و قابل افزایش
- ساخت یک پوسته کامل با Drag and Drop
- طراحی واکنشگرا (Responsive) نمونه های موبایلی
- دارای گزینه های نامحدود
- کنترل های ساده
- سازگار با افزونه های qTranslate و WPML
- سازگار با افزونه Yoast SEO
- دارای چندین فیلتر برای تصاویر
- پشتیبانی از Custom Post Type (نوع پست سپارشی)
- قابل گسترش با API ویژوال کامپزر
- Grid بندی پیشرفته و سفارشی
- پشتیبانی از زبان پارسی!
- رایگان!
- و…
نصب افزونه Visual Composer
پس از خرید و دانلود افزونه ، بخش افزونه‌ها، بارگذاری افزونه جدید را انتخاب و فایل زیپ حاوی افزونه را در وردپرس خود آپلود کنید، پس از بارگذاری و فعالسازی افزونه مطابق تصویر زیر منو جدیدی به نام “ویژوال کامپوزر” به داشبورد وردپرس شما افزوده خواهد شد.
تنظیمات افزونه ویژوال کامپوزر
افزونه ویژوال کامپوزر دارای زیر مجموعه‌هایی می‌باشد که شامل تنظیمات عمومی، تنظیمات طراحی، کدهای css سفارشی و غیره می‌باشد، بطور پیشفرض نیاز به تغییر این تنظیمات نمی‌باشد اما برای دانستن کارایی آنها مروری بر روی هر کدام از این سربرگ‌ها خواهیم داشت.
تنظیمات عمومی
- غیرفعالسازی المان‌های محتوای ریسپانسیو: با فعالسازی این گزینه می‌توانید این افزونه را برای دستگاه‌های هوشمند مانند موبایل غیرفعال کنید.
- زیرمجموعه های فونت های گوگل: از این بخش می‌توانید فونت‌های خاصی را برای المان‌های visual composer در وردپرس انتخاب کنید، بطور پیشفرض بر روی latin تنظیم است.
- Disable Gutenberg Editor: این گزینه نمایش حالت ویرایشگر گوتنبرگ را غیرفعال می‌کند.
- الگو پیش فرض برای انواع نوشته: این بخش به شما اجازه می‌دهد در صورت تمایل یکی از صفحات از قبل طراحی شده را به عنوان الگوی اصلی انتخاب کنید.
نقش مدیر
در این سربرگ لیستی از دسترسی نقش کاربران را مشاهده خواهید کرد که با باز کردن منوی کشویی هر کدام از آنها به ویژگی‌ها و تنظیمات پیشرفته دسترسی خواهید داشت، به عنوان مثال گزینه‌های نقش مدیر کل را مورد بررسی قرار می‌دهیم.
- پست تایپ‌ها: با استفاده از این گزینه می‌توانید افزونه Visual Composer را برای بخش‌های مورد نظر مانند برگه‌ها، مطالب و غیره فعال کنید. بطور پیشفرض ویژوال کامپوزر فقط برای برگه‌ها فعال می‌باشد.
- ویرایشگر پیشرفته: در این بخش می‌توانید ویرایشگر پیشرفته مربوط به ویژوال کامپوزر را فعال و یا غیرفعال کنید، همچنین بصورت کامل ویرایشگر کلاسیک را غیرفعال نمایید.
- ویرایشگر زنده: با کمک این گزینه قادر خواهید بود تغییرات ایجاد شده را به صورت زنده مشاهده کنید.
- HTML فیلتر نشده: این گزینه اجازه استفاده از HTML سفارشی در ویژوال کامپوزر را فعال می‌کند.
- تنظیمات صفحه: فعال یا غیرفعالسازی کنترل دسترسی به تنظیمات صفحه ویژوال کامپوزر از این گزینه امکانپذیر است.
- گزینه های تنظیمات: امکان استفاده از گزینه‌های تنظیمات برای انواع المان‌ها را فراهم می‌کند.
- الگوها: در این قسمت می‌توان تعیین کرد که چه کسانی به الگوها دسترسی داشته باشند.
- المنت‌ها: از این بخش کنترل دسترسی کاربران به محتوای المان‌ها را می‌توان مشخص کرد.
- سازنده شبکه بندی: چنانچه می‌خواهید امکان دسترسی به عنصر شبکه‌ساز وجود داشته باشد این گزینه را فعال کنید.
- پیش تنظیمات المان: هر کدام از عناصر تنظیماتی دارند که با کمک این گزینه می‌توانید برای افراد صاحب دسترسی در سایت آنها را فعال یا غیرفعال کنید.
- Drag and Drop: هر کدام از المان‌های موجود قابلیت درگ و دراپ (کشیدن و رها کردن) دارند، در صورت تمایل می‌توانید آنها را فعال یا غیرفعال کنید.
تنظیمات دیگر نقش‌ها به همین ترتیب خواهند بود.
تنظیمات طراحی
افزونه Visual Composer به طور پیشفرض از تم خاکستری روشن برای طراحی المان‌ها استفاده می‌کند. در این سربرگ می‌توانید با فعالسازی گزینه “استفاده از تنظیمات سفارشی طراحی” رنگ و ظاهر المان‌های محتوای ویژوال کامپوزر را بنا به سلیقه خود سفارشی سازی کنید. در این قسمت علاوه بر تنظیم رنگ‌بندی‌های هر بخش می‌توانید عرض جداول، فاصله پیشفرض افقی و عمودی بین المان‌ها و عرض صفحات موبایل را نیز تنظیم کنید، پس از انجام تغییرات بر روی ذخیره تغییرات کلیک نمایید.
Css سفارشی
این سربرگ امکان افزودن کدهای Css سفارشی را جهت ایجاد تغییراتی در افزونه Visual Composer بدون نیاز به ویرایش فایل برای شما فراهم می‌کند.
قرار دهنده کد کوتاه
گر افزونه‌هایی دارید که با ویژوال کامپوزر سازگار نیستند و امکان استفاده از آنها را ندارید با کمک این صفحه ساز قدرتمند می‌توانید آنها را در صفحات خود نمایش دهید. برای این کار لازم است افزونه موردنظر خود ار نصب و شورت کد مربوط به آن را کپی و در این قسمت Paste نمایید.
سازنده شبکه‌بندی
شما می‌توانید با کمک این قسمت، بخش‌های شبکه‌ای را بصورت مجزا و خارج از محیط اصلی ویرایشگر بسازید و بعدها در صورت نیاز از آن استفاده کنید، همچنین هر شخص دیگری که دسترسی به این بخش را داشته باشد می‌تواند از آن استفاده کند.
ساخت صفحات گرافیکی در افزونه Visual Composer
در ابتدا برای شروع لازم است از قسمت برگه ها در وردپرس، افزودن برگه جدید را انتخاب کنید. پس از باز شدن صفحه ویرایشگر مطابق تصویر زیر در قسمت بالای صفحه بر روی دکمه آبی رنگی که”ویژوال کامپوزر” نام دارد کلیک کنید.
در صفحه بعد دو گزینه مشاهده خواهید کرد که در حالت Frontend Editor علاوه بر ایجاد تغییرات می‌توانید همزمان صفحه خود و تغییرات ایجاد شده را بصورت زنده مشاهده کنید و حالت ویرایشگر پیشرفته که دارای عناصر ویژوال کامپوزر برای ساخت صفحات گرافیکی به کار می‌رود. دکمه “ویرایشگر پیشرفته” را انتخاب کنید.
پس از انتخاب حالت ویرایشگر پیشرفته مطابق شکل زیر سه گزینه‌ی افزودن المان، اضافه کردن الگو و اضافه کردن بلاک متن برای شما نمایان می‌شود.
افزودن المان جدید در ویژوال کامپوزر
با کلیک روی گزینه افزودن المان، صفحه‌ای مانند تصویر زیر نمایش داده خواهد شد که دارای المان‌ها و امکانات بسیاری می‌باشد. در سربرگ صفحه آن دسته‌های مختلفی را مشاهده می‌کنید که شامل همه المان‌ها، المان‌های مربوط به محتوا، شبکه‌های اجتماعی، ساختار، ابزارک‌های وردپرس، ووکامرس (در صورت استفاده از ووکامرس) و منسوخ شده می‌باشد. با کلیک بر روی هر کدام از المان‌ها می‌توانید آنها را به صفحه خود اضافه و براساس نیازهای خود اطلاعات لازم را تکمیل کنید.
هر المانی که قصد دارید به صفحه خود اضافه کنید بهتر است یک ردیف جداگانه به آن اختصاص دهید. این ردیف‌ها باعث ایجاد نظم و فاصله منطقی در صفحه می‌شوند. در مرحله اول ایجاد یک صفحه می‌بایست از بخش افزودن المان، المان “ردیف” را انتخاب کنید.
پس از انتخاب المان ردیف، به صورت زیر به صفحه ویرایشگر شما افزوده خواهد شد که با استفاده از گزینه‌های موجود در آن می‌توانید نسبت به اعمال تغییرات و شخصی سازی ردیف خود اقدام نمائید.
- قابلیت کشیدن و رها کردن ردیف برای جابجایی و مرتب‌سازی در صفحه
- افزودن ستون به ردیف
- تغییر اندازه ستون‌ها
- ویرایش ستون
- حذف ستون
- افزودن المان دلخواه به ردیف
- کوچک کردن ردیف
- ویرایش ردیف
- کپی کردن ردیف
- حذف ردیف
به عنوان مثال قصد دارم با کمک دکمه شماره 3 که مربوط به تغییر اندازه ستون‌ها بود ردیف خود را به دو ستون مساوی تقسیم کنم، در یک بخش المان بلاک متن را قرار می‌دهم و با ویرایش بلاک متن می‌توانم متن موردنظر خود را وارد کنم. بخش دوم را مانند بخش قبل از قسمت افزودن المان‌ها، تصویر تکی را انتخاب و تصویر دلخواه خود را آپلود می‌کنم. تا اینجای کار مطابق تصویر زیر خواهد بود.
بر روی ذخیره تغییرات یا پیش نمایش کلیک کنید تا بتوانید نتیجه کار را مشاهده کنید.
به راحتی می‌توانید با کمی صبر و تامل المان‌های موجود در ویژوال کامپوزر را امتحان کنید و از امکانات جذاب آن بهره ببرید و صفحات زیبا بسازید.
اضافه کردن الگو
گاهی اوقات نیاز دارید برای صرفه جویی در زمان صفحاتی را که طراحی می‌کنید بتوانید مجددا از ساختار آن در دیگر صفحات استفاده کنید، یکی دیگر از قابلیت‌های جالبی که افزونه Visual Composer دارد امکان ذخیره کردن یک صفحه به عنوان الگو می‌باشد. برای این کار لازم است صفحه‌ای که قبلا طراحی کرده‌اید را باز نموده بر روی دکمه “الگوها” کلیک کنید.
پس از انتخاب دکمه الگوها صفحه‌ای مانند تصویر زیر نمایش داده خواهد شد، که در قسمت نام قالب می‌بایست نام الگو خود را به دلخواه وارد کرده و سپس بر روی ذخیره الگو کلیک کنید.
اینک برای استفاده از این الگو در یک صفحه دیگر، از قسمت برگه‌ها، یک برگه جدید ایجاد کرده و با مراجعه مجدد به بخش الگوها، الگوی ذخیره شده را به صفحه اضافه نمایید.
دیدگاهتان را بنویسید