আপনি কি এলিমেন্টরে Z সূচক সহ একটি ভাসমান বোতাম তৈরি করতে চান?
ওয়েব ডিজাইনের জগতে, ব্যবহারকারীর ব্যস্ততা বাড়াতে দৃশ্যমানতা এবং অ্যাক্সেসযোগ্যতা অত্যন্ত গুরুত্বপূর্ণ। একটি ভাসমান বোতাম একটি বৈশিষ্ট্য যা মনোযোগ আকর্ষণ করে এবং আপনার সাইটে মিথস্ক্রিয়া সহজতর করে।
Elementor-এ Z সূচক ব্যবহার করে, আপনি এই বোতামটিকে সর্বদা অন্যান্য উপাদানের উপরে রাখতে পারেন, এটি নিশ্চিত করে যে এটি আপনার দর্শকদের কাছে সহজে অ্যাক্সেসযোগ্য, পৃষ্ঠা স্ক্রলিং নির্বিশেষে।
এই নিবন্ধটি আপনাকে Elementor-এ Z সূচক সহ একটি ভাসমান বোতাম তৈরি করার প্রক্রিয়ার মধ্য দিয়ে নিয়ে যায়। আমরা একটি বোতাম যোগ করার জন্য প্রয়োজনীয় পদক্ষেপগুলি কভার করব, এটি সঠিকভাবে অবস্থান করব এবং এর Z সূচকটি সর্বদা দৃশ্যমান হওয়ার জন্য কনফিগার করব।
আপনি একটি কল টু অ্যাকশন বোতাম, একটি ব্যাক টু টপ বোতাম, বা অন্য কোনো ইন্টারেক্টিভ উপাদান যোগ করতে চান না কেন, এই পদ্ধতিটি আপনাকে কোড করার প্রয়োজন ছাড়াই এটিকে কার্যকরীভাবে সংহত করতে দেবে।
আজ আমরা আপনাকে কী দেখাতে চাই তা আপনি দেখতে চাইলে নীচের ভিডিওটি দেখুন
টেবিল des Matières
কেন একটি ভাসমান বোতাম তৈরি?
1. বর্ধিত দৃশ্যমানতা ভাসমান বোতামগুলি এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি পৃষ্ঠাটি যতই স্ক্রোল করুন না কেন, দৃশ্যমান থাকে। ভাসমান বোতাম ব্যবহার করে, আপনি নিশ্চিত করেন যে কল টু অ্যাকশন, যোগাযোগ ফর্ম, বা গুরুত্বপূর্ণ নেভিগেশন বিকল্পগুলি সর্বদা আপনার দর্শকদের নাগালের মধ্যে থাকে। এটি আপনার ওয়েবসাইটের সাথে সবচেয়ে উপযুক্ত মুহূর্তে ইন্টারঅ্যাক্ট করার সম্ভাবনা বাড়িয়ে তোলে।
2. উন্নত ব্যবহারকারীর অভিজ্ঞতা : একটি ভাসমান বোতাম দর্শকদের পৃষ্ঠাটি অনুসন্ধান বা স্ক্রোল করার প্রয়োজন ছাড়াই প্রয়োজনীয় বৈশিষ্ট্যগুলিতে দ্রুত অ্যাক্সেস প্রদান করে ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে৷ এর মধ্যে যোগাযোগের বোতাম, শীর্ষে ফিরে যাওয়া বা বিশেষ অফার অন্তর্ভুক্ত থাকতে পারে। নেভিগেশন সহজ করে, আপনি আপনার সাইটকে আরও স্বজ্ঞাত এবং ব্যবহারে আনন্দদায়ক করে তোলেন।
3. বর্ধিত রূপান্তর হার : ভাসমান বোতামগুলি মনোযোগ আকর্ষণ করে এবং দর্শনার্থীদের ফর্ম পূরণ বা পণ্য কেনার মতো পদক্ষেপ নিতে উৎসাহিত করে। উচ্চ Z-সূচক সহ বোতামগুলি কৌশলগতভাবে স্থাপন করে, আপনি তাদের দৃশ্যমানতা এবং কার্যকারিতা সর্বাধিক করেন, যা আপনার রূপান্তর হার উল্লেখযোগ্যভাবে বৃদ্ধি করতে পারে।
4. পজিশনিং নমনীয়তা : ভাসমান বোতামগুলি অবস্থানের ক্ষেত্রে দুর্দান্ত নমনীয়তা প্রদান করে। আপনি পৃষ্ঠায় যেখানেই চান আপনি সেগুলিকে রাখতে পারেন, এটি একটি লাইভ চ্যাট বোতামের জন্য নীচের ডানদিকের কোণে, বা পিছনে থেকে শীর্ষ বোতামের জন্য উপরের কোণে। এই অভিযোজনযোগ্যতা আপনাকে আপনার সাইট এবং আপনার দর্শকদের নির্দিষ্ট চাহিদা মেটাতে দেয়।
5. বিপণনের প্রয়োজনে অভিযোজনযোগ্যতা : ভাসমান বোতাম ব্যবহার করে, আপনি সহজেই ব্যবহারকারীর অভিজ্ঞতার সাথে প্রচার বা নিউজলেটার সাইনআপের মতো মার্কেটিং উপাদানগুলিকে সরাসরি একীভূত করতে পারেন। ভাসমান বোতামগুলি দর্শকদের ব্রাউজিংয়ে বাধা না দিয়েই তাদের দৃষ্টি আকর্ষণ করে, যা বিশেষ অফার প্রচার বা যোগাযোগের তথ্য সংগ্রহের জন্য আদর্শ।
6. উন্নত অ্যাক্সেসযোগ্যতা : ভাসমান বোতামগুলি গুরুত্বপূর্ণ বৈশিষ্ট্যগুলি ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য করে তোলে, এমনকি যখন তারা পৃষ্ঠার নীচে থাকে। এটি বিশেষ করে কন্টেন্টের দীর্ঘ পৃষ্ঠা সহ সাইটগুলির জন্য উপযোগী, যেখানে একজন ব্যবহারকারীকে উপরের দিকে নেভিগেট করতে বা দ্রুত তথ্য অ্যাক্সেস করতে হতে পারে।
7. একটি সমন্বিত নকশা তৈরি করা : আপনার ডিজাইনে ভাসমান বোতামগুলিকে একীভূত করার মাধ্যমে, আপনি আপনার সাইটের সমস্ত পৃষ্ঠা জুড়ে ভিজ্যুয়াল এবং কার্যকরী ধারাবাহিকতা বজায় রাখতে পারেন৷ সামঞ্জস্যপূর্ণ শৈলী সহ একই ভাসমান বোতামগুলি ব্যবহার করা আপনার ব্র্যান্ড পরিচয়কে শক্তিশালী করতে এবং সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে।
সংক্ষেপে, একটি ভাসমান বোতাম তৈরি করা আপনার ওয়েবসাইটের মূল উপাদানগুলি দৃশ্যমান এবং অ্যাক্সেসযোগ্য থাকে তা নিশ্চিত করার একটি দুর্দান্ত উপায়।
তবে প্রথমে সন্ধান করুন: কীভাবে ওয়ার্ডপ্রেসে এলিমেন্টর ইনস্টল করবেন
কীভাবে এলিমেন্টরে জেড ইনডেক্স দিয়ে ফ্লোটিং বোতাম তৈরি করবেন
এলিমেন্টর-এ Z সূচকের সাথে একটি ভাসমান বোতাম তৈরি করা হল একটি সহজ এবং কার্যকর উপায় যাতে নিশ্চিত করা যায় যে আপনার ওয়েবসাইটের কিছু উপাদান সর্বদা ব্যবহারকারীদের কাছে দৃশ্যমান এবং অ্যাক্সেসযোগ্য থাকে, এমনকি তারা পৃষ্ঠাটি স্ক্রোল করলেও।
এটি অন্যান্য সমস্ত উপাদানের উপরে প্রদর্শিত করতে Z-সূচক সেটিংস ব্যবহার করে একটি ভাসমান বোতাম যুক্ত করার জন্য এখানে একটি ধাপে ধাপে পদ্ধতি রয়েছে।
ধাপ 1: একটি নতুন বোতাম যোগ করুন
1. এলিমেন্টর খুলুন
- পৃষ্ঠায় নেভিগেট করুন বা পোস্ট করুন যেখানে আপনি ভাসমান বোতাম যোগ করতে চান।
- Elementor এর ভিজ্যুয়াল এডিটর খুলতে "Edit with Elementor" এ ক্লিক করুন।
2. বোতাম উইজেট যোগ করুন
- বাম দিকের উইজেট প্যানেলে, "বোতাম" উইজেটটি খুঁজুন।
- এই উইজেটটিকে আপনার পৃষ্ঠার পছন্দসই বিভাগে টেনে আনুন।
3. বোতামটি কাস্টমাইজ করুন
- বাম প্যানেলে, বোতামের পাঠ্য কাস্টমাইজ করুন, যেমন “ Contactez-কাণ্ডজ্ঞান "বা" একটি ডেমো পান"।
- "এ রঙ, টাইপোগ্রাফি এবং মার্জিন পরিবর্তন করুন শৈলী » যাতে বোতামটি আপনার ডিজাইনে পুরোপুরি ফিট করে।
আরও দেখুন: এলিমেন্টর: সেরা ওয়ার্ডপ্রেস পৃষ্ঠা নির্মাতার সাথে পরিচয়
ধাপ 2: ভাসমান অবস্থান প্রয়োগ করুন
1. অবস্থান কনফিগার করুন
- বাম প্যানেলে "উন্নত" ট্যাবে যান।
- "অবস্থান" এর অধীনে, পছন্দসই প্রভাবের উপর নির্ভর করে "স্থির" বা "পরম" নির্বাচন করুন। "স্থির" অবস্থানটি প্রায়শই ভাসমান বোতামগুলির জন্য ব্যবহার করা হয় কারণ এটি পৃষ্ঠাটি নীচে স্ক্রোল করার সময়ও তাদের জায়গায় রাখে।
2. অবস্থান নির্ধারণ করুন
- পৃষ্ঠায় পছন্দসই অবস্থানে বোতামটি স্থাপন করতে পজিশনিং বিকল্পগুলি ব্যবহার করুন৷ উদাহরণস্বরূপ, আপনি নিম্নলিখিত সেটিংসের সাথে নীচে ডানদিকে এটি স্থাপন করতে পারেন:
- নীচে - অফসেট : 20PX
- অধিকার - ফাঁক : 20PX
- প্রয়োজন অনুসারে এই সেটিংস সামঞ্জস্য করুন যাতে বোতামটি স্পষ্টভাবে দৃশ্যমান হয়।
ধাপ 3: Z সূচক কনফিগার করুন
1. Z সূচক বোঝা
- Z সূচক হল একটি CSS বৈশিষ্ট্য যা নির্ধারণ করে যে কোন উপাদানটি অন্যান্য উপাদানের উপরে প্রদর্শিত হবে। মান যত বেশি হবে, উপাদানটি তত বেশি অন্যদের থেকে আলাদা হবে।
2. বোতামে Z সূচক প্রয়োগ করুন
- এখনও "উন্নত" ট্যাবে, "কাস্টম CSS" বিভাগটি খুঁজুন।
- একটি উচ্চ Z সূচক সেট করতে নিম্নলিখিত CSS কোড যোগ করুন:cssCopy কোড
z-index: 9999; - এই মানটি নিশ্চিত করে যে আপনার ভাসমান বোতামটি সর্বদা পৃষ্ঠার অন্যান্য উপাদানের উপরে দৃশ্যমান হবে।
ধাপ 4: পরীক্ষা করুন এবং সামঞ্জস্য করুন
1. কার্যকারিতা পরীক্ষা করুন
- ভাসমান বোতাম সঠিকভাবে কাজ করে এবং স্ক্রোল করার সময় দৃশ্যমান থাকে তা যাচাই করতে আপনার পৃষ্ঠার পূর্বরূপ দেখুন।
- এটি সঠিকভাবে অবস্থান করছে এবং সমস্ত স্ক্রিনে দৃশ্যমান কিনা তা নিশ্চিত করতে বিভিন্ন ডিভাইসে বোতামটি পরীক্ষা করুন।
2. প্রয়োজন হলে সামঞ্জস্য করুন
- বোতামটি দেখতে বা ব্যবহার করা কঠিন হলে, শৈলী এবং অবস্থান সেটিংসে ফিরে যান।
- বোতামের দৃশ্যমানতা এবং অ্যাক্সেসযোগ্যতা উন্নত করতে রঙ, মার্জিন বা Z সূচক সামঞ্জস্য করুন।
3. প্রয়োজনে এর বোতামটি ঘোরান
কখনও কখনও আপনাকে আপনার ভাসমান বোতামটি ঘোরাতে হবে যাতে এটি আপনার ডিজাইনে পুরোপুরি ফিট হয়।
- ট্যাবের নীচে অগ্রসর, অ্যাক্সেস css ক্লাস ব্লক থেকে বিন্যাস, তারপর লিখ
rotateভিতরে।
আরও দেখুন: এলিমেন্টর: সেরা ওয়ার্ডপ্রেস পৃষ্ঠা নির্মাতার সাথে পরিচয়
- ব্লক অ্যাক্সেস করুন কাস্টম CSS , তারপর ক্ষেত্রে নিম্নলিখিত কোড পেস্ট করুন:
.rotate.rotate
{transform: rotate(90deg);}
Remarque : ব্লক না দেখলে কাস্টম CSS, তারপর আপনি একটি বিনামূল্যে সংস্করণ ব্যবহার করছেন. আপনি এগিয়ে যেতে হবে এলিমেন্টরের প্রো সংস্করণ এই বৈশিষ্ট্যের সুবিধা নিতে।
আরও পড়ুন: এলিমেন্টর: কিভাবে একটি ওয়ার্ডপ্রেস ওয়েবসাইট মাইগ্রেট করবেন
যদি একটি অফসেট থাকে, পজিশনিং-এ যান এবং আপনি যা চান তা মেলে অফসেটগুলি পরিবর্তন করুন৷
আপনি হোভারে এই বোতামটি অ্যানিমেট করতে চাইতে পারেন। তাই
- ট্যাবে অগ্রসর ব্লকে যান ট্রান্সফরমার
- অন হোভার বোতামে ক্লিক করুন
- পেনসিলে ক্লিক করে অফসেট পরিবর্তন করুন
- অফসেট পরিবর্তন করুন
বোতামটি ইচ্ছামত হোভারে চলে যাবে।
এলিমেন্টরে একটি নির্দিষ্ট জিনিস অর্জন করার জন্য বেশ কয়েকটি বিকল্প রয়েছে। ভাসমান বোতামের ক্ষেত্রে, আপনি দুটি বিকল্প ব্যবহার করতে পারেন। এখানে আমরা শুধুমাত্র একটি পদ্ধতি কভার করেছি, অন্য পদ্ধতিটি হবে আরেকটি টিউটোরিয়াল।
আরও পড়ুন: এলিমেন্টর: কিভাবে একটি ওয়ার্ডপ্রেস ওয়েবসাইট মাইগ্রেট করবেন
আপনি যদি আরও স্টাইলিং বিকল্প পেতে চান, তাহলে পপআপের নির্মাতা ব্যবহার করে একটি ভাসমান অ্যাকশন বোতাম তৈরি করা একটি ভাল বিকল্প হবে কারণ আপনার কাছে বোতামটি কাস্টমাইজ করার পাশাপাশি আচরণের বিকল্প থাকবে, যেমন বোতাম বন্ধ করার সময়, সময়কাল, প্রবেশ বা প্রস্থান অ্যানিমেশন ইত্যাদি। .
আপনি এই কাজটি সহজে সম্পন্ন করেছেন। শুধু আপনার ট্যাবলেট এবং স্মার্টফোনের কাজের পূর্বরূপ দেখুন, প্রতিটি ডিভাইসের সাথে মেলে মার্জিন পরিবর্তন করার চেষ্টা করুন।
FAQ
কেন আমার ভাসমান বোতাম অন্যান্য উপাদানের উপরে প্রদর্শিত হয় না?
যাচাই করুন যে Z সূচকটি সঠিকভাবে কনফিগার করা হয়েছে এবং নিশ্চিত করুন যে পৃষ্ঠার অন্য কোনো উপাদানের Z সূচক বেশি নেই।
ভাসমান বোতাম কি মোবাইল ডিভাইসের সাথে সামঞ্জস্যপূর্ণ?
হ্যাঁ, ফ্লোটিং বোতামগুলি মোবাইল ডিভাইসে ভাল কাজ করে যদি আপনি ছোট স্ক্রিনের জন্য অবস্থান এবং স্টাইলিং সামঞ্জস্য করেন।
আমি কি আমার ভাসমান বোতামে অ্যানিমেশন ব্যবহার করতে পারি?
একেবারে। বোতামটিকে আরও আকর্ষণীয় করতে আপনি এলিমেন্টরের স্টাইলিং বিকল্পগুলির মাধ্যমে অ্যানিমেশন যোগ করতে পারেন।
আমি কীভাবে ভাসমান বোতামটি সামঞ্জস্য করতে পারি যাতে এটি সামগ্রীতে হস্তক্ষেপ না করে?
বোতামের চারপাশে স্থান সামঞ্জস্য করতে Elementor-এ মার্জিন এবং প্যাডিং বিকল্পগুলি ব্যবহার করুন যাতে এটি গুরুত্বপূর্ণ বিষয়বস্তুকে কভার না করে।
উপসংহার
এলিমেন্টরে Z-ইনডেক্স সহ একটি ভাসমান বোতাম তৈরি করা আপনার ওয়েবসাইটে ব্যবহারকারীর মিথস্ক্রিয়াকে রূপান্তরিত করতে পারে। এই ধরণের বোতাম, যা আপনি যেভাবেই স্ক্রোল করুন না কেন দৃশ্যমান থাকে, গুরুত্বপূর্ণ কল টু অ্যাকশন, যোগাযোগ ফর্ম বা অন্যান্য গুরুত্বপূর্ণ উপাদানের প্রতি দৃষ্টি আকর্ষণ করার জন্য আদর্শ। এলিমেন্টরের বৈশিষ্ট্যগুলি ব্যবহার করে, আপনি সহজেই ভাসমান অবস্থান নির্ধারণ করতে পারেন এবং Z-ইনডেক্স সামঞ্জস্য করতে পারেন যাতে আপনার বোতামটি অন্যান্য সামগ্রীর চেয়ে আলাদা থাকে।
নির্দেশিত পদক্ষেপগুলি অনুসরণ করে, আপনি প্রোগ্রামিং দক্ষতার প্রয়োজন ছাড়াই একটি কার্যকর ভাসমান বোতাম বাস্তবায়ন করতে পারেন। আপনার বোতামের দৃশ্যমানতা এবং প্রভাব পরীক্ষা করার জন্য বিভিন্ন ডিভাইসে পরীক্ষা করা নিশ্চিত করুন। একটি ভাল ডিজাইন করা ভাসমান বোতামের সাহায্যে, আপনি ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করবেন এবং আপনার সাইটে ইন্টারঅ্যাকশন বাড়াবেন।
আপনার ওয়েবসাইটে মিথস্ক্রিয়া উন্নত করতে আর অপেক্ষা করবেন না। এখনই Elementor-এর সাথে একটি ভাসমান বোতাম তৈরি করার চেষ্টা করুন এবং দেখুন কিভাবে এটি আপনার দর্শকদের ব্যস্ততা বাড়াতে পারে।
যদি এই নিবন্ধটি আপনার জন্য দরকারী ছিল, আপনার সহকর্মীদের সাথে শেয়ার করতে দ্বিধা করবেন না এবং আমাদের আপনার প্রতিক্রিয়া জানাবেন! তবে আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.