نحوه کار با افزونه صفحه ساز Oxygen Builder!

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

حقایقی درباره‌‌ی افزونه اکسیژن که بهتر است پیش از شروع بدانید!

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

۲. در زمان نگارش این مقاله هنوز منابع معتبر داخلی دست به ارائه افزونه oxygen builder نزده‌اند. بنابراین ما در لیمومگ به معرفی منبع نمی‌پردازیم. اما پیش از اقدام به خرید افزونه می‌توانید در فضای دموی صفحه ساز oxygen builder با این افزونه جذاب آشنا شوید.

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

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

۵. پیش‌تر در مطلب oxygen builder چیست به معرفی این افزونه کاربردی پرداخته‌ایم. اگر هنوز هیچ آشنایی با آن ندارید پیشنهاد می‌کنیم این مقاله را مطالعه کنید.

پیشنهاد می‌کنیم مطالعه کنید: «وردپرس چیست؟»

نصب و راه‌اندازی افزونه صفحه ساز Oxygen Builder

نصب و راه‌اندازی این افزونه هم به سادگی هر افزونه‌ی دیگری است. تنها تفاوت‌اش این است که بعد از نصب  و فعال‌سازی دوتا گزینه به شما نمایش داده‌ می‌شود که باید از بین آن‌ها انتخاب کنید: Default Installation و Blank Install. از بین این دو گزینه اولی برای استفاده از پیش‌ ساخته‌ها و دومی برای ایجاد یک وب‌سایت با نهایت آزادی و خلاقیت است. گرچه انتخابی که این‌جا انجام می دهید، تغییر پذیر است.

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

برای شروع کار واقعی با این صفحه ساز ابتدا باید صفحه‌ای ایجاد کنید و سپس آن را منتشر کنید. بلافاصله بعد از انجام این کار است که گزینه‌ی  Edit in visual editor برایتان ظاهر می‌شود و می‌توانید وارد فضای اصلی شوید.

درست زیر همین گزینه می‌توانید با انتخاب Template از صفحات پیش‌ ساخته‌ی نمونه نیز استفاده کنید. و در پایان بخش گزینه‌ی شورت کد را نیز در اختیار دارید که در این بخش  به آن‌ها وارد نمی‌شویم. بعد از انتخاب گزینه‌ی Edit in Visual Editor وارد یک صفحه‌ی خاکستری می‌شوید که یک نوار خیلی ساده در بالای آن قرار دارد. در قسمت سمت راست گزینه‌های ذخیره و تنظیمات و بازگشت به صفحه اصلی وردپرس را دارید. و در سمت چپ یک دکمه‌ی تنها به نام Add را می‌بینید. با فشردن این دکمه‌ می‌توانید به المان‌ها دسترسی داشته باشید.

ساخت صفحه در اکسیژن بیلدر

در بخش المان‌های صفحه اکسیژن، همه چیز ساده و بصری است. در تب اول اصلی‌ترین المان‌های صفحه مثل ردیف، کد، هدینگ و… را می بینید. در بخش وردپرس المان‌های جذاب‌تری وجود دارند: ویجت‌ها و شورت کدها. مثلاً در پوشه‌ی ویجت‌ می توانید به گزینه‌های تقویم، فایل صوتی، صفحه و … دسترسی داشته باشید. تب بعدی با عنوان Reusables مربوط به ذخیره‌ی کردن بخش‌هایی است که قبلاً ساخته‌ایم. مثلاً بعد از طراحی هدر و فوتر می‌توانیم از این بخش به آن‌ها برای استفاده در بخش‌های دیگر نیز دسترسی  داشته باشیم.

در تب بعدی که با اسم component نمایش داده می‌شود، می‌توانید قسمت‌های اصلی مثل هدر و فوتر را بسازید. و بعد در تب Design Set همانطور که از نامش پیداست به المان‌های طراحی دسترسی خواهیم داشت.

پیشنهاد می‌کنیم مطالعه کنید: «ووکامرس چیست؟»

انتخاب سکشن‌ها و ایجاد هدر و فوتر در oxygen builder 

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

