এলিমেন্টরে একটি ইমেজ তুলনা স্লাইডার কিভাবে যোগ করবেন (ফ্রি)

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

মাস্টার অ্যাডঅন ইমেজ তুলনা উইজেট আপনাকে যেকোন এলিমেন্টর পৃষ্ঠায় আগে-পরে একটি বিনামূল্যের স্লাইডার ড্রপ করতে দেয়, কোনো এলিমেন্টর প্রো এবং কোনো অতিরিক্ত প্লাগইন সাবস্ক্রিপশন নেই। আপনি মাস্টার অ্যাডঅনগুলি ইনস্টল করুন, উইজেটটিকে আপনার পৃষ্ঠায় টেনে আনুন, দুটি ছবি আপলোড করুন এবং দর্শকরা একটি টেনে আনে যা তাদের মধ্যে মুছে যায়৷

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

আপনি শুরু করার আগে আপনার যা প্রয়োজন হবে

  • Elementor ইনস্টল এবং সক্রিয় সঙ্গে WordPress. Elementor এর বিনামূল্যে সংস্করণ যথেষ্ট.
  • Elementor ইনস্টল এবং সক্রিয় জন্য মাস্টার addons. বিনামূল্যের পরিকল্পনা এই উইজেট কভার. দেখুন স্থাপন নির্দেশিকা যদি প্লাগইন আপনার কাছে নতুন হয়।
  • দুটি ছবি ঠিক একই পিক্সেল মাত্রায় ক্রপ করা হয়েছে। কেন এক মুহুর্তে, এটি মানুষের প্রত্যাশার চেয়ে বেশি গুরুত্বপূর্ণ।

ধাপ 1: চিত্র তুলনা উইজেট সক্ষম করুন

মাস্টার অ্যাডঅনগুলি কয়েক ডজন উইজেট সহ জাহাজে করে, এবং প্রতিটি ইনস্টলে ডিফল্টরূপে লোড হয় না। পারা মাস্টার অ্যাডঅন → উইজেট আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে এবং নিশ্চিত করুন চিত্র তুলনা চালু করা হয়। যদি এটি একটি মুহূর্ত পরে Elementor's Elements প্যানেলে প্রদর্শিত না হয়, তাহলে এটি প্রায় সবসময়ই হয়।

মাস্টার অ্যাডঅনস উইজেট সেটিংস স্ক্রীন ইমেজ তুলনা টগল সুইচ অন এবং হাইলাইট সহ

ধাপ 2: আপনার পৃষ্ঠায় উইজেট যোগ করুন

Elementor সহ একটি পৃষ্ঠা খুলুন, উপাদান প্যানেলে চিত্রের তুলনা অনুসন্ধান করুন (বেগুনি MA ব্যাজটি সন্ধান করুন), এবং এটি আপনার পৃষ্ঠায় টেনে আনুন। এটি দুটি স্থানধারক চিত্র এবং একটি কার্যকরী স্লাইডার সহ লোড হয়, তাই আপনি একটি একক সেটিং স্পর্শ করার আগে লেআউটটি দেখতে পারেন৷

পার্পল এমএ ব্যাজ সহ ইমেজ তুলনা উইজেট এলিমেন্টর এলিমেন্টস প্যানেল থেকে ক্যানভাসে টেনে আনা হচ্ছে

ধাপ 3: আপনার আগে এবং পরে ছবি আপলোড করুন

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

ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরি ইমেজ আগে থেকে ট্যাবের সাথে খোলা একটি ইমেজ নির্বাচিত হওয়ার সাথে সাথে ট্যাবের আগে

আপনি যদি একটি ওভারলে ক্যাপশন চান, "আগে" এবং "পরে," বা "পুরানো ডিজাইন" এবং "পুনরায় ডিজাইন" এর মতো কিছু চাইলে প্রতিটি ট্যাবে একটি ছোট লেবেল টাইপ করুন।

নিয়ম যা সবাইকে ট্রিপ করে: ছবির মাত্রা মেলে

উভয় চিত্রই একই পিক্সেল মাত্রা, একই প্রস্থ এবং একই উচ্চতা হতে হবে। যদি একটি ফটো 1600×1000 হয় এবং অন্যটি 1200×800 হয়, স্লাইডারটি তাদের মধ্যে একটিকে ফিট করার জন্য প্রসারিত করে বা ক্রপ করে, এবং কেউ হ্যান্ডেলটি টেনে আনলে তুলনাটি বিকৃত বা ভুল দেখায়।

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

