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

Divi میں تخلیقی پاپ اپ لاگ ان فارم کو ڈیزائن کرنے کا طریقہ

Rifat Divi سبق Jul 28, 2021

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

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

پیش نظارہ

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

لاگ ان / لاگ آؤٹ بٹنوں کے ساتھ پاپ اپ لاگ ان فارم

ڈیزائن کے ساتھ شروع کرنے کے لیے ، آپ کو سب سے پہلے Divi جانے کی ضرورت ہے۔

حیرت انگیز ویب سائٹیں بنائیں

بہترین مفت صفحہ بلڈر عنصر کے ساتھ

اب شروع کریں

اب ہمیں اس صفحے سے Divi Crowdfunding لےؤٹ پیک ہیڈر اور فوٹر ڈاؤن لوڈ کرنا ہے۔ اپنا ای میل آئی ڈی درج کریں اور ڈاؤن لوڈ پر کلک کریں۔

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

اب ذیل میں لکھے گئے مزید طریقہ کار پر عمل کریں۔

  • پورٹیبلٹی پاپ اپ سے امپورٹ ٹیب منتخب کریں۔
  • ڈاؤن لوڈ کردہ Json فائل کو زپ شدہ فولڈر سے اپ لوڈ کریں۔
  • درآمد کے بٹن پر کلک کریں۔
  • پھر ہیڈر کی ایڈجسٹمنٹ کرنے کیلئے ترمیم پر کلک کریں۔

حصہ 1: لاگ ان / لاگ آؤٹ بٹن بنانا

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

لاگ ان بٹن بنانا

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

ڈیزائن ٹیب کے تحت درج ذیل کو اپ ڈیٹ کریں:

  • بٹن کی علامت: لاک آئکن (اسکرین شاٹ دیکھیں)
  • بٹن آئیکن پلیسمنٹ: بائیں۔
  • بٹن کیلئے ہوور آن صرف آئکن دکھائیں: نہیں
  • بھرتی: 0.5em اوپر ، 0.5em نیچے ، 2em بائیں ، 0.7em دائیں۔

اعلی درجے کی ٹیب سے بٹن میں دو حسب ضرورت CSS طبقات شامل کریں۔

  • CSS کلاس: et-toggle-popup et-popup-login-button

لاگ آؤٹ بٹن

ہمارا لاگ آؤٹ بٹن بنانے کے لیے ، موجودہ لاگ ان بٹن کو کالم 4 میں کلون کریں۔ مزید شناخت کے لیے ان پر لیبل لگائیں۔

کلون شدہ بٹن کے متن کو بطور "لاگ آؤٹ" تبدیل کریں۔

بٹن آئیکن کو ڈیزائن ٹیب سے تبدیل کریں جیسا کہ ذیل میں نشان لگا دیا گیا ہے۔

آخر میں ، ایڈوانس ٹیب سے سی ایس ایس کلاس کو تبدیل کریں۔

  • CSS کلاس: et-toggle-popup et-popup-logout-button

حصہ 2: پاپ اپ پیج بنانا

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

سیکشن کو شامل کرنے اور ترتیبات

آئیے سیکشن کو سفید پس منظر دیں۔

  • پس منظر کا رنگ: #ffffff

