এলিমেন্টরের সাথে কীভাবে স্টিকি হেডার এবং স্ক্রলিং প্রভাবগুলি ব্যবহার করবেন

একজন ব্যক্তি যখন আপনার ওয়েবসাইট পরিদর্শন করেন তখন একটি শিরোনাম সাধারণত প্রথম জিনিসটি দেখে এবং এটি তারা কীভাবে এটি অন্বেষণ করে তার ভিত্তি হিসাবে কাজ করে৷

আপনার একটি ইকমার্স ওয়েবসাইট, একটি ব্যক্তিগত ওয়েবসাইট, শিক্ষার জন্য একটি ওয়েবসাইট, একটি সম্প্রদায় ফোরাম, বা মিডিয়ার জন্য একটি ওয়েবসাইট হোক না কেন, হেডারটি ব্রাউজ করা সহজ এবং ব্যবহার করা উপভোগ্য করে তোলে৷

উন্নত ব্যবহারকারী নেভিগেশনের জন্য একটি ওয়েবসাইট সংগঠিত এবং গঠন করতে স্টিকি হেডারগুলি ওয়েব ডিজাইনারদের মধ্যে ক্রমশ জনপ্রিয় হয়ে উঠছে।

আমরা এই টিউটোরিয়ালে এলিমেন্টর ব্যবহার করে কীভাবে আপনার স্টিকি হেডার তৈরি করবেন তা দেখাব।

স্টিকি হেডার ব্যবহারকারীরা পৃষ্ঠার শিরোনাম এবং মেনু বিভাগ দেখতে দেয় তা নির্বিশেষে তারা কতটা নিচে স্ক্রোল করে।

• ধাপ 1: একটি মেনু তৈরি করতে
• ধাপ 2: এলিমেন্টরে আপনার হেডার তৈরি করা
• ধাপ 3: এলিমেন্টর ব্যবহার করে একটি হেডার টেমপ্লেট তৈরি করুন
• ধাপ 4: কিভাবে আপনার এলিমেন্টর হেডার স্টিকি করা যায়
• ধাপ 5: আমাদের CSS কাস্টমাইজ করুন
• উপসংহার

ধাপ 1: একটি মেনু তৈরি করতে

wp-admin > উপস্থিতি > মেনুতে যান এবং একটি প্রধান মেনু তৈরি করুন। হেডারে, আপনি যে বিভাগটি প্রদর্শন করতে চান তা টাইপ করুন।

ধাপ 2: এলিমেন্টরে আপনার হেডার তৈরি করা

আপনি প্রধান মেনু তৈরি করা শেষ করে এলিমেন্টর টেমপ্লেট > থিম বিল্ডার- এ যান থিম নির্মাতা পৃষ্ঠায় শিরোনাম এলাকা নির্বাচন করুন এবং " নতুন শিরোনাম যোগ করুন " এ ক্লিক করুন।

হেডার টেমপ্লেটটিকে একটি নাম দিন এবং পপ-আপ স্ক্রিনে Create Template

এর পরে আপনাকে এলিমেন্টর সম্পাদনা পৃষ্ঠায় নিয়ে যাওয়া হবে। আপনি হয় আগে থেকে তৈরি হেডার টেমপ্লেটগুলির একটি ব্যবহার করতে পারেন বা স্ক্র্যাচ থেকে আপনার নিজের ডিজাইন করতে পারেন।

আমরা এই টিউটোরিয়ালে আমাদের Elementor স্টিকি হেডার দিয়ে স্ক্র্যাচ থেকে শুরু করব।

আমরা একটি টেমপ্লেট ডিজাইন করা শুরু করার আগে আপনি এলিমেন্টর এডিটরে বিভিন্ন হেডার উইজেট দেখতে পারেন। আমরা এই বিভাগগুলি ব্যবহার করে দ্রুত এবং সহজেই একটি হেডার ডিজাইন করতে পারি।

ধাপ 3: এলিমেন্টর ব্যবহার করে একটি হেডার টেমপ্লেট তৈরি করুন

