কী টেকঅ্যাওয়ে
- সমস্ত ছয়টি উদাহরণ একই উইজেট দিয়ে তৈরি লাইভ ডেমো পৃষ্ঠা, তাই আপনি প্রতিটি খুলতে পারেন এবং ট্যাবগুলিতে ক্লিক করতে পারেন।
- প্রত্যেকে চারটি বিভাগ এবং একটি অল ট্যাব ব্যবহার করে, যা একটি ল্যাপটপে একটি লাইনে বার রাখে।
- প্রতিটি ডিজাইনে সমস্ত ট্যাবের নাম পরিবর্তন করা হয়েছে: “All listings”, “Full menu”, “All work”, “All projects”, “shop all” এবং “Every destination”।
- কলাম গণনা অভ্যন্তরীণ কেস স্টাডির জন্য দুই থেকে রেস্তোরাঁর মেনু এবং দোকানের গ্রিডের জন্য চার পর্যন্ত চলে।
- প্রতিটি কার্ডে ছয়টি পুট বোতামের মধ্যে দুটি, দুটি একটি হোভার আইকন ব্যবহার করে যা চিত্রটি খোলে এবং দুটি ব্যবহার করে না।
একটি ফিল্টারযোগ্য গ্যালারি যা ধারণ করে তার উপর নির্ভর করে ভিন্ন দেখায়। একটি রেস্তোরাঁর মেনু দাম সহ ঘন চারটি কলাম কার্ড চায়, একটি অভ্যন্তরীণ স্টুডিও দুটি বড় কলাম এবং একটি কেস স্টাডি লিঙ্ক চায় এবং একজন ফটোগ্রাফার চায় ছবিগুলি সবকিছু বহন করুক।
নীচের ছয়টি ডিজাইন হল লাইভ ডেমো পৃষ্ঠা যা আপনি ক্লিক করতে পারেন। প্রতিটি এন্ট্রি বিভাগ, কলাম গণনা এবং সেটিংস নোট করে যা এটিকে এর চরিত্র দেয়, যাতে আপনি আপনার বিষয়বস্তুর সাথে মেলে এমন আকৃতিটি অনুলিপি করতে পারেন।
বিষয়বস্তুর সারণী
এক নজরে ছয়টি উদাহরণ
| উদাহরণ | বিভাগ | আইটেম | কলাম | কার্ড লিঙ্ক |
|---|---|---|---|---|
| সম্পত্তি তালিকা | অ্যাপার্টমেন্ট, ভিলা, টাউনহাউস, অফিস | 8 | 3 | দুটি বোতাম |
| রেস্টুরেন্ট মেনু | ছোট প্লেট, মেইন, ডেজার্ট, ককটেল | 8 | 4 | হোভার আইকন |
| বিয়ের ফটোগ্রাফি | অনুষ্ঠান, প্রতিকৃতি, অভ্যর্থনা, বিস্তারিত | 9 | 3 | হোভার আইকন |
| অভ্যন্তরীণ প্রকল্প | আবাসিক, আতিথেয়তা, খুচরা, কর্মক্ষেত্র | 8 | 2 | এক বোতাম |
| পণ্য ক্যাটালগ | ব্যাগ, পাদুকা, ঘড়ি, বাইরের পোশাক | 8 | 4 | দুটি বোতাম |
| ভ্রমণ গন্তব্য | ইউরোপ, এশিয়া, আমেরিকা, আফ্রিকা | 8 | 3 | হোভার আইকন |
ফিল্টারযোগ্য গ্যালারী উদাহরণ
1। সম্পত্তি তালিকা
চারটি বিভাগ জুড়ে আটটি তালিকা, সমস্ত ট্যাবের নাম পরিবর্তন করে "সমস্ত তালিকা" রাখা হয়েছে৷ প্রতিটি কার্ড শিরোনাম হিসাবে সম্পত্তির নাম এবং সাবটাইটেল হিসাবে স্পেসিফিকেশন লাইন বহন করে, তাই “2 bed, 1 bath, 940 sq ft, $2,450/mo” ছবির নীচে বসে। কার্ড প্রতি দুটি বোতাম একজন দর্শক যে দুটি জিনিস চায় তা পরিচালনা করে: বিশদ বিবরণ এবং একটি দর্শন৷।
অনুলিপি করার মতো বিশদটি হল ফিতা: আটটি কার্ডের মধ্যে দুটিতে নতুন বা প্রাইস ড্রপ পড়ার একটি কোণার ব্যাজ লেআউট স্পর্শ না করেই চোখ টানে।
2। রেস্টুরেন্ট মেনু
একটি অন্ধকার পটভূমিতে চারটি কলাম, সমস্ত ট্যাবে লেখা আছে “Full menu”৷ থালাটির নাম হল শিরোনাম এবং মূল্য হল সাবটাইটেল, যা দুটি ক্ষেত্রে পুরো মেনু কাঠামো। কোর্সগুলি ফিল্টার হয়ে যায়, তাই একজন দর্শক যিনি শুধুমাত্র ডেজার্ট চান তিনি এক ক্লিকে সেখানে পৌঁছান।
চারটি কলাম এখানে কাজ করে কারণ ফটোগুলি একক খাবারের টাইট ফসল। চারটি কলামে প্রশস্ত দৃশ্যের ফটোগ্রাফি অপঠনযোগ্য হবে।
3। বিবাহের ফটোগ্রাফি
নয়টি ফ্রেম, দিনের চারটি অংশ এবং প্রায় কোন পাঠ্য নেই। সমস্ত ট্যাব বলে "সমস্ত কাজ" এবং কার্ডগুলি বোতামের পরিবর্তে একটি হোভার আইকন ব্যবহার করে, তাই একটি ক্লিক দূরে নেভিগেট করার পরিবর্তে ছবিটি খোলে৷ ফটোগ্রাফ পণ্য হলে এটি অনুলিপি করার নকশা।
যা এটিকে কাজ করে তা হল এটি যা ছেড়ে দেয়: কোনও ফিতা নেই, কোনও বোতাম নেই এবং কোনও সাবটাইটেল চিত্রগুলির সাথে প্রতিযোগিতা করে না৷।
4। অভ্যন্তরীণ প্রকল্প
দুটি কলাম, তাই প্রতিটি প্রকল্প বাস্তব স্থান পায়, ওভারলে সেটটি হোভারের পরিবর্তে সর্বদা দেখানোর জন্য। কার্ড প্রতি একটি বোতাম, "কেস স্টাডি দেখুন" পড়া। ফিল্টার বারটি কেন্দ্রীভূত না হয়ে বাম দিকে সারিবদ্ধ, যা সম্পাদকীয় অনুভূতির জন্য উপযুক্ত।
দুটি কলাম হল কাজের জন্য অনুলিপি করার মতো পছন্দ যা দ্বিতীয়বার দেখার যোগ্য। দুটি কলামে আটটি প্রকল্প এখনও স্ক্রলিংয়ের একটি স্ক্রিনে ফিট করে।
5। পণ্য ক্যাটালগ
চারটি কলাম, শিরোনাম হিসাবে পণ্যের নাম, সাবটাইটেল হিসাবে মূল্য এবং দুটি বোতাম লেখা "দ্রুত দৃশ্য" এবং "ব্যাগে যোগ করুন"৷ সমস্ত ট্যাব বলছে “shop all”। এটি একটি না হয়ে একটি দোকানের পৃষ্ঠার মতো দেখায়: কার্ডগুলি পণ্যের পরিবর্তে লিঙ্ক সহ চিত্র, তাই কোনও কার্টে যায় না৷ একটি দোকানের দিকে নির্দেশ করে এমন একটি লুকবুকের জন্য, এটাই যথেষ্ট।
দুটি বোতাম প্যাটার্ন দরকারী অংশ: একটি নরম কর্ম, একটি দৃঢ় এক।
6। ভ্রমণ গন্তব্য
ফিল্টার হিসাবে মহাদেশ, সমস্ত ট্যাবের নাম পরিবর্তন করে "প্রতিটি গন্তব্য"। হোভার স্কেল অন্যান্য ডেমোর চেয়ে বেশি সেট করা হয়েছে, তাই কার্ডগুলি কার্সারের নীচে আরও লক্ষণীয়ভাবে উত্তোলন করে। শিরোনাম স্থানের নাম এবং সাবটাইটেল বিস্তারিত যোগ করে।
নতুন নামকরণ করা সমস্ত ট্যাব এখানে বাস্তব কাজ করে। “প্রতিটি গন্তব্য" একজন দর্শককে বলে যে সেটটি কী; “All” তাদের কিছুই বলে না।
ছয়জনের মধ্যে কি মিল আছে
- ছয়টি ডিজাইনে চারটি বিভাগ। চারটি ট্যাব প্লাস সবই একটি ল্যাপটপে এক লাইনে ফিট করে এবং একটি ফোনে দুটিতে মোড়ানো হয়।
- ছয়টি ভিন্ন লেবেল সহ প্রতিবার সমস্ত ট্যাবের নাম পরিবর্তন করা হয় এবং ডিফল্টটিতে একটিও অবশিষ্ট থাকে না।
- উপরে শিরোনাম, নীচে বিশদ, প্রতিটি ডিজাইনে যা পাঠ্য ব্যবহার করে।
- কলাম গণনা ফটোগ্রাফি অনুসরণ করে: আঁটসাঁট ফসল চারটি কলাম, দৃশ্য এবং কক্ষ দুটি বা তিনটি লাগে।
- কার্ড প্রতি এক ক্লিক আচরণ, হয় বোতাম বা একটি লাইটবক্স আইকন, উভয়ই নয়।
এর মধ্যে একটি নির্মাণ
প্রতিটি ডিজাইন বিভিন্ন সেটিংস সহ একই উইজেট। বিল্ডটি হল: প্রতি ছবিতে একটি আইটেম যোগ করুন, ট্যাবগুলি তৈরি করতে প্রতিটিতে একটি ফিল্টার লেবেল টাইপ করুন, কলাম সেট করুন, তারপর সিদ্ধান্ত নিন যে কার্ডগুলি চিত্রের দিক অনুপাতের সাথে অভিন্ন উচ্চতায় ক্রপ করবে নাকি তাদের নিজস্ব অনুপাত বজায় রাখবে৷ শিরোনাম, সাবটাইটেল এবং ওভারলে আচরণ ওভারলে সেটিং বিভাগে থাকে এবং প্রতিটি আইটেমের উপর দুটি বোতাম বসে।
সম্পূর্ণ ওয়াকথ্রু আছে এলিমেন্টরে কীভাবে ফিল্টারযোগ্য গ্যালারি তৈরি করবেন, এবং উইজেট নিজেই হয় ফিল্টারযোগ্য ইমেজ গ্যালারি.
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কি এই উদাহরণগুলিকে টেমপ্লেট হিসাবে আমদানি করতে পারি?
এগুলি আমদানিযোগ্য কিটের পরিবর্তে ডেমো পৃষ্ঠা। একটি পুনর্নির্মাণ করতে প্রায় দশ মিনিট সময় লাগে, যেহেতু কাঠামোটি মুষ্টিমেয় সেটিংস এবং আপনার নিজস্ব চিত্র।
একটি ফিল্টার বার কত বিভাগ থাকা উচিত?
চারটি ছয়টি ডিজাইনের প্যাটার্ন। ছয়টার পরে বারটি একটি ল্যাপটপে মোড়ানো হয় এবং দ্বিতীয় মেনুর মতো পড়তে শুরু করে।
একটি ছবি দুটি ট্যাবের নিচে প্রদর্শিত হতে পারে?
হ্যাঁ। ফিল্টার লেবেল ক্ষেত্রে উভয় বিভাগের নাম রাখুন, একটি কমা দ্বারা পৃথক করুন।
ডেমো কি রাজমিস্ত্রি ব্যবহার করে?
না। সমস্ত ছয়টি ক্রপ কার্ড একটি অভিন্ন উচ্চতায়, যে কারণে গ্রিডগুলি পরিপাটি দেখায়। রাজমিস্ত্রি মিশ্র অভিযোজন সহ সেটগুলির জন্য একটি পৃথক সুইচ।
দোকানের উদাহরণ কি পেমেন্ট নিতে পারে?
না। এটি বোতাম সহ একটি গ্যালারি, তাই কার্ডগুলি যেখানেই নির্দেশ করে সেখানেই লিঙ্ক করে৷ চেকআউট WooCommerce এর অন্তর্গত।
চূড়ান্ত চিন্তা
ছয়টি ডিজাইন, একটি উইজেট এবং তাদের মধ্যে চারটি সিদ্ধান্ত: কতগুলি কলাম, কার্ডগুলি ক্রপ হয় কিনা, বোতামগুলি কী করে এবং সমস্ত ট্যাবকে কী বলা হয়৷ আপনার বিষয়বস্তুর নিকটতম উদাহরণ থেকে শুরু করুন এবং সেই চারটি পরিবর্তন করুন।
সম্পর্কিত পড়া
