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

آموزش افزونه صفحه ساز ویژوال کامپوزر

آموزش کامل افزونه صفحه ساز ویژوال کامپوزر

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

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

***** بروزرسانی : در پایان این مقاله ویدیوی آموزشی ویژوال کامپوزر اضافه شد. *****

افزونه ویژوال کامپوزر Visual Composer

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

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

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

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

الگو پیش فرض برای انواع نوشته (برگه ها و نوشته ها طبق الگو طراحی شده در ویژوال کامپوزر)

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

میتوانید CSS های دلخواه به ویژوال کامپوزر اضافه کنید.

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

 

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

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

صفحه ساز ویژوال کامپوزر - آکادمی انار

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

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

همانطور که مشاهده میکنید برگه شما به شکل بالا تغییر میکنه که میتوانید روی گزینه افزودن المان کلیک کنید تا پنجره زیر برای شما باز شود.

ساخت المان جدید در ویژال کامپوزر

در پنجره جدید که مربوط به انتخاب المان جدید است، ابتدا باید روی المان (ردیف) کلیک کنیم تا یک ردیف بسازیم پس مانند تصویر زیر روی گزینه ساخت ردیف جدید کلیک میکنیم:

ساخت ردیف ویژوال کامپوزر - آکادمی انار

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

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

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

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

1- بخش مرزبندی شده  شماره یک داره ردیف که در مرحله قبل ساختیم رو نشون میده…

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

3- از بخش شماره سه میتوانید ردیفی که ساختید را بخش بندی کنید، به راحتی هر چه تمام تر… کافی است روی آن ماوس را ببرید تا انواع بخش بندی را به شما نشان دهد، سپس یک کدام را میتوانید انتخاب کنید.

4- در بخش شماره چهار ، علامت جمع را میبینیم که اینجا با کلیک روی آن دقیقا بعد از ردیف ساخته شده شما یک ردیف دیگر ایجاد میکند.

5- از این بخش میتوانید المان های مدنظر خود را به ردیف ساخته شده اضافه کنید.

6- ویرایش و حذف ردیف با این دو آیکون انجام میشود.

7- در بخش شماره هفت 4 تا آیکون برای حذف ، کپی ، ویرایش و جمع کردن میتوانید استفاده کنید. از آیکون آخر میتوانید ردیف را پنهان و جمع کنید تا هنگام طراحی تمرکز بیشتری داشته باشید.

8- از بخش هشتم هم میتوانید خارج از ردیفی که ساختید یک المان یا ردیف جدید به کمک این آیکون اضافه کنید.

ساخت المان ویژوال کامپوزر

به تصویر بالا نگاه کنید. (شاید در نگاه اول پیچیده به نظرتان برسد)

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

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

 

المان های جدید بسازید

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

ساخت ردیف ویژوال کامپوزر - آکادمی انار

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

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

 

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

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

 

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

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

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

امیدوارم که همیشه موفق و سربلند باشید…

آکادمی انار

, ,
نوشتهٔ پیشین
آمار بازدید وردپرس
نوشتهٔ بعدی
چگونه به اینستاگرام ادمین اضافه کنیم؟

این مطالب نیز به شما پیشنهاد میشود…

