ফ্লিপবক্স
যদি আপনার পৃষ্ঠায় রিয়েল এস্টেটের এক টুকরো দুটি গল্প বলতে পারে? মাস্টার অ্যাডনস ফ্লিপবক্স এলিমেন্টের সাথে, এটা করতে পারে। এটি শুধুমাত্র একটি কার্ড নয় এবং এটি একটি গতিশীল, দ্বিমুখী অভিজ্ঞতা। একটি আইকন এবং শিরোনাম সমন্বিত একটি আকর্ষক সামনের দিক দিয়ে শুরু করুন। তারপর, হোভারে, এটি বিশদ বিবরণ, কল-টু-অ্যাকশন বা পিছনে অতিরিক্ত তথ্য প্রকাশ করতে মার্জিতভাবে ফ্লিপ করে। একাধিক শৈলী প্রিসেট এবং এক ডজনেরও বেশি মসৃণ অ্যানিমেশন থেকে চয়ন করুন। এটি বৈশিষ্ট্য হাইলাইট, পরিষেবা শোকেস, টিম প্রোফাইল, বা সৃজনশীল কল-টু-অ্যাকশনের জন্য নিখুঁত উপাদান যা অবাক করে এবং জড়িত।
একাধিক ডিজাইন প্রিসেট এবং অ্যানিমেশন প্রিসেট
প্রথমে, চারটি স্টাইল প্রিসেট থেকে আপনার বেস লুক বেছে নিন: ক্লাসিক ডিফল্ট, ফ্রন্ট ইমেজ, ডায়াগোনাল এবং ফ্রন্ট আইকন। প্রতিটি প্রিসেট প্রাথমিক ভিজ্যুয়াল লেআউট পরিবর্তন করে। তারপর, একটি বিশাল লাইব্রেরি থেকে একটি অ্যানিমেশন স্টাইল নির্বাচন করে এটিকে প্রাণবন্ত করুন। একটি সাধারণ ফ্লিপ অনুভূমিক বা উল্লম্ব, একটি অত্যাধুনিক 3D ফ্লিপ, একটি মসৃণ ফেইড, বা কিউব ঘূর্ণন, রোলওভার বা ডায়াগোনালের মতো সৃজনশীল বিকল্পগুলির জন্য যান৷ এই সংমিশ্রণটি আপনাকে ফ্লিপবক্সের আচরণকে আপনার সাইটের শক্তি 1 সূক্ষ্ম বা নাটকীয়তার সাথে পুরোপুরি মেলাতে দেয়।
- চারটি স্টাইল ফাউন্ডেশন: ডিফল্ট, ফ্রন্ট ইমেজ, ডায়াগোনাল এবং ফ্রন্ট আইকন প্রিসেট ডিজাইন থেকে বেছে নিন।
- বিস্তৃত অ্যানিমেশন লাইব্রেরি: ফ্লিপ, ফেড, কিউব, রোলওভার এবং 3D ফ্লিপ সহ 15+ অ্যানিমেশন থেকে নির্বাচন করুন।
- প্রভাব নিয়ন্ত্রণ করুন: অ্যানিমেশনগুলি ডিফল্টরূপে হোভারে ট্রিগার করে, একটি স্বজ্ঞাত, ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করে।
ডুয়াল-সাইড কন্টেন্ট বিল্ডার
স্বাধীনভাবে বিষয়বস্তুর দুটি সম্পূর্ণ মুখ তৈরি করুন। ফ্রন্ট বক্সের জন্য, একটি আইকন যোগ করুন (স্ট্যাকড বা ফ্রেম করা শৈলী চয়ন করুন), একটি শক্তিশালী শিরোনাম এবং একটি ছোট টিজার বিবরণ। এসইও-এর জন্য অ্যালাইনমেন্ট এবং শিরোনাম HTML ট্যাগ সেট করুন। ব্যাক বক্সের জন্য, বিভিন্ন বিষয়বস্তু সহ প্রক্রিয়াটি পুনরাবৃত্তি করুন um বর্ণনায় প্রসারিত করুন, আরও বিশদ যোগ করুন বা সম্পূর্ণভাবে একটি কল-টু-অ্যাকশনে ফোকাস করুন। এই দুই-পর্যায়ের পদ্ধতি আপনাকে সামনের সাথে টিজ করতে এবং পিছনের সাথে বিতরণ করতে দেয়।
- স্বাধীন বিষয়বস্তু প্যানেল: ফ্রন্ট বক্স এবং ব্যাক বক্স বিষয়বস্তুর জন্য সম্পূর্ণ আলাদা নিয়ন্ত্রণ (আইকন, শিরোনাম, বিবরণ)।
- আইকন শৈলী বিকল্প: বিষয়বস্তু ট্যাব থেকে সরাসরি স্ট্যাকড (কঠিন) বা ফ্রেমযুক্ত (সীমানাযুক্ত) হিসাবে আইকনগুলি উপস্থাপন করুন।
- কৌশলগত বার্তাপ্রেরণ: শিরোনাম সুবিধার জন্য সামনে এবং বিশদ, বৈশিষ্ট্য বা সামাজিক প্রমাণের জন্য পিছনে ব্যবহার করুন।
- কাঠামোগত নিয়ন্ত্রণ: প্রতিটি পাশের বিষয়বস্তুর জন্য স্বাধীনভাবে প্রান্তিককরণ (বাম, কেন্দ্র, ডান) সেট করুন।
হোভার সহ CTA বোতাম
পিছনের বাক্সটি শুধুমাত্র তথ্যের জন্য নয় এবং এটি কর্মের জন্য। কাস্টমাইজযোগ্য বোতাম টেক্সট সহ একটি পরিষ্কার অ্যাকশন বোতাম অন্তর্ভুক্ত করুন (যেমন “Buy Now” বা “Learn More”) এবং একটি লিঙ্ক। তারপর, এটি পরিপূর্ণতা ডিজাইন করুন। টেক্সট কালার, টাইপোগ্রাফি, ব্যাকগ্রাউন্ড কালার, বর্ডার, বর্ডার রেডিয়াস এবং প্যাডিং নিয়ন্ত্রণ করে নরমাল এবং হোভার স্টেট আলাদাভাবে স্টাইল করুন। এটি ফ্লিপবক্সের প্রকাশকে রূপান্তরের সরাসরি পথে পরিণত করে, সবগুলোই আলাদা উইজেটের প্রয়োজন ছাড়াই।
- সরাসরি কল-টু-অ্যাকশন: টেক্সট এবং লিঙ্ক সহ একটি বোতাম যোগ করুন যা ফ্লিপের পরে পিছনের বাক্সে প্রদর্শিত হবে।
- পেশাদার বোতাম স্টাইলিং: একটি পালিশ বোতামের জন্য বর্ডার ব্যাসার্ধ, প্যাডিং এবং পটভূমি নিয়ন্ত্রণ ব্যবহার করুন।
ফ্লিপবক্সের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
মোবাইল ডিভাইসে কি হবে যেখানে কোন হোভার নেই?
ফ্লিপ মিথস্ক্রিয়া সাধারণত মোবাইল ডিভাইসে একটি ট্যাপ দ্বারা ট্রিগার হয়। ব্যবহারকারী সামনের বাক্সটিকে পিছনের দিকে ফ্লিপ করতে ট্যাপ করে এবং পিছনে ফ্লিপ করতে আবার ট্যাপ করতে পারে। এটি টাচস্ক্রিনে এটিকে সম্পূর্ণরূপে কার্যকরী এবং স্বজ্ঞাত করে তোলে।
আমি কি সামনের দিকে একটি আইকনের পরিবর্তে একটি চিত্র ব্যবহার করতে পারি?
হ্যাঁ! স্টাইল প্রিসেটগুলির মধ্যে একটিকে বলা হয় "ফ্রন্ট ইমেজ৷” এই প্রিসেটটি নির্বাচন করলে আইকন নির্বাচককে একটি চিত্র আপলোডারে পরিবর্তন করা হবে, যা আপনাকে সামনের বাক্সে প্রধান ভিজ্যুয়াল হিসাবে একটি ফটো, লোগো বা গ্রাফিক ব্যবহার করতে দেয়৷।
ফ্লিপবক্স বিষয়বস্তু প্রতিক্রিয়াশীল?
একেবারে। ভিতরের টেক্সট, আইকন এবং বোতামটি বিভিন্ন স্ক্রিনের আকারে যথাযথভাবে স্কেল এবং মোড়ানো হবে। আপনার সেট করা ফ্লিপ বক্সের উচ্চতাও প্রতিক্রিয়াশীল, তবে প্রয়োজনে আপনি এলিমেন্টরের প্রতিক্রিয়াশীল সম্পাদনা মোড ব্যবহার করে মোবাইলের জন্য বিশেষভাবে এটি সামঞ্জস্য করতে পারেন।
এই উপাদানের জন্য একটি ভাল বাস্তব-বিশ্ব ব্যবহার কি?
- পরিষেবা বাক্স: সামনে: পরিষেবা আইকন এবং নাম (যেমন, “Web Design”)। পিছনে: বর্ণনা এবং “একটি উদ্ধৃতি পান" বোতাম।
- টিম প্রোফাইল: সামনে: ছবি এবং নাম। পিছনে: জৈব এবং সামাজিক লিঙ্ক।
- পণ্য বৈশিষ্ট্য: সামনে: বৈশিষ্ট্য আইকন এবং শিরোনাম। পিছনে: বিস্তারিত চশমা এবং "পণ্য দেখুন" লিঙ্ক।
- পরিসংখ্যান: সামনে: একটি বড় সংখ্যা। পিছনে: এর অর্থ কী এবং একটি উত্স লিঙ্ক।
আমি কি আলাদা বোতাম ছাড়া পুরো ফ্লিপবক্সটিকে একটি পৃষ্ঠায় লিঙ্ক করতে পারি?
ডিফল্টরূপে আপনি শুধুমাত্র বোতামে লিঙ্ক যোগ করতে পারেন। কিন্তু আমাদের র্যাপার লিঙ্ক এক্সটেনশনের সাহায্যে, আপনি সম্পূর্ণ ফ্লিপবক্স লিঙ্ক করতে পারেন।
আমি কিভাবে সঠিক অ্যানিমেশন নির্বাচন করব?
আপনার সাইটের গতি বিবেচনা করুন। কর্পোরেট বা পরিষ্কার সাইটগুলির জন্য, ফ্লিপ অনুভূমিক/উল্লম্ব বা ফেইড ব্যবহার করুন। সৃজনশীল, প্রযুক্তি বা পোর্টফোলিও সাইটগুলির জন্য, 3D ফ্লিপ, কিউব বা রোলওভার আরও ব্যক্তিত্ব যোগ করতে পারে। কয়েকটি প্রিভিউ করুন এবং সেরাটি মসৃণ বোধ করে এবং আপনার বার্তা থেকে বিভ্রান্ত হয় না।
ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।
গ্লাসমরফিজম
ধারক অতিরিক্ত
নিদর্শন
পোস্ট/পেজ ডুপ্লিকেটর
