​ওয়েবসাইট ডেভেলপমেন্ট (পার্ট ৭): ওয়ার্ডপ্রেস কাস্টমাইজেশন ও এলিমেন্টর মাস্টারি কোডিং ছাড়াই তৈরি করুন প্রিমিয়াম ওয়েবসাইট

ব্লগার ও ওয়ার্ডপ্রেস সিরিজের সপ্তম পর্বে আপনাকে স্বাগতম! গত পর্বে আমরা ব্লগার থেকে ওয়ার্ডপ্রেসে মাইগ্রেশন এবং ডোমেইন-হোস্টিং সেটআপ শিখেছি। আজ আমরা শিখব ওয়ার্ডপ্রেসের সবথেকে শক্তিশালী এবং সৃজনশীল অংশ ডিজাইন ও কাস্টমাইজেশন।

​ওয়ার্ডপ্রেসের বিশেষত্ব হলো, এখানে আপনাকে কোনো কোডিং করতে হয় না। আপনি যদি মাউস দিয়ে কোনো কিছু ড্র্যাগ অ্যান্ড ড্রপ (টেনে এনে বসানো) করতে পারেন, তবে আপনিও পারবেন বিশ্বের সেরা মানের ওয়েবসাইট ডিজাইন করতে। আজকের এই মেগা গাইডে আমরা পরিচিত হব Elementor Page Builder-এর সাথে।

​ওয়েবসাইট ডেভেলপমেন্ট (পার্ট ৭): ওয়ার্ডপ্রেস কাস্টমাইজেশন ও এলিমেন্টর মাস্টারি কোডিং ছাড়াই তৈরি করুন প্রিমিয়াম ওয়েবসাইট

​লিখেছেন: টিম Daily Tech News

ওয়েবসাইট: Dailynewsepaper26.site

ওয়েবসাইট (ব্যাকআপ): Dailynewsepaper26.blogspot.com

​একটি সাধারণ ব্লগ আর একটি প্রিমিয়াম ওয়েবসাইটের মধ্যে পার্থক্য গড়ে দেয় তার ডিজাইন। ওয়ার্ডপ্রেসে ডিজাইন করার জন্য বর্তমানে সবথেকে জনপ্রিয় টুল হলো Elementor। এটি ব্যবহার করে আপনি একদম সাদা একটি পেজকে কয়েক মিনিটের মধ্যে একটি সুন্দর ল্যান্ডিং পেজ বা বিজনেস ওয়েবসাইটে রূপান্তর করতে পারেন।

​অধ্যায় ৫১: এলিমেন্টর (Elementor) কী এবং কেন এটি সেরা?

​এলিমেন্টর হলো একটি 'ভিজ্যুয়াল পেজ বিল্ডার'। এর মানে হলো, আপনি যখন ডিজাইন করবেন, তখন লাইভ দেখতে পাবেন আপনার সাইটটি কেমন দেখাচ্ছে।

​কেন এলিমেন্টর ব্যবহার করবেন?

• ​ড্র্যাগ অ্যান্ড ড্রপ: কোনো কোড ছাড়াই টেক্সট, ইমেজ বা বাটন টেনে এনে বসানো যায়।
• ​রেসপন্সিভ এডিটিং: পিসি, ট্যাবলেট এবং মোবাইলের জন্য আলাদাভাবে ডিজাইন চেক ও ঠিক করা যায়।
• ​প্রিমেড টেম্পলেট: এখানে শত শত আগে থেকে তৈরি করা ডিজাইন থাকে যা এক ক্লিকেই ব্যবহার করা সম্ভব।
• ​উইজেট লাইব্রেরি: স্লাইডার, কন্টাক্ট ফর্ম, ম্যাপ, আইকন বক্স সবই এক জায়গায় পাওয়া যায়।

​অধ্যায় ৫২: এলিমেন্টর ইনস্টল এবং বেসিক সেটআপ

