স্ট্যাটিক পাশাপাশি ছবি আপনার কাজের ন্যায়বিচার করে না। একটি ফটো সম্পাদনা, একটি বাড়ির সংস্কার, একটি পণ্য রূপান্তর, এগুলি একে অপরের পাশে বসে থাকা দুটি ছবির চেয়ে ভাল প্রাপ্য। একটি এলিমেন্টর ইমেজ তুলনা স্লাইডার ঠিক করে। দর্শকরা আগে এবং পরে সংস্করণগুলি প্রকাশ করতে ইমেজ জুড়ে একটি হ্যান্ডেল টেনে আনে এবং সেই বিট মিথস্ক্রিয়া সেগুলিকে আপনার পৃষ্ঠায় দীর্ঘ রাখে।
আমি ক্লায়েন্ট ল্যান্ডিং পৃষ্ঠাগুলিতে মাস্টার অ্যাডনস ইমেজ তুলনা উইজেট ব্যবহার করছি, এবং এটি ধারাবাহিকভাবে স্ট্যাটিক স্ক্রিনশটগুলির চেয়ে বেশি ব্যস্ততা পায়। এই টিউটোরিয়ালটি সেটআপ, কাস্টমাইজেশন এবং প্রকাশ করার আগে জানার মতো কিছু জিনিস কভার করে। উইজেটটি বিনামূল্যে, এটি অন্য যেকোনো উইজেটের মতো এলিমেন্টরের প্যানেলের ভিতরে বসে এবং আপনি এটি প্রায় দুই মিনিটের মধ্যে চালু করতে পারেন।
এই নির্দেশিকা কি কভার করে:
- একটি ইমেজ তুলনা স্লাইডার কি
- যার আগে/পরে স্লাইডার দরকার
- আপনি বিনামূল্যে উইজেট সঙ্গে কি পেতে
- কিভাবে একটি তৈরি করবেন (ধাপে ধাপে)
- একটি ভাল তুলনা জন্য টিপস
- সাধারণ সমস্যা সমাধানে সমস্যা
- মাস্টার অ্যাডঅন বনাম বিকল্প
- কেন মাস্টার অ্যাডনস
- শুরু কর
- প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
একটি চিত্র তুলনা স্লাইডার কি?
একটি চিত্র তুলনা স্লাইডার দুটি চিত্রকে একে অপরের উপরে একটি টেনে আনা যায় এমন বিভাজক দিয়ে স্তর দেয়। ব্যবহারকারীরা এটিকে বাম এবং ডানে (বা উপরে এবং নীচে) স্লাইড করে একটি চিত্র অন্যটির উপরে প্রকাশ করতে। আপনি সম্পাদকে একটি “before” ইমেজ এবং একটি “after” ইমেজ সেট করেছেন এবং উইজেট বাকিটা পরিচালনা করে।
আপনি সম্ভবত ফটোগ্রাফি পোর্টফোলিও, ডেন্টাল ওয়েবসাইট বা রিয়েল এস্টেট পৃষ্ঠাগুলিতে সংস্কার প্রকল্পগুলি দেখাতে দেখেছেন৷ নিষ্ক্রিয়ভাবে দুটি পৃথক ফটো দেখার পরিবর্তে, দর্শকরা শারীরিকভাবে তুলনার সাথে যোগাযোগ করে। সেই মিথস্ক্রিয়া পৃষ্ঠায় সময় বাড়ায়, যা আপনাকে সাহায্য করে এসইও এবং বাউন্স রেট কমিয়ে দেয়।
এলিমেন্টরে স্লাইডার পরে কার প্রয়োজন?
যে কেউ একটি রূপান্তর দেখাতে চায়। এই ব্যবহার ক্ষেত্রে আমি প্রায়ই চালানো:
ওয়েব ডিজাইনার এবং এজেন্সি
তুলনামূলক স্লাইডারে ওয়েবসাইট রিডিজাইনগুলি দুর্দান্ত দেখায়। একটি সম্ভাব্য ক্লায়েন্টকে পুরানো এবং নতুন ডিজাইনের মধ্যে টেনে আনতে দেওয়া একটি ফ্ল্যাট স্ক্রিনশটের চেয়ে বেশি বিশ্বাস তৈরি করে। আপনি এই সঙ্গে জোড়া করতে পারেন ইমেজ হোভার ইফেক্ট উইজেট আপনি যদি পোর্টফোলিও পৃষ্ঠাগুলিতে অতিরিক্ত ভিজ্যুয়াল বৈচিত্র্য চান।
ফটোগ্রাফার এবং ফটো এডিটর
সম্ভবত সবচেয়ে প্রাকৃতিক ফিট। আপনি যদি রিটাচিং, কালার গ্রেডিং বা পুনরুদ্ধারের কাজ করেন, একটি ইমেজ তুলনা স্লাইডার সম্ভাব্য ক্লায়েন্টদের দেখতে দেয় আপনি ঠিক কী করতে পারেন। বাম দিকে কাঁচা ফাইল, ডানদিকে সম্পাদিত সংস্করণ। যে কোনো ক্যাপশনের চেয়ে বেশি বলে।
ই-কমার্স স্টোর
স্কিনকেয়ার বিক্রি, পণ্য পরিষ্কার করা, বা দৃশ্যমান ফলাফল সহ কিছু? ক ইমেজ তুলনা পরে আগে আপনার পণ্য পৃষ্ঠায় অনুলিপি একটি অনুচ্ছেদের চেয়ে আরো বিশ্বাসযোগ্য। আমি এই কাজটি বিশেষ করে প্রসাধনী এবং বাড়ির উন্নতির পণ্যগুলির জন্য ভাল দেখেছি যেখানে চাক্ষুষ পার্থক্য নাটকীয়।
রিয়েল এস্টেট এবং আর্কিটেকচার
সংস্কার প্রকল্প একটি স্বাভাবিক মিল। কাজ শুরু হওয়ার আগে একটি ছবি তুলুন, এটি সম্পন্ন হলে আরেকটি ছবি তুলুন, উভয়কেই তুলনামূলক উইজেটে ফেলে দিন। আপনার পোর্টফোলিও আরও ইন্টারেক্টিভ হয়ে ওঠে এবং দর্শকরা আপনার প্রকল্পগুলি ব্রাউজ করতে আরও বেশি সময় ব্যয় করে।
ডিজিটাল মার্কেটার
অ্যানালিটিক্স ড্যাশবোর্ড, বিজ্ঞাপন কর্মক্ষমতা, ওয়েবসাইট ট্রাফিক চার্ট। একটি ড্র্যাগ-টু-তুলনা স্লাইডার দিয়ে "আমাদের সাথে কাজ করার আগে" এবং "আমাদের সাথে কাজ করার পরে" ফলাফল দেখান। কেস স্টাডিতে দুটি স্ক্রিনশট আটকানোর চেয়ে ভাল কাজ করে।
মাস্টার অ্যাডনস ইমেজ তুলনা উইজেট: আপনি যা পান
একটি যোগ করার বিভিন্ন উপায় আছে এলিমেন্টরে স্লাইডারের আগে। কিছুর জন্য স্বতন্ত্র প্লাগইন প্রয়োজন, কিছুর কাস্টম কোড প্রয়োজন এবং কিছু প্রিমিয়াম অ্যাডন সাবস্ক্রিপশনের পিছনে লক করা আছে। মাস্টার অ্যাডঅন অন্তর্ভুক্ত চিত্র তুলনা উইজেট বিনামূল্যে সংস্করণে। লক্ষণীয় কারণ বেশিরভাগ প্রতিযোগী অ্যাডঅন (আলটিমেট অ্যাডঅন, পাওয়ারপ্যাক, দ্য প্লাস অ্যাডঅন) এই বৈশিষ্ট্যটিকে একটি পেওয়ালের পিছনে রাখে।
উইজেট অন্তর্ভুক্ত:
- নেটিভ এলিমেন্টর ইন্টিগ্রেশন: এলিমেন্টর প্যানেল থেকে টেনে আনুন। কোন শর্টকোড নেই, আলাদা সেটিংস পৃষ্ঠা নেই। থেকে ইনস্টল করুন ওয়ার্ডপ্রেস প্লাগইন রেপো এবং এটি এখনই আপনার উইজেট তালিকায় প্রদর্শিত হবে।
- বিনামূল্যে ব্যবহার: চিত্র তুলনা উইজেট বিনামূল্যে সংস্করণের অংশ। কোন প্রো লাইসেন্স প্রয়োজন।
- একাধিক নিয়ন্ত্রণ শৈলী: স্লাইডার হ্যান্ডেল (টেনে আনুন), মাউস মুভমেন্ট (হোভার), বা ক্লিক করুন। উভয় অনুভূমিক এবং উল্লম্ব তুলনা অভিযোজন সমর্থিত।
- কাস্টম লেবেল: "আগে" এবং "পরে" পাঠ্য পরিবর্তন করুন আপনি যা চান, যেকোনো ভাষায়। লেবেলের রং, টাইপোগ্রাফি এবং পজিশনিং সবই সামঞ্জস্যযোগ্য।
- প্রতিক্রিয়াশীল: ডেস্কটপ, ট্যাবলেট এবং মোবাইলে কাজ করে। স্পর্শ এবং সোয়াইপ অঙ্গভঙ্গি মোবাইল ডিভাইসে কাজ করে।
মাস্টার অ্যাডনস আছে 80+ উইজেট এবং এক্সটেনশন মোট। ইমেজ তুলনা উইজেট এমন একটি যা ল্যান্ডিং পৃষ্ঠা এবং পোর্টফোলিও প্রকল্পগুলিতে অনেক বেশি আসে।
এলিমেন্টরে (ধাপে ধাপে) স্লাইডারের আগে কীভাবে তৈরি করবেন
আপনি শুরু করার আগে, আপনার উভয়ই প্রয়োজন এলিমেন্টর এবং মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। উভয়ই বিনামূল্যে। যাও প্লাগইন > নতুন যোগ করুন, প্রতিটি প্লাগইন নাম অনুসন্ধান করুন, ইনস্টল করুন এবং সক্রিয় করুন।
ধাপ 1: চিত্র তুলনা উইজেট সক্ষম করুন
চিত্র তুলনা উইজেট ডিফল্টরূপে সক্রিয় করা হয়। আপনি যদি আপনার প্যানেলকে চর্বিহীন রাখতে কিছু উইজেট বন্ধ করে থাকেন তবে এটি এখনও চালু আছে কিনা তা পরীক্ষা করুন। যাও মাস্টার অ্যাডঅন > অ্যাডঅন এবং এক্সটেনশন আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে এবং নিশ্চিত করুন যে চিত্র তুলনা টগল করা হয়েছে। দ্য চিত্র তুলনা ডকুমেন্টেশন সম্পূর্ণ সেটআপ বিবরণ আছে। আপনি সেই ড্যাশবোর্ডে থাকাকালীন, আপনি অন্যান্য উইজেটগুলি চালু করার মতো লক্ষ্য করতে পারেন অ্যানিমেটেড শিরোনাম বা গ্যালারি স্লাইডার.

