এলিমেন্টর ফ্লিপবক্স উইজেট: ইন্টারেক্টিভ হোভার কার্ড তৈরি করুন (ফ্রি টিউটোরিয়াল)

এলিমেন্টর ফ্লিপ বক্স উইজেট গাইড বৈশিষ্ট্যযুক্ত চিত্র একটি আইকন এবং শিরোনাম, একটি তীর এবং বেগুনি রঙের একটি বর্ণনা সহ একটি ফ্লিপ কার্ডের সামনের অবস্থায় এবং একটি উদ্ধৃতি পান বোতাম, লেবেলযুক্ত 30+ অ্যানিমেশন, বিনামূল্যের উইজেট, কোনও প্রো নেই প্রয়োজনীয়

একটি ফ্লিপ বক্স হল দুটি মুখ বিশিষ্ট একটি কার্ড। সামনে একটি আইকন এবং একটি ছোট শিরোনাম বহন করে। এটি ঘোরান, এবং কার্ডটি বর্ণনা এবং একটি বোতাম ধরে পিছনের দিকে ঘোরে। Elementor Pro একটি জাহাজ। একটি পেতে আপনার প্রো লাগবে না।

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

সামনের প্রান্তে তিনটি এলিমেন্টর ফ্লিপ বক্স কার্ড: একটি ইমেজ-লেড কার্ড, বর্ণনা টেক্সট সহ একটি লাল পিছনের মুখ এবং একটি এলিমেন্টর আইকন এবং শিরোনাম সহ একটি সাদা সামনের মুখ৷
আপনি কি নির্মাণ করছেন।

একটি ফ্লিপ বক্স আসলে কি

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

আপনি প্রথমে একটি স্ক্যানযোগ্য সারি দেখান, তারপর আগ্রহী যে কেউ নিজেরাই বিস্তারিত টানুন। তারা যে পরিষেবার জন্য এসেছে তা খুঁজে পেতে কাউকে কপির প্রাচীর পড়তে হবে না। যে একটি জন্য পৌঁছানোর কারণ।

চারটি নিদর্শন এটি ভালভাবে পরিচালনা করে:

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

Elementor একটি ফ্লিপ বক্স উইজেট আছে?

Elementor Pro এর একটি আছে। বিনামূল্যে Elementor করে না। এই পার্থক্যটি গুরুত্বপূর্ণ, কারণ প্রচুর টিউটোরিয়াল এটিকে অস্পষ্ট করে দেয় এবং তারপরে লোকেরা তাদের প্যানেলে নেই এমন একটি উইজেট খুঁজতে যায়।

সুতরাং একটি ফ্লিপ বক্সের চারটি সৎ রুট রয়েছে এবং প্রতিটি আলাদা কিছুর জন্য জিজ্ঞাসা করে:

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

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

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

  • এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
  • Elementor ইনস্টল এবং সক্রিয় জন্য মাস্টার অ্যাডঅন। এটি WordPress।org-এ বিনামূল্যে এবং 30,000+ সাইটে চলে।
  • উভয় মুখের জন্য আইকন, অনুলিপি এবং গন্তব্য লিঙ্ক। এই প্রথম সাজান। আপনি কপি উদ্ভাবন করার সময় একটি কার্ড ডিজাইন করলে আপনি একটি লাইভ পৃষ্ঠায় "Lorem ipsum" দিয়ে শেষ করবেন।

ধাপে ধাপে একটি ফ্লিপ বক্স তৈরি করুন

ধাপ 1: ফ্লিপবক্স উইজেট সক্ষম করুন

মাস্টার অ্যাডনস প্রতিটি উইজেটকে টগলের পিছনে রাখে যাতে আপনি যেগুলি ব্যবহার করেন না সেগুলি কখনই লোড হয় না। যাও মাস্টার অ্যাডঅন → সেটিংস, খুলুন উপাদান ট্যাব, ফ্লিপবক্স খুঁজুন, এটি চালু করুন, সংরক্ষণ করুন।

কোন টগল? প্লাগইন আপডেট করুন। এলিমেন্ট ট্যাবটি সংস্করণের মধ্যে বেড়েছে এবং পুরানো গ্রুপ জিনিসগুলিকে ভিন্নভাবে তৈরি করে।

ধাপ 2: পৃষ্ঠায় উইজেট ড্রপ

Elementor দিয়ে যেকোনো পৃষ্ঠা সম্পাদনা করুন, উইজেট অনুসন্ধানে "Flipbox”" টাইপ করুন, এটি একটি পাত্রে টেনে আনুন। এটি উভয় মুখের নমুনা সামগ্রী সহ লোড হয়, ইতিমধ্যেই উল্টে যাচ্ছে৷।

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

