বেশিরভাগ ব্যবসায়িক ওয়েবসাইটের জন্য কাস্টম ACF ব্লকই দীর্ঘমেয়াদে ভালো পছন্দ: পেজ দ্রুত লোড হয়, এডিটর ভুল করে ডিজাইন ভাঙতে পারেন না, আর পরে নতুন সেকশন যোগ করতে খরচ কম। Elementor বা Divi-এর মতো পেজ বিল্ডার ভালো, যখন কম বাজেটে খুব তাড়াতাড়ি লঞ্চ করতে হবে, অথবা একজন মানুষ পুরো ভিজ্যুয়াল স্বাধীনতা চান আর বাড়তি ওজনে তাঁর আপত্তি নেই।
আমি দুই ধরনের সাইটই বানাই, আর ধীর হয়ে যাওয়া বা বদলানো অসম্ভব হয়ে যাওয়া পেজ-বিল্ডার সাইট উদ্ধার করতে আমাকে নিয়মিত ডাকা হয়। এই লেখায় পার্থক্যটা সহজ করে বুঝিয়েছি, যাতে জেনেবুঝে বেছে নিতে পারেন।
মূল কথা
- ACF ব্লক হলো সহজ ফর্ম ফিল্ডসহ কাস্টম Gutenberg ব্লক, আপনার ডিজাইনের জন্যই বানানো। পেজ বিল্ডার হলো ড্র্যাগ-অ্যান্ড-ড্রপ এডিটর, যেখানে প্রতিটা পিক্সেল ডিজাইন করা যায়।
- ব্লক থিম সাধারণত অনেক কম CSS আর JavaScript লোড করে, তাই Core Web Vitals পাস করা সহজ হয়।
- ব্লকে এডিটর বদলান কনটেন্ট, ডিজাইন নয়, তাই যত মানুষই এডিট করুন সাইট একই রকম থাকে।
- পেজ বিল্ডারে শুরু করা সস্তা; দুই-তিন বছরের হিসাবে কাস্টম ব্লক সাধারণত রাখতে সস্তা।
- পরে পেজ বিল্ডার ছাড়তে হলে পেজগুলো নতুন করে বানাতে হয়। ব্লক সাধারণ WordPress-ই ব্যবহার করে।
ACF ব্লক আর পেজ বিল্ডারের পার্থক্য কী?
পেজ বিল্ডার
পেজ বিল্ডার (Elementor, Divi, WPBakery, Beaver Builder) WordPress-এর সাধারণ এডিটরের জায়গায় নিজের ভিজ্যুয়াল এডিটর বসায়। পেজে উইজেট টেনে আনেন, আর প্রতিটা জিনিসের ফন্ট, রং, স্পেসিং, অ্যানিমেশন আর রেসপন্সিভ নিয়ম ঠিক করেন। প্রতিটা পেজে সবকিছুই করা যায়।
ACF ব্লক
Advanced Custom Fields (ACF) Pro দিয়ে একজন ডেভেলপার WordPress ব্লক এডিটরের জন্য কাস্টম ব্লক বানাতে পারেন। প্রতিটা ব্লক আপনার ডিজাইনের একটা সেকশন: হিরো, সার্ভিসের গ্রিড, টেস্টিমোনিয়াল, প্রাইসিং টেবিল, FAQ। ব্লক যোগ করে সহজ কয়েকটা ফিল্ড পূরণ করেন: শিরোনাম, লেখা, ছবি, বাটনের লিংক। ডিজাইন ডেভেলপারের হাতে, কনটেন্ট আপনার হাতে।
তবু আপনি চোখে দেখেই পেজ বানান, ব্লকগুলো যেকোনো ক্রমে সাজিয়ে, আর লাইভ প্রিভিউও দেখেন। শুধু তাড়াহুড়োয় একটা শিরোনামের ফন্ট ৩৭ পিক্সেল করে দিতে পারেন না।
কোনটা দ্রুত: ACF ব্লক নাকি Elementor?
আসল সাইটে যত তুলনা করেছি, প্রায় সবগুলোতে কাস্টম ব্লক থিমই দ্রুত।
পেজ বিল্ডারকে সম্ভাব্য সব লেআউট সামলাতে হয়, তাই বড় বড় শেয়ার্ড CSS আর JavaScript ফাইল লোড করে, আর প্রতিটা জিনিসকে HTML-এর কয়েক স্তরে মুড়ে দেয়। কাস্টম থিমে থাকে শুধু আপনার ডিজাইনে ব্যবহৃত স্টাইল আর স্ক্রিপ্ট।
| সাধারণ পেজ বিল্ডার সাইট | সাধারণ কাস্টম ACF ব্লক সাইট | |
|---|---|---|
| পেজে লোড হওয়া CSS | কয়েকশো KB, প্রায়ই আরও বেশি | কয়েক দশক KB |
| JavaScript | বিল্ডার ফ্রেমওয়ার্ক + উইজেট + jQuery | ছোট স্ক্রিপ্ট, প্রায়ই jQuery ছাড়া |
| HTML কাঠামো | প্রতিটা জিনিসে অনেক স্তর | পরিষ্কার, অর্থবহ সেকশন |
| Core Web Vitals পাস | সাবধানে টিউন করলে সম্ভব | সাধারণত সহজ |
পেজ বিল্ডার আগের চেয়ে ভালো হয়েছে, আর ভালোভাবে টিউন করা Elementor সাইট Core Web Vitals পাস করতে পারে। কিন্তু শুরুই হয় বেশি ওজন নিয়ে, আর প্রতিটা নতুন উইজেট আরও যোগ করে।
আমার টিমের জন্য এডিট করা কোনটায় সহজ?
নির্ভর করে কে এডিট করছেন আর কী বদলাচ্ছেন।
পেজ বিল্ডার সহজ, যদি একজন মানুষ ডেভেলপার ছাড়াই নতুন লেআউট ডিজাইন করতে চান, আর সাবধানী হন।
ACF ব্লক সহজ বাকি সবার জন্য। এডিটর একশোটা স্টাইলের অপশনের বদলে ছোট একটা ফর্ম দেখেন: “Title”, “Text”, “Button”। ভুল করে ফন্ট, স্পেসিং বা মোবাইল লেআউট বদলাতে পারেন না। তিনজন মানুষ দুই বছর এডিট করলেও সাইট একই ব্র্যান্ডের মতোই দেখায়।
পেজ-বিল্ডার সাইট নিয়ে সবচেয়ে বেশি যে অভিযোগ শুনি, সেটা স্পিড নয়। সেটা হলো: “প্রতিটা পেজ একটু একটু আলাদা দেখায়, আর আমরা জানি না কেন।”
পেজ বিল্ডার কি SEO-র জন্য খারাপ?
সরাসরি নয়। Google পেজ-বিল্ডারের পেজ পড়তে পারে। SEO-র সমস্যাগুলো পরোক্ষ:
- স্পিড: ভারী পেজে Core Web Vitals পাস করা কঠিন।
- শিরোনামের কাঠামো: “দেখতে ঠিক লাগে” বলে H2 ব্যবহার করা সহজ, এতে পেজের কাঠামো নষ্ট হয়।
- ফোলা HTML: একই কনটেন্টে বেশি কোড।
ACF ব্লকে ডেভেলপার ঠিক করেন কোন ব্লকে কোন স্তরের শিরোনাম, পরিষ্কার HTML দেন, আর স্ট্রাকচার্ড ডেটা যোগ করতে পারেন। যেমন FAQ ব্লক থেকে আপনাআপনি তৈরি FAQ স্কিমা।
সময়ের সাথে খরচের তুলনা কেমন?
| পেজ বিল্ডার | কাস্টম ACF ব্লক | |
|---|---|---|
| প্রথমবার বানানো | কম | বেশি |
| প্লাগইন লাইসেন্স | বিল্ডার Pro + অ্যাড-অন, প্রতি বছর | ACF Pro, প্রতি বছর |
| নতুন পেজ যোগ | প্রায়ই নতুন করে ডিজাইন | আগের ব্লক সাজানো, কয়েক মিনিট |
| নতুন ধরনের সেকশন | উইজেট সেটআপ | ডেভেলপার নতুন ব্লক বানান |
| পরে স্পিড ঠিক করা | প্রায়ই লাগে | কদাচিৎ লাগে |
| ৩ বছর পর রিডিজাইন | সাধারণত পুরো নতুন | ব্লকের স্টাইল বদল, কনটেন্ট থাকে |
পেজ বিল্ডার সাইটে প্রথম মাসে খরচ প্রায়ই কম, কিন্তু দ্বিতীয় বা তৃতীয় বছরে বেশি।
আটকে যাওয়ার ঝুঁকি কতটা?
পেজ বিল্ডার ডিঅ্যাকটিভেট করলে পেজগুলো হয় শর্টকোডের জঞ্জাল হয়ে যায়, নয়তো লেআউটই হারায়। অন্য থিমে যেতে হলে প্রতিটা পেজ নতুন করে বানাতে হয়।
ACF ব্লক কনটেন্ট রাখে সাধারণ WordPress ব্লক ডেটা হিসেবে। থিম বদলালেও কনটেন্ট থাকে, আর নতুন ব্লকের সাথে মেলানো যায়। আপনি ACF Pro-র ওপর নির্ভর করছেন ঠিকই, তবে WordPress জগতে ACF সবচেয়ে বেশি ব্যবহৃত প্লাগইনগুলোর একটা।
কখন পেজ বিল্ডার বেছে নেবেন?
পেজ বিল্ডার ভালো মানায়, যখন:
- কয়েক দিনের মধ্যে সাইট লাইভ করতে হবে আর বাজেট খুব কম।
- একজন মানুষ নিজেই পেজ ডিজাইন করবেন, আর সেটা উপভোগ করেন।
- সাইটটা স্বল্পমেয়াদি ক্যাম্পেইন বা ইভেন্টের জন্য।
- পারফরম্যান্স “থাকলে ভালো”, জরুরি নয়।
কখন কাস্টম ACF ব্লক বেছে নেবেন?
কাস্টম ব্লক ভালো মানায়, যখন:
- ওয়েবসাইটটা আপনার ব্যবসার দীর্ঘমেয়াদি বিক্রির হাতিয়ার।
- কয়েকজন মানুষ কনটেন্ট এডিট করেন, আর ব্র্যান্ড একই রকম রাখতে হবে।
- স্পিড, SEO আর অ্যাক্সেসিবিলিটি গুরুত্বপূর্ণ।
- সময়ের সাথে অনেক পেজ যোগ করবেন: সার্ভিস, কেস স্টাডি, লোকেশন, ল্যান্ডিং পেজ।
- Figma-তে আপনার ঠিকঠাক ডিজাইন আছে, বা থাকবে।
কাস্টম ACF ব্লক সাইট বাস্তবে কীভাবে কাজ করে?
সাধারণ একটা প্রজেক্টে আমি:
- ডিজাইনকে সেকশনে ভাগ করি। ১২ পেজের ডিজাইনে হয়তো ১৫–২৫টা আলাদা সেকশন থাকে।
- প্রতিটা সেকশনকে ব্লক বানাই, পরিষ্কার ফিল্ড, স্পেসিংয়ের অপশন আর পেজের ভেতরের লিংকের জন্য অ্যাঙ্কর সহ।
- ফিল্ড গ্রুপ JSON-এ সেভ করি থিমের মধ্যে, যাতে কোডের সাথেই ভার্সন কন্ট্রোলে থাকে।
- পেজে এডিটরকে এই ব্লকগুলোতেই সীমিত রাখি, যাতে কেউ এলোমেলো লেআউট বসাতে না পারেন।
- আসল কনটেন্ট দিয়ে পেজ বানাই, আর ফোন, ট্যাবলেট ও ডেস্কটপে টেস্ট করি।
- ছোট একটা ভিডিও রেকর্ড করি, যাতে টিম জানে কোন কাজে কোন ব্লক।
ফল হলো এমন সাইট, যার প্রতিটা পেজই ডিজাইন করা লাগে, কারণ প্রতিটা পেজ ডিজাইন করা অংশ দিয়েই বানানো।
Elementor সাইট কি ACF ব্লকে বদলানো যায়?
হ্যাঁ। এটা আমার সবচেয়ে বেশি করা প্রজেক্টগুলোর একটা। প্রক্রিয়াটা হলো:
- বর্তমান পেজগুলোর সব আলাদা সেকশনের তালিকা করা।
- সেই সেকশনগুলো একই ধাঁচে ডিজাইন করা, বা গুছিয়ে নেওয়া।
- কাস্টম থিমে সেগুলোকে ACF ব্লক হিসেবে বানানো।
- নতুন ব্লকে পেজগুলো আবার বানানো, URL, শিরোনাম আর মেটা ডেসক্রিপশন একই রেখে।
- আগে-পরের স্পিড মেলানো, আর যা বদলাল তার রিডাইরেক্ট বসানো।
বেশিরভাগ ক্লায়েন্ট একই সাথে স্পিডের বড় উন্নতি আর সহজ এডিটিং পান।
ব্যবসায়িক সাইটের জন্য ভালো ব্লকের সেট কেমন হয়?
সাধারণ একটা সার্ভিস ব্যবসায় মানুষ যতটা ভাবেন তার চেয়ে কম ব্লক লাগে। শুরুর সাধারণ সেটটা এমন:
| ব্লক | কাজ | সাধারণ ফিল্ড |
|---|---|---|
| হিরো | হোম আর ক্যাম্পেইন পেজের ওপরে | শিরোনাম, লেখা, দুটো বাটন, ছবি, ব্যাজ |
| পেজ হেডার | ভেতরের পেজের ওপরে | আইব্রো, শিরোনাম, ভূমিকা, ব্রেডক্রাম্ব |
| সার্ভিস গ্রিড | লিংকসহ সার্ভিসের তালিকা | রিপিটার: আইকন, শিরোনাম, লেখা, তালিকা, লিংক |
| ফিচার / সুবিধা | আপনাকে কেন বেছে নেবে | রিপিটার: আইকন, শিরোনাম, লেখা |
| কেস স্টাডি | ফলাফল দেখানো | প্রজেক্ট বাছাই, বা সর্বশেষগুলো |
| টেস্টিমোনিয়াল | অন্যদের কথা | রিপিটার: উক্তি, নাম, প্রজেক্ট, তারিখ |
| প্রসেস | কীভাবে কাজ করেন | রিপিটার: ধাপের শিরোনাম, লেখা |
| FAQ | আপত্তির উত্তর আর SEO | রিপিটার: প্রশ্ন, উত্তর, স্কিমা চালু/বন্ধ |
| কল টু অ্যাকশন | প্রতিটা পেজের শেষে | শিরোনাম, লেখা, বাটন |
| কন্টাক্ট | লিড সংগ্রহ | ফর্মের শর্টকোড, যোগাযোগের তথ্য |
| রিচ টেক্সট | লম্বা লেখা | WYSIWYG, প্রস্থ |
ডজনখানেক ভালো ডিজাইনের ব্লক থাকলে একটা টিম ডেভেলপার ছাড়াই ব্যবসার প্রায় যেকোনো পেজ বানাতে পারে: সার্ভিস পেজ, ল্যান্ডিং পেজ, লোকেশন পেজ।
ব্লক-ভিত্তিক সাইটে এডিটরদের ভুল কীভাবে ঠেকাবেন?
ব্লক এমনিতেই পেজ বিল্ডারের চেয়ে নিরাপদ, তবে কয়েকটা বাড়তি নিয়ম কাজে দেয়:
- পেজে ব্লকের তালিকা সীমিত রাখুন, আপনার কাস্টম সেট আর সাধারণ টেক্সট ব্লকে। এডিটররা এলোমেলো লেআউট বসাতে পারবেন না।
- প্রতিটা ব্লকে যুক্তিসঙ্গত ডিফল্ট দিন, যাতে নতুন ব্লক পূরণ করার আগেই ঠিক দেখায়।
- এডিটরের ভেতরে পরিষ্কার লেবেল আর নির্দেশনা দিন: “হাইলাইট করতে শব্দটা em দিয়ে ঘিরুন”, “প্রতি লাইনে একটা আইটেম”।
- স্পেসিং আর ব্যাকগ্রাউন্ড তৈরি অপশনে দিন (Default, Soft, Dark), ইচ্ছামতো রং বাছার সুযোগ না রেখে।
- ফিল্ড গ্রুপ থিমে JSON হিসেবে রাখুন, যাতে ফিল্ডের পরিবর্তন কোডের মতোই ভার্সনে থাকে আর রিভিউ করা যায়।
এডিটরের ভেতরের পারফরম্যান্স?
অ্যাডমিন কতটা দ্রুত লাগে, সেটাও এডিটরদের কাছে জরুরি। ACF ব্লক সার্ভারে প্রিভিউ বানায়, সাধারণ ব্লকে যা দ্রুত। ম্যাপ, স্লাইডার, লম্বা কোয়েরি লুপের মতো ভারী ব্লকে এডিটরে পুরো আউটপুটের বদলে হালকা একটা প্লেসহোল্ডার দেখান। এডিটর সাথে সাথে সাড়া পান, আর লাইভ পেজে আসল জিনিসটাই দেখায়।
পেজ বিল্ডার আর ব্লক রেসপন্সিভ ডিজাইন কীভাবে সামলায়?
পেজ বিল্ডারে প্রতিটা জিনিসের ডেস্কটপ, ট্যাবলেট আর মোবাইলের আলাদা সেটিং থাকতে পারে। এটা শক্তিশালী, কিন্তু ভুল করার জায়গাও তিন গুণ। ডেস্কটপে ঠিক দেখানো পেজ প্রায়ই ফোনে ভেঙে যায়।
কাস্টম ব্লকে ডেভেলপার রেসপন্সিভ আচরণ একবারই ডিজাইন করেন, স্টাইলশিটে। ব্লকটা যেখানেই থাকুক, প্রতিটা স্ক্রিনে একইভাবে চলে। এডিটরদের ব্রেকপয়েন্ট নিয়ে ভাবতেই হয় না: তাঁরা লেখেন, লেআউট মানিয়ে নেয়।
প্রশ্নোত্তর
সাধারণ প্রশ্নের উত্তর
ACF Pro কি ফ্রি?
ACF-এর একটা ফ্রি ভার্সন আছে, কিন্তু ACF Blocks-এর জন্য ACF Pro লাগে, যেটা পেইড, বছরে বছরে লাইসেন্স। এক সাইটের জন্য খরচ বেশিরভাগ পেজ বিল্ডারের Pro লাইসেন্সের চেয়ে কম।
ACF ব্লকে কি চোখে দেখে পেজ এডিট করা যায়?
হ্যাঁ। সাধারণ WordPress ব্লক এডিটরে এডিট করেন, আর প্রতিটা ব্লকের লাইভ প্রিভিউ দেখেন। স্টাইলের কন্ট্রোল না টেনে সহজ ফিল্ডে কনটেন্ট বদলান।
Gutenberg আর ACF ব্লক কি একই জিনিস?
Gutenberg হলো WordPress-এর ব্লক এডিটর। ACF ব্লক হলো সেই এডিটরের ভেতরের কাস্টম ব্লক, যা ডেভেলপার ACF Pro দিয়ে বানান। Gutenberg-এর core ব্লক আর ACF ব্লক একসাথে ব্যবহার করা যায়।
Elementor থেকে ACF ব্লকে গেলে কি SEO-র ক্ষতি হবে?
মাইগ্রেশনে URL, শিরোনাম, মেটা ডেসক্রিপশন আর কনটেন্ট একই রাখলে হবে না। দ্রুত পেজ আর পরিষ্কার HTML সাধারণত SEO-তে সাহায্যই করে।
কাস্টম ACF ব্লক থিম বানাতে কত সময় লাগে?
১৫–২৫টা ব্লকের সাধারণ ব্যবসায়িক সাইটে দুই থেকে পাঁচ সপ্তাহ, ডিজাইন আর কনটেন্ট কতটা তৈরি তার ওপর নির্ভর করে।
ACF ব্লকে বানানো দ্রুত, সহজে এডিট করার মতো WordPress সাইট চাইলে আমার কাস্টম WordPress ডেভেলপমেন্ট সার্ভিস দেখুন অথবা Upwork-এ হায়ার করুন।
প্রজেক্টের কথা ভাবছেন?
Upwork-এ আপনার জবে ইনভাইট করুন বা সরাসরি হায়ার করুন — সেখানেই বিস্তারিত আলাপ করব। সাধারণত কয়েক ঘণ্টার মধ্যেই উত্তর দিই।
Upwork-এ হায়ার করুন