​এলিমেন্টর ব্যবহার করতে হলে আপনার ওয়ার্ডপ্রেসে একটি থিম থাকতে হবে (যেমন: Astra বা Hello Elementor)। এরপর নিচের ধাপগুলো অনুসরণ করুন:

1. ​প্লাগইন ইনস্টল: ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Plugins > Add New এ যান।
2. ​সার্চ করুন: 'Elementor' লিখে সার্চ দিন এবং 'Install Now' করে 'Activate' করুন।
3. ​নতুন পেজ তৈরি: Pages > Add New এ গিয়ে একটি নাম দিন (যেমন: Home) এবং উপরে থাকা 'Edit with Elementor' বাটনে ক্লিক করুন।

​ব্যাস! এখন আপনার সামনে এলিমেন্টর এডিটর ওপেন হবে। বাম পাশে থাকবে সব উইজেট আর ডান পাশে আপনার ক্যানভাস।

​অধ্যায় ৫৩: সেকশন, কলাম এবং উইজেট ডিজাইনের মূল ভিত্তি

​এলিমেন্টরে ডিজাইন করার তিনটি স্তর রয়েছে:

১. Section (সেকশন): এটি হলো বড় একটি বক্স বা ধারক। আপনার সাইটের প্রতিটি অংশ (যেমন: হেডার, সার্ভিস, ফুটর) এক একটি সেকশন।

২. Column (কলাম): সেকশনের ভেতরে আপনি কয়টি ভাগ করতে চান? যেমন একপাশে ছবি এবং অন্যপাশে লেখা রাখতে চাইলে আপনাকে দুটি কলাম নিতে হবে।

৩. Widgets (উইজেট): কলামের ভেতরে আপনি কী রাখতে চান? সেটি হতে পারে একটি শিরোনাম (Heading), ছবি (Image) বা ভিডিও।

​অধ্যায় ৫৪: একটি প্রফেশনাল ল্যান্ডিং পেজ তৈরির ধাপসমূহ

​চলুন দেখি কীভাবে এলিমেন্টর দিয়ে একটি চমৎকার সেকশন তৈরি করবেন:

• ​ধাপ ১ (হিরো সেকশন): একটি নতুন সেকশন নিন। এর ব্যাকগ্রাউন্ডে একটি হাই-কোয়ালিটি ছবি দিন। উপরে একটি 'Heading' উইজেট টেনে এনে আপনার স্লোগান লিখুন। নিচে একটি 'Button' দিন।
• ​ধাপ ২ (স্টাইল পরিবর্তন): 'Style' ট্যাবে গিয়ে লেখার রঙ, ফন্ট (Google Fonts) এবং বাটনের হভার ইফেক্ট (মাউস নিলে রঙ বদলানো) ঠিক করুন।
• ​ধাপ ৩ (প্যাডিং ও মার্জিন): 'Advanced' ট্যাবে গিয়ে সেকশনের চারপাশে কিছু ফাঁকা জায়গা (Padding) দিন যাতে ডিজাইনটি ঘিঞ্জি মনে না হয়।

​অধ্যায় ৫৫: রেসপন্সিভ ডিজাইন মোবাইলের জন্য সাইট ঠিক করা

​২০২৬ সালে গুগলের প্রধান শর্ত হলো আপনার সাইটটি মোবাইলে নিখুঁত হতে হবে।

• ​পদ্ধতি: এলিমেন্টর এডিটরের নিচে বাম কোণায় একটি 'Responsive Mode' আইকন আছে। সেখানে ক্লিক করে 'Mobile' ভিউ সিলেক্ট করুন।
• ​এখন আপনি মোবাইলের জন্য আলাদাভাবে ফন্ট সাইজ ছোট করতে পারেন বা ছবি লুকিয়ে রাখতে পারেন যা পিসি ভার্সনে কোনো প্রভাব ফেলবে না।

​অধ্যায় ৫৬: থিম বিল্ডার (Theme Builder) এবং হেডার-ফুটার ডিজাইন

