আপনি কি লগইন/লগআউট বোতাম সহ ডিভিতে একটি পপআপ লগইন ফর্ম তৈরি করতে চান?
একটি পপআপ লগইন ফর্ম তৈরি করা হচ্ছে Divi আপনার সাইটের ডিজাইন এবং লগইন/লগআউট ব্যবহারকারীর অভিজ্ঞতা উন্নত করার একটি কার্যকর উপায় হতে পারে।
ধারণাটি হল একটি লগইন ফর্ম তৈরি করা যা একটি পপ-আপে প্রদর্শিত হয় যখনই ব্যবহারকারী পৃষ্ঠা শিরোনামে একটি লগইন বোতামে ক্লিক করেন।
এটি ব্যবহারকারীকে একটি কাস্টম লগইন পৃষ্ঠায় পুনঃনির্দেশ করার চেয়ে বেশি সুবিধাজনক৷
এই টিউটোরিয়ালে, আমরা Divi-তে কাস্টম লগইন এবং লগআউট বোতাম সহ একটি পপ-আপ লগইন ফর্ম তৈরি করব।
Divi লগইন মডিউল এবং কয়েকটি বোতাম মডিউল ব্যবহার করে, আমরা ব্যবহারকারীদের অন্য পৃষ্ঠায় পুনঃনির্দেশিত না করেই লগইন এবং লগআউট করার অনুমতি দিয়ে ফ্রন্ট-এন্ডে একটি বিরামহীন পপআপ লগইন অভিজ্ঞতা তৈরি করব।
এর শুরু করা যাক!
জরিপ
এই টিউটোরিয়ালে আমরা যে ডিজাইনটি তৈরি করব তা এখানে একটি দ্রুত দেখুন।
লক্ষ্য করুন কিভাবে লগইন বোতাম এবং লগআউট বোতাম যথাক্রমে পরিবর্তিত হয়। এবং, ব্যবহারকারী একবার লগ ইন করলে, তারা বর্তমান পৃষ্ঠায় থাকে।
অতিরিক্তভাবে, পপ-আপ লগইন ফর্ম প্রতিটি বার ব্যবহারকারী লগ আউট করার চেষ্টা করার সময় বিভিন্ন "সতর্কতা" বিষয়বস্তু প্রদর্শন করে।
আপনি কি শুরু করতে হবে
আপনি যে কোনো কাস্টম হেডারে এই পপ-আপ লগইন ফর্ম এবং কাস্টম লগইন/লগআউট বোতাম যোগ করতে পারেন, আমরা প্রক্রিয়াটিকে গতি বাড়ানোর জন্য এবং নকশাটি দ্রুত শুরু করতে একটি পূর্ব-তৈরি হেডার ব্যবহার করব৷
Divi বিল্ডারে "Crowdfunding Layout Pack" হেডার টেমপ্লেট ইমপোর্ট করুন
শুরু করতে, ডাউনলোড করুন ডিভি ক্রাউডফান্ডিং লেআউট প্যাক হেডার এবং ফুটার বিনামূল্যে . এটি করতে, ব্লগ নিবন্ধে যান।
তারপর জিপ ফাইলটি ডাউনলোড করতে আপনার ইমেল লিখুন।
এর পরে, ফাইলটি আনজিপ করুন যাতে এটি আমদানি করার জন্য প্রস্তুত হয়।
থিম সম্পাদকে ফাইলটি আমদানি করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- Divi > থিম বিল্ডার-এ যান।
- পোর্টেবিলিটি আইকনে ক্লিক করুন।
- পোর্টেবিলিটি পপ-আপ উইন্ডোতে, আমদানি ট্যাবটি নির্বাচন করুন।
- আমদানি করতে পূর্বে ডাউনলোড করা আনজিপ করা ফাইলটি বেছে নিন।
- ক্লিক করুন Divi থিম নির্মাতা টেমপ্লেট আমদানি করুন.
- আমদানি করা হেডার সম্পাদনা করতে সম্পাদনা আইকনে ক্লিক করুন।
ডিভিতে পপআপ লগইন ফর্ম তৈরি করা হচ্ছে
পার্ট 1: লগইন এবং লগআউট বোতাম তৈরি করা
গ্লোবাল হেডার লেআউট এডিটরে একবার খুলুন স্তর দৃশ্য যাতে আপনি সহজেই সমস্ত উপাদান দেখতে পারেন।
হেডার বিভাগের উপরের সারিতে, মডিউলটি মুছুন সামাজিক মিডিয়া অনুসরণ করুন কলাম 3-এ লগইন বোতামের পাশে।
আরও পড়ুন: Divi: বিভিন্ন ধরণের গ্রেডিয়েন্টের তুলনা
লগইন বোতাম তৈরি করা হচ্ছে
আমাদের লগইন বোতাম তৈরি করতে, উপরের সারির কলাম 3-এ বোতাম মডিউল সেটিংস খুলুন।
ডিজাইন ট্যাবের অধীনে নিম্নলিখিত আইটেমগুলি আপডেট করুন:
- বোতাম আইকন: লক আইকন (স্ক্রিনশট দেখুন)
- বোতাম আইকন বসানো: ডান
- বোতামের জন্য হোভারে শুধুমাত্র আইকন দেখান: না
- প্যাডিং: 0,5em (উপর এবং নীচে), 2em (বাম), 0,7em (ডান)
ট্যাবের নীচে অগ্রসর, বোতামটিকে নিম্নরূপ দুটি কাস্টম CSS ক্লাস বরাদ্দ করুন:
- CSS ক্লাস: et-টগল-পপআপ এবং পপআপ-লগইন-বোতাম
লগআউট বোতাম তৈরি
আমাদের লগআউট বোতাম তৈরি করতে, কলাম 3-এ বিদ্যমান লগইন বোতামটি নকল করুন৷
দুটি বোতামকে আলাদা করতে সাহায্য করার জন্য, আপনি যথাক্রমে প্রতিটির লেবেল আপডেট করতে পারেন। এরপর, কলাম 3-এ ডুপ্লিকেট বোতাম মডিউল সেটিংস খুলুন।
"লগআউট" পড়তে বোতামের পাঠ্য পরিবর্তন করুন।
ডিজাইন ট্যাবের অধীনে নিম্নলিখিত আইটেমগুলি আপডেট করুন:
- বোতাম আইকন: আনলক আইকন (স্ক্রিনশট দেখুন)
ট্যাবের নীচে অগ্রসর, CSS ক্লাস বোতামটি নিম্নরূপ আপডেট করুন:
- CSS ক্লাস: et-টগল-পপআপ এবং পপআপ-লগআউট-বোতাম
প্রথম শ্রেণী একই থাকবে কিন্তু দ্বিতীয় শ্রেণী ভিন্ন হবে।
পার্ট 2: পপআপ বিভাগ তৈরি করা
বোতামগুলি সম্পূর্ণ হয়ে গেলে, আমরা পপআপ বিভাগটি তৈরি করতে প্রস্তুত যা লগইন ফর্ম(গুলি) ধারণকারী আমাদের পপআপ হিসাবে কাজ করবে।
শিরোনাম বিভাগের নীচে, একটি নতুন নিয়মিত বিভাগ যোগ করুন।
তারপর বিভাগের ভিতরে একটি এক-কলাম সারি ঢোকান।
বিভাগ সেটিংস
সারি আপডেট করার আগে, বিভাগ সেটিংস খুলুন।
ট্যাবের নীচে সন্তুষ্ট, বিভাগটিকে একটি সাদা পটভূমির রঙ দিন:
- পটভূমি: #ffffff
ট্যাবের নীচে নকশা, নিম্নলিখিত আপডেট করুন:
- প্রস্থ: 100%
- সর্বোচ্চ প্রস্থ: 800px (ডেস্কটপ), 80% (ট্যাবলেট), 100% (ফোন)
- বিভাগ প্রান্তিককরণ: কেন্দ্র
- উচ্চতা: স্বয়ংক্রিয় (ডেস্কটপ এবং ট্যাবলেট), 100% (ফোন)
- সর্বোচ্চ উচ্চতা: 100%
- প্যাডিং: 0px (শীর্ষ এবং নীচে)
- গোলাকার কোণ: 10px
- বক্স শ্যাডো: স্ক্রিনশট দেখুন
- বক্স শ্যাডো উল্লম্ব অবস্থান: 0px
- ব্লার শক্তি: 100 পিক্সেল
- স্প্রেড শক্তি: 50px
ট্যাবের নীচে অগ্রসর, নিম্নলিখিত আপডেট করুন:
একটি কাস্টম CSS ক্লাস যোগ করুন।
- CSS ক্লাস: et-ppup-login
প্রধান উপাদানে একটি কাস্টম CSS স্নিপেট যোগ করুন:
overscroll-behavior: contain;দৃশ্যমানতা এবং অবস্থান বিকল্প আপডেট করুন.
- অনুভূমিক ওভারফ্লো: লুকানো
- উল্লম্ব ওভারফ্লো: স্বয়ংক্রিয়
- অবস্থান: স্থির
- অবস্থান: কেন্দ্র কেন্দ্র
- Z সূচক: 999999
লাইন সেটিংস
বিভাগ সেটিংসের জায়গায়, লাইন সেটিংস খুলুন এবং নিম্নলিখিত নকশা সেটিংস আপডেট করুন:
- কাস্টম গটার প্রস্থ ব্যবহার করুন: হ্যাঁ
- নর্দমার প্রস্থ: 1
- প্রস্থ: 100%
- সর্বোচ্চ প্রস্থ: 100%
- প্যাডিং: 0px (শীর্ষ), 5vh (নীচ)
পার্ট 3: ক্লোজ পপআপ আইকন তৈরি করা
পপআপ ক্লোজ আইকন তৈরি করতে যা ক্লিক করলে পপআপ বন্ধ/লুকাবে, আমরা একটি Blurb মডিউল ব্যবহার করতে যাচ্ছি।
সারিতে একটি নতুন ব্লার্ব মডিউল যোগ করুন।
মডিউল সেটিং খুলুন এবং শিরোনাম এবং বডি টেক্সট মুছুন।
তারপর নিম্নরূপ আইকন যোগ করুন:
- আইকন ব্যবহার করুন: হ্যাঁ
- আইকন: "x" আইকন (স্ক্রিনশট দেখুন)
ট্যাবের নীচে নকশা, নিম্নলিখিত আপডেট করুন:
- আইকনের রঙ: #004e43
- ছবি/আইকন প্রান্তিককরণ: কেন্দ্রীভূত
- আইকন ফন্ট সাইজ ব্যবহার করুন: হ্যাঁ
- আইকন ফন্ট সাইজ: 50px
- প্রস্থ: 50px
- প্রান্তিককরণ মডিউল: ডান
- উচ্চতা: 50px
ট্যাবের নীচে অগ্রসর, নিম্নরূপ ব্লার্ব মডিউলে একটি CSS ক্লাস যোগ করুন:
- CSS ক্লাস: et-toggle-pupup
পার্ট 4: "লগ ইন" এবং "লগ আউট" লগইন ফর্ম তৈরি করা
লগইন এবং লগআউটে লগইন ফর্মের জন্য ভিন্ন বিষয়বস্তু এবং ডিজাইনের জন্য, আমরা দুটি ভিন্ন লগইন ফর্ম মডিউল তৈরি করব।
প্রথমটি হবে লগইন ফর্ম যা প্রতিবার ব্যবহারকারী "লগ আউট" হলে প্রদর্শিত হবে৷ দ্বিতীয়টি হবে লগইন ফর্ম যা প্রতিবার ব্যবহারকারী "লগ ইন" করার সময় প্রদর্শিত হবে৷
"লগ আউট" ফর্ম তৈরি
"লগ আউট" লগইন ফর্ম তৈরি করতে, সারির ভিতরে ব্লার্ব মডিউল আইকনের নীচে একটি নতুন লগইন মডিউল যোগ করুন।
মডিউল সেটিংস খুলুন এবং নিম্নলিখিত সেটিংস পরিবর্তন করুন:
বিষয়বস্তু ট্যাব
- বর্তমান পৃষ্ঠায় পুনঃনির্দেশ করুন: হ্যাঁ
- ব্যাকগ্রাউন্ড কালার ব্যবহার করুন: না
ডিজাইন ট্যাব
- ক্ষেত্রগুলির পটভূমির রঙ: rgba(0,78,67,0.05)
- ফিল্ড ফোকাস পটভূমির রঙ: rgba (0,78,67,0,15)
- পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
- পাঠ্যের রঙ: গাঢ়
- শিরোনাম ফন্ট: Poppins
- শিরোনাম হরফ ওজন: আধা-গাঢ়
- পাঠ্যের রঙ: #000000
- শিরোনাম লাইন উচ্চতা: 1,3 এম
- বডি ফন্ট: কাজ ছাড়া
বোতাম শৈলী আপডেট করতে, শিরোনাম বিভাগের সারির তৃতীয় কলামে আমাদের তৈরি লগইন বোতাম থেকে বোতামের শৈলীগুলি অনুলিপি করুন।
তারপরে ডিজাইন ট্যাবের অধীনে সংযোগ সেটিংসে বোতাম বিকল্প গোষ্ঠীতে বোতাম শৈলীগুলি পেস্ট করুন।
এরপরে, লগইন ফর্মের জন্য বোতাম শৈলীগুলি নিম্নরূপ আপডেট করুন:
- বোতাম
- পাঠ্যের রঙ: #ffffff
- পটভূমি: #004e43
- পটভূমি (হোভার): #00683c
- সীমানা প্রস্থ: 0 পিক্সেল
- প্যাডিং: 15px (শীর্ষ এবং নীচে)
পরবর্তী, নিম্নরূপ আকারের বিকল্পগুলি আপডেট করুন:
- প্রস্থ: 100%
- সর্বোচ্চ প্রস্থ: 80% (ডেস্কটপ), 90% (ট্যাবলেট), 95% (ফোন)
- প্রান্তিককরণ মডিউল: কেন্দ্র
উন্নত ট্যাব
ট্যাবের নীচে অগ্রসর, CSS ক্লাস এবং কাস্টম CSS নিম্নরূপ আপডেট করুন:
- CSS ক্লাস: et-logged-out-form
সংযোগের বিবরণের জন্য কাস্টম CSS:
width: 100% !important;
float: none !important;লগইন ফর্মের জন্য কাস্টম CSS:
width: 100% !important;
padding: 0px !important;এটি নিশ্চিত করবে যে লগইন মডিউলটি সম্পূর্ণ সারি/কলামের প্রস্থ জুড়ে রয়েছে, এমনকি ডেস্কটপেও।
"লগ ইন" ফর্মের সৃষ্টি৷
এখন যেহেতু ফর্মটির "লগড আউট" সংস্করণ সম্পূর্ণ হয়েছে, আমাদের "লগ ইন" সংস্করণ তৈরি করতে হবে যাতে ব্যবহারকারীর অভিজ্ঞতা সর্বাধিক করার জন্য বিভিন্ন বিষয়বস্তু এবং স্টাইলিং থাকবে৷
"লগ আউট" লগইন ফর্ম তৈরি করতে, বিদ্যমান লগইন ফর্মের নকল করুন৷
তারপর প্রতিটি লগইন ফর্মের জন্য যথাক্রমে লেবেল আপডেট করুন।
ডুপ্লিকেট সেটিংস খুলুন ("লগ ইন" ফর্ম) এবং লগইন ফর্ম মডিউলের শিরোনামে গতিশীল বিষয়বস্তু হিসাবে সাইটের শিরোনাম যোগ করুন।
তারপর সাইটের শিরোনাম গতিশীল বিষয়বস্তু সেটিংস খুলুন এবং নিম্নরূপ সামগ্রীর আগে এবং পরে আপডেট করুন:
- আগে: "আপনি মার্জিত থিম থেকে লগ আউট করার চেষ্টা করছেন"
- পরে: ". "
এটি সাইট থেকে লগ আউট করার চেষ্টা করা ব্যবহারকারীদের জন্য একটি চমৎকার গতিশীল বিজ্ঞপ্তি তৈরি করবে।
তারপর শরীরে নিম্নলিখিত H3 হেডার যোগ করুন:
<h3>Are you sure?</h3>
আপনি যদি লগইন করার সময় লগইন মডিউলের বিষয়বস্তু দেখে থাকেন তবে আপনি জানেন যে একটি ব্যক্তিগতকৃত বার্তা রয়েছে যাতে একটি ব্যক্তিগতকৃত "লগ আউট" লিঙ্ক রয়েছে। এই লিঙ্কটিকে একটি বোতামের মতো দেখতে, আমাদের বডি লিঙ্কের ফন্ট/টেক্সট সেটিংস নিম্নরূপ কাস্টমাইজ করতে হবে:
- ট্যাব নির্বাচন করুন লিংক বিকল্পের অধীনে মূল লেখা.
- লিঙ্ক ফন্ট: কাজ ছাড়া
- লিঙ্ক ফন্ট ওজন: সেমি বোল্ড
- ফন্ট শৈলী: TT
- লিঙ্ক পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
- লিঙ্ক পাঠ্য রঙ: #ffffff
দ্রষ্টব্য: আপনি এই ফলাফলগুলির পূর্বরূপ দেখতে পারবেন না যতক্ষণ না আপনি একটি লাইভ পৃষ্ঠায় ফর্মটি দেখছেন৷
ট্যাবের নীচে অগ্রসর, CSS ক্লাস এবং কাস্টম CSS নিম্নরূপ আপডেট করুন:
- CSS ক্লাস: et-logged-in-form
লগইন ফর্মের জন্য কাস্টম CSS:
display:none;
পার্ট 5: কাস্টম কোড যোগ করুন
পপ-আপ লগইন ফর্ম কার্যকারিতার জন্য প্রয়োজনীয় কাস্টম CSS এবং JQuery যোগ করতে, শেষ লগইন মডিউলের অধীনে একটি নতুন কোড মডিউল তৈরি করুন।
সিএসএস
কোড মডিউল সেটিংস খুলুন এবং কোড বক্সে নিম্নলিখিত CSS পেস্ট করুন, প্রয়োজনীয় শৈলী ট্যাগগুলিতে CSS মোড়ানো নিশ্চিত করুন।
/* hide popup section */
.et-popup-login {
display: none;
}
/* hide login button when logged in */
.logged-in .et-popup-login-button {
display: none !important;
}
/* hide logout button when logged out */
.et-popup-logout-button {
display: none !important;
}
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
display: inline-block !important;
}
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
display: none !important;
}
/* hide logged in form when logged out */
.et-logged-in-form {
display: none !important;
}
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
display: block !important;
}
/* style logout link within logged in form */
.et-logged-in-form a {
display: block;
padding: 15px 1em;
border-radius: 8px;
background: #004e43;
max-width: 400px;
margin: 20px auto 0px;
}
.et-toggle-popup {
cursor: pointer;
}
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
display: block !important;
}
body.et-fb .et-popup-login-button {
display: inline-block !important;
}মনে রাখবেন যে সিএসএস "সংযুক্ত" ক্লাস ব্যবহার করে যা ওয়ার্ডপ্রেসে তৈরি করা হয় যাতে ব্যবহারকারী লগ ইন বা সংযোগ বিচ্ছিন্ন হলে সংশ্লিষ্ট লগইন/লগআউট বোতাম এবং "লগ ইন"/"লগড আউট" লগইন ফর্মগুলি লুকিয়ে/দেখাতে।
JQuery
শেষ শৈলী ট্যাগের নীচে, প্রয়োজনীয় স্ক্রিপ্ট ট্যাগে কোডটি মোড়ানো নিশ্চিত করে নিম্নলিখিত JQuery পেস্ট করুন।
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);এই স্নিপেটটি কেবল পপআপ বিভাগকে টগল করে যখনই ব্যবহারকারী ক্লাসের সাথে তিনটি আইটেমের একটিতে ক্লিক করে " এবং-টগল-পপআপ (লগইন এবং লগআউট বোতাম এবং উপস্থাপনা আইকন "x")।
আরো দেখুন: Divi: কিভাবে ব্যাকগ্রাউন্ড মাস্ক সেটিংস এবং প্যাটার্ন ট্রান্সফর্ম অপশন ব্যবহার করবেন
হয়ে গেল!
থিম নির্মাতার টেমপ্লেটে আপনার করা পরিবর্তনগুলি সংরক্ষণ করতে ভুলবেন না। একবার সংরক্ষিত হলে, আপনি একটি লাইভ পৃষ্ঠায় ফলাফল দেখতে পারেন।
চূড়ান্ত ফলাফল
এখানে কম্পিউটার, ট্যাবলেট এবং ফোনে চূড়ান্ত ফলাফল রয়েছে৷
লগইন বোতাম এবং লগআউট বোতাম কিভাবে পরিবর্তিত হয় তা লক্ষ্য করুন। এবং, একবার ব্যবহারকারী লগ ইন করলে, ব্যবহারকারী বর্তমান পৃষ্ঠায় থাকে।
অতিরিক্তভাবে, পপআপ লগইন ফর্ম প্রতিটি বার ব্যবহারকারী লগ আউট করার চেষ্টা করার সময় বিভিন্ন "সতর্কতা" বিষয়বস্তু প্রদর্শন করে।
এখন DIVI ডাউনলোড করুন!!!
উপসংহার.
আশা করি এই পপআপ লগইন ফর্ম এবং কাস্টম লগইন/লগআউট বোতামগুলি তৈরি করা আপনাকে ডিভির লগইন ফর্মটি সৃজনশীলভাবে কীভাবে ব্যবহার করতে হয় সে সম্পর্কে কিছু অন্তর্দৃষ্টি দেবে।
আপনার নিজের ওয়েবসাইটে একটি অনন্য লগইন অভিজ্ঞতা তৈরি করতে প্রতিটি লগইন ফর্ম (বা বোতাম) এর নকশা এবং বিষয়বস্তু সমন্বয় করতে নির্দ্বিধায়৷
আমরা আশা করি যে এই টিউটোরিয়ালটি আপনাকে আপনার পরবর্তী ডিভি প্রকল্পগুলির জন্য অনুপ্রাণিত করবে। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।
এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...