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

visual composer در وردپرس

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

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

چه بخش‌هایی را در این مقاله معرفی کرده و آموزش می‌دهیم؟

ما در این مطلب همه قسمت‌های 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 در وردپرس، چند آیکون می بینید. آیکونی که بصورت چند خط است به شما امکان تعریف چند ستونه کردن این ردیف را می‌دهد.

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

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

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

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

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