در نوشته های معرفی و نصب افزونه WPBakery Page Builder و تنظیمات عمومی افزونه  به طور کامل با این افزونه و تنظیمات عمومی آن آشنا شدیم.

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

ایجاد برگه جدید

ایجاد برگه جدید

بر روی آن کلیک کنید تا به صفحه ویرایشگر آن بروید.

ویرایشگر کلاسیک

ویرایش گر کلاسیک

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

ویرایشگر پیشرفته (Backend)

ابتدا بر روی ویرایشگر پیشرفته کلیک کنید تا صفحه زیر برای شما باز شود.

ویرایشگر پیشرفته WPBakery Page Builder

ویرایش گر پیشرفته WPBakery Page Builder

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

اضافه کردن الگو

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

الگوهای من

الگوهای من

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

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

کتاب خانه الگو

کتاب خانه الگو

اضافه کردن بلاک متن

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

بلوک متنی

بلوک متنی

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

تنظیمات بلوک متن

تنظیمات بلوک متن

در ابتدا می توانید متن بلاک اضافه شده را به متن دلخواه خود تغییر دهید.

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

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

نام کلاس اضافی: برای استایل دهی به این المان، در این قسمت نام کلاس اضافی برای آن مشخص کنید.

افزودن المان

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

المان های موجود

المان های موجود

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

تنظیمات طراحی المان ها

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

تنظیمات طراحی

تنظیمات طراحی

این بخش از طراحی امکان سفارشی کردن بخش های زیر را فراهم می کند:

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

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

چینش المان ها در صفحه

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

انتخاب نوع چینش

انتخاب نوع چینش

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

چینش سفارشی

چینش سفارشی

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

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