لرن بلاگ

تصویر آناناس به عنوان بنر مقاله آموزش divi-builder

آموزش Divi Builder، آغاز به کار با افزونه دیوی بیلدر

مقدمه

در این مقاله به نحوه کار با دیوی بیلدر می‌پردازیم. اگر با افزونه Divi Builder آشنایی ندارید و می‌خواهید بدانید که «دیوی بلیدر چیست؟» این مقاله برای شما مناسب است. ما در این مقاله به آموزش Divi Builder به شکل مقدماتی و برای افراد تازه کار می‌پردازیم. سعی می‌کنیم ویژگی‌های دیوی بیلدر را به خوبی توضیح دهیم. باید گفت که دیوی بیلدر یک صفحه ساز وردپرس است که قابلیت‌ها و ویژگی‌های مناسبی دارد. از جمله ویژگی‌های دیوی بیلدر، قابلیت کشیدن و رها کردن المان‌ها در ویرایشگر بصری آن است. شما برای استفاده از دیوی بیلدر، نیاز به دانش کدنویسی ندارید. البته اگر خودتان بخواهید می‌توانید از کدهای HTML یا CSS و ... در فرآیند طراحی صفحات وب‌سایت استفاده کنید. اما بدون آن کدها نیز قابلیت‌ها و ویژگی‌های دیوی بیلدر به شما امکان انجام یک طراحی سایت زیبا و دلپذیر را می‌دهد. در حین ساخت صفحات به کمک ویرایشگر دیوی بیلدر، می‌توانید تغییرات را به صورت لحظه‌ای مشاهده کنید. پس بهتر است بیشتر زمان را تلف نکنیم و به آموزش Divi Builder بپردازیم.

گام اول آموزش 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 است. این گزینه در منوی بالای سایت وردپرسی شما نمایش داده می‌شود. یعنی کافی است بعد از ورود به سایت به عنوان ادمین یا مدیر، بر روی لینک صفحه‌ای که می‌خواهید آن را ویرایش کنید کلیک نمایید. سپس این گزینه را که از ویژگی‌های دیوی بیلدر است کلیک کنید.

تصویر استفاده از گزینه enable-visual-builder در دیوی

آموزش Divi Builder: ساختار پایه

برای بررسی بیشتر ویژگی‌ های دیوی بیلدر، از مفاهیم پایه شروع می‌کنیم. در واقع المان‌های اصلی و ساختار پایه را در این ابزار شرح می‌دهیم. این المان‌ها که در اصطلاح building blocks نامیده می‌شوند، عبارتند از: بخش‌ها1sections، سطرها2rows، ستون‌ها3columns و ماژول‌ها4modules. بخش‌ها حاوی سطرها هستند. سطرها نیز به نوبه خود در برگیرنده ستون‌ها هستند. در پایان ستون‌ها نیز ماژول‌ها را در خود جای می‌دهند.

تصویر مربوط به آموزش divi-builder و ساختار پایه آن

در ادامه به توضیح مختصری در مورد هر یک از این چهار بخش سازنده ابزار دیوی بیلدر می‌پردازیم.

ویژگی‌ های دیوی بیلدر: بخش‌ها

در واقع بخش‌ها (sections) بزرگ‌ترین بلاک سازنده در Divi Builder هستند. هر چیز دیگری که شما بخواهید طراحی کنید، درون این section ها قرار می‌گیرند. در دیوی بیلدر سه نوع المان بخش وجود دارد: standard ، fullwidth و specialty.

بخش‌های standard

بخش‌های standard در دیوی بیلدر از رایج‌ترین المان‌ها هستند. اگر در ویرایشگر دیوی بیلدر قرار داشته باشید. برای اضافه کردن یک section به صفحه خود، کافی است بر روی علامت «به علاوه» آبی رنگی که مشاهده می‌کنید، کلیک نمایید. اگر آن را به صورت عادی مشاهده نمی‌کنید، باید موس خود را جابجا کنید تا در قسمت‌های خاصی از صفحه قرار بگیرد که این علامت ظاهر شود.

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

با کلیک بر روی آن، پنجره Insert Section نمایش داده می شود. در اینجا با کلیک بر روی گزینه Regular می‌توانید یک بخش standard به صفحه اضافه کنید.

تصویر بخش های مختلف موجود در دیوی بیلدر

بخش‌های fullwidth

نحوه ایجاد این بخش‌ها مشابه حالت استاندارد است. با این تفاوت که بعد از کلیک بر روی علامت «به علاوه آبی‌رنگ» گزینه Fullwidth را انتخاب می‌کنید. بخش‌های fullwidth برای استفاده از یک سری ماژول‌های خاص که ماژول‌های fullwidth نام دارند، مناسب هستند. مزیت این‌گونه ماژول‌ها و بخش‌ها آن است که تمام عرض مرورگر را پوشش می‌دهند.

تصویر مربوط به ماژول های fullwidth در divi-builder

بخش‌های specialty

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

تصویر مربوط به بخش specialty از ویژگی های دیوی بیلدر

یعنی در واقع تفاوت اصلی بخش‌های از نوع specialty با دو نوع قبلی در آن است که با کمک آن‌ها شما می‌توانید ستون‌های مختلف و سطرهای مختلف را به شکل دلخواه در کنار هم قرار دهید.