بعد از انتخاب گزینه‌ی مورد نظر روی منوی همبرگری سمت راست کلیک کنید و در تب DOM tree می‌توانید بخش‌های موردنیاز خود را اضافه یا حذف کنید. مثلاً اگر می‌خواهید قسمت Body را کمی گسترش بدهید کافی است از روی نمودار درختی سمت راست، روی علامت + در کنار آن کلیک کنید و یک بخش به آن اضافه کنید.

از همین بخش component سایر قسمت‌هایی که برای ساخت یک صفحه به آن‌ها نیاز دارید را نیز بیابید. مثلاً از بین فوترها نیز نمونه موردعلاقه‌تان را انتخاب کنید. برای above the fold نیز یکی از heroها را اضافه کنید. به همین ترتیب هر تعداد سکشن که نیاز دارید را اضافه و آماده‌ی ویرایش کنید.

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

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

بعد از آن گزینه‌ها به خوبی گویا هستند: بخش BG برای رنگ، Container برای تنظیمات ابعاد المان نسبت به صفحه و Allign راست چین بودن یا چپ چین‌بودن را تعیین می‌کند. آیکون زنجیره‌هم که برای قرار دادن لینک به کار می‌رود. اما با کلیک کردن روی More گزینه‌های پیشرفته‌تری برای سفارشی‌سازی سکشن در اختیارتان قرار می‌گیرد.

پیشنهاد می‌کنیم مطالعه کنید: «آشنایی با انواع قالب‌ وردپرس»

کارکردهای منوی MORE در Components:

این بخش به گزینه‌هایی برای تغییرات بیشتر اختصاص می‌یابد. با فعال کردن آن در منوی سمت چپ بخش‌های زیر اضافه می‌شود:

• position & size: این بخش به تغییرات لی‌اوت مثل پدینگ و حاشیه و همچنین محل قرار گیری المان‌های مختلف اختصاص پیدا می‌کند. با استفاده از منوهای دیگری که در این بخش در اختیارتان قرار می‌گیرد به سادگی و بدون اندازه‌گیری خیلی دقیق می‌توانید ابعاد و جای‌گذاری استانداردی برای المان‌ها در نظر بگیرید.
• Typography: در این بخش می‌توانید تغییرات فونت را شخصی سازی کنید.
• Border: در قسمت بوردر می‌توانید تنظیمات حاشیه را انجام دهید.
• CSS & Java Script: اگر در سکشن و المان موردنظر خود نیازی به استفاده از ویژگی‌های ظاهری با تگ‌های آماده‌ی JS/CSS دارید می‌توانید از این بخش استفاده کنید. یک کلیک کافی است تا ببنید به چه مواردی دسترسی دارید.

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

• نکته ۱ : با کلیک راست روی هر المان در صفحه می‌توانید دسترسی سریعی به استایل‌های اولیه داشته باشید.
• نکته۲: با کلیک راست روی المان در DOM tree می‌توانید گزینه‌‌ی Add to reusable را انتخاب کرده و بخش منتخب خود را برای استفاده‌های بعدی ذخیره کنید.

• پیشنهاد می‌کنیم مطالعه کنید: آشنایی با بهترین لیست افزونه وردپرس

سوالات رایج درباره‌ oxygen builder که شاید برای شما هم پیش آمده باشد:

۱. سازگاری سایت ساز اکسیژن، با سایر افزونه‌ها و قالب‌های وردپرسی چطور است؟

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

۲. آیا اکسیژن بیلدر برای مبتدی‌ های طراحی سایت وردپرس هم مناسب است؟

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

۳. در حال حاضر از کدام منابع معتبر می‌توان خرید صفحه ساز oxygen builder را انجام داد؟

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

۴. آیا  صفحه ساز oxyen builder با ووکامرس سازگار است و برای فروشگاه هم کاربرد دارد؟

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

سخن پایانی

در این مقاله به آموزش نحوه کار با افزونه صفحه ساز oxygen builder پرداختیم و فضای اصلی آن را معرفی کردیم. اگر دربارۀ این صفحه‌ساز وردپرس سوالی در ذهن دارید می‌توانید از بخش نظرات زیر همین پست با ما در میان بگذارید و پاسخ بگیرید. در صورتی که تجربه‌ استفادۀ این سایت‌ساز را دارید می‌توانید از همین بخش با سایر کاربران به اشتراک بگذارید.

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