ওয়েব পপআপ সেটিংস
একটি পপআপ দেখতে কেমন হবে এবং কোথায় প্রদর্শিত হবে তা সেট করতে পপআপ সেটিংস প্যানেল ব্যবহার করুন। প্যানেলটি ওয়েব কন্টেন্ট এবং ওয়েব ফর্ম উভয়েই পাওয়া যায়।
প্যানেলটির দুটি অংশ রয়েছে:
- সাধারণ সেটিংস: পুরো পপআপের চেহারা এবং প্লেসমেন্ট।
- বর্তমান পেজ: আপনার সম্পাদনা করা পেজের জন্য মিডিয়া এবং আকার।
পেজ ট্যাব এবং + পেজ যোগ করুন প্যানেলের উপরে থাকে। দেখুন একাধিক পেজ।
ছবি এবং ভিডিও
Anchor link toপপআপের ছবি এবং ভিডিও বেছে নিতে, এবং সেগুলো ফিট ও নরম করতে এই সেটিংস ব্যবহার করুন।
যদি লেআউটে এক বা একাধিক মিডিয়া ব্লক থাকে, তাহলে বর্তমান পেজ খুলুন। প্রতিটি মিডিয়া ব্লকের একটি প্রিভিউ এবং নিয়ন্ত্রণ থাকে।
- ছবি পরিবর্তন করুন-এ ক্লিক করে আপনার প্রজেক্টের মিডিয়া স্টোরেজ থেকে একটি ফাইল বেছে নিন, অথবা সরাসরি ছবির URL পেস্ট বা সম্পাদনা করুন।
- ফিট (স্বাভাবিক, কভার, বা ধারণ)-এর মাধ্যমে ছবিটি কিভাবে তার ফ্রেমে পূর্ণ হবে তা সেট করুন। একটি ব্যাকগ্রাউন্ড ছবির জন্য ফিট দেখানো হয় না, যা সবসময় তার এলাকা জুড়ে থাকে।
- ঐচ্ছিকভাবে ব্লার (0 থেকে 20 px) দিয়ে ছবিটি নরম করুন।
- শুধুমাত্র ব্যাকগ্রাউন্ড মিডিয়ার জন্য, ডিম (0 থেকে 100%) ব্যবহার করে একটি ডার্ক স্ক্রিম যোগ করুন যাতে ছবির উপরের লেখা পঠনযোগ্য থাকে।
ডার্ক থিম ছবি
Anchor link toডার্ক থিম সহ একটি পপআপ ডার্ক মোডে একটি ভিন্ন ছবি দেখাতে পারে, উদাহরণস্বরূপ ডার্ক ইঙ্ক সহ একটি লোগো।
ডার্ক থিম সক্রিয় থাকলে, প্রতিটি ইমেজ ব্লক একটি ডার্ক থিম ছবি সারি যোগ করে।
- ছবি পরিবর্তন করুন-এ ক্লিক করুন অথবা ডার্ক মোডের জন্য একটি ভিন্ন ছবি বেছে নিতে ছবির URL (ডার্ক থিম) সেট করুন (উদাহরণস্বরূপ, ডার্ক ইঙ্ক সহ একটি লোগো)।
- উভয় স্কিমে হালকা ছবির URL দেখানো চালিয়ে যেতে এটি খালি রাখুন।
ডার্ক থিম ছবিটি সেই ব্লকের ছবি যেখানেই ব্যবহৃত হয়, সেখানেই প্রযোজ্য হয়, যার মধ্যে একটি ব্যাকগ্রাউন্ড ছবি বা একটি ভিডিও পোস্টার অন্তর্ভুক্ত।
ভিডিও
Anchor link toএকটি মিডিয়া ব্লকে ছবির পরিবর্তে একটি ভিডিও ব্যবহার করুন।
- মিডিয়া-কে ভিডিও-তে সেট করুন।
- একটি ভিডিও URL লিখুন: ভিডিও ফাইলের একটি সরাসরি লিঙ্ক। ভিডিও শুধুমাত্র একটি এক্সটার্নাল URL গ্রহণ করে। আপনি মিডিয়া স্টোরেজে একটি ভিডিও আপলোড করতে পারবেন না। এটিকে MP4 (H.264 ভিডিও, AAC অডিও) হিসাবে “ফাস্ট স্টার্ট” সক্রিয় করে এক্সপোর্ট করুন (কখনও কখনও “ওয়েব-অপ্টিমাইজড” বলা হয়), যাতে ব্রাউজার পুরো ফাইল ডাউনলোড করার আগেই প্লে করা শুরু করতে পারে। যদি URL লোড হতে ব্যর্থ হয়, দর্শকরা শুধুমাত্র পোস্টার দেখতে পাবে।
- লুপ ডিফল্টভাবে চালু থাকে, তাই ভিডিওটি ক্রমাগত পুনরায় প্লে হয়। একবার প্লে করার পর থামাতে এটি বন্ধ করুন।
- ব্রাউজারের বিল্ট-ইন প্লে, পজ এবং ভলিউম নিয়ন্ত্রণ প্রদর্শন করতে নিয়ন্ত্রণ দেখান চালু করুন। ভিডিও সবসময় মিউট করে শুরু হয়। এই বিকল্প ছাড়া, দর্শকদের সাউন্ড চালু করার কোনো উপায় থাকে না।
- ঐচ্ছিকভাবে একটি পোস্টার URL সেট করুন: ভিডিও লোড হওয়ার সময় দেখানো ছবি। প্রস্তাবিত। একটি পুরানো পপআপ স্ক্রিপ্টে যা ভিডিও সমর্থন করে না, পোস্টারটিই একমাত্র জিনিস যা দেখানো হয়। এটি খালি রাখলে, সেই দর্শক ভিডিওর জায়গায় কিছুই দেখতে পাবে না।
মিডিয়া লেআউট
Anchor link toকিছু লেআউট মিডিয়া ব্লকের জন্য প্লেসমেন্ট সেটিংস সহ একটি টেমপ্লেট ভেরিয়েবল বিভাগ যোগ করে। বিভাগটি শুধুমাত্র তখনই প্রদর্শিত হয় যখন বর্তমান লেআউটে এই ধরনের সেটিংস থাকে।
যখন লেআউটে লেখার পাশে মিডিয়া থাকে, তখন সেট করুন:
- ছবির প্রস্থ: পপআপ প্রস্থের শেয়ার, শতাংশ হিসাবে।
- ছবির অবস্থান: বাম বা ডান।
একটি বটম বার লেআউটে, বিভাগটি ছবির নিয়ন্ত্রণের পরিবর্তে বোতামের প্রস্থ অফার করে।
পপআপের আকার এবং স্টাইল
Anchor link toপপআপের আকার, এর কোণার রাউন্ডিং, এর ছায়া এবং এটি কিভাবে প্রদর্শিত হবে তা সেট করুন।
- বর্তমান পেজ → আকার-এর অধীনে, একটি পপআপ যা তার কন্টেন্টের সাথে নিজেকে আকার দেয় তার জন্য প্রস্থ এবং উচ্চতা খালি রাখুন, অথবা পিক্সেলে একটি নির্দিষ্ট আকার সেট করুন। একাধিক পেজ সহ একটি পপআপে, প্রতিটি পেজের নিজস্ব আকার থাকে।
- যখন পেজটি উপলব্ধ উচ্চতা পূরণ করা উচিত, তখন পূর্ণ উচ্চতা চালু করুন।
- সাধারণ সেটিংস-এ, পপআপের কোণার রাউন্ডিং এবং ড্রপ শ্যাডোর জন্য কোণার ব্যাসার্ধ এবং ছায়া সেট করুন।
- অ্যানিমেশন বেছে নিন: পপআপটি কিভাবে প্রদর্শিত হবে (ডিফল্ট, কোনোটিই নয়, ফেড, বা স্লাইড)।
ডার্ক থিম সক্রিয় থাকলে, ছায়া সূর্য/চাঁদ স্কিম সুইচ অনুসরণ করে। একটি হালকা পেজের জন্য টিউন করা ছায়া প্রায়শই একটি ডার্ক পেজে অদৃশ্য থাকে, তাই দুটির জন্য সাধারণত ভিন্ন মানের প্রয়োজন হয়।
হালকা প্যালেটের ছায়া থেকে আলাদাভাবে ডার্ক-প্যালেট ছায়া সম্পাদনা করতে:
- সূর্য/চাঁদ সুইচটি ডার্ক-এ সেট করুন।
- ছায়া সম্পাদনা করুন।
আপনি যদি ডার্ক ছায়াটি অপরিবর্তিত রাখেন, তাহলে উভয় স্কিমে হালকা ছায়া মান ব্যবহৃত হয়।
পপআপের রঙ সেট করুন: এর ব্যাকগ্রাউন্ড, এর বোতামের অ্যাকসেন্ট এবং এর টেক্সট।
- পপআপের রঙের প্যালেট প্রসারিত করতে রঙ-এ ক্লিক করুন।
- পপআপের ব্যাকগ্রাউন্ড এবং বোতামে প্রয়োগ করা অ্যাকসেন্ট রঙের জন্য ব্যাকগ্রাউন্ড এবং অ্যাকসেন্ট (বোতাম) সেট করুন।
- বডি টেক্সট এবং ক্যাপশন ও আইব্রোর মতো সেকেন্ডারি টেক্সটের জন্য টেক্সট এবং সেকেন্ডারি টেক্সট সেট করুন।
- যদি লেআউটে একটি ব্যাকগ্রাউন্ড ছবির উপর টেক্সট থাকে, তাহলে সেই টেক্সটের জন্য ছবির উপর টেক্সট সেট করুন। একটি ওয়েব ফর্মে এই রঙটি নেই।
ডার্ক মোড
Anchor link toডার্ক মোড পপআপটিকে সেই দর্শকদের জন্য একটি দ্বিতীয় প্যালেট দেয় যাদের ডিভাইস একটি ডার্ক রঙের স্কিমে সেট করা আছে।
- রঙ-এ, ডার্ক থিম সক্রিয় করুন চালু করুন। এটি বন্ধ থাকলে, পপআপটি সবসময় উপরের হালকা প্যালেট দিয়ে রেন্ডার হয়, প্রতিটি দর্শকের জন্য।
- আপনি কোন প্যালেট সম্পাদনা করছেন তা বেছে নিতে রঙের ফিল্ডগুলির উপরের সূর্য/চাঁদ সুইচটি ব্যবহার করুন। ক্যানভাসটি সেই স্কিমে পুনরায় আঁকা হয়।
- বর্তমান হালকা রঙ থেকে ডার্ক প্যালেট (পুনরায়) তৈরি করতে হালকা থেকে অটো-তে ক্লিক করুন। ব্যাকগ্রাউন্ড এবং সারফেসগুলি ডার্ক হয়ে যায়, এবং টেক্সট হালকা হয়ে যায়। অ্যাকসেন্ট এবং ছবির উপর টেক্সট অপরিবর্তিত থাকে। ফাইন-টিউন করার জন্য পরে যেকোনো পাঁচটি ফিল্ড সম্পাদনা করুন।
ডার্ক থিম সক্রিয় করুন আবার বন্ধ করলে ডার্ক প্যালেটটি থেকে যায়। এটি আবার চালু করলে স্ক্র্যাচ থেকে পুনরায় তৈরি করার পরিবর্তে আপনার সম্পাদনাগুলি পুনরুদ্ধার হয়।
ডার্ক থিম সক্রিয় থাকা একটি পপআপে প্রিভিউ খুললে প্রিভিউ বন্ধ করুন (Esc)-এর পাশে একই সূর্য/চাঁদ সুইচটি প্রদর্শিত হয়। আপনি পূর্ণ-আকারের প্রিভিউতেও উভয় প্যালেট পরীক্ষা করতে পারেন।
একজন দর্শকের ব্রাউজার সিদ্ধান্ত নেয় যে তারা কোন প্যালেট দেখবে, তাদের OS-স্তরের ডার্ক মোড সেটিংয়ের উপর ভিত্তি করে। পপআপে কোনো ডার্ক/লাইট টগল নেই। একটি সাইট OS সেটিং নির্বিশেষে সবার জন্য একটি স্কিম জোর করে প্রয়োগ করতে পারে। Web SDK ডক্সে webPopups.colorScheme দেখুন।
ডার্ক থিম এই প্যানেলে ছবি, ছায়া, এবং ওভারলে-কেও প্রভাবিত করে। সক্রিয় হওয়ার পরে প্রতিটি একই সূর্য/চাঁদ স্কিম সুইচ অনুসরণ করে।
প্লেসমেন্ট এবং ওভারলে
Anchor link toপেজে পপআপটি কোথায় প্রদর্শিত হবে এবং এর পেছনের পেজটি ডিম করা হবে কিনা তা বেছে নিন।
- প্লেসমেন্ট-এ, অবস্থান 3×3 গ্রিড ব্যবহার করে পপআপটি পেজে কোথায় অ্যাঙ্কর করবে তা বেছে নিন।
- নির্বাচিত প্রান্ত থেকে পিক্সেলের দূরত্বে প্রান্তের অফসেট সেট করুন।
- ওভারলে-তে, পেজের বাকি অংশ অন্ধকার করতে পিছনের পেজটি ম্লান করুন চালু করুন, উভয় স্কিমে। এটি বন্ধ করলে ম্লান ভাবটি সম্পূর্ণভাবে মুছে যায়, যার মধ্যে নিচে সেট করা যেকোনো ডার্ক-স্কিম মান অন্তর্ভুক্ত।
- ওভারলের জন্য রঙ এবং স্বচ্ছতা সেট করুন (স্বচ্ছতা 0 থেকে 1)।
ডার্ক থিম সক্রিয় থাকলে, রঙ এবং স্বচ্ছতা-ও সূর্য/চাঁদ স্কিম সুইচ অনুসরণ করে। ডার্ক প্যালেটের জন্য ম্লান ভাবকে তার নিজস্ব রঙ এবং শক্তি দিতে সুইচটি ডার্ক-এ সেট করুন। আপনি সেখানে সম্পাদনা না করা পর্যন্ত, ডার্ক স্কিমটি হালকা স্কিমের মতো একই রঙ এবং স্বচ্ছতা দেখায়।
