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

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

مشاهده یا دانلود فیلم بالا

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

نوشتن کدهای HTML ، CSS  و PHP برای ایجاد یا سفارشی سازی یک سایت وردپرس ، حتی برای یک توسعه دهنده وب با تجربه ، بسیار وقت گیر است. احتمالاً به همین دلیل است که بسیاری از جامعه وردپرس به دنبال استفاده از افزونه های صفحه ساز هستند.

WPBakery Page Builder که قبلاً Visual Composer نامیده می شد انعطاف پذیرترین و غنی ترین افزونه صفحه ساز وردپرس است که می توانید در سال 2020 به دست آورید. این برنامه تقریباً با همه قالب های مدرن وردپرس سازگار است و نیازی به مهارت های برنامه نویسی ندارید. بتواند از آن استفاده کند در واقع ، هنگام استفاده از آن ، حتی مجبور نخواهید بود کد کوتاه تایپ کنید!

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

پیش نیازها

برای اینکه بتوانید این آموزش صفحه ساز WPBakery را دنبال کنید ، به موارد زیر نیاز دارید:

• وردپرس  5.0 یا بالاتر
• یک حساب Envato

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

علاوه بر این ، برای درک بهتر نحوه استفاده از Visual Composer و اینکه چرا باید از WPBakery Page Builder  به جای سایر افزونه های صفحه ساز امروزه استفاده کنید ، پیشنهاد می کنم مقاله زیر را مطالعه کنید:

نصب WPBakery Page Builder

WPBakery Page Builder  یک افزونه برتر وردپرس است. این برنامه در CodeCanyon موجود است  ، بنابراین وارد حساب Envato خود شوید و برای آن مجوز خریداری کنید. هنوز هم اغلب با نام قدیمی آن شناخته می شود: Visual Composer.

پس از خرید ، می توانید یک فایل ZIP حاوی فایل های مختلف مربوط به افزونه را دانلود کنید.

فایل ZIP را استخراج کرده و به دنبال فایلی با نام  js_composer.zip باشید . این یک فایل بایگانی افزونه است که باید آن را در سرور وردپرس خود بارگذاری کنید. بنابراین به پنل مدیریت وردپرس خود وارد شوید و به  افزونه ها و افزودن جدید بروید . سپس بر روی   دکمه Upload Plugin کلیک کرده و js_composer.zip  را انتخاب کنید  .

نصب را فشار دهید تا شروع به نصب کند.

اگر با نصب افزونه مشکل دارید این مقاله را ببینید: نصب افزونه وردپرس

پس از اتمام نصب ، دکمه  Activate Plugin یا فعال سازی را  فشار دهید. به محض انجام این کار ، به صفحه خوش آمدید WPBakery Page Builder منتقل می شوید.

پیکربندی افزونه

یادگیری نحوه استفاده از WPBakery Page Builder آسان است. این افزونه بسیار قابل تنظیم است و ده ها گزینه پیکربندی را ارائه می دهد که می توانید آنها را مطابق با نیازهای خود تغییر دهید. دکمه  تنظیمات را  در صفحه خوش آمد گویی فشار دهید تا نگاهی به آنها بیندازید.

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

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

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

پس از اعمال تغییرات ، به پایین بروید و روی دکمه ذخیره تغییرات کلیک کنید.

در نهایت ، اگر می خواهید ظاهر و احساس عناصر محتوای WPBakery Page Builder را سفارشی کنید ، به   برگه Design Options بروید و قسمت   Use Custom design design  را بررسی کنید. پس از انجام این کار ، می توانید رنگ ها ، حاشیه ها و عرض های پیش فرض افزونه را تغییر دهید.

استفاده از ویرایشگر Back-End

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

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

با استفاده از این ویرایشگر ، به راحتی می توانید انواع عناصر متداول را به صفحه اضافه کنید. WPBakery Page Builder عناصر ساده ای مانند بلوک های متن ، تصاویر و جداکننده ها را ارائه می دهد. همچنین موارد پیشرفته تری مانند دکمه های "دوست داشتن" فیس بوک ، نقشه های Google ، نمودارها و چرخ فلک های متحرک را ارائه می دهد.

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

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

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

برای افزودن یک عنصر ، کافی است دکمه  Add Element را  فشار داده و عنصر مورد نظر را انتخاب کنید.

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

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

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

استفاده از ویرایشگر WYSIWYG Front-End

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

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

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

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

استفاده از الگوها

یکی دیگر از جنبه های مهم یادگیری نحوه استفاده از WPBakery Page Builder استفاده از الگوها است. WPBakery Page Builder به شما امکان می دهد هر صفحه یا پستی را که با آن ایجاد می کنید به یک قالب تبدیل کنید. 

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

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

شما محدود به کار با الگوهای خود نیستید. این افزونه دارای یک کتابخانه قالب بزرگ است که به طور مرتب به روز می شود. برای باز کردن کتابخانه ، به برگه Template Library بروید و دکمه Access Library را فشار دهید.

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

