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