آموزش ویژوال کامپوزر در وردپرس

  1. خانه
  2. chevron_right
  3. وردپرس
  4. chevron_right
  5. آموزش وردپرس
  6. chevron_right
  7. آموزش افزونه های کاربردی وردپرس
  8. chevron_right
  9. آموزش ویژوال کامپوزر در وردپرس

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

اگر از قالب‌های آماده استفاده کرده باشید یا اینکه در فروشگاه‌هایی مثل تم فارست به دنبال قالب دلخواه خودتون بگردید حتما در توضیحات محصول مشاهده کرده اید که از صفحه ساز visual composer پشتیبانی میکند و صفحاتی هم که در این قالب ساخته و طراحی شده توسط این افزونه هست. افزونه ویژوال کامپوزر صفحه سازی است که با استفاده از خاصیت Drag & Drop میتوانید به راحتی هر محتوایی مثل نمایش مطالب، نمایش اسلایدر، نمایش باکس و… را به همراه انواع آیکون و تصویر بدون اینکه نیاز به کدنویسی داشته باشید طراحی کنید.

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

آموزش ویژوال کامپوزر در وردپرس

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

 

آموزش ویژوال کامپوزر در وردپرس

غیرفعالسازی المان های محتوای ریسپانسیو:

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

زیر مجموعه های فونت های گوگل:

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

الگو پیش فرض برای انواع نوشته :

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

آموزش ویژوال کامپوزر در وردپرس

با رفتن به تب منوی مدیر مشابه چیزی که در تصویر بالا می بینید می توانید دسترسی به بخش های مختلف افزونه صفحه ساز Visual Composer را بر اساس نقش کاربری در وردپرس شخصی سازی کنید. این دسترسی‌ها شامل موارد زیر هستند.

  • انتخاب امکان استفاده از صفحه ساز در انواع پست تایپ
  • فعال کردن امکان استفاده از ویرایشگر پیشرفته
  • امکان دسترسی به تنظیمات صفحه
  • امکان استفاده از گزینه‌های تنظیمات برای انواع المان
  • امکان استفاده از الگو
  • امکان استفاده و طراحی انواع المان
  • امکان استفاده از حالت شبکه بندی برای المان‌ها
  • امکان استفاده از تنظیمات پیشفرض برای هر المان
  • امکان استفاده از خاصیت کشیدن و رها کردن برای تغییر مکان المان یا افزودن یک المان
  • و…

آموزش ویژوال کامپوزر در وردپرس

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

مقالات پیشنهادی کاربران
وردپرس و دلیل محبوبیت آن بین طراحان سایت

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

آموزش ویژوال کامپوزر در وردپرس

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

آموزش ویژوال کامپوزر در وردپرس

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

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

آموزش ویژوال کامپوزر در وردپرس

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

آموزش ویژوال کامپوزر در وردپرس

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

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

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

آموزش ویژوال کامپوزر در وردپرس

برای هر المان تب‌هایی مثل عمومی، فیلتر، طراحی و… وجود دارد که با کلیک روی هر تب میتوانید به امکاناتی که در اختیار شما قرار میدهد دسترسی داشته باشید. این موارد شامل وارد کردن نام، انتخاب استایل، انتخاب تعداد مطالب برای نمایش، فیلتر کردن بر اساس نمایش به صورت دسته بندی یا برچسب، انتخاب نوع مرتب سازی و… می باشد. در نهایت روی دکمه ذخیره تغییرات کلیک کنید تا المان به ردیف اضافه شود.

آموزش ویژوال کامپوزر در وردپرس

بعد از اضافه شدن هر المان داخل ردیف میتوانید با کلیک روی آیکون‌هایی که وجود دارد عملیات جابجایی المان، ویرایش، کپی و حذف کردن را انجام دهید. حال به همین ترتیب میتوانید با کلیک روی آیکون + کلیک کرده و المان جدید اضافه کنید.

آموزش ویژوال کامپوزر در وردپرس

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

آموزش ویژوال کامپوزر در وردپرس

 

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

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست