ডিজাইন: রং, ব্যাকগ্রাউন্ড ও ফন্ট

বিল্ডারের “থিম” ট্যাবে পুরো পেজের চেহারা ঠিক করেন: রং, ব্যাকগ্রাউন্ড, বাটনের আকৃতি আর ফন্ট। কাস্টম CSS ছাড়া সব পরিবর্তন প্রায় ২ সেকেন্ড পর স্বয়ংক্রিয়ভাবে খসড়ায় সংরক্ষিত হয় এবং পরের বার পাবলিশ করলে লাইভ হয়।

ট্যাবটি ওপর থেকে নিচে এভাবে সাজানো: “টেমপ্লেট”, “প্রিসেট”, “রং”, “ব্যাকগ্রাউন্ড”, “কনটেন্টের পেছনের তল”, “বাটনের স্টাইল”, “ফন্ট” আর “কাস্টম CSS”। টেমপ্লেট নিয়ে আলাদা একটি লেখা আছে।

#প্রিসেট

প্রিসেট হলো তৈরি রঙের সমন্বয়। এক ক্লিকে ব্যাকগ্রাউন্ডের রং, টেক্সটের রং, বাটনের রং আর বাটনের স্টাইল একসাথে সেট হয় এবং আপনার নিজের বাটনের লেখার রং রিসেট হয়। ১৬টি প্রিসেট আছে: Classic, Midnight, Harbor, Ocean, Forest, Sunset, Rose, Slate, Mono, Frost, Lavender, Amber, Charcoal, Mint, Crimson আর Sand। চারটি মানের কোনোটি না বদলানো পর্যন্ত সক্রিয় প্রিসেটটি চিহ্নিত থাকে।

#রং

চারটি মূল রং, প্রতিটিতে কালার পিকার আর hex মান (স্বচ্ছতা ছাড়া):

“ব্যাকগ্রাউন্ড”

পেজের ব্যাকগ্রাউন্ডের রং; ব্যাকগ্রাউন্ডের ধরন “রং” হলেও এটিই ব্যবহার হয়।

“টেক্সটের রং”

নাম, বায়ো আর টেক্সটের রং।

“বাটনের রং”

লিংক বাটনের রং আর ব্লকের বাটনগুলোর ডিফল্ট রং।

“বাটনের লেখা”

বাটনের ওপরের লেখা। নিজে কিছু না বাছলে বাটনের রঙে ভালোভাবে পড়া যায় এমন একটি রং স্বয়ংক্রিয়ভাবে বাছা হয়।

দেখানো মান সবসময় বর্তমানে কার্যকর মানটি, সেটি টেমপ্লেট থেকে এলেও। অনেক ব্লকের “প্রদর্শনের অপশন”-এ নিজস্ব রঙের ফিল্ড আছে। যতক্ষণ সেগুলোতে “ডিফল্ট (থিম থেকে)” দেখা যায়, ততক্ষণ সেগুলো এই রংগুলো অনুসরণ করে।

#ব্যাকগ্রাউন্ড

“রং”, “ইমেজ”, “গ্রেডিয়েন্ট” আর “ভিডিও” বাটন পেজের ব্যাকগ্রাউন্ডের ধরন ঠিক করে। ধরন বদলালে, যতক্ষণ বিল্ডারে থাকেন, বিল্ডার অন্য ধরনগুলোর মান মনে রাখে।

রং

পেজটি “রং” অংশের “ব্যাকগ্রাউন্ড” রং ব্যবহার করে।

ইমেজ

“ডেস্কটপ ইমেজ”

বড় স্ক্রিনের ব্যাকগ্রাউন্ড, 1920 × 1080 px।

“মোবাইল ইমেজ”

ঐচ্ছিক, খাড়া 1080 × 1920 px। খালি থাকলে “ডেস্কটপের মতো” দেখায়, আর ডেস্কটপ ইমেজই ব্যবহার হয়।

“বেছে নিন” আপনার অ্যাসেট খোলে, “পরিচালনা ↗” অ্যাসেট পেজ খোলে, “সরান” ছবিটি সরিয়ে দেয়। কোনো ছবি ঠিক লক্ষ্য সাইজের না হলে ক্রপ টুল খোলে এবং ক্রপ করা ছবিটি নতুন অ্যাসেট হিসেবে সংরক্ষিত হয়। বিস্তারিত আছে পেজ বিল্ডারে ছবি-তে।

গ্রেডিয়েন্ট

“শুরুর রং” আর “শেষের রং”

গ্রেডিয়েন্টের দুটি রং।

“কোণ”

০ থেকে ৩৫৫ ডিগ্রি পর্যন্ত দিক, ৫ ডিগ্রি করে ধাপে।

“প্রিসেট”

তৈরি গ্রেডিয়েন্ট: Indigo, Sunset, Ocean, Forest, Berry আর Midnight।

