Divi اور Divi بلڈر کا استعمال کرتے ہوئے خوبصورت ورڈپریس ویب سائٹس کی تعمیر

پیش منظر سے پہلے اور بعد میں کیسے بنائیں دیوئی کے ساتھ تصاویر کے لئے طومار

Rifat Divi سبق May 5, 2021

مختلف وجوہات سائٹس مالکان کو ریاست سے پہلے اور بعد میں تصویر کا پیش منظر دکھانا چاہتی ہیں۔ ویب ڈیزائن فرمیں اپنی ڈیزائن کردہ ویب سائٹ سے پہلے اور بعد میں دکھا سکتی ہیں؛ فٹنس سینٹرز لوگوں کی تصاویر سے پہلے اور بعد میں دکھا سکتے ہیں تاکہ ان کے جسم کی شکلوں کے درمیان مختلف کو اجاگر کیا جاسکے؛ فوٹوگرافر تدوین شدہ تصاویر وغیرہ کے لیے پہلے اور بعد میں دکھا سکتے ہیں۔

عام طور پر، ویب سائٹس ایک سادہ ڈیزائن کے لئے طے کرتے ہیں جو ایک دوسرے سے متصل ہر تصویر دکھاتا ہے۔ ہم آج کے ٹیوٹوریل میں دیوئی میں ایک انٹرایکٹو اسکرول اینیمیشن اثر کے ساتھ اس روایتی ڈیزائن کو تبدیل کریں گے۔ یہاں، صارف صفحے کے نیچے اسکرول کرتے ہوئے ایک تصویر سے پہلے اور بعد میں دیکھے گا۔ صارفین کو اپنی سائٹ اور تبدیلی کو منفرد طریقے سے اسکرول کرنے کے لئے مشغول کرنے کا یہ ایک بہتر طریقہ ہے۔

ہم صرف دیوی کے بلٹ ان آپشنز کا استعمال کرتے ہوئے اس کی تعمیر کریں گے؛ کوئی اضافی کسٹم کوڈ یا پلگ ان کی ضرورت نہیں ہے۔

چلو یہ کرتے ہیں!

Divi ڈاؤن لوڈ، اتارنا بہترین ورڈپریس تھیم

دنیا میں سب سے زیادہ مقبول ورڈپریس تھیم اور حتمی ورڈپریس پیج بلڈر

Divi ڈاؤن لوڈ، اتارنا

پیش منظر ڈیزائن کریں

چیزیں شروع کرنے سے پہلے

ڈیزائن شروع کرنے کے لیے آپ کو دیوئی موضوع انسٹال اور ایکٹیویٹ کرنے کی ضرورت ہے۔ اب ورڈ پریس ڈیش بورڈ سے ایک نیا صفحہ بنائیں اور اسے دیوئی بلڈر کے ساتھ کھولیں۔ "شروع سے تعمیر" آپشن کے ساتھ جائیں۔

تصویر کا پیش منظر سے پہلے اور بعد میں بنانا

اب ہم دیوئی میں تصاویر سے پہلے اور بعد میں اپنا طومار متحرک بنانا شروع کریں گے۔ ایسا کرنے کے لئے ہمیں سب سے پہلے دو کالموں کی صف بنانے کی ضرورت ہوگی جو موبائل پر لپیٹنہ آئے۔ ہر کالم میں اوور فلو کو چھپانے کی بھی ضرورت ہوگی تاکہ پہلے اور بعد کی تصاویر باہر سلائیڈ ہوں اور طومار پر ہر کالم کے اندر دیکھنے کے لئے۔ کالم وں کے نافذ ہونے کے بعد، ہم ہر کالم میں اپنی تصاویر شامل کریں گے اور اسٹائلنگ اور افقی طومار حرکت پذیری شامل کریں گے۔ ایک بار جب یہ جگہ میں آ جائے گا، ہم تصاویر کے اوپر متن کی سرخی سے پہلے اور بعد میں شامل کریں گے۔

حصہ 1: دو کالم صف کا اضافہ

دیوئی بلڈر کے باقاعدہ سیکشن میں دو کالموں کی صف شامل کرکے شروع کریں۔

