ফ্লিপবক্স

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

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

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

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

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

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

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

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

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

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

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

দ্য অ্যানিমেশন স্টাইল ড্রপডাউন মজার অংশ। এটি ত্রিশটিরও বেশি বিকল্প বহন করে, তাই একই কার্ডটি ফ্লিপ, ফেইড, স্লাইড বা কিউব করে পিছনের দিকে যেতে পারে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

মোড়ানো #

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