به طور کلی ، الگوها را می توان به دو دسته تقسیم کرد: الگوهای کل صفحات و الگوهای بخشهای جداگانه و مستقل یک صفحه. به عنوان مثال، قالب درباره صفحه به شما کمک می کند تا یک صفحه کامل "درباره ما" ایجاد کنید. اما قالبHero Section  فقط یک قسمت قهرمان برای شما ایجاد می کند.

بهترین افزونه ها و افزونه های صفحه ساز WPBakery وردپرس در CodeCanyon برای سال 2021

امیدوارم از آموزش صفحه ساز WPBakery که با شما به اشتراک گذاشتم لذت برده باشید. اکنون می دانید که چگونه از WPBakery Page Builder استفاده کنید. در مرحله بعد ، اجازه دهید به شما بگویم که بهترین افزونه های حرفه ای WPBakery WordPress را از کجا تهیه کنید  ، بنابراین می توانید در کسری از زمان یک وب سایت شگفت انگیز ایجاد کنید.

بهترین افزودنی های WPBakery  در CodeCanyon

صدها مورد از بهترین افزونه های وردپرس را  که تا به حال در CodeCanyon Envato Market ایجاد شده است کاوش کنید  . با پرداخت یک بار ارزان ، می توانید یکی از این افزونه ها ، افزونه ها و افزونه های با کیفیت وردپرس را خریداری کنید. 

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

• عناصر منحصر به فرد
• ویژگی های اضافی WooCommerce
• جعبه های محتوا
• و خیلی بیشتر

شما می دانید چگونه از Visual Composer استفاده کنید. اما این ویژگی ها و قابلیت های اضافی برای وب سایت وردپرس شما ضروری است ، بنابراین مطمئن شوید که انتخاب ما را در زیر بررسی کنید!

5 افزونه برتر صفحه ساز WPBakery 

در اینجا تعدادی از بهترین افزونه ها و برنامه های افزودنی WPBakery موجود در CodeCanyon برای سال 2020 آمده است.

Ultimate Addons for WPBakery Page Builder

این پرفروش ترین افزونه ما برای WPBakery Page Builder است. با بیش از 60،000 فروش ، مردم آن را به دلیل ویژگی های فوق العاده آن دوست دارند:

• طراحی کاملاً پاسخگو
• عناصر منحصر به فرد و انعطاف پذیر
• کد تمیز
• بیش از 9 نسخه نمایشی کامل صفحه
• اختلاف منظر و پس زمینه ویدئویی
• انیمیشن های CSS3
• آموزش های ویدئویی
• بهترین پشتیبانی مشتری

Composium — WP Bakery Page Builder Extensions Addon

Composium یکی دیگر از پرفروش ترین افزونه های افزونه WPBakery است. این شامل بیش از 150 عنصر برتر برای صفحه ساز WPBakery و ویژگی های عالی مانند:

• طراحی کاملاً پاسخگو
• مدیر فونت آیکون
• مدیر Google Fonts
• قالب ساز و ویجت 
• سیستم مدولار
• ادغام ووکامرس
• کد تمیز و کارآمد
• پشتیبانی سریع

Massive Addons for WPBakery Page Builder

Massive Addons با 99٪ تم های وردپرس که از Visual Composer 4.7+ پشتیبانی می کنند سازگار است. و این افزونه محبوب WPBakery به تازگی یک به روز رسانی با بسیاری از عناصر جالب را منتشر کرده است:

• ایستگاه از پیش تنظیم شده
• قالبهای 35 صفحه +17 قالب جدید
• پشتیبانی از ووکامرس
• نصب قالب با یک کلیک
• بیش از 1700+ ایستگاه از پیش تعیین شده

صفحه ساز WooCommerce

این افزونه WPBakery برای کمک به شما در سفارشی سازی وب سایت WooCommerce ایجاد شده است. با استفاده از این افزونه ، می توانید هر طرح بندی را برای یک صفحه WooCommerce به راحتی ایجاد کنید ، بدون نیاز به دانش کد نویسی. این یک افزونه WPBakery عالی است زیرا:

• نصب آسان
• کاربر پسند
• سازگار با هر موضوعی
• از کد کوتاه WooCommerce پشتیبانی می کند

WPBakery Page Builder Clipboard

صفحه کلیپ بورد WPBakery به شما امکان می دهد عناصر محتوا یا مجموعه ای از عناصر محتوا را در صفحات کپی/برش و جایگذاری کنید ، بدون اینکه رابط پشتیبان صفحه WPBakery را ترک کنید.

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

نتیجه

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

با ایجاد افزونه Visual Composer ، یکی از اولین سازندگان صفحه کشیدن و رها کردن کامل برای وردپرس ، تیم WPBakery نحوه استفاده مردم از وردپرس را به طور قابل توجهی تغییر داد. در اواخر سال 2017 ، آنها پلاگین خود را به WPBakery Page Builder تغییر نام دادند. امروزه بیش از 350،000 کاربر و بیش از 2 میلیون وب سایت دارد.

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

اگر شما از افرادی هستید که به طور مرتب از وردپرس استفاده می کنید ، CodeCanyon دارای افزونه های وردپرس بیشتری است که می تواند نحوه توسعه و مدیریت سایت های وردپرس شما را بطور اساسی تغییر دهد.

سوال یا نظری دارید در بخش کامنت ها بنویسید.

موفق باشید.