এলিমেন্টরে কীভাবে একটি লোগো ক্যারোজেল তৈরি করবেন

টেনে আনুন লোগো স্লাইডার উইজেট, প্রতিটি লোগোকে রিপিটার সারি হিসাবে যোগ করুন, ডেস্কটপ, ট্যাবলেট এবং মোবাইলের জন্য স্লাইড-প্রতি-ভিউ সেট করুন এবং লুপ সহ অটোপ্লে চালু করুন। এটি একটি বিনামূল্যের উইজেট, এর মধ্যে একটি ক্যারোজেল উইজেটের একটি সম্পূর্ণ পরিবার, এবং পুরো জিনিসটি প্রায় পাঁচ মিনিট সময় নেয়।

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

ধাপ 1: লোগো স্লাইডার উইজেট যোগ করুন

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

ধাপ 2: আপনার লোগো যোগ করুন

প্রতিটি লোগো একটি রিপিটার সারি: লোগো ইমেজ, একটি ঐচ্ছিক লিঙ্ক, এবং একটি ঐচ্ছিক হোভার টেক্সট বা হোভার ইমেজ। Alt টেক্সট মিডিয়া লাইব্রেরির ইমেজের Alt টেক্সট ফিল্ড থেকে আসে।

এখানে দুটি জিনিস যা বেশিরভাগ লোকেরা এড়িয়ে যায়:

বাস্তব alt পাঠ্য লিখুন। “e Corp লোগো,” নয় “logo-1.png।” একটি লোগো স্ট্রিপ এমন কয়েকটি জায়গার মধ্যে একটি যেখানে alt পাঠ্য প্রকৃত তথ্য বহন করে, কারণ কোম্পানির নামগুলি বিষয়বস্তু। স্ক্রিন রিডার ব্যবহারকারীরা বারোটি ছবি থেকে কিছুই পান না যাকে বলা হয় “।”

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

ধাপ 3: বিন্যাস এবং আচরণ

লোগো স্ট্রিপ ইমেজ carousels থেকে বিভিন্ন ডিফল্ট আছে, কারণ কাজ ভিন্ন। কেউ লোগো অধ্যয়ন করে না। তারা অর্ধ সেকেন্ডের মধ্যে এটি নিবন্ধন করে।

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

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

ধাপ 4: অমিল লোগোগুলিকে সামঞ্জস্যপূর্ণ দেখান৷

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

প্রস্থ দ্বারা মাপ ভুল। 160px চওড়ায় সেট করা একটি প্রশস্ত শব্দচিহ্ন দৃশ্যত ছোট; 160px চওড়ায় একটি বর্গাকার আইকন বিশাল। তারা একই সংখ্যা এবং তারা একই রকম দেখতে কিছুই না।

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

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

একই সমস্যার জন্য আরও দুটি সমাধান:

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

যেখানে পারেন SVG ব্যবহার করুন। লোগো হল ভেক্টর আর্টওয়ার্ক। একটি SVG যেকোন আকারে তীক্ষ্ণ থাকে, একটি PNG এর একটি ভগ্নাংশের ওজন করে এবং, এটি একটি দরকারী অংশ, CSS দিয়ে পুনরায় রঙ করা যেতে পারে, যা গ্রেস্কেল চিকিত্সাকে তুচ্ছ করে তোলে।

ধাপ 5: গ্রেস্কেল হোভার

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

লোগো স্লাইডারে কোন গ্রেস্কেল সুইচ নেই, তাই এটি করার দুটি উপায় আছে। ক্লায়েন্ট লোগো হিসাবে গ্রেস্কেল ফাইল আপলোড করুন এবং হোভার লোগো ইমেজ হিসাবে রঙিন সংস্করণগুলি আপলোড করুন, অথবা কাস্টম CSS সহ লোগোগুলিতে একটি CSS গ্রেস্কেল ফিল্টার যোগ করুন এবং হোভারে এটি সরান৷ ক্যারোজেল আইটেমগুলিতে অপাসিটি সেটিং লোগোগুলিকে বিশ্রামে প্রায় 0.6 এবং হোভারে 1 এ ম্লান করতে পারে। আপনি যদি CSS ব্যবহার করেন, তাহলে ট্রানজিশনটি 200 থেকে 300ms এ রাখুন। তার চেয়ে দ্রুত এবং এটি ঝিকিমিকি করে; ধীর এবং এটি আঠালো অনুভূত হয়।

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

সমাপ্ত ফালা

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

কোথায় রাখবেন না: ফুটার। ফুটারে একটি লোগো স্ট্রিপ হল সজ্জা। কেউ নিশ্চিত হওয়ার জন্য ফুটারে স্ক্রোল করে না।

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

কয়টি লোগো?

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

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

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

পরবর্তী

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

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