ভিডিও

“ডেস্কটপ ভিডিও”

একটি ভিডিও ফাইলের সরাসরি লিংক (.mp4 বা .webm), অথবা আপনার ভিডিও অ্যাসেট থেকে “ভিডিও বেছে নিন”।

“মোবাইল ভিডিও”

ঐচ্ছিক, যেমন মোবাইল ডেটার জন্য ছোট একটি ফাইল। খালি থাকলে ডেস্কটপ ভিডিওই ব্যবহার হয়।

ভিডিওটি শব্দ ছাড়া, লুপে আর কোনো কন্ট্রোল ছাড়া চলে। যে ভিজিটররা তাঁদের সিস্টেম সেটিংসে কম অ্যানিমেশন (reduced motion) চালু করেছেন, তাঁদের জন্য এটি লুকানো থাকে। MP4 বা WebM ফরম্যাটে সর্বোচ্চ ৮ MB-এর ফাইল সুপারিশ করা হয়।

ওভারলে অস্বচ্ছতা

ইমেজ, গ্রেডিয়েন্ট আর ভিডিওর জন্য ০ থেকে ৮০ % পর্যন্ত একটি স্লাইডার ব্যাকগ্রাউন্ডের ওপর একটি গাঢ় স্তর দেয়, যাতে টেক্সট সহজে পড়া যায়।

ইমেজ, গ্রেডিয়েন্ট বা ভিডিও দিয়ে তৈরি পেজ ব্যাকগ্রাউন্ড টেমপ্লেটের ব্যাকগ্রাউন্ড ইমেজের জায়গা নেয়। টেমপ্লেটের ছবির জায়গাগুলোতে তখন এ বিষয়ে একটি নোট দেখা যায়। “রং” বেছে নিলে টেমপ্লেটের ছবিগুলো আবার দেখা যায়।

#কনটেন্টের পেছনের তল

ব্যাকগ্রাউন্ড ইমেজ, গ্রেডিয়েন্ট বা ভিডিওর ওপর টেক্সট পড়ার উপযোগী করে:

“বন্ধ”

কোনো তল নেই; কনটেন্ট সরাসরি ব্যাকগ্রাউন্ডের ওপর থাকে।

“পুরো কনটেন্ট”

সব কনটেন্টের পেছনে একটি কার্ড।

“প্রতি ব্লক”

প্রোফাইলের পেছনে আর প্রতিটি ব্লকের পেছনে আলাদা কার্ড।

“অস্বচ্ছ” বা “অর্ধস্বচ্ছ”

তল চালু করলেই দেখা যায়। অর্ধস্বচ্ছ তলে পেছনের ব্যাকগ্রাউন্ড আবছা দেখা যায়।

Business Card টেমপ্লেটে এই সেটিংয়ের কোনো প্রভাব নেই।

#বাটনের স্টাইল

বাটনের স্টাইল হলো ডিফল্ট। লিংক ব্লকে আর প্রতিটি লিংকে এটি ওভাররাইট করতে পারেন (দুই জায়গাতেই “কোণের বক্রতা”)।

#ফন্ট

বেছে নিতে পারেন DM Sans, Figtree, Sora, Plus Jakarta Sans, Raleway, Inter, Poppins, Montserrat, Nunito, Outfit, Space Grotesk আর “সিস্টেম ডিফল্ট” (ডিভাইসের নিজস্ব ফন্ট) থেকে। “Aa — চটপটে বাদামি শিয়াল।” লাইনটি একটি প্রিভিউ দেখায়।

LinkHarbor সব ফন্ট নিজেই সরবরাহ করে। এগুলোর জন্য আপনার ভিজিটরদের ব্রাউজার Google Fonts বা অন্য কোনো তৃতীয় পক্ষের সার্ভার থেকে কিছু লোড করে না।

#কোন সেটিং প্রাধান্য পায়

রং আর আকৃতি বাইরে থেকে ভেতরের দিকে ধাপে ধাপে সূক্ষ্ম হয়:

1. টেমপ্লেট: মৌলিক স্টাইল আর ডিফল্ট রং
2. থিম ট্যাব: পুরো পেজের রং, ব্যাকগ্রাউন্ড, বাটনের স্টাইল আর ফন্ট
3. একটি ব্লকের প্রদর্শনের অপশন: সেই ব্লকের রং আর আকৃতি
4. একটি লিংকের স্টাইলিং: অন্য সব মানের চেয়ে অগ্রাধিকার পায়
5. কাস্টম CSS: কন্ট্রোলগুলো যা পারে না, তার জন্য

নিজের CSS দিয়ে কীভাবে সূক্ষ্ম পরিবর্তন করবেন, তা ব্যাখ্যা করা আছে কাস্টম CSS-এ।