​এলিমেন্টর প্রো (Pro) ভার্সন ব্যবহার করলে আপনি পুরো ওয়েবসাইটের হেডার (মাথা) এবং ফুটার (পা) নিজের মতো করে ডিজাইন করতে পারেন।

• ​হেডার: এখানে আপনার লোগো এবং মেনু থাকবে। আপনি চাইলে হেডারটিকে 'Sticky' করে দিতে পারেন যাতে স্ক্রল করলে মেনুটি উপরে আটকে থাকে।
• ​ফুটার: এখানে প্রয়োজনীয় লিংক, সোশ্যাল মিডিয়া আইকন এবং কপিরাইট টেক্সট সুন্দর করে সাজাতে পারেন।

​অধ্যায় ৫৭: স্পিড অপ্টিমাইজেশন ডিজাইন যেন সাইট স্লো না করে

স্পিড অপ্টিমাইজেশন ডিজাইন যেন সাইট স্লো না করে

​অতিরিক্ত উইজেট এবং বড় সাইজের ছবি ব্যবহার করলে এলিমেন্টর সাইট স্লো হয়ে যেতে পারে।

• ​টিপস ১: ছবি ব্যবহারের আগে অবশ্যই সেটিকে অপ্টিমাইজ বা কম্প্রেস করে নিন (WebP ফরম্যাট সেরা)।
• ​টিপস ২: অপ্রয়োজনীয় প্লাগইন এবং উইজেট ডিলিট করুন।
• ​টিপস ৩: একটি ভালো ক্যাশ প্লাগইন (যেমন: LiteSpeed Cache) ব্যবহার করুন।

​অধ্যায় ৫৮: এলিমেন্টর অ্যাড-অনস (Add-ons) এর ব্যবহার

​এলিমেন্টরের ক্ষমতা আরও বাড়াতে অনেক থার্ড-পার্টি প্লাগইন পাওয়া যায়। যেমন: Essential Addons বা Happy Addons। এগুলো ব্যবহার করে আপনি সাইটে চমৎকার সব এনিমেশন, প্রাইসিং টেবিল এবং পার্টিকেল ইফেক্ট যোগ করতে পারেন।

​অধ্যায় ৫৯: ড্র্যাগ অ্যান্ড ড্রপ ডিজাইনের চাহিদা

​বর্তমানে ফ্রিল্যান্সিং মার্কেটপ্লেসে (Fiverr, Upwork) এলিমেন্টর দিয়ে ওয়েবসাইট বানানোর প্রচুর কাজ পাওয়া যায়। একটি সাধারণ ৫-পেজের এলিমেন্টর ওয়েবসাইট বানিয়ে আপনি ১০০ থেকে ৫০০ ডলার পর্যন্ত আয় করতে পারেন। যারা কোডিং শিখতে ভয় পান, তাদের জন্য এটি সোনার খনি।

​ডিজাইন হলো একটি ওয়েবসাইটের ভাষা। এলিমেন্টর সেই ভাষাকে সবার জন্য সহজ করে দিয়েছে। আজকের এই মেগা গাইডে আমরা জানলাম কীভাবে কোডিং ছাড়াই একটি প্রফেশনাল ওয়েবসাইট কাস্টমাইজ করা যায়। আপনি যত বেশি এলিমেন্টর প্র্যাকটিস করবেন, আপনার হাত তত বেশি পরিষ্কার হবে।

​আগামী পর্বে আমরা শিখব "ওয়ার্ডপ্রেস এসইও এবং গুগল র‍্যাঙ্কিং স্ট্র্যাটেজি" কীভাবে ইয়োস্ট (Yoast) বা র‍্যাঙ্ক ম্যাথ (Rank Math) ব্যবহার করে আপনার ওয়ার্ডপ্রেস সাইটকে গুগলের ১ নম্বর পজিশনে নিয়ে আসবেন।

​ধন্যবাদান্তে,

টিম Daily Tech News

ইউআরএল: Daily Tech News

ইউআরএল: Tech News 24

© ২০২৬ - আপনার আয়ের পথে বিশ্বস্ত সঙ্গী