ধাপ 2: এলিমেন্টরে একটি পৃষ্ঠা খুলুন
একটি নতুন পৃষ্ঠা তৈরি করুন বা Elementor দিয়ে একটি বিদ্যমান একটি খুলুন। আমি এই টিউটোরিয়ালের জন্য একটি নতুন ল্যান্ডিং পৃষ্ঠা তৈরি করেছি, কিন্তু তুলনা স্লাইডারটি একইভাবে বিদ্যমান যেকোনো পৃষ্ঠায় নেমে যায়।

ধাপ 3: চিত্র তুলনা উইজেট যোগ করুন
বাম দিকের এলিমেন্টর প্যানেলে, "ইমেজ তুলনা" অনুসন্ধান করুন (আপনি এটির পাশে মাস্টার অ্যাডঅন আইকন দেখতে পাবেন)। আপনি যেখানেই স্লাইডারটি প্রদর্শিত হতে চান সেখানে উইজেটটি আপনার পৃষ্ঠায় টেনে আনুন।

ধাপ 4: আপনার আগে এবং পরে ছবি আপলোড করুন
উইজেটে ক্লিক করুন এবং আপনি দুটি চিত্র আপলোড ক্ষেত্র দেখতে পাবেন: একটি আগের চিত্রের জন্য, একটি পরবর্তী চিত্রের জন্য৷ উভয়ই আপলোড করুন এবং কেন্দ্রে বিভাজক হ্যান্ডেল দিয়ে অবিলম্বে পূর্বরূপ আপডেট করুন।
দ্রুত হেড-আপ: উভয় ছবি একই মাত্রা হওয়া উচিত। যদি একটি 1200×800 হয় এবং অন্যটি 900×600 হয়, তাহলে লেআউটটি বন্ধ হয়ে যাবে। আপলোড করার আগে তাদের একই আকারে ক্রপ করুন। এটি অন্য যেকোনো কিছুর চেয়ে বেশি লোকেদের ট্রিপ করে।

