نحوه کار با ویژوال کامپوزر

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

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

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

visual composer یک افزونه غیر رایگان می باشد که باید آن را تهیه و در افزونه های ورد پرس خود بارگذاری و نصب نمایید.

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

در این مرحله جعبه ای از ابزار برای شما نمایش داده می شود.

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

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

در ابتدا باید یک ردیف ایجاد بکنیم. در کل برای طراحی و چیدمان ابزار ها در صفحه نیاز به  اضافه کردن ردیف داریم.

روی آیکون ردیف کلیک می کنیم. داخل صفحه یک ردیف ایجاد می شود.

هر ردیف شامل یکسری دکمه ها و تنظیمات ثابت می باشد. در سمت چپ ردیف سه دکمه تعبیه شده است

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

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

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

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

بر روی “گالری تصاویر” کلیک کنید. یک گالری تصویر در ردیف نمایش داده می شود. یک نوار سبز رنگ که شامل 4 دکمه است،  در وسط ردیف با حرکت موس قرار می گیرد. روی دکمه ویرایش گالری تصویر کلیک نمایید.

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

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

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

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

بار دیگر از نوار ابزار “تصویر تکی” را انتخاب می کنیم. تصویر تکی در کنار بلاک متن قرار می گیرد.

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

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

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

برا ی این کار مجدد باید ردیفی جدید ایجاد کنید. سپس از نوار ابزار، “نوار پیشرفت” را انتخاب کنید.

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

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

ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود

عضویت رایگان

[member]

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

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

هم چنین برای اضافه کردن بخش جدید  می توانید از دکمه ی “+” در کنار دکمه ی ویرایش استفاده کنید.

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

خروجی ابزار آکاردیون تصویری مشابه تصویر بالا می باشد(البته با تنظیمات خاص شما!)

به این ترتیب شما می توانید با استفاده از ابزارهای متفاوت و چینش های متفاوت در visual composer، تعداد کثیری  صفحه ی زیبا و حرفه ایی، طراحی کنید.

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

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

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

شاد باشید

[/member]