ফ্লিপবক্স সহ এলিমেন্টর উইজেট প্যানেল অনুসন্ধান করা হয়েছে এবং মাস্টার অ্যাডনস ফ্লিপবক্স উইজেট ক্যানভাসে টেনে আনার জন্য প্রস্তুত৷

ধাপ 3: একটি ডিজাইনের বৈচিত্র বেছে নিন

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

এলিমেন্টরে ফ্লিপবক্স কন্টেন্ট ট্যাব ডিজাইন ভ্যারিয়েশন এবং অ্যানিমেশন স্টাইল কন্ট্রোল সহ স্টাইল প্রিসেট বিভাগ দেখাচ্ছে

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

এলিমেন্টর ফ্লিপ বক্স উইজেটের জন্য ডিজাইন ভেরিয়েশন সিলেক্টর উপলব্ধ ফ্রন্ট-ফেস লেআউট প্রিসেটগুলি দেখায়

ধাপ 4: অ্যানিমেশন চয়ন করুন

অ্যানিমেশন স্টাইল ড্রপডাউন ত্রিশটিরও বেশি প্রভাব বহন করে। তারা চারটি দলে বিভক্ত:

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

একটি বাছাই করুন এবং বিভাগ জুড়ে এটি প্রতিশ্রুতিবদ্ধ। ছয়টি কার্ড ছয়টি ভিন্ন উপায়ে উল্টানো কৌতুকপূর্ণ দেখায় না, এটি ভাঙা দেখায়। মিশ্রিত করার একমাত্র ভাল কারণ হল যখন দুটি বিভাগ ইচ্ছাকৃতভাবে আলাদা বোধ করতে হবে।

এলিমেন্টর ফ্লিপ বক্স উইজেটে অ্যানিমেশন স্টাইল ড্রপডাউন খোলা হয়েছে ফ্লিপ, কিউব, ফেইড, রোলওভার এবং স্লাইড বিকল্পগুলি দেখাচ্ছে৷

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

ধাপ 5: সামনের মুখটি লিখুন

খোলা সামনের বাক্স। এই মুখ যে হোভার উপার্জন করতে হবে, তাই এটি আপনার ভাবার চেয়ে কম কপি পায়, বেশি নয়।

  • আইকন স্টাইল এবং আইকন। আইকন লাইব্রেরি থেকে টানুন বা একটি ছবিতে স্যুইচ করুন। মাস্টার অ্যাডনস অতিরিক্ত জাহাজ আইকন লাইব্রেরি আপনার প্রয়োজন হলে ফন্টের বাইরেও দুর্দান্ত।
  • শিরোনাম। তিন থেকে পাঁচটি শব্দ। এটি ট্যাবলেট প্রস্থে এক লাইনে বেঁচে থাকতে হবে।
  • বর্ণনা। এক লাইন। শিরোনাম এবং বর্ণনা উভয় ক্ষেত্রেই একটি আছে AI দিয়ে লিখুন আপনি আটকে থাকলে প্যানেলে তৈরি বিকল্প।
  • প্রান্তিককরণ এবং শিরোনাম HTML ট্যাগ। H1 থেকে H6। এটি সঠিকভাবে সেট করুন। একটি বিভাগের ভিতরে H2 শিরোনাম সহ ছয়টি ফ্লিপ বাক্সের একটি গ্রিড যেখানে ইতিমধ্যে একটি H2 রয়েছে আপনাকে পৃষ্ঠায় সাতটি H2 দেয় এবং একটি অডিট টুল যা এটিকে পতাকা দেয়। একই যত্ন একটি মধ্যে যে কোনো পুনরাবৃত্তি ব্লক প্রযোজ্য কাস্টম এলিমেন্টর লেআউট.
আইকন, শিরোনাম, বিবরণ এবং শিরোনাম HTML ট্যাগ ক্ষেত্র সহ এলিমেন্টর ফ্লিপ বক্স উইজেটের জন্য ফ্রন্ট বক্স সামগ্রী নিয়ন্ত্রণ

ধাপ 6: পিছনের মুখ লিখুন

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

যে নিয়মটি এই বিভাগটিকে উপযোগী রাখে: সামনে প্রতিশ্রুতি দেয়, পিছনে রাখে। যদি সামনে বলে “Web Design”, পিছনে বলে আসলে কি অন্তর্ভুক্ত করা হয়েছে এবং পৃষ্ঠার লিঙ্ক। কেউ ঘোরাফেরা করেছে কারণ সামনে তাদের ধরেছে। তথ্য দিয়ে তা পরিশোধ করুন, অন্য স্লোগান নয়।

