افزونه visual composer قدرتی دارد که واقعا وصف نا‌پذیر است. فقط کافیست کار با آن را بلد باشید تا بتوانید بهترین صفحات گرافیکی و زیبا را با آن خلق کنید. البته باید این نکته را به شما بگویم که این صفحه‌ساز را بصورت تنها نیز می‌توانید دریافت کرده و برای قالب‌هایی که به شکل پیش‌فرض آن را ندارند، نصب کرده و استفاده کنید.
بخش‌هایی که در این مقاله معرفی آموزش داده می شود:
این بخش‌های آموزشی شامل موارد زیر است:
تنظیمات عمومی
نقش مدیر
قرار دهنده کد کوتاه
سازنده شبکه‌بندی
معرفی المان‌های ویژوال کامپوزر
افزودن المان‌ها در صفحه مورد نظر
هر کدام از قسمت‌های بالا شامل بخش‌های متعددی می‌شود که پیشنهاد می‌کنم دست از سایر کارها بردارید و یک فنجان قهوه یا چای در کنار دست خود بگذارید و با خیال راحت به مطالعه بپردازید.
تنظیمات عمومی
غیرفعالسازی المان های محتوای ریسپانسیو: با علامت زدن این گزینه می‌توانید این افزونه را برای دستگاه‌های هوشمند مانند موبایل غیرفعال کنید.
زیرمجموعه های فونت های گوگل: می‌توانید فونت مشخصی را برای المان‌های visual composer در وردپرس انتخاب کنید. گزینه پیش‌فرض روی latin است.
الگو پیش فرض برای انواع نوشته: این بخش به شما اجازه می‌دهد تا یکی از صفحات از قبل طراحی شده را به عنوان الگوی اصلی انتخاب کنید. البته اگر می‌خواهید!
همچنین دکمه ریست را می‌بینید. هر زمان که بخواهید با کلیک کردن روی این دکمه می‌توانید تنظیمات ویژوال کامپوزر را به حالت پیش‌فرض بازگردانید.
نقش مدیر
در این بخش فهرست‌های کشویی مختلفی وجود دارد که در هر کدام تنظیمات به خصوصی گنجانده شده است. با هم به بررسی هر بخش آن در visual composer در وردپرس می‌پردازیم.
مدیر کل
پست تایپ‌ها: با کمک این گزینه می‌توانید ویژوال کامپوزر را برای بخش‌های مورد نظر فعال کنید. مثلا فقط برای برگه‌ها
ویرایشگر پیشرفته: می‌توانید در این بخش ویرایشگر پیشرفته مربوط به visual composer را فعال کنید و همچنین بصورت کامل ویرایشگر کلاسیک را غیرفعال نمایید.
ویرایشگر زنده: با کمک این نوع از ویرایشگر می‌توان تغییراتی را که ایجاد می‌کنید در عین واحد مشاهده کنید.
تنظیمات صفحه: می‌توانید تنظیمات صفحه‌ای که ویرایشگر ویژوال کامپوزر در آن فعال است را فعال یا غیرفعال کنید.
گزینه های تنظیمات: اگر می‌خواهید این گزینه فعال یا غیرفعال شود، می‌توانید از این بخش آن را تعیین کنید.
الگوها: در این قسمت می‌توان تعیین کرد که چه کسانی به الگوها دسترسی داشته باشند.
المنت ها: دوست دارید چه کسانی به عناصر صفحه‌ساز visual composer در وردپرس دسترسی داشته باشند. از این بخش آن را مشخص کنید.
سازنده شبکه بندی: چنانچه می‌خواهید امکان دسترسی به عنصر شبکه‌ساز وجود داشته باشد می‌توانید این گزینه را فعال کنید.
پیش تنظیمات المان: عناصر هر کدام تنظیماتی دارند که با کمک این گزینه می‌توانید برای افراد صاحب دسترسی در سایت آن‌ها را فعال یا غیر فعال کنید.
Drag and Drop: المان‌های موجود قابلیت درگ و دراپ کردن (کشیدن و رها کردن) دارند. اگر می‌خواهید می‌توانید آن‌ها را فعال یا غیرفعال کنید.
ویرایشگر
همان‌طور که می‌بینید تمامی تنظیماتی که در بخش ادمین وجود داشت در این بخش نیز موجود است. سایر تب‌ها نیز به همین صورت هستند.
قرار دهنده کد کوتاه
اگر افزونه‌ای را نصب می‌کنید که مربوط به ویرایشگر است و شورت‌کدی دارد که می‌خواهید در المان‌های visual composer در وردپرس نمایش داده شود، می‌توانید شورت‌کدهای آن را در این بخش اضافه کنید.
سازنده شبکه‌بندی
شما می‌توانید با کمک این قسمت، بخش‌های شبکه‌ای را بصورت مجزا و خارج از محیط اصلی ویرایشگر بسازید و سپس در صورت نیاز آن را انتخاب کنید. همچنین هر شخصی که دسترسی به این بخش داشته باشد می‌تواند از آن استفاده کند.
حال وقت چیست؟ بله درست فکر می‌کنید، وقت آن است که به بخش ویرایشگر برویم و استفاده از visual composer در وردپرس را بررسی کنیم.
ویژوال کامپوزر در سمت برگه‌ها و نوشته‌ها
دکمه آبی رنگی در بالای ویرایشگر وردپرس ظاهر شده که مربوط به ویژوال کامپوزر است. در تصویر زیر آن را مشاهده می‌کنید:
همان‌طور که مشاهده می‌کنید دو دکمه آبی رنگ ویرایشگر پیشرفته و Frontend Editor را مشاهده می‌کنیم. هر کدام وضعیت ویرایشگر را به چه صورت تغییر می‌دهد؟ با هم ببینیم
ویرایشگر پیشرفته
همان‌طور که مشاهده می‌کنید ویرایشگر معمولی وردپرس به حالت ویرایشگر پیشرفته که دارای همان عناصر ویژوال کامپوزر برای ساخت صفحات گرافیکی است، تغییر حالت می‌دهد.
Frontend Editor
در این بخش شما در حین اینکه می‌توانید صفحه را بصورت زنده و سلامت ببینید، می‌توانید تغییرات خود را در آن پیاده‌سازی کنید. جالب است نه؟ خیلی امکان فوق‌العاده‌ایست.
معرفی المان‌های visual composer
visual composer در وردپرس دارای عناصر یا المان‌هایی است که به کمک آن می‌توانیم یک صفحه دلخواه طراحی کنیم. برای کار با این صفحه‌ساز سه بخش را باید در نظر بگیریم. افزودن المان، اضافه کردن الگو، اضافه کردن بلاک متن. برای افزودن آن‌ها باید اول با المان‌ها و کارایی هر کدام آشنا شویم.
با کلیک روی گزینه افزودن المان، صفحه‌ای مانند تصویر بالا برایتان باز می‌شود که دارای امکانات زیادی است. در سربرگ آن دسته‌ها را مشاهده می‌کنید که شامل همه المان‌ها، المان‌های مربوط به محتوا، شبکه‌های اجتماعی، ساختار، ابزارک‌های وردپرس، Custom shortcode، ووکامرس (در صورت استفاده از ووکامرس) و منسوخ شده است. روی هر کدام از المان‌ها کلیک کنید به صفحه اضافه شده و می‌توانید طبق نیازهای خود اطلاعاتی را در آن وارد کنید.
ساخت صفحه نمونه به کمک ویژوال کامپوزر
مثلا می‌خواهیم اول ردیفی را در ویرایشگر ایجاد کنیم باید به بخش افزودن المان‌ها رفته و روی گزینه “ردیف” کلیک کنیم تا اضافه شود.
هر المانی را که بخواهید در یک صفحه اضافه کنید بهتر است یک ردیف جداگانه برایش تعریف کنید. این ردیف‌ها باعث ایجاد فاصله منطقی در صفحه می‌شوند. با افزودن ردیف با تصویر زیر رو به رو می‌شوید:
در بالای ردیف ایجاد شده توسط visual composer در وردپرس، چند آیکون مشاهده می‌کنید. آیکونی که بصورت چند خط است به شما امکان تعریف چند ستونه کردن این ردیف را می‌دهد.
مثلا من تمایل دارم یک ردیف ۴ ستونه درست کنم که مربوط به اطلاعات آماری سایت باشد. پس در نتیجه روی گزینه ۴ ستونه کلیک می‌کنم و در نهایت به دنبال المانی برای این منظور می‌گردم.
رو علامت + هر بخش که کلیک کنیم می‌توانیم المان مورد نظر خود را به آن اضافه کنیم و سپس مشغول تکمیل اطلاعات آن باشیم.
تداخل ویرایشگر گوتنبرگ با ویژوال کامپوزر
پس از انتشار وردپرس ۵ ، با وجود گوتنبرگ، صفحه‌ساز ویژوال کامپوزر برای بعضی کاربران دچار ناسازگاری و مشکل شد. وردپرس خود را به نسخه ۵٫۰٫۲ به بالا ارتقا دهید. در این نسخه مشکل ناسازگاری گوتنبرگ با این افزونه و بسیاری افزونه‌های دیگر برطرف شده است.
اگر قالبی که استفاده می‌کنید این ویرایشگر را ندارد و تمایل دارید از آن استفاده کنید می‌توانید از تم آف دریافت کنید.
دریافت نسخه فارسی ویرایشگر ویژوال کامپوزر