Elementor হল শীর্ষ ওয়ার্ডপ্রেস ওয়েবসাইট নির্মাণ টুল, যা ওয়েব ডিজাইনারদের একটি স্বজ্ঞাত ভিজ্যুয়াল বিল্ডার ব্যবহার করে পেশাদার, পিক্সেল-নিখুঁত ওয়েবসাইট তৈরি করতে দেয়। Elementor আপনার ওয়েবসাইটের যেকোনো অংশ বা কলামের পটভূমির ছবি পরিবর্তন করার বিকল্প অন্তর্ভুক্ত করে, হিরো বিভাগ সহ, যা দর্শকরা আপনার পৃষ্ঠায় অবতরণ করলে প্রথম জিনিসটি দেখে।
একটি হিরো ইমেজ কি
হিরো ইমেজ হল একটি বিশাল ওয়েব ব্যানার ইমেজ যা একটি ওয়েবপেজের হেডার সেকশনে পিন করা হয়, সাধারণত পৃষ্ঠার উপরের দিকে। এটি সাধারণত একটি কোম্পানির প্রধান বার্তা প্রকাশ করার জন্য একটি ছবি এবং পাঠ্য উভয়ই অন্তর্ভুক্ত করে। ভাঁজের উপরে, নায়কের ফটোগুলিতে প্রায়ই একটি কল টু অ্যাকশন (CTA) অন্তর্ভুক্ত থাকে যা দর্শকদের বাকি পৃষ্ঠাটি অন্বেষণ করতে উত্সাহিত করে৷ এই গ্রাফিকের উদ্দেশ্য হল একটি পৃষ্ঠায় শক্তি এবং উত্তেজনা প্রদান করার পাশাপাশি একটি ভাল প্রথম ছাপ তৈরি করা।
হোভারে হিরো ব্যাকগ্রাউন্ড ইমেজ কিভাবে পরিবর্তন করবেন
এই ব্লগ পোস্টে, আমি আপনাকে দেখাব কিভাবে এলিমেন্টরের ডাইনামিক ট্যাগ এবং কাস্টম CSS ব্যবহার করে হোভারে নায়কের পটভূমির ছবি পরিবর্তন করতে হয়। এটি একটি দুর্দান্ত প্রভাব তৈরি করবে যা আপনার দর্শকদের দৃষ্টি আকর্ষণ করবে এবং আপনার ওয়েবসাইটটিকে আলাদা করে তুলবে।
ধাপ 1: একটি নতুন পৃষ্ঠা তৈরি করুন
আমাদের প্রথমে যা করতে হবে তা হল একটি নতুন পৃষ্ঠা তৈরি করা এবং এটি Elementor দিয়ে সম্পাদনা করা।
আশ্চর্যজনক ওয়েবসাইট তৈরি করুন
সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে
এখুনি শুরু করুন
নিম্নলিখিত সেটিংস সহ একটি বিভাগ সন্নিবেশ করুন:
- ন্যূনতম-উচ্চতা: 100vh
- প্রস্থ: 100%
নামক বিভাগে একটি ক্লাস সেট করুন: "ইমেজ-হোভার"
এগিয়ে যান এবং আপনার মিডিয়া লাইব্রেরিতে হোভার ইফেক্টের জন্য যে ছবিগুলি ব্যবহার করবেন সেগুলি আপলোড করুন৷
এটি হয়ে গেলে, এগিয়ে যান এবং নিম্নলিখিত CSS কোড সন্নিবেশ করুন:
.image-hover [class*="slide"]:hover {
background-color: #CE3A3AA1 !important;
}
.image-hover:has(.slide1:hover) {
background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/gallery-2.jpg) !important;
}
.image-hover:has(.slide2:hover) {
background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/gallery-1.jpg) !important;
}
.image-hover:has(.slide3:hover) {
background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/cta-img.jpg) !important;
}দ্রষ্টব্য: মিডিয়া লাইব্রেরি থেকে আপনার ছবির URL গুলি দিয়ে পটভূমি ছবির URL প্রতিস্থাপন করুন৷
এই CSS দুটি লক্ষ্য অর্জন করে:
1 - হোভারে প্রতিটি পাত্রের পটভূমির রঙ পরিবর্তন করুন।
2 - যখন. স্লাইড-* পাত্রে ঘোরানো, এটি .image-হোভারে পটভূমি চিত্র পরিবর্তন করে।
আপনার কাস্টম CSS সন্নিবেশ করার পরে, স্টাইল ট্যাবে যান এবং নিম্নলিখিত সেটিংস লিখুন:
- পটভূমির ধরন: ক্লাসিক
- রঙ: স্বচ্ছ
- ছবির আকার: সম্পূর্ণ
- ছবি: *আপনি যে প্রথম ছবি দেখাতে চান সেটি বেছে নিন
- অবস্থান: কেন্দ্র কেন্দ্র
- প্রদর্শনের আকার: কভার
- পুনরাবৃত্তি: না-পুনরাবৃত্তি
পরবর্তী পর্ব:
এই সেটিংসের সাথে ভিতরে 1টি বিভাগ যোগ করুন:
- বিষয়বস্তু প্রস্থ: সম্পূর্ণ প্রস্থ
- প্রস্থ: 25%
অ্যাডভান্সড ট্যাবে যান এবং স্লাইড 1 নামে একটি ক্লাস তৈরি করুন।
এখন, আপনার শৈলী এবং আইটেমগুলির সাথে প্রতিটি ধারক কাস্টমাইজ করুন।
আপনার প্রথম ধারকটি সম্পূর্ণ হয়ে গেলে, এটিকে তিনবার প্রতিলিপি করুন এবং পরপর চারটি সংখ্যাযুক্ত ক্লাস তৈরি করতে প্রতিটি কন্টেইনারে CSS ক্লাস পরিবর্তন করুন:
স্লাইড 1, স্লাইড 2, স্লাইড 3 এবং স্লাইড 4
উপসংহার
এই নিবন্ধে, আমরা শিখেছি কিভাবে সবচেয়ে জনপ্রিয় ওয়ার্ডপ্রেস ওয়েবসাইট নির্মাতা Elementor এর সাথে একটি হিরো বিভাগ তৈরি করতে হয়।
আমরা একটি হিরো বিভাগ তৈরিতে মনোনিবেশ করেছি যা ব্যবহারকারী যখন বিভিন্ন আইটেমের উপর ঘোরাফেরা করে তখন পটভূমির ছবি পরিবর্তন করে এবং আমরা এটি করার জন্য এলিমেন্টরের কন্টেইনার কার্যকারিতা এবং কাস্টম CSS কোড ব্যবহার করেছি।
আপনি আপনার ওয়েবসাইটের ইউএক্স/ইউআই ডিজাইন উন্নত করতে পারেন এবং এই নির্দেশ অনুসরণ করে ভিড় থেকে আলাদা একটি দৃষ্টিকটু এবং আকর্ষণীয় এলাকা তৈরি করতে পারেন।
এলিমেন্টর কোডিং দক্ষতা ছাড়াই যে কারও জন্য একটি পেশাদার-সুদর্শন ওয়েবসাইট তৈরি করা সহজ করে তোলে। সামগ্রিকভাবে, এই পাঠটি আপনাকে দেখায় যে কীভাবে একটি হিরো বিভাগ তৈরি করতে হয় যা আপনার ওয়েবসাইটের মূল্য প্রস্তাবের উপর জোর দেয় এবং আপনার দর্শকদের জড়িত করে।