صف سیٹنگیں

صف سیٹنگیں کھولیں اور قدروں کو درج ذیل کے طور پر تبدیل کریں۔

  • گٹر چوڑائی: 1
  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 900pکس (ڈیسک ٹاپ)، 700پی ایکس (ٹیبلٹ)، 300پی ایکس (فون)
  • پیڈنگ: 0PPایکس اوپر، 0PPایکس نیچے

اس بات کو یقینی بنانے کے لیے کہ کالم چھوٹی سکرین ڈیوائسز پر ایک کالم کے لے آؤٹ میں لپیٹ یں یا نہ توڑیں، پیشگی ٹیب کھولیں اور درج ذیل کسٹم سی ایس ایس کو "مرکزی عنصر" میں شامل کریں۔

display:flex;
flex-wrap:nowrap;

کالم سیٹنگیں

اب، کالم 1 کے لیے سیٹنگیں کھولیں اور ذیل میں دی گئی ترتیبات کو اپ ڈیٹ کریں۔

  • پیڈنگ: 5وی ڈبلیو ٹاپ، 5وی ڈبلیو باٹم
  • دائیں سرحدی چوڑائی: 2Pکس
  • دائیں سرحدی رنگ: #666666

جدید جدول پر جائیں اور درج ذیل اقدار کو اپ ڈیٹ کریں۔

  • افقی اوور فلو: پوشیدہ
  • عمودی اوور فلو: پوشیدہ

اس بات کو یقینی بنائیں کہ ہر کالم کو اوور فلو چھپانے کی ضرورت ہوگی تاکہ اسکرولنگ کے دوران تصاویر ہر کالم کے اندر آسانی سے سلائیڈ کریں۔

اب کالم 2 کے لیے سیٹنگ کھولیں اور درج ذیل کے ساتھ اقدار کو تبدیل کریں۔

  • پیڈنگ: 5وی ڈبلیو ٹاپ، 5وی ڈبلیو باٹم
  • بائیں سرحدی چوڑائی: 2Pکس
  • بائیں سرحدی رنگ: #666666

اب اعلی جدول سے پوشیدہ اوور فلو اقدار کو اپ ڈیٹ کریں۔

  • افقی اوور فلو: پوشیدہ
  • عمودی اوور فلو: پوشیدہ

حصہ 2: پہلے اور بعد کی تصاویر بنانا

جیسا کہ ہمارے پاس دونوں کالم موجود ہیں، اب ہم ایسی تصاویر شامل کریں گے جن کا استعمال ہم حرکت پذیری سے پہلے اور بعد میں کریں گے۔ ہم مجموعی طور پر 3 تصاویر استعمال کریں گے - ایک پہلے کی طرح، ایک کے بعد، اور ایک سایہ کے طور پر استعمال کیا جائے گا. کالم 1 میں، پہلے کی تصویر کا سایہ ورژن پیچھے رہے گا اور متحرک نہیں ہوگا۔ اور تصویر سے پہلے ہماری سیاہ اور سفید جو بالآخر طومار پر دائیں طرف منتقل ہو جائے گی۔ کالم 2 میں، ہمارے پاس طومار پر بائیں طرف سے دیکھنے کے لئے اسکرول کرنے کے لئے بعد کی تصویر ہوگی۔

تین تصاویر کا اضافہ

کالم 1 میں ایک نیا امیج ماڈیول شامل کریں۔

ماڈیول پر تصویر اپ لوڈ کریں۔

ڈیزائن ٹیب پر درج ذیل اقدار تبدیل کریں۔

  • چوڑائی: 100
  • زیادہ سے زیادہ چوڑائی: 448پی ایکس (ڈیسک ٹاپ)، 348پی ایکس (ٹیبلٹ)، 148پی ایکس (فون)

اب تصویر ماڈیول کو پرتوں (گرین مارک) سے 2 بار نقل کریں کیونکہ اگر ہم براہ راست تصویر ماڈیول کی نقل کریں تو یہ تصاویر کے درمیان جگہ چھوڑ دے گا۔

