অফ-ক্যানভাস কন্টেন্ট উইজেট সেটিংস

কিছু বিষয়বস্তু পৃষ্ঠায় একটি স্থান অর্জন করে। বাকি, একটি মেনু, একটি FAQ তালিকা, একটি পরিচিতি ফর্ম, কেউ এটির জন্য জিজ্ঞাসা না করা পর্যন্ত দূরে রাখা ভাল কাজ করে। দ্য অফ-ক্যানভাস কন্টেন্ট উইজেট মধ্যে মাস্টার অ্যাডনস প্রো একটি বোতামের পিছনে যেকোন এলিমেন্টর টেমপ্লেট লুকিয়ে রাখে এবং দর্শকরা ক্লিক করলে স্ক্রিনের পাশে, উপরে বা নীচে থেকে স্লাইড করে।

আপনি একটি সংরক্ষিত টেমপ্লেট চয়ন করুন, ট্রিগার বোতামটি রাখুন এবং প্যানেলটি কীভাবে প্রবেশ করবে তা চয়ন করুন৷ এই নির্দেশিকাটি এলিমেন্টস প্যানেল থেকে লাইভ পৃষ্ঠায় একটি কার্যকরী স্লাইড-আউট FAQ প্যানেলে উইজেট অনুসরণ করে।

অফ-ক্যানভাস কন্টেন্ট উইজেট কি করে #

উইজেটটি আপনার পৃষ্ঠায় একটি ট্রিগার বোতাম রাখে এবং এটি একটি লুকানো প্যানেলের সাথে লিঙ্ক করে। প্যানেলের বিষয়বস্তু হল আপনার এলিমেন্টর লাইব্রেরির যেকোনো টেমপ্লেট, তাই একটি মোবাইল মেনু, একটি মেগা FAQ, একটি কার্ট সারাংশ বা একটি সাইনআপ ফর্ম সবই একইভাবে কাজ করে৷ যখন একজন দর্শক বোতামটি ক্লিক করেন, প্যানেলটি স্লাইড করে বা বিবর্ণ হয়ে যায় যার পিছনে একটি ম্লান ওভারলে এবং এর শিরোনামে একটি বন্ধ আইকন থাকে।

সবকিছু একটি উইজেটে ঘটে: ট্রিগার, প্যানেল, অ্যানিমেশন এবং স্টাইলিং। আলাদা পপআপ প্লাগইন নেই, টেমপ্লেট শর্টকোড নেই।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• মাস্টার অ্যাডনস প্রো একটি সক্রিয় লাইসেন্স সহ ইনস্টল করা হয়েছে, যেহেতু অফ-ক্যানভাস সামগ্রী একটি প্রো উইজেট৷ প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• প্যানেলের ভিতরে দেখানোর জন্য একটি সংরক্ষিত এলিমেন্টর টেমপ্লেট। প্রথমে আপনার ড্যাশবোর্ডে টেমপ্লেটের নিচে একটি তৈরি করুন; এখানে ডেমো একটি রেডিমেড FAQ বিভাগ ব্যবহার করে।

অফ-ক্যানভাস কন্টেন্ট উইজেট কিভাবে যোগ করবেন #

Elementor সম্পাদকে, অনুসন্ধান করুন উপাদান জন্য প্যানেল অফ-ক্যানভাস সামগ্রী, অথবা মাস্টার অ্যাডঅন বিভাগে স্ক্রোল করুন এবং এটিকে পৃষ্ঠায় টেনে আনুন। এখানে ক্লিক লেবেলযুক্ত একটি নীল ট্রিগার বোতাম ক্যানভাসে প্রদর্শিত হবে। আপনি একটি টেমপ্লেট বাছাই করে এটি না খোলা পর্যন্ত প্যানেলটি নিজেই লুকানো থাকে।

টেমপ্লেটটি বেছে নিন এবং প্যানেল সেট আপ করুন #

দ্য বিষয়বস্তু বিভাগটি প্যানেলের মূল সেটিংস ধারণ করে।