দুই বা তিনটি বাক্য। লম্বা এবং কার্ডটি ট্যাবলেটের প্রস্থে সঙ্কুচিত বোধ করে, যেখানে কার্ডটি সংকীর্ণ কিন্তু পাঠ্যটি সঙ্কুচিত হয়নি।

এলিমেন্টর ফ্লিপ বক্স উইজেটের নিজস্ব আইকন, শিরোনাম এবং বর্ণনা ক্ষেত্র সহ ব্যাক বক্স সামগ্রী নিয়ন্ত্রণ

ধাপ 7: অ্যাকশন বোতাম যোগ করুন

দ্য অ্যাকশন বোতাম বিভাগটি একটি লেবেল এবং একটি লিঙ্ক সেট করে এবং বোতামটি শুধুমাত্র পিছনের দিকে রেন্ডার করে। পরবর্তী পৃষ্ঠাটি আসলে কী সরবরাহ করে তাতে পাঠ্য সেট করুন। “আরো জানুন" ঠিক আছে। “মূল্য দেখুন" ভাল, যখন লিঙ্কটি মূল্য নির্ধারণে যায়।

একটি বিশুদ্ধভাবে তথ্যগত গ্রিডে বোতামটি সম্পূর্ণভাবে এড়িয়ে যান। একটি কার্ড যা একটি বিবরণে ফ্লিপ করে এবং থামে একটি পুরোপুরি ভাল কার্ড। বিভাগটি রূপান্তরের কাজ করার সময় এটি যোগ করুন।

এলিমেন্টর ফ্লিপ বক্স উইজেটে অ্যাকশন বোতাম বিভাগটি বোতামের পাঠ্য এবং লিঙ্ক ক্ষেত্রগুলি দেখাচ্ছে

একটি সেটিং যা বেশিরভাগ ফ্লিপ বক্স অভিযোগ ঠিক করে

সুইচ শৈলী ট্যাব এবং খুলুন সাধারণ. একটি নিয়ন্ত্রণ বলা আছে ফ্লিপ বক্সের উচ্চতা.

ঠিক কর।

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

200px একটি সংবেদনশীল মেঝে। 350px বেশিরভাগ বৈশিষ্ট্য গ্রিডের জন্য উপযুক্ত। কন্টেইনার স্তরে একবার এটি সেট করুন এবং সারির প্রতিটি কার্ড মেলে।

এলিমেন্টর ফ্লিপ বক্স উইজেটের জন্য স্টাইল ট্যাব সাধারণ বিভাগ ফ্লিপ বক্সের উচ্চতা এবং সীমানা নিয়ন্ত্রণ দেখাচ্ছে

আপনি যখন সাধারণভাবে আছেন, অ্যানিমেশনের সময়কাল 400ms থেকে 700ms এর মধ্যে রাখুন। একটি ত্রুটি হিসাবে দ্রুত পড়া। ফ্লিপ শেষ হওয়ার আগে ধীর এবং কার্সার এগিয়ে গেছে।

দুই মুখের স্টাইলিং

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

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

ব্যাকগ্রাউন্ড, টাইপোগ্রাফি এবং আইকন কালার কন্ট্রোল সহ এলিমেন্টর ফ্লিপ বক্স উইজেটের জন্য ফ্রন্ট বক্স স্টাইলিং প্যানেল

সাইটের অন্য সব জায়গায় বোতামের সাথে মেলে বোতামের স্বাভাবিক এবং হোভার স্টেট স্টাইল করুন। একটি ফ্লিপ বক্স বোতাম যা আপনার অন্যান্য CTA-এর মতো দেখতে কিছুই দেখায় না একটি এমবেডেড বিজ্ঞাপন হিসাবে পড়ে।

তিনটি এলিমেন্টর ফ্লিপ বক্স একটি তিন-কলামের ফ্লেক্সবক্স পাত্রে সাজানো উচ্চতা মিলে
একটি ফ্লেক্স পাত্রে তিনটি কার্ড, মিলিত উচ্চতা।

পুরো কার্ডটি ক্লিকযোগ্য করা হচ্ছে

ডিফল্টরূপে লিঙ্কটি বোতামে বসে, কার্ডে নয়। লোকেরা কার্ডের বডিতে ক্লিক করার চেষ্টা করে, কিছুই ঘটে না এবং তারা চলে যায়। এটি একটি ছোট জিনিস যা প্রকৃত ক্লিকের খরচ।

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