ایک تصویر کو نیچے سے کالم 2 میں منتقل کریں۔

حصہ 3: تصاویر میں مخصوص طرز اور طومار حرکت پذیری شامل کرنا

تصویر سے پہلے "سایہ" اسٹائلنگ

پہلے تصویر "سایہ" سٹائل کرنے کے لیے کالم 1 میں پہلی (یا اوپر) تصویر کے لیے سیٹنگیں کھولیں اور فلٹر آپشن کو درج ذیل طور پر اپ ڈیٹ کریں:

  • سیچریشن: 0٪
  • عدم شفافیت: 10٪

اس بات کو یقینی بنانے کے لئے کہ سایہ تصویر براہ راست "پہلے" تصویر کے پیچھے ہے، نیچے کی طرح تصویر کی پوزیشن کو اپ ڈیٹ کریں۔

  • پوزیشن: مطلق
  • عمودی آفسیٹ: 5وی ڈبلیو

تصویر اسٹائلنگ اور طومار سیٹنگیں سے پہلے

کالم 1 میں تصویر 2 کے لیے سیٹنگیں وسیع کریں اور سیچریشن سیٹنگوں کو اپ ڈیٹ کریں۔ ہم تصویر کو سیاہ اور سفید بنانے کی کوشش کریں گے۔

  • سیچریشن: 0

"ایڈوانسڈ ٹیب" پر، طومار کے نیچے "افقی حرکت" ٹیب پر منتقل کریں اثرات کو تبدیل کریں اور حرکت کو فعال کریں۔ پھر درج ذیل سیٹنگیں اپ ڈیٹ کریں۔

ڈیسک ٹاپ کے لیے افقی حرکت سیٹ کریں...

  • آفسیٹ شروع کرنا: 0 (30٪)
  • مڈ آفسیٹ: 2.26 (45٪)
  • اختتامآفسیٹ: 4.52 (60٪پر).

ٹیبلٹ کے لیے افقی حرکت سیٹ کریں...

  • آفسیٹ شروع کرنا: 0 (30٪)
  • مڈ آفسیٹ: 1.76 (45 فیصد پر)۔
  • اختتامآفسیٹ: 3.52 (60٪پر).

فون کے لیے افقی حرکت سیٹ کریں...

  • آفسیٹ شروع کرنا: 0 (30٪)
  • مڈ آفسیٹ: 0.76 (45 فیصد پر)۔
  • اختتامآفسیٹ: 1.52 (60٪پر).

ہمیں یہ سمجھنے کی ضرورت ہے کہ - آفسیٹ اقدار پکسلز میں سیٹ کی جاتی ہیں۔ 1 کی قیمت 100پی ایکس کے برابر ہے۔ تو 4.52 کی قیمت دراصل 452پی ایکس ہے۔ لہذا ڈیسک ٹاپ پر افقی حرکت پذیری کے اختتام پر، تصویر دائیں طرف 452پی ایکس منتقل ہو جائے گی۔ 452پی ایکس کا تعین قطار کے نصف (450پی ایکس) کے علاوہ 2پی ایکس بارڈر سے کیا جاتا ہے

بعد تصویر طومار سیٹنگیں

آخر میں، کالم 2 میں آخری تصویر کو درج ذیل افقی حرکت طومار اثرات کے ساتھ اپ ڈیٹ کریں۔

ڈیسک ٹاپ کے لیے افقی حرکت سیٹ کریں...

  • آفسیٹ شروع: -4.52 (30٪پر).
  • مڈ آفسیٹ: -2.26 (45٪)
  • اختتامآفسیٹ: 0 (60٪)

ٹیبلٹ کے لیے افقی حرکت سیٹ کریں...

  • آفسیٹ شروع: -3.52 (30٪پر).
  • مڈ آفسیٹ: -1.76 (45٪)
  • اختتامآفسیٹ: 0 (60٪)

فون کے لیے افقی حرکت سیٹ کریں...

  • آفسیٹ شروع: -1.52 (30٪پر).
  • مڈ آفسیٹ: -0.76 (45٪)
  • اختتامآفسیٹ: 0 (60٪)

