×

افزونه ویژوال کامپوزر | پلاگین صفحه ساز visual composer


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

ویژگی اصلی ویژوال کامپوزر

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

آیا واقعاً به صفحه ساز نیاز دارید؟

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

ویژگی های ویژوال کامپوزر

  • ویرایشگر Drag & Drop : می توانید به راحتی آیکون های مورد نظرتان را از مخزن این افزونه انتخاب کرده و به صفحه مورد نظر بکشید.
  • عدم نیاز به کدنویسی : ویژوال کامپوزر از شما یک توسعه دهنده وب می سازد. بدون نیاز به دانش برنامه نویسی می توانید سایت خود را ساخته و متناسب با کاربری که دارد به روزرسانی کنید.
  • آزادی در انتخاب تم : امکان انتخاب تم های مختلفی برای سایت وردپرس شما از طریق نصب این افزونه وجود دارد. کافی است تم مورد نظر خود را از طریق ویژوال کامپوزر دانلود کرده و اجرا نمایید.
  • ارائه المان های طراحی : یکی از ویژگی های جذاب ویژوال کامپوزر این است که المان های طراحی را به طور جداگانه به شما ارائه می دهد. همه المان هایی مانند، تکست باکس، جداکننده ها، دکمه ها و غیره در فروشگاه آنلاین این افزونه (Visual Composer Hub) قابل دانلود هستند و به سلیقه ما، در طراحی به کار می روند. البته که تمامی این امکانات قابل ویرایش و یا حذف نیز هستند.
  • پیش نمایش سریع : ویژوال کامپوزر این قابلیت را دارد که تغییرات اعمال شده را به صورت آنی به شما نمایش دهد. این عمل دست طراحان را در تست آیکون های مختلف باز می گذارد تا به نتیجه دلخواه برسند.
  • متناسب با تم های وردپرس : ویژوال کامپوزر با بسیاری از تم های وردپرس انطباق دارد. بنابراین اگر قصد تغییر تم سایت خود را دارید نگران طراحی محتوای جدید خود نباشید.
  • کنترل فضای آزاد : تغییر اندازه سطرها و ستون ها و تنظیم فضای آزاد موجود در سایت به راحتی با این افزونه قابل انجام است و به شما اجازه می دهد چیدمان دلخواه خود را انجام دهید.
  • طراحی ریسپانسیو : ریسپانسیو (Responsive ) بودن به این معنی است که طراحی سایت یا اپلیکیشن شما، بر روی دستگاه های مختلف مانند تلفن همراه یا لپتاپ به درستی و کامل نشان داده شود و به عبارت دیگر، پاسخگوی مدل نمایش در هر دستگاهی باشد. ویژوال کامپوزر این قابلیت را دارد و طراحی شما بر روی نمایشگر تلفن همراه نیز به طور خودکار به روز می شود.
  • متناسب با طراحی کاربری : ویژوال کامپوزر هماهنگی بسیار بالایی با طراحی کاربری دارد و خیال شما را بابت بهم نریختن نوع نمایش راحت می کند.
  • طراحی پس زمینه : ایجاد یک پس زمینه تاثیرگذار و چشم نواز برای جذب کاربر بسیار اهمیت دارد. با این افزونه به راحتی می توانید طراحی دلخواه خود را برای پس زمینه با کمک تصویر، اسلاید و غیره انجام دهید.
  • امکاناتی برای برنامه نویسان : یکی از اهداف افزونه ویژوال کامپوزر این است که افراد بدون دانش برنامه نویسی نیز بتوانند به خوبی کار طراحی سایت انجام دهند. اما این مسئله باعث نمی شود که از برنامه نویسان غافل بماند. این افزونه API هایی برای توسعه دهندگان وب دارد تا بتوانند با استفاده از تکنولوژی هایی مانند ReactJS نیاز مشتریان خود را برآورده کرده و تم های قدرتمندی ایجاد کنند.
طراحی سایت-ویژوال کامپوزر چیست و چگونه کار میکند؟

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

تنظبمات عمومی- آموزش حرفه ای ویژوال کامپوزر

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

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

نقش مدیر

admin role- نقش کاربری
تعیین نقش‌های مدیر در ویژوال کامپوزر

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

مدیر کل

نقش مدیریت- ساخت برگه های سفارشی با ویژوال کامپوزر
تعیین وظایف نقش مدیریت

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

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

ویرایشگر

editor- تعیین وظایف نقش ویرایشگر
تعیین وظایف نقش ویرایشگر

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

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

shortcode- ساخت برگه های سفارشی با ویژوال کامپوزر
قرار دادن شورت‌کد در برگه‌ها

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

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

grid editor- سازنده شبکه‌بندی‌ها
تعیین شبکه‌بندی‌ها و ساختن هر بخش

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

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

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

visual composer button- دکمه ویرایشگر
دکمه مربوط به ویرایشگر ویژوال کامپوزر

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

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

advance editor- ویرایشگر پیشرفته
ویرایشگر پیشرفته

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

Frontend Editor

Frontend Editor- ویژوال کامپوزر وردپرس
مشاهده تغییرات بصورت زنده

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

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

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

visual composer elements- المان‌های ویژوال کامپوزر
المان‌های ویژوال کامپوزر

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

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

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

add row- افزودن ردیف
افزودن ردیف با کمک ویژوال کامپوزر

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

row- مشاهده ردیف اضافه شده
مشاهده ردیف اضافه شده

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

culomn- اضافه شدن ستون ها
به اندازه دلخواه ستون اضافه کنید

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

counter element- اضافه کردن ستون‌های آماری
وارد کردن اطلاعات در هر کدام از ستون‌ها

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

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

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

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

36000 تومان – خرید

اطلاعات فایل

  • تاریخ انتشار فوریه 9, 2020
  • تاریخ به روز رسانی فوریه 9, 2020
  • تعداد فروش 160

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


reza
تعداد محصولات منتشر شده