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

Divi میں ایک دلکش اسٹکی ہیڈر ٹوگل ٹیب کو کیسے ڈیزائن کریں

Rifat Divi سبق Jul 8, 2021

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

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

چلو اور آج کے ڈیزائن کے ساتھ شروع کریں۔

ڈیزائن پیش نظارہ

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

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

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

اب شروع کریں

حصہ اول: ٹیمپلیٹ کو درآمد اور سیٹ اپ کریں

ہم آج اس پری میڈ ٹیمپلیٹ پر کام کریں گے۔ آپ یہاں کلک کرکے ٹیمپلیٹ فائل ڈاؤن لوڈ کرسکتے ہیں ۔

سانچہ درآمد کریں

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

درآمد کے اختیارات پر جائیں اور ان نشان زد اختیارات کو نشان زد کریں اور "درآمدی تھیم بلڈر ٹیمپلیٹ درآمد کریں" پر کلک کریں۔

اب امپورٹ بطور جامد ترتیب پر کلک کریں اور آگے بڑھیں۔

اب ہماری ترتیب درآمد کی گئی ہے۔ فوٹر سیکشن کو حذف کریں ، تبدیلیوں کو محفوظ کریں اور ترمیم کی ترتیبات کو کھولیں۔

موجودہ کوڈ ماڈیول کو حذف کریں

اب ہمارا ڈیزائن ترمیم کے ل open کھلا ہے ، اور آئیے تہوں سے موجودہ کوڈ ماڈیول کو خارج کردیں۔

دوسرا حصہ: چسپاں ہیڈر کے ساتھ ٹوگل ٹیب بنائیں

دفعہ کی ترتیبات

ہم پورے حصے میں چپچپا اثر کو نافذ کریں گے ، اور اس کے ل we ، ہمیں پورے حصے پر سی ایس ایس کلاس لگانا ہوگی تاکہ ہم اس کے ساتھ بعد میں کام کرسکیں۔

سیکشن کی سیٹنگیں کھولیں اور درج ذیل کو اپ ڈیٹ کریں:

  • سی ایس ایس کلاس: ET-Divi- چپچپا ہیڈر
  • چسپاں پوزیشن: رہنا

ایک کلنک ماڈیول سے ٹیب تخلیق ٹوگل کریں

ہم مینو ماڈیول کے تحت کلنک ماڈیول شامل کریں گے۔

بلبنگ مشمولات کی ترتیب

پھر بلبنگ ماڈیول کے لئے ترتیب کھولیں اور مندرجہ ذیل مواد کو اپ ڈیٹ کریں:

  • عنوان کے مواد کو حذف کریں
  • جسمانی مواد حذف کریں
  • آئیکن کا استعمال کریں: ہاں
  • شبیہ: اپ تیر (اسکرین شاٹ دیکھیں)
  • پس منظر کا رنگ: # ففف

بلب ڈیزائن ڈیزائن

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

  • آئکن کا رنگ: # 1a3066
  • آئیکن فونٹ سائز استعمال کریں: ہاں
  • آئکن فونٹ سائز: 40px

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

  • چوڑائی: 45 پکس
  • اونچائی: 45 پکس
  • حاشیہ: 0px نیچے
  • گول کونے: 12px نیچے بائیں ، 12px نیچے دائیں
  • ترجمہ کریں Y محور: 100٪
  • تصویری / شبیہ حرکت پذیری: کوئی حرکت پذیری نہیں

اعلی درجے کی ترتیبات کو بلب کریں

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

  • سی ایس ایس کلاس: ET-Divi- چپچپا ٹوگل
  • پوزیشن: مطلق
  • مقام: نیچے دائیں
  • افقی آفسیٹ: 20 پکس
  • زیڈ انڈیکس: -1

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

حصہ تین: کوڈ شامل کریں

اب ہمارے ڈیزائن میں مزید فعالیت شامل کرنے کے لئے ، کلنک ماڈیول کے نیچے کوڈ ماڈیول شامل کریں۔

سی ایس ایس کوڈ شامل کریں

کوڈ ماڈیول میں درج ذیل CSS کوڈ شامل کریں۔ ان کو اسٹائل ٹیگ کے اندر رکھنا یقینی بنائیں۔

.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}
 
.et-divi-sticky-toggle:hover {
  cursor: pointer;
}
 
.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}
 
.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}
 
.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}
 
.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

JQuery کوڈ شامل کریں

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

jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");
 
  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop >= headerHeight AndAnd
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight AndAnd
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });
 
  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

چوتھا حصہ: حتمی ترتیبات

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

حتمی ڈیزائن

یہ ہم نے اب تک جو کیا اس کا نتیجہ ہے۔ ہم امید کرتے ہیں کہ آپ اس سے مطمئن ہوں گے۔

نتیجہ اخذ کرنا

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