গ্রুপ হলো একটি বাক্স যা অন্য ব্লক ধরে রাখে এবং সাজায়। জিনিসপত্র পাশাপাশি রাখতে, কলাম তৈরি করতে, বা সেকশনের একটি অংশকে নিজস্ব ব্যাকগ্রাউন্ড ও বর্ডার দিতে এটি ব্যবহার করুন।
কোথায় গ্রুপ ব্যবহার করা যায়
অনেক সেকশনে গ্রুপ ব্লক রাখা যায়: ফুটার, নিউজলেটার, হিরো, স্লাইডশোর স্লাইড, সাধারণ জিজ্ঞাসা, আগে ও পরে, রিভিউ, যোগাযোগ, 404, অর্ডার কনফার্মেশন, কলাপসিবল সারি, এবং বাছাই করা প্রোডাক্ট ও কালেকশনের মতো প্রোডাক্ট তালিকার টেক্সট অংশ। প্রতিটি সেকশন ঠিক করে এর গ্রুপের ভেতরে কোন ব্লক রাখা যাবে এবং কয়টি গ্রুপ নেওয়া যাবে।
বিল্ডার-এ একটি যোগ করতে সেকশনটি সিলেক্ট করুন, নতুন ব্লক যোগ করুন-এ ক্লিক করুন এবং গ্রুপ বেছে নিন। তারপর অন্য ব্লকগুলো এর ভেতরে টেনে আনুন। কিছু সেকশনে (ফুটার, নিউজলেটার, রিভিউ) গ্রুপের ভেতরে গ্রুপও রাখা যায়।
লেআউট
- প্রস্থ: ফিল খালি জায়গা নেয় এবং পাশের অন্য ফিল গ্রুপের সাথে সমানভাবে ভাগ করে। ফিট শুধু এর কনটেন্টের সমান চওড়া। কাস্টম শতাংশে একটি কাস্টম প্রস্থ দেয়।
- দিক: লম্বালম্বি ব্লকগুলো উপর-নিচে সাজায়, আড়াআড়ি পাশাপাশি রাখে। জায়গা যথেষ্ট না হলে পাশাপাশি ব্লকগুলো নতুন লাইনে চলে যায়।
- মোবাইলে উপর-নিচে সাজান (শুধু আড়াআড়ি): ফোনে ব্লকগুলো উপর-নিচে সাজানো হয়।
- অবস্থান: ব্লকগুলোকে উপর-নিচে বসায় (উপরে, মাঝখানে, নিচে)।
- অ্যালাইনমেন্ট: ব্লকগুলোকে বাম থেকে ডানে বসায় (বাম, মাঝখানে, ডান)।
- মাঝে সমান ফাঁকা: ব্লকগুলোকে সমান দূরত্বে ছড়িয়ে দেয়। ব্লকগুলো যে দিকে সাজানো সেই দিকেই এটি পাওয়া যায়: লম্বালম্বি গ্রুপে অবস্থানে, আড়াআড়ি গ্রুপে অ্যালাইনমেন্টে।
লুক
- প্যারেন্টের কালার স্কিম ব্যবহার করুন: ডিফল্টভাবে চালু, তাই গ্রুপ সেকশনের রং ব্যবহার করে। গ্রুপকে নিজস্ব ব্যাকগ্রাউন্ড ও লেখার রং দিতে এটি বন্ধ করে একটি কালার স্কিম বেছে নিন।
- বর্ডার: কিছু না বা সলিড। সলিড দিলে যোগ হয় বর্ডারের পুরুত্ব (1 থেকে 20 পিক্সেল) ও বর্ডারের স্বচ্ছতা। রং হলো স্কিমের বর্ডারের রং।
- কোণের রেডিয়াস: কোণগুলো গোল করে, 0 থেকে 100 পিক্সেল।
- ব্যাকগ্রাউন্ড ওভারলে: ব্যাকগ্রাউন্ডের উপরে একটি রঙের স্তর যোগ করে। ওভারলের রং ও ওভারলের স্টাইল ঠিক করুন: সলিড, অথবা ধীরে ধীরে স্বচ্ছ হয়ে যাওয়া গ্রেডিয়েন্ট, যার গ্রেডিয়েন্টের দিকউপরে বা নিচে। হিরোর ছবির উপরে লেখা পড়ার মতো করতে কাজে লাগে।
ব্যবধান
ফাঁকা হলো গ্রুপের ভেতরের ব্লকগুলোর মাঝের জায়গা (0 থেকে 100 পিক্সেল)। প্যাডিং হলো প্রতিটি পাশে গ্রুপের কিনারা ও এর ব্লকগুলোর মাঝের জায়গা।
রেসিপি
- হিরোতে পাশাপাশি দুটি বাটন: দুটোকেই অল্প ফাঁকাসহ একটি আড়াআড়ি গ্রুপে রাখুন।
- ফুটারে তিনটি কলাম: ভেতরে তিনটি ফিল আইটেমসহ একটি আড়াআড়ি গ্রুপ, আর মোবাইলে উপর-নিচে সাজান চালু।
- একটি কার্ড: নিজস্ব কালার স্কিম, সলিড বর্ডার, কোণের রেডিয়াস ও প্যাডিংসহ একটি লম্বালম্বি গ্রুপ।
- বামে টেক্সট, ডানে বাটন: অ্যালাইনমেন্ট মাঝে সমান ফাঁকা করা একটি আড়াআড়ি গ্রুপ।
জেনে রাখুন
- একটি কলাম যতটা চান তার চেয়ে চওড়া: দুটি ফিল গ্রুপ জায়গা সমানভাবে ভাগ করে। একটিকে কাস্টম করে শতাংশ দিন।
- গ্রুপটি দেখাচ্ছে না: কোনো ব্লক ছাড়া, বা শুধু লুকানো ব্লকসহ গ্রুপ আপনার স্টোরে দেখানো হয় না।
- ব্লকের তালিকায় গ্রুপ নেই: সেই সেকশন গ্রুপ নেয় না, অথবা এর গ্রুপের সীমা পূর্ণ হয়েছে।
- টেক্সট, বাটন ও ডিভাইডারের সেটিংস আছে গ্রুপ, টেক্সট, বাটন ও ডিভাইডার ব্লক: লেআউট কম্পোনেন্টের সেটিংস কীভাবে কাজ করে? লেখায়।