আগে ও পরে সেকশন দুটি ছবি একটির উপর আরেকটি রাখে, মাঝে একটি ডিভাইডারসহ। ক্রেতারা ডিভাইডার টেনে একটি বা অন্য ছবির বেশি অংশ দেখেন। ফলাফল (আগে ও পরে), দুটি রং বা কোনো প্রোডাক্টের দুটি ফিনিশ দেখাতে এটি ব্যবহার করুন।
সেকশনটি যোগ করুন
- বিল্ডার খুলুন এবং যে পেজে চান সেখানে যান। এটি হোম, প্রোডাক্ট, ল্যান্ডিং, কালেকশন ও সব কালেকশন পেজে কাজ করে, প্রতি পেজে সর্বোচ্চ 3টি।
- সেকশন ট্যাবে নতুন সেকশন যোগ করুন ক্লিক করুন এবং কনটেন্ট গ্রুপ থেকে আগে ও পরে বেছে নিন।
- এর ভিতরের আগে ও পরে ব্লকে ক্লিক করে আপনার দুটি ছবি বেছে নিন, তারপর প্রকাশ করুন ক্লিক করুন।
আগে ও পরে ব্লক
এই ব্লকে দুটি ছবি থাকে। এটি সবসময় সেকশনে থাকে এবং সরানো যায় না।
- আগের ছবি এবং পরের ছবি: দুটি ছবি। একই কোণ থেকে তোলা ছবি ব্যবহার করুন, যাতে দুটো মিলে যায়।
- আগের লেবেল এবং পরের লেবেল: প্রতিটি ছবির কোণে একটি ছোট ট্যাগ, যেমন "আগে" ও "পরে", অথবা "কালো" ও "সাদা"। ট্যাগ লুকাতে খালি রাখুন।
- দিক: আড়াআড়ি এমন একটি ডিভাইডার ব্যবহার করে যা ক্রেতারা বাঁয়ে-ডানে টানেন। লম্বালম্বি এমন একটি ডিভাইডার ব্যবহার করে যা ক্রেতারা উপরে-নিচে টানেন।
- অনুপাত: ফ্রেমের আকার। অটো আগের ছবিকে মেনে চলে, অথবা বেছে নিন পোর্ট্রেট, স্কয়ার বা ল্যান্ডস্কেপ। দুটি ছবিই একই ফ্রেমে কাটা হয়।
- ডিভাইডারের অবস্থান: ডিভাইডার কোথা থেকে শুরু হবে, 5% থেকে 95%। 50%-এ ক্রেতারা প্রতিটি ছবির অর্ধেক দেখেন।
- দেখা গেলে একটি হিন্ট দেখান: ডিভাইডার নিজে থেকে একটু নড়ে, যাতে ক্রেতারা বোঝেন এটি টানা যায়।
- ডেস্কটপে মাউস অনুসরণ করুক: কম্পিউটারে ক্লিক ছাড়াই ডিভাইডার মাউসকে অনুসরণ করে। ফোনে ক্রেতারা সবসময় টানেন।
- প্যারেন্টের কালার স্কিম ব্যবহার করুন: ডিভাইডার, হ্যান্ডেল ও ট্যাগ সেকশনের রং ব্যবহার করে। অন্য কালার স্কিম বেছে নিতে এটি বন্ধ করুন।
সেকশনের সেটিংস ও টাইটেল
একটি হেডিং ও ছোট টেক্সটের জন্য সর্বোচ্চ 2টি টেক্সট ব্লক, 1টি ডিভাইডার এবং 1টি গ্রুপ যোগ করুন।
- দিক: লম্বালম্বি হেডিংকে ছবিগুলোর উপরে বসায়, আড়াআড়ি সেটিকে পাশে বসায়।
- মোবাইলে উপর-নিচে সাজান: ডিফল্টভাবে চালু, যাতে ছবিগুলো ফোনের পুরো প্রস্থ পায়।
- অবস্থান ও অ্যালাইনমেন্ট, সেকশনের প্রস্থ, কালার স্কিম, প্যাডিং এবং একটি কাস্টম CSS ট্যাব।
প্রোডাক্ট পেজে
একই আগে ও পরে ব্লক প্রোডাক্টের তথ্য ও ল্যান্ডিং তথ্য সেকশনের ভিতরে এবং কলাপসিবল ট্যাবের ভিতরেও বসানো যায়, যাতে তুলনাটি কেনার বাটনের পাশে থাকে। দেখুন প্রোডাক্ট পেজে কলাপসিবল ট্যাব, ডেলিভারির তারিখ, সাইজ গাইড, ব্যাজ বা আগে ও পরের ছবি কীভাবে যোগ করব?
জেনে রাখুন
- আপনার লাইভ স্টোরে দুটি ছবিই বাছাই করার পরেই তুলনাটি দেখায়। ততক্ষণ বিল্ডার নমুনা ছবি দেখায়।
- ক্রেতারা কীবোর্ড দিয়েও ডিভাইডার সরাতে পারেন।
- যেসব ক্রেতা নিজের ডিভাইসে কম মোশন (reduced motion) চালু করেছেন, তারা হিন্টের নড়াচড়া দেখেন না।
- ছবি কাটা দেখাচ্ছে? আপনার ছবির সবচেয়ে কাছের অনুপাত বেছে নিন, অথবা একই আকারের ছবি ব্যবহার করুন।
- শুধু সত্যিকারের ফলাফলের সত্যিকারের ছবি ব্যবহার করুন।