ধাপ 4: ওরিয়েন্টেশন সেট করুন

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

অনুভূমিক অভিযোজনে চিত্র তুলনা স্লাইডার উপরে পূর্বের চিত্র, নীচের চিত্র এবং তাদের মধ্যে ড্র্যাগ হ্যান্ডেল সহ

ধাপ 5: দৃশ্যমান অনুপাত এবং হ্যান্ডেলের ধরন সেট করুন

দৃশ্যমান অনুপাত সেট করে যেখানে হ্যান্ডেলটি বসে যখন পৃষ্ঠা লোড হয়, শতাংশ হিসাবে। একটি নিরপেক্ষ প্রথম ইম্প্রেশনের জন্য এটিকে প্রায় 50% খুলুন, অথবা আপনি যদি লোডের আগে বা পরে চিত্রটি প্রাধান্য পেতে চান তবে এটি একপাশে শুরু করুন।

মুভ হ্যান্ডেল স্লাইডটিকে কী ট্রিগার করে তা নির্ধারণ করে: টেনে আনুন বা সোয়াইপ করুন, ক্লিক করুন বা হোভার করুন। ড্র্যাগ ডেস্কটপে ভাল কাজ করে, যেখানে দর্শকরা দখল এবং টানতে আশা করে। হোভার একটি মাউসের উপর চটকদার বোধ করে কিন্তু স্পর্শ ব্যবহারকারীদের জন্য ভুল ফায়ার করতে পারে যারা কখনই হোভার করে না, তাই আপনার অনেক ট্রাফিক মোবাইল হলে টেনে আনুন বা ক্লিক করুন নিরাপদ ডিফল্ট।

ধাপ 6: স্লাইডার স্টাইল করুন

স্টাইল ট্যাব লেআউট স্টাইল (পুরো উইজেটের চারপাশে বক্স শ্যাডো), হ্যান্ডেল (রঙ, আকার, আইকন) এবং লেবেল (প্রতি-সাইড রঙ, টাইপোগ্রাফি, ব্যাকগ্রাউন্ড এবং ক্যাপশন ওভারলে এর জন্য ব্যবধান) কভার করে। স্লাইডারটি কীভাবে কাজ করে তা এর কোনটিই পরিবর্তন করে না, শুধুমাত্র এটি দেখতে কেমন, তাই প্রথম পাস এড়িয়ে যাওয়া এবং মেকানিক্স সঠিক হলে ফিরে আসা নিরাপদ।

ইমেজ তুলনা শৈলী ট্যাব লেআউট শৈলী, হ্যান্ডেল এবং লেবেল বিভাগ এবং একটি রঙ পিকার লেবেলের রঙ সামঞ্জস্য করে খোলা

মোবাইল এবং স্পর্শ আচরণ

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

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

মাস্টার অ্যাডঅন বনাম অন্যান্য উপাদান তুলনা বিকল্প

বিকল্পদামঅভিমুখী নিয়ন্ত্রণট্রিগারগুলি পরিচালনা করুন
মাস্টার অ্যাডঅন ইমেজ তুলনাঅবাধঅনুভূমিক এবং উল্লম্বটেনে আনুন/সোয়াইপ করুন, ক্লিক করুন, হোভার করুন
অপরিহার্য addons ইমেজ তুলনাবিনামূল্যে স্তর উপলব্ধহ্যাঁটানা
আগে ইমেজ তুলনা স্লাইডার (wordpress.org)বিনামূল্যে, স্বতন্ত্র প্লাগইনসীমিতটানা
এলিমেন্টর প্রো (নেটিভ)বিল্ট-ইন উইজেট নেইপ্রযোজ্য নয়প্রযোজ্য নয়

Elementor Core, Free বা Pro, এর নিজস্ব কোনো নেটিভ ইমেজ তুলনা উইজেট নেই। আপনি যে রুটেই যান না কেন, আপনি যে কোনো উপায়ে একটি তৃতীয় পক্ষের উইজেট ইনস্টল করছেন, তাই সৎ তুলনা সেই উইজেটগুলির মধ্যে, একটি প্লাগইন এবং "বিল্ট-ইন এলিমেন্টর" এর মধ্যে নয়।