• টেমপ্লেট নির্বাচন করুন: প্যানেলটি যে এলিমেন্টর টেমপ্লেটটি দেখায়। এই ড্রপডাউনে যেকোনো সংরক্ষিত বিভাগ বা পৃষ্ঠার টেমপ্লেট প্রদর্শিত হবে।
• শিরোনাম শিরোনাম এবং শিরোনাম: প্যানেল হেডার চালু করুন এবং এর লেবেল টাইপ করুন, যেমন “ এক্সপ্লোর FAQ”। ক্লোজ আইকন একই হেডারে থাকে।
• অবস্থান: প্যানেল কোন প্রান্ত থেকে আসে। নীচে এই আরো।
• প্রস্থ: ডিফল্টরূপে px, % বা vw, 300px-এ প্যানেলটি কতটা প্রশস্ত। উপরে বা নীচের প্যানেলগুলি একটি ব্যবহার করে উচ্চতা পরিবর্তে px, % বা vh এ নিয়ন্ত্রণ করুন।
• প্রবেশদ্বার অ্যানিমেশন এবং প্রবেশের ধরন: প্যানেল কিভাবে আসে। অ্যানিমেশনের জন্য ফেইড, স্লাইড বা গ্রো, টাইপের জন্য কভার বা পুশ। কভার পৃষ্ঠার উপর প্যানেল রাখে; ধাক্কা জায়গা তৈরি করতে পৃষ্ঠাটি একপাশে সরিয়ে দেয়।
• অ্যানিমেশন সময়কাল: সেকেন্ডে প্রবেশের গতি, ডিফল্টরূপে 0.6।
• ডিফল্টরূপে খুলুন: ইতিমধ্যে খোলা প্যানেল দিয়ে পৃষ্ঠাটি শুরু করুন। ডিজাইন করার সময় সহজ, যেহেতু আপনি প্রতিটি পরিবর্তনের পরে ট্রিগারে ক্লিক না করেই প্যানেলটি স্টাইল করতে পারেন।

ট্রিগার বোতাম কনফিগার করুন #

দ্য বোতাম একই ট্যাবে গ্রুপ ট্রিগার নিয়ন্ত্রণ করে। শিরোনাম দেখান এবং শিরোনাম লেবেল সেট করুন; ডেমো এটির নাম পরিবর্তন করে এখানে ক্লিক করুন থেকে প্রায়শই জিজ্ঞাসিত প্রশ্নে। সারিবদ্ধ করা বোতামটি তার কলামে বাম, কেন্দ্র বা ডানে রাখে।

আইকন দেখান লেবেলের পাশে একটি আইকন যোগ করে, এবং আইকন নির্বাচন করুন এলিমেন্টর আইকন লাইব্রেরি খোলে যাতে আপনি ফন্ট অসাধারন বা আপনার ইনস্টল করা যেকোনো আইকন সেট থেকে বেছে নিতে পারেন। আইকন দূরত্ব আইকন এবং পাঠ্যের মধ্যে ব্যবধান সেট করে।

প্যানেলটি কোথা থেকে স্লাইড করে তা চয়ন করুন #

দ্য অবস্থান ড্রপডাউন ছয়টি বিকল্প অফার করে: ডান, বাম, উপরে, নীচে, মধ্য এবং আপেক্ষিক.

ডান এবং বাম হল ক্লাসিক ড্রয়ার প্যানেল। একটি বাছাই করুন এবং সম্পাদক অবিলম্বে এটির পূর্বরূপ দেখেন: প্যানেলটি আপনার টেমপ্লেটের ভিতরে স্লাইড করে, উপরে হেডার, আইকন বন্ধ করুন।

উপরে এবং নীচে একটি জন্য প্রস্থ নিয়ন্ত্রণ অদলবদল উচ্চতা ভিউপোর্ট উচ্চতায় পরিমাপ করা স্লাইডার। 30vh এ একটি শীর্ষ বার একটি পাতলা ঘোষণা ড্রয়ারের মতো কাজ করে।

মধ্যম একটি মডেল মত প্যানেল কেন্দ্র। আপেক্ষিক প্যানেলটিকে ট্রিগার বোতামে নোঙর করে, a সহ দূরত্ব ফাঁকের জন্য নিয়ন্ত্রণ, যা উইজেটকে ড্রপডাউন-শৈলীতে পরিণত করে। প্যানেল থেকে একটি নোট: শুধুমাত্র ফেইড অ্যানিমেশন আপেক্ষিক অবস্থানের সাথে কাজ করে।

প্রস্থ এবং প্রবেশদ্বার অ্যানিমেশন সেট করুন #

একটি পাশের অবস্থানে ফিরে, ডেমো প্যানেলটিকে 500 পিক্সেলে প্রশস্ত করে এবং সুইচ করে প্রবেশ অ্যানিমেশন সঙ্গে স্লাইড করতে প্রবেশের ধরন পুশ অন। পুশের সাথে, প্যানেলটি আচ্ছাদিত হওয়ার পরিবর্তে প্রবেশ করার সাথে সাথে পৃষ্ঠার বিষয়বস্তু স্থানান্তরিত হয়। সময়কাল প্রায় অর্ধ সেকেন্ড রাখুন; ধীরে ধীরে অপেক্ষা করার মত মনে হতে শুরু করে।

প্যানেল শৈলী #

দ্য শৈলী ট্যাবের তিনটি বিভাগ রয়েছে: বোতাম, হেডার, এবং ধারক.

বোতাম #

ট্রিগার স্টাইল করে: ব্যাকগ্রাউন্ড, টেক্সট কালার, টাইপোগ্রাফি, বর্ডার এবং প্যাডিং, নরমাল এবং হোভার স্টেট সহ। ডেমো ডিফল্ট নীলকে একটি গাঢ় নেভিতে পরিণত করে যা পৃষ্ঠার সাথে মেলে।

হেডার #

