Popper.js-এর সাহায্যে ডিভিতে কীভাবে ডায়নামিক পপওভার (ফ্লোটিং মেনু) তৈরি করবেন

আপনি কি কখনো popper.js ? নামের লাইব্রেরির কথা শুনেছেন এই লাইব্রেরিটি আপনাকে জাভাস্ক্রিপ্টে পপোভার তৈরি করতে দেয়। পপোভার ব্যবহার করা আজকাল বেশ সাধারণ, বিশেষত এটি একটি নির্দিষ্ট উপাদান (বোতাম, লিঙ্ক, ইত্যাদি) সম্পর্কিত আরও তথ্য প্রদর্শন করতে সহায়তা করে। ডায়নামিক পপওভার বিবেচনা করার কারণ এটি প্রধানত নিশ্চিত করা যে এটি স্ক্রিনের বিষয় অবস্থানের সাথে সঠিক স্থানে প্রদর্শিত হয়। নির্দিষ্টভাবে, যদি বিষয়টি স্ক্রিনের নীচে হয় তবে পপওভারটি শীর্ষে প্রদর্শিত হবে। এটি স্ক্রিনের শীর্ষে অবস্থিত হলে, পপওভার নীচে প্রদর্শিত হবে, ইত্যাদি।

এই টিউটোরিয়ালে, আমরা Divi-তে Popper.js-এর শক্তি ব্যবহার করতে যাচ্ছি যাতে একটি বোতামে ক্লিক করা হলে ডায়নামিক পপোভার (ফ্লোটিং মেনু) তৈরি করা যায়। এটি যে কেউ Divi উপাদানগুলির সাথে একটি পপওভার তৈরি করতে, একটি বোতাম ক্লিক করার পরে যে কোনও বিষয়বস্তু প্রদর্শন করতে দেয়৷ আমরা নিশ্চিত করব যে পপওভারটি গতিশীল, কারণ এটি ব্যবহারকারী আপনার পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার সাথে সাথে সবচেয়ে আদর্শ দৃশ্যমানতা রক্ষা করতে এটির অবস্থান সামঞ্জস্য করবে৷

এখানে এই popovers… এর অবস্থানের একটি দৃষ্টান্ত রয়েছে

এটি অর্জন করতে, আমাদের কিছু কাস্টম CSS এবং জাভাস্ক্রিপ্টের প্রয়োজন হবে। তবে আমরা এখনও ডিভি বিল্ডারের শক্তিশালী ডিজাইনের ক্ষমতার উপর নির্ভর করতে পারি যে কোনও ডিভি উপাদান ব্যবহার করে একটি পপওভার তৈরি করতে।

আশ্চর্যজনক ওয়েবসাইট তৈরি করুন

সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে

এখুনি শুরু করুন

’ শুরু করা যাক!

ফ্লোটিং মেনুর পূর্বরূপ

এই টিউটোরিয়ালে আমরা যে ভাসমান মেনুটি ডিজাইন করব তা এখানে একটি দ্রুত দেখুন। ব্যবহারকারী স্ক্রোল করার সাথে সাথে বা ব্রাউজারের আকার পরিবর্তন করার সাথে সাথে ভাসমান মেনুর অবস্থান কীভাবে গতিশীলভাবে পরিবর্তিত হয় তা আপনি দেখতে পারেন। এছাড়াও don’t ছোট্ট তীরটি মিস করুন যা গতিশীলভাবে এর রেফারেন্সে (বা এই ক্ষেত্রে, বোতাম) নির্দেশ করার জন্য অবস্থান করে।

Divi-এ Popper.js দিয়ে একটি পপওভার তৈরি করা

যেমনটি আমরা আগে বলেছি, আমরা একটি গতিশীল অবস্থানে থাকা পপওভার তৈরি করতে Divi-তে popper.js ব্যবহার করতে যাচ্ছি, যা পপওভার বিষয় (বোতাম) এ ক্লিক করার সময় প্রকাশ পায়। Divi-এর সাহায্যে আমরা সহজেই একটি ভাসমান মেনু এবং একটি বোতাম তৈরি করতে পারি। তারপরে আমরা উভয় কাজকে সামঞ্জস্যপূর্ণ করতে প্রয়োজনীয় কোড যোগ করতে যাচ্ছি।

বিভাগ

তাই আমরা নিয়মিত বিভাগে একটি গ্রাহক আইডি যোগ করে শুরু করব যা ডিফল্টরূপে প্রস্তুত। বিভাগ সেটিংস খুলুন এবং নিম্নলিখিত আইডি যোগ করুন:

• CSS আইডি: পপার-সেকশন

ডিভি রো দিয়ে পপার পপওভার তৈরি করুন

পরবর্তী, আমরা বিভাগে একটি এক-কলাম সারি যোগ করব। এই সারিটি আমাদের পপার পপওভার উপাদান হয়ে উঠবে যা একটি বোতামে ক্লিক করার সময় পপ আপ হয়।

সারি সেটিংস খুলুন এবং নিম্নরূপ স্টাইলিং আপডেট করুন:

