ফিল্টারযোগ্য ইমেজ গ্যালারি

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

এখানে প্রতিটি ট্যাব এবং সেটিং কিভাবে কাজ করে, তাই আপনি একটি সেট আপ করতে পারেন এলিমেন্টর ফিল্টারযোগ্য গ্যালারি টগলগুলি কী করে তা অনুমান না করে।

এই পৃষ্ঠাটি সেটিংস রেফারেন্স। লাইভ উদাহরণ এবং উইজেট কি করতে পারে তার একটি ওভারভিউ জন্য, দেখুন এলিমেন্টর ফিল্টারযোগ্য গ্যালারি উইজেট পৃষ্ঠা।

ফিল্টারযোগ্য ইমেজ গ্যালারি উইজেট কি করে #

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

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। সাহায্য দরকার? দেখা ইনস্টলেশন গাইড.
• আপনি দর্শকদের দ্বারা ফিল্টার করতে চান এমন বিভাগগুলিতে গোষ্ঠীবদ্ধ চিত্রগুলি৷।

কিভাবে এলিমেন্টর ফিল্টারযোগ্য গ্যালারি উইজেট যোগ করবেন #

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

বিষয়বস্তু ট্যাবে আপনার গ্যালারি তৈরি করুন #

দ্য বিষয়বস্তু ট্যাব হল যেখানে আপনি ছবি যোগ করেন, ফিল্টার বিভাগ নির্ধারণ করেন এবং ফিতা এবং লিঙ্ক সেট আপ করেন।

গ্যালারি বিষয়বস্তু #

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

প্রতিটি আইটেম একই ক্ষেত্র আছে:

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

ইমেজ রেজোলিউশন এবং কলাম #

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

সেটিংস #

দ্য সেটিংস বিভাগ সামগ্রিক গ্যালারী আচরণ নিয়ন্ত্রণ করে।

• ফিল্টার নেভি দেখান?: গ্রিডের উপরে বিভাগ ফিল্টার বোতামগুলি প্রদর্শন করে।
• “All” ফিল্টার ট্যাব দেখান: একটি সমস্ত বোতাম যোগ করে যাতে দর্শকরা ফিল্টারটি পুনরায় সেট করতে পারে৷।
• সমস্ত বিভাগ পাঠ্য: রিসেট বোতামের জন্য লেবেল, সাধারণত সব।
• টুলটিপ দেখান?: ফিল্টার বোতামে টুলটিপ সক্ষম করে।
• চিত্রের দিক অনুপাত: প্রতিটি চিত্র জুড়ে একটি সামঞ্জস্যপূর্ণ অনুপাত জোর করে।
• নর্দমা: গ্রিড আইটেম মধ্যে স্থান।
• রাজমিস্ত্রি: অসম ছবির উচ্চতার জন্য গ্রিডটিকে একটি রাজমিস্ত্রির লেআউটে স্যুইচ করে।
• হোভার স্কেল: হোভারে ছবিটি সামান্য জুম করে।
• স্কেল মান: ছবি কতটা জুম করে, যেমন 1.1।
• কাত প্রভাব: একটি 3D টিল্ট যোগ করে যা কার্সারকে অনুসরণ করে।

ওভারলে সেটিং #

দ্য ওভারলে সেটিং একটি ভিজিটর যখন একটি আইটেমের উপর ঘোরাফেরা করে তখন কী প্রদর্শিত হবে তা বিভাগটি সিদ্ধান্ত নেয়।

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

স্টাইল ট্যাবে গ্যালারি স্টাইল করুন #

দ্য শৈলী ট্যাব কার্ডের ধারক, ছবি, ওভারলে এবং বোতামগুলিকে কভার করে৷।

আইটেম শৈলী #

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

ইমেজ স্টাইল #

ইমেজ স্টাইল ছবি নিজেই এবং তার হোভার অবস্থা শৈলী।

• চিত্র শৈলী: ডিফল্ট বা হোভার ওভারলে লুক বেছে নিন।
• হোভার ওভারলে রঙ: আভা যা হোভারে ছবিটিকে ঢেকে রাখে।
• শিরোনাম শৈলী: আইটেম শিরোনাম জন্য রঙ এবং টাইপোগ্রাফি।
• ক্যাপশন সাবটাইটেল শৈলী: সাবটাইটেলের জন্য রঙ এবং টাইপোগ্রাফি।
• আইকন শৈলী: হোভার আইকনের জন্য আইকনের আকার এবং রঙ।

ওভারলে #

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

বোতাম এক এবং দুই শৈলী #

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

লাইভ ফলাফল দেখুন #

চূড়ান্ত গ্যালারি দেখতে পৃষ্ঠাটি প্রকাশ বা পূর্বরূপ দেখুন। দর্শকরা ওভারলে, শিরোনাম এবং আইকন দেখতে একটি আইটেমের উপর ঘোরাফেরা করতে পারে বা লাইটবক্স বা লিঙ্ক খুলতে ক্লিক করতে পারে। আপনি যদি ফিল্টার নেভিগেশন সক্ষম করেন, তবে তারা শুধুমাত্র মিলে যাওয়া ছবিগুলি দেখাতে বিভাগ বোতামগুলিতেও ক্লিক করতে পারে৷।

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

সাধারণ ব্যবহারের ক্ষেত্রে #

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

একটি ভাল ফিল্টারযোগ্য গ্যালারির জন্য টিপস #

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

ভিডিও টিউটোরিয়াল #

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

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

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

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