কিছু জিনিস বলার চেয়ে দেখানো সহজ: একটি পুনরুদ্ধার করা ফটো, একটি পুনর্নির্মাণের পরে একটি ঘর, একটি পরিষ্কারের আগে এবং পরে একটি নকশা৷ দ্য চিত্র তুলনা উইজেট ইন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন দুটি ছবি স্ট্যাক করে এবং তাদের মধ্যে একটি টেনে আনা যায় এমন হ্যান্ডেল ফেলে, তাই দর্শকরা নিজেরাই পার্থক্য প্রকাশ করতে স্লাইড করে।
আপনি একটি আগে ইমেজ এবং একটি পরে ইমেজ লোড করুন, লেবেল যোগ করুন, একটি উল্লম্ব বা অনুভূমিক বিভাজন বাছাই করুন, তারপর আপনার সাইটের সাথে মেলে হ্যান্ডেল এবং লেবেল স্টাইল করুন। এই গাইড উইজেটের প্রতিটি সেটিং কভার করে।
চিত্র তুলনা উইজেট কি করে #
উইজেটটি একই ফ্রেমে দুটি চিত্র দেখায়, একটি অন্যটির উপরে, মাঝখানে একটি স্লাইডার হ্যান্ডেল সহ। হ্যান্ডেলটি টেনে আনুন এবং এটি চিত্রের আগে এবং পরে মুছে যায়। আপনি প্রতিটি পাশে লেবেল করতে পারেন, বাম-ডান থেকে উপরের-নিচে বিভক্তটি ফ্লিপ করতে পারেন এবং হ্যান্ডেলটি একটি টেনে, একটি ক্লিক বা একটি হোভার অনুসরণ করে কিনা তা সিদ্ধান্ত নিতে পারেন।
কাজ করার জন্য দুটি ট্যাব আছে। বিষয়বস্তু দুটি ছবি, লেবেল এবং স্লাইডার আচরণ ধারণ করে। শৈলী লেআউট, ওভারলে লেবেল এবং হ্যান্ডেল নিয়ন্ত্রণ করে। সাধারণ এলিমেন্টর অ্যাডভান্সড অপশন তাদের পাশে বসে।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- দুটি ছবি যা লাইন আপ, একই আকার এবং ফ্রেমিং, তাই স্লাইডটি একটি দৃশ্য হিসাবে পড়ে।
কিভাবে ইমেজ তুলনা উইজেট যোগ করবেন #
Elementor এডিটরে, খুলুন উপাদান প্যানেল এবং অনুসন্ধান করুন চিত্র তুলনা, অথবা মাস্টার অ্যাডঅন বিভাগে স্ক্রোল করুন (উইজেটগুলি একটি বেগুনি MA ব্যাজ বহন করে)। এটিকে আপনার পৃষ্ঠায় টেনে আনুন এবং এটি দুটি নমুনা চিত্র এবং একটি স্লাইডার সহ লোড হয় যা আপনি এখনই সম্পাদনা শুরু করতে পারেন৷।
দুটি ছবি লোড করুন #
খোলা বিষয়বস্তু ট্যাব। দ্য ছবি বিভাগে একটি আছে আগে এবং একটি পরে ট্যাব, এবং প্রতিটি তার নিজস্ব চিত্র, লেবেল এবং রেজোলিউশন সেট করে।
- ট্যাবের আগে/পরে: প্রতিটি ছবি সেট করতে দুই পক্ষের মধ্যে স্যুইচ করুন।
- একটি ছবি চয়ন করুন: মিডিয়া লাইব্রেরি থেকে সেই দিকের জন্য ছবি বাছাই করুন।
- লেবেল: পাশের জন্য একটি সংক্ষিপ্ত ক্যাপশন, যেমন কাজের আগে বা চূড়ান্ত ফলাফল।
- ইমেজ রেজোলিউশন: আকার পরিবেশিত, যেমন পূর্ণ বা বড়।
লাইব্রেরি থেকে প্রতিটি ছবি বাছাই করুন #
ক্লিক করুন একটি ছবি নির্বাচন করুন আর ওয়ার্ডপ্রেস মিডিয়া লাইব্রেরি খোলে। বিফোর ট্যাবে আগের ছবি সেট করুন, তারপর আফটার ট্যাবে স্যুইচ করুন এবং দ্বিতীয়টি বেছে নিন। ভুলে যাওয়া সহজ জিনিস: আপনি যে ট্যাবে আছেন তা নির্ধারণ করে আপনি কোন দিকে পরিবর্তন করছেন, তাই নির্বাচন করার আগে এটি পরীক্ষা করে দেখুন।
লেবেল সেট করুন #
টাইপ a লেবেল প্রতিটি ট্যাবে এবং উইজেট এটিকে চিত্রের সেই পাশে একটি ওভারলে হিসাবে প্রিন্ট করে। আগের লেবেলটি একদিকে বসে, অন্য দিকে লেবেলের পরে, তাই দর্শকরা জানেন যে আপনি এটির বানান ছাড়াই কোনটি।
স্লাইডার সেটিংস সামঞ্জস্য করুন #
খোলা সেটিংস স্লাইডার কীভাবে আচরণ করে তার জন্য বিভাগ। এখানেই আপনি প্রারম্ভিক অবস্থান, বিভাজনের দিক এবং হ্যান্ডেলটি কী নড়াচড়া করে তা সেট করেন।
- দৃশ্যমান অনুপাত (%): যেখানে হ্যান্ডেল শুরু হয়, তাই আপনি আগে বা পরে খুলতে পারেন।
- ওভারলে: আগে এবং পরে লেবেল দেখান বা লুকান।
- হ্যান্ডেল সরান: স্লাইডারটি সরাতে টেনে আনুন বা সোয়াইপ করুন, ক্লিক করুন বা হোভার করুন।
অভিযোজন স্যুইচ করুন #
দ্য ওরিয়েন্টেশন টগল উল্লম্ব থেকে অনুভূমিক বিভক্ত ফ্লিপ। উল্লম্ব একটি বাম-ডান মুছা দেয়। অনুভূমিক একটি আপ-ডাউন হ্যান্ডেল সহ উপরে এবং নীচের পরে পূর্বের চিত্রটিকে স্ট্যাক করে, যা সাধারণত লম্বা ফটোগুলির জন্য আরও ভাল পড়ে।
লেআউট, হ্যান্ডেল এবং লেবেল স্টাইল করুন #
খোলা শৈলী ট্যাব। জন্য বিভাগ আছে বিন্যাস শৈলী, ওভারলে, হাতল, এবং লেবেল, তাই স্লাইডারটি ডিফল্ট চেহারার পরিবর্তে আপনার ডিজাইনের সাথে মেলে।
- বিন্যাস শৈলী: পুরো স্লাইডারের চারপাশে বর্ডার টাইপ, ব্যাসার্ধ এবং বক্স শ্যাডো।
- হ্যান্ডেল: ড্র্যাগ নিয়ন্ত্রণের রঙ, আকার এবং শৈলী।
- লেবেল: ক্যাপশনের জন্য প্রতি-পাশের রঙ, টাইপোগ্রাফি, পটভূমি, সীমানা এবং ব্যবধান।
সাধারণ ব্যবহারের ক্ষেত্রে #
- ছবি সম্পাদনা রিটাচ করা সংস্করণের পাশে একটি কাঁচা শট দেখানো হচ্ছে।
- বাড়ি এবং সংস্কার একটি পুনর্নির্মাণ বা পরিষ্কার করার আগে এবং পরে।
- নকশা এবং দেব পুরানো লেআউট বনাম রিডিজাইন।
- স্বাস্থ্য এবং ফিটনেস পাশাপাশি অগ্রগতি শট।
- পণ্য সমাপ্ত বা স্টাইল করা ফলাফলের পাশে একটি সাধারণ আইটেম।
চিত্র তুলনা উইজেটের সাথে কাজ করার জন্য টিপস #
- দুটি ছবির সাথে মিল। একই আকার, কোণ এবং ক্রপ তাই স্লাইডটি একটি দৃশ্য হিসাবে পড়ে, দুটি ফটো একসাথে জ্যাম করা হয়নি।
- শুরুর অনুপাত সেট করুন। দৃশ্যমান অনুপাতের সাথে আংশিকভাবে খুলুন যাতে দর্শকরা বলতে পারে টেনে আনার কিছু আছে।
- লেবেল ছোট রাখুন। আগে এবং পরে, বা দুটি শব্দ, একটি পূর্ণ বাক্যের চেয়ে চিত্রের উপরে পরিষ্কার বসুন।
- সঠিক ট্রিগার বাছুন। ড্র্যাগ স্যুট ডেস্কটপ। হোভার দ্রুত অনুভব করে কিন্তু স্পর্শ ব্যবহারকারীদের গার্ড বন্ধ করে ধরতে পারে, তাই আপনি শিপ করার আগে এটি একটি ফোনে পরীক্ষা করুন।
- লম্বা শট জন্য অনুভূমিক ব্যবহার করুন। একটি সরু বাম-ডান মোছার চেয়ে পোর্ট্রেট ইমেজের জন্য একটি টপ-বটম স্প্লিট ভালো কাজ করে।
ভিডিও টিউটোরিয়াল দেখুন #
পর্দায় বরাবর অনুসরণ করতে পছন্দ করেন? নীচের ভিডিও টিউটোরিয়ালটি শুরু থেকে শেষ পর্যন্ত চিত্র তুলনা উপাদানের মধ্য দিয়ে চলে, এটি দেখায় যে কীভাবে এলিমেন্টর সম্পাদকে চিত্র, লেবেল, স্লাইডার সেটিংস এবং স্টাইলিং কাজ করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডঅনগুলিতে চিত্র তুলনা উইজেট কী?
এটি একটি এলিমেন্টর উইজেট যা তাদের মধ্যে একটি টেনে আনা যায় এমন হ্যান্ডেল সহ একটি আগে এবং পরে একটি চিত্র স্ট্যাক করে। দর্শকরা হ্যান্ডেলটিকে এক ছবি থেকে অন্য ছবিতে মুছতে স্লাইড করে, প্রতিটি পাশে ঐচ্ছিক লেবেল সহ, সমস্ত এলিমেন্টর প্যানেল থেকে কোনো কোড ছাড়াই সেট করা হয়।
আমি কিভাবে লেবেল আগে এবং পরে যোগ করতে পারি?
ইমেজ বিভাগটি খুলুন এবং আগে ট্যাব এবং পরে ট্যাবে একটি লেবেল টাইপ করুন। প্রতিটি লেবেল চিত্রের পাশে একটি ওভারলে হিসাবে প্রিন্ট করে। আপনি সেটিংসে ওভারলে টগল দিয়ে সেগুলি দেখাতে বা লুকাতে পারেন এবং স্টাইল ট্যাবের লেবেল বিভাগে স্টাইল করতে পারেন৷।
আমি কি স্লাইডারটিকে উল্লম্ব বা অনুভূমিক করতে পারি?
হ্যাঁ। সেটিংস বিভাগে একটি ওরিয়েন্টেশন টগল আছে। ডিফল্ট একটি উল্লম্ব বাম-ডান বিভক্ত; এটি স্যুইচ করুন এবং চিত্রগুলি একটি আপ-ডাউন হ্যান্ডেল সহ উপরে এবং নীচে স্ট্যাক করুন। পোর্ট্রেট ইমেজ বা লম্বা স্ক্রিনশটের জন্য অনুভূমিক ভাল কাজ করে।
দর্শকরা কিভাবে তুলনা স্লাইডার সরান?
সেটিংসে মুভ হ্যান্ডেল ড্রপডাউন ট্রিগার সেট করে। হ্যান্ডেলটি একটি মাউস ড্র্যাগ বা সোয়াইপ অনুসরণ করতে পারে, ক্লিকে যেতে পারে বা হোভার ট্র্যাক করতে পারে। ডেস্কটপে ড্র্যাগ সবচেয়ে সাধারণ, যখন টাচ স্ক্রিনের জন্য ক্লিক সবচেয়ে নিরাপদ পছন্দ।
আমার কি একই আকারের ছবি দরকার?
সেরা ফলাফলের জন্য, হ্যাঁ। দুটি ছবি একই ফ্রেমে বসে, তাই আকার, কোণ এবং ক্রপ মিলে স্লাইডটিকে একটি দৃশ্য হিসাবে পড়তে বাধ্য করে৷ যদি ছবিগুলি আলাদা হয়, একটি নির্দিষ্ট চিত্র রেজোলিউশন সেট করুন যাতে উভয়ই একই মাত্রায় পরিবেশন করা হয়।
মোড়ানো #
চিত্র তুলনা উইজেট দুটি ছবিকে আগে এবং পরে একটি ইন্টারেক্টিভ-এ পরিণত করে: দুটি ছবি লোড করুন, লেবেল যোগ করুন, ওরিয়েন্টেশন এবং হ্যান্ডেল সেট করুন, তারপর স্লাইডারটিকে মেলাতে স্টাইল করুন। সম্পর্কিত উইজেটগুলির জন্য, দেখুন ইমেজ হটস্পট উইজেট এবং ইমেজ হোভার ইফেক্ট উইজেট, সম্পূর্ণ ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং চেক করুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