• পটভূমির রঙ: #333333

• নর্দমার প্রস্থ: 2
• প্রস্থ: 100%
• সর্বোচ্চ প্রস্থ: 500px
• প্যাডিং: 0px উপরে, 0px নীচে, 0px বাম, 0px ডান
• গোলাকার কোণ: 10px

যেহেতু এই সারিটি আমাদের পপার পপওভার উপাদান হয়ে উঠবে, তাই আমাদের কোডে নির্বাচক হিসাবে পরিবেশন করার জন্য আমাদের একটি CSS আইডি যোগ করতে হবে। আমাদের নিশ্চিত করতে হবে যে দৃশ্যমানতা ওভারফ্লোতে থাকে (এটি গোলাকার কোণে লুকানো থাকে)।

উন্নত ট্যাবে যান এবং নিম্নলিখিত আপডেট করুন:

• CSS আইডি: পপার-পপআপ
• অনুভূমিক ওভারফ্লো: দৃশ্যমান
• উল্লম্ব ওভারফ্লো: দৃশ্যমান

পপওভার রোতে কন্টেন্ট যোগ করা যাক

আমরা আমাদের সারিতে যে কোনো মডিউল (গুলি) যোগ করতে পারি যাতে আমরা যা চাই তা দিয়ে ভাসমান মেনুটি পূরণ করতে পারি। এই উদাহরণের জন্য, আমরা সারিতে কিছু বোতাম যোগ করতে যাচ্ছি যা একটি কাস্টম মেনু হিসাবে কাজ করে যা পপওভারের মধ্যে প্রদর্শিত হয়।

শুরু করতে, সারির কলামে একটি বোতাম মডিউল যোগ করুন।

এখন ’ আমাদের বোতামে কিছু স্টাইলিং যোগ করা যাক। আমরা নিম্নরূপ বোতাম সেটিংস আপডেট করব:

• বোতাম প্রান্তিককরণ: কেন্দ্র
• বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
• বোতাম সীমানা প্রস্থ: 1px
• বোতাম বর্ডার রঙ: #555555
• বোতাম সীমানা ব্যাসার্ধ: 10px
• বোতাম আইকন: স্ক্রিনশট দেখুন
• মার্জিন: 20px উপরে, 20px নীচে, 20px বাম, 20px ডান
• প্যাডিং: 0.5em উপরে, 0.5em নীচে, 2em বাম, 2em ডান

গুরুত্বপূর্ণ: আমরা সারি ফাঁক ব্যবহার করার পরিবর্তে ব্যবধান তৈরি করতে মডিউলে মার্জিন ব্যবহার করছি কারণ আমরা একটি তীর (একটি বিভাজক ব্যবহার করে) যোগ করব যা সারির প্রান্তে (পরম অবস্থান সহ) অবস্থান করা দরকার। যেকোনো সারি বা কলাম প্যাডিং তীরটিকে প্রান্ত থেকে দূরে ঠেলে দেবে।

এখন, বোতামটিকে কলাম/সারির পুরো প্রস্থে বিস্তৃত করতে আমাদের প্রধান উপাদানে নিম্নলিখিত কাস্টম CSS স্নিপেট যোগ করতে হবে:

display: block !important

আপনি এখন আমাদের মেনু পপওভারে আরও কয়েকটি বোতাম যোগ করতে বোতামটি দুই (বা তার বেশি) বার নকল করতে পারেন।

পপওভার তীর তৈরি করা হচ্ছে

Popper.js পপওভারের সাথে একটি তীর অবস্থান সমর্থন করে। তীরটি তৈরি করতে, আমাদের সারির শেষ বোতামের নীচে একটি নতুন বিভাজক যোগ করুন।

বিভাজক সেটিংসে, বিভাজক প্রদর্শন না করার জন্য নির্বাচন করুন। তারপর, উন্নত ট্যাবের অধীনে, নিম্নলিখিত CSS আইডি যোগ করুন:

• CSS আইডি: পপার-তীর

আমরা ’ পরে তীর স্টাইল করতে এবং অবস্থান করতে একটি কাস্টম বাহ্যিক CSS ব্যবহার করব।

পপওভার বোতাম তৈরি করা (বা রেফারেন্স)

একটি পপার পপওভারের দুটি মূল উপাদানের মধ্যে পপওভার উপাদান (বা পপার) এবং পপওভারটি নিজেকে সংযুক্ত করে এমন বিষয় অন্তর্ভুক্ত করে। আপনি একটি রেফারেন্স হিসাবে যে কোনো Divi উপাদান ব্যবহার করতে পারেন যা পপওভার তৈরি করে, কিন্তু এই উদাহরণের জন্য, আমরা একটি বোতাম ব্যবহার করতে যাচ্ছি।

পপারের জন্য বিষয় তৈরি করা: বোতাম

আমরা আমাদের বোতাম তৈরি করার আগে, আমাদের পপওভার সারির নীচে একটি নতুন এক-কলাম সারি যুক্ত করতে হবে।

