خانه / آموزش وردپرس / آموزش کار با افزونه ویژوال کامپوزر visual composer

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

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

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

 

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

ظاهر گرافیکی و واکنش گرا

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

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

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

 

 

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

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

این افزونه خصوصیت بارز دیگری هم دارد که آن توانایی Drag & Drop است .

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

 

 

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

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

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

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

خود افزونه تنظیمات پیش فرضی دارد که برای مبتدیان نیازی به تغییر ندارد. توضیحاتی که در ادامه برای این بخش ها داده می شود صرفا برای آگاهی کاربران است.

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
آموزش کار با افزونه ویژوال کامپیوزر visual composer

 

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

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

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

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
قسمت نقش مدیر در افرونه ویژوال کامپوزر

 

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

  • دسترسی به تنظیمات برگه
  • استفاده از ویرایشگر پیشرفته
  • طراحی و استفاده از المان های مختلف
  • تنظیمات اولیه برای المان ها
  • قابلیت Drag & Drap  برای تغییرات در المان ها
  • استفاده از الگو
  • خاصیت شبکه بندی المان ها
  • استفاده از صفحه ساز برای پست تایپ ها
  • گزینه تنظیمات المان
  • و…

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
شورت کد در ویژوال

 

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

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

در قسمت قرار دهنده کد کوتاه روی دکمه نقشه کد کوتاه کلیک کنید. سپس نواری برای شما بر طبق تصویر بالا باز می شود که می توانید کد کوتاه مربوطه را در آن قرار دهید و سپس روی دکمه تجزیه کد کوتاه کلیک نمایید.

 

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

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

 

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

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
ویرایشگر پیشرفته

شروع ساخت صفحه در برگه وردپرس

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

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

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
افزودن المان

 

افزودن المان در صفحه

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

 

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
ردیف در افزونه ویژوال کامپوزر

مزیت استفاده از ردیف در صفحه ساز ویژوال 

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

 

ایجاد المان درون ردیف

ردیف از قسمت های مختلفی تشکیل شده در قسمت راست می توانید ویرایش لازم را انجام دهید.

در قسمت چپ هم نوعی از چیدمان ردیف وجود دارد که می تواند برای قرار دادن چند ردیف در کنار هم به صورت افقی کاربرد داشته باشد.

روی علامت + که در وسط ردیف قرار دارد کلیک کنید. وارد قسمت المان ها می شوید. از این قسمت المان دلخواه خود را می توانید انتخاب کنید. این کار را با روش Drag & Drop هم میتوانید انجام دهید.

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
تغییر المان ردیف

 

المان مربوطه را انتخاب کردیم ولی مشخصات و تنظیمات آن با چیزی که ما دوست داریم ، سازگار نیست ، حالا چیکار کنیم!؟

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
ایجاد تیکر جدید

 

برای اینکار روی علامت قلم در گوشه المان کلیک کنید تا وارد قسمت تنظیمات آن شوید.

معمولا المان ها دارای قسمت تنظیمات مشترکی هستند مگر اینکه دارای یکسری قسمت های ویژه باشند. هرگونه استایل بندی ، اضافه کردن رسانه (عکس ، فیلم ) ، تغییر رنگ ، تعداد کاراکتر ، اضافه کردن انیمیشن و… در این بخش می باشد.

بعد از انجام کلیه تنظیمات اختصاصی المان برای اضافه شدن آن به ردیف ، روی دکمه ذخیره تغییرات کلیک کنید.

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
تنظیمات تخصصی المان

 

در ادامه شما می توانید با جابه جایی در میان ردیف ها و المان ها ،اعمال ویرایش ، کپی و حذف کردن را انجام دهید.

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
کپی و تنظیمات یک المان

 

در اضافه کردن ردیف ها و المان ها هیچ محدودیتی وجود ندارد ولی مواظب زیاده روی در دیزاین باشید که نتیجه معکوس می دهد.

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

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

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
نمونه یک صفحه با ردیف ها و المان های مختلف | افزونه ویژوال کامپوزر

 

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

همانطور که دیدید می توانید با هر المان و خاصیتی صفحات را در اندازه های عرضی و طولی تغییر دهید.

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

 

 

آموزش کار با افزونه ویژوال کامپوزر visual composer | دانلود افزونه ویژوال کامپوزر visual composer
نمونه صفحه که با افزونه ویژوال کامپوزر ساخته شده است

 

 

خلاصه این مقاله :  آموزش کامل نصب و نحوه کار با افزونه ویژوال کامپیوزر  visual composer را به طور مفصل با توضیحات کافی برای دوستداران وردپرس و دنبال کنندگان اسنپ وردپرس قرار دادیم.

 

 

مطلب پیشنهادی

۵ تا از بهترین و محبوب ترین پلاگین های فرم ساز وردپرس

۵ تا از بهترین و محبوب ترین پلاگین های فرم ساز وردپرس (۲۰۱۹)

۵ تا از بهترین و محبوب ترین پلاگین های فرم ساز وردپرس (۲۰۱۹) به دنبال …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *