Webflow Designer কী?
সহজ কথায় বলতে গেলে, Webflow Designer হলো এমন একটি ক্যানভাস বা ডিজিটাল ওয়ার্কশপ, যেখানে বসে আপনি আপনার ওয়েবসাইটের মূল ডিজাইনটি তৈরি করেন। এটি মূলত আপনার ব্রাউজারের ভেতরেই চলা একটি শক্তিশালী ভিজ্যুয়াল এডিটর।
অন্যান্য সাধারণ ওয়েবসাইট বিল্ডারের সাথে এর পার্থক্য হলো—এখানে আপনি যা কিছু ড্র্যাগ অ্যান্ড ড্রপ করছেন বা সিলেক্ট করছেন, ব্যাগ্রাউন্ডে Webflow ঠিক একজন প্রফেশনাল ওয়েব ডেভেলপারের মতো বিশুদ্ধ HTML, CSS এবং JavaScript কোড লিখছে। অর্থাৎ, আপনি কোড না লিখেও একদম কোডারদের মতোই নিখুঁত নিয়ন্ত্রণ পাচ্ছেন।
Designer কোথা থেকে Open করবেন?
ইন্টারফেসটি খোলার নিয়ম একদম সহজ:
- প্রথমে আপনার Webflow Dashboard-এ লগইন করুন।
- আপনার তৈরি করা প্রজেক্টের ওপর মাউস হোভার (Hover) করুন।
- সেখানে থাকা “Open Designer” বাটনে ক্লিক করুন।
কয়েক সেকেন্ড লোডিং নেওয়ার পরেই আপনার সামনে মূল ডিজাইনার ইন্টারফেসটি চালু হয়ে যাবে।
Webflow Designer Interface-এর Overview
সমগ্র ইন্টারফেসটিকে আমরা মূলত ৫টি প্রধান অঞ্চলে ভাগ করতে পারি। পুরো ক্লাসে আমরা এই ৫টি অঞ্চল নিয়েই বিস্তারিত কথা বলব:
- Left Toolbar (বাম পাশের টুলবার): কনটেন্ট যুক্ত করা ও স্ট্রাকচার দেখার জায়গা।
- Canvas Area (মাঝখানের ক্যানভাস): যেখানে আপনার ওয়েবসাইটটি বাস্তবে রূপ নেয়।
- Top Toolbar (উপরের বার): রেসপন্সিভ ভিউ এবং প্রিভিউ দেখার জায়গা।
- Right Sidebar (ডান পাশের সাইডবার): স্টাইলিং ও সেটিংসের মূল কেন্দ্র।
- Bottom Panel (নিচের প্যানেল): ব্রেডক্রাম্ব ও নেভিগেশন ট্র্যাকিং।
চলুন, এবার প্রতিটি অংশ গভীরভাবে পর্যবেক্ষণ করি।
Left Toolbar (বাম পাশের টুলবার)
আপনার স্ক্রিনের সুদূর বাম দিকে তাকালে দেখতে পাবেন একটি চিকন টুলবার দাঁড়িয়ে আছে। এটি মূলত আপনার প্রজেক্টে নতুন উপাদান যোগ করা এবং পুরো সাইটের ফাইল ব্যবস্থাপনার কাজে লাগে।
1. Add Panel (+)
ডিজাইনারের একদম উপরে থাকা প্লাস (+) আইকনটিই হলো Add Panel। কোনো পেজে নতুন কোনো Element (যেমন: Section, Container, Heading, Text, Button, Image) যুক্ত করতে চাইলে এই প্যানেলে ক্লিক করতে হবে। এখান থেকে উপাদান টেনে এনে ক্যানভাসে ফেলা যায়।
2. Navigator
আমার মতে, পুরো ডিজাইনারের সবচেয়ে গুরুত্বপূর্ণ প্যানেল হলো এই Navigator। একে আপনি আপনার ওয়েবসাইটের এক্স-রে (X-Ray) রিপোর্ট বলতে পারেন। আপনার পেজে কয়টি সেকশন আছে, কোন ডিভ (Div)-এর ভেতরে কোন টেক্সট আছে—তার পুরো একটি গাছের মতো শাখা-প্রশাখা (Tree View) এখানে দেখা যায়।
3. Pages
এখানে ক্লিক করলে আপনার ওয়েবসাইটের সব পেজ (Home, About, Contact ইত্যাদি) দেখতে পাবেন। নতুন পেজ তৈরি করা, পেজের SEO Meta Title এবং Meta Description যোগ করা বা পেজ ডুপ্লিকেট করার কাজগুলো এখান থেকেই করা হয়।
4. Assets
আপনার ওয়েবসাইটে ব্যবহৃত সমস্ত ছবি (Images), ভেক্টর ফাইল (SVG), ভিডিও এবং ডকুমেন্টস যেখানে জমা থাকে, সেটিই হলো Assets Panel। আপনি স্থানীয় কম্পিউটার থেকে ফাইল এখানে আপলোড করে সরাসরি ডিজাইনে ব্যবহার করতে পারেন।
5. CMS (Content Management System)
ডায়নামিক কনটেন্ট যেমন—ব্লগ পোস্ট, টিমের মেম্বার লিস্ট বা পোর্টফোলিও আইটেম ম্যানেজ করার জন্য এই প্যানেলটি ব্যবহৃত হয়। এটি ডাটাবেসের মতো কাজ করে।
6. Apps
Webflow-এর সাথে অন্যান্য থার্ড-পার্টি সার্ভিস (যেমন: Unsplash, Typeform, বিভিন্ন ইন্টিগ্রেশন) যুক্ত করার জন্য এই প্যানেলটি ব্যবহার করা হয়।
7. Variables
এটি Webflow-এর একটি নতুন এবং অত্যন্ত শক্তিশালী ফিচার। এখানে আপনি পুরো ওয়েবসাইটের কালার ফন্ট বা স্পেসিং-এর গ্লোবাল ভ্যালু সেট করে রাখতে পারেন, যাতে এক ক্লিকেই পুরো সাইটের কালার পরিবর্তন করা যায়।
আরো পড়ুনঃ
YouTube SEO বাংলা গাইড পর্ব ৫: SEO Friendly Video Title লেখার নিয়ম
Canvas Area (ক্যানভাস এরিয়া)
স্ক্রিনের ঠিক মাঝখানের বিশাল ফাঁকা অংশটিই হলো আপনার Canvas Area। একজন চিত্রশিল্পী যেমন ক্যানভাসে তুলি দিয়ে ছবি আঁকেন, ঠিক তেমনি আপনি এখানে ওয়েবসাইটের উপাদান সাজিয়ে ভিজ্যুয়াল রূপ দেবেন।
এই ক্যানভাসটিতে যা দেখা যায়, তা শতভাগ WYSIWYG (What You See Is What You Get)। অর্থাৎ, এখানে আপনি যেমন সাইটটি ডিজাইন করছেন, ব্রাউজারে সাইটটি পাবলিশ করার পর ঠিক একই রকম দেখাবে।
Top Toolbar (উপরের বার)
ক্যানভাসের ঠিক উপরে যে অনুভূমিক বারটি দেখছেন, সেটি মূলত আপনার কাজের রেসপন্সিভনেস পরীক্ষা করা এবং সাইট পাবলিশ করার মূল নিয়ন্ত্রণ কেন্দ্র।
Breakpoints (ডিভাইস ভিউ)
বর্তমানে যেকোনো ওয়েব ডিজাইনারের জন্য সবচেয়ে বড় চ্যালেঞ্জ হলো সাইটটিকে সব ধরনের ডিভাইসে সুন্দর দেখানো। Webflow এই কাজটিকে অত্যন্ত সহজ করে দিয়েছে। উপরে চারটি প্রধান ব্রেকপয়েন্ট পাবেন:
- Desktop: সাধারণ কম্পিউটার ও ল্যাপটপ ভিউ।
- Tablet: ট্যাবলেট বা আইপ্যাড ভিউ।
- Mobile Landscape: ফোন আড়াআড়ি ধরলে কেমন দেখাবে।
- Mobile Portrait: সাধারণ মোবাইল ফোন ভিউ।
Preview Mode (আইকন: চোখ)
ডিজাইন করার সময় পাশের সাইডবার বা টুলবারগুলো আড়াল করে ওয়েবসাইটের আসল রূপ এবং অ্যানিমেশনগুলো দেখার জন্য প্রিভিউ বাটন ব্যবহার করা হয়। শর্টকাট হলো Ctrl + Shift + P (Windows) বা Cmd + Shift + P (Mac)।
Publish Button
আপনার ডিজাইন শেষ? ডান দিকের উপরের কোণায় থাকা Publish বাটনে ক্লিক করে এক ক্লিকেই Webflow-এর ফ্রি স্টেজ ডোমেইনে (yourname.webflow.io) ওয়েবসাইট লাইভ করে দিতে পারবেন।
Right Sidebar (ডান পাশের সাইডবার)
ডিজাইনারের ডান পাশে রয়েছে ওয়েব ডিজাইনের আসল জাদুকরী প্যানেল। এখানে প্রধানত তিনটি ট্যাব রয়েছে:
1. Style Panel (S)
আপনি যদি কোডিং জেনে থাকেন, তবে এটি CSS-এর ভিজ্যুয়াল রূপ। ক্যানভাসের যেকোনো এলিমেন্টকে সুন্দর রূপ দিতে এই প্যানেলটি ব্যবহার করা হয়। একে কয়েক ভাগে ভাগ করা যায়:
- Selector / Selector Class: এখানে এলিমেন্টের ক্লাস নেম দেওয়া হয়।
- Layout: Display (Block, Flex, Grid) কন্ট্রোল করার জায়গা।
- Spacing: Margin এবং Padding নির্ধারণ করার জায়গা।
- Size: Width, Height, Min/Max Size সেট করার অংশ।
- Typography: ফন্ট ফ্যামিলি, সাইজ, কালার, লাইন হাইট ঠিক করার জায়গা।
- Background: ব্যাকগ্রাউন্ড কালার বা ইমেজ সেট করার ট্যাব।
- Borders & Effects: বর্ডার রেডিয়াস, শ্যাডো, অপাসিটি ইত্যাদি যোগ করার অংশ।
2. Element Settings Panel (D)
আইকনটি দেখতে একটি গিয়ার (Gear)-এর মতো। কোনো নির্দিষ্ট এলিমেন্টের অনন্য বৈশিষ্ট্য নির্ধারণের জন্য এটি কাজ করে। যেমন: একটি বাটনে ক্লিক করলে কোন লিংকে যাবে, একটি ছবিতে ক্লিক করলে তা কোথায় যাবে, কিংবা ফর্মের ইনপুট ফিল্ডের নাম কী হবে—তা এই সেটিংস প্যানেল থেকে ঠিক করা হয়।
3. Interactions Panel (H)
আইকনটি দেখতে একটি বজ্রপাতের (Lightning) মতো। ওয়েবসাইটে বিভিন্ন প্রিমিয়াম অ্যানিমেশন, স্ক্রোল ইফেক্ট বা মাউস হোভার ইফেক্ট তৈরি করার জন্য এই প্যানেলটি ব্যবহৃত হয়।
প্যানেল সমূহের তুলনামূলক তালিকা
| প্যানেলের নাম | প্রধান কাজ | সহজ উদাহরণ |
|---|---|---|
| Style Panel | রং, সাইজ ও লেআউট পরিবর্তন করা | একটি বাটনের রং নীল করা এবং লেখা বড় করা। |
| Settings Panel | ফাংশন ও লিংক সেট করা | বাটনে ক্লিক করলে Facebook-এ যাবে তা সেট করা। |
| Interactions | অ্যানিমেশন ও ইফেক্ট তৈরি করা | মাউস আনলে বাটনটি আলতো করে কেঁপে ওঠা। |
Bottom Panel (নিচের প্যানেল)
ক্যানভাসের একদম নিচে তাকালে আপনি দেখতে পাবেন একটি সরু ট্র্যাকবক্সের মতো লাইন আছে। এটাকে বলা হয় Breadcrumb Trail।
এর কাজ হলো—বর্তমানে আপনি ক্যানভাসে ঠিক কোন উপাদানের ভেতরে আছেন তা দেখানো। যেমন: Body > Section > Container > Heading। এতে করে যেকোনো প্যারেন্ট বা চাইল্ড এলিমেন্ট সহজে সিলেক্ট করা যায়।
নতুনদের সবচেয়ে সাধারণ ভুল
আমার দীর্ঘ ১০ বছরের অভিজ্ঞতায় নতুন শিক্ষার্থীদের মধ্যে কিছু সাধারণ ভুল বারবার করতে দেখেছি। আপনি যেন সেই ভুলগুলো না করেন, তাই আগে থেকেই সতর্ক করে দিচ্ছি:
- ক্লাস (Class) না দিয়ে স্টাইলিং করা: কোনো এলিমেন্ট স্টাইল করার আগে অবশ্যই একটি অর্থপূর্ণ Class Name দিন। তা না হলে গ্লোবাল ট্যাগে স্টাইল লেগে পুরো সাইট এলোমেলো হয়ে যাবে।
- সব জায়গায় Absolute Positioning ব্যবহার করা: নতুনরা এলিমেন্ট নড়াচড়া করতে না পেরে Absolute Position ব্যবহার করেন। এটি রেসপন্সিভ ডিজাইনের বড় শত্রু। পজিশনের বদলে Flexbox ব্যবহার শিখুন।
- Navigator উপেক্ষা করা: ক্যানভাসে সরাসরি ক্লিক করে ছোট বা হিডেন এলিমেন্ট খোঁজার চেষ্টা করা।
আজকের (লাইভ ক্লাস টাস্ক)
আজ আমরা যা যা শিখলাম, তা কেবল পড়ে রেখে দিলে চলবে না। এখনই আপনার কম্পিউটার থেকে Webflow ডিজাইনার অপেন করুন এবং নিচের ধাপগুলো অনুসরণ করে প্র্যাক্টিস করুন:
- ✔ ধাপ ১: আপনার Webflow Dashboard থেকে প্রজেক্টের Designer Interface ওপেন করুন।
- ✔ ধাপ ২: কিবোর্ডের
Zবাটন চেপে Navigator Panel টি ওপেন ও ক্লোজ করুন। - ✔ ধাপ ৩: Add Panel (+)-এ যান এবং ড্র্যাগ করে একটি Section ক্যানভাসে ফেলুন।
- ✔ ধাপ ৪: Top Toolbar থেকে Preview (চোখ আইকন) বাটনে ক্লিক করে আবার এডিট মোডে ফিরে আসুন।
প্র্যাক্টিস করতে কোথাও আটকে গেলে আমাদের কমিউনিটি গ্রুপে জানাতে ভুলবেন না!
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী (FAQ)
১. Webflow Designer কি মোবাইলে ব্যবহার করা যায়?
না, Webflow Designer শুধুমাত্র কম্পিউটার বা ল্যাপটপের ডেস্কটপ ব্রাউজারে (Chrome, Safari, Firefox, Edge) ব্যবহারের জন্য অপটিমাইজড।
২. Style Panel এবং Settings Panel-এর মধ্যে মূল পার্থক্য কী?
Style Panel দিয়ে ভিজ্যুয়াল সৌন্দর্য (রং, সাইজ, ফন্ট) ঠিক করা হয়, আর Settings Panel দিয়ে উপাদানের নিজস্ব কার্যকারিতা (লিংক, ইমেজ সোর্স, ফর্ম আইডি) সেট করা হয়।
৩. Navigator Panel কেন এত গুরুত্বপূর্ণ?
Navigator আপনার এইচটিএমএল স্ট্রাকচারের একটি পরিষ্কার ভিজ্যুয়াল লেআউট দেয়, যা কোডের হাইরারকি বুঝতে এবং সঠিক এলিমেন্ট সিলেক্ট করতে অপরিহার্য।
৪. আমি ভুল করে কিছু মুছে ফেললে তা ফেরত আনব কীভাবে?
খুবই সহজ! অন্যান্য সফটওয়্যারের মতোই কিবোর্ডে Ctrl + Z (Windows) বা Cmd + Z (Mac) চাপলে ভুল করা কাজ আনডু (Undo) হয়ে যাবে।
৫. ক্যানভাসে আমি ডিজাইন পরিবর্তন করলে তা কি সরাসরি লাইভ ওয়েবসাইটে পরিবর্তিত হবে?
না, যতক্ষণ না পর্যন্ত আপনি উপরের ডান কোণার Publish বাটনে ক্লিক করছেন, ততক্ষণ আপনার পরিবর্তনগুলো লাইভ ওয়েবসাইটে দৃশ্যমান হবে না।
৬. Breakpoints কীভাবে কাজ করে?
Webflow-এর ব্রেকপয়েন্টগুলো ক্যাসকেডিং (Cascading) নিয়মে কাজ করে। ডেস্কটপে করা স্টাইল ডিফল্টভাবে নিচের সব মোবাইল ডিভাইসে পেয়ে যায়, তবে মোবাইলে পরিবর্তন করলে তা আবার ডেস্কটপে প্রভাব ফেলে না।
৭. Webflow Assets Panel-এ সর্বোচ্চ কত সাইজের ফাইল আপলোড করা যায়?
সাধারণত প্রতি ছবিতে সর্বোচ্চ 4MB পর্যন্ত সাপোর্ট করে, তবে ওয়েবসাইটের স্পিড ভালো রাখতে আমরা সবসময় ১00-২০০ KB-এর ছোট ফাইলে ইমেজ অপটিমাইজ করে আপলোডের পরামর্শ দিই।
৮. ডিজাইনার মোড কি স্লো কাজ করতে পারে?
যদি আপনার ইন্টারনেট কানেকশন দুর্বল হয় বা ব্রাউজারে অনেকগুলো ক্যাশ জমা থাকে, তবে কিছুটা ধীরগতির হতে পারে। গুগল ক্রোম ব্রাউজার ব্যবহার করা সবচেয়ে উত্তম।
Quick Revision: আজ আমরা কী কী শিখলাম?
- Webflow Designer হলো ভিজ্যুয়াল কোডিং করার মূল ক্যানভাস।
- Left Toolbar: Add Panel, Navigator, Pages, Assets এবং CMS-এর কেন্দ্র।
- Canvas Area: রিয়েল-টাইমে ভিজ্যুয়াল ডিজাইন দেখার স্থান।
- Top Toolbar: রেসপন্সিভ ব্রেকপয়েন্ট, প্রিভিউ এবং সাইট পাবলিশিং বাটন।
বন্ধুরা আজকের পর্ব এখানেই শেষ করতেছি। কারণ বেশি বড় হয়েগেলে মনে রাখা কষ্ট।
পরবর্তী ক্লাসে আমরা আমাদের প্রথম বাস্তব প্রজেক্ট (Real Project) তৈরি করা শুরু করব। সেখানে আমরা সরাসরি হাতে-কলমে Workspace সেটআপ, Site Settings এবং প্রজেক্টের সঠিক ফাইল স্ট্রাকচার নিয়ে কাজ শিখব। পরবর্তী ক্লাসটি মিস করতে না চাইলে এখনই প্রস্তুতি নিয়ে রাখুন!
