هاست ایران میزبان فا
آموزش های وردپرس

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

امیدوارم که این آموزش هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده از اون تونسته باشید با نحوه کار با صفحه ساز ویژوال کامپوزر آشنا شده و به خوبی صفحاتی که مد نظر شما هست رو در وردپرس طراحی و پیاده سازی کنید. در صورتی که در رابطه با آموزش ویژوال کامپوزر سوال یا مشکلی داشتید در بخش دیدگاه‌ها اعلام کنید تا در کوتاه‌ترین زمان ممکن پاسخگوی شما باشم.
آموزش کامل کار با ویژوال کامپوزر
4.3 (85.33%) 15
برچسب ها
هاست ایران میزبان فا

علی یزدان پرست

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

نوشته های مشابه

‫۲۸ نظرها

  1. با سلام.امیدوارم من اشتباه کرده باشم.امکان دانلود مطالب آموزشی یا فیلم ها وجود نداره؟

    1. سلام، هر کدوم از مقالات که دارای ویدئو هستن امکان دانلود از طریق لینک مستقیم، یوتوب و آپارات رو دارند. برای آموزش‌هایی که هنوز ویدئو ساخته نشده هم میتونید روی دکمه چاپ که در انتهای هر مقاله قرار داره با فرمت PDF دریافت کنید.

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

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

      1. اگر اگر عنوان کوتاه هم انتخاب کنم باز مقداری از متن پیدا نیس
        از کدوم قسمت میتونم عوض کنم یا اگر مقاله ای دارید برای تغییر کدها و دسترسی بهشون لینکشو بدین ک بخونم و اموزششو بلد بشم.
        ممنونم

        1. تغییر این بخش نیاز به دانش کدنویسی CSS داره که باید از طریق فایل style.css یا rtl.css این کار رو انجام بدین. اگر آشنایی ندارید، بهتره با یک کدنویس در ارتباط باشید که براتون انجامش بدن.

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

  4. سلام. من میخوام یه صفحه اصلی برای سایتم درست کنم. برای نمایش آخرین مطالب سایتم از کدوم قسمت باید اقدام کنم؟؟؟
    در ضمن من این گزینه News Ticker رو هر چی سرچ کردم ندیدمش
    لطفا راهنماییم کنید من قالب زفایر رو خریدم اما هنوز نتونستم هیچ استفاده ای ازش بکنم

    1. سلام، باید المانی که برای نمایش نوشته‌ها هست رو انتخاب کنید.
      News Ticker باید قابلیتش توی قالب شما وجود داشته باشه که بتونید استفاده کنید.
      از پشتیبانی قالب کمک بگیرید.

  5. سلام من میخواهم بتونم با ویژوال کامپوسر جدول قیمت اضافه بکنم، آیا ویژوال کامپوسر همچین اِلِمانی دارد؟

  6. سلام خسته نباشید این افزونه در سیستم من انگلیسیه چجوری میشه فارسیش کرد ؟

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

  8. سلام سوالی دارم چرا وقتی من این افزونه رو از مخزن ورد پرس نصب میکنم این پیغامو میده
    please install
    visual composer to use mega addons

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

  10. سلام.وقتتون بخیر
    من میخوام در صفحه خدمات،خدماتمو لیست کنم.مثل این
    .سرویس1 .سرویس
    .سرویس2 .سرویس
    . .
    . .

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

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

    1. سلام و احترام؛
      افزونه المنتور المان فضای خالی رو هم ارائه کرده چون یکی از مهم ترین المان ها در طراحی صفحات هستش. برای درج این مورد روی دکمه افزودن المان کلیک کنید و به سربرگ محتوا مراجعه کنید. پایین صفحه گزینه افزودن فضای خالی موجود هستش. مطابق تصویر زیر:
      https://mizbanfa.net/blog/wp-content/uploads/2018/07/add-content-area-visual-composer.png

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

پاسخی بگذارید

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

بستن