گام اول آموزش Divi Builder: دسترسی به ویرایشگر
برای استفاده از دیوی بیلدر و بررسی ویژگیهای آن، ابتدا باید بتوانید به ویرایشگر Divi Builder وارد شوید. اگر به عنوان مدیر سایت، به سایت وردپرسی خود وارد شدهاید، به دو طریق میتوانید به ویرایشگر دیوی بیلدر دسترسی داشته باشید.
ساخت صفحه جدید با صفحه ساز دیوی بیلدر
در این روش ابتدا صفحه موردنظر را از طریق داشبورد وردپرس و از بخش Pages و سپس Add New Page ایجاد میکنید.
سپس برای صفحه یک عنوان تعریف کرده و بر روی دکمه Use Divi Builder کلیک میکنید. در اینجا است که با سه گزینه به شکل تصویر زیر روبهرو می شوید. هر یک از این گزینهها را میتوانید برای ساختن صفحه جدید استفاده کنید.
در ادامه آموزش Divi Builder به توضیح مختصری در مورد هر گزینه میپردازیم.
- گزینه Build from scratch: با انتخاب این گزینه Divi Builder یک صفحه خالی در اختیار شما قرار میدهد تا طراحی صفحه سایت را از پایه خودتان شروع کنید. به کمک المانهایی که دیوی بیلدر در اختیار شما میگذارد، میتوانید به شکل دلخواه خودتان صفحه را ایجاد کنید.
- گزینه Choose a premade layout: ممکن است در گذشته صفحاتی را ایجاد کرده باشید و آنها را در کتابخانه این افزونه ذخیره کرده باشید. اگر این گونه است یا آن که میخواهید از طرحهای ساخته شده توسط Divi Builder که یکی از ویژگیهای دیوی بیلدر است، استفاده کنید، این گزینه را انتخاب کنید.
- گزینه Clone existing page: در گزینه قبلی شما طرحها و صفحه بندیهایی را در کتابخانه دیوی بیلدر ذخیره کرده بودید و از آنها برای شروع طراحی این صفحه جدید استفاده میکردید، اما در این گزینه شما میتوانید از صفحات دیگری که در سایت شما موجود است، استفاده کنید و صفحه جدید را بر پایه آنها ایجاد کنید.
البته لازم به ذکر است که در نسخههای جدیدتر افزونه دیوی بیلدر، دیگر گزینه سوم حذف شده و به جای آن Build with AI قرار داده شده است. این گزینه به شما کمک میکند تا بتوانید به کمک تکنولوژی هوش مصنوعی به طراحی صفحات سایت بپردازید. برای درک بهتر Divi AI و بررسی این ویژگی دیوی بیلدر پیشنهاد میکنیم مقاله How to use Divi AI را مطالعه بفرمایید.
استفاده از ویرایشگر در صفحه موجود
راه دوم دسترسی به ویرایشگر افزونه دیوی بیلدر استفاده از گزینه Enable Visual Builder است. این گزینه در منوی بالای سایت وردپرسی شما نمایش داده میشود. یعنی کافی است بعد از ورود به سایت به عنوان ادمین یا مدیر، بر روی لینک صفحهای که میخواهید آن را ویرایش کنید کلیک نمایید. سپس این گزینه را که از ویژگیهای دیوی بیلدر است کلیک کنید.
آموزش Divi Builder: ساختار پایه
برای بررسی بیشتر ویژگی های دیوی بیلدر، از مفاهیم پایه شروع میکنیم. در واقع المانهای اصلی و ساختار پایه را در این ابزار شرح میدهیم. این المانها که در اصطلاح building blocks نامیده میشوند، عبارتند از: بخشها1sections، سطرها2rows، ستونها3columns و ماژولها4modules. بخشها حاوی سطرها هستند. سطرها نیز به نوبه خود در برگیرنده ستونها هستند. در پایان ستونها نیز ماژولها را در خود جای میدهند.
در ادامه به توضیح مختصری در مورد هر یک از این چهار بخش سازنده ابزار دیوی بیلدر میپردازیم.
ویژگی های دیوی بیلدر: بخشها
در واقع بخشها (sections) بزرگترین بلاک سازنده در Divi Builder هستند. هر چیز دیگری که شما بخواهید طراحی کنید، درون این section ها قرار میگیرند. در دیوی بیلدر سه نوع المان بخش وجود دارد: standard ، fullwidth و specialty.
بخشهای standard
بخشهای standard در دیوی بیلدر از رایجترین المانها هستند. اگر در ویرایشگر دیوی بیلدر قرار داشته باشید. برای اضافه کردن یک section به صفحه خود، کافی است بر روی علامت «به علاوه» آبی رنگی که مشاهده میکنید، کلیک نمایید. اگر آن را به صورت عادی مشاهده نمیکنید، باید موس خود را جابجا کنید تا در قسمتهای خاصی از صفحه قرار بگیرد که این علامت ظاهر شود.
با کلیک بر روی آن، پنجره Insert Section نمایش داده می شود. در اینجا با کلیک بر روی گزینه Regular میتوانید یک بخش standard به صفحه اضافه کنید.
بخشهای fullwidth
نحوه ایجاد این بخشها مشابه حالت استاندارد است. با این تفاوت که بعد از کلیک بر روی علامت «به علاوه آبیرنگ» گزینه Fullwidth را انتخاب میکنید. بخشهای fullwidth برای استفاده از یک سری ماژولهای خاص که ماژولهای fullwidth نام دارند، مناسب هستند. مزیت اینگونه ماژولها و بخشها آن است که تمام عرض مرورگر را پوشش میدهند.
بخشهای specialty
این بخشها برای طراحیهای پیچیدهتر مناسب هستند. یعنی میتوانید ستون بندیهای متنوعتری را به کمک این نوع از بخشها ایجاد کنید. اگر هنگام ایجاد یک بخش جدید بر روی این گزینه کلیک کنید، انواع حالتهای ستون بندی موجود به شما نشان داده میشود تا از میان آنها انتخاب کنید.
یعنی در واقع تفاوت اصلی بخشهای از نوع specialty با دو نوع قبلی در آن است که با کمک آنها شما میتوانید ستونهای مختلف و سطرهای مختلف را به شکل دلخواه در کنار هم قرار دهید.
آموزش Divi Builder: سایر بلاکهای سازنده
به غیر از بخشها که در قسمت قبلی توضیح داده شد، بلاکهای سازنده صفحهبندی سایتها در افزونه دیوی بیلدر شامل سطرها، ستونها و ماژولها نیز میشوند. کار با این المانها نیز چندان دشوار نیست و شباهت زیادی با همان بخشها در دیوی بیلدر دارد.
- سطرها: سطرها یا Rows در داخل بخشها قرار میگیرند و میتوانند انواع مختلفی از ستونها را در خود جای دهند. برای ایجاد یک سطر در داخل یک بخش باید بر روی علامت «به علاوه» سبز رنگ در محیط ویرایشگر دیوی بیلدر کلیک کنید.
- ستونها: ستونها نیز در داخل سطرها جای میگیرند. وقتی یک سطر را ایجاد میکنید به صورت پیش فرض حداقل یک ستون در آن قرار میگیرد تا بتوانید ماژولهای موردنظر خود را در آن ایجاد کنید.
- ماژولها: ماژولها یا Modules در حقیقت همان المانهای اصلی تشکیل دهنده صفحه سایت هستند. یعنی متنها، تصاویر، آیکونها، اسلایدرها و… همگی جزء این دسته محسوب میشوند. برای بررسی بیشتر انواع ماژولها در دیوی بیلدر به این صفحه مراجعه کنید.
تنظیمات المانها در دیوی بیلدر
اکنون که با برخی ویژگیهای دیوی بیلدر آشنا شدهاید، به بررسی برخی تنظیمات المانها در این افزونه میپردازیم. برای دسترسی به تنظیمات هر المان، کافی است بر روی آیکون چرخ دنده که با بردن موس روی آن المان یا ماژول ظاهر میشود، کلیک کنید. بعد از آن شما به انواع تنظیمات آن المان و بخشهای Design ، Content و Advanced دسترسی خواهید داشت.
در ادامه آموزش Divi Builder به توضیح برخی ویژگیهای دیوی بیلدر که در بخش تنظیمات المانها در دسترس هستند، میپردازیم.
نام المان
بعد از کلیک روی آیکون چرخ دنده و باز شدن پنجره تنظیمات در قسمت بالایی و سمت چپ، شما نام المان را مشاهده میکنید. بسته به اینکه روی یک ماژول یا سطر یا بخش و … کلیک کرده باشید، نام المانها متفاوت خواهد بود.
قسمت Preset
Preset اصطلاحی است که دیوی بیلدر برای طراحیهای ذخیره شده به کار میبرد، شما در حین کار با المانها میتوانید تغییراتی را که در هر یک از آنها اعمال کردهاید، به صورت یک Preset ذخیره کنید. سپس در استفاده مجدد از آن المان، از بخش Preset میتوانید آن تنظیمات را بازیابی کنید یا تنظیمات ذخیره شده قبلی را حذف کنید. این بخش در زیر نام المان در دسترس شما است.
تغییر ابعاد پنجره تنظیمات
از جمله ویژگیهای دیوی بیلدر در بخش تنظیمات المانها این است که میتوانید ابعاد پنجره تنظیمات را تغییر دهید. این کار به وسیله آیکونهای موجود در گوشه سمت راست و بالای پنجره صورت میگیرد. مثلاً با کلیک بر روی آیکون expand module میتوانید ابعاد پنجره را به اندازه ابعاد مرورگر خود گسترش دهید تا راحت بتوانید کار کنید.
تنظیمات دیگری نیز با کلیک بر روی آیکون سه نقطه موجود در همان قسمت برای شما به نمایش درمیآیند که در تصویر فوق نیز نشان داده شده است.
آموزش Divi Builder: سایر تنظیمات
همانطور که گفته شد، از طریق آیکون سه نقطه میتوانید به سایر تنظیمات المانها دسترسی داشته باشید. در ادامه برخی از این گزینههای تنظیمات را به شکل مختصر توضیح میدهیم.
تنظیمات Save To Library
با انتخاب این گزینه تنظیمات صورت گرفته و طراحیهای انجام شده برای المان در کتابخانه دیوی بیلدر ذخیره میشوند.
گزینه Save To Divi Cloud
از جمله ویژگیهای دیوی بیلدر این است که فضای ذخیره سازی ابری به نام Divi Cloud را برای کاربران فراهم میکند. با انتخاب این گزینه از میان گزینههای تنظیمات، المان شما در آن فضای آنلاین ذخیره می شود.
گزینه Disable
با انتخاب این گزینه خیلی سریع میتوانید تصمیم بگیرید که المان موردنظر در چه رزولوشنهایی (موبایل، تبلت یا دسکتاپ) نمایش داده شود یا نشود. به عنوان مثال در تصویر زیر المان مربوطه در رزولوشن تبلت غیرفعال شده است (آیکون قرمز رنگ) و در آن ابعاد نمایش داده نخواهد شد.
تنظیمات Lock
این مورد از ویژگیهای دیوی بیلدر باعث میشود به نوعی المان موردنظر قفل شود و دیگر تغییراتی در آن اعمال نشود. برای آن که المان قفل شده را از حالت قفل خارج کنید، بر روی علامت قرمزرنگ قفل در کنار المان کلیک کنید.
علاوه بر موارد ذکرشده، گزینههای دیگری نیز در بخش تنظیمات هر المان وجود دارند که ما برای رعایت اختصار در این آموزش Divi Builder از توضیح بیشتر در مورد آنها صرفنظر میکنیم. ضمن آنکه برخی از آنها به راحتی از نامشان قابل تشخیص هستند و عملکرد آنها معلوم است.
جمعبندی
در این مقاله به آموزش Divi Builder و مفاهیم اولیه و پایه آن پرداختیم. در مورد چگونگی شروع کار با افزونه دیوی بیلدر، استفاده از ویرایشگر آن و بلاکهای سازنده توضیحات مختصری ارائه کردیم. به طور کلی با ویژگیهای دیوی بیلدر آشنا شدیم. البته بسیاری از ویژگیها، المانها و قابلیتهای این صفحه ساز وردپرسی هنوز نیاز به بحث و بررسی فراوان دارند. ان شاء ا… در مقالههای بعدی به بررسی سایر ویژگیها میپردازیم. همچنین اگر مقاله «قالب دیوی چیست؟» را نخواندهاید، جهت آشنایی بیشتر حتماً آن را مطالعه بفرمایید.
پاورقی:
- 1sections
- 2rows
- 3columns
- 4modules