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

پوپر ڈاٹ جے ایس کے ساتھ ڈوی میں متحرک پوپ اوور (فلوٹنگ مینوز) کیسے بنائیں

Blair2004 Divi سبق Feb 24, 2021

کیا آپ نے Popper.js نامی لائبریری کے بارے میں کبھی سنا ہے؟ یہ لائبریری آپ کو جاوا اسکرپٹ پر پاپ اوور بنانے کی اجازت دیتی ہے۔ ان دنوں پاپ اوور کا استعمال خاص طور پر عام ہے کیونکہ اس سے کسی خاص عنصر (بٹن ، لنک ، وغیرہ) کے بارے میں مزید معلومات ظاہر کرنے میں مدد ملتی ہے۔ متحرک پاپ اوور پر غور کرنے کی وجہ بنیادی طور پر اس بات کو یقینی بنانا ہے کہ وہ اسکرین پر موضوع کی پوزیشن کے حوالے سے صحیح جگہ پر دکھائے گی۔ ٹھوس طور پر ، اگر مضمون سکرین کا نیچے ہے تو ، پاپ اوور اوپر دکھائے گا۔ اگر یہ اسکرین کے اوپری حصے پر واقع ہے تو ، پاپ اوور نیچے دکھائے گا ، وغیرہ۔

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

یہاں ان پاپ اوورز کی پوزیشننگ کی ایک مثال ہے۔

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

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

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

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

آو شروع کریں!

فلوٹنگ مینو کا پیش نظارہ

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

Divi میں Popper.js کے ساتھ پوپ اوور بنانا

جیسا کہ ہم نے پہلے کہا تھا ، ہم متحرک طور پر پوزیشن والے پوپ اوور بنانے کے لئے Divi میں Popper.js استعمال کرنے جارہے ہیں ، جو پاپ اوور سبجیکٹ (بٹن) پر کلک کرنے پر انکشاف ہوتا ہے۔ Divi کے ساتھ ، ہم آسانی سے تیرتے ہوئے مینو اور ایک بٹن تشکیل دے سکتے ہیں۔ پھر بعد میں ہم دونوں کاموں کو یکساں بنانے کے لئے ضروری کوڈ کو شامل کرنے جارہے ہیں۔

دفعہ

تو ہم باقاعدہ سیکشن میں کسٹمر کی شناخت شامل کرکے شروع کریں گے جو پہلے سے طے شدہ طور پر تیار ہوتا ہے۔ سیکشن کی ترتیبات کھولیں اور درج ذیل ID شامل کریں:

  • سی ایس ایس ID: پوپر سیکشن

ڈویو قطار کے ساتھ پوپر پوپ اوور بنائیں

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

قطار کی ترتیبات کو کھولیں اور مندرجہ ذیل اسٹائل کی تازہ کاری کریں:

  • پس منظر کا رنگ: # 333333
  • گٹر کی چوڑائی: 2
  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 500px
  • بھرتی: 0 px ٹاپ ، 0 px نیچے ، 0 px بائیں ، 0 px دائیں
  • گول کونے: 10px

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

اعلی درجے کی ٹیب پر جائیں اور درج ذیل کو اپ ڈیٹ کریں:

  • سی ایس ایس ID: پاپر پاپ اپ
  • افقی اتپرواہ: مرئی
  • عمودی بہاؤ: مرئی

آئیے پاپور قطار میں مواد شامل کریں

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

شروع کرنے کے لئے ، قطار کے کالم میں بٹن ماڈیول شامل کریں۔

آئیے اپنے بٹن میں کچھ اسٹائلنگ شامل کریں۔ ہم بٹن کی ترتیبات کو اس طرح اپ ڈیٹ کریں گے۔

  • بٹن سیدھ: مرکز
  • بٹن کے لئے کسٹم اسٹائل کا استعمال کریں: ہاں
  • بٹن بارڈر کی چوڑائی: 1px
  • بٹن بارڈر کا رنگ: # 555555
  • بٹن بارڈر رداس: 10px
  • بٹن کی علامت: اسکرین شاٹ دیکھیں
  • مارجن: 20 پکس ٹاپ ، 20 پی ایکس نیچے ، 20 پکس بائیں ، 20 پکسٹ دائیں
  • بھرتی: 0.5 ملی میٹر اوپر ، 0.5 ملی میٹر نیچے ، 2 ایم بائیں ، 2 ایم دائیں

اہم: ہم ماڈیول پر مارجن کو صفوں کے فرق کو استعمال کرنے کے بجائے خلا پیدا کرنے کے لئے استعمال کر رہے ہیں کیونکہ ہم ایک تیر (ڈیوائڈر کا استعمال کرتے ہوئے) جوڑیں گے جس کو صف کے کنارے (مطلق پوزیشن کے ساتھ) پوزیشن میں رکھنے کی ضرورت ہے۔ کوئی بھی قطار یا کالم بھرنے والے تیر کو کنارے سے دور کردیں گے۔

اب ، ہمیں بٹن کو کالم / قطار کی پوری چوڑائی پر پھیلاؤ کے ل Main مین عنصر میں درج ذیل کسٹم سی ایس ایس پیٹ شامل کرنے کی ضرورت ہے۔

display: block !important

ہمارے مینو پاپ اوور میں مزید کچھ بٹن شامل کرنے کے لئے اب آپ بٹن کو دو (یا زیادہ) بار ڈپلیکیٹ کرسکتے ہیں۔

پوپ اورو یرو بنانا