46 دیدگاه. ارسال دیدگاه جدید

  • خیلی آموزش خوبی بود
    دستتون درد نکنه

    پاسخ
  • فاطمه هادی پور
    در 4 مرداد 1398 12:16 ب.ظ

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 4 مرداد 1398 12:18 ب.ظ

      سلام فاطمه عزیز:
      نظر لطف شماست، برای ما مهمه که بهترین ها رو برای شما آماده کنیم 🙂
      موفق باشید

      پاسخ
  • دمتون گرم ویدیو عالی بود

    پاسخ
  • چقدر گشتم تا اینو یاد بگیرم
    دم شما گرم بابا

    پاسخ
  • بهترین وب سایت آموزش وردپرس
    فقط آموزش های شما رو باز میکنم
    دمتون گرم

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 28 مهر 1398 2:19 ب.ظ

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

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 1 آبان 1398 1:54 ب.ظ

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

      پاسخ
  • سلام خیییلییی ممنون آموزش خیلی خوبی بود

    پاسخ
  • یه سوال دارم – ممنون میشم راهنمایی بفرمایید –
    آیا میشه باکامپوزر یک قالب ساخت که بقیه برگه ها بتونن ازین قالب استفاده بکنن – یعنی وقتی یک برگه جدید ساخته میشه این قالب در قسمت ” خصوصیات برگه > انتخاب قالب ” ظاهر بشه ؟

    پاسخ
    • تیم محتوا - آکادمی انار
      در 24 آذر 1398 12:51 ب.ظ

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

      پاسخ
  • در راستای سوال قبلیم یه مشکل هم در درک ارتباط صفحه سازها با پایگاه داده دارم – برای مثال یک فرم تماس با کامپوزر یا المنتور ساخته میشه – وقتی روی دکمه ارسال زده میشه، اطلاعات فرم به کجا ارسال میشه ؟
    یعنی المانهای صفحه ساز از قبل روی پایگاه داده مچ شده یا باید برای پویا سازی فرم تماس به صورتی دستی اقدام بشه؟

    پاسخ
    • تیم محتوا - آکادمی انار
      در 24 آذر 1398 12:52 ب.ظ

      توجه داشته باشید افزونه های جانبی ربطی به ویژوال کامپوزر نداره. ویژوال فقط شورت کد آنها را به نمایش میگذاره

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 29 بهمن 1398 8:40 ق.ظ

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

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 4 فروردین 1399 11:27 ق.ظ

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

      پاسخ
  • با عرض سلام میشه با ویژال کامپسر هدر سایت هم ساخت ؟

    پاسخ
  • سلام من میخوام یه اسلایدر درست کنم که نظرات مشتریان رو باهاش نشون بدم میخواستم ببینم با ویژوال کامپوزر میشه؟

    پاسخ
  • سلام چرا دکمه هایی که با ویژوال کامپوزر اورده شده ، بعد از تغییر قالب به شکل کد میان؟

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

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 29 اردیبهشت 1399 5:13 ب.ظ

      سلام آموزش را مشاهده کنید المان های زیادی در ویژوال وجود دارد، همچنین از افزونه Add On Ultimate هم میتونید المان های بیشتری به این افزونه اضافه کنید.

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

    پاسخ
  • سلام ممنون از اموزش های‌عالی تون
    من ی سوال داشتم، وقتی با ویژوال برگه میسازم توی پیش نمایش کاملا صحیح نشون میده اما وقتی سایت و باز میکنم چیزهایی که ساختم نشون نمیده، دلیلش چیه؟

    پاسخ
    • تیم محتوا - آکادمی انار
      در 29 مرداد 1399 7:19 ب.ظ

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

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 9 شهریور 1399 6:36 ب.ظ

      سلام محتویات المان ها را خالی نگذارید تنظیمات را مجدد انجام دهید و سپس ذخیره کنید.

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

    پاسخ
    • امیرحسین فخاری
      در 22 دی 1399 2:39 ب.ظ

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

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

    پاسخ
    • تیم محتوا - آکادمی انار
      در 11 اردیبهشت 1400 4:05 ب.ظ

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

      پاسخ
    • سلام مشکل اینه که ستون های من در یک ردیف قرار نمیگیرن
      ستون های وبلاگ با اضافه کردن عکس یک ستون بالا یکی پایین تر قرار میگیره و هم تراز نیست
      یه جا شنیدم که میگفت تو نسخه فارسی ویژوال کامپوزر این مدلی میشه و نمیدونم چجوری باید رفع شه

      پاسخ
      • تیم محتوا - آکادمی انار
        در 18 اردیبهشت 1400 9:24 ق.ظ

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

        پاسخ
  • سلام و احترام
    خسته نباشیدو ممنونم از اموزش خوبتون

    برای ریسپانسیو کردن با کامپوزر هم اموزش قرار بدین خیلی عالیه
    سپاسگزارم

    پاسخ
    • تیم محتوا - آکادمی انار
      در 27 اردیبهشت 1400 4:34 ب.ظ

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

      پاسخ

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

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

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

فهرست