🎯 এই পর্বে যা জানবে:
- Gutenberg Block Editor কী
- Elementor কীভাবে কাজ করে
- Elementor ইনস্টল ও প্রথম পেজ তৈরি
- সেকশন, কলাম ও উইজেট ব্যাখ্যা
- রেস্পনসিভ ডিজাইন সেটআপ
🧩 Gutenberg Block Editor পরিচিতি
WordPress 5.0 থেকে ডিফল্টভাবে যুক্ত হয় Gutenberg Block Editor,
যেটি এখন “Block Editor” নামে পরিচিত।
👉 এটি একটি “Block-Based” Page Builder —
মানে প্রতিটি কনটেন্ট (Text, Image, Button, Gallery) একেকটি ব্লক হিসেবে যুক্ত হয়।
📍 ব্যবহার করতে যাও:
Dashboard → Posts / Pages → Add New
✨ কিছু জনপ্রিয় Block:
- Paragraph Block
- Image / Gallery Block
- Heading Block
- List / Quote
- Button / Spacer / Columns
🧠 ব্লকগুলোর মাধ্যমে খুব সহজেই পেজ লেআউট তৈরি করা যায় —
কোনো কোড ছাড়াই!
⚡ Elementor কী?
Elementor হলো WordPress-এর সবচেয়ে জনপ্রিয় Visual Page Builder Plugin,
যেটি “Drag & Drop” সিস্টেমে কাজ করে।
অর্থাৎ তুমি কোড না লিখেই ওয়েবসাইট ডিজাইন করতে পারবে। 🎨
👉 ফ্রি + প্রো (পেইড) দুই ভার্সন আছে।
প্রো ভার্সনে WooCommerce, Popup, Form Builder ইত্যাদি ফিচার পাওয়া যায়।
⚙️ Elementor ইনস্টলেশন
১️⃣ Dashboard → Plugins → Add New
২️⃣ সার্চ দাও “Elementor”
৩️⃣ Install → Activate
তারপর Dashboard → Pages → Add New → “Edit with Elementor” ক্লিক করো
🧭 Elementor ইন্টারফেস পরিচিতি
Elementor ইন্টারফেসে সাধারণত ৩টি প্রধান অংশ থাকে 👇
| অংশ | কাজ |
|---|---|
| Left Panel | এখানে উইজেট ও সেটিংস থাকে |
| Canvas Area | যেখানে তুমি ডিজাইন করবে |
| Bottom Bar | Publish, Update, Preview অপশন থাকে |
🧱 সেকশন, কলাম ও উইজেট ব্যাখ্যা
🔹 Section
সবচেয়ে বড় লেআউট কন্টেইনার।
প্রতিটি সেকশনে এক বা একাধিক কলাম থাকে।
🔹 Column
সেকশনের ভিতরের ভাগ।
কলাম লেআউট তৈরি করে যেমন 1/2, 1/3, 1/4 ইত্যাদি।
🔹 Widget
মূল কনটেন্ট এলিমেন্ট যেমন:
- Heading
- Text Editor
- Image
- Button
- Icon Box
- Video
সবকিছু Drag করে Canvas-এ নিয়ে যাও আর ডিজাইন করো! 😎
🎨 Elementor দিয়ে প্রথম পেজ বানানো
১️⃣ Dashboard → Pages → Add New → Edit with Elementor
২️⃣ “+” আইকনে ক্লিক করে একটি Section যোগ করো
৩️⃣ Layout নির্বাচন করো (১ কলাম / ২ কলাম ইত্যাদি)
৪️⃣ Heading Widget টেনে আনো → টেক্সট লিখো
৫️⃣ Image Widget টেনে আনো → ছবি যোগ করো
৬️⃣ Button Widget টেনে আনো → “Learn More” দাও
৭️⃣ নিচে থেকে Publish করো ✅
📱 Responsive Design সেটআপ
Elementor-এ প্রতিটি এলিমেন্টের জন্য আলাদা ভিউ থাকে:
- Desktop
- Tablet
- Mobile
👉 নিচের Device Icon থেকে তুমি প্রতিটি স্ক্রিনে কাস্টম প্যাডিং, মার্জিন, ফন্ট, হাইট ঠিক করতে পারবে।
💡 টিপস:
✅ সবসময় “Global Font” ও “Global Color” ব্যবহার করো
✅ Responsive View Preview চেক করো
✅ Section Padding ও Column Gap ঠিক রাখো
✅ Elementor Template Library ব্যবহার করে সময় বাঁচাও
🧰 দরকারি Elementor Widgets:
- Heading
- Image
- Video
- Button
- Icon Box
- Testimonial
- Spacer
- Divider
- Form (Pro)
- Gallery (Pro)
🏁 সারসংক্ষেপ:
WordPress-এর Gutenberg Block Editor সহজ ও লাইটওয়েট;
আর Elementor হলো Visual Powerhouse 💪
দুটোই ওয়েবসাইট ডিজাইনের জন্য দারুণ —
তুমি চাইলে দুটোই ব্যবহার করতে পারবে একই প্রজেক্টে।
