متن کے علاوہ دیگر عناصر، جیسے بیک گراؤنڈ امیجز اور بٹن یو آر ایل، کو ایک کلیکشن پیج پر موجود مجموعے سے متحرک طور پر کیسے حاصل کیا جا سکتا ہے؟
Webflow CMS کے اندر ایک مجموعہ صفحہ پر موجود پس منظر کی تصاویر اور بٹن URLs جیسے عناصر کو متحرک طور پر ماخذ کرنے کے لیے، یہ سمجھنا ضروری ہے کہ Webflow کا CMS ڈھانچہ کیسے کام کرتا ہے اور CMS ڈیٹا کو آپ کے صفحہ کے مختلف عناصر سے کیسے باندھنا ہے۔ اس عمل میں ایک مجموعہ بنانا، کلیکشن فیلڈز ترتیب دینا، اور ان فیلڈز کو آپ کے کلیکشن پیج پر متعلقہ عناصر سے منسلک کرنا شامل ہے۔
Webflow CMS مجموعوں کو سمجھنا
Webflow CMS میں ایک مجموعہ بنیادی طور پر ایک ڈیٹا بیس ٹیبل ہے جہاں کلیکشن میں موجود ہر آئٹم اس ٹیبل میں ایک قطار ہے۔ ہر آئٹم میں مختلف فیلڈز (کالم) جیسے متن، تصاویر، یو آر ایل وغیرہ شامل ہو سکتے ہیں۔ مجموعے انتہائی لچکدار ہوتے ہیں اور بلاگز، پورٹ فولیوز، پروڈکٹس اور دیگر متحرک مواد کی اقسام کے مواد کو منظم کرنے کے لیے استعمال کیے جا سکتے ہیں۔
ایک مجموعہ بنانا
شروع کرنے کے لیے، آپ کو ایک ایسا مجموعہ بنانا ہوگا جو آپ کے متحرک عناصر کے لیے ڈیٹا کو رکھے گا۔ اسے کرنے کا طریقہ یہاں ہے:
1. CMS پینل تک رسائی حاصل کریں۔: اپنے Webflow ڈیزائنر میں، بائیں سائڈبار میں "CMS" آئیکن پر کلک کر کے CMS پینل پر جائیں۔
2. ایک نیا مجموعہ بنائیں: "نیا مجموعہ بنائیں" کے بٹن پر کلک کریں۔ آپ کو اپنے مجموعے کا نام دینے اور اس میں شامل فیلڈز کی وضاحت کرنے کے لیے کہا جائے گا۔
جمع کرنے والے فیلڈز ترتیب دینا
اپنا مجموعہ ترتیب دیتے وقت، آپ کو ان فیلڈز کی وضاحت کرنے کی ضرورت ہے جو آپ کے متحرک عناصر کے لیے ڈیٹا کو محفوظ کریں گے۔ مثال کے طور پر:
- پس منظر کی تصویر کا میدان: پس منظر کی تصاویر کو ذخیرہ کرنے کے لیے ایک تصویری فیلڈ شامل کریں۔
- بٹن URL فیلڈ: بٹنوں کے لنکس کو ذخیرہ کرنے کے لیے یو آر ایل فیلڈ شامل کریں۔
- اضافی فیلڈز: آپ اپنی ضروریات کے مطابق دوسرے فیلڈز جیسے ٹیکسٹ، بھرپور متن، تاریخیں، نمبر وغیرہ شامل کر سکتے ہیں۔
یہاں "پروجیکٹس" کلیکشن کے لیے ایک مثال سیٹ اپ ہے:
- پراجیکٹ کا نام: سادہ متن
- پراجیکٹ تفصیل: بھرپور متن
- پروجیکٹ امیج: تصویر
- پروجیکٹ URL: URL
مجموعہ کا صفحہ ڈیزائن کرنا
آپ کا مجموعہ ترتیب دینے کے بعد، آپ مجموعہ کا صفحہ ڈیزائن کر سکتے ہیں جو آپ کے مجموعہ آئٹمز کے مواد کو متحرک طور پر ظاہر کرے گا۔
1. کلیکشن پیج پر جائیں۔: صفحات کے پینل میں، مجموعہ صفحات کا سیکشن تلاش کریں اور اپنے بنائے ہوئے مجموعہ کو منتخب کریں (مثال کے طور پر، پروجیکٹس ٹیمپلیٹ)۔
2. صفحہ میں عناصر شامل کریں۔: عناصر کو اس صفحہ پر گھسیٹیں اور چھوڑیں جسے آپ اپنے کلیکشن فیلڈز سے منسلک کرنا چاہتے ہیں۔ مثال کے طور پر، آپ بیک گراؤنڈ امیج کے لیے ایک Div بلاک، پروجیکٹ کے نام کے لیے ایک ٹیکسٹ بلاک، اور پروجیکٹ URL کے لیے ایک بٹن شامل کر سکتے ہیں۔
مجموعہ کے شعبوں کو صفحہ کے عناصر سے بائنڈنگ کرنا
اپنے کلیکشن پیج پر موجود عناصر سے کلیکشن فیلڈز کو پابند کرنے کے لیے:
1. عنصر کو منتخب کریں: اس عنصر پر کلک کریں جسے آپ کلیکشن فیلڈ سے منسلک کرنا چاہتے ہیں۔ مثال کے طور پر، Div بلاک کو منتخب کریں جو پس منظر کے طور پر کام کرے گا۔
2. پس منظر کی تصویر کو باندھیں۔:
- Div بلاک کے منتخب ہونے کے ساتھ، ترتیبات کے پینل (گیئر آئیکن) پر جائیں۔
- "بیک گراؤنڈ" سیکشن تلاش کریں اور امیج فیلڈ پر کلک کریں۔
- "پروجیکٹس سے پس منظر کی تصویر حاصل کریں" کو منتخب کریں اور پروجیکٹ امیج فیلڈ کو منتخب کریں۔
3. بٹن URL کو باندھیں۔:
- بٹن کا عنصر منتخب کریں۔
- سیٹنگز پینل میں، "لنک سیٹنگز" تلاش کریں۔
- "پروجیکٹس سے یو آر ایل حاصل کریں" کو منتخب کریں اور پروجیکٹ یو آر ایل فیلڈ کو منتخب کریں۔
مثال: متحرک پس منظر کی تصویر اور بٹن URL
اس عمل کو واضح کرنے کے لیے یہاں ایک عملی مثال ہے:
- پروجیکٹ کلیکشن بنائیں درج ذیل فیلڈز کے ساتھ:
- پراجیکٹ کا نام: سادہ متن
- پراجیکٹ تفصیل: بھرپور متن
- پروجیکٹ امیج: تصویر
- پروجیکٹ URL: URL
- مجموعہ کا صفحہ ڈیزائن کریں۔:
- بیک گراؤنڈ کنٹینر کے طور پر کام کرنے کے لیے ایک Div بلاک شامل کریں۔
- پروجیکٹ کے نام کے لیے Div بلاک کے اندر ایک ٹیکسٹ بلاک شامل کریں۔
- پروجیکٹ لنک کے لیے Div بلاک کے اندر ایک بٹن شامل کریں۔
- کھیتوں کو باندھیں۔:
- Div بلاک پس منظر کی تصویر: Div بلاک کو منتخب کریں، سیٹنگز پینل پر جائیں، اور بیک گراؤنڈ امیج کو پروجیکٹ امیج فیلڈ سے منسلک کریں۔
- ٹیکسٹ بلاک پروجیکٹ کا نام: ٹیکسٹ بلاک کو منتخب کریں، سیٹنگز پینل پر جائیں، اور ٹیکسٹ کو پروجیکٹ کے نام کے خانے سے جوڑیں۔
- بٹن URL: بٹن کو منتخب کریں، ترتیبات کے پینل پر جائیں، اور یو آر ایل کو پروجیکٹ یو آر ایل فیلڈ سے منسلک کریں۔
اعلی درجے کی حسب ضرورت
مزید جدید تخصیص کے لیے، آپ Webflow کے CMS مجموعہ کو حسب ضرورت کوڈ یا فریق ثالث کے انضمام کے ساتھ استعمال کر سکتے ہیں۔ یہاں چند جدید تکنیکیں ہیں:
مشروط مرئیت
آپ مجموعہ فیلڈ کی موجودگی یا قدر کی بنیاد پر عناصر کو دکھانے یا چھپانے کے لیے مشروط مرئیت کا استعمال کر سکتے ہیں۔ مثال کے طور پر، آپ صرف بٹن دکھانے کے لیے شرط سیٹ کر سکتے ہیں اگر پروجیکٹ URL فیلڈ خالی نہ ہو۔
1. عنصر کو منتخب کریں: اس عنصر پر کلک کریں جس پر آپ شرط لگانا چاہتے ہیں (جیسے بٹن)۔
2. مشروط مرئیت سیٹ کریں۔: سیٹنگز پینل میں، "مشروط مرئیت" سیکشن تلاش کریں۔
3. شرط کی وضاحت کریں۔: صرف اس صورت میں عنصر کو دکھانے کے لیے شرط سیٹ کریں جب پروجیکٹ یو آر ایل فیلڈ سیٹ ہو۔
اپنی مرضی کے کوڈ
مزید پیچیدہ تعاملات یا ڈیزائنز کے لیے، آپ اپنے کلیکشن پیج میں حسب ضرورت کوڈ ایمبیڈ کر سکتے ہیں۔ یہ Webflow کے حسب ضرورت کوڈ ایمبیڈز کا استعمال کرتے ہوئے یا HTML ایمبیڈ جزو کے استعمال کے ذریعے کیا جا سکتا ہے۔
1. ایک HTML ایمبیڈ جزو شامل کریں۔: HTML ایمبیڈ جزو کو اپنے کلیکشن پیج پر گھسیٹیں۔
2. کسٹم کوڈ داخل کریں۔: اپنا حسب ضرورت HTML، CSS، یا JavaScript کوڈ لکھیں اور اپنے کلیکشن سے ڈیٹا کو متحرک طور پر داخل کرنے کے لیے Webflow کے فیلڈ متغیرات کا استعمال کریں۔
: مثال کے طور پر
{{EJS1}}انضمام
Webflow مختلف انضمام کو سپورٹ کرتا ہے جو آپ کے کلیکشن پیجز کی فعالیت کو بڑھا سکتے ہیں۔ مثال کے طور پر، آپ اپنے مجموعوں میں ڈیٹا انٹری کو خودکار کرنے کے لیے Zapier کے ساتھ ضم کر سکتے ہیں یا اضافی خصوصیات شامل کرنے کے لیے فریق ثالث پلگ ان استعمال کر سکتے ہیں۔
بہترین طریقوں
Webflow میں متحرک مواد کے ساتھ کام کرتے وقت، درج ذیل بہترین طریقوں پر غور کریں:
- تصاویر کو بہتر بنائیں: اس بات کو یقینی بنائیں کہ آپ کے کلیکشن فیلڈز پر اپ لوڈ کی گئی تصاویر صفحہ لوڈ کے اوقات کو بہتر بنانے کے لیے ویب کے استعمال کے لیے موزوں ہیں۔
- مستقل نام دینے کے کنونشنز: اپنے کلیکشن فیلڈز کے لیے واضح اور مستقل نام کنونشنز کا استعمال کریں تاکہ ان کا نظم کرنا اور ان کا حوالہ دینا آسان ہو۔
- اچھی طرح سے ٹیسٹ کریں۔: اپنے مجموعہ کے صفحات کو مختلف آلات اور براؤزرز پر جانچیں تاکہ یہ یقینی بنایا جا سکے کہ متحرک مواد صحیح طریقے سے ظاہر ہوتا ہے۔
- وضاحتی Alt متن استعمال کریں۔: رسائی اور SEO مقاصد کے لیے، ہمیشہ اپنے کلیکشن فیلڈز میں تصاویر کے لیے وضاحتی Alt متن شامل کریں۔
ان اقدامات اور بہترین طریقوں پر عمل کرتے ہوئے، آپ متحرک اور پرکشش کلیکشن پیجز بنانے کے لیے Webflow CMS کو مؤثر طریقے سے استعمال کر سکتے ہیں جو آپ کے مجموعوں سے پس منظر کی تصاویر اور بٹن URLs جیسے عناصر کو ماخذ کرتے ہیں۔ یہ نقطہ نظر نہ صرف مواد کے انتظام کو ہموار کرتا ہے بلکہ آپ کی ویب سائٹ کی لچک اور توسیع پذیری کو بھی بڑھاتا ہے۔
سے متعلق دیگر حالیہ سوالات اور جوابات جمع کرنے والے صفحات:
- جامد صفحہ پر بٹن کو مجموعہ کی فہرست میں کسی آئٹم کے متعلقہ مجموعہ صفحہ سے منسلک کرنے میں کون سے اقدامات شامل ہیں، اور یہ نیویگیشن اور صارف کے تجربے کو کیسے بڑھاتا ہے؟
- کلیکشن پیج پر مختلف کلیکشن آئٹمز کے درمیان سوئچ کرنے کے لیے کون سے کی بورڈ شارٹ کٹ استعمال کیے جا سکتے ہیں، اور ایسا کرنے کا مقصد کیا ہے؟
- مجموعہ کے صفحے پر متحرک بائنڈنگ کیسے کام کرتی ہے، اور کسی مجموعے کے اندر کسی مخصوص فیلڈ میں عنصر کو باندھنے کے کیا اقدامات ہیں؟
- ویب فلو CMS میں کلیکشن پیج اور سٹیٹک پیج کے درمیان بنیادی فرق کیا ہے؟