آموزش Divi Builder: سایر بلاک‌های سازنده

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

  • سطرها: سطرها یا Rows در داخل بخش‌ها قرار می‌گیرند و می‌توانند انواع مختلفی از ستون‌ها را در خود جای دهند. برای ایجاد یک سطر در داخل یک بخش باید بر روی علامت «به علاوه» سبز رنگ در محیط ویرایشگر دیوی بیلدر کلیک کنید.
  • ستون‌ها: ستون‌ها نیز در داخل سطرها جای می‌گیرند. وقتی یک سطر را ایجاد می‌کنید به صورت پیش فرض حداقل یک ستون در آن قرار می‌گیرد تا بتوانید ماژول‌های موردنظر خود را در آن ایجاد کنید.
  • ماژول‌ها: ماژول‌ها یا Modules در حقیقت همان المان‌های اصلی تشکیل دهنده صفحه سایت هستند. یعنی متن‌ها، تصاویر، آیکون‌ها، اسلایدرها و… همگی جزء این دسته محسوب می‌شوند. برای بررسی بیشتر انواع ماژول‌ها در دیوی بیلدر به این صفحه مراجعه کنید.

تنظیمات المان‌ها در دیوی بیلدر

اکنون که با برخی ویژگی‌های دیوی بیلدر آشنا شده‌اید، به بررسی برخی تنظیمات المان‌ها در این افزونه می‌پردازیم. برای دسترسی به تنظیمات هر المان، کافی است بر روی آیکون چرخ دنده که با بردن موس روی آن المان یا ماژول ظاهر می‌شود، کلیک کنید. بعد از آن شما به انواع تنظیمات آن المان و بخش‌های Design ، Content و Advanced دسترسی خواهید داشت.

تصویر مربوط به تنظیمات ماژول ها در دیوی بیلدر

در ادامه آموزش Divi Builder به توضیح برخی ویژگی‌های دیوی بیلدر که در بخش تنظیمات المان‌ها در دسترس هستند، می‌پردازیم.

نام المان

بعد از کلیک روی آیکون چرخ دنده و باز شدن پنجره تنظیمات در قسمت بالایی و سمت چپ، شما نام المان را مشاهده می‌کنید. بسته به اینکه روی یک ماژول یا سطر یا بخش و … کلیک کرده باشید، نام المان‌ها متفاوت خواهد بود.

تصویر مربوط به نام المان در دیوی بیلدر

قسمت Preset

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

تصویر مربوط به preset در دیوی بیلدر

تغییر ابعاد پنجره تنظیمات

از جمله ویژگی‌های دیوی بیلدر در بخش تنظیمات المان‌ها این است که می‌توانید ابعاد پنجره تنظیمات را تغییر دهید. این کار به وسیله آیکون‌های موجود در گوشه سمت راست و بالای پنجره صورت می‌گیرد. مثلاً با کلیک بر روی آیکون expand module می‌توانید ابعاد پنجره را به اندازه‌ ابعاد مرورگر خود گسترش دهید تا راحت بتوانید کار کنید.

تصویر مربوط به باز کردن و تغییر ابعاد پنجره

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

آموزش Divi Builder: سایر تنظیمات

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

تنظیمات Save To Library

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

گزینه Save To Divi Cloud

از جمله ویژگی‌های دیوی بیلدر این است که فضای ذخیره سازی ابری به نام Divi Cloud را برای کاربران فراهم می‌کند. با انتخاب این گزینه از میان گزینه‌های تنظیمات، المان شما در آن فضای آنلاین ذخیره می شود.

گزینه Disable

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

تصویر مربوط به disable در تنظیمات

تنظیمات Lock

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

تصویر مربوط به lock کردن المان در ویرایشگر افزونه دیوی بیلدر

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

جمع‌بندی

در این مقاله به آموزش Divi Builder و مفاهیم اولیه و پایه آن پرداختیم. در مورد چگونگی شروع کار با افزونه دیوی بیلدر، استفاده از ویرایشگر آن و بلاک‌های سازنده توضیحات مختصری ارائه کردیم. به طور کلی با ویژگی‌های دیوی بیلدر آشنا شدیم. البته بسیاری از ویژگی‌ها، المان‌ها و قابلیت‌های این صفحه ساز وردپرسی هنوز نیاز به بحث و بررسی فراوان دارند. ان شاء ا… در مقاله‌های بعدی به بررسی سایر ویژگی‌ها می‌پردازیم. همچنین اگر مقاله «قالب دیوی چیست؟» را نخوانده‌اید، جهت آشنایی بیشتر حتماً آن را مطالعه بفرمایید.

پاورقی:

  • 1
    sections
  • 2
    rows
  • 3
    columns
  • 4
    modules
در صورتی که از خواندن مقاله فوق لذت برده‌اید، احتمالا مطالب کتاب های زیر نیز می تواند برای شما مفید باشد. توصیه لرن بلاگ آن است که چنین کتاب هایی را تهیه کرده یا در صورت وجود نسخه آنلاین، به مطالعه آنلاین آنها بپردازید: