ফ্লিপবক্স উইজেট সেটিংস

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

আপনি একটি অ্যানিমেশন বাছাই করুন, উভয় মুখ পূরণ করুন, একটি বোতাম যোগ করুন, তারপর প্রতিটি পাশে স্টাইল করুন। 22টি ফ্লিপ ইফেক্ট রয়েছে: 6টি ফ্রি প্লাগইনে এবং আরও 16টি মাস্টার অ্যাডনস প্রো সহ, একটি প্লেইন ফেড থেকে একটি 3D কিউব পর্যন্ত৷ এই গাইড উইজেটের প্রতিটি সেটিং এর মধ্য দিয়ে চলে।

ফ্লিপবক্স উইজেট কি করে #

উইজেট দুটি মুখ থেকে একটি ফ্লিপ কার্ড তৈরি করে। দ্য সামনের বাক্স দর্শকরা প্রথমে যা দেখেন: একটি আইকন বা চিত্র, একটি শিরোনাম এবং একটি বিবরণ৷ এটির উপর ঘোরান এবং কার্ডটি ফ্লিপ করে পিছনের বাক্স, যার নিজস্ব শিরোনাম, বিবরণ এবং একটি বোতাম রয়েছে যা যেকোনো জায়গায় লিঙ্ক করতে পারে।

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

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

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• উভয় মুখের জন্য পাঠ্য এবং আইকন এবং পিছনের দিকের বোতামের লিঙ্ক।

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

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

অ্যানিমেশন শৈলী সেট করুন #

খোলা বিষয়বস্তু ট্যাব। দ্য শৈলী প্রিসেট বিভাগ ধারণ করে ডিজাইনের বৈচিত্র এবং অ্যানিমেশন স্টাইল, এবং এর নীচে ফ্রন্ট বক্স, ব্যাক বক্স এবং অ্যাকশন বোতাম বিভাগগুলি বসুন।

দ্য অ্যানিমেশন স্টাইল ড্রপডাউন মজার অংশ। এটি 22টি বিকল্প বহন করে, তাই একই কার্ডটি পিছনের দিকে ফ্লিপ, ফেইড, স্লাইড বা কিউব করতে পারে। ফ্লিপ অনুভূমিক, ফ্লিপ উল্লম্ব, ফেইড, ফ্লিপ বক্স, ফ্লিপ বক্স ফেইড এবং ফেড আপ বিনামূল্যে; বাকি প্রো প্রয়োজন।

• ফ্লিপ অনুভূমিক এবং ফ্লিপ উল্লম্ব: প্রতিটি অক্ষে ক্লাসিক কার্ড ফ্লিপ।
• কিউব (টপ ডাউন, ডাউন টপ, লেফট রাইট, রাইট লেফট): মুখের মধ্যে একটি 3D কিউব ঘূর্ণন (প্রো)।
• ফেইড অ্যান্ড ফেড আপ (ফ্রি), 3d ফ্লিপ অ্যান্ড রোলওভার (প্রো): নরম প্রকাশ করে যখন আপনি সূক্ষ্ম কিছু চান।
• স্লাইড দিকনির্দেশ এবং তির্যক (প্রো): পিছনের মুখটি এক পাশ বা কোণ থেকে ভিতরে ঠেলে দিন।

সামনের বাক্সটি সেট আপ করুন #

খোলা সামনের বাক্স বিভাগ। এই মুখটি লোকেরা ঘোরাঘুরি করার আগে দেখে, তাই এটি ফ্লিপ উপার্জন করতে হবে।

• আইকন শৈলী এবং আইকন: লাইব্রেরি থেকে একটি আইকন চয়ন করুন। সামনের দিকের একটি ইমেজ প্রো-তে ফ্রন্ট ইমেজ ডিজাইনের বৈচিত্র্যের সাথে আসে।
• শিরোনাম এবং বর্ণনা: সামনের শিরোনাম এবং পাঠ্য, প্রতিটিতে AI বিকল্পের সাথে লিখুন।
• প্রান্তিককরণ এবং শিরোনাম HTML ট্যাগ: বিষয়বস্তু সারিবদ্ধ করুন এবং শিরোনাম স্তর সেট করুন (H1 থেকে H6)।

পিছনের বাক্সটি সেট আপ করুন #

খোলা পিছনের বাক্স মুখের জন্য বিভাগ যা দৃশ্যে উল্টে যায়। এটি সামনের মতো একই ক্ষেত্র নেয়, তাই সামনে একটি ছোট টিজার পিছনের আসল বিবরণে নিয়ে যেতে পারে।

• আইকন: পিছনের মুখের জন্য একটি পৃথক আইকন।
• শিরোনাম এবং বর্ণনা: পিছনের দিকের শিরোনাম এবং পাঠ্য।
• প্রান্তিককরণ এবং HTML ট্যাগ: পিছনের জন্য লেআউট এবং শিরোনাম স্তর।

অ্যাকশন বোতাম যোগ করুন #

দ্য অ্যাকশন বোতাম বিভাগটি পিছনের দিকে থাকে। লেবেল সেট করুন এবং এটি কোথায় নির্দেশ করে, যাতে একটি হোভার সরাসরি একটি পণ্য, একটি ফর্ম বা অন্য পৃষ্ঠায় নিয়ে যেতে পারে।

• বোতাম পাঠ্য: লেবেল, যেমন শুরু করুন বা আরও জানুন।
• লিঙ্ক: সাধারণ এলিমেন্টর লিঙ্ক বিকল্পগুলির সাথে বোতামটি যে URLটি খোলে।

ফ্লিপ কার্ড স্টাইল করুন #

খোলা শৈলী ট্যাব। দ্য সাধারণ বিভাগটি সীমানা নির্ধারণ করে এবং, সেটিং যা এখানে সবচেয়ে গুরুত্বপূর্ণ, ফ্লিপ বক্সের উচ্চতা, যা উভয় মুখকে একটি নির্দিষ্ট আকার দেয়।

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

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

• সার্ভিস কার্ড সামনে একটি আইকন এবং বিশদ বিবরণ এবং পিছনে একটি বোতাম সহ।
• দলের সদস্যরা সামনে একটি ছবি এবং ফ্লিপে একটি বায়ো দেখানো হচ্ছে।
• পণ্য হাইলাইট এটি মূল্য প্রকাশ করে এবং হোভারে একটি বাই বোতাম।
• বৈশিষ্ট্য গ্রিড যেখানে প্রতিটি কার্ড একটি সংক্ষিপ্ত ব্যাখ্যায় উল্টে যায়।
• পোর্টফোলিও টাইলস সামনে একটি থাম্বনেইল এবং পিছনে একটি প্রকল্প লিঙ্ক সহ।

ফ্লিপবক্স উইজেটের সাথে কাজ করার জন্য টিপস #

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

ভিডিও টিউটোরিয়াল দেখুন #

পর্দায় বরাবর অনুসরণ করতে পছন্দ করেন? নীচের ভিডিও টিউটোরিয়ালটি ফ্লিপবক্স উপাদানের মধ্য দিয়ে শুরু থেকে শেষ পর্যন্ত চলে, এটি দেখায় যে কীভাবে অ্যানিমেশন শৈলী, সামনে এবং পিছনের মুখ এবং এলিমেন্টর সম্পাদকে স্টাইলিং কাজ করে।

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

মোড়ানো #

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