29/09/2025
যারা যারা ওয়েব ডেভেলপার বা হওয়ার জন্য কিছু টিপস খুঁজতেছেন, তাদের জন্য খুবই গুরুত্বপূর্ণ তথ্য শেয়ার করলাম।
Elementor (Free) ও Elementor Pro-এর প্রতিটি প্রধান widget-এর বিস্তৃত ব্যাখ্যা দিলাম — প্রতিটা widget-এ কি করা যায়, কোন সেটিং আছে, প্রয়োগের সাধারণ উদাহরণ ও টিপস সংক্ষেপে। আমি চেষ্টা করেছি সংক্ষিপ্ত কিন্তু পরিষ্কার রাখার জন্য — যদি পরবর্তী ধাপে কোনো widget নিয়ে আরও গভীর টিউটোরিয়াল/স্টেপ-বাই-স্টেপ চান, বলেই দিন। 🚀
Elementor (Free) — Widgets ও তাদের কাজ (বিস্তারিত, প্রতিটি ২–৩ লাইন)
> প্রতিটি widget-এ সাধারণত তিনটা ট্যাব থাকে: Content, Style, Advanced — Content-এ মূল কনটেন্ট, Style-এ ডিজাইন/টাইপোগ্রাফি/রং, Advanced-এ মার্জিন, রেসপন্সিভ, অ্যানিমেশন, কাস্টম CSS ইত্যাদি।
1. Inner Section
কাজে: সেকশনের ভিতরে নতুন কলাম গ্রুপ তৈরি করে; কলাম ভাগ/নেস্টিং করার জন্য।
ব্যবহার: জটিল গ্রিড লেআউট (যেমন ভিতরে আরও 2-3 কলাম) তৈরিতে।
টিপ: রেসপন্সিভে কলাম অর্ডার ও ব্রেকপয়েন্ট ঠিক করুন।
2. Heading
কাজে: H1–H6 টাইপ শিরোনাম বসায়। টেক্সট, ট্যাগ (H1/H2…), অ্যালাইনমেন্ট কন্ট্রোল।
টিপ: সার্চ ইঞ্জিন ও অקסেসিবিলিটির জন্য সঠিক H-ট্যাগ ব্যবহার করুন।
3. Image
কাজে: ছবি দেখানো; লিঙ্ক, ক্যাপশন, কভার/ফিট অপশন।
টিপ: ছবি সাইজ ও lazy-load ব্যবহার করুন পারফরম্যান্সের জন্য।
4. Text Editor
কাজে: রিচ টেক্সট/প্যারাগ্রাফ (WYSIWYG) — লিস্ট, লিংক, বোল্ড ইত্যাদি।
টিপ: বড় লেখা ব্লক থাকলে প্যারা-ব্রেক ঠিক রাখুন; typography থেকে line-height দিন।
5. Video
কাজে: YouTube, Vimeo, Self-hosted এমবেড; প্লেয়ারের অটোপ্লে, লুপ, প্লে-আইকন কন্ট্রোল।
টিপ: অটোপ্লে হলে সচেতন থাকবেন (স্মার্টফোনে মিউট প্রয়োজন হতে পারে)।
6. Button
কাজে: কাস্টম বাটন (লিঙ্ক, টার্গেট, আইকন)।
টিপ: হোভার স্টাইল, বর্ডার-রেডিয়াস, প্যাডিং—সব Style ট্যাবেই; CTA স্পষ্ট রাখুন।
7. Divider
কাজে: সেকশন বা উপাদানের মধ্যে লাইন/বাঁক-ডিভাইডার।
টিপ: স্টাইল দিয়ে পাতলা/মোটা/ড্যাশড করা যায়।
8. Spacer
কাজে: কেবল ফাঁকা জায়গা যোগ করে (স্পেস কন্ট্রোল)।
টিপ: প্যাডিং/মার্জিন কন্ট্রোলের সহজ বিকল্প; রেসপন্সিভ ভেবেই ব্যবহার করুন।
9. Google Maps
কাজে: ঠিকানা বা লোকেশন এমবেড করা; API কনফিগারেশন দরকার।
টিপ: API কী ও billing ঠিক আছে কিনা চেক করুন (ওয়ার্ডপ্রেস সাইটে)।
10. Icon
কাজে: একক আইকন দেখায় (লাইব্রেরি থেকে নির্বাচন)।
টিপ: আইকনকে বাটন বা লিংকের সাথে ব্যবহার করলে ব্যবহারকারীর ইন্টারঅ্যাকশন বাড়ে।
11. Image Box
কাজে: ছবি + টাইটেল + সাবটেক্সট একসাথে; কার্ড-স্টাইল কন্টেন্ট।
টিপ: সার্ভিস/ফিচার লিস্ট দেখাতে উপযুক্ত।
12. Icon Box
কাজে: আইকন + শিরোনাম + টেক্সট — ফিচার/সেবা উপস্থাপন।
টিপ: আইকন-টেক্সট সম্পর্ক সংক্ষিপ্ত রাখুন।
13. Star Rating
কাজে: ১–৫ স্টার রেটিং দেখায় (স্ট্যাটিক)।
টিপ: রেটিং ডাইনামিক করতে Pro বা রিভিউ প্লাগইন ব্যবহার করুন।
14. Image Gallery
কাজে: গ্রিড স্টাইল ইমেজ গ্যালারি।
টিপ: লাইটবক্স অন করলে ক্লিক-ইন ভিউ পাওয়া যায়; থাম্বনেইল ঠিক রাখুন।
15. Image Carousel
কাজে: স্লাইডিং ইমেজ কারোসেল। অটোপ্লে, স্পিড, নেভিগেশন কন্ট্রোল।
টিপ: অটোপ্লে ও কনট্রোল ব্যালান্স রাখুন—উপযুক্ত lazy-load ব্যবহার করুন।
16. Icon List
কাজে: আইকনসহ লিস্ট (প্রতিটি লাইনে আইকন + টেক্সট)।
টিপ: ফিচার লিস্ট/বিলেট পয়েন্টে ক্লিয়ার ভিজ্যুয়াল হায়ারার্কি দেয়।
17. Counter
কাজে: নম্বর কাউন্ট-আপ অ্যানিমেশন (0 থেকে লক্ষ্য সংখ্যায়)।
টিপ: কনভারশন মেট্রিক দেখাতে ভালো; অ্যানিমেশন স্লো হলে ইউজার বিরক্ত হতে পারে—মোডারেট রাখুন।
18. Progress Bar
কাজে: শতাংশ ভিত্তিক progress/skill bar দেখায়।
টিপ:অনেক বাড়তি অ্যানিমেশন যোগ না করলে আধুনিক লাগে।
19. Testimonial
কাজে: কাস্টমার রিভিউ/টেস্টিমোনিয়াল ব্লক। ছবি, নাম, টেক্সট।
টিপ: কারোসেল মোড দিলে জায়গা বাঁচে; সত্যিকারের রিভিউ দিন (বিশ্বাসযোগ্যতা বাড়ে)।
20. Tabs
কাজে: ট্যাবভাবে কনটেন্ট ভাগ করা (UI-tab)।
টিপ: মোবাইলে ট্যাবগুলি প্রায়ই অ্যাকর্ডিয়নে রূপ নেয় — চেক করুন।
21. Accordion
কাজে: একাধিক ফোল্ডেবল আইটেম — FAQ-এর জন্য আদর্শ।
টিপ: এক্সপ্যান্ড-অনলি ওয়ান অপশন রাখলে ইউজার বিভ্রান্তি কমে।
22. Toggle
কাজে: একপ্রকার অ্যাকর্ডিয়ন, টগল স্টাইল এক্সপ্যান্ড/ক্লোজ।
টিপ: FAQ বা বিস্তারিত দেখানোর জন্য ব্যবহার করুন।
23. Social Icons
কাজে: সোশ্যাল লিংক আইকন সেট (FB, IG, Twitter ইত্যাদি)।
টিপ: ইউজারকে নতুন ট্যাবে লিংক করা ভালো (noopener noreferrer ব্যবহার করুন)।
24. Alert
কাজে: নোটিশ/স্ট্যাটাস বার (ইনফো/ওয়ার্নিং/সাকসেস) দেখায়।
টিপ: প্রমো/সাইট-আওয়ার্ডিং বার লাগাতে ব্যবহার করুন; কনট্রাস্ট ঠিক রাখুন।
25. HTML
কাজে: কাস্টম HTML/JS/CSS বসাতে (যা Elementor UI থেকে সম্ভব না)।
টিপ: নিরাপত্তা জীবনে XSS সাবধানতা; কাস্টম কোড টেস্ট করে নিন।
26. Shortcode
কাজে: WordPress শর্টকোড এমবেড করা।
টিপ: কাস্টম প্লাগইন বা ফর্ম শর্টকোড দেখাতে কাজে লাগে।
27. Menu Anchor
কাজে: পেজ-ভিতরে জাম্প লিঙ্কের অ্যাংকর পয়েন্ট তৈরি করে।
টিপ: ওয়ান-পেজ লেআউটে অবশ্যই দরকার; Nav-menu-এর লিঙ্ক অ্যাংকর-এর সঙ্গে মিলান।
28. Sidebar
কাজে: ওয়ার্ডপ্রেস সাইডবার/উইজেট এরিয়া দেখায়।
টিপ: থিম-বেইজড উইজেটগুলোর জন্য উপযোগী; Pro হলে আরও কাস্টমাইজেশন পেতে পারেন।
---
Elementor Pro — Widgets ও তাদের কাজ (বিস্তারিত, প্রতিটি ২–৩ লাইন)
> Pro widgets-এ dynamic content, theme builder এবং integrations যোগ করা থাকে — এগুলো দিয়ে পুরো থিম (header/footer/post template) বানানো যায়।
1. Site Logo
কাজে: সাইটের লোগো (dynamic) দেখায়; বিভিন্ন সাইটে স্বয়ংক্রিয়ভাবে লোড হয়।
টিপ: স্বচ্ছ ব্যাকগ্রাউন্ড ও রেসপন্সিভ সাইজ দিন।
2. Site Title
কাজে: সাইটের নাম (dynamic) দেখায়; লিংকসহ হোমে পাঠায়।
টিপ: হেডারে ছোট টেক্সট ব্যবহার করলে সাইট ব্র্যান্ডিং ধরে রাখে।
3. Page Title
কাজে: বর্তমানে দেখা পেজ/পোস্টের টাইটেল ডাইনামিকভাবে দেখায় (Template-এ কাজে লাগে)।
টিপ: পোস্ট টেমপ্লেটে H1 হিসেবে ব্যবহার করুন (SEO বিবেচনা করে)।
4. Nav Menu
কাজে: কাস্টম মেনু (প্রধান নেভিগেশন) তৈরি করা; responsive/hamburger অপশন।
টিপ: মেনু ব্রেকপয়েন্ট ও স্টিকি সেটিংস টেস্ট করতে ভুলবেন না।
5. Search Form
কাজে: কনফিগারেবল সার্চ বার; placeholder, show results page নির্ধারণ।
টিপ: AJAX সার্চ চাইলে সামঞ্জস্যপূর্ণ প্লাগইন/রিসোর্স ব্যবহার করুন।
6. Author Box
কাজে: পোস্ট-লেখকের তথ্য (ছবি, নাম, বায়ো, সোশ্যাল) দেখায়।
টিপ: ব্লগ পোস্টে কনভার্সেশন বাড়াতে ব্যবহার করুন।
7. Post Title
কাজে: পোস্টের টাইটেল ডাইনামিকভাবে দেখায় (Theme Builder template এ)।
টিপ: SEO-friendly H-tag সেট করুন।
8. Post Content
কাজে: পোস্টের মূল কনটেন্ট ডাইনামিকভাবে টেনে আনে (single post template)।
টিপ: Advanced-এ কাস্টম CSS বা ইনলাইন স্টাইল প্রয়োগ করতে পারেন।
9. Post Excerpt
কাজে: পোস্টের_excerpt বা স্বয়ংক্রিয় সারাংশ দেখায় (archive/loop)।
টিপ: প্রিভিউ/আরকাইভ পেজে ব্যবহৃত হয়; length control দিয়ে ছোট করে দিন।
10. Featured Image
কাজে: পোস্ট/প্রোডাক্টের ফিচারড ইমেজ ডাইনামিকভাবে দেখায়।
টিপ: image size ও fallback কনফিগার করুন যদি কোনো পোস্টে ইমেজ না থাকে।
11. Post Info
কাজে: পোস্ট-মেটা (লেখক, তারিখ, ক্যাটাগরি, কমেন্ট) দেখায়।
টিপ: প্রয়োজন মতো আইটেম অন/অফ করুন; schema-friendliness টিপস মেনে চলুন।
12. Archive Title / Archive Posts
কাজে: ক্যাটাগরি/ট্যাগ/আর্কাইভ পেজের টাইটেল ও লিস্টিং (loop) দেখায়।
টিপ: pagination ও query control ব্যবহার করে কাস্টম আর্কাইভ বানান।
13. Portfolio / Posts
কাজে: পোস্ট/কাস্টম পোস্ট টাইপ গ্রিড/মেসোনারি লেআউট দেখায়; query filter আছে।
টিপ: পেজিনেশন, লোড মোড (ইনফিনিটি/Load more) ব্যবহার করুন UX-এর জন্য।
14. Slides
কাজে: হিরো/স্লাইডশো তৈরি; কাস্টম কন্টেন্ট, অ্যানিমেশন, ব্যাকগ্রাউন্ড ভিডিও/ইমেজ।
টিপ: স্লাইডে CTA রাখলে কনভারশন বাড়ে; অ্যানিমেশন স্লো রাখুন।
15. Form
কাজে: ভিজ্যুয়াল ফর্ম বিল্ডার (ইমেল, টেলিফোন, ড্রপডাউন, কনডিশনাল লজিক, স্টেপ ফর্ম)।
ইন্টিগ্রেশন: Mailchimp, ActiveCampaign, HubSpot, Zapier, Webhook ইত্যাদি।
টিপ: সাবমিশন–অ্যাকশন (ইমেইল, রিডাইরেক্ট, মেসেজ, ওয়েবহুক) কনফিগার করুন; spam prevention(ReCAPTCHA) ব্যবহার করুন।
16. Call to Action
কাজে: হাইলাইটেড CTA ব্লক (টাইটেল, সাবটেক্সট, বাটন) — ল্যান্ডিং পেজে কাজে লাগে।
টিপ: ভিজ্যুয়াল কনট্রাস্ট ও স্পেসিং ঠিক রাখুন।
17. Price List / Price Table
কাজে: সার্ভিস/মেনু প্রাইসিং লিস্ট বা সারণি; itemize সুবিধা।
টিপ: প্রাইস টেবিলে বাটন যোগ করে সাবস্ক্রিপশন/কার্ট পেজে পাঠান।
18. Flip Box
কাজে: হোভার করলে কনটেন্ট ফ্লিপ করে পেছনের কনটেন্ট দেখায় — ইন্টার্যাকটিভ কার্ড।
টিপ: সার্ভিস প্রদর্শনে ইউজারকে আগ্রহ জাগায়।
19. Media Carousel / Testimonial Carousel
কাজে: মিডিয়া বা টেস্টিমোনিয়াল স্লাইডের জন্য উন্নত কারোসেল কন্ট্রোল।
টিপ: স্পিড, অ্যাকসেসিবিলিটি ও নেভিগেশন কাস্টমাইজ করুন।
20. Facebook Embed Widgets
কাজে: FB posts, comments, page embeds (embed code/official integration)।
টিপ: প্রাইভেসি ও CORS বিবেচনা করে ব্যবহার করুন।
21. Countdown
কাজে: টাইমার/কাউন্টডাউনের মাধ্যমে ক্যান্টেড অফার বা ইভেন্ট দেখায়।
টিপ: ইউজার-টাইমজোন খেয়াল করে ডেডলাইন দিন।
22. Reviews
কাজে: Yelp/Google/Custom রিভিউ দেখাতে সাহায্য (কোথাও ইন্টেগ্রেশন দরকার)।
টিপ: রিভিউ-সোর্স যাচাই করুন; schema রিচ রেজাল্টের জন্য Markup বিবেচনা করুন।
23. Lottie Animation
কাজে: JSON-format লোটি অ্যানিমেশন এমবেড করে; স্ক্রল/হোভার ট্রিগার করা যায়।
টিপ: ফাইল সাইজ ছোট রাখুন; অ্যানিমেশন-রেট কন্ট্রোল করুন।
24. Hotspot
কাজে: ছবির উপর ইন্টারঅ্যাকটিভ মার্কার/পপআপ দেখায় (প্রোডাক্ট ডিসপ্লে ইত্যাদি)।
টিপ: মার্কারগুলো মোবাইলে টাচ-ফ্রেন্ডলি রাখুন।
25. WooCommerce Widgets (Products, Product Categories, Add to Cart, Product Price, Product Rating, Checkout/Cart/My Account)
কাজে: প্রোডাক্ট গ্রিড, সিঙ্গেল প্রোডাক্ট এলিমেন্ট (প্রাইস, বাটন, রেটিং), কার্ট/চেকআউট পেজ ডিজাইন ইত্যাদি।
টিপ: প্রোডাক্ট টেমপ্লেট বানিয়ে কাস্টম শপ পেজ তৈরি করুন; AJAX add-to-cart ব্যবহার করে UX উন্নত করুন।
26. Reviews (Shopify/Third-party integrations)
কাজে: তৃতীয়-পক্ষ রিভিউ ইন্সট্যান্স ইম্পোর্ট/শো করতে পারে (প্লাগইন নির্ভর)।
টিপ: উৎস বিশুদ্ধ কিনা নিশ্চিত করুন; রিচ রিজাল্ট স্কিমা প্রয়োগ করুন।
27. Login / User Profile Widgets (Pro)
কাজে: কাস্টম লগইন/রেজিস্ট্রেশন ফর্ম ও প্রোফাইল পেজ ডিজাইন করা যায়।
টিপ: রিডাইরেক্ট ও নন-লগেড-ইন কন্ডিশন ঠিক করুন।
28. Template / Global Widget
কাজে: একবার বানিয়ে অন্য পেজে পুনরায় ব্যবহার করার জন্য টেমপ্লেট বা global widget সংরক্ষণ।
টিপ: Global widget পরিবর্তন করলে সব জায়গায় আপডেট হবে — সাবধানতার সাথে ব্যবহার করুন।
29. Display Conditions (Theme Builder)
কাজে: কোন টেমপ্লেট কোন পেজ/ক্যাটাগরিতে দেখাবে তা কনফিগার করে (e.g., header দেখাবে সব পেজেই, কিন্তু ব্লগ-হোম-এ না)।
টিপ: কন্ডিশন মিশিয়ে (include/exclude) নির্দিষ্ট পেজ-কম্বিনেশন তৈরি করা যায়।
30. Dynamic Tags & Custom Fields
কাজে: ACF/Pods/Meta field থেকে ডেটা টেনে কোনো টেক্সট/ইমেজ/লিংক-ফিল্ডে ডাইনামিকভাবে দেখানো যায়।
টিপ: ডাইনামিক ট্যাগ আইকন ক্লিক করে প্রাসঙ্গিক ফিল্ড সিলেক্ট করুন; fallback value দিন যাতে empty data হলে ভেঙে না যায়।
---
সাধারণ ব্যবহারিক টিপস, বেস্ট-প্র্যাকটিস ও সমস্যার সমাধান
1. Global Colors & Typography ব্যবহার করুন
— সাইটওয়াইড consistency রাখে; পরে পরিবর্তন করলে সব জায়গায় আপডেট হয়।
2. Responsive Mode সবসময় চেক করুন
— Desktop/Tablet/Mobile ভিউতে margin/padding/visibility (Show/Hide) কনফিগার করুন।
3. Dynamic Content (Pro) দিয়ে থিম বানান
— Header, Footer, Single Post, Archive Template বানাতে Theme Builder ব্যবহার করুন; এতে থিম-লেভেল কাস্টমাইজেশন সহজ হয়।
4. Performance
অপ্রয়োজনীয় widget/থার্ড-পার্টি স্ক্রিপ্ট কমান।
ছবি অপ্টিমাইজ করুন (WebP, lazy-load)।
ক্যাশিং প্লাগইন ও CDN ব্যবহার করুন।
5. Forms Integrations
সংযুক্তি আগে টেস্ট করুন (ইমেইল, Zapier, Webhook)।
ReCAPTCHA/ Honeypot দিয়ে spam কমান।
6. Global Widget & Templates ব্যবহারে সাবধানতা
যদি একটা Global widget একাধিক জায়গায় ব্যবহার করেন, পরিবর্তন করলে সব জায়গায় বদল হবে — বড় সাইটে অপারেশনাল ঝুঁকি থাকলে কপি করে নতুন টেমপ্লেট ব্যবহার করুন।
7. Custom CSS/HTML
HTML widget বা CSS ব্যবহার করলে W3C/ব্রাউজার কম্প্যাটিবিলিটি খেয়াল রাখুন; নিরাপত্তা (XSS) সন্মান করুন।
8. WooCommerce
Pro widgets দিয়ে প্রোডাক্ট টেমপ্লেট বানালে শপে ইউনিফর্ম লেআউট পাওয়া যায়; single product elements (price, gallery, add to cart) আলাদাভাবে কাস্টমাইজ করুন।
9. Accessibility
alt text, ARIA attributes, proper heading hierarchy রাখুন; বাটন ও লিংক-টেক্সটে স্পষ্ট CTA রাখুন।
10. Debugging Tools
Finder (Ctrl/Cmd+E), Navigator, Revision History ব্যবহার করে দ্রুত নেভিগেশন ও rollback করুন।
---
কিছু সাধারণ “কীভাবে” (Quick recipes)
1. কাস্টম Header বানানো (Theme Builder)
Theme Builder → Add New → Header → drag Nav Menu + Site Logo + Search → Style → Display Condition = Entire Site → Publish।
2. Single Post Template বানানো
Theme Builder → Single → Add Template → Drag Post Title + Post Content + Featured Image + Author Box + Post Info → Set Display Condition (All Posts or category-wise) → Publish।
3. কন্টাক্ট ফর্ম তৈরি ও ইমেইল সেটিং
Form widget টেনে ফিল্ড যোগ → Actions After Submit = Email → Recipient/Subject কনফিগার → Test করে নিশ্চিত করুন যে মেইল পৌঁছে।
4. WooCommerce Single Product কাস্টম টেমপ্লেট
Theme Builder → Single Product → Add → Drag Product Title, Product Image, Price, Add to Cart, Tabs → Publish (Display = All Products or specific categories)।
আশা করি সবাই এই পেজটাকে ফলো করবেন নিয়মিত আপডেট তত্ত্ব পাওয়ার জন্য।
