গ্যালারি স্লাইডার

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

এই গাইড প্রতিটি সেটিং মাধ্যমে হাঁটা, যাতে আপনি একটি নির্মাণ করতে পারেন এলিমেন্টর গ্যালারি স্লাইডার প্রতিটি নিয়ন্ত্রণ কি করে তা অনুমান না করে।

গ্যালারি স্লাইডার উইজেট কি করে #

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

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

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। সাহায্য দরকার? দেখা ইনস্টলেশন গাইড.
• আপনার মিডিয়া লাইব্রেরিতে আপলোড করা ছবির একটি সেট, আদর্শভাবে অনুরূপ অনুপাতের অনুপাতে।

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

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

বিষয়বস্তু ট্যাবে ছবি যোগ করুন #

গ্যালারি #

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

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

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

থাম্বনেল #

দ্য থাম্বনেল বিভাগটি পূর্বরূপের পাশে ছোট ছবি নিয়ন্ত্রণ করে।

• থাম্বনেল: থাম্বনেইল এলাকাটি সম্পূর্ণভাবে দেখান বা লুকান।
• ক্যারোজেল/গ্রিড: একটি স্ট্যাটিক গ্রিড এবং একটি স্ক্রলিং ক্যারোজেলের মধ্যে স্যুইচ করুন।
• ইমেজ রেজোলিউশন: আকারের ওয়ার্ডপ্রেস থাম্বনেইলের জন্য কাজ করে। থাম্বনেইল (150 x 150) পৃষ্ঠাটিকে হালকা রাখে।
• কলাম: গ্রিডের জন্য 1 থেকে 12টি কলাম বেছে নিন। 2 থেকে 3টি কলাম সরানো গ্রিডটিকে লম্বা এবং সরু থেকে একটি শক্ত ব্লকে পরিবর্তন করে।
• অর্ডার: ডিফল্ট অর্ডার রাখুন বা ছবিগুলি কীভাবে সাজানো হয় তা পরিবর্তন করুন।
• ক্যাপশন: থাম্বনেইলে একটি ক্যাপশন দেখান, অথবা এটিকে None এ ছেড়ে দিন।

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

পূর্বরূপ #

দ্য পূর্বরূপ বিভাগটি বড় স্লাইড পরিচালনা করে এবং এটি কীভাবে আচরণ করে।

• ইমেজ রেজোলিউশন: বড় ছবির জন্য পরিবেশিত আকার। সম্পূর্ণ দেখতে সবচেয়ে ভালো কিন্তু ওজন সবচেয়ে বেশি, তাই আপনার আসলগুলোকে সংকুচিত করুন।
• লিঙ্ক: প্রিভিউ ইমেজটিকে একটি URL বা মিডিয়া ফাইলের সাথে লিঙ্ক করুন, অথবা এটিকে None এ রাখুন।
• ক্যাপশন: পূর্বরূপের নীচে ছবির ক্যাপশন প্রদর্শন করুন।
• নির্দেশনা: বাম থেকে ডানে বা ডান থেকে বামে স্লাইড করুন।
• অসীম লুপ: শেষের পরে প্রথম স্লাইডে ফিরে যান।
• স্বয়ংক্রিয় উচ্চতা: স্লাইডারটিকে প্রতিটি চিত্রের সাথে তার উচ্চতা সামঞ্জস্য করতে দিন। মিশ্র অনুপাতের জন্য সহজ, যদিও স্লাইডগুলি পরিবর্তনের সাথে সাথে পৃষ্ঠাটি একটু স্থানান্তরিত হবে।
• অটোপ্লে: স্বয়ংক্রিয়ভাবে স্লাইড অগ্রিম। এটি সামঞ্জস্য করতে সম্পাদনা আইকনে ক্লিক করুন।
• প্রভাব: স্লাইড বা ফেইড ট্রানজিশন বেছে নিন।
• গতি (ms): রূপান্তর কতক্ষণ স্থায়ী হয়। ডিফল্ট হল 1000।
• তীর: নেভিগেশন তীরগুলি দেখান বা লুকান এবং তাদের বাছাই করুন৷ অবস্থান, যেমন উপরে বাম।

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

বিন্যাস #

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

• স্ট্যাক অন: লেআউটটি উল্লম্বভাবে স্ট্যাক করার সময় বেছে নিন, যেমন ট্যাবলেট এবং মোবাইল।
• পূর্বরূপ প্রস্থ (%): প্রিভিউ কতটা অনুভূমিক স্থান নেয়। কোথাও 60 থেকে 70 শতাংশের মধ্যে একটি তিন-কলামের গ্রিডের পাশে সুন্দরভাবে বসে।
• ব্যবধান: প্রিভিউ এবং থাম্বনেইলের মধ্যে ব্যবধান।