র্যাপার লিঙ্ক এক্সটেনশন সক্ষম করা সহ মাস্টার অ্যাডঅন সেটিংস স্ক্রীন
এলিমেন্টর অ্যাডভান্সড ট্যাবে র্যাপার লিঙ্ক বিভাগ, একটি সম্পূর্ণ ফ্লিপ বক্স ক্লিকযোগ্য করতে ব্যবহৃত হয়

একটি সতর্কতা: যদি পুরো কার্ডটি কোথাও লিঙ্ক করে এবং বোতামটি অন্য কোথাও লিঙ্ক করে, তবে দর্শক প্রথমে যেটি আঘাত করে সে জিতবে এবং অন্যটি কখনই ব্যবহার করা হবে না। তাদের একই গন্তব্যে নির্দেশ করুন, অথবা বোতামটি ফেলে দিন।

মোবাইল: যে অংশটি মানুষকে বের করে দেয়

ফোনের কোন হোভার নেই। পরিবর্তে ট্যাপে ফ্লিপ ফায়ার হয়। প্রথম ট্যাপটি কার্ডটিকে পিছনের দিকে ফ্লিপ করে, দ্বিতীয় ট্যাপটি এটিকে বাড়িতে ফ্লিপ করে এবং পিছনে দেখানোর পরে বোতামটির নিজস্ব একটি ট্যাপ প্রয়োজন৷।

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

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

যা নিয়মের দিকে নিয়ে যায় যা এখানে যেকোনো স্টাইলিং পছন্দের চেয়ে বেশি গুরুত্বপূর্ণ:

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

একটি ফোনে একটি এলিমেন্টর ফ্লিপ বক্সের চিত্র: সামনের মুখ, প্রথম ট্যাপের পরে বোতাম সহ পিছনের মুখ এবং দ্বিতীয় ট্যাপের পরে আবার সামনের মুখ৷
একটি ফোন ভিজিটর এবং বোতামের মধ্যে দুটি ট্যাপ দাঁড়ায়।

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

অ্যাক্সেসযোগ্যতা, সত্যই

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

দুটি জিনিস এটিকে রক্ষাযোগ্য করে তোলে:

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

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

দুটি এলিমেন্টর ফ্লিপ বক্স কার্ডের তুলনা করা হয়েছে: একটি কীবোর্ড ফোকাস ছাড়াই ট্যাব অতীত এড়িয়ে যায় এবং একটি দৃশ্যমান বেগুনি ফোকাস রিং এবং একটি পৌঁছানো যায় এমন বোতাম সহ
একই কার্ড, একটি পার্থক্য: একটি দৃশ্যমান ফোকাস রিং।

কখন ফ্লিপ বক্স এড়িয়ে যাবেন

তিনটি পরিস্থিতিতে যেখানে একটি ভিন্ন উইজেট আপনাকে আরও ভাল পরিবেশন করে।

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

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

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

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

ফ্রি বনাম প্রো

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

বৈশিষ্ট্যবিনামূল্যেপ্রো
ফ্লিপবক্স উইজেট, সমস্ত ডিজাইনের বৈচিত্রহ্যাঁহ্যাঁ
সমস্ত 30+ ফ্লিপ অ্যানিমেশনহ্যাঁহ্যাঁ
উভয় মুখের জন্য পৃথক স্টাইলিংহ্যাঁহ্যাঁ
ফ্লিপ বক্স উচ্চতা এবং প্রতিক্রিয়াশীল নিয়ন্ত্রণহ্যাঁহ্যাঁ
মোড়ক লিঙ্ক এক্সটেনশনহ্যাঁহ্যাঁ
সম্পূর্ণ 80+ উইজেট লাইব্রেরিআংশিকহ্যাঁ
উইজেট নির্মাতা এবং টেমপ্লেট কিটনাহ্যাঁ
অগ্রাধিকার সমর্থনসম্প্রদায়হ্যাঁ

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

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

Elementor এ একটি ফ্লিপ বক্স কি?

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

এলিমেন্টরে কি ফ্লিপ বক্স উইজেট বিনামূল্যে?

Elementor এর নিজস্ব ফ্লিপ বক্স উইজেট Elementor Pro এর অংশ, তাই এটি বিনামূল্যে নয়। মাস্টার অ্যাডনস ফ্লিপবক্স উইজেটটি WordPress।org-এর বিনামূল্যের প্লাগইনে অন্তর্ভুক্ত করা হয়েছে এবং নিয়মিত এলিমেন্টরের সাথে কাজ করে, যাতে আপনি প্রো লাইসেন্স ছাড়াই একটি তৈরি করতে পারেন।

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

