লোগো স্লাইডার

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

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

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

উইজেটটি লোগো চিত্রগুলির একটি তালিকা নেয় এবং এটিকে একটি প্রতিক্রিয়াশীল, স্বয়ংক্রিয়-প্লেয়িং ক্যারোসেলে পরিণত করে। আপনি একবারে কতগুলি লোগো দেখায়, সেগুলি কত দ্রুত ঘোরে এবং একজন দর্শক একটির উপর ঘোরাফেরা করলে কী ঘটে তা নিয়ন্ত্রণ করেন। এটি সুইপার ইঞ্জিনে চলে, তাই স্লাইডারটি শুরু থেকেই ফোন এবং ট্যাবলেটে স্পর্শ বন্ধুত্বপূর্ণ।

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

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

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

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

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

লোগো আইটেম বিভাগে আপনার লোগো যোগ করুন #

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

আইটেম তালিকার নীচে তিনটি সেটিংস বসুন যা পুরো স্লাইডারে প্রযোজ্য:

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

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

প্রতিটি লোগোর জন্য লিঙ্ক এবং হোভার প্রভাব সেট করুন #

প্রতিটি লোগো আইটেম তার নিজস্ব বহন করে লিঙ্ক ক্ষেত্র। ক্লায়েন্টের URL পেস্ট করুন এবং লোগোটি লাইভ পৃষ্ঠায় ক্লিকযোগ্য হয়ে যায়। গিয়ার আইকন সাধারণ এলিমেন্টর লিঙ্ক বিকল্পগুলি খোলে, যেমন একটি নতুন ট্যাবে খোলা।

দ্য হোভার? ড্রপডাউন সিদ্ধান্ত নেয় যখন একজন দর্শক লোগোর উপর মাউস সরিয়ে দেয় তখন কী ঘটে। এর তিনটি মোড রয়েছে:

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

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

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

একটি লোগোতে একটি টুলটিপ যোগ করুন #

প্রতিটি আইটেম একটি আছে টুলটিপ টগল করুন। এটি চালু করুন এবং দর্শকরা সেই লোগোর উপর ঘোরাঘুরি করলে একটি ছোট বুদবুদ দেখা যায়। দ্য সেটিংস ট্যাব আচরণ নিয়ন্ত্রণ করে:

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

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

নেভিগেশন তীর সেট আপ করুন #

খোলা নেভিগেশন দর্শকরা কীভাবে স্লাইডারটি হাত দিয়ে সরান তা নিয়ন্ত্রণ করার জন্য বিভাগ। দ্য নেভিগেশন ড্রপডাউন স্ট্যান্ডার্ড পছন্দ হিসাবে তীর সহ নিয়ন্ত্রণের ধরন সেট করে।

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

ক্যারোজেল আচরণ টিউন করুন #

দ্য ক্যারোজেল সেটিংস বিভাগটি স্লাইডারের গতি চালায়। এখানেই লোগোর একটি স্থির সারি ঘূর্ণায়মান স্ট্রিপ দর্শকদের প্রত্যাশা হয়ে ওঠে।

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

লোগো স্লাইডার স্টাইল করুন #

সুইচ শৈলী ট্যাব। চারটি বিভাগ স্লাইডারের চেহারা কভার করে: ক্যারোজেল আইটেম, ক্যারোজেল আইটেম হোভার, আইকন এবং নেভিগেশন।

ক্যারোজেল আইটেম #

এই বিভাগটি প্রতিটি লোগো সেলকে সাধারণ, হোভার এবং সক্রিয় অবস্থা সহ ফ্রেম করে।

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

ক্যারোজেল আইটেম হোভার #

এই বিভাগটি টেক্সট ওভারলে সহ কন্টেন্ট ট্যাবে আপনার বাছাই করা হোভার স্টেটকে স্টাইল করে।

• পটভূমি, সীমানা, বক্স ছায়া, প্যাডিং, মার্জিন: একটি hovered লোগো চারপাশে ফ্রেম।
• নামের রঙ, নাম টাইপোগ্রাফি, ব্যবধান: ব্র্যান্ড নামের পাঠ্য যা টেক্সট হোভার মোডে প্রদর্শিত হয়।

আইকন #

আইকন বিভাগটি হোভার সামগ্রী সহ দেখানো ছোট আইকনটিকে স্টাইল করে: এর রঙ, পটভূমি, সীমানা, প্যাডিং, মার্জিন এবং ফন্টের আকার।

নেভিগেশন তীর #

নেভিগেশন বিভাগটি তীর বোতামগুলিকে স্টাইল করে, আলাদা সাধারণ এবং হোভার স্টেট সহ।

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

পৃষ্ঠায় ফলাফল #

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

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

• ক্লায়েন্ট লোগো স্ট্রিপ এজেন্সি এবং ফ্রিল্যান্সার হোমপেজে, প্রতিটি লোগো একটি কেস স্টাডির সাথে লিঙ্ক করে।
• অংশীদার এবং স্পনসর carousels ইভেন্ট, অলাভজনক, এবং SaaS ইন্টিগ্রেশন পৃষ্ঠাগুলির জন্য।
• “” প্রেস বারে বৈশিষ্ট্যযুক্ত প্রকাশনার লোগো কভারেজের সাথে লিঙ্ক করা।
• ব্র্যান্ড শোকেস ডিস্ট্রিবিউটর এবং খুচরা বিক্রেতা সাইটগুলিতে তারা যে লেবেলগুলি বহন করে তা তালিকাভুক্ত করে৷।
• প্রযুক্তি স্ট্যাক পোর্টফোলিও সাইটগুলিতে, প্রতিটি টুলের নাম দেওয়ার জন্য টুলটিপ ব্যবহার করে।

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

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

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

মোড়ানো #

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