پوپر. جے ایس پاپ اوور کے ساتھ ساتھ تیر والے مقام کی حمایت کرتا ہے۔ تیر بنانے کے ل our ، ہماری صف میں آخری بٹن کے نیچے ایک نیا ڈیوائڈر شامل کریں۔

تقسیم کنندہ کی ترتیبات میں ، تقسیم کنندہ کو نہ ظاہر کرنے کے لئے منتخب کریں۔ پھر ، اعلی درجے کی ٹیب کے تحت ، درج ذیل سی ایس ایس ID شامل کریں:

  • سی ایس ایس ID: پاپر-تیر

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

پوپ اوور بٹن (یا حوالہ) تشکیل دینا

ایک پاپپر پاپ اوور کے دو اہم عناصر میں پاپ اوور عنصر (یا پوپر) اور وہ مضمون شامل ہوتا ہے جس میں پاپ اوور خود سے منسلک ہوتا ہے۔ آپ کسی بھی جزوی عنصر کو بطور حوالہ استعمال کرسکتے ہیں جو پاپ اوور پیدا کرتا ہے ، لیکن اس مثال کے طور پر ، ہم ایک بٹن استعمال کرنے جارہے ہیں۔

پوپر کے لئے مضمون بنانا: بٹن

اس سے پہلے کہ ہم اپنا بٹن بنائیں ، ہمیں اپنی پاپور قطار کے تحت ایک نیا ون کالم قطار شامل کرنے کی ضرورت ہے۔

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

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

  • بٹن متن کا رنگ: # ففف
  • بٹن کے پس منظر کا رنگ: # a043e8
  • بٹن بارڈر کی چوڑائی: 0 px
  • بٹن بارڈر رداس: 10px

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

  • سی ایس ایس ID: پاپر بٹن

آئیے کوڈ شامل کریں

اب جبکہ ہمارے پاپ اوور اور بٹن مکمل ہوچکے ہیں ، ہم جادو کو ہوا دینے کے لئے کوڈ شامل کرنے کے لئے تیار ہیں

ایسا کرنے کے لئے ، دوسری قطار میں ریفرنس بٹن ماڈیول کے تحت کوڈ ماڈیول شامل کریں۔

یہ ضروری ہے کہ اس کے کام کرنے کے لئے کوڈ صفحے کے نچلے حصے میں ہے۔

پہلے ، ہم سی ایس ایس شامل کریں گے۔

کوڈ کے مشمولات والے باکس میں ، وہ اسٹائل ٹیگز شامل کریں جنہیں HTML میں CSS کو لپیٹنے کی ضرورت ہے۔ پھر مندرجہ ذیل سی ایس ایس کو اسٹائل ٹیگز کے درمیان کاپی اور پیسٹ کریں:

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

اگلا ، ہمیں Popper.js لائبریری تک رسائی حاصل کرنے کی ضرورت ہے اسکرپٹ کو شامل کرکے جو اپنے CDN (https://unpkg.com/@popperjs/[email protected]) سے پوپر.جز درآمد کرتا ہے۔ اختتامی اسٹائل ٹیگ کے تحت ، درج ذیل اسکرپٹ کوڈ باکس میں چسپاں کریں۔

لائبریری کو درآمد کرنے کے لئے اسکرپٹ ٹیگ میں درج ذیل src کا استعمال کریں:

src="https://unpkg.com/@popperjs/[email protected]"

یہ اس طرح نظر آنا چاہئے:

اب ہم کوپر شامل کرنے سے پہلے پوپر جے جے کو درآمد کریں گے جو اسے استعمال کرے گا۔ لہذا ، اسکرپٹ نے Popper.js کی طرف اشارہ کرنے کے بعد ، جاوا اسکرپٹ کو لپیٹنے کے لئے ضروری اسکرپٹ ٹیگز شامل کریں جس میں ہمیں شامل کرنے کی ضرورت ہے۔ اس کے بعد اسکرپٹ ٹیگ کے درمیان درج ذیل جاوا اسکرپٹ چسپاں کریں۔

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

یہی ہے! ہم سب ہوچکے ہیں۔ آئیے اب حتمی نتیجہ کی جانچ کرتے ہیں۔

حتمی نتائج کا پیش نظارہ کرنا

اس ٹیوٹوریل کا نتیجہ دیکھنے کے لئے ، ہمیں پوپر پوپ اوور کے پوزیشننگ جادو کو جانچنے کے لئے کچھ سکرولنگ اسپیس بنانے کی ضرورت ہے۔

ایسا کرنے کے ل the ، سیکشن کی ترتیبات کھولیں اور کچھ مارجن درج کریں:

  • مارجن: 80vh اوپر ، 80vh نیچے

فعالیت کی طرح دکھتی ہے یہ ہے:

نوٹس کریں کہ کس طرح پوپ اوور (اور تیر) کی پوزیشن متحرک طور پر تبدیل ہوتی ہے جب صارف اسکرول کرتے ہیں یا براؤزر کا سائز تبدیل کرتے ہیں۔

خلاصہ

اگر آپ Divi میں popper.js کا استعمال کرتے ہوئے ایک پاپ اوور بنانا چاہتے ہیں تو ، آپ کو جاوا اسکرپٹ کی اچھی خاصی پر انحصار کرنے کی ضرورت ہوگی ، لیکن نتیجہ اس کے قابل ہے۔ پوپ اوور کی متحرک پوزیشننگ اتنا بڑا UI جزو ہے جس سے کسی بھی ویب سائٹ کو فائدہ ہوگا۔ اس کے متعلق اپ کیا سوچتے ہیں؟ کیا آپ پہلے ہی کوشش کر چکے ہیں؟ ہمیں بتائیں.