سیکشن کے ڈیزائن ٹیب پر درج ذیل ایڈجسٹمنٹ کریں۔

  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 800px (ڈیسک ٹاپ) ، 80 ((ٹیبلٹ) ، 100 ((فون)
  • سیکشن سیدھ: مرکز
  • اونچائی: آٹو (ڈیسک ٹاپ اور ٹیبلٹ) ، 100 ((فون)
  • زیادہ سے زیادہ اونچائی: 100
  • بھرتی: 0 px سب سے اوپر ، 0px نیچے
  • گول کونے: 10px
  • باکس شیڈو: اسکرین شاٹ دیکھیں
  • باکس شیڈو عمودی پوزیشن: 0 px
  • باکس شیڈو کلنک کی طاقت: 100px
  • باکس شیڈو پھیلانے کی طاقت: 50px

آئیے جدید ٹیب سے سی ایس ایس کلاس شامل کریں۔

  • سی ایس ایس کلاس: ایٹ پاپ اپ لاگ ان۔

پھر مندرجہ ذیل سی ایس ایس کوڈ کو مرکزی عنصر میں شامل کریں۔

overscroll-behavior: contain;

پھر ، نمائش اور پوزیشن پر کچھ ایڈجسٹمنٹ کریں۔

  • افقی اوور فلو: پوشیدہ۔
  • عمودی بہاؤ: آٹو
  • پوزیشن: فکسڈ
  • سینٹر سینٹر
  • زیڈ انڈیکس: 999999۔

صف شامل کرنا اور ترتیبات۔

آئیے نئے حصے میں ایک کالم قطار شامل کریں۔

قطار کی ترتیبات کھولیں اور درج ذیل ایڈجسٹمنٹ کریں۔

  • کسٹم گٹر کی چوڑائی استعمال کریں: ہاں
  • گٹر کی چوڑائی: 1
  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 100
  • بھرتی: 0px ٹاپ ، 5vh نیچے

حصہ 3: قریبی پاپ اپ آئیکن بنانا

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

ترتیبات سے ماڈیول ٹیکسٹ حذف کریں اور درج ذیل آئیکن کو شامل کریں۔

  • آئیکن کا استعمال کریں: ہاں
  • آئکن: œ œ âxâ € آئیکن (اسکرین شاٹ دیکھیں)

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

  • آئکن کا رنگ: # 004e43
  • تصویر/شبیہ سیدھ: مرکز
  • آئیکن فونٹ سائز استعمال کریں: ہاں
  • آئیکن فونٹ کا سائز: 50px
  • چوڑائی: 50px
  • ماڈیول سیدھ: دائیں
  • اونچائی: 50px

ایڈوانس ٹیب سے بلب ماڈیول میں ایک CSS کلاس شامل کریں۔

  • CSS کلاس: et-toggle-popup

حصہ 4: فارم بنانا

ہمارے لاگ ان فارم میں دو ڈیزائن ہیں ، ایک لاگ ان اور دوسرا لاگ آؤٹ کے لئے۔ تو ، لاگ ان فارم کے دو مختلف ماڈیول ہوں گے۔ پہلا صارف اس وقت ظاہر ہوگا جب صارف لاگ آؤٹ ہوتا ہے اور اسے لاگ ان کرنے کی ضرورت ہوتی ہے ، اور دوسرا صارف لاگ ان ہوتا ہے اور لاگ آؤٹ ہوتا ہے۔ آسان تصور ، آئیے کام پر واپس آجائیں۔

لاگ آؤٹ فارم بنانا

آئیے اپنا لاگ آؤٹ فارم بنانے کیلئے لاگ ان ماڈیول شامل کریں۔

اب فارم ماڈیول کی ترتیبات کھولیں اور مواد ٹیب پر ترمیم کریں۔

  • موجودہ صفحے پر ری ڈائریکٹ کریں: ہاں
  • پس منظر کا رنگ استعمال کریں: نہیں

ڈیزائن ٹیب۔

  • فیلڈز پس منظر کا رنگ: rgba (0،78،67،0.05)
  • فیلڈز فوکس بیک گراؤنڈ رنگین: rgba (0،78،67،0.15)
  • متن کی سیدھ: مرکز۔
  • متن کا رنگ: گہرا۔
  • ٹائٹل فونٹ: پاپ پنز۔
  • عنوان فونٹ وزن: نیم بولڈ۔
  • عنوان متن رنگ: #000000۔
  • عنوان لائن اونچائی: 1.3em
  • باڈی فونٹ: ورک سینز۔

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

اب اسے لاگ ان فارم میں چسپاں کریں جو ہم نے ابھی تیار کیا ہے۔

ہم اپنے لاگ ان فارم کے لئے بٹن اسٹائل کو اپ ڈیٹ کریں گے۔

  • بٹن کے لیے کسٹم سٹائل استعمال کریں: ہاں۔
  • بٹن متن کا رنگ: # ففف
  • بٹن پس منظر کا رنگ: #004e43
  • بٹن پس منظر کا رنگ (ہوور): #00683c۔
  • بٹن بارڈر کی چوڑائی: 0 px
  • بٹن کی بھرتی: 15px اوپر ، 15px نیچے

آئیے بھی sizing کی ترتیبات کو اپ لوڈ کریں۔

  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 80 ((ڈیسک ٹاپ) ، 90 ((ٹیبلٹ) ، 95 ((فون)
  • ماڈیول سیدھ: مرکز

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

  • سی ایس ایس کلاس: ایٹ لاگ آؤٹ فارم

درج ذیل کوڈ کو لاگ ان کی تفصیل والے باکس میں شامل کریں۔

width: 100% !important;
float: none !important;

پھر اس کوڈ کو لاگ ان فارم باکس میں شامل کریں۔

width: 100% !important;
padding: 0px !important;

یہ لاگ ان فارم کو کچھ اس طرح بناتا ہے۔

og € œ لاگ ان انâ € فارم بنانا

ہم "لاگ آؤٹ" فارم کے ساتھ کر چکے ہیں اور اب صارف کے تجربے کو بڑھانے کے ل different مختلف مواد کے ساتھ "لاگ ان" فارم بنائیں۔ ایسا کرنے کے لیے ، آئیے موجودہ لاگ ان فارم کو کلون کریں۔

اب ، ہر فارم کے نام اپ ڈیٹ کریں۔ پھر مواد کے ٹیب سے "لاگ ان" فارم کھولیں ٹیکسٹ سیٹنگ۔ پھر ٹائٹل باکس سے ، آپ کو دائیں جانب ڈراپ ڈاؤن مینو پڑے گا۔ اسے کھولیں اور "سائٹ کا عنوان" منتخب کریں۔

متحرک سائٹ کے عنوان کی ترتیبات کھولیں اور ان کو درج ذیل کے مطابق اپ ڈیٹ کریں۔

  • پہلے: آپ â log سے لاگ آؤٹ کرنے کی کوشش کر رہے ہیں۔
  • کے بعد: œ € œ. œ € œ

اب اپنی پسند کے مطابق وضاحت کی ترتیبات میں ترمیم کریں ، لیکن براہ کرم وضاحت کو ہیڈر 3 کے طور پر رکھیں۔

بہت ساری ویب سائٹ لاگ ان فارموں میں ، ہم نے "لاگ آؤٹ" لنک سے منسلک ایک حسب ضرورت پیغام دیکھا ہے۔ ہم اسے بنانے کے لیے ایڈوانس ٹیب سے باڈی ٹیکسٹ آپشن کو اپنی مرضی کے مطابق بنائیں گے۔

  • باڈی ٹیکسٹ آپشنز کے تحت لنک ٹیب کو منتخب کریں۔
  • لنک فونٹ: کام کے سانس
  • لنک فونٹ وزن: نیم بولڈ
  • لنک فونٹ انداز: ٹی ٹی
  • لنک ٹیکسٹ سیدھ: مرکز۔
  • لنک ٹیکسٹ کلر: #ffffff۔

ایڈوانس ٹیب پر جائیں اور ایک CSS کلاس اور کسٹم CSS شامل کریں۔

  • سی ایس ایس کلاس: ایٹ لاگ ان فارم۔

لاگ ان فارم کے لئے کسٹم سی ایس ایس:

display:none;

حصہ 5: کسٹم کوڈز

ہمیں اپنی مرضی کے کوڈز شامل کرنے کے لیے ایک کوڈ ماڈیول شامل کرنے کی ضرورت ہے۔ آئیے آخری لاگ ان ماڈیول کے تحت کوڈ ماڈیول شامل کریں۔

سی ایس ایس کوڈ

اسٹائل ٹیگز کے اندر ماڈیول میں دیئے گئے CSS کوڈ شامل کریں۔

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

JQuery کوڈ

اب اسکرپٹ ٹیگز کے اندر ماڈیول پر درج ذیل JQuery کوڈ کو گدا کریں۔

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

ڈیزائن کا نتیجہ

تو ، یہاں ہمارے ڈیزائن کا نتیجہ ہے۔ ہر چیز اپنی جگہ پر ہے اور عمدہ کام کرتی ہے۔

حتمی الفاظ

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