সাধারণ সমস্যার সমস্যা সমাধান

  • উপাদান প্যানেল থেকে উইজেট অনুপস্থিত: মাস্টার অ্যাডঅন → উইজেট পুনরায় পরীক্ষা করুন এবং চিত্র তুলনা সক্ষম করা নিশ্চিত করুন।
  • স্লাইডার প্রসারিত বা তির্যক দেখায়: দুটি ছবি একই পিক্সেল মাত্রা নয়; তাদের সাথে মেলে ক্রপ করুন।
  • হ্যান্ডেল ফোনে সরানো হবে না: মুভ হ্যান্ডেল হোভারে সেট করা আছে; এটিকে টেনে আনুন/সোয়াইপ করুন বা ক্লিক করুন।
  • লেবেল দেখাচ্ছে না: সেটিংসে ওভারলে টগল চালু আছে এবং একটি লেবেল আসলে উভয় ট্যাবে টাইপ করা হয়েছে তা নিশ্চিত করুন।

আপনি যদি এই ড্র্যাগ-টু-রিভিল মিথস্ক্রিয়া পছন্দ করেন, ছবি হটস্পট উইজেট এবং ইমেজ হোভার ইফেক্ট উইজেট একটি অনুরূপ হোভার ব্যবহার করুন এবং চিত্রগুলি টীকা বা অ্যানিমেট করার জন্য প্যাটার্ন ক্লিক করুন৷

প্রায়শই জিজ্ঞাসিত প্রশ্ন

এলিমেন্টরে একটি ইমেজ স্লাইডার কিভাবে তৈরি করবেন?

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

আমি কিভাবে ওয়ার্ডপ্রেসে একটি ছবি স্লাইডার যোগ করব?

Elementor Plus মাস্টার অ্যাডঅনের মতো একটি উইজেট প্লাগইন ইনস্টল করুন, তারপর চিত্র তুলনা উইজেটটিকে যেকোনো পৃষ্ঠায় টেনে আনুন। এটি একটি পৃথক ওয়ার্ডপ্রেস সেটিংস স্ক্রীনের পরিবর্তে এলিমেন্টর এডিটরের ভিতরে কাজ করে, তাই মনে রাখার জন্য কোন শর্টকোড নেই।

কিভাবে আগে এবং পরে ছবি স্লাইডার তৈরি করবেন?

উইজেটের আগে এবং পরে ট্যাবগুলিতে অভিন্ন পিক্সেল মাত্রার একটি ছবি এবং একটি আফটার ইমেজ আপলোড করুন, তারপর উল্লম্ব বা অনুভূমিক অভিযোজন বেছে নিন। উইজেটটি স্বয়ংক্রিয়ভাবে ড্র্যাগেবল ডিভাইডার তৈরি করে, আপনি নিজেই সেই অংশটি ডিজাইন করবেন না।

একটি স্লাইডে আগে এবং পরে কিভাবে দেখাবেন?

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

আমি কিভাবে Elementor এ একটি স্লাইডার সম্পাদনা করব?

ক্যানভাসে চিত্র তুলনা উইজেট নির্বাচন করুন এবং বাম প্যানেলে এর সেটিংস খোলা। বিষয়বস্তু ট্যাবে ছবি এবং লেবেল রয়েছে এবং নীচের সেটিংস এবং শৈলী বিভাগগুলি অনুপাত, পরিচালনা আচরণ এবং ভিজ্যুয়াল স্টাইলিং নিয়ন্ত্রণ করে। ক্যানভাসে লাইভ প্রিভিউ পরিবর্তন করে।

দুটি ছবি একই হলে কিভাবে তুলনা করবেন?

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

আগে এবং পরে ছবি কিভাবে বানাবেন?

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

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

একটি উত্তর দিন

আপনার ইমেল ঠিকানা প্রকাশ করা হবে না. প্রয়োজনীয় ক্ষেত্র চিহ্নিত করা হয় *

মাস্টার অ্যাডঅনস মিড-ইয়ার রিসেট প্রমোশন ব্যানার 40% ছাড় দিচ্ছে

এখনও বেড়া উপর? আমরা এটা পেতে.

প্রতিটি মাস্টার অ্যাডঅন প্রো লাইসেন্স একটি সঙ্গে আসে 14-দিনের কোনো প্রশ্ন ফেরত নেই, আজীবন আপডেট, এবং অগ্রাধিকার সমর্থন। এই বসন্তে ঝুঁকিমুক্ত চেষ্টা করুন - 40% ছাড় সঙ্গে "RESET40″ কুপন।

না ধন্যবাদ, আমি পরে সম্পূর্ণ মূল্য পরিশোধ করব