মাস্টার অ্যাডঅন → সেটিংস → উপাদানগুলির অধীনে ফ্লিপবক্স সক্ষম করুন, তারপরে এলিমেন্টর সম্পাদকে একটি পৃষ্ঠা খুলুন, উইজেট অনুসন্ধানে "ফ্লিপবক্স" টাইপ করুন এবং এটি একটি পাত্রে টেনে আনুন৷ যদি এটি অনুসন্ধানে প্রদর্শিত না হয়, টগলটি এখনও চালু নেই বা সম্পাদকের পুনরায় লোড করা প্রয়োজন৷।

কেন আমার ফ্লিপ বক্স মোবাইলে ফিরে আসে না?

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

আমি কি সামনের দিকে একটি আইকনের পরিবর্তে একটি চিত্র ব্যবহার করতে পারি?

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

আমি কি পুরো ফ্লিপ বক্সটিকে ক্লিকযোগ্য করতে পারি, শুধু বোতাম নয়?

উইজেটের ভিতর থেকে নয়। লিঙ্কটি ডিফল্টরূপে বোতামে বসে। পুরো কার্ডটিকে ক্লিকযোগ্য করতে, মাস্টার অ্যাডঅন সেটিংসে র্যাপার লিঙ্ক এক্সটেনশনটি সক্ষম করুন এবং এটি ফ্লিপ বক্স কন্টেইনারে প্রয়োগ করুন, যা পুরো কার্ডটিকে একটি লিঙ্কে মোড়ানো হয়।

আমি কিভাবে কার্ডের উভয় দিক একই আকারের রাখব?

স্টাইল ট্যাবের সাধারণ বিভাগে ফ্লিপ বক্সের উচ্চতা সেট করুন। এটি উভয় মুখকে একটি নির্দিষ্ট উচ্চতা দেয়, তাই যখন পিছনের মুখটি সামনের চেয়ে বেশি পাঠ্য বহন করে তখন কার্ডটি মধ্য-ফ্লিপের আকার পরিবর্তন করে না।

উইজেটে কতগুলি ফ্লিপ অ্যানিমেশন আছে?

ফ্লিপ অনুভূমিক এবং উল্লম্ব, চারটি ঘনক্ষেত্রের দিকনির্দেশ, 3d ফ্লিপ, ফেইড, ফেড আপ, রোলওভার, স্লাইডের দিকনির্দেশ এবং তির্যক সহ ত্রিশটিরও বেশি। আপনি কার্ড প্রতি একটি বাছাই।

রায় জেমির ছবি
রায় জেমি
আমি রয় জেমি, কনটেন্ট র্যাংলার এবং পিক্সার ল্যাবসের মার্কেটার, এলিমেন্টরের জন্য মাস্টার অ্যাডঅনসে কাজ করছি। আমি টিউটোরিয়াল লিখি, ভিডিও রেকর্ড করি এবং ডকুমেন্টেশন বর্তমান রাখি, তাই আপনি সর্বদা জানেন কিভাবে প্রতিটি বৈশিষ্ট্য ব্যবহার করতে হয়। আমি সমর্থনও পরিচালনা করি, তাই আপনি যদি কোনও সমস্যায় পড়েন তবে আমিই সেই ব্যক্তি যিনি আপনাকে এটি ঠিক করতে সহায়তা করেন। বাস্তব উত্তর, এমন একজনের কাছ থেকে যিনি প্রতিদিন এই সরঞ্জামগুলি ব্যবহার করেন।
সেপ্টেম্বর বিক্রয়

40% সবকিছু বন্ধ

প্রতিটি মাস্টার অ্যাডনস প্রো প্ল্যান, বার্ষিক এবং জীবনকাল। একটি কোড, আট দিন।

00দিন
00ঘন্টা
00মিনিট
00সেকেন্ড

সোমবার 14 সেপ্টেম্বর, 23:59 ET শেষ হয়৷

  • ব্যক্তিগত1 সাইট $129$77
  • ব্যবসা5 সাইট $199$119
  • বিকাশকারীসীমাহীন সাইটএজেন্সিগুলির জন্য সেরা $599$359

একবার পরিশোধ করুন। কোন পুনর্নবীকরণ, কখনও।

কুপন কোড MALIFE40
এখন 40% ছাড় পান
  • 30,000+ সক্রিয় ইনস্টল
  • 212টি পর্যালোচনা থেকে 4.5/5
  • 14 দিনের টাকা ফেরত