آموزش ویژوال کامپوزر وردپرس | نصب و کار با افزونه Visual Composer

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

افزونه Visual Composer چیست؟

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

بیشتر بخوانید: آموزش نصب و کار با افزونه Rank Math (رنک مث) » خرید افزونه rank math pro

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

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

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

بیشتر بخوانید: آموزش تصویری رفع مشکل باز نشدن عکس های شاخص سایت

ویژگی های کلی افزونه Visual Composer

1- مرکز ویژوال کامپوزر

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

2- گزینه های طراحی صفحه

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

3- ابزار تجزیه و تحلیل محتوا

ابزار Visual Composer Insights محتوای شما را تجزیه و تحلیل و سپس بینش هوشمندی را در اختیار شما قرار می دهد که به طراحی وب سایت های بهتر در حین ساخت کمک می کند.

بیشتر بخوانید: بهترین افزونه های تماس با ما وردپرس | 9 پلاگین ارتباط با ما پیشرفته

4- طراحی ریسپانسیو

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

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

سایر ویژگی ها و امکانات افزونه visual composer

– مدیریت المان ها

– طراحی صفحات با کشیدن و رها کردن المان ها

– سازگاری با تمامی نسخه های وردپرس

– دارای بیش از 40 عنصر جهت طراحی صفحات

– طراحی تعاملی و ریسپانسیو در تمامی دستگاه های مختلف

– ویرایشگر در صفحه برگه

– سازگاری با افزونه های چندزبانه کردن سایت

– طراحی بر پایه سئو

– ایجاد فیلتر تصویر

– ایجاد فیلتر ویدیو

– کد نویسی شده بصورت html5 و سی اس اس 3

– پشتیبانی از ووکامرس

– تمام صفحه کردن وب سایت

– نمایش گالری تصاویر

– درج نقشه گوگل

– درج انواع شبکه های اجتماعی

– طراحی کاربر پسند

– رابط کاربری بسیار ساده

– طراحی صفحات بدون نیاز به دانش کدنویسی

– قابلیت پیش نمایش سریع

– ایجاد اسلایدرهای جذاب

– و بسیاری از ویژگی های جذاب دیگر

در ادامه به آموزش افزونه visual composer می پردازیم.

بیشتر بخوانید: هاتجر (Hotjar) چیست؟ | آموزش کار با Hotjar

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

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

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

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

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

 بعد از اتمام فرایند نصب، روی “فعالسازی افزونه” کلیک نمائید. بعد ازآنکه افزونه با موفقیت فعال شود، بخشی به نام “ویژوال کامپوزر” در پیشخوان وردپرس شما ظاهر می شود که می توانید از آن بخش تنظیمات مربوط به افزونه را پیکربندی نمائید.

بیشتر بخوانید: آموزش کار با افزونه XML Sitemaps + نصب و تنظیمات آن

آموزش افزونه ویژوال کامپوزر وردپرس (تنظیمات)

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

بخش تنظیمات عمومی:

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

زیرمجموعه های فونت های گوگل: از این بخش می توانید یک فونت دلخواه برای وردپرس خود انتخاب نمائید. ویژوال کامپوزر در حالت پیش فرض روی لاتین قرار دارد.

Disable Gutenberg Editor: می توانید ویرایشگر گوتنبرگ را فعال یا غیر فعال نمائید.

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

نقش مدیر:

در این قسمت با لیست کشویی از تنظیمات از جمله: مدیر کل، ویرایشگر، نویسنده، مشارکت کننده، مدیریت فروشگاه، مدیریت سئو و ویرایشگر سئو روبه رو می شوید. که می توانید با کلیک روی هر کدام از آنها وارد بهش تنظیمات مربوطه شوید.

بیشتر بخوانید: افزونه المنتور (Elementor) یا ویژوال کامپوزر (Visual composer)؟

تنظیمات طراحی:

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

Css سفارشی:

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

بیشتر بخوانید: معرفی بهترین ادان های ویژوال کامپوزر که بسیار کمک کننده هستند!

آموزش طراحی سایت با ویژوال کامپوزر

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

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

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

بعد از کلیک روی دکمه “افزودن المان” با تصویری همانند زیر مواجه می شوید که می توانید با کلیک روی هر بخش محتوای خود را به دلخواه طراحی نمائید.

بیشتر بخوانید: افزودنی Ultimate Addons For Wpbakery | افزودنی صفحه ساز وردپرس، ویژوال کامپوزر

حال برای استفاده از هریک از این المان ها، ابتدا شما باید یک ردیف با تعداد ستون های دلخواه ایجاد نمائید و هر یک از المان ها را درون هر ردیف قرار دهید. به عنوان مثال ما قرار است یک “دکمه” ایجاد کنیم، بنابراین باید مراحل زیر را دنبال کنیم:

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

بعد از کلیک روی “ردیف” با صفحه ای همانند زیر مواجه می شوید که می توانید تنظیمات مربوط به ردیف های خود را انجام دهید.

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

1- می توانید با نگه داشتن موس روی آن، موقعیت ردیف های خود را تغییر دهید.

2- می توانید تعداد ستون های ردیف را سفارشی کنید. می توانید ردیف را روی یک ستون قرار دهید و یا دو ستونه و…

3- با کلیک روی آن می توانید یک ردیف در بالای ردیف ایجاد شده، بسازید.

4- با کلیک روی این گزینه، ردیف را ببندید.

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

6- با کلیک روی این گزینه می توانید ردیف را در صفحه خود مخفی کنید.

7- با کلیک روی این گزینه، می توانید تنظیمات ستون را ویرایش نمائید.به عنوان مثال می توانید کشش ردیف را تعیین کنید، می توانید فاصله ستون ها را تنظیم نمائید و…

8- با کلیک روی این گزینه، از ردیف خود می توانید یک کپی ایجاد کنید.

9- می توانید ردیف ایجاد شده ی خود را حذف کنید.

10- با کلیک روی این گزینه، وارد المان های افزونه ویژوال کامپوزر می شوید تا یک المان دلخواه را به ردیف اضافه نمائید.

11- با کلیک روی این گزینه، یک ردیف دیگر ایجاد می کنید.

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

بیشتر بخوانید: افزودن استایل سفارشی به ویرایشگر ویژوال | چگونه به ویژوال ادیتور کد سفارشی بیافزاییم؟

سپس روی + کلیک کنید تا وارد المان ها شوید. بعد از میان المان های موجود، روی المان “دکمه” کلیک کنید.

سپس همانند تصویر زیر وارد تنظیمات مربوط به المان می شوید.

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

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

سوالات متداول

جمع بندی: آموزش پلاگین Visual Composer

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