افزونه صفحه ساز ویژوال کامپوزر WPBakery Page Builder – قسمت چهارم – ایجاد صفحه

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

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

افزودن ردیف

ردیف های اضافه شده به صورت زیر نمایش داده می شوند.

ایجاد ستون

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

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

چینش ستون ها

با استفاده از گزینه اول کل ردیف را حذف کنید.

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

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

تنظیمات ردیف

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

عنوان سفارشی

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

عنوان سفارشی

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

تصویر تکی

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

تصویر تکی

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

بخش بعدی تنظیمات مربوط به سایز تصویر نمایش داده شده می باشد که شما می توانید یک سایز دلخواه مثل ۲۰۰*۲۰۰ وارد کنید و یا اینکه با عنوان هایی که برای تصاویر شاخص و رسانه در نظر گرفته شده است ، سایز مورد نظر را انتخاب کنید.

همان طور که مشاهده می کنید تنظیمات دیگر مربوط به نوع نمایش می باشد. محل نمایش تصویر در صفحه را انتخاب کنید. استایل تصویر، شکل ظاهری می باشد که از پیش برای آن انتخاب شده است به طور مثال می توانید استایل ۳d shadow یا سایه سه بعدی را انتخاب کنید.
بخش بعدی تعیین نوع رخدادی است که در زمان کلیک اتفاق می افتد مانند باز شدن تصویر در سایز اصلی، زوم و… .

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

آیکون

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

تنظیمات آیکون

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

برای نمونه یک صفحه ساده برای فروش اجناس ایجاد شده که در تصویر زیر مشاهده می کنید.

صفحه نمونه

این مقاله از کانی تمز هم به پایان رسید. با ما همراه باشید تا در بخش بعدی آموزش به بررسی ویرایش گر زنده (Frontend) بپردازیم.