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

دیوئی کے ساتھ طومار پر ایک چپچپا ہیرو سیکشن ڈیزائن کرنے کے لئے کس طرح

Rifat Divi سبق May 18, 2021

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

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

ڈیزائن اولائن

اس سے پہلے کہ ہم آگے بڑھیں، آئیے ایک نظر ڈالتے ہیں کہ ہمارا آخری ڈیزائن کیسا نظر آئے گا۔

ڈیزائن فریم ورک بنائیں

نیا سیکشن اضافہ

پس منظر رنگ

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

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

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

Divi ڈاؤن لوڈ، اتارنا
  • پس منظر رنگ: آر جی بی اے (53,44,43,0.17)

وقفہ کاری

آئیے اس سیکشن کے ڈیزائن ٹیب پر چلتے ہیں اور اقدار کو درج ذیل طور پر تبدیل کرتے ہیں۔

  • ٹاپ پیڈنگ: 13وھ
  • نیچے پیڈنگ 0Pایکس

صف 1 اضافہ

کالم ساخت

اب درج ذیل کالم ساخت کا استعمال کرتے ہوئے ایک نئی صف شامل کریں۔

سائزنگ

اب صف سیٹنگیں شامل کریں اور نیچے کی طرح سائزنگ سیٹنگ تبدیل کرنے کے لئے ڈیزائن ٹیب پر بڑھیں۔

  • مخصوص گٹر چوڑائی استعمال کریں: جی ہاں
  • گٹر چوڑائی: 2
  • کالم اونچائیوں کو برابر کریں: 2
  • چوڑائی: ڈیسک ٹاپ - 80 فیصد، ٹیب اور فون - 90٪
  • زیادہ سے زیادہ چوڑائی: 2580pکس

وقفہ کاری

اب ہم اوپر اور نیچے سے تمام پیڈنگ ہٹا دیں گے۔ تو، اوپر اور نیچے پیڈنگ 0پی ایکس ہے۔

کالم 1 کے لیے ترتیب (صف 1)

وقفہ کاری

اس وقت کالم 1 کے لیے سیٹنگ کھولیں اور وقفہ سیٹنگیں تبدیل کریں۔

  • ٹاپ پیڈنگ - ڈیسک ٹاپ 25وی ایچ، ٹیب اور فون 10وی ایچ
  • نیچے پیڈنگ - ڈیسک ٹاپ 25ویایچ، ٹیب اور فون 10وی ایچ
  • 5٪ بائیں اور دائیں دونوں طرف پیڈنگ.

کالم 2 کے لیے ترتیب (صف 1)

پس منظر تصویر

اس کے بعد، کالم 2 کی ترتیبات سے اپنے انتخاب میں پس منظر کی تصویر شامل کریں۔

  • پس منظر تصویر سائز: احاطہ
  • پس منظر تصویر پوزیشن: مرکز

رویت

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

متن ماڈیول کالم 1 میں اضافہ (صف 1)

سرتحریر مشمول

اب ہم ماڈیول شامل کریں گے۔ آئیے کالم 1 میں ایک متن ماڈیول سے شروع کرتے ہیں۔ آپ کو پسند ہے کوئی بھی ایچ 1 مواد شامل کریں!

ایچ 1 متن سیٹنگیں

اب ماڈیول ڈیزائن ٹیب سے ایچ 1 متن سیٹنگیں تبدیل کریں۔

  • سرخی فانٹ: کرمسن متن
  • سرخی متن سائز: ڈیسک ٹاپ 6وی ایچ، ٹیبلٹ 50پی ایکس، فون 40پی ایکس
  • سرخی لائن اونچائی: 1.2 انہیں

تقسیم کار ماڈیول کالم 1 میں اضافہ (صف 1)

رویت

اب وقت آگیا ہے کہ ہمارے پہلے کالم میں ڈیوائیڈر ماڈیول شامل کیا جائے۔ اس کے علاوہ، شو ڈیوائیڈر آپشن کو فعال کریں۔

لائن

اب ماڈیول ڈیزائن ٹیب پر سوئچ کریں اور لائن سیٹنگیں تبدیل کریں۔

  • لائن رنگ: #35241f

سائزنگ

سائزنگ سیٹنگوں پر قدریں تبدیل کریں۔

  • تقسیم کار وزن: 5پی ایکس
  • چوڑائی: 21٪
  • اونچائی: 5پی ایکس

تصریح مشمول

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

متن سیٹنگیں

ماڈیول متن سیٹنگوں میں درج ذیل ترمیم کریں۔

  • متن فانٹ: کارلا
  • متن سائز: 18ppکس
  • متن لائن اونچائی: 2.1ایم

صف 2 اضافہ

کالم ساخت

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

پس منظر رنگ

اب، صف میں پس منظر کا رنگ شامل کریں۔

  • پس منظر رنگ: #35241f

سائزنگ

ڈیزائن ٹیب سے سیٹنگیں سائز کرنے میں اقدار تبدیل کریں۔

  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 3000pایکس

وقفہ کاری

فاصلے کی ترتیب کے لیے اقدار کو بھی اسی طرح تبدیل کریں۔

  • ٹاپ پیڈنگ: ڈیسک ٹاپ - 30وی ایچ، ٹیب اور فون - 0وی ایچ.
  • نیچے پیڈنگ: 30وھ
  • بائیں پیڈنگ: 10٪
  • دائیں پیڈنگ: 10٪

