آموزش صفر تا ۱۰۰ کار با visual composer در وردپرس + آموزش ویدئویی

visual composer در وردپرس

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

visual composer در وردپرس

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

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

چه بخش‌هایی را در این مقاله معرفی کرده و آموزش می‌دهیم؟

visual composer-  visual composer در وردپرس

ما سعی کردیم در این آموزش تمامی قسمت‌های visual composer در وردپرس را بررسی کرده و به آن بپردازیم. این بخش‌های آموزشی شامل موارد زیر است:

  • تنظیمات عمومی
  • نقش مدیر
  • قرار دهنده کد کوتاه
  • سازنده شبکه‌بندی
  • معرفی المان‌های ویژوال کامپوزر
  • افزودن المان‌ها در صفحه مورد نظر

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

تنظیمات عمومی

general setting- visual composer در وردپرس

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

همچنین دکمه ریست را می‌بینید. هر زمان که بخواهید با کلیک کردن روی این دکمه می‌توانید تنظیمات ویژوال کامپوزر را به حالت پیش‌فرض بازگردانید.

نقش مدیر

manager role- visual composer در وردپرس

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

مدیر کل

administrator- visual composer در وردپرس

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

گزینه های تنظیمات: اگر می‌خواهید این گزینه فعال یا غیرفعال شود، می‌توانید از این بخش آن را تعیین کنید.
الگوها: در این قسمت می‌توان تعیین کرد که چه کسانی به الگوها دسترسی داشته باشند.
المنت ها: دوست دارید چه کسانی به عناصر صفحه‌ساز visual composer در وردپرس دسترسی داشته باشند. از این بخش آن را مشخص کنید.
سازنده شبکه بندی: چنانچه می‌خواهید امکان دسترسی به عنصر شبکه‌ساز وجود داشته باشد می‌توانید این گزینه را فعال کنید.
پیش تنظیمات المان: عناصر هر کدام تنظیماتی دارند که با کمک این گزینه می‌توانید برای افراد صاحب دسترسی در سایت آن‌ها را فعال یا غیر فعال کنید.
Drag and Drop: المان‌های موجود قابلیت درگ و دراپ کردن (کشیدن و رها کردن) دارند. اگر می‌خواهید می‌توانید آن‌ها را فعال یا غیرفعال کنید.

ویرایشگر

editor- visual composer در وردپرس

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

  آیا گوتنبرگ می‌تواند جایگزین خوبی برای صفحه‌ساز وردپرس باشد؟

قرار دهنده کد کوتاه

shortcode- visual composer در وردپرس

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

سازنده شبکه‌بندی

grid- visual composer در وردپرس

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

حال وقت چیست؟ بله درست فکر می‌کنید، وقت آن است که به بخش ویرایشگر برویم و استفاده از visual composer در وردپرس را بررسی کنیم.

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

دکمه آبی رنگی در بالای ویرایشگر وردپرس ظاهر شده که مربوط به ویژوال کامپوزر است. در تصویر زیر آن را مشاهده می‌کنید:

visual composer editor - visual composer در وردپرس

همان‌طور که مشاهده می‌کنید دو دکمه آبی رنگ ویرایشگر پیشرفته و Frontend Editor را مشاهده می‌کنیم. هر کدام وضعیت ویرایشگر را به چه صورت تغییر می‌دهد؟ با هم ببینیم

ویرایشگر پیشرفته

advanced- visual composer در وردپرس

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

Frontend Editor

frontend- visual composer در وردپرس

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

معرفی المان‌های visual composer

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

add elements- visual composer در وردپرس

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

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

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

add row- visual composer در وردپرس

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

row- visual composer در وردپرس

در بالای ردیف ایجاد شده توسط visual composer در وردپرس، چند آیکون مشاهده می‌کنید. آیکونی که بصورت چند خط است به شما امکان تعریف چند ستونه کردن این ردیف را می‌دهد.

culomn- visual composer در وردپرس

مثلا من تمایل دارم یک ردیف ۴ ستونه درست کنم که مربوط به اطلاعات آماری سایت باشد. پس در نتیجه روی گزینه ۴ ستونه کلیک می‌کنم و در نهایت به دنبال المانی برای این منظور می‌گردم.

counter element- visual composer در وردپرس

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

complete- visual composer در وردپرس

همان‌طور که مشاهده می‌کنید به راحتی می‌توان با کمک visual composer در وردپرس یک صفحه اختصاصی و زیبا طراحی کرد.

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

از وقتی وردپرس ۵ روی کار آمده، با وجود گوتنبرگ، صفحه‌ساز ویژوال کامپوزر برای بعضی کاربران دچار ناسازگاری و مشکل شد. جای نگرانی نیست! لطفا وردپرس خود را به نسخه ۵٫۰٫۲ به بالا ارتقا دهید. در این نسخه مشکل ناسازگاری گوتنبرگ با این افزونه و بسیاری افزونه‌های دیگر برطرف شده است.
اگر قالبی که استفاده می‌کنید این ویرایشگر را ندارد و تمایل دارید از آن استفاده کنید می‌توانید از ژاکت دریافت کنید.

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

آموزش ویدئویی

ویدئو تهیه شده توسط پویا دارائی

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

۲۸۶,۱۹۱ نفر

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

دیدگاه‌های این نوشته جدید شاخص

  1. 2 سال عضو همیار وردپرس

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

  2. 4 ماه عضو همیار وردپرس

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

  3. 3 سال عضو همیار وردپرس

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

  4. سلام مطالب خوبی میزارید با اجازه با ذکر منبع و لینک به پست تون در سایت خودم کپی میکنم

  5. سلام
    اگر من بخوام این افزونه رو روی قالبی که خودم از صفر درست کردم، ست کنم باید چیکار کنم؟ یعنی میخوام مثلا هر المان رو دیزاین کنم و …
    باید داخل کدهای خود افزونه را ویرایش کنم یا باید فایل جدیدی خودم بسازم ( اگر خودم باید فایل بسازم و … با چه اسم و id ها و class هایی باید این کار ها را بکنم ) ؟ اگر میشه لطف کنید کمی در این باره توضیح بدید .
    ممنون

  6. 2 سال عضو همیار وردپرس

    سلام
    من میخوام
    صفحه ساز گرافیکی پیشرفته ویژال کامپوزر | Visual Composer بخرم لطفا راهنمایی ام کنید

مطالب زیر را حتما بخوانید