কীভাবে এলিমেন্টর ব্যবহার করে ওয়ার্ডপ্রেসে একটি উল্লম্ব চিত্র ক্যারোজেল তৈরি করবেন

Muneeb WordPress Tutorials Jan 25, 2022

ফটো বা তথ্যের একটি স্লাইডশো যা দর্শকরা একটি বোতাম টিপে বাছাই করতে পারে যা সেগুলিকে স্লাইডশোতে সামনে বা পিছনে নিয়ে যায় একটি চিত্র ক্যারোজেল হিসাবে পরিচিত৷ এটি আপনার ওয়েবসাইটের সাধারণ চেহারা উজ্জ্বল করে এবং প্রয়োজনীয় পরিষেবার প্রচারে সহায়তা করে।

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

কিভাবে একটি এলিমেন্টর উল্লম্ব ইমেজ ক্যারোজেল তৈরি করবেন

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

অবশ্যই, এটি গতিশীল না হওয়ার ত্রুটি রয়েছে এবং এটি অসুবিধে হতে পারে যখন মাত্র কয়েকটি ফটো পরিবর্তন করতে হবে। তবে এটি বেশ কিছু সুবিধা প্রদান করে। এটি কোনো JS প্রয়োজনীয়তা ছাড়াই একটি CSS-শুধু ক্যারোজেল তৈরি করে। অ্যানিমেশনটি খুব মসৃণ, খুব কম CPU ব্যবহার সহ। সংক্ষেপে, এটি অবিশ্বাস্যভাবে কার্যকর, যদিও কিছুটা অসুবিধাজনক।

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

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

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

তারপর, ক্লাস হিসাবে আপনার কলামটিকে উল্লম্ব নাম কলাম দিন।
কলাম এবং লেআউট সেটিংসে সেই কলামের জন্য উইজেট স্পেস 0 এ সেট করুন।

Add an image element to that column and choose the picture you made. সেই কলামে একটি ইমেজ এলিমেন্ট যোগ করুন এবং আপনার তৈরি করা ছবি বেছে নিন। Assign the class carousel vertical to the picture element . ছবির উপাদানে ক্লাস ক্যারোজেল উল্লম্ব বরাদ্দ করুন।

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

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

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

5 সেরা ইমেজ ক্যারোজেল প্লাগইন

1. এলিমেন্টরের জন্য পোস্ট ক্যারাউজেল

iThemelandCo দ্বারা পোস্ট ক্যারোজেল ফর এলিমেন্টর হল একটি এলিমেন্টর অ্যাডন প্লাগইন যা আপনাকে এর রেডিমেড ক্যারোজেল লেআউট সহ আশ্চর্যজনকভাবে সৃজনশীল মিডিয়া ক্যারোজেল তৈরি করতে দেয়। প্লাগইনটি পুরোপুরি এলিমেন্টরের সাথে সংহত করে এবং 19টি পূর্ব-নির্মিত লেআউট অফার করে। এই লেআউটগুলি সম্পূর্ণরূপে কাস্টমাইজযোগ্য এবং এলিমেন্টরের ড্র্যাগ এবং ড্রপ মেকানিজম ব্যবহার করে আপনার প্রয়োজন অনুসারে সহজেই কাস্টমাইজ করা যেতে পারে।

এলিমেন্টরের জন্য পণ্য ক্যারোজেল

Elementor এর জন্য প্রোডাক্ট ক্যারোজেল হল আরেকটি এলিমেন্টর অ্যাডন প্লাগইন যা ই-কমার্স স্টোরগুলির জন্য তাদের পণ্যগুলিকে ক্যারোজেলে প্রদর্শন করার জন্য স্পষ্টভাবে ডিজাইন করা হয়েছে। প্লাগইনটি 12+ ক্যারোজেল নিয়ন্ত্রণ অফার করে যেমন অটোপ্লে, স্লাইড টু স্ক্রোল, হোভারে বিরতি ইত্যাদি। প্লাগইনটি সব ধরনের ডিভাইসে অত্যন্ত প্রতিক্রিয়াশীল এবং আপনি যত খুশি ক্যারোসেল তৈরি করতে পারেন। তাছাড়া, এটি একটি 100% বহুভাষা প্লাগইন যার মানে আপনার ওয়েবসাইট অন্য ভাষায় অনুবাদ করা হলেও এটি কাজ করবে।

3. এলিমেন্টরের জন্য দ্রুত ক্যারোজেল

ফাস্ট ক্যারোজেল ফর এলিমেন্টর হল একটি এলিমেন্টর অ্যাডন প্লাগইন যা আপনার জন্য এক মিনিটের মধ্যে একটি ক্যারোজেল তৈরি করতে যথেষ্ট দ্রুত বলে দাবি করে। এটি যতটা চিত্তাকর্ষক শোনায়, এটি বিভিন্ন ধরণের গ্যালারির পাশাপাশি দশটিরও বেশি অনন্য শৈলী সরবরাহ করে। প্লাগইনটি প্রতিটি ক্যারোজেলের সাথে কাস্টম রঙের বিকল্পগুলি অফার করার পাশাপাশি পাঁচটিরও বেশি ক্যারোজেল নিয়ন্ত্রণের সাথে সজ্জিত। একটি দ্রুত সমাধানের জন্য, এটি একটি চিত্র ক্যারোজেলের জন্য আপনার সেরা বাজি হতে পারে৷

আমরা আশা করি আপনি এই টিউটোরিয়ালটিকে আপনার ওয়েবসাইট উন্নত করতে সহায়ক বলে মনে করেছেন। আপনার ওয়ার্ডপ্রেস যাত্রাকে মজাদার এবং সহজ করে তোলে এমন টিউটোরিয়াল পেতে আমাদের Facebook এবং Twitter- এ আমাদের সাথে যোগ দিতে ভুলবেন না।