ধাপ 5: লেবেল পাঠ্য কাস্টমাইজ করুন
ডিফল্ট লেবেলগুলি বলে “befor” এবং “after,” কিন্তু আপনি এগুলিকে যেকোনো কিছুতে পরিবর্তন করতে পারেন৷ একটি পণ্য বিক্রি? "বিনা" এবং "সহ।” ব্যবহার করুন একটি সংস্কার দেখাচ্ছে? "দিন 1" এবং "সমাপ্ত।” চেষ্টা করুন লেবেল ক্ষেত্রগুলি অ-ইংরেজি অক্ষর সহ যেকোনো পাঠ্য গ্রহণ করে, তাই স্থানীয়করণ একটি সমস্যা নয়।

ধাপ 6: স্লাইডার সেটিংস কনফিগার করুন
বিষয়বস্তু ট্যাবের অধীনে, সামঞ্জস্য করার মতো আরও কয়েকটি সেটিংস রয়েছে:
- ওরিয়েন্টেশন: অনুভূমিক (বাম/ডান) এবং উল্লম্ব (উপর/নীচ) তুলনার মধ্যে স্যুইচ করুন। অনুভূমিক ডিফল্ট এবং বেশিরভাগ ক্ষেত্রে কাজ করে।
- দৃশ্যমানতা অনুপাত: যেখানে বিভাজক শুরু হয় তা নিয়ন্ত্রণ করে। একটি কেন্দ্রীভূত বিভাজনের জন্য এটিকে 50% এ সেট করুন, অথবা প্রাথমিকভাবে একটি চিত্রের আরও বেশি দেখানোর জন্য এটি স্থানান্তর করুন।
- ওভারলে: চিত্রগুলিতে একটি রঙ ওভারলে সক্ষম বা অক্ষম করুন৷।
- হ্যান্ডেলের ধরন: তুলনা করার জন্য মাউস ড্র্যাগ বা মাউস হোভারের মধ্যে বেছে নিন। টেনে আনতে ভিজিটরকে ক্লিক এবং টেনে আনতে হবে। হোভার মাউসের গতিবিধি প্রকাশ করে, যা আরও তরল অনুভব করে কিন্তু কিছু লেআউটে বিভ্রান্তিকর হতে পারে।
ধাপ 7: স্লাইডার স্টাইল করুন
ভিজ্যুয়াল কাস্টমাইজেশনের জন্য স্টাইল ট্যাবে স্যুইচ করুন। আপনি বিভাজকের রঙ পরিবর্তন করতে পারেন, তুলনামূলক পাত্রের চারপাশে একটি সীমানা যোগ করতে পারেন, লেবেল টাইপোগ্রাফি (ফন্ট পরিবার, আকার, ওজন) সামঞ্জস্য করতে পারেন, বাক্সের ছায়া যোগ করতে পারেন এবং ব্যবধান নিয়ন্ত্রণ করতে পারেন। আপনার সাইটের ডিজাইনের সাথে মেলে এখানে কয়েক মিনিট ব্যয় করুন। যথেষ্ট নিয়ন্ত্রণ আছে যা আপনি একটি জেনেরিক-সুদর্শন স্লাইডার দিয়ে শেষ করবেন না।

