হেডার ও ফুটার বিল্ডার
Sidebar → Online Shop → Headers (বা Footers)।
দুটি তালিকাই একইভাবে চলে: প্রতিটি সারিতে নাম, Default কি না, অবস্থা আর কখন বদলেছে, সঙ্গে Edit, Set as default / Remove default আর Delete। যেটিতে Default লেখা, প্রতিটি পেজ সেটিই ব্যবহার করে — যদি না কোনো পেজ page settings-এ আলাদা করে দেয়।
সম্পাদকের গড়ন পেজ বিল্ডারের মতোই — বাঁয়ে কাঠামোর তালিকা, মাঝে জীবন্ত প্রিভিউ, ডানে সেটিংস — সঙ্গে একই undo, ডিভাইস বোতাম আর সেভ না করে বেরোনোর সতর্কতা।
হেডার: তিনটি সারি
হেডার আসলে উপর থেকে নিচে তিনটি সারি। প্রতিটির নিজের চালু/বন্ধ সুইচ আছে, আর সারির নামে ক্লিক করলে ডানে সেই সারির সেটিংস খোলে।
| সারি | ডিফল্ট | কীসের জন্য |
|---|---|---|
| Announcement bar | বন্ধ | হেডারের উপরে সরু এক ফালি — হটলাইন, অফার, শিপিংয়ের শর্ত |
| Header row | সবসময় চালু | লোগো, মেনু, সার্চ, অ্যাকাউন্ট ও কার্ট |
| Second row | বন্ধ | হেডারের নিচে আলাদা লাইনে মেনু |
বন্ধ সারি তা বলেও দেয়: “Off. Turn it on for a slim strip above the header — shipping terms, a hotline, an offer.”
জোন
প্রতিটি সারিতে তিনটি জোন — Left, Center, Right — আর প্রতিটি জোন একটি তালিকা, যাতে এলিমেন্ট যোগ করা যায়। Add element পেজ বিল্ডারের সেই একই গ্যালারি খোলে। এলিমেন্ট জোনের ভেতরে টেনে সরানো যায়, আর প্রতিটি জোনের মাথায় একটি Width কন্ট্রোল থাকে: Auto (জায়গা ভাগ করে নেয়), % বা px (নির্দিষ্ট করে দেয়)। এক জোনে px আর আরেক জোনে % দেওয়া স্বাভাবিক — ২০০px লোগো কলামের পাশে ৫০% মেনু কলাম।
শতাংশ যোগ করে ১০০ হলো কি না তা যাচাই করা হয় না; বেশি দিলে প্রিভিউতে সঙ্গে সঙ্গেই বোঝা যায়।
হেডারের এলিমেন্ট
| এলিমেন্ট | কী |
|---|---|
| Row | ১–৪ কলামের গ্রিড, যাতে অন্য যেকোনো এলিমেন্ট ফেলা যায় |
| Logo | দোকানের নাম লেখা হিসেবে, বা আপলোড করা লোগো |
| Menu | নেভিগেশনের লিংকের সারি, নিজে লেখা বা দোকানের মেনু থেকে |
| Hamburger | যে বোতামে চাপলে বাঁ বা ডান পাশ থেকে লিংকের ড্রয়ার আসে; ডেস্কটপেও দেখানো যায় |
| Search | প্রোডাক্ট খোঁজা — আইকন, পুরো বার, বা ক্যাটাগরির ড্রপডাউনসহ বার |
| Button | solid, outline, pill বা text ধাঁচের একটি বোতাম |
| Text | ছোট এক লাইন — শিপিংয়ের প্রতিশ্রুতি, একটি অফার |
| Text link | একটিমাত্র লেখার লিংক |
| Icon link | কোথাও নিয়ে যাওয়া আইকন — account, wishlist, cart, search, phone |
| Action | জীবন্ত account, wishlist বা cart আইকন, সঙ্গে সংখ্যা |
| Phone | চাপলেই কল যায় এমন নম্বর |
| Image | যেকোনো ছবি, লিংকসহ — পেমেন্ট ব্যাজ, ছোট ব্যানার |
| Hero | পুরো চওড়া ব্যানার: ব্যাকগ্রাউন্ড ছবি, শিরোনাম, উপশিরোনাম, বোতাম |
| Services | আইকন + শিরোনাম + বিবরণের কার্ডের সারি |
| Testimonials | কাস্টমারের মন্তব্য, সঙ্গে নাম, পরিচয় ও তারকা |
| Stats | লেবেলসহ বড় সংখ্যা |
| CTA band | শিরোনাম, লেখা ও একটি বোতাম নিয়ে পুরো চওড়া ফালি |
| Banners | প্রচারের ছবির গ্রিড, প্রতিটির লিংক দেওয়া যায় |
| Image slider | ঘুরন্ত কিছু ছবি, autoplay ও তীরসহ |
| Logo strip | পার্টনার বা পেমেন্টের লোগোর সারি |
Action আর Icon link দেখতে এক হলেও এক নয়: Action হলো সংখ্যা সহ জীবন্ত cart বা wishlist, আর Icon link কেবল কোথাও নিয়ে যায়।
Announcement bar-এর এলিমেন্ট
| এলিমেন্ট | কী |
|---|---|
| Text | একটি বার্তা, চাইলে লিংক, বোল্ড বা নড়াচড়াসহ |
| Rotate | কয়েকটি বার্তা, একটি একটি করে ঘুরে আসে |
| Marquee | বার্তা একটানা ভেসে যায় |
| Phone | চাপলেই কল যায় এমন নম্বর, সঙ্গে ঐচ্ছিক লেবেল |
| Social | আপনার সোশ্যাল প্রোফাইলের আইকন |
সারির সেটিংস
সারির নামে ক্লিক করলে সারিটি নিজেই সাজানো যায়।
Header row — Container ও Max width (px), Height (px), Sticky on scroll, Background, Text / icon color, Bottom border।
Announcement bar — Height (compact / normal / tall), Sticky on scroll, Background, Text color।
Second row — Height (px), Divider above, Background, Text / icon color।
ফুটার: কলামের গ্রিড
ফুটার মানে কলাম ভরা widget, সঙ্গে নিচের একটি বার। Add column নতুন কলাম বানায়; প্রতিটি কলামে নিজের widget বসে, আর কলাম মুছেও ফেলা যায়। Bottom bar হলো কলামগুলোর নিচের কপিরাইট লাইন — “Click the title to edit it.”
ফুটারের widget
| Widget | কী |
|---|---|
| Row | কলামের গ্রিড, যাতে অন্য যেকোনো ফুটার widget ফেলা যায় |
| Heading | কলামের শিরোনাম |
| Text | এক অনুচ্ছেদ লেখা — পরিচিতি, ঠিকানা |
| Links | নিজে লেখা লিংকের তালিকা |
| Menu | লিংকের তালিকা, নিজে লেখা বা দোকানের মেনু থেকে |
| Image | ছবি, চাইলে লিংকসহ — লোগো, পেমেন্ট ব্যাজ |
| Newsletter | শিরোনাম ও বোতামসহ ইমেইল সাইন-আপ ফর্ম |
| Social | সোশ্যাল প্রোফাইলের আইকন |
| HTML | সরাসরি HTML, বাকিগুলোতে যা হয় না তার জন্য |
ফুটারের সেটিংস
Container ও Max width (px), Columns per row, Vertical padding (px), Background, Text color, Muted text, আর নিচের বারের Copyright text।
মেনু
হেডার ও ফুটারের Menu এলিমেন্টে হয় নিজে লেখা লিংক থাকে, নয়তো Menu Builder-এ বানানো কোনো মেনু — মেনু একবার বদলালে যেখানে যেখানে ব্যবহার হয়েছে সব বদলে যায়। দেখুন মেনু, হেডার ও ফুটার।
সেভ করা ও ডিফল্ট করা
Save হেডার বা ফুটারটি জমা রাখে। Set as default header for all pages সেটিকে দোকানের ব্যবহৃত হেডার বানায়। কোনো একটি পেজ চাইলে page settings-এ আলাদা হেডার দিতে পারে।
পুরোনো বিল্ডারের হেডার
আগের বিল্ডারে বানানো হেডারে কম্পাইল করা HTML থাকে, কিন্তু এই কন্ট্রোলগুলো পড়তে পারে এমন সেটিংস থাকে না। খুললে সতর্ক করে:
This header was built with the old builder, so its design can’t be loaded into these controls. Saving now REPLACES it with the header shown in the editor controls. Your original header will be lost. Continue?
রাখতে চাইলে সেভ না করে বেরিয়ে যান। এগোতে চাইলে সেভ করার আগে হেডারটি এখানে নতুন করে বানিয়ে নিন — সম্পাদকে যা দেখছেন, সেটিই পুরোনোটির জায়গা নেবে।
সাধারণ সমস্যা
“আমার মেনু তালিকায় নেই।” আগে Menu Builder-এ বানান, তারপর এলিমেন্টে বাছুন।
“কার্ট আইকনে সংখ্যা আসছে না।” Icon link নয়, Action এলিমেন্ট নিন।
“সব কিছু বাঁ পাশে জমে গেছে।” জোনের Width দেখুন — এক জোনে শতাংশ আটকে দিলে বাকিদের জায়গা কমে যায়।
“হেডার বদলেছি, দোকানে পুরোনোটাই।” হয় Save চাপা হয়নি, নয়তো এই হেডারটি ডিফল্ট নয় — তালিকা দেখুন, বা পেজের নিজের হেডার সেটিং দেখুন।