آموزش کار با صفحه ساز گرافیکی وردپرس با Visual composer

صفحه ساز گرافیکی وردپرس

بروز رسانی در تاریخ ۲۲ خرداد ۱۳۹۶
سلام کاربران عزیز!
این روزها هر قالبی را که خریداری میکنیم با کمک یک صفحه ساز گرافیکی و حرفه ای ساخته شده است. به همین علت از ظاهر زیبایی خاصی برخوردار است. استفاده از صفحه ساز گرافیکی وردپرس یک مزیت فوق العاده برای قالب وردپرس به حساب می آید که به سایت شما انعطاف خوبی می دهد. با کمک آن می توانید هر نوع تغییری را که میخواهید اعمال کنید.
در این پست قصد ارائه آموزش صفحه ساز visual composer که یکی از معروف ترین ها می باشد را داریم.

صفحه ساز گرافیکی وردپرس با visual composer

 

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

visual composer-صفحه ساز گرافیکی وردپرس

صفحه ساز گرافیکی در پیشخوان وردپرس

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

settings-صفحه ساز گرافیکی وردپرس

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

page-صفحه ساز گرافیکی وردپرس

همانطور که مشاهده میکنید دو گزینه Frontend editor و backend editor تشکیل شده است که اولی برای محیط ویرایشگر در سمت کاربری است و دیگری در سمت ادمین است.

Backend Editor

backend editor-صفحه ساز گرافیکی وردپرس

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

Add Template

برای ایجاد یک تم یا همان قالب در این برگه روی دکمه نارنجی رنگ کلیک میکنیم و با صفحه ای مانند زیر مواجه می شویم:

add theme-صفحه ساز گرافیکی وردپرس

نام قالب مورد نظر را وارد می کنید و بر روی گزینه ذخیره قالب کلیک میکنید تا ایجاد شود. از بخش کتابخانه قالب ها می توانید قالب مورد نظر را انتخاب کنید.

Add Text Block

برای افزودن یک بلوک متنی می توانید روی دکمه سبز رنگ کلیک کرده و یک بلوک متنی مانند تصویر زیر ایجاد کنید:

text block-صفحه ساز گرافیکی وردپرس

افزودن المان

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

add elements-صفحه ساز گرافیکی وردپرس

همانطور که ملاحظه میکنید شامل بخش های متعددی است که به راحتی هر نوع ویژگی را می توان به کمک آن اضافه کرد.

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

یک مثال…

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

sample-صفحه ساز گرافیکی وردپرس

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

icon box-صفحه ساز گرافیکی وردپرس

بدین صورت می توان هر آیتمی را که میخواهیم اضافه کنیم.

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

افزونه Visual Composer

خرید افزونه

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) کانال تلگرام همیار وردپرس

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

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

۲۲۵,۳۹۳ نفر

پاسخ دهید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

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

  1. سلام میشه اول سایت رو روی لوکال با این افزونه طراحی کرد بعد روی هاست بارگزاری کرد؟
    این افزونه روی لوکال به خوبی کار میکنه؟

  2. سلام

    من از دانش آموختگان قدیمی همیار ورد پرس هستم و پس از دوره آموزشی هم همیشه از مطالب حرفه ای نویسندگان حرفه ای شما استفاده میکنم. برای طراحی سایت جدیدم نیاز به قالبی با باکسهای استاندارد برای بنرهای تبلیغاتی داشتم به صورتی که کاملا آزادانه بتوانم این باکس ها را Drag & Drop کنم. ایا این افزونه برای بنرهای تبلیغاتی هم فکری کرده است؟

  3. سلام
    بخش extra class name یا “نام کلاس اضافه”
    کار باهاش به چه شکلی هست و کدهای داخل اون رو از کجا باید بگیریم؟

  4. براي فعالس سازي ويژوال كمپرسور راه رايگاني هم وجود داره

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

    با سلام؛
    ببخشید من می خوام این افزونه رو بخرم.
    ۱) آیا این افزونه حتماً باید بر روی یک قالب پیشرفته نصب شود و سپس صفحات را ایجاد یا تغییر دهد و یا اینکه می توان بر روی یک قالب ساده نصب شود و کلاً قالب را برای ما بازسازی کند؟
    ۲) آیا این افزونه قابلیت این را دارد که اجزای قالبهای ساده را دقیقاً به همان نحوی که ما علاقه داریم تغییر داده و یک قالب زیبا برای ما درست کند؟
    ۳) آیا این افزونه فقط بر روی بعضی از قالبها که قابلیت کار با ویژوال کامپوزر را دارند کار می کند یا سازگاری مهم نیست و این افزونه با همه قالبهای وردپرسی سازگار است؟
    ۴) آیا مشکلاتی که کاربران درباره نسخه موجود بر روی سایت همیار ذکر کرده اند برطرف شده است؟
    با تشکر

    • 4 سال عضو همیار وردپرس

      سلام
      ۱- فرقی نداره. مهم اینه که از قالب شما پشتیبانی کنه
      ۲- بله
      ۳- بله سازگاری مهمه
      ۴- مسلما بروز رسانی شده
      در ژاکت وجود داره میتونید از پشتیبانی ژاکت کمک بگیرید.

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

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

  7. سلام
    این افزونه با حالت Strech Row در RTL مشکل داره. راه حل رفع مشکلش رو می دونید؟

    تشکر

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

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

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

  11. سلام من این افزونه قبلا خریداری کردم ولی الان به وردپرس ۴٫۸ ارتقا دادم و دیگه نمیتونم صفحه رو که قبلا ساخته بودم ویرایش کنم
    لطفا کمک کنید

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

    *توضیح بیشتر:
    برای مثال من در یک ردیف سه ستونی این جمله را نوشته ام
    در ستون اول از سمت راست:امروز هوای
    در ستون دوم از سمت راست: تهران
    در ستون سوم از سمت راست: بارانی است

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

    اما هنگام مرورگری با لپ تاپ و نمایشگر های بزرگ چون ستون ها سر جای خودشان نشان داده می شوند هیچ مشکلی وجود ندارد

    • 4 سال عضو همیار وردپرس

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

  13. سلام و عرض ادب
    خیلی ممنون بابت آموزش و مطالب مفیدتون

    من با استفاده از visual composer برگه دلخواه رو میسازم و در فسمت frontend editor هم هیچ مشکلی نیست و دقیقا همون چیزیه که ساختم ، ولی وقتی که سایت رو باز میکنم ، ابعاد و جایگاه المان ها به هم میریزه و شبیه تنظیمات من نیست

    (لازم به ذکره که بعد از تنظیمات در frontend editor به روز رسانی رو انجام میدم و در قسمت صفات برگه ، قالب به صورت پیش فرض هستش و قالب سایت من هم superstore هست)

    ممنون میشم که بفرمایید چطور این مشکل رو حل کنم

    خیلی ممنون

    • 4 سال عضو همیار وردپرس

      سلام
      ctrl+ f5 بزنید ببینید تغییری میکنه یا نه!
      ممکنه این افزونه با قالب شما سازگاری نداره

    • نه خیر تغییری نمیکنه
      قالب من superstore هستش و داخل توضیحات قالب نوشته که با این افزونه سازگاره.

      ممنون از شما که پاسخ دادید.

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

محبوبترین‌های آموزش آنلاین

مشاهده همه آموزش‌های آنلاین