×

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

سلام همراهان همیشگی رایا وردپرس

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

برخی از امکانات افزونه ی Visual composer

  • محیط گرافیکی بسیار حرفه ای و زیبایی دارد
  • برگه هایی کاملا ریسپانسیو ایجاد می کند
  • از هر قالب وردپرسی پشتیبانی می کند
  •  المان های مختلفی برای کاربردهای مختلف دارد
  • از افزونه ی Yoast SEO پشتیبانی می کند
  • می توانید گالری عکس و پخش ویدئو درست کنید

 

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

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

راه اندازی افزونه ی Visual composer

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

ابتدا شما در پنل وردپرس به بخش برگه ها – > افزودن برگه بروید.

نمایش دو دکمه ی Frontend editor و backend editor در ویرایشگر برگه

در ویرایشگر برگه دو دکمه ی آبی رنگ Frontend editor و backend editor را مشاهده می کنید.

دکمه ی  Frontend editor برای ویرایشگر سمت کاربر می باشد و دکمه ی backend editor برای ویرایشگر سمت ادمین است.

معرفی backend editor 

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

معرفی backend editor در ویرایشگر برگه

 

افزودن پوسته

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

افزودن پوسته در بخش backend editor

افزودن بلاک نوشته

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

افزودن بلاک نوشته در بخش backend editor

افزودن المان

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

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

ایجاد یک برگه با صفحه ساز ویژوال کامپوزر

اکنون پیش نمایش برگه ای که ایجاد کردیم را در سایت مشاهده کنید.

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

معرفی اجزای مختلف یک بلاک در ویژوال کامپوزر

معرفی اجزای مختلف یک بلاک در ویژوال کامپوزر

یک : برای جابجایی یک ردیف از المان ها ، از این گزینه استفاده می‌شود. کافیست کلیک کنید و موس را جابجا کنید.

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

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

چهار : برای حذف کردن المان یا عنصر اضافه شده به ردیف ، از این گزینه استفاده می‌شود.

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

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

هفت : برای ویرایش کردن کلی بلاک یا ردیف، از این گزینه استفاده می‌شود. شما میتوانید در قسمت تغییراتی در بکگراند و همچنین زیبایی آن ایجاد کنید.

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

نه : برای حذف کردن کلی ردیف ، از این گزینه استفاده کنید.

ده : زمانی که نشانگر موس را بر روی المان مورد نظرتان قرار می‌دهید، گزینه های ویرایش ، کپی و حذف به شما نمایش داده میشود.

جمع بندی!

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

مطالعه بیشتر

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

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