আপনি কি ডিভিতে একটি সাংগঠনিক চার্ট তৈরি করতে চান?
কিভাবে একটি ফ্লোচার্ট লেআউট তৈরি করতে হয় তা জানুন Divi একটি ওয়েবসাইটে প্রক্রিয়া এবং ধারণাগুলি যোগাযোগের জন্য অনেক সুযোগ খুলে দেয়। কিছু ক্ষেত্রে, ফ্লোচার্টগুলি প্রচুর সংখ্যক উপাদান জড়িত অত্যন্ত জটিল ধারণাগুলি ব্যাখ্যা করার জন্য ব্যবহার করা যেতে পারে।
তবে, একটি ওয়েবসাইটে, এই জটিল ফ্লোচার্টগুলি অর্জন করা কঠিন হতে পারে, বিশেষ করে যদি আপনি এটিকে প্রতিক্রিয়াশীল করতে চান।
এই টিউটোরিয়ালে, আমরা আপনাকে দেখাব কিভাবে একটি সহজ ফ্লোচার্ট লেআউট তৈরি করতে হয় যা আপনি আপনার ওয়েবসাইটে ব্যবহার করতে পারেন যা সহজ, কার্যকরী এবং প্রতিক্রিয়াশীল।
এছাড়াও, আমরা এটি তৈরি করতে শুধুমাত্র Divi-এর অন্তর্নির্মিত বিকল্পগুলি ব্যবহার করব, তাই আপনাকে কাস্টম কোড বা প্লাগইন যোগ করার বিষয়ে চিন্তা করতে হবে না।
এর শুরু করা যাক!
জরিপ
এই টিউটোরিয়ালে আমরা যে ফ্লোচার্ট ডিজাইনটি তৈরি করব তা এখানে একটি দ্রুত দেখুন।
ডিভি বিল্ডারের সাথে একটি নতুন পৃষ্ঠা তৈরি করুন
শুরু করার জন্য, আপনাকে নিম্নলিখিতগুলি করতে হবে:
ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান পৃষ্ঠাগুলি> নতুন যুক্ত করুন একটি নতুন পৃষ্ঠা তৈরি করতে।
এটিকে একটি শিরোনাম দিন যা আপনার কাছে বোধগম্য হয় এবং ক্লিক করুন Divi বিল্ডার ব্যবহার করুন
তারপর ক্লিক করুন বিল্ডিং শুরু করুন (স্ক্র্যাচ থেকে বিল্ড)
এর পরে, ডিভিতে ডিজাইনিং শুরু করার জন্য আপনার কাছে একটি ফাঁকা ক্যানভাস থাকবে।
ডিভিতে কীভাবে একটি ফ্লোচার্ট লেআউট তৈরি করবেন
ধাপ 1: কেন্দ্রীভূত ব্লার্ব দিয়ে একটি সারি তৈরি করুন
Divi-এ ফ্লোচার্ট লেআউট তৈরি করা শুরু করতে, আমরা কেন্দ্রীভূত ব্লার্ব সহ একটি সারি তৈরি করে শুরু করব। এটি ফ্লোচার্টের প্রথম উপাদান হবে।
বিভাগ প্যাডিং
প্রথমে, ডিফল্ট বিভাগের জন্য বিভাগ সেটিংস খুলুন এবং নীচের প্যাডিংটি 0px এ সেট করুন।
- প্যাডিং (নীচে): 0px
লাইন
বিভাগের ভিতরে, একটি কলামে একটি সারি যোগ করুন।
লাইন সেটিংস খুলুন এবং নিম্নলিখিত নকশা সেটিংস আপডেট করুন:
- গটার প্রস্থ: 1
- প্যাডিং (শীর্ষ এবং নীচে): 0px
ব্লার্ব মোড ডিজাইন
আমাদের প্রথম ফ্লোচার্ট উপাদান তৈরি করতে, আমরা একটি Blurb মডিউল ব্যবহার করব।
ইনলাইনে একটি ব্লার্ব মডিউল ঢোকান।
মডিউল সেটিংস
Blurb মডিউল সেটিংস খুলুন। ট্যাবের নিচে সন্তুষ্ট, আপনি ডিফল্ট শিরোনাম এবং বডি টেক্সট রাখতে পারেন।
তারপরে একটি ছোট আইকন ইমেজ সহ ইমেজ আপডেট করুন বা বিল্ট-ইন ডিভি আইকনগুলির একটি ব্যবহার করুন। এই টিউটোরিয়ালের জন্য, আমরা থেকে আইকন ব্যবহার করি ক্রাউডফান্ডিং লেআউট প্যাক .
তারপর মডিউলটিকে একটি পটভূমির রঙ দিন:
- পটভূমি: #f8f8f8
ট্যাবের নীচে নকশা, নিম্নলিখিত আপডেট করুন:
- পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
- সর্বোচ্চ প্রস্থ: 400px (ডেস্কটপ এবং ট্যাবলেট), 90% (ফোন)
- প্রান্তিককরণ মডিউল: কেন্দ্র
- প্যাডিং: 6% (উপর এবং নীচে), 3% (বাম এবং ডান)
এর পরে, ব্লার্ব মডিউলটিকে নিম্নরূপ একটি বর্ডার দিন:
- সীমানা প্রস্থ: 2px
ধাপ 2: একটি উল্লম্ব লাইন এবং একটি তীর দিয়ে সংযোগ লাইন তৈরি করা
আমাদের ফ্লোচার্ট লেআউটের পরবর্তী অংশের জন্য, আমরা একটি কেন্দ্রীভূত উল্লম্ব রেখা এবং তীর সহ সংযোগকারীগুলির একটি সারি তৈরি করব। এই লাইনটি ফ্লোচার্ট বিষয়বস্তু লাইনগুলিকে সংযুক্ত করতে ব্যবহার করা হবে যা পৃষ্ঠার নিচে চলতে হবে।
এই ক্ষেত্রে, আমরা Blurbn মডিউলকে কেন্দ্র করে পূর্ববর্তী লাইনের নীচে একটি লাইন এবং একটি তীর যোগ করে ফ্লোচার্ট শুরু করতে চাই।
একটি নতুন লাইন তৈরি করুন এবং পূর্ববর্তী লাইন থেকে শৈলীগুলি অনুলিপি/পেস্ট করুন
এটি করার জন্য, পূর্ববর্তী সারির নীচে একটি কলামে একটি নতুন সারি যোগ করুন।
ব্যবহার করে " অন্যান্য মডিউল সেটিংস (বা ডান-ক্লিক বিকল্পগুলি), উপরের পূর্ববর্তী সারি থেকে শৈলীগুলি অনুলিপি করুন এবং সেগুলিকে নতুন সারিতে আটকান৷
একটি উল্লম্ব লাইন বিভাজক তৈরি করা হচ্ছে
উল্লম্ব লাইন বিভাজক তৈরি করতে, লাইনে একটি নতুন বিভাজক মডিউল যোগ করুন।
বিভাজক সেটিংসের অধীনে, নিম্নরূপ নকশা সেটিংস আপডেট করুন:
- লাইনের রঙ: #333333
- লাইনের অবস্থান: নীচে
- বিভাজক ওজন: 150px
- প্রস্থ: 2px
- প্রান্তিককরণ মডিউল: কেন্দ্র
- মার্জিন: -1px (নীচে)
ট্যাবের নীচে অগ্রসর, নিম্নরূপ ওভারফ্লো লুকান:
- অনুভূমিক ওভারফ্লো: লুকানো
- উল্লম্ব ওভারফ্লো: লুকানো
একটি ব্লার্ব মডিউল দিয়ে একটি তীর তৈরি করুন
এর পরে, আমরা একটি তীরচিহ্ন তৈরি করব যা একটি উপস্থাপনা মডিউল ব্যবহার করে বিভাজন রেখার উপরে বসবে।
তীরটি তৈরি করতে, বিভাজকের নীচে একটি নতুন ব্লার্ব মডিউল যোগ করুন।
ব্লার্ব মোড সেটিংস
মডিউল সেটিংসের অধীনে, ডিফল্ট শিরোনাম এবং বডি টেক্সট সরান এবং ক্লিক করুন আইকন ব্যবহার করুন, তারপর তীর আইকন নির্বাচন করুন (স্ক্রিনশট দেখুন)।
ট্যাবের নীচে নকশা, নিম্নলিখিত আপডেট করুন:
- আইকনের রঙ: #bbbbbb
- ছবি/আইকন প্রান্তিককরণ: কেন্দ্র
- আইকন ফন্ট সাইজ ব্যবহার করুন: হ্যাঁ
- আইকন ফন্ট সাইজ: 50px (ডেস্কটপ), 40px (ট্যাবলেট এবং ফোন)
- সর্বোচ্চ প্রস্থ: 50%
- প্রান্তিককরণ মডিউল: কেন্দ্র
- উচ্চতা: 50px (ডেস্কটপ), 40px (ট্যাবলেট এবং ফোন)
ট্যাবের নীচে অগ্রসর, নিম্নলিখিত CSS যোগ করুন ব্লার্ব ইমেজ :
margin-bottom: 0px;
background: #ffffff;
লাইনের উপরে তীর অবস্থান করতে, নিম্নলিখিত আপডেট করুন:
- অবস্থান: পরম
- অবস্থান: কেন্দ্র
- Z সূচক: 10
ধাপ 3: ফ্লোচার্টের সংলগ্ন অংশগুলির জন্য একটি লাইন তৈরি করা
একবার সংযোগকারীর সারি সম্পূর্ণ হলে, আমরা ফ্লোচার্ট ডিজাইনটি চালিয়ে যেতে বেশ কয়েকটি সংলগ্ন ব্লার্ব মডিউলের আরেকটি সারি যোগ করব।
লাইনটি যোগ করতে, সংযোগকারী লাইনের নীচে প্রথম লাইনটি (লেআউটের শীর্ষে আমরা কেন্দ্রীভূত ব্লার্ব সহ লাইনটি তৈরি করেছি) কপি এবং পেস্ট করুন।
লাইন সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন:
- সর্বোচ্চ প্রস্থ: 50%
- সীমানা প্রস্থ: 2px
ফ্লোচার্টের বাম দিকে
এখন যেহেতু আমাদের সীমানা লাইনে যোগ করা হয়েছে, আমরা Blurb মডিউলটিকে বাম বর্ডার লাইনের উপরে রাখব।
এটি করার জন্য, নিম্নলিখিত নকশা সেটিংস আপডেট করুন:
- প্রান্তিককরণ মডিউল: বাম
- মার্জিন: 70px (শীর্ষ এবং নীচে)
- ট্রান্সফর্ম ট্রান্সলেট এক্স অক্ষ: -50%
ব্লার্ব মডিউলটি সীমানা রেখার উপরে অনুভূমিকভাবে কেন্দ্রীভূত হওয়ার জন্য এটি গুরুত্বপূর্ণ।
ফ্লোচার্টের ডান পাশে
ডান বর্ডার লাইনে আরেকটি ব্লার্ব মডিউল যোগ করতে, বিদ্যমান ব্লার্বের নকল করুন।
ডান সীমানা রেখায় ব্লার্ব স্থাপন করতে, ট্যাবে যান অগ্রসর এবং এটি একটি পরম অবস্থান দিন:
- অবস্থান: পরম
- অবস্থান: ডান কেন্দ্রে
পরবর্তী, নিম্নলিখিত বিকল্পগুলি আপডেট করুন:
- মার্জিন: কোনোটিই নয়
- ট্রান্সফর্ম ট্রান্সলেট Y অক্ষ: -50%
- ট্রান্সফর্ম ট্রান্সলেট এক্স অক্ষ: ৫০%
প্রতিটি সীমানা রেখার কোণায় তীর যুক্ত করা হয়েছে
সারিগুলি যে দিকে অগ্রসর হচ্ছে সে সম্পর্কে ফ্লোচার্টটিকে আরও পরিষ্কার করতে, আমরা সারির সীমানা সারিতে অতিরিক্ত তীর আইকন যুক্ত করব।
উপরের বাম তীর
উপরের বাম সীমানা সারিতে একটি তীর যোগ করতে, সংযোগকারী সারিতে আমরা তৈরি করা তীর ব্লার্ব মডিউলটি নকল করুন এবং এটিকে সংলগ্ন ব্লার্ব মডিউল ধারণকারী সারিতে টেনে আনুন।
ডুপ্লিকেট অ্যারো ব্লার্ব মডিউলটি খুলুন এবং আইকনটিকে একটি বাম-পয়েন্টিং তীরে পরিবর্তন করুন।
এরপর, মডিউলের অবস্থান আপডেট করুন:
- অবস্থান: উপরে বাম
অবশেষে, ট্রান্সফর্ম অনুবাদ বিকল্পটি নিম্নরূপ আপডেট করুন:
- ট্রান্সফর্ম ট্রান্সলেট Y অক্ষ: -50%
উপরের ডানদিকে তীরচিহ্ন
উপরের ডানদিকের সীমানা রেখায় বসে একটি তীর তৈরি করতে, তীরটি নকল করুন " বাম উপরের কোণে » যা আমরা তৈরি করেছি। তারপর সেটিংস খুলুন এবং অবস্থানের অবস্থান পরিবর্তন করুন:
- অবস্থান: উপরের ডানদিকে
এছাড়াও একটি ডান-পয়েন্টিং তীর দিয়ে তীর আইকন আপডেট করুন।
নীচে বাম তীর
নীচের বাম সীমানা রেখায় বসে একটি তীর তৈরি করতে, তীরটি নকল করুন " উপরের ডানে যে আমরা তৈরি করেছি।
তারপর সেটিংস খুলুন এবং অবস্থানের অবস্থান পরিবর্তন করুন:
- অবস্থান: নীচে বাম
এর পরে, ট্রান্সফর্ম ট্রান্সলেট বিকল্পটি আপডেট করুন:
- রূপান্তর অনুবাদ Y অক্ষ: 50%
নিচে ডানদিকে তীর
নীচের ডান সীমানা রেখায় বসে একটি তীর তৈরি করতে, তীরটি নকল করুন " নীচে বাম দিকে যে আমরা তৈরি করেছি।
তারপর সেটিংস খুলুন এবং অবস্থানের অবস্থান পরিবর্তন করুন:
- অবস্থান: নীচে ডানদিকে
এছাড়াও একটি বাম-পয়েন্টিং তীর দিয়ে তীর আইকন আপডেট করুন।
একবার সমস্ত তীর স্থাপন করা হলে, আপনি ব্যবহার করে প্রতিটির জন্য লেবেল আপডেট করতে পারেন স্তর দৃশ্য .
ধাপ 4: অন্য সংযোগকারী লাইন যোগ করা
একবার আমরা ফ্লোচার্টের দুটি সংলগ্ন অংশ এবং সমস্ত তীরগুলির সাথে লাইনটি সম্পূর্ণ করার পরে, আমরা আরেকটি সংযোগকারী লাইন যোগ করে ফ্লোচার্টটি চালিয়ে যেতে পারি।
এটি করার জন্য, আমরা উপরে যে সংযোগকারী লাইনটি তৈরি করেছি তা নকল করুন এবং ফ্লোচার্টের সংলগ্ন অংশ থেকে ব্লার্ব মডিউলগুলি ধারণকারী লাইনের নীচে পেস্ট করুন।
ধাপ 5: একটি স্ট্রেইট এজ লাইন কানেক্টর দিয়ে ফ্লো কাস্টমাইজ করা
বিদ্যমান ফ্লোচার্ট ডিজাইনে, প্রবাহটি শীর্ষ উপাদান দিয়ে শুরু হয়, তারপরে ডানে এবং বাম সংলগ্ন উপাদানগুলিতে শাখা হয়, তারপর মাঝখানে ফিরে আসে এবং পরবর্তী মধ্যম উপাদানে যায়।
প্রবাহটি কাস্টমাইজ করতে, আমরা বিভাগটিকে নকল করব যাতে আমরা ফ্লোচার্টটিকে কাস্টমাইজ করতে পারি বাম দিকে সংলগ্ন উপস্থাপনা উপাদান(গুলি) এ থামতে এবং ডানদিকে উপস্থাপনা উপাদান থেকে চালিয়ে যেতে পারি।
সদৃশ বিভাগ
এটি করার জন্য, প্রথমে ফ্লোচার্ট সম্বলিত সম্পূর্ণ অংশটি নকল করুন।
আরেকটি বাম ব্লার্ব মডিউল যোগ করুন
ডুপ্লিকেট বিভাগে (নীচে), দুটি সংলগ্ন মডিউল ধারণকারী সারিতে বাম ব্লার্ব মডিউলটি সনাক্ত করুন। তারপরে, সরাসরি নীচে একটি নতুন তৈরি করতে বাম দিকের ব্লার্বটি নকল করুন৷
নীচের তীর এবং সীমানা সরান
এর পরে, নীচের বাম তীর এবং নীচের ডান তীরটি মুছুন।
একাধিক ব্লার্ব ধারণকারী লাইনের জন্য লাইন সেটিংস খুলুন এবং নীচের সীমানাটি সরান:
- নিচের সীমানার প্রস্থ: 0px
একটি সরল সীমানা লাইন সংযোগকারী দিয়ে একটি লাইন তৈরি করুন
এখন আমরা একটি ডান বর্ডার লাইন কানেক্টর দিয়ে ফ্লোচার্ট ডিজাইন কাস্টমাইজ করতে চাই যা লাইনের ডান বর্ডার লাইনকে নিচের কানেক্টর লাইনের সাথে কানেক্ট করবে।
এটি করার জন্য, আমরা আরেকটি লাইন তৈরি করব এবং একটি কাস্টম ডিভাইডার লাইন এবং ডান দিকে একটি আউটলাইন তীর যোগ করব।
তিনটি লেআউট সহ বিদ্যমান সারির নিচে একটি নতুন সারি এক কলাম যোগ করুন।
ট্যাবের অধীনে সারি সেটিংস নিম্নরূপ আপডেট করুন নকশা :
- নর্দমার প্রস্থ: 1
- সর্বোচ্চ প্রস্থ: 50%
- প্যাডিং: 0px (শীর্ষ এবং নীচে)
এর পরে, লাইনে একটি সোজা সীমানা যোগ করুন।
- ডান সীমানা প্রস্থ: 2px
তারপর লাইনে একটি ডিভাইডার মডিউল যোগ করুন।
নিম্নরূপ বিভাজক সেটিংস আপডেট করুন:
- লাইনের রঙ: #333333
- লাইনের অবস্থান: নীচে
- বিভাজকের ওজন: 2px
- প্রস্থ: 50%
- মার্জিন: -2px (নীচে)
উন্নত ট্যাবের অধীনে, বিভাজকের অবস্থান আপডেট করুন:
- অবস্থান: পরম
- অবস্থান: নীচে ডানদিকে
বিভাজকটি জায়গায় রেখে, প্রথম বিভাগের তৃতীয় সারির নীচের ডানদিকের তীর থেকে ব্লার্ব মডিউলটি অনুলিপি করুন এবং ডান বিভাজক লাইনের সাথে সারিতে পেস্ট করুন।
আপনি যে তীরের নকল করেছেন এবং সরানো হয়েছে তার ব্লার্ব মডিউল সেটিংস খুলুন এবং নিম্নলিখিতগুলি আপডেট করুন:
- অবস্থান: ডিফল্ট
- প্রান্তিককরণ মডিউল: ডান
বাম সীমান্ত লাইন প্রবাহ বন্ধ
বর্তমানে, বাম সীমানার অংশটি নীচের বামদিকে ব্লার্বের নীচে উন্মুক্ত করা হয়েছে৷ এটি লুকানোর জন্য, এই নীচের ব্লারবের নীচের মার্জিনটি সরান৷
ধাপ 6: একটি বাম প্রান্তের লাইন সংযোগকারী দিয়ে লাইন আপডেট করা হচ্ছে
আপনার ফ্লোচার্টের একটি বাম সীমানা লাইন সংযোগকারীরও প্রয়োজন হতে পারে। এটি তৈরি করতে, আমরা নিম্নরূপ ডান সীমানা লাইন সংযোগকারীর সাথে লাইনটি আপডেট করতে পারি:
- বাম বোপ্রডার প্রস্থ: 2px
- ডান সীমানা প্রস্থ: 0
একটি নতুন অবস্থান সহ লাইনের ভিতরে বিভাজক আপডেট করুন:
- অবস্থান: নীচে বাম
পরবর্তী, তীর প্রান্তিককরণ আপডেট করুন:
- প্রান্তিককরণ মডিউল: বাম
এবং একটি ডান তীর আইকন পরিবর্তন করুন.
চূড়ান্ত ফলাফল
শেষ ফলাফল দেখুন.
এখন DIVI ডাউনলোড করুন!!!
উপসংহার
এই টিউটোরিয়ালে, আমরা একটি কার্যকর ফ্লোচার্ট লেআউট তৈরি করেছি যা যে কেউ একটি অত্যাশ্চর্য প্রতিক্রিয়াশীল ডিজাইনের মাধ্যমে দর্শনার্থীদের কাছে প্রক্রিয়া এবং ধারণাগুলি যোগাযোগ করতে ব্যবহার করতে পারে।
পরিষেবা বা ডিজাইন প্রক্রিয়া প্রদর্শন করতে, একটি ইনফোগ্রাফিক তৈরি করতে, বা নতুন উপায়ে সামগ্রীর মাধ্যমে ক্লায়েন্টদের গাইড করতে এটি ব্যবহার করুন।
আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে আপনার পরবর্তী ডিভি প্রকল্পগুলির জন্য অনুপ্রাণিত করবে। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।
এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...