اسکرول جانچ سے سیکشن مارجن شامل کرنا

اسکرولنگ اینیمیشن پر ایک نظر ڈالنے سے پہلے، ہمیں سیکشن کے اوپر اور نیچے کچھ عارضی مارجن شامل کرنے کی ضرورت ہے تاکہ اس میں براہ راست صفحے پر اسکرول کرنے کے لئے کچھ گنجائش ہو۔

پورے سیکشن کی سیٹنگیں کھولیں اور اقدار کو اپ ڈیٹ کریں۔

  • مارجن: 80ویایچ ٹاپ، 80ویایچ باٹم

اب، براہ راست صفحے پر نتیجہ چیک کریں۔

حصہ 4: سرخی متن سے پہلے اور بعد میں تخلیق کرنا

اپنے ڈیزائن کو مکمل کرنے کے لئے، ہمارے پاس کچھ آسان کام باقی ہیں۔ ہمیں اپنے زائرین کے لئے حرکت پذیری کو مزید قابل فہم بنانے کے لئے جانے سے پہلے اور بعد میں اضافہ کرنے کی ضرورت ہے۔ لہذا، ایک نئی دو کالمی صف بنائیں۔

مندرجہ بالا صف سے صف طرز نقل کریں جس میں تصاویر ہوں۔

اب اسے نئی صف میں چسپاں کریں۔

متن ماڈیول شامل کرنا

اب جب ہمارے پاس سیٹنگیں چسپاں ہوں گی تو ہم اسے صف کے اوپر گھسیٹیں گے جس میں تصاویر ہوں گی۔ پھر ہم نئی صف کے کالم 1 میں ٹیکسٹ ماڈیول شامل کریں گے۔

اب، "پہلے" ٹائپ کریں اور لکھنے کے انداز کو پیراگراف سے سرخی 2 میں تبدیل کریں۔

ڈیزائن ٹیب سے درج ذیل ایچ 2 سرخی طرزوں کو اپ ڈیٹ کریں:

  • سرخی 2 فونٹ: روبوٹو
  • سرخی 2 فانٹ طرز: ٹی ٹی
  • سرخی 2 متن صف بندی: مرکز
  • سرخی 2 حرف فاصلہ کاری: 2پی ایکس

اب "پہلے" متن ماڈیول نقل کریں اور اسے کالم 2 میں چسپاں کریں۔

اب، سرخی کو "پہلے" سے "بعد" میں اپ ڈیٹ کریں۔

اور ہم کر رہے ہیں!

حتمی نتیجہ

یہاں یہ ہے کہ آخر یہ کیسا نظر آئے گا۔

آخری الفاظ

آج کے ٹیوٹوریل میں، ہم نے آپ کو دکھانے کی کوشش کی کہ آپ ڈیوی کا استعمال کرتے ہوئے تصاویر سے پہلے اور بعد میں اپنے بہت ہی مخصوص طومار کو کتنی آسانی سے ڈیزائن کرسکتے ہیں۔ یہ ڈیزائن آپ کی ویب سائٹ پر تصاویر دکھانے کا ایک بہترین طریقہ ہے اور اس کے بارے میں کیا اچھا ہے آپ اسے کہیں بھی نقل کر سکتے ہیں اور تصاویر کو بہت آسانی سے تبدیل کر سکتے ہیں! بس اس بات کو یقینی بنائیں کہ آپ تصویر کے سائز کو مستقل رکھیں - دیوئی باقی کام کرے گی۔ امید ہے. یہ اس منصوبے کی نمائش کرنے والی تصویر سے پہلے اور بعد میں آپ کے اگلے میں تخلیقی لہر لائے گا۔ اگر آپ کو یہ ٹیوٹوریل مددگار لگا ہے، تو ایک حصہ ہمارے لئے بڑے پیمانے پر ہوگا، اور یہ دوسروں کے لئے بھی مدد گار ثابت ہوگا۔ اور، اگر آپ آج کے ٹیوٹوریل پر کوئی خیالات ہیں, ہم آپ کے تبصروں کے لئے انتظار کر رہے ہیں!