پہلے اور بعد میں سیکشن دو تصاویر کو ایک ڈیوائیڈر کے ساتھ ایک دوسرے کے اوپر رکھتا ہے۔ خریدار ڈیوائیڈر کو گھسیٹ کر ایک یا دوسری تصویر کا زیادہ حصہ دیکھتے ہیں۔ اسے نتائج (پہلے اور بعد میں)، دو رنگوں، یا کسی پروڈکٹ کی دو فنشز دکھانے کے لیے استعمال کریں۔
سیکشن شامل کریں
- بلڈر کھولیں اور اپنی پسند کے صفحے پر جائیں۔ یہ ہوم، پروڈکٹ، لینڈنگ، مجموعہ اور مجموعوں کے صفحات پر کام کرتا ہے، ایک صفحے پر زیادہ سے زیادہ 3۔
- سیکشنز ٹیب میں نیا سیکشن شامل کریں پر کلک کریں اور مواد گروپ سے پہلے اور بعد میں چنیں۔
- اس کے اندر پہلے اور بعد میں بلاک پر کلک کریں اور اپنی دو تصاویر چنیں، پھر شائع کریں پر کلک کریں۔
پہلے اور بعد میں بلاک
اس بلاک میں دونوں تصاویر ہوتی ہیں۔ یہ ہمیشہ سیکشن میں رہتا ہے اور ہٹایا نہیں جا سکتا۔
- پہلے کی تصویر اور بعد کی تصویر: دونوں تصاویر۔ ایک ہی زاویے سے لی گئی تصاویر استعمال کریں، تاکہ وہ ایک دوسرے پر ٹھیک بیٹھیں۔
- پہلے کا لیبل اور بعد کا لیبل: ہر تصویر کے کونے پر ایک چھوٹا ٹیگ، جیسے "پہلے" اور "بعد میں"، یا "کالا" اور "سفید"۔ ٹیگ چھپانے کے لیے اسے خالی چھوڑ دیں۔
- سمت: افقی ایسا ڈیوائیڈر استعمال کرتا ہے جسے خریدار دائیں بائیں گھسیٹتے ہیں۔ عمودی ایسا ڈیوائیڈر استعمال کرتا ہے جسے خریدار اوپر نیچے گھسیٹتے ہیں۔
- تناسب: فریم کی شکل۔ خودکار پہلے کی تصویر کے مطابق چلتا ہے، یا پورٹریٹ، مربع یا لینڈ اسکیپ چنیں۔ دونوں تصاویر ایک ہی فریم میں کاٹی جاتی ہیں۔
- ڈیوائیڈر کی جگہ: ڈیوائیڈر کہاں سے شروع ہو، 5% سے 95% تک۔ 50% پر خریدار ہر تصویر کا آدھا حصہ دیکھتے ہیں۔
- نظر آنے پر اشارہ دکھائیں: ڈیوائیڈر خود تھوڑا سا ہلتا ہے، تاکہ خریدار سمجھ جائیں کہ وہ اسے گھسیٹ سکتے ہیں۔
- کمپیوٹر پر ماؤس کے ساتھ چلیں: کمپیوٹر پر ڈیوائیڈر بغیر کلک کے ماؤس کے ساتھ چلتا ہے۔ فون پر خریدار ہمیشہ گھسیٹتے ہیں۔
- پیرنٹ رنگ اسکیم استعمال کریں: ڈیوائیڈر، ہینڈل اور ٹیگز سیکشن کے رنگ استعمال کرتے ہیں۔ کوئی اور رنگ اسکیم چننے کے لیے اسے بند کریں۔
سیکشن کی ترتیبات اور عنوان
سرخی اور مختصر متن کے لیے زیادہ سے زیادہ 2 متن بلاکس، 1 ڈیوائیڈر اور 1 گروپ شامل کریں۔
- سمت: عمودی سرخی کو تصاویر کے اوپر رکھتا ہے، افقی اسے ان کے ساتھ رکھتا ہے۔
- موبائل پر عمودی ترتیب: ڈیفالٹ طور پر آن، تاکہ تصاویر فون کی پوری چوڑائی لیں۔
- پوزیشن اور سیدھ، سیکشن کی چوڑائی، رنگ اسکیم، پیڈنگ، اور حسب ضرورت CSS ٹیب۔
پروڈکٹ پیج پر
یہی پہلے اور بعد میں بلاک پروڈکٹ کی معلومات اور لینڈنگ کی معلومات سیکشنز کے اندر، اور کھلنے بند ہونے والے ٹیبز کے اندر بھی رکھا جا سکتا ہے، تاکہ موازنہ خریدنے کے بٹن کے پاس رہے۔ دیکھیں میں اپنے پروڈکٹ پیج پر کھلنے بند ہونے والے ٹیبز، ڈیلیوری کی تاریخیں، سائز گائیڈ، بیجز یا پہلے اور بعد کی تصاویر کیسے شامل کروں؟
جاننے کی باتیں
- آپ کے لائیو اسٹور پر موازنہ تب ہی نظر آتا ہے جب دونوں تصاویر چن لی جائیں۔ تب تک بلڈر نمونے کی تصاویر دکھاتا ہے۔
- خریدار کی بورڈ سے بھی ڈیوائیڈر ہلا سکتے ہیں۔
- جن خریداروں نے اپنے آلے پر کم حرکت (reduced motion) آن کی ہو، انہیں اشارے والی حرکت نظر نہیں آتی۔
- تصاویر کٹی ہوئی لگتی ہیں؟ اپنی تصاویر سے سب سے قریب تناسب چنیں، یا ایک ہی شکل کی تصاویر استعمال کریں۔
- صرف حقیقی نتائج کی حقیقی تصاویر استعمال کریں۔