একটি দুই-কলাম লেআউট তৈরি করুন। নিশ্চিত করুন যে বিভাগের বিষয়বস্তুর প্রস্থ " বক্সযুক্ত " এ সেট করা আছে।

এলিমেন্টর সম্পাদনা বিভাগে বিষয়বস্তুর প্রস্থ সেটিংসে, “ সম্পাদনা ” কলামের অধীনে প্রথম কলামের প্রস্থ 20% সেট করুন।

আপনার ওয়েবসাইটের সাইট লোগোটি প্রথম কলামে রাখুন এবং এটিকে বাম দিকে সারিবদ্ধ করুন৷

দ্বিতীয় কলামে একটি নেভি মেনু যোগ করুন এবং ধাপ 1 এ আপনার তৈরি করা প্রধান মেনু নির্বাচন করুন। ডানদিকে নেভিগেশন মেনুটি সারিবদ্ধ করুন।

আমরা এই টিউটোরিয়ালের জন্য শিরোনামটি সহজ রাখতে যাচ্ছি। আপনি একটি পটভূমির রঙ যোগ করে, অ্যানিমেশন প্রভাব, বোতাম এবং অন্যান্য উপাদানগুলি ঘোরাফেরা করে আপনার শিরোনামকে আরও বিশদ করতে পারেন।

ধাপ 4: কিভাবে আপনার এলিমেন্টর হেডার স্টিকি করা যায়

এখন যেহেতু আমরা আমাদের মৌলিক এলিমেন্টর হেডার তৈরি করেছি, এটি একটি স্টিকি হেডারে পরিণত করার সময় এসেছে।

এটি করতে, সম্পাদনা বিভাগে (সম্পূর্ণ শিরোনাম বিভাগ)। ড্রপ-ডাউন মেনু থেকে Advanced > Motion Effects নির্বাচন করুন

মোশন ইফেক্টের অধীনে " স্টিকি টু দ্য টপ ডিভাইসগুলি " যেখানে আপনি স্টিকি হেডারটি দেখতে চান।

একটি স্টিকি হেডার প্রায় সবসময়ই ট্যাবলেট-আকারের ডিভাইসে অবাঞ্ছিত, এবং মোবাইল স্ক্রিনেও এটি প্রায় সবসময়ই অবাঞ্ছিত। ফলস্বরূপ, শুধুমাত্র "ডেস্কটপ" নির্বাচিত রেখে স্টিকি অনের অধীনে উভয় বিকল্পের পাশে "x" এ ক্লিক করুন।

আপনি যখন আপনার কাজের সাথে সন্তুষ্ট হন, তখন " প্রকাশ করুন " এ ক্লিক করুন; এটি স্টিকি হেডার সক্রিয় করবে, কিন্তু এটি এই সময়ে আপনার বর্তমান থিম হেডার প্রতিস্থাপন করবে না।

আপনি এটি প্রকাশ করার পরে এলিমেন্টর আপনাকে আপনার শিরোনামের জন্য একটি শর্ত যুক্ত করতে অনুরোধ করে। আপনি শর্ত যোগ করে সাইটে যেখানে চান সেখানে হেডার দেখাতে পারেন।

আমরা 404 পৃষ্ঠা বাদ দিয়ে এই শিরোনামটি সমগ্র সাইটে উপস্থিত করতে চেয়েছিলাম। ফলস্বরূপ, আমরা 404 পৃষ্ঠা বাদ দিয়ে সম্পূর্ণ সাইটটিকে পছন্দের মধ্যে অন্তর্ভুক্ত করেছি।

আপনি দেখতে পাচ্ছেন, আপনার ব্যক্তিগতকৃত স্টিকি হেডার তৈরি করতে এলিমেন্টর ব্যবহার করা সহজ এবং ব্যথাহীন!