তারপর সারিতে একটি নতুন বোতাম মডিউল যোগ করুন।

নিম্নরূপ কিছু মৌলিক স্টাইলিং সহ বোতাম সেটিংস আপডেট করুন:

• বোতাম পাঠ্যের রঙ: #ffffff
• বোতামের পটভূমির রঙ: #a043e8
• বোতাম সীমানা প্রস্থ: 0px
• বোতাম সীমানা ব্যাসার্ধ: 10px

এরপরে, প্রয়োজনীয় CSS আইডি যোগ করুন যা পরবর্তীতে আমাদের পপওভার রেফারেন্স হিসাবে বোতামটিকে টার্গেট করতে এবং ব্যবহার করতে দেয়:

• CSS আইডি: পপার-বোতাম

এর কোড যোগ করা যাক

এখন আমাদের পপওভার এবং বোতাম সম্পূর্ণ হয়েছে, আমরা জাদু ঘটানোর জন্য কোড যোগ করতে প্রস্তুত।

এটি করার জন্য, দ্বিতীয় সারিতে রেফারেন্স বোতাম মডিউলের অধীনে একটি কোড মডিউল যোগ করুন।

কোডটি কাজ করার জন্য পৃষ্ঠার নীচে থাকা গুরুত্বপূর্ণ।

প্রথমে, আমরা ’ CSS যোগ করব।

কোড কন্টেন্ট বক্সে, HTML-এ CSS মোড়ানোর জন্য প্রয়োজনীয় স্টাইল ট্যাগ যোগ করুন। তারপর স্টাইলট্যাগগুলির মধ্যে নিম্নলিখিত সিএসএসটি অনুলিপি করুন এবং পেস্ট করুন:

/*hide and show popup styling*/#popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;}/*keep popper visible in the Divi Builder for editing*/#et-fb-app #popper-popup {display: block;} /*build the arrow targeting the divider with class 'popper-arrow'*/#popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);}/*position arrow using popper.js data-popper-placement attribute*/#popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;}#popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;}#popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;}#popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;}/*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

এর পরে, আমাদের ascript যোগ করে popper.js লাইব্রেরি অ্যাক্সেস করতে হবে যা তাদের CDN থেকে Popper.js আমদানি করে (https://unpkg.com/@popperjs/core@2)। endingstyletag এর অধীনে, কোড বক্সে নিম্নলিখিত স্ক্রিপ্ট পেস্ট করুন।

লাইব্রেরি আমদানি করতে একটি স্ক্রিপ্ট ট্যাগের মধ্যে নিম্নলিখিত src ব্যবহার করুন:

src="https://unpkg.com/@popperjs/core@2"

এটিকে ঐটির মত দেখতে হবে:

যে কোডটি ব্যবহার করবে সেটি যোগ করার আগে আমরা এখন Popper.js আমদানি করব। সুতরাং, Popper.js-এ স্ক্রিপ্টপয়েন্ট করার পরে, জাভাস্ক্রিপ্ট মোড়ানোর জন্য প্রয়োজনীয় স্ক্রিপ্ট ট্যাগগুলি যোগ করুন যা আমাদের যোগ করতে হবে। তারপর স্ক্রিপ্ট ট্যাগের মধ্যে নিম্নলিখিত জাভাস্ক্রিপ্ট পেস্ট করুন।

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow");let popperInstance = null;//create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});}//destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}}//show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();}//hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();}//toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

এটা ’! আমরা সব শেষ. এখন চূড়ান্ত ফলাফল পরীক্ষা করা যাক.

চূড়ান্ত ফলাফল পূর্বরূপ

এই টিউটোরিয়ালের ফলাফল দেখতে, আমাদের পপার পপওভারের পজিশনিং ম্যাজিক পরীক্ষা করার জন্য কিছু স্ক্রোলিং স্পেস তৈরি করতে হবে।

এটি করার জন্য, বিভাগ সেটিংস খুলুন এবং নিম্নরূপ কিছু মার্জিন যোগ করুন:

• মার্জিন: 80vh উপরে, 80vh নীচে

কার্যকারিতা দেখতে কেমন তা এখানে:

ব্যবহারকারীর স্ক্রোল বা ব্রাউজারের আকার পরিবর্তন করার সাথে সাথে পপওভারের অবস্থান (এবং তীর) কীভাবে গতিশীলভাবে পরিবর্তিত হয় তা লক্ষ্য করুন।

সারসংক্ষেপ

আপনি যদি Divi-তে popper.js ব্যবহার করে একটি পপওভার তৈরি করতে চান, তাহলে আপনাকে কিছুটা জাভাস্ক্রিপ্টের উপর নির্ভর করতে হবে, তবে ফলাফলটি মূল্যবান। পপওভারের গতিশীল অবস্থান এমন একটি দুর্দান্ত UI উপাদান যা যেকোনো ওয়েবসাইটকে উপকৃত করবে। আপনি যে ? সম্পর্কে কি মনে করেন আপনি ইতিমধ্যে ? চেষ্টা করেছেন আমাদের জানান।