খোলা প্যানেলের শীর্ষে স্ট্রিপটি স্টাইল করে।

• বিপরীত শিরোনাম: শিরোনাম অদলবদল করে এবং আইকন দিকগুলি বন্ধ করে, তাই X ডান থেকে বামে চলে যায়।
• প্যাডিং: হেডার বিষয়বস্তুর চারপাশে স্থান।
• আইকন বন্ধ করুন: x বোতামের জন্য রঙ, পটভূমি, সীমানা রঙ, ফন্টের আকার, বাক্সের আকার এবং সীমানা। আপনার শ্রোতা বেশিরভাগ ফোনে থাকলে বাক্সের আকার 24 বা তার বেশি রাখুন; একটি 12 পিক্সেল ট্যাপ লক্ষ্য মিস করা সহজ।

ধারক #

প্যানেল বডি এবং এটিকে ঘিরে কী রয়েছে তা স্টাইল করে।

• পটভূমির রঙ, বর্ডার কালার, বক্স শ্যাডো, বর্ডার টাইপ, বর্ডার রেডিয়াস, প্যাডিং: প্যানেল পৃষ্ঠ নিজেই।
• ওভারলে পটভূমির রঙ: প্যানেল খোলা থাকাকালীন পৃষ্ঠার বাকি অংশে আভা। একটি অন্ধকার ওভারলে প্যানেলে ফোকাস টানে।
• স্ক্রলবার: স্ক্রিনের চেয়ে লম্বা প্যানেলের জন্য স্ক্রলবারের রঙ এবং প্রস্থ।

পৃষ্ঠায় ফলাফল #

লাইভ পৃষ্ঠায়, বোতামটি যেখানে আপনি এটি রেখেছেন সেখানে বসে। একটি ক্লিক নির্বাচিত প্রান্ত থেকে প্যানেলটিকে স্লাইড করে, এর পিছনের পৃষ্ঠাটিকে ম্লান করে দেয় এবং উপরে হেডার এবং বন্ধ আইকন সহ আপনার টেমপ্লেট দেখায়। দর্শকরা ওভারলে ক্লিক করে বা Esc টিপে X দিয়ে এটি বন্ধ করে।

সাধারণ ব্যবহারের ক্ষেত্রে #

• মোবাইল এবং সেকেন্ডারি মেনু যে হেডার ভিড় ছাড়া পাশ থেকে স্লাইড।
• FAQ এবং সাহায্য প্যানেল ডেমোর মতো, ল্যান্ডিং পৃষ্ঠাগুলিতে উত্তরগুলি এক ক্লিক দূরে রাখা।
• যোগাযোগ বা উদ্ধৃতি ফর্ম এটি একটি পৃথক একটিতে বসবাসের পরিবর্তে পৃষ্ঠার উপর খোলে।
• কার্ট এবং অ্যাকাউন্ট ড্রয়ার দোকানের পৃষ্ঠাগুলিতে, WooCommerce বা অন্য প্লাগইন থেকে একটি কার্ট বা অ্যাকাউন্ট উইজেট ব্যবহার করে।
• ঘোষণা বার একটি ছোট উচ্চতা সঙ্গে শীর্ষ অবস্থান ব্যবহার করে উপরের প্রান্ত থেকে।

একটি ভাল অফ-ক্যানভাস প্যানেলের জন্য টিপস #

• প্রথমে টেমপ্লেট তৈরি করুন। উইজেট শুধুমাত্র সংরক্ষিত টেমপ্লেট তালিকাভুক্ত করে, তাই আপনি উইজেটটি টেনে আনার আগে টেমপ্লেটের অধীনে প্যানেলের বিষয়বস্তু ডিজাইন করুন।
• বিষয়বস্তুর সাথে প্রস্থ মেলে। 300 পিক্সেল একটি মেনু উপযুক্ত; ফর্ম এবং প্রায়শই জিজ্ঞাসিত প্রশ্ন তালিকাগুলি 450 থেকে 500 এর কাছাকাছি ভাল শ্বাস নেয়।
• অল্প পরিমাণে পুশ ব্যবহার করুন। এটি আকর্ষণীয় দেখায়, তবে পুরো পৃষ্ঠাটি স্থানান্তরিত করা দীর্ঘ বিষয়বস্তুতে লাফিয়ে উঠতে পারে। একটি অন্ধকার ওভারলে সঙ্গে আবরণ শান্ত ডিফল্ট।
• আপেক্ষিক নিয়ম মনে রাখবেন। পজিশন রিলেটিভ সেট করা থাকলে শুধুমাত্র ফেড অ্যানিমেশন কাজ করে।
• মোবাইলে প্যানেল চেক করুন। একটি 500 পিক্সেল প্যানেল অনেক ফোনের চেয়ে চওড়া; প্রতিক্রিয়াশীল নিয়ন্ত্রণ সহ মোবাইল ব্রেকপয়েন্টের জন্য একটি ছোট প্রস্থ সেট করুন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

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