কাস্টম সিএসএস এলিমেন্টর ব্যবহার করে আপনার এলিমেন্টর স্টিকি হেডারটিকে অনেক সুন্দর করে তুলুন এটিকে আরও স্টাইলিশ করতে একটি CSS ক্লাস যোগ করে আপনাকে একটি স্টিকি হেডার কাস্টমাইজ করতে দেয়।

আপনি এখানে স্টিকি হেডারের উচ্চতা, পটভূমির রঙ, রূপান্তর এবং স্টিকি প্রভাব কাস্টমাইজ করতে পারেন।

আপনার স্টিকি হেডারকে আরও স্টাইলিশ করতে সম্পাদনা এলাকায় ফিরে যান (সম্পূর্ণ হেডার বিভাগ)। ড্রপ-ডাউন মেনু থেকে Advanced > Motion Effects নির্বাচন করুন

" প্রভাব অফসেট " 100 সেট করুন। যখন একজন ভিজিটর আপনার ওয়েবসাইট ব্যবহার করে, তখন এটি স্ক্রলিং দূরত্ব যেখানে স্ক্রলিং প্রভাব ঘটে।

মোশন অফসেট 100 এ সেট করুন

অনুগ্রহ করে মনে রাখবেন যে অফসেট প্রভাব বিকল্পগুলি শুধুমাত্র তখনই কাজ করবে যদি কাস্টম CSS ব্যবহার করা হয়। ফলস্বরূপ, আপনি যদি আপনার নিজস্ব কোনো কাস্টম CSS যোগ না করেন, আপনি শেষ বিকল্পটি এড়িয়ে যেতে পারেন।

চূড়ান্ত স্টিকি হেডার প্রকাশ করার আগে, আপনি ঐচ্ছিকভাবে শেষ স্টিকি হেডারে শর্ত যোগ করতে পারেন। একটি amp হল যেখানে আপনি স্টিকি হেডারটি দেখাতে চান। একটি উদাহরণ হিসাবে amp আপনি মানদণ্ড " সম্পূর্ণ সাইট " চয়ন করতে পারেন।

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

আমরা পরিষ্কারের কাজ সম্পন্ন করেছি; আমরা এখন কাস্টম CSS কোড যোগ সহ ওয়েবসাইটের জটিলতায় চলে যাই। আমরা Elementor-এর জন্য বিনামূল্যে স্টিকি হেডার প্রভাব পাওয়ার জন্য মৌলিক এবং উন্নত কৌশল উভয়ই প্রদর্শন করব। আপনি যদি Elementor 2.9 বা উচ্চতর ব্যবহার করেন, তাহলে আপনি এই CSSটিকে আপনার সাইটে অন্তর্ভুক্ত করতে গ্লোবাল স্টাইল নিয়ম ব্যবহার করতে পারেন।

কাস্টম সিএসএস অন্তর্ভুক্ত করতে নীচে বর্ণিত পদ্ধতিগুলি অনুসরণ করুন:

• হ্যামবার্গার মেনু অ্যাক্সেস করতে, এটিকে এলিমেন্টর মেনুর উপরের-বাম কোণে সনাক্ত করুন এবং এটি নির্বাচন করুন।
• গ্লোবাল স্টাইল বিভাগের নীচে ড্রপ-ডাউন মেনু থেকে থিম শৈলী চয়ন করুন নির্বাচন করুন।
• সেই বিভাগে ড্রপ-ডাউন মেনু থেকে কাস্টম CSS নির্বাচন করুন (রঙটি তার আগের জেনেটিক লাল রঙ থেকে নীল হয়ে যাবে)।

এর পরে, নীচের CSS কোড পেস্ট করুন।