প্রকাশ এবং আপনার হিট স্লাইডারের আগে লাইভ। শুরু থেকে শেষ পর্যন্ত প্রায় দুই মিনিট, ধরে নিচ্ছি আপনার ছবি প্রস্তুত।
একটি ভাল ইমেজ তুলনা জন্য টিপস
উইজেটটি প্রযুক্তিগত দিকটি পরিচালনা করে, তবে তুলনাটি নিজেই আপনার সেটআপের মতোই ভাল। ক্লায়েন্ট সাইটগুলিতে এগুলি তৈরি করা থেকে আমি কয়েকটি জিনিস তুলেছি:
আপনার ইমেজ মাত্রা মেলে
আমি এটি ইতিমধ্যেই উল্লেখ করেছি, তবে এটি এমন ভুল যা আমি প্রায়শই দেখি। যদি আপনার আগের ছবি 1920×1080 হয় এবং আপনার পরের ছবি 800×600 হয়, তাহলে স্লাইডার তাদের সারিবদ্ধ করতে বাধ্য করবে এবং ফলাফল বিকৃত দেখাবে। আপলোড করার আগে উভয় ছবিই একই পিক্সেল মাত্রায় ক্রপ করুন। প্রত্যেকবার।
কম্পোজিশন একই রাখুন
একই কোণ, একই দূরত্ব, একই ফ্রেমিং থেকে উভয় ফটো তুলুন। যদি আপনার আগের ফটোটি একটি প্রশস্ত শট হয় এবং পরে একটি ক্লোজ-আপ হয়, তাহলে বৈসাদৃশ্যটি আপনার ইচ্ছামত অবতরণ করে না। স্লাইডারটি সবচেয়ে ভালো দেখায় যখন দুটি ছবির মধ্যে পার্থক্য হল প্রকৃত পরিবর্তন।
রূপান্তর কেন্দ্র
চিত্রের কেন্দ্রের কাছে সবচেয়ে দৃশ্যমান পরিবর্তন রাখুন। যেখান থেকে বিভাজক শুরু হয়, তাই স্লাইডারের সাথে ইন্টারঅ্যাক্ট করার সময় লোকেরা এটিই প্রথম লক্ষ্য করে। যদি পরিবর্তনটি একদিকে বন্ধ থাকে তবে এটির প্রতি দৃষ্টি আকর্ষণ করতে দৃশ্যমানতার অনুপাত সামঞ্জস্য করুন।
এটা অতিরিক্ত করবেন না
প্রতি পৃষ্ঠা বিভাগে একটি শক্তিশালী তুলনা যথেষ্ট। আমি একে অপরের উপরে পাঁচ বা ছয়টি স্লাইডার সহ পৃষ্ঠাগুলি দেখেছি এবং এটি প্রভাবকে কমিয়ে দেয়। আপনার সেরা আগে এবং পরে জোড়া চয়ন করুন এবং এটি একটি বৈশিষ্ট্য। আপনার যদি একাধিক তুলনা থাকে তবে সেগুলিকে একটিতে সংগঠিত করুন ফিল্টারযোগ্য ইমেজ গ্যালারি বা ইমেজ ক্যারোজেল পরিবর্তে।
কাছাকাছি একটি CTA যোগ করুন
যদি তুলনাটি বিক্রয় বা পোর্টফোলিও পৃষ্ঠায় বসে থাকে, তাহলে তার ঠিক নীচে একটি কল-টু-অ্যাকশন বোতাম ড্রপ করুন। যে কেউ একটি চিত্তাকর্ষক রূপান্তরের মধ্য দিয়ে টেনে এনেছে সে ইতিমধ্যেই নিযুক্ত রয়েছে। একটি "একটি বিনামূল্যের উদ্ধৃতি পান" বা "এখনই কেনাকাটা করুন" বোতামটি ভালভাবে রূপান্তরিত হতে থাকে।
সমস্যা সমাধান: যখন স্লাইডার আচরণ করছে না
বেশিরভাগ সেটআপই কাজ করে, কিন্তু কিছু জিনিস মানুষকে নিয়ে যায়। আমি যেগুলি সম্পর্কে জিজ্ঞাসা করি সেগুলি কীভাবে ঠিক করব তা এখানে।
- স্লাইডার দেখা যাচ্ছে না। দশটির মধ্যে নয়বার উইজেটটি নিষ্ক্রিয় হয়েছে৷ যাও মাস্টার অ্যাডঅন, তারপর অ্যাডঅন এবং এক্সটেনশন, এবং নিশ্চিত করুন যে চিত্র তুলনা টগল করা হয়েছে। যদি এটি চালু থাকে এবং এখনও অনুপস্থিত থাকে, তাহলে আপনার ক্যাশে (LiteSpeed, WP Rocket, বা Cloudflare) সাফ করুন যাতে পৃষ্ঠার একটি পুরানো কপি পরিবেশন করা বন্ধ করে দেয়।
- হ্যান্ডেল টানবে না। এটি প্রায় সবসময়ই একটি জাভাস্ক্রিপ্ট দ্বন্দ্ব বা একটি ক্যাশিং প্লাগইন যা উইজেটের স্ক্রিপ্টকে একত্রিত বা পিছিয়ে দেয়। JS থেকে মাস্টার অ্যাডঅন স্ক্রিপ্টগুলি বাদ দিন এবং একত্রিত করুন, ক্যাশে সাফ করুন এবং আবার পরীক্ষা করুন।
- দুটি ছবি প্রসারিত বা ভুলভাবে সংযোজিত দেখায়। তারা ভিন্ন মাত্রা। অভিন্ন পিক্সেল মাত্রা এবং পুনরায় আপলোড উভয়ই ক্রপ করুন, এটি একক সবচেয়ে সাধারণ কারণ।
- এটি ডেস্কটপে কাজ করে কিন্তু মোবাইলে নয়। চেক করুন যে কোনও প্যারেন্ট কন্টেইনারে ওভারফ্লো-লুকানো স্টাইল নেই যা স্পর্শের জায়গাটি ক্লিপ করছে এবং স্লাইডারের উপরে সোয়াইপ ধরার জন্য কিছুই বসে নেই। স্পর্শ বাক্সের বাইরে কাজ করে, তাই একটি সোয়াইপ ব্যর্থতা প্রায় সবসময় একটি লেআউট বা z-সূচক সমস্যা।
- আগে এবং পরে লেবেল কাটা হয়। লেবেল টেক্সট ছোট করুন বা স্টাইল ট্যাবের অধীনে লেবেল ফন্টের আকার হ্রাস করুন; খুব লম্বা লেবেল ছোট পর্দায় ছবির বাইরে ছড়িয়ে পড়তে পারে।
যদি এইগুলির কোনটিই এটি ঠিক না করে তবে বিস্তারিত পোস্ট করুন মাস্টার অ্যাডঅন সমর্থন ফোরাম আপনার থিম এবং সক্রিয় প্লাগইনগুলির সাথে, এটি সাধারণত একটি দ্বন্দ্ব যা দ্রুত পিন ডাউন হয়৷।
চিত্র তুলনা উইজেট বনাম বিকল্প
মাস্টার অ্যাডঅনগুলি কীভাবে অন্যদের সাথে তুলনা করে তার একটি দ্রুত নজর ওয়ার্ডপ্রেস ইমেজ তুলনা স্লাইডার এলিমেন্টরের জন্য বিকল্প:
| বৈশিষ্ট্য | মাস্টার অ্যাডনস | আলটিমেট অ্যাডনস (ইউএই) | এলিমেন্টস কিট | পাওয়ারপ্যাক |
|---|---|---|---|---|
| বিনামূল্যে ছবি তুলনা উইজেট | হ্যাঁ | না (শুধুমাত্র প্রো) | হ্যাঁ | না (শুধুমাত্র প্রো) |
| অনুভূমিক + উল্লম্ব | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
| কাস্টম লেবেল পাঠ্য | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
| মাউস হোভার মোড | হ্যাঁ | হ্যাঁ | না | হ্যাঁ |
| দৃশ্যমানতা অনুপাত নিয়ন্ত্রণ | হ্যাঁ | হ্যাঁ | না | হ্যাঁ |
| মোবাইল টাচ/সোয়াইপ করুন | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
| অ্যাডনে মোট উইজেট | 80+ | 40+ | 90+ | 60+ |
বড় পার্থক্য বিনামূল্যে প্রাপ্যতা। আপনি যদি আগে-পরে স্লাইডার পাওয়ার জন্য প্রো অ্যাডনের জন্য অর্থ প্রদান করতে না চান তবে মাস্টার অ্যাডঅন এবং এলিমেন্টস্কিট আপনার বিকল্প। মাস্টার অ্যাডঅন এছাড়াও অন্তর্ভুক্ত টেক্সট ওভারলে কৌশল এবং ইমেজ হোভার প্রভাব বিনামূল্যের স্তরে, তাই আপনি আপগ্রেড না করেই ইমেজ টুলের একটি বিস্তৃত সেট পাবেন।
কেন আপনার ইমেজ তুলনা জন্য মাস্টার অ্যাডঅন?
চিত্র তুলনা উইজেটটি 80+ উপাদান এবং এক্সটেনশনগুলির মধ্যে একটি এলিমেন্টরের জন্য মাস্টার অ্যাডঅন। অনেক ব্যবহারকারী এটি একটি উইজেটের জন্য ইনস্টল করে এবং একই প্রকল্পে আরও কয়েকটি ব্যবহার করে শেষ করে। এভাবেই আমি এটা দিয়ে শুরু করেছি।
পৃথক উইজেটের বাইরে, আপনি একটি পাবেন থিম নির্মাতা কাস্টম হেডার, ফুটার এবং আর্কাইভ পৃষ্ঠাগুলির জন্য। একটি আছে পপআপ নির্মাতা প্রস্থান অভিপ্রায় এবং স্ক্রোল ট্রিগার সঙ্গে। এবং ক টেমপ্লেট লাইব্রেরি পূর্ব-নির্মিত বিভাগগুলির সাথে আপনি এক ক্লিকে আমদানি করতে পারেন।
V3.0।0 পুরানো সংস্করণগুলির তুলনায় লক্ষণীয়ভাবে দ্রুত, প্লাগইনটি সক্রিয়ভাবে রক্ষণাবেক্ষণ করা হয় এবং এটি 40,000+ ওয়ার্ডপ্রেস সাইটে চলছে৷। মাস্টার অ্যাডনস প্রো উইজেট বিল্ডার, হোয়াইট লেবেল মোড এবং প্রিমিয়াম সমর্থন যোগ করে যদি আপনার লাইনের নিচের প্রয়োজন হয়।
আরম্ভ করা
সেট আপ করা হচ্ছে a ইমেজ তুলনা স্লাইডার পরে আগে এলিমেন্টরে মাস্টার অ্যাডঅনগুলির সাথে কয়েক মিনিট সময় লাগে। কোন কোড নেই, কোন প্রিমিয়াম অ্যাডন ক্রয় নেই, ইনস্টল করার জন্য কোন পৃথক তুলনা প্লাগইন নেই। উইজেটটি বিনামূল্যে, যেকোনো এলিমেন্টর সেটআপের সাথে কাজ করে এবং কাস্টমাইজেশন লেবেল টেক্সট থেকে ডিভাইডার কালার পর্যন্ত সবকিছু কভার করে।
বিনামূল্যে মাস্টার অ্যাডঅন ডাউনলোড করুন এবং আপনার পরবর্তী প্রকল্পে চিত্র তুলনা উইজেট চেষ্টা করুন। আপনার এলিমেন্টর বিল্ড জুড়ে আপনার যদি আরও প্রয়োজন হয় তবে দেখুন প্রো পরিকল্পনা.
সম্পর্কিত পড়া: এলিমেন্টর ইমেজ ক্যারোজেল টিউটোরিয়াল | এলিমেন্টর ফিল্টারযোগ্য গ্যালারি প্লাগইন | 25 এলিমেন্টর টেক্সট ওভার ইমেজ টেকনিক
দেখতে পছন্দ করেন? এখানে এলিমেন্টরে একটি দ্রুত ওয়াকথ্রু রয়েছে:
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কিভাবে এলিমেন্টরে স্লাইডারের আগে এবং পরে যোগ করব?
মাস্টার অ্যাডঅন ইনস্টল করুন (বিনামূল্যে), এলিমেন্টরে আপনার পৃষ্ঠা খুলুন, প্যানেলে চিত্র তুলনা উইজেট অনুসন্ধান করুন এবং এটি আপনার পৃষ্ঠায় টেনে আনুন। আপনার আগে এবং পরে ছবি আপলোড করুন, আপনি চাইলে লেবেল সামঞ্জস্য করুন এবং প্রকাশ করুন। প্রায় দুই মিনিট সময় লাগে।
Elementor এর জন্য একটি বিনামূল্যে চিত্র তুলনা উইজেট আছে?
হ্যাঁ। মাস্টার অ্যাডঅনগুলিতে অনুভূমিক/উল্লম্ব মোড, কাস্টম লেবেল, ড্র্যাগ এবং হোভার নিয়ন্ত্রণ এবং সম্পূর্ণ শৈলী বিকল্পগুলির সাথে একটি বিনামূল্যের চিত্র তুলনা উইজেট অন্তর্ভুক্ত রয়েছে। কোন প্রো আপগ্রেড প্রয়োজন নেই।
ওয়ার্ডপ্রেসের জন্য স্লাইডার প্লাগইনের আগে সেরা কী?
Elementor ব্যবহারকারীদের জন্য, Master Addons হল নেটিভ ইন্টিগ্রেশন এবং একাধিক কন্ট্রোল স্টাইল সহ একটি কঠিন বিনামূল্যের বিকল্প। আপনি যদি Elementor-এ না থাকেন, BEAF (গ্যালারির আগে) এর মতো স্বতন্ত্র প্লাগইনগুলি গুটেনবার্গ এবং অন্যান্য নির্মাতাদের সাথে কাজ করে।
কোডিং ছাড়া আগে এবং পরে ছবি কিভাবে তৈরি করবেন?
মাস্টার অ্যাডঅন ইমেজ তুলনা উইজেটের সাথে এলিমেন্টর ব্যবহার করুন। এটিকে আপনার পৃষ্ঠায় টেনে আনুন, দুটি ছবি আপলোড করুন, ভিজ্যুয়াল প্যানেল থেকে সেটিংস কনফিগার করুন। কোন সময়ে কোন কোড প্রয়োজন।
আমি কি মোবাইলে ইমেজ তুলনা স্লাইডার ব্যবহার করতে পারি?
হ্যাঁ। উইজেটটি প্রতিক্রিয়াশীল এবং স্পর্শ অঙ্গভঙ্গি সমর্থন করে। দর্শকরা তাদের আঙুল দিয়ে বিভাজক সোয়াইপ করে ছবি তুলনা করতে, ডেস্কটপে টেনে আনার মতো।
ছবির আগে এবং পরে কি আকার হওয়া উচিত?
উভয় ইমেজ ঠিক একই মাত্রা হতে হবে। 1200×800 বা 1920×1080 সাধারণ পছন্দ। অমিল মাপ স্লাইডার তাদের জোর-সারিবদ্ধ করে, যা তুলনা বিকৃত করে।
আমি কিভাবে একটি অনুভূমিক এবং উল্লম্ব চিত্র তুলনা করতে পারি?
উইজেট সেটিংসে, বিষয়বস্তু ট্যাবের অধীনে ওরিয়েন্টেশন বিকল্পটি সন্ধান করুন। অনুভূমিক (বাম/ডান বিভাজক) এবং উল্লম্ব (উপর/নীচ বিভাজক) এর মধ্যে স্যুইচ করুন। অনুভূমিক ডিফল্ট।
একটি চিত্র তুলনা স্লাইডার কি আমার পৃষ্ঠা ধীর করে দেয়?
অর্থপূর্ণ নয়, যতক্ষণ আপনার ছবি অপ্টিমাইজ করা হয়। উইজেট স্ক্রিপ্ট হালকা ওজনের; আসল ওজন হল দুটি ছবি। তারা যে আকারে প্রদর্শন করে তাতে সংকুচিত WebP হিসাবে পরিবেশন করুন এবং প্রতিটিকে 150KB বা তার কম রাখুন এবং স্লাইডারটি নগণ্য লোড সময় যোগ করে।
আমি প্রকাশ করার পরে কেন আমার চিত্র তুলনা স্লাইডার কাজ করছে না?
প্রায় সবসময় ক্যাশিং বা একটি স্ক্রিপ্ট দ্বন্দ্ব। আপনার পৃষ্ঠার ক্যাশে (LiteSpeed, Cloudflare, বা WP Rocket) পরিষ্কার করুন এবং হার্ড-রিলোড করুন। যদি হ্যান্ডেলটি এখনও টেনে না নেয়, তাহলে মাস্টার অ্যাডঅন জাভাস্ক্রিপ্টকে যেকোন কম্বাইন বা ডিফার সেটিং থেকে বাদ দিন, ক্যাশে সাফ করুন এবং পুনরায় পরীক্ষা করুন। মাস্টার অ্যাডঅন অ্যাডঅন এবং এক্সটেনশন প্যানেলে একটি সম্প্রতি অক্ষম করা চিত্র তুলনা উইজেট হল অন্য সাধারণ কারণ।