পূর্বরূপ #

স্টাইল ট্যাব পূর্বরূপ বিভাগ শৈলী বড় স্লাইড ধারক।

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

পূর্বরূপ ক্যাপশন #

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

প্রিভিউ হোভার প্রভাব #

প্রিভিউ হোভার প্রভাব দর্শকরা স্লাইডের উপর ঘোরাঘুরি করলে ক্যাপশনটি অ্যানিমেট করে। একটি বাছাই প্রভাব, সেট করুন উত্তরণ, তারপর শৈলী ডিফল্ট এবং ঘোরাঘুরি করা রঙ, পটভূমির ধরন, অস্বচ্ছতা এবং পাঠ্য ছায়া সহ রাজ্য।

থাম্বনেল #

স্টাইল ট্যাব থাম্বনেল বিভাগটি ছোট চিত্রগুলি পরিচালনা করে: উল্লম্ব প্রান্তিককরণ পুরো ব্লকের জন্য, অনুভূমিক ব্যবধান এবং উল্লম্ব ব্যবধান থাম্বনেইলের মধ্যে, প্লাস বর্ডার টাইপ এবং সীমানা ব্যাসার্ধ.

থাম্বনেইল হোভার প্রভাব #

এই বিভাগটি তিনটি রাজ্য জুড়ে থাম্বনেইল স্টাইল করে: ডিফল্ট, ঘোরাঘুরি করা, এবং সক্রিয় (বর্তমান স্লাইডের সাথে মিলে যাওয়া থাম্বনেইল)। দ্য ছবি গ্রুপ কভার ব্যাকগ্রাউন্ড রঙ, অস্বচ্ছতা, স্কেল, বক্স ছায়া, এবং CSS ফিল্টার। বাক্সের বাইরে, নিষ্ক্রিয় থাম্বনেইলগুলি 0.65 অস্বচ্ছতায় বসে তাই সক্রিয়টি আলাদা হয়ে যায়। দ্য ওভারলে গ্রুপ একটি রঙ বা গ্রেডিয়েন্ট স্তর যোগ করে ব্লেন্ড মোড, মার্জিন, অস্বচ্ছতা, এবং সীমান্ত নিয়ন্ত্রণ।

এছাড়াও একটি আছে নিদর্শন রেডিমেড স্টাইল প্রিসেট সহ স্টাইল ট্যাবের নীচের অংশ। একই বিভাগ অনেক মাস্টার অ্যাডঅন উইজেটে দেখায়।

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

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

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

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

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

• চিত্রের আকৃতির অনুপাতের সাথে মিল করুন। স্বয়ংক্রিয় উচ্চতা ক্রপিং চমক প্রতিরোধ করে, কিন্তু সামঞ্জস্যপূর্ণ অনুপাত পরিষ্কার দেখায় এবং লেআউটটিকে লাফানো থেকে বিরত রাখে।
• সঠিক রেজোলিউশন পরিবেশন করুন। পূর্বরূপের জন্য সম্পূর্ণ, গ্রিডের জন্য থাম্বনেইল (150 x 150)। আপলোড করার আগে সংকুচিত করুন; আমাদের গাইড দেখুন সেরা ওয়ার্ডপ্রেস ইমেজ অপ্টিমাইজার প্লাগইন.
• মিডিয়া লাইব্রেরিতে ক্যাপশন লিখুন গ্যালারি ঢোকানোর আগে যাতে প্রতিটি স্লাইড প্রস্তুত থাকে।
• অটোপ্লে গতি যুক্তিসঙ্গত রাখুন। দর্শকদের প্রতিটি ছবি দেখতে সময় দিন।
• সক্রিয় অবস্থা ব্যবহার করুন। নিষ্ক্রিয় থাম্বনেইলে ডিফল্ট 0.65 অস্বচ্ছতা ইতিমধ্যেই চোখকে গাইড করে; সক্রিয় থাম্বনেইলে একটি সীমানা বা সামান্য স্কেল এটিকে আরও পরিষ্কার করে তোলে।

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

পরিবর্তে সেটআপ দেখতে পছন্দ করেন? এই ভিডিওটি লাইভ পৃষ্ঠায় উইজেট টেনে আনা থেকে সমাপ্ত স্লাইডারে পুরো প্রক্রিয়াটি কভার করে:

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

মোড়ানো #

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

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