آموزش کار با ویژوال کامپوزر - ساخت صفحه در Visual Composer

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

اگر شما می خواهید وب سایت خود را تغییر دهیددرصورتی که شما یک آماتور کامل هستید، نمی توانید حتی با WordPress کار کنید، زیرا تغییرات تم نیاز به درجه خاصی از مهارت در HTML، CSS، PHP و ..دارد. اما حتی اگر شما یک کدور حرفه ای هستید، ممکن است چند ساعت دیگر را برای تغییرات مورد نظر خود بگذارید.

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

بنابراین با این پیش زمینه، اجازه دهید شما را با برخی از ویژگی های اصلی ویژوال کامپوزر، و چگونگی تنظیم آن آشنا کنیم.

ویژگی های اصلی

Visual Composer توسط WP Bakery طراحی شده است. شما از این لینک میتوانید آنرا دانلود نمایید.

صفجه ساز آنلاین و پس زمینه

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

سازگاری تم جهانی

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

طرح بندی بسیار قابل برنامه ریزی

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

بیش از 40 المنت طراحی آماده استفاده

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

المنت های کاملا واکنشگرا

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

توسعه دهنده دوستانه

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

همانطور که قبلا ذکر شد، Visual Composer یک پلاگین پرداخت می باشد. بنابراین، ابتدا باید آن را خریداری کنید و سپس آن را به سایت WordPress خود آپلود کنید.

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

گام 2
در اینجا می توانید برخی از تنظیمات اصلی پلاگین را تنظیم کنید.

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

استفاده از VC در صفحات و پست ها

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

دو زبانه که در بالای ویرایشگر متن ظاهر می شود عبارتند از Backend Editor و fronted editor. اینها گزینه هایی هستند که این پلاگین را برای لذت استفاده می کنند. از اینجا میتوانید هر ساختار صفحه ای را که میخواهید ایجاد کنید. بیایید با Backend Editor شروع کنیم.

ویرایشگر Backend

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

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

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

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

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

مرحله 5
ویژوال کامپوزر همچنین به شما اجازه می دهد تا CSS سفارشی برای صفحات و پست های خاص اضافه کنید. اثرات این CSS سفارشی فقط به آن صفحه خاص یا پست محدود می شود.

ویژوال کامپوزر همچنین از چند پلاگین مشهور وردپرس مانند فرم تماس 7، لایر اسلایدر، رولوشن اسلایدر و Gravity Forms پشتیبانی می کند. اگر هر کدام از این پلاگین ها نصب شده باشند، به طور خودکار به جعبه افزودن اضافه می شوند. هنگامی که شما هر یک از آنها را از لیست عناصر انتخاب می کنید، بدون نیاز به افزودن کد کوتاه، به صفحه شما مستقیما وارد می شود. ویرایشگر Backend به شما انعطاف پذیری و گزینه های بسیار زیادی می دهد که شما می توانید هر نوع طراحی را حتی اگر کاربر آماتور هستید ایجاد کنید.

ویرایشگر ظاهر Frontend Editor

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

مرحله 1
با شروع از سمت چپ، می توانید عناصر جدید را با کلیک روی علامت + اضافه کنید و طرح ستون را با دکمه ستون کنار آن ویرایش کنید.

گام 2
شما همچنین می توانید ردیف یا ستون جدیدی از علامت + را در محتوای صفحه اضافه کنید.

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

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

نتیجه 

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