header.sticky-header { --header-height: 90px; --অস্বচ্ছতা: 0.90; --সঙ্কুচিত-মি: 0.80; --স্টিকি-ব্যাকগ্রাউন্ড-রং: #0e41e5; --ট্রানজিশন: .3s ইজি-ইন-আউট; ট্রানজিশন: ব্যাকগ্রাউন্ড-কালার var(--ট্রানজিশন), ব্যাকগ্রাউন্ড-ইমেজ var(--ট্রানজিশন), ব্যাকড্রপ-ফিল্টার var(--ট্রানজিশন), অপাসিটি var(--ট্রানজিশন); } header.sticky-header.elementor-sticky--effects { background-color: var(--স্টিকি-ব্যাকগ্রাউন্ড-রঙ) !গুরুত্বপূর্ণ; ব্যাকগ্রাউন্ড-ইমেজ: কিছুই না! গুরুত্বপূর্ণ; অস্বচ্ছতা: var(--অস্বচ্ছতা) !গুরুত্বপূর্ণ; -ওয়েবকিট-ব্যাকড্রপ-ফিল্টার: ব্লার(10px); ব্যাকড্রপ-ফিল্টার: ব্লার(10px); } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--সঙ্কুচিত-me))!গুরুত্বপূর্ণ; উচ্চতা: calc(var(--হেডার-উচ্চতা) * var(--সঙ্কুচিত-আমাকে)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!গুরুত্বপূর্ণ; প্যাডিং-টপ: 10px! গুরুত্বপূর্ণ; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--srink-me)); }

ধাপ 5: আমাদের CSS কাস্টমাইজ করুন

উপরে তালিকাভুক্ত নির্দেশাবলী আপনাকে Elementor-এ ক্রমবর্ধমান স্টিকি হেডার তৈরি করার প্রক্রিয়ার মাধ্যমে গাইড করবে। আপনি যদি হেডারটিকে আরও ব্যক্তিগতকৃত করার বিষয়ে আরও সুনির্দিষ্ট তথ্য জানতে চান, তাহলে আপনি নীচে দেওয়া CSS কোডটি দেখতে পারেন, যা আপনাকে হেডার ডিজাইনের সাথে আরও সৃজনশীল হতে দেয়। আপনার প্রয়োজনের উপর নির্ভর করে, আপনি অনেক সেটিংস পরিবর্তন করে এবং কম বা বেশি স্টিকি করে Elementor স্টিকি হেডারকে ব্যক্তিগতকৃত করতে পারেন। আমরা সুপারিশ করি যে আপনি সরাসরি এলিমেন্টরে এই CSS পরিবর্তনটি অন্তর্ভুক্ত করতে একটি কোড এডিটর ব্যবহার করুন। আপনি ভিজ্যুয়াল স্টুডিও কোড বা অ্যাটম ব্যবহার করতে পারেন, যা আপনাকে কোডটি দ্রুত একত্রিত করতে এবং সুবিধাগুলি কাটাতে সহায়তা করবে। এই সম্পাদকগুলি ব্যবহার করার জন্য বিনামূল্যে এবং Windows, Mac OS X এবং Linux সহ বিভিন্ন সিস্টেম থেকে অ্যাক্সেস করা যেতে পারে৷

এই বিভাগটি প্রদর্শন করবে কিভাবে আপনি সিএসএস স্টাইল শীট ব্যবহার করে এলিমেন্টর সঙ্কুচিত হেডারের প্রভাবগুলি সামঞ্জস্য করতে পারেন। আপনি যদি কাস্টম প্রপার্টিতে শুধুমাত্র একটি পরিবর্তন করেন, তাহলে বাকি CSS কোডের সাথে মেলে তা অবিলম্বে পরিবর্তন করা হবে।

ক্রমহ্রাসমান শিরোনামের জন্য কাস্টমাইজেশন বিকল্পগুলি মোট পাঁচটি ভিন্ন উপায়ে উপলব্ধ। সমস্ত ভেরিয়েবল অবশ্যই কাস্টমাইজ করা উচিত নয়, তবে আপনি যদি এটি চয়ন করেন তবে আপনার কাছে এটি করার বিকল্প রয়েছে। আপনি কোন ভেরিয়েবলগুলি পরিবর্তন করতে চান তা ঠিক করার সাথে সাথে আপনি শুধুমাত্র সেই ভেরিয়েবলগুলিকে সংশোধন করতে পারেন এবং বাকি প্যারামিটারগুলি অপরিবর্তিত রেখে দিতে পারেন৷

এখানে পাঁচটি CSS ভেরিয়েবল রয়েছে, প্রতিটি ভেরিয়েবলের জন্য ডিফল্ট মান লাল রঙে দেখানো হয়েছে।

স্টিকি পটভূমির রঙ হল #0e41e5 এবং হেডারের উচ্চতা 90px। অন্যান্য স্টাইলিং বিকল্পগুলির মধ্যে রয়েছে: 0.90-এর অস্বচ্ছতা, 0.80-এর সঙ্কুচিত-মি, 0.90-এর অস্বচ্ছতা, এবং 300ms-এর সহজ-ইন/ইজি-আউট ট্রানজিশন৷

কাস্টম বৈশিষ্ট্যগুলি হল সেই উপাদানগুলি যা আমাদের এক্স amp লে কোডে ডাবল ড্যাশ “–” এর পরে প্রদর্শিত হয় এবং আপনি সেগুলিকে আমাদের s amp le কোডের শীর্ষে তালিকাভুক্ত করতে পারেন। যা প্রয়োজন তা হল বাক্যে কোলনের পরে এবং সেমি-কোলনের আগে যে মানটি উপস্থিত হয় তা সামঞ্জস্য করা।

amp , আপনি যদি হেডারের উচ্চতা 100px-এ বাড়াতে চান, তাহলে উচ্চতা পরিবর্তনের আগে এবং পরে এটি কেমন দেখাবে তা এখানে:

আগে, হেডারের উচ্চতা ছিল 90 পিক্সেল; পরে, হেডারের উচ্চতা ছিল 100 পিক্সেল।

Elementor ব্যবহার করে, আপনি বিভিন্ন উপায়ে একটি স্টিকি হেডার মেনু ডিজাইন করতে পারেন। আপনি শুধুমাত্র একটি বিনামূল্যের এলিমেন্টর স্টিকি হেডার তৈরি করতে পারবেন না, তবে আপনি এটিতে কাস্টম CSS যোগ করে হেডারটিকে ব্যক্তিগতকৃত করতে পারেন। এলিমেন্টর ব্যবহার করে কীভাবে ক্রমবর্ধমান স্টিকি এলিমেন্টর শিরোনাম তৈরি করা যায় এবং এই ধাপে ধাপে নির্দেশিকা দিয়ে আপনার সিএসএস টুইক করা যায় সে সম্পর্কে বিস্তারিত নির্দেশনা পাওয়া সম্ভব।

এলিমেন্টর বিভিন্ন হেডার টেমপ্লেট অন্তর্ভুক্ত করে; প্রতিটি স্বতন্ত্র এবং মার্জিত এবং আপনার দর্শকদের আপনার ওয়েবসাইট নেভিগেট করতে সাহায্য করে।

Elementor এর সাথে, আপনার ওয়েবসাইট হেডারের শৈলীর উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ আছে। amp , আপনি সাইটের লোগোটি পৃষ্ঠার কেন্দ্রে এবং এটির নীচে প্রধান মেনুতে রাখতে পারেন। ফোন নম্বর, সোশ্যাল মিডিয়া লিঙ্ক এবং অন্যান্য তথ্য প্রদর্শন করতে আপনি প্রধান শিরোনামের উপরে একটি শিরোনাম যোগ করতে পারেন।

Elementor ব্যবহারকারীদের জন্য উপলভ্য অসংখ্য হেডার ডিজাইনের বিকল্পের কয়েকটি amp উদাহরণ এখানে।

উপসংহার

আপনার ওয়েবসাইটে একটি স্টিকি শিরোনাম সহ দর্শকদের জন্য আপনার সাইটটি অতিক্রম করা এবং আপনার সাইটের সমস্ত এলাকায় ক্লিক বৃদ্ধি করা সহজ করে তুলতে পারে৷

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