শিরোনাম সাধারণত একজন ব্যক্তি যখন আপনার ওয়েবসাইট ভিজিট করে তখন প্রথম জিনিসটি দেখে এবং এটি কীভাবে এটি অন্বেষণ করে তার ভিত্তি হিসাবে কাজ করে।
আপনার একটি ইকমার্স ওয়েবসাইট, একটি ব্যক্তিগত ওয়েবসাইট, শিক্ষার জন্য একটি ওয়েবসাইট, একটি কমিউনিটি ফোরাম, বা মিডিয়ার জন্য একটি ওয়েবসাইট, শিরোনাম যা ব্রাউজ করা সহজ এবং ব্যবহার করা উপভোগ্য করে তোলে।
উন্নত ব্যবহারকারী নেভিগেশনের জন্য একটি ওয়েবসাইট সংগঠিত এবং গঠন করার জন্য ওয়েব ডিজাইনারদের মধ্যে স্টিকি হেডার ক্রমশ জনপ্রিয় হয়ে উঠছে।
এই টিউটোরিয়ালে এলিমেন্টর ব্যবহার করে কীভাবে আপনার স্টিকি হেডার তৈরি করবেন তা আমরা আপনাকে দেখাব।
স্টিকি হেডার ব্যবহারকারীদের পৃষ্ঠার শিরোনাম এবং মেনু বিভাগ দেখার অনুমতি দেয় যত তাড়াতাড়ি তারা নিচে স্ক্রোল করে।
আপনার ওয়েবসাইটে একটি স্টিকি হেডার যোগ করতে, wp-admin > উপস্থিতি > এবং একটি প্রধান মেনু তৈরি করুন। হেডারে, আপনি যে বিভাগটি প্রদর্শন করতে চান তা টাইপ করুন।
আপনি প্রধান মেনু তৈরি করা শেষ এলিমেন্টর টেমপ্লেট > থিম বিল্ডার যান থিম নির্মাতা পৃষ্ঠায় শিরোনাম এলাকা নির্বাচন করুন এবং " নতুন শিরোনাম যোগ ।
হেডার টেমপ্লেটটিকে একটি নাম দিন এবং পপ-আপ স্ক্রিনে Create Template
এর পরে আপনাকে এলিমেন্টার এডিটিং পৃষ্ঠায় নিয়ে যাওয়া হবে। আপনি হয় পূর্বনির্মিত হেডার টেমপ্লেটগুলির মধ্যে একটি ব্যবহার করতে পারেন অথবা স্ক্র্যাচ থেকে আপনার নিজের ডিজাইন করতে পারেন।
আমরা এই টিউটোরিয়ালে আমাদের এলিমেন্টার স্টিকি হেডার দিয়ে শুরু থেকে শুরু করব।
আমরা টেমপ্লেট ডিজাইন শুরু করার আগে এলিমেন্টর এডিটরে বিভিন্ন হেডার উইজেট দেখতে পাচ্ছি। আমরা দ্রুত এবং সহজেই এই বিভাগগুলি ব্যবহার করে একটি হেডার ডিজাইন করতে পারি।
একটি দুই-কলাম লেআউট তৈরি করুন। নিশ্চিত করুন যে বিভাগের বিষয়বস্তুর প্রস্থ " বক্সযুক্ত ।
এলিমেন্টর সম্পাদনা বিভাগে বিষয়বস্তুর প্রস্থ সেটিংসে, “ সম্পাদনা ” কলামের অধীনে প্রথম কলামের প্রস্থ 20% সেট করুন।
আপনার ওয়েবসাইটের সাইট লোগোটি প্রথম কলামে রাখুন এবং বাম দিকে সারিবদ্ধ করুন।
দ্বিতীয় কলামে একটি নেভ মেনু যোগ করুন এবং আপনার প্রথম ধাপে নির্মিত প্রধান মেনুটি নির্বাচন করুন। ন্যাভিগেশন মেনুটি ডানদিকে সারিবদ্ধ করুন।
আমরা এই টিউটোরিয়ালের জন্য হেডার সহজ রাখতে যাচ্ছি। আপনি ব্যাকগ্রাউন্ড কালার যোগ করে, অ্যানিমেশন ইফেক্ট, বোতাম এবং অন্যান্য উপাদানগুলিকে হভার করে আপনার হেডারকে আরও বিস্তারিত করতে পারেন।
এখন যেহেতু আমরা আমাদের মৌলিক এলিমেন্টার হেডার তৈরি করেছি, এখন এটি একটি স্টিকি হেডারে পরিণত করার সময়।
এটি করতে, সম্পাদনা বিভাগে (সম্পূর্ণ শিরোনাম বিভাগ)। ড্রপ-ডাউন মেনু থেকে Advanced > Motion Effects নির্বাচন করুন
মোশন এফেক্টের অধীনে স্টিকি টু দ্য টপ নির্বাচন করুন ডিভাইসগুলি " যেখানে আপনি স্টিকি হেডারটি দেখতে চান।
একটি স্টিকি হেডার প্রায় সবসময় ট্যাবলেট আকারের ডিভাইসে অবাঞ্ছিত, এবং এটি মোবাইল স্ক্রিনেও প্রায় সবসময় অবাঞ্ছিত। ফলস্বরূপ, স্টিকি অনের অধীনে উভয় বিকল্পের পাশে "x" ক্লিক করুন, শুধুমাত্র "ডেস্কটপ" নির্বাচিত রেখে।
আপনি যখন আপনার কাজের সাথে সন্তুষ্ট হন, তখন " প্রকাশ ; এটি স্টিকি শিরোনাম সক্রিয় করবে, কিন্তু এটি এই সময়ে আপনার বর্তমান থিম শিরোনাম প্রতিস্থাপন করবে না।
Elementor আপনি আপনার হেডারের জন্য একটি কন্ডিশন যোগ করার জন্য অনুরোধ করেছেন এটি প্রকাশ করার পর। আপনি শর্তাবলী যোগ করে সাইটে যেখানেই চান হেডার দেখাতে পারেন।
আমরা চেয়েছিলাম এই হেডারটি 404 পৃষ্ঠা বাদ দিয়ে সমগ্র সাইটে প্রদর্শিত হোক। ফলস্বরূপ, আমরা 404 পৃষ্ঠা ছেড়ে যাওয়ার সময় পুরো সাইটটিকে পছন্দের অন্তর্ভুক্ত করেছি।
আপনি দেখতে পাচ্ছেন, আপনার ব্যক্তিগতকৃত স্টিকি হেডার তৈরি করতে এলিমেন্টর ব্যবহার করা সহজ এবং ব্যথাহীন!
কাস্টম সিএসএস এলিমেন্টার ব্যবহার করে আপনার এলিমেন্টার স্টিকি হেডারকে অনেক ভালো দেখান আপনাকে একটি স্টাইকি হেডার কাস্টমাইজ করার জন্য এটি একটি সিএসএস ক্লাস যোগ করে আরও স্টাইলিশ করতে।
আপনি স্টিকি হেডারের উচ্চতা, ব্যাকগ্রাউন্ড কালার, ট্রানজিশন এবং স্টিকি এফেক্টস কাস্টমাইজ করতে পারেন এখানে।
আপনার স্টিকি হেডারকে আরও স্টাইলিশ করতে সম্পাদনা এলাকায় ফিরে যান (সম্পূর্ণ হেডার বিভাগ)। ড্রপ-ডাউন মেনু থেকে Advanced > Motion Effects নির্বাচন করুন
প্রভাব অফসেট " 100 সেট করুন যখন একজন ভিজিটর আপনার ওয়েবসাইট ব্যবহার করে, তখন এটি স্ক্রলিং দূরত্ব যেখানে স্ক্রলিং প্রভাব ঘটে।
গতি অফসেট 100 সেট করুন ।
অনুগ্রহ করে মনে রাখবেন যে অফসেট ইফেক্টস অপশনগুলো তখনই কাজ করবে যদি কাস্টম সিএসএস ব্যবহার করা হয়। ফলস্বরূপ, যদি আপনি নিজের কোন কাস্টম CSS যোগ না করেন, তাহলে আপনি শেষ বিকল্পটি এড়িয়ে যেতে পারেন।
চূড়ান্ত স্টিকি হেডার প্রকাশ করার আগে, আপনি ঐচ্ছিকভাবে শেষ স্টিকি হেডারে শর্ত যোগ করতে পারেন। একটি উদাহরণ হল যেখানে আপনি স্টিকি হেডারটি দেখাতে চান amp একটি উদাহরণ হিসাবে amp " সম্পূর্ণ সাইট ।
আপনি এখন আপনার ওয়েবসাইটে কিছু কাস্টম CSS অন্তর্ভুক্ত করতে চাইবেন। কাস্টম সিএসএস বেশ নমনীয়, এবং আপনি যদি এর কার্যক্রমের সাথে পরিচিত হন তবে আপনি যা চান তা অন্তর্ভুক্ত করতে পারেন।
আমরা পরিচ্ছন্নতা সম্পন্ন করেছি; আমরা এখন কাস্টম CSS কোড সংযোজন সহ ওয়েবসাইটের জটিলতায় চলে যাই। এলিমেন্টরের জন্য বিনামূল্যে স্টিকি হেডার প্রভাব পাওয়ার জন্য আমরা মৌলিক এবং উন্নত কৌশল উভয়ই প্রদর্শন করব। আপনি যদি এলিমেন্টার 2.9 বা তার বেশি ব্যবহার করেন, তাহলে আপনি আপনার সাইটে এই CSS অন্তর্ভুক্ত করার জন্য গ্লোবাল স্টাইল রুলস ব্যবহার করতে পারেন।
কাস্টম CSS অন্তর্ভুক্ত করার জন্য নীচে বর্ণিত পদ্ধতিগুলি অনুসরণ করুন:
তারপরে, নীচের সিএসএস কোডে পেস্ট করুন।
header.sticky-header {-header-height: 90px; -সামর্থ্য: 0.90; -আমাকে সঙ্কুচিত করুন: 0.80; -স্টিকি-ব্যাকগ্রাউন্ড-কালার: #0e41e5; -ট্রান্সজিশন: .3s সহজে-ইন-আউট; ট্রানজিশন: ব্যাকগ্রাউন্ড-কালার var (-ট্রানজিশন), ব্যাকগ্রাউন্ড-ইমেজ var (-ট্রানজিশন), ব্যাকড্রপ-ফিল্টার var (-ট্রানজিশন), অস্পষ্টতা var (-ট্রানজিশন); } header.sticky-header.elementor-sticky-প্রভাব {background-color: var (-sticky-background-color); ব্যাকগ্রাউন্ড-ইমেজ: কোনটিই নয়; অস্বচ্ছতা: 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 (-shrink-me)); উচ্চতা: calc (var (-header-height) * var (-shrink-me)); } 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 (-shrink-me)); }
উপরে তালিকাভুক্ত নির্দেশাবলী এলিমেন্টারে হ্রাসকারী স্টিকি হেডার তৈরির প্রক্রিয়ার মাধ্যমে আপনাকে নির্দেশনা দেবে। আপনি কীভাবে হেডারটিকে আরও ব্যক্তিগতকৃত করবেন সে সম্পর্কে আরও বিশদ জানতে চান, আপনি নীচের দেওয়া CSS কোডটি দেখতে পারেন, যা আপনাকে হেডার ডিজাইনের সাথে আরও সৃজনশীল হতে দেবে। আপনার প্রয়োজনের উপর নির্ভর করে, আপনি এলিমেন্টার স্টিকি হেডারকে ব্যক্তিগতকরণ করতে পারেন অসংখ্য সেটিংস পরিবর্তন করে এবং এটি কম -বেশি স্টিকি করে। এই সিএসএস পরিবর্তনকে সরাসরি এলিমেন্টারে অন্তর্ভুক্ত করার জন্য আমরা আপনাকে একটি কোড এডিটর ব্যবহার করার পরামর্শ দিচ্ছি। আপনি ভিজ্যুয়াল স্টুডিও কোড বা এটম ব্যবহার করতে পারেন, যা আপনাকে কোডটি দ্রুত একত্রিত করতে এবং সুবিধাগুলি কাটতে সহায়তা করবে। এই সম্পাদকগুলি ব্যবহার করার জন্য বিনামূল্যে এবং উইন্ডোজ, ম্যাক ওএস এক্স এবং লিনাক্স সহ বিভিন্ন সিস্টেম থেকে অ্যাক্সেস করা যেতে পারে।
সিএসএস স্টাইল শীট ব্যবহার করে আপনি এলিমেন্টার সঙ্কুচিত হেডারের প্রভাবগুলি কীভাবে সামঞ্জস্য করতে পারেন তা এই বিভাগটি প্রদর্শন করবে। যদি আপনি কাস্টম প্রপার্টিতে শুধুমাত্র একটি পরিবর্তন করেন, তাহলে তা অবিলম্বে সিএসএস কোডের বাকি অংশের সাথে মিলিয়ে পরিবর্তন করা হবে।
হ্রাসকারী শিরোনামের জন্য কাস্টমাইজেশন বিকল্পগুলি মোট পাঁচটি ভিন্ন উপায়ে উপলব্ধ। সমস্ত ভেরিয়েবল কাস্টমাইজ করা উচিত নয়, তবে আপনি যদি এটি পছন্দ করেন তবে আপনার এটি করার বিকল্প রয়েছে। যত তাড়াতাড়ি আপনি সিদ্ধান্ত নিয়েছেন যে আপনি কোন ভেরিয়েবলগুলি পরিবর্তন করতে চান, আপনি কেবল সেই ভেরিয়েবলগুলি পরিবর্তন করতে পারেন এবং বাকি প্যারামিটারগুলি অপরিবর্তিত রাখতে পারেন।
এখানে পাঁচটি CSS ভেরিয়েবল রয়েছে, প্রতিটি ভেরিয়েবলের জন্য ডিফল্ট মানগুলি লাল দেখানো হয়েছে।
স্টিকি ব্যাকগ্রাউন্ড কালার #0e41e5 এবং হেডারের উচ্চতা 90px। অন্যান্য স্টাইলিং বিকল্পগুলির মধ্যে রয়েছে: 0.90 এর অস্বচ্ছতা, 0.80 এর সঙ্কুচিত-মি, 0.90 এর অস্বচ্ছতা এবং 300ms এর সহজ-ইন/সহজ-আউট রূপান্তর।
কাস্টম প্রোপার্টি হলো আমাদের এক্স amp কোডে ডবল ড্যাশ “ -” এর পরে উপস্থিত হওয়া উপাদান এবং আপনি সেগুলিকে আমাদের amp লে কোডের উপরে তালিকাভুক্ত করতে পারেন। কোলনের পরে এবং বাক্যে অর্ধ-কোলনের আগে প্রদর্শিত মানটি সামঞ্জস্য করা প্রয়োজন।
Ex amp le এর জন্য, যদি আপনি হেডারের উচ্চতা 100px করতে চান, তাহলে উচ্চতা পরিবর্তনের আগে এবং পরে এটি দেখতে কেমন হবে তা এখানে:
আগে, হেডারের উচ্চতা ছিল 90 পিক্সেল; পরে, হেডারের উচ্চতা ছিল 100 পিক্সেল।
এলিমেন্টর ব্যবহার করে, আপনি বিভিন্ন উপায়ে একটি স্টিকি হেডার মেনু ডিজাইন করতে পারেন। আপনি কেবল একটি বিনামূল্যে এলিমেন্টার স্টিকি হেডার তৈরি করতে পারবেন না, তবে আপনি এটিতে কাস্টম CSS যোগ করে হেডারটিকে ব্যক্তিগতকৃত করতে পারেন। এলিমেন্টর ব্যবহার করে কীভাবে হ্রাসকারী স্টিকি এলিমেন্টার হেডার তৈরি করা যায় এবং এই ধাপে ধাপে গাইড দিয়ে আপনার সিএসএসকে কীভাবে পরিবর্তন করা যায় সে সম্পর্কে বিস্তারিত নির্দেশনা পাওয়া সম্ভব।
এলিমেন্টারে বিভিন্ন ধরনের হেডার টেমপ্লেট রয়েছে; প্রতিটি স্বতন্ত্র এবং মার্জিত এবং আপনার দর্শকদের আপনার ওয়েবসাইট নেভিগেট করতে সহায়তা করে।
এলিমেন্টরের সাথে, আপনার ওয়েবসাইটের হেডারগুলির স্টাইলের উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ আছে। উদা amp le, আপনি পৃষ্ঠার কেন্দ্র এবং নীচের প্রধান মেনু সাইটের লোগোটি স্থাপন করতে পারে। ফোন নম্বর, সোশ্যাল মিডিয়া লিঙ্ক এবং অন্যান্য তথ্য প্রদর্শনের জন্য আপনি প্রধান হেডারের উপরে একটি হেডার যুক্ত করতে পারেন।
এখানে মাত্র কয়েক প্রাক্তন হয় amp অসংখ্য হেডার নকশা Elementor ব্যবহারকারীদের জন্য উপলব্ধ অপশনের les।
আপনার ওয়েবসাইটে একটি স্টিকি হেডার অন্তর্ভুক্ত করা দর্শকদের জন্য আপনার সাইটটি অতিক্রম করা এবং আপনার সাইটের সমস্ত এলাকায় ক্লিক বৃদ্ধি করা সহজ করে তুলতে পারে।
এলিমেন্টার জাভাস্ক্রিপ্ট এবং সিএসএস দিয়ে ম্যানুয়ালি স্টিকি হেডার তৈরির প্রয়োজনীয়তা দূর করে, যা আগে প্রয়োজন ছিল। আপনার ওয়েবসাইটের জন্য একটি স্টিকি হেডার তৈরি করা এখনকার চেয়ে সহজবোধ্য ছিল না, এলিমেন্টার স্টিকি হেডারকে ধন্যবাদ
একটি ওয়েবসাইটের শিরোনাম এবং ফুটার অপরিহার্য উপাদান। বেশিরভাগ ক্ষেত্রে, হেডার নেভিগেশন প্রদান করে...
বাজারে সবচেয়ে জনপ্রিয় দুটি ওয়ার্ডপ্রেস থিম হল Astra এবং OceanWP। পেশাদার…
একটি চমৎকার নিউজ ওয়েবসাইট তৈরি করার জন্য আপনাকে ওয়েব ডিজাইনার হতে হবে না। আমরা…
নিউজপেপার থিমটি ট্যাগডিভ দ্বারা ডিজাইন করা অন্যতম উল্লেখযোগ্য ওয়ার্ডপ্রেস থিম, একটি…
যখন একটি অনলাইন স্টোর স্থাপনের কথা আসে, WooCommerce হল গো-টু plugin । এটা…
আমাদের নিজস্ব পৃষ্ঠা নির্মাতা, আভাদা বিল্ডার, এখন দুটি ইন্টারফেসে উপলব্ধ: আভাদা ...
মন্তব্য দেখুন
খুব সুন্দর নিবন্ধ! আপনি, অনুগ্রহ করে, এক পৃষ্ঠার ওয়েবসাইটে আমার স্টিকি মেনু সমস্যার সমাধান করতে পারেন? স্টিকি মেনু আমার বিভাগকে কভার করে যা আমি মেনুতে অ্যাঙ্কর লিঙ্ক হিসাবে সংজ্ঞায়িত করেছি।
ওহে,
আপনাকে আপনার 1ম বিভাগে একটি শীর্ষ প্যাডিং যোগ করতে হবে মেনু হিসাবে স্টিকি হওয়ার জন্য অবস্থান পরিবর্তন করা হয়েছে।
স্যার! স্টিকি হেডারে একটি মেগা মেনু যোগ করার কোন উপায় আছে?
নিশ্চিত, কেন না? আপনি একটি সমস্যার সম্মুখীন?
Fiz um header usando o css, mas agora desisti dele, e não consigo acessar no elementor para desfazer, nem pelo elementor hearer.
হাই, আমি অনুমান করি আপনি ডান ক্লিক বা বিভাগ এক্সপ্লোরার ব্যবহার করতে পারেন