کالم 1 پر تصویر ماڈیول (صف 2)

تصویر اپ لوڈ کریں (موبائل اور صرف ٹیب)

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

ٹیبلٹس اور موبائل ویو پر منتقل ہوں اور تصویر شامل کریں۔

وقفہ کاری

ماڈیول ز ڈیزائن ٹیب پر آگے بڑھیں اور نیچے کے مارجن کو درج ذیل کے مطابق تبدیل کریں۔

  • نیچے مارجن: ڈیسک ٹاپ 0پی ایکس، ٹیبلٹ اور فون 50پی ایکس

تقسیم کار ماڈیول کالم 1 میں اضافہ (صف 2)

رویت

اب تصویر کے نیچے ایک نیا ڈیوائیڈر ماڈیول شامل کریں اور "تقسیم کار دکھائیں" اختیار کو فعال کریں۔

لائن

ماڈیول کے ڈیزائن ٹیب پر سوئچ کریں اور لائن رنگ تبدیل کریں۔

  • لائن رنگ: #ffffff

سائزنگ

سائزنگ سیٹنگ کو بھی ڈیزائن سیکشن سے تبدیل کریں۔

  • تقسیم کار وزن: 5پی ایکس
  • اونچائی: 5پی ایکس

متن ماڈیول کالم 1 میں اضافہ (صف 2)

سرتحریر مشمول

کچھ ایچ 2 مواد کے ساتھ ایک نیا ٹیکسٹ ماڈیول شامل کریں۔

سرتحریر متن سیٹنگیں

ایچ 2 متن سیٹنگوں میں درج ذیل ترمیم کریں

  • سرخی 2 فانٹ: کرمسن متن
  • سرخی 2 متن رنگ: #ffffff
  • سرخی 2 متن سائز: ڈیسک ٹاپ 6ویایچ، ٹیبلٹ 50پی ایکس، فون 40پی ایکس.

متن ماڈیول کالم 2 میں اضافہ (صف 2)

تصریح مشمول

کالم 2 پر ہم صرف ایک ماڈیول شامل کریں گے ایک متن ماڈیول ہے جہاں کچھ تصریح مواد ہوگا۔

متن سیٹنگیں

متن ماڈیول ترتیب کو تبدیل کریں جیسے نیچے دیا گیا ہے۔

  • متن فانٹ: کارلا
  • متن فانٹ وزن: باقاعدہ
  • متن سائز: ڈیسک ٹاپ 30پی ایکس، ٹیبلٹ اور فون 18پی ایکس
  • متن لائن اونچائی: 2.2ایم
  • متن رنگ: روشنی

چپکے ہوئے اثرات لگائیں

صف زیڈ اشاریہ قدریں تبدیل کریں

صف 1

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

  • زیڈ انڈیکس: 1

صف 2

دوسری صف کی زیڈ اشاریہ قدر تبدیل کریں۔ قدر کو پہلی صف سے زیادہ ہونے کی ضرورت ہے۔

  • زیڈ انڈیکس: 2

صف 1 پر چپکا ہوا اثر

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

کالم 1 کے لیے چپکی سیٹنگ (پس منظر رنگ)

اب جب کہ پوری قطار چپکی ہوئی ہو گئی ہے، ہم صف کے بچوں کے عناصر پر کچھ چپکے ہوئے اثرات کا اطلاق کریں گے۔ کالم 1 سیٹنگیں کھولیں اور درج ذیل چپچپا پس منظر رنگ لگائیں۔

  • چپچپا پس منظر رنگ: #edeaea

کالم 1 کے لئے چپکی سیٹنگ (چپچپا ٹرانسفارم ٹیڑھا)

اب، ڈیزائن ٹیب پر منتقل کریں اور مندرجہ ذیل چپکی ہوئی ترچھی قدر لگائیں۔

  • چپچپا نیچے ترچھا: -4ڈیگ

کالم 2 کے لئے چپکی سیٹنگ (چپچپا ٹرانسفارم ٹیڑھا)

کالم 2 کے لئے سیٹنگوں کو تبدیل کرنے سے اسی چپکی ہوئی ترچھی قدر کا اطلاق کریں۔

  • چپچپا نیچے ترچھا: -4ڈیگ

متن ماڈیول ایکس 2 (اسٹیکی ٹرانسفارم ٹیڑھا) کے لئے چپکی سیٹنگیں

ہم اپنے ڈیزائن کے آخری حصے میں ہیں۔ ہم ایک چپکی ہوئی حالت میں کالم 1 میں دونوں ٹیکسٹ ماڈیولز کے لئے نیچے ترچھی قدر کو تبدیل کرکے ڈیزائن اور اثر کو مکمل کریں گے۔ یہاں تک کہ اس سے چپکے چپکے کالم کی ترچھی قدر بھی نکل جائے گی۔

  • چپچپا نیچے ترچھا: 4ڈیگ

حتمی نتیجہ

چونکہ ہم نے تمام مراحل سے گزرا ہے اور جو ہم نے مانگا تھا وہ کیا ہے، ہماری آخری مصنوعات اس طرح نظر آئیں گی۔

آخری الفاظ

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