آیا می خواهید یک نمودار سازمانی در Divi ایجاد کنید؟
بدانید که چگونه یک طرح بندی فلوچارت ایجاد کنید DIVI فرصت‌های زیادی را برای برقراری ارتباط بین فرآیندها و ایده‌ها باز می‌کند وب سایت. در برخی موارد، فلوچارت ها را می توان برای توضیح ایده های بسیار پیچیده که شامل تعداد زیادی از عناصر است، استفاده کرد.
در یک وب سایتبا این حال، دستیابی به این فلوچارت های پیچیده تر می تواند دشوار باشد، به خصوص اگر می خواهید پاسخگو باشد.
در این آموزش، ما به شما نشان خواهیم داد که چگونه یک طرح بندی فلوچارت مفیدی ایجاد کنید که بتوانید از آن در خود استفاده کنید. وب سایت، ساده، موثر و پاسخگو.
به علاوه، ما فقط از گزینه های داخلی Divi برای ایجاد آن استفاده خواهیم کرد، بنابراین لازم نیست نگران اضافه کردن کد یا افزونه های سفارشی باشید.
بیایید شروع کنیم!
بررسی
در اینجا نگاهی سریع به طراحی فلوچارت داریم که در این آموزش ایجاد خواهیم کرد.
یک صفحه جدید با Divi Builder ایجاد کنید
برای شروع، باید موارد زیر را انجام دهید:
از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید
عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید
سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)
پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.
نحوه ایجاد طرح بندی فلوچارت در Divi
مرحله 1: یک ردیف با تار وسط ایجاد کنید
برای شروع ایجاد طرح‌بندی فلوچارت در Divi، با ایجاد یک ردیف حاوی blurb در مرکز شروع می‌کنیم. این اولین عنصر فلوچارت خواهد بود.
بخش بالشتک
ابتدا تنظیمات بخش را برای قسمت پیش فرض باز کنید و padding پایین را روی 0px قرار دهید.
- بالشتک (پایین): 0 پیکسل
خط
در داخل بخش، یک ردیف به یک ستون اضافه کنید.
تنظیمات خط را باز کنید و تنظیمات طراحی زیر را به روز کنید:
- پهنای ناودان: 1
- بالشتک (بالا و پایین): 0 پیکسل
Blurb Mod Design
برای ایجاد اولین عنصر فلوچارت خود، از ماژول Blurb استفاده می کنیم.
یک ماژول Blurb را به صورت درون خطی درج کنید.
تنظیمات ماژول
تنظیمات ماژول Blurb را باز کنید. زیر زبانه محتوا، می توانید عنوان و متن پیش فرض را نگه دارید.
سپس تصویر را با یک تصویر آیکون کوچک به روز کنید یا از یکی از نمادهای Divi داخلی استفاده کنید. برای این آموزش از آیکون های موجود در بسته طرح بندی تامین مالی جمعی .
سپس به ماژول یک رنگ پس زمینه بدهید:
- پس زمینه: #f8f8f8
زیر زبانه طرح، موارد زیر را به روز کنید:
- تراز متن: در مرکز
- حداکثر عرض: 400 پیکسل (رومیزی و رایانه لوحی)، 90٪ (تلفن)
- ماژول تراز: مرکز
- بالشتک: 6% (بالا و پایین)، 3% (چپ و راست)
در مرحله بعد، به ماژول Blurb یک مرز به صورت زیر بدهید:
- عرض حاشیه: 2 پیکسل
مرحله 2: ایجاد خط اتصال با یک خط عمودی و یک فلش
برای بخش بعدی طرح‌بندی فلوچارت، یک ردیف از رابط‌ها ایجاد می‌کنیم که دارای یک خط عمودی و فلش در مرکز هستند. این خط برای اتصال خطوط استفاده خواهد شد محتویات نمودار سازمانی که باید به سمت پایین صفحه ادامه یابد.
در این حالت، می‌خواهیم فلوچارت را با اضافه کردن یک خط و یک فلش در زیر خط قبلی و در مرکز ماژول Blurbn شروع کنیم.
یک خط جدید ایجاد کنید و استایل های خط قبلی را کپی/پیست کنید
برای انجام این کار، یک ردیف جدید به ستون زیر ردیف قبلی اضافه کنید.
با استفاده از " سایر تنظیمات ماژول (یا روی گزینه‌ها کلیک راست کنید)، استایل‌های ردیف قبلی را کپی کرده و در ردیف جدید قرار دهید.
ایجاد جداکننده خطوط عمودی
برای ایجاد جداکننده خطوط عمودی، یک ماژول Divider جدید به خط اضافه کنید.
در قسمت تنظیمات تقسیم کننده، تنظیمات طراحی را به صورت زیر به روز کنید:
- رنگ خط: #333333
- موقعیت خط: پایین
- وزن تقسیم کننده: 150 پیکسل
- عرض: 2 پیکسل
- ماژول تراز: مرکز
- حاشیه: -1 پیکسل (پایین)
زیر زبانه فناوری، سرریز را به صورت زیر پنهان کنید:
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
یک فلش با ماژول Blurb ایجاد کنید
در مرحله بعد، یک نماد فلش ایجاد می کنیم که با استفاده از یک ماژول ارائه، بالای خط تقسیم قرار می گیرد.
برای ایجاد فلش، یک ماژول Blurb جدید در زیر تقسیم‌کننده اضافه کنید.
تنظیمات مد Blurb
در تنظیمات ماژول، عنوان پیش‌فرض و متن متن را حذف کرده و کلیک کنید استفاده از نماد، سپس نماد فلش را انتخاب کنید (نگاه کنید به تصویر).
زیر زبانه طرح، موارد زیر را به روز کنید:
- رنگ نماد: #bbbbbb
- تراز تصویر/آیکون: مرکز
- استفاده از نماد اندازه قلم: بله
- اندازه قلم نماد: 50 پیکسل (رومیزی)، 40 پیکسل (تبلت و تلفن)
- حداکثر عرض: 50٪
- ماژول تراز: مرکز
- ارتفاع: 50 پیکسل (رومیزی)، 40 پیکسل (تبلت و تلفن)
زیر زبانه فناوری، CSS زیر را به آن اضافه کنید تصویر تار :
margin-bottom: 0px;
background: #ffffff;
برای قرار دادن فلش در بالای خط، موارد زیر را به روز کنید:
- موقعیت: مطلق
- مکان: مرکز
- Z Index: 10
مرحله 3: ایجاد یک خط برای قسمت های مجاور فلوچارت
پس از تکمیل ردیف کانکتورها، برای ادامه طراحی فلوچارت، ردیف دیگری از چندین ماژول Blurb مجاور را اضافه می کنیم.
برای اضافه کردن خط، به سادگی خط اول (خط با محو مرکزی که در بالای طرح ایجاد کردیم) را در زیر خط اتصال کپی و جایگذاری کنید.
تنظیمات خط را باز کنید و موارد زیر را به روز کنید:
- حداکثر عرض: 50٪
- عرض حاشیه: 2 پیکسل
سمت چپ فلوچارت
اکنون که مرز ما به خط اضافه شده است، ماژول Blurb را بالای خط مرز سمت چپ قرار می دهیم.
برای انجام این کار، تنظیمات طراحی زیر را به روز کنید:
- ماژول تراز: سمت چپ
- حاشیه: 70 پیکسل (بالا و پایین)
- Transform Translate X محور: -50%
این کلید برای قرار گرفتن ماژول Blurb به صورت افقی بالای خط مرز است.
سمت راست فلوچارت
برای اضافه کردن یک ماژول Blurb دیگر در خط مرزی سمت راست، تار موجود را کپی کنید.
برای قرار دادن محو روی خط حاشیه سمت راست، به برگه بروید فناوری و به آن یک موقعیت مطلق بدهید:
- موقعیت: مطلق
- مکان: وسط سمت راست
در مرحله بعد، گزینه های زیر را به روز کنید:
- حاشیه ها: هیچ
- تبدیل محور Y Translate: -50%
- Transform Translate X محور: 50%
فلش هایی به گوشه های هر خط مرزی اضافه شده است
برای اینکه فلوچارت در مورد جهتی که ردیف‌ها در حال پیشرفت هستند واضح‌تر شود، آیکون‌های فلش دیگری را روی ردیف‌های حاشیه ردیف اضافه می‌کنیم.
فلش بالا سمت چپ
برای افزودن یک فلش به ردیف حاشیه سمت چپ بالا، ماژول Blurb پیکانی را که در ردیف رابط ایجاد کرده‌ایم کپی کنید و آن را به ردیف حاوی ماژول‌های Blurb مجاور بکشید.
ماژول Duplicate Arrow Blurb را باز کنید و نماد را به فلش سمت چپ تغییر دهید.
بعد، مکان موقعیت ماژول را به روز کنید:
- مکان: بالا سمت چپ
در نهایت، گزینه translate translate را به صورت زیر به روز کنید:
- تبدیل محور Y Translate: -50%
فلش بالا سمت راست
برای ایجاد فلشی که روی خط حاشیه سمت راست بالایی قرار دارد، فلش را کپی کنید. در گوشه بالا سمت چپ که ما به تازگی ایجاد کرده ایم. سپس تنظیمات را باز کنید و مکان موقعیت را تغییر دهید:
- مکان: بالا سمت راست
همچنین نماد فلش را با یک فلش سمت راست به روز کنید.
فلش پایین سمت چپ
برای ایجاد فلشی که روی خط حاشیه سمت چپ پایین قرار دارد، فلش را کپی کنید. بالا سمت راست که ما به تازگی ایجاد کرده ایم.
سپس تنظیمات را باز کنید و مکان موقعیت را تغییر دهید:
- مکان: پایین سمت چپ
سپس گزینه Transform Translate را به روز کنید:
- تبدیل محور Y Translate: 50%
فلش پایین سمت راست
برای ایجاد فلشی که روی خط حاشیه سمت راست پایین قرار دارد، فلش را کپی کنید. در پایین سمت چپ که ما به تازگی ایجاد کرده ایم.
سپس تنظیمات را باز کنید و مکان موقعیت را تغییر دهید:
- مکان: پایین سمت راست
همچنین نماد فلش را با یک فلش سمت چپ به روز کنید.
پس از قرار دادن تمام فلش ها، می توانید برچسب ها را برای هر کدام با استفاده از به روز رسانی کنید نمای لایه .
مرحله 4: اضافه کردن یک خط اتصال دیگر
هنگامی که خط را با دو قسمت مجاور فلوچارت و تمام فلش ها تکمیل کردیم، می توانیم با اضافه کردن یک خط اتصال دیگر، فلوچارت را ادامه دهیم.
برای انجام این کار، خط اتصالی را که در بالا ایجاد کردیم کپی کنید و آن را در زیر خط حاوی ماژول های Blurb از قسمت مجاور فلوچارت قرار دهید.
مرحله 5: سفارشی کردن جریان با یک رابط خط لبه مستقیم
در طرح فلوچارت موجود، جریان از عنصر بالایی شروع می شود، سپس به سمت راست و چپ المان های مجاور منشعب می شود، سپس به وسط باز می گردد و به عنصر میانی بعدی می رود.
برای سفارشی کردن جریان، بخش را کپی می کنیم تا بتوانیم فلوچارت را طوری تنظیم کنیم که در عنصر(های) ارائه مجاور در سمت چپ متوقف شود و از عنصر ارائه در سمت راست ادامه یابد.
بخش تکراری
برای این کار ابتدا کل بخش حاوی فلوچارت را کپی کنید.
یک ماژول تاری چپ دیگر اضافه کنید
در بخش تکراری (پایین)، ماژول Blurb سمت چپ را در ردیف حاوی دو ماژول مجاور قرار دهید. سپس، تار را در سمت چپ کپی کنید تا مستقیماً در زیر یک تصویر جدید ایجاد کنید.
فلش های پایین و حاشیه را بردارید
سپس فلش پایین سمت چپ و فلش پایین سمت راست را حذف کنید.
تنظیمات خط را برای خط حاوی چندین تار باز کنید و حاشیه پایین را بردارید:
- عرض حاشیه پایین: 0 پیکسل
یک خط با یک رابط خط مرزی مستقیم ایجاد کنید
اکنون می‌خواهیم طرح فلوچارت را با یک کانکتور خط مرزی راست سفارشی کنیم که خط مرزی سمت راست خط را با خط اتصال زیر متصل می‌کند.
برای انجام این کار، یک خط دیگر ایجاد می کنیم و یک خط تقسیم کننده سفارشی و یک فلش طرح کلی در سمت راست اضافه می کنیم.
یک ردیف جدید یک ستون زیر ردیف موجود با سه طرح‌بندی اضافه کنید.
تنظیمات ردیف را به صورت زیر در زیر تب به روز کنید طرح :
- عرض ناودان: 1
- حداکثر عرض: 50٪
- بالشتک: 0 پیکسل (بالا و پایین)
بعد، یک حاشیه مستقیم به خط اضافه کنید.
- عرض حاشیه سمت راست: 2 پیکسل
سپس یک ماژول Divider را به خط اضافه کنید.
تنظیمات تقسیم کننده را به صورت زیر به روز کنید:
- رنگ خط: #333333
- موقعیت خط: پایین
- وزن تقسیم کننده: 2 پیکسل
- عرض: 50%
- حاشیه: -2 پیکسل (پایین)
در زبانه پیشرفته، موقعیت جداکننده را به روز کنید:
- موقعیت: مطلق
- مکان: پایین سمت راست
در حالی که تقسیم کننده در جای خود قرار دارد، ماژول Blurb را از فلش پایین سمت راست ردیف سوم قسمت اول کپی کنید و آن را در ردیف با خط تقسیم سمت راست قرار دهید.
تنظیمات ماژول Blurb پیکانی را که به تازگی کپی کرده اید و جابجا کرده اید باز کنید و موارد زیر را به روز کنید:
- موقعیت: پیش فرض
- ماژول تراز: سمت راست
توقف جریان خط مرزی چپ
در حال حاضر، بخشی از حاشیه سمت چپ در زیر تار در پایین سمت چپ قرار دارد. برای پنهان کردن آن، به سادگی حاشیه پایین این تار پایین را حذف کنید.
مرحله 6: به روز رسانی خط با یک رابط خط لبه سمت چپ
فلوچارت شما ممکن است به یک رابط خط مرزی سمت چپ نیز نیاز داشته باشد. برای ایجاد آن، می توانیم خط را با کانکتور خط مرزی سمت راست به صورت زیر به روز کنیم:
- عرض Boprder سمت چپ: 2px
- عرض حاشیه سمت راست: 0
جداکننده داخل خط را با یک مکان جدید به روز کنید:
- مکان: پایین سمت چپ
بعد، تراز فلش را به روز کنید:
- ماژول تراز: سمت چپ
و آیکون را به فلش سمت راست تغییر دهید.
نتیجه نهایی
نتیجه نهایی را بررسی کنید.
اکنون DIVI را دانلود کنید!!!
نتیجه
در این آموزش، ما یک طرح بندی فلوچارت مفید ایجاد کرده ایم که هر کسی می تواند از آن برای برقراری ارتباط بین فرآیندها و ایده ها استفاده کند. آخرین بازدید با طراحی واکنشگرا خیره کننده
از آن برای نمایش خدمات یا فرآیند طراحی، ایجاد یک اینفوگرافیک یا راهنمایی مشتریان از طریق آن استفاده کنید محتویات به روشی جدید
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.
دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
