DIVI তে লগইন ফর্ম সহ একটি গ্লোবাল হেডার তৈরি করতে হবে?
আপনার হেডারে একটি লগইন ফর্ম তৈরি করা একটি দুর্দান্ত উৎসাহ হতে পারে ব্যবহারকারীর অভিজ্ঞতা.
এগুলি সাবস্ক্রিপশন ওয়েবসাইট এবং অনলাইন স্টোরের জন্য আদর্শ কারণ এগুলি ব্যবহারকারীদের ওয়েবসাইটের যেকোনো পৃষ্ঠায় যেকোনো সময় লগ ইন করতে দেয়।
এই টিউটোরিয়ালে, আমরা আপনাকে দেখাব কিভাবে একটি কাস্টম হেডারে একটি অনলাইন ব্যবহারকারী লগইন ফর্ম ডিজাইন করতে হয়। চল শুরু করি!
জরিপ
এই টিউটোরিয়ালে আমরা যে লগইন ফর্মটি তৈরি করতে যাচ্ছি তার সাথে কাস্টম হেডারের দ্রুত পূর্বরূপ এখানে রয়েছে।
এখানে "লগ আউট" বার্তা এবং লিঙ্ক রয়েছে যা ব্যবহারকারীরা লগ ইন করলে প্রদর্শিত হবে৷
একটি নতুন গ্লোবাল শিরোনাম যুক্ত করা হচ্ছে
জিনিসগুলিকে এগিয়ে নিয়ে যাওয়ার জন্য, আমাদের ওয়েবসাইটের জন্য একটি নতুন গ্লোবাল হেডার তৈরি করতে হবে। এটি করার জন্য, আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে যান এবং Divi > Theme Builder এ যান।
ডিফল্ট ওয়েবসাইট টেমপ্লেটে, "Add Global Header" এবং তারপর "Build Global Header" এ ক্লিক করুন।
একটি অনুভূমিক লগইন ফর্ম সহ Divi গ্লোবাল হেডার ডিজাইন
বিভাগটি কাস্টমাইজ করুন
গ্লোবাল হেডার লেআউট এডিটর থেকে, আপনি স্ক্র্যাচ থেকে আপনার ওয়েবসাইটের কাস্টম হেডার তৈরি করতে পারেন। শুরু করতে, স্বাভাবিক বিভাগে সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন:
- বাম পটভূমি গ্রেডিয়েন্ট রঙ:
- ডান পটভূমি গ্রেডিয়েন্ট রঙ:
- গ্রেডিয়েন্ট দিক: 48 ডিগ্রী
- ভিতরের মার্জিন: 10px উপরে, 10px নীচে, 20px বাম, 20px ডান
আমাদের হেডারকে আরও প্রতিক্রিয়াশীল করার জন্য, আমরা প্রধান বিভাগ উপাদানে নিম্নলিখিত কাস্টম CSS যোগ করব।
display:flex;
justify-content:center;
align-items:center;
প্রথম লাইনে শিরোনাম লোগো যুক্ত করুন
এখন যে বিভাগটি প্রস্তুত, আমরা প্রথম লাইনটি যুক্ত করতে পারি।
লাইন যোগ করুন
বিভাগে একটি কলামে একটি সারি যুক্ত করুন।
একটি লোগো ইমেজ সহ একটি ইমেজ মডিউল যোগ করুন
এক-কলামের সারিতে, একটি চিত্র মডিউল যোগ করুন। এখানে আমরা হেডার লোগো যোগ করব।
চিত্র এবং চিত্রের মডিউল মার্জিন আপডেট করুন
নিম্নরূপ চিত্র সেটিংস আপডেট করুন:
- ছবি: [লোগো যোগ করুন (প্রায় 64 x 64 পিক্সেল)]
- মার্জিন: 20px ডান
লাইনের পরামিতি আপডেট করুন
আরও যাওয়ার আগে, লাইন সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন:
- কাস্টম নর্দমার প্রস্থ ব্যবহার করুন: হ্যাঁ
- কলাম ব্যবধান: 1
- সর্বোচ্চ প্রস্থ: 25%
- প্রান্তিককরণ: বাম
- অভ্যন্তরীণ মার্জিন: 0px শীর্ষ, 0px নীচে
দ্বিতীয় সারিতে অনুভূমিক লগইন ফর্ম যোগ করা হয়েছে
লাইন যোগ করুন
এখন যেহেতু প্রথম সারি প্রস্তুত, আপনি সম্পাদকে লক্ষ্য করবেন যে প্রথম সারিটি বাম অংশের 25% অংশ নেবে। এটি মূলত আমাদের হেডার লোগোর জন্য নির্ধারিত লাইন হবে। আমাদের লগইন ফর্মের জন্য একটি বিভাগ সারি এবং ডানদিকে মেনু তৈরি করতে হবে।
বিভাগে একটি কলামে কাঠামো সহ একটি দ্বিতীয় সারি যুক্ত করুন।
একটি লগইন ফর্ম যোগ করুন
এক-কলাম সারির ভিতরে, একটি 'সংযোগ' মডিউল যোগ করুন।
ডিফল্ট সামগ্রী সরান
লগইন মডিউল সেটিংসের অধীনে, জাল শিরোনাম এবং শরীরের বিষয়বস্তু সরান।
লগইন ফর্ম এবং CSS এর জন্য কাস্টম ক্লাস যোগ করুন
লগইন ফর্ম ডিজাইন করতে অনেক দূর যাওয়ার আগে, প্রথমে লগইন মডিউলে CSS ক্লাস এবং কাস্টম CSS যোগ করা যাক। এটি Divi-এর অন্তর্নির্মিত বিকল্পগুলির সাথে ফর্ম ডিজাইনে চূড়ান্ত ছোঁয়া দেওয়ার আগে ফর্মের প্রাথমিক অনলাইন কাঠামো সেট আপ করবে।
এছাড়াও আমাদের গাইড দেখুন ডিভিআই-তে কীভাবে একটি স্লাইডিং এবং প্রতিক্রিয়াশীল সাইড মেনু তৈরি করবেন
উন্নত ট্যাবের অধীনে, নিম্নলিখিত CSS ক্লাস যোগ করুন:
- CSS ক্লাস: হেডার-লগইন-ফর্ম
সংযোগ বিবরণ CSS বক্সে নিম্নলিখিত কাস্টম CSS যোগ করুন:
margin-bottom: 0px !important
তারপর লগইন ফর্মের CSS এলাকায় নিম্নলিখিত কাস্টম CSS যোগ করুন:
width: 100%;লগইন ক্ষেত্র CSS এলাকায় নিম্নলিখিত কাস্টম CSS যোগ করুন:
padding: 5px 4% !important
হেডার লেআউট সেটিংসে কাস্টম CSS যোগ করুন
যেহেতু আমরা লগইন ফর্ম মডিউলে আমাদের কাস্টম CSS ক্লাস যুক্ত করেছি, তাই আমরা আমাদের কাস্টম CSS যোগ করতে পারি যা শুধুমাত্র সেই নির্দিষ্ট লগইন ফর্মটিকে লক্ষ্য করবে।
আমাদের টিউটোরিয়ালটিও পড়ুন কিভাবে DIVI এর সাথে ব্লগ মডিউল দিয়ে ব্লগ পেজ তৈরি করবেন
হেডার লেআউট সেটিং খুলুন এবং নিম্নলিখিত কাস্টম CSS যোগ করুন:
.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}এই CSS লগইন ক্ষেত্র এবং বোতাম ইনলাইন (অনুভূমিকভাবে) প্রদর্শন করবে, "আপনার পাসওয়ার্ড ভুলে গেছেন?" লুকানো হবে, এবং ক্ষেত্রগুলির মধ্যে একটি ছোট মার্জিন যোগ করা হবে।
লাইন সেটিংস
আমরা লগইন ফর্মে ফিনিশিং টাচ দেওয়ার আগে, আসুন লাইন প্যারামিটারগুলিকে নিম্নরূপ আপডেট করি:
- কাস্টম গাটার প্রস্থ ব্যবহার করুন: হ্যাঁ
- কলাম ব্যবধান: 1
- প্রান্তিককরণ: ডান
- অভ্যন্তরীণ মার্জিন: 0px শীর্ষ, 0px নীচে
লগইন ফর্মের জন্য ডিজাইন সেটিংস
আমরা এখন লগইন ফর্ম সেটিংস আপডেট করতে প্রস্তুত। সংযোগ মডিউল সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন:
- ব্যাকগ্রাউন্ড কালার ব্যবহার করুন: না
ক্ষেত্র এবং লিঙ্ক পাঠ্য
- পটভূমির রঙের ক্ষেত্র: rgba(255,255,255,0.2)
- পাঠ্য রঙের ক্ষেত্র: #ffffff
- ফিল্ড ফন্ট: ল্যাটো
- পাঠ্য আকারের ক্ষেত্র: 14px
- পাঠ্য সারিবদ্ধকরণ: ডান
বাটন ডিজাইন
- বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: না
- বোতাম পাঠ্যের আকার: 15px
- পটভূমি বোতাম: #ff3190
- সীমানা প্রস্থ বোতাম: 0 পিক্সেল
- বোতাম ফন্ট: Lato
- মার্জিন বোতাম: 2px শীর্ষ, 2px নীচে
- প্যাডিং বোতাম: 15px নীচে
- ভিতরের মার্জিন: 0px উপরে, 0px নীচে, 0px বাম, 0px ডান
মেনুটি দ্বিতীয় লাইনে যুক্ত করা হচ্ছে
মেনু মডিউল
আমাদের লগইন ফর্মের সাথে, আমরা সরাসরি নীচে মেনু যোগ করতে পারি।
লগইন মডিউলের অধীনে একটি মেনু মডিউল যোগ করুন।
মেনু মডিউল সেটিংস
নিম্নরূপ মেনু সেটিংস আপডেট করুন:
- পটভূমি: rgba(0,0,0,0)
- ফন্ট মেনু: Lato
- সফট লাইট মেনু: বোল্ড
- মেনু পাঠ্যের রঙ: #ffffff
- মেনু পাঠ্যের আকার: 16px
- পাঠ্য সারিবদ্ধকরণ: ডান
- ড্রপ-ডাউন মেনুর পটভূমির রঙ: #ffffff
- ড্রপডাউন সারি রঙ: rgba(0,0,0,0)
- ড্রপডাউন মেনু পাঠ্যের রঙ: #000000
- মোবাইল মেনু পটভূমির রঙ: #ffffff
- মোবাইল মেনু পাঠ্যের রঙ: #000000
- কার্ট আইকনের রঙ: #ffffff
- অনুসন্ধান আইকনের রঙ: #ffffff
- হ্যামবার্গার মেনু আইকনের রঙ: #ffffff
লগইন ফর্মের শিরোনাম সংরক্ষণ করা
শিরোনাম সম্পাদক থেকে প্রস্থান করার আগে লেআউটটি সংরক্ষণ করতে ভুলবেন না।
এর পরে, থিম বিল্ডার সেটিংসও সংরক্ষণ করুন।
চূড়ান্ত ফলাফল
হয়ে গেল!
এখন দেখা যাক চূড়ান্ত ফলাফল। শেষ ফলাফল দেখতে, আপনাকে যা করতে হবে তা হল আপনার ওয়েবসাইটের একটি পৃষ্ঠায় যান৷
ব্যবহারকারী এটি লগ ইন করার সময় দেখতে পাবেন।
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
লগইন ফর্ম সহ এই কাস্টম গ্লোবাল হেডারটি যেকোনো সাবস্ক্রিপশন ওয়েবসাইট বা অনলাইন স্টোরের জন্য অবশ্যই কাজে আসবে।
সামান্য কিছু কাস্টম CSS দিয়ে, আমরা Divi-এর লগইন মডিউলটিকে একটি মার্জিত লগইন ফর্মে রূপান্তর করতে সক্ষম হয়েছি যা যেকোনো ওয়েবসাইটের শিরোনামে পুরোপুরি ফিট হবে।
আশা করি এটি আপনার পরবর্তী প্রকল্পের জন্য দরকারী হবে। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
তবে আপনি পরামর্শ নিতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...