সেকশনের সেটিংস, কন্ট্রোল ধরে ধরে
সেকশন নির্বাচন করলে ডান পাশে তার অপশন খোলে। সব সেকশনে একই কন্ট্রোলগুলোই ব্যবহার হয়, তাই এগুলো জানলে সবই জানা হয়ে যায়।
তিনটি ট্যাব
| ট্যাব | কী থাকে |
|---|---|
| Content | সেকশন কী বলে ও দেখায় — লেখা, ছবি, প্রোডাক্ট, লিংক |
| Layout | প্রস্থ, ফন্ট, ফাঁক, কলাম, উচ্চতা |
| Advanced | ব্যাকগ্রাউন্ড, কাস্টম CSS, আর ডিভাইসভিত্তিক দেখানো/লুকানো |
যে সেকশনের যতটুকু দরকার, ততটুকু ট্যাবই দেখায়; এক ভাগ অপশন হলে ট্যাবের সারিই থাকে না। কিছু কন্ট্রোল অন্য একটি সেট করার পরই আসে — যেমন Feature image position ড্রপডাউন কেবল feature image দিলে দেখা যায়।
Content-এর কন্ট্রোল
Text box — এক লাইন: শিরোনাম, বোতামের লেখা, দাম।
Text area — কয়েক লাইন সাধারণ লেখা, যেমন উপশিরোনাম বা বিবরণ।
Rich text — ছোট একটি সম্পাদক: বোল্ড, ইটালিক, তালিকা, লিংক, শিরোনাম। Rich Text সেকশন আর FAQ-র উত্তরে এটি ব্যবহার হয়।
Switch — চালু/বন্ধ, সঙ্গে সঙ্গে কার্যকর।
Number — সাধারণ সংখ্যার ঘর। কোনো কোনোটির সর্বনিম্ন মান আছে (প্রোডাক্টের সংখ্যা ১-এর কম হয় না)।
ড্রপডাউন — নির্দিষ্ট কিছু পছন্দ। যেখানে Theme default আছে, সেই খালি পছন্দটির মানে আছে: “থিম আর আপনার Appearance সেটিংস যা বলে, তাই”।
কালার — একটি রঙের ঘর আর পাশে লেখার ঘর। ঘরে ক্লিক করে বাছুন, নয়তো #111827-এর
মতো মান লিখুন। ঘর খালি করলে সেকশন থিমের রঙে ফিরে যায়।
Range — শতাংশের স্লাইডার, যেমন ছবির উপরের আস্তরণ।
লাইন ধরে লেখা — যে ঘরে এক লাইনে একটি করে লিখলে প্রতিটি আলাদা আইটেম হয়; যেমন সার্চের ক্যাটাগরি বা ঘুরে ঘুরে দেখানো বার্তা।
ছবি
Choose image-এ ক্লিক করলে আপনার মিডিয়া লাইব্রেরি খোলে।
সেখানে ফাইলের নাম দিয়ে খোঁজা যায়, পুরোনো ফাইলের জন্য Load more, আর ফাইল টেনে এনে ছাড়লেই আপলোড — Drop images to upload। ছবিতে ক্লিক করে বাছুন, তারপর নিশ্চিত করুন। Remove ঘরটি আবার খালি করে।
ছবির তালিকা
স্লাইডার, ব্যানার আর logo strip ছবির তালিকা নেয়। প্রতিটি সারি একটি ছবি:
- থাম্বনেইল — ক্লিক করে ছবি বদলান
- লিংক, নয়তো No link
- 🔗 — ওই ছবির লিংক সম্পাদনা
- 🗑 — সরিয়ে দেয়
- ⠿ — টেনে ক্রম বদলান; এখানকার ক্রমই দোকানে দেখা যায়
Add image নতুন যোগ করে, একসঙ্গে একাধিক ফাইলও বাছা যায়।
লিংক
লিংক দুই অংশের — ধরন আর মান:
| ধরন | কী লিখবেন | উদাহরণ |
|---|---|---|
| Custom URL | পুরো ঠিকানা বা দোকানের ভেতরের পথ | https://… বা /summer-sale |
| Category | ক্যাটাগরির slug | mens-shoes |
| Brand | ব্র্যান্ডের slug | nike |
| Product | প্রোডাক্টের slug | red-cotton-shirt |
| Page | পেজের slug | about-us |
সেকশন নিজে লেখা না দিলে Link text (optional) ঘরটিও আসে।
প্রোডাক্ট
প্রোডাক্ট সেকশনে দুই ট্যাবের একটি কন্ট্রোল থাকে।
Pick products — ক্যাটালগে খুঁজে হাতে বেছে নিন। তালিকার ক্রমেই দোকানে দেখায়; টেনে ক্রম বদলানো যায়।
By rules — সেকশন নিজেই ভরে নেয়, আর ক্যাটালগ বদলালে নিজে থেকেই বদলায়:
- From categories — ক্যাটাগরি বাছুন, পাশের ছোট ঘরে প্রতি ক্যাটাগরিতে সর্বোচ্চ কয়টি দিন, আর Newest, Oldest বা Random বাছুন
- From brands — একইভাবে, ব্র্যান্ড ধরে
- Featured products only — কেবল featured চিহ্ন দেওয়া প্রোডাক্ট
- Fill with any products — নিয়মে যথেষ্ট না পেলে বাকিটা অন্য প্রোডাক্ট দিয়ে ভরে
- Limit — পুরো সেকশনের সর্বোচ্চ সংখ্যা
দুই ট্যাবেরই বাছাই জমা থাকে। আপনি যে ট্যাবে আছেন দোকান সেটিই ব্যবহার করে, তাই হাতে বাছা তালিকা আগে বানিয়ে পরে চালু করা যায়।
ক্যাটাগরি ও ব্র্যান্ড
ক্যাটাগরি বা ব্র্যান্ড দেখানো সেকশন আগে জিজ্ঞেস করে:
- All categories / All brands — সব, Maximum to show পর্যন্ত
- Pick specific — খোঁজার সুবিধাসহ বাছাই; তখন সীমা আর খাটে না
কিছু না দিলে, যাদের বাছাই আগে থেকে জমা আছে তারা সেটাই দেখায়, বাকিরা সব দেখায়।
বারবার আসা আইটেম
Testimonial, FAQ, service, stat, feature, pricing plan আর স্লাইডের স্লাইড — সবই repeater। প্রতিটি আইটেম একটি ভাঁজ করা কার্ড: শিরোনামে ক্লিক করে খুলুন, ⠿ দিয়ে টানুন, 🗑 দিয়ে মুছুন, আর নিচের Add … বোতামে নতুন যোগ করুন। কার্ডের নাম আইটেমের নিজের name বা title থেকেই আসে, তাই তালিকা পড়া যায়।
মেনু
হেডার ও ফুটারের মেনু এলিমেন্টে menu picker থাকে, যেখানে Menu Builder-এ বানানো মেনুগুলো দেখা যায়। দেখুন মেনু, হেডার ও ফুটার।
কোড
Custom HTML আর HTML Content Slider কোড ফিল্ড ব্যবহার করে। প্যানেলে প্রথম কয়েকটি লাইন আর লাইনসংখ্যা দেখায়; Edit code পুরো পর্দার সম্পাদক খোলে। (অন্য জায়গার Custom CSS ঘরগুলো সাধারণ টেক্সট এরিয়া, এই সম্পাদক নয়।)
HTML-এর জন্য দুই রকম মোড:
- Code — লাইন নম্বরসহ সত্যিকারের কোড সম্পাদক
- Visual — যা দেখা যাচ্ছে তাতেই সরাসরি লেখা: লেখা বদলান, বোল্ড, ইটালিক, আন্ডারলাইন, শিরোনাম, তালিকা ও লিংক দিন
দুটোই একই লেখায় কাজ করে, মোড বদলালে কাজ থেকে যায়। Apply সেকশনে বসায়; Cancel ফেলে দেয়। Apply না চাপলে কিছুই যায় না — এই বাক্স খোলা থাকলে বিল্ডার নিজে থেকে সেভ করে না।
প্রায় সব সেকশনের Layout কন্ট্রোল
| কন্ট্রোল | কী করে |
|---|---|
| Width | Boxed (container) মাঝের কলামে রাখে; Full width এক পাশ থেকে আরেক পাশে ছড়ায় |
| Font | এই সেকশনের আলাদা ফন্ট। Theme default মানে Appearance-এর সেটিং |
| Gap between items (px) | সেকশনের ভেতরের কার্ড, ছবি বা কলামের মধ্যে ফাঁক |
| Padding top / bottom / left / right (px) | সেকশনের ভেতরে, কনটেন্টের চারপাশে ফাঁক |
| Columns | ডেস্কটপে প্রতি সারিতে কয়টি |
Advanced-এর কন্ট্রোল
| কন্ট্রোল | কী করে |
|---|---|
| Background color | কেবল এই সেকশনের পেছনের রঙ |
| Background image | এই সেকশনের পেছনের ছবি |
| Custom CSS | আপনার নিজের CSS, কেবল এই সেকশনে |
| Hide on mobile | ফোনে সেকশনটি দেখানো হয় না |
| Hide on desktop | ডেস্কটপে সেকশনটি দেখানো হয় না |
Hide on mobile ও Hide on desktop সব ধরনের পেজে প্রতিটি সেকশনে নিজে থেকেই যোগ হয়। আলাদা মোবাইল পেজ না বানিয়ে ফোনে অন্য রকম সাজানোর উপায় এটাই।
প্রোডাক্ট কার্ডের অপশন
প্রোডাক্ট কার্ড দেখায় এমন প্রতিটি সেকশনে একই কার্ড কন্ট্রোল থাকে:
Content — Max products, Slider mode, Show add-to-cart, Show buy-now, Hide price, Show discount tag, Hide ratings, Hide brand, Hide quick view।
রঙ — কার্ডের ব্যাকগ্রাউন্ড ও বর্ডার, শিরোনাম, দাম, ছাড়ের দাম, add-to-cart-এর ব্যাকগ্রাউন্ড ও লেখা, buy-now-এর ব্যাকগ্রাউন্ড ও লেখা, ছাড়ের ট্যাগের ব্যাকগ্রাউন্ড ও লেখা।
সেকশন ধরে একবার ঠিক করে নিন। এতে প্রোডাক্ট বদলায় না, কেবল এখানে তার কার্ড দেখতে কেমন হবে তা বদলায়।
সেকশনে ভুল দেখালে
কিছু সেকশন খালি অবস্থায় দেখানো যায় না, আর তা বলেও দেয়: “Add at least one slide.”, “Heading text is required.”, “Add at least one product or selection rule.”
যতক্ষণ কোনো সেকশন এই অবস্থায় থাকে:
- সারিতে লাল ⚠ আর টুলবারে N to fix দেখায়
- Publish নিষ্ক্রিয় থাকে
- Save draft কাজ করে না: “Fix N section(s) before saving.”
যা বাদ আছে দিয়ে দিন, নয়তো সেকশনটি মুছুন। এই সময় নিজে থেকে সেভও বন্ধ থাকে, তাই ট্যাব বন্ধ করার আগে ঠিক করে নিন।