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

Divi کے ساتھ ہیڈر برگر مینو ٹوگل کیسے کریں

Rifat Divi سبق Jun 9, 2021

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

چوری چھپے جھانکنا

آج ہم یہ ڈیزائن بنائیں گے جہاں ہیمبرگر مینو کے پیچھے نیویگیشن مینو چھپا ہو گا۔

حصہ اول: عالمی سرخی ٹیمپلیٹ۔

ہم Divi تھیم بلڈر کے پاس جاکر شروعات کریں گے اور "گلوبل ہیڈر شامل کریں" پر کلک کریں۔ ایک مینو پاپ اپ ہوگا اور "بل Buildڈ گلوبل ہیڈر" منتخب کرے گا۔

"شروع سے تعمیر کریں" کو منتخب کریں اور آگے بڑھیں۔

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

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

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

حصہ دو: گلوبل ہیڈر ڈیزائننگ

ترتیبات: مین سیکشن

پس منظر کا رنگ

اب ہم ہیڈر ڈیزائن کرنا شروع کردیں گے۔ پہلے ، ابتدائی حصے کا پس منظر کا رنگ تبدیل کریں۔

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

وقفہ کاری

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

  • اوپر کی بھرتی: 0px
  • نیچے کی بھرتی: 0 px

شامل کرنا: نئی قطار

ہمارے ڈیزائن میں ایک نئی صف شامل کرکے آگے بڑھنے دیں۔ تصویر میں قطار کا ذکر چنیں۔

سائز

مزید کسی ماڈیول کو شامل کرنے سے پہلے ، قطار کا سائز تبدیل کریں۔

  • زیادہ سے زیادہ چوڑائی: 1280px

وقفہ کاری

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

  • اوپر کی بھرتی: 5px
  • نیچے کی بھرتی: 5px

شامل کرنا: کالم میں مینو ماڈیول

مینو سلیکشن

اب نئی قطار کے کالم میں مینو ماڈیول شامل کریں اور مینو منتخب کریں۔

لوگو شامل کریں

اب ماڈیول میں لوگو شامل کریں۔

پس منظر کا رنگ ہٹا دیں

اس کے بعد ، ماڈیول کا پہلے سے طے شدہ پس منظر کا رنگ ہٹا دیں۔

ترتیبات: مینو متن

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

  • مینو فونٹ: پاپینز
  • مینو فونٹ وزن: نیم بولڈ
  • مینو متن کا رنگ: # 003e51
  • مینو ٹیکسٹ سائز: 16 پکس
  • متن کی سیدھ: دائیں

ترتیبات: ڈراپ ڈاؤن مینو

اگلے ڈراپ ڈاؤن مینو کی ترتیبات کو تبدیل کریں۔

  • ڈراپ ڈاؤن مینو لائن رنگین: # 7159c8

ترتیبات: شبیہیں

شبیہیں کی ترتیبات کو بھی تبدیل کریں۔

  • خریداری کی ٹوکری کی علامت کا رنگ: # 670 ff
  • تلاش کا آئکن کا رنگ: # 670 ایف ایف
  • ہیمبرگر مینو آئکن رنگین: # 670 ایف ایف

سائز

سائز کی ترتیبات سے ، لوگو کی زیادہ سے زیادہ چوڑائی کو تبدیل کریں۔

  • لوگو زیادہ سے زیادہ چوڑائی: 60px

وقفہ کاری

وقفہ کاری میں کچھ ایڈجسٹمنٹ کریں۔

  • نیچے مارجن: 0 پکس

سیکشن چپچپا موڑ

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

  • چسپاں پوزیشن: رہنا
  • چسپاں عناصر کے آس پاس سے آفسیٹ: ہاں
  • منتقلی ڈیفالٹ اور چپچپا طرزیں: ہاں

پس منظر کا رنگ: چسپاں موڈ

اب ، چپچپا حالت میں پورے حصے کے پس منظر کا رنگ تبدیل کریں۔

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

شیڈو: چپچپا وضع

ڈیزائن ٹیب سے بھی سیکشن میں باکس سایہ لگائیں۔

  • پہلے سے طے شدہ شیڈو رنگین: rgba (0،0،0،0)
  • چسپاں شیڈو رنگین: rgba (0،0،0،0.04)

حصہ تین: ہیمبرگر آئکن ٹوگل

مینو ماڈیول CSS ID

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

  • CSS ID: Divi-Menu

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

اب مینو ماڈیول کے نیچے کوڈ ماڈیول شامل کریں۔

سی ایس ایس کوڈ

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

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

JQuery کوڈ

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

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

toggleIcon.insertAfter(desktopMenu);

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});
 
});
});

اب ترقی کو محفوظ کریں اور اوپر دائیں کراس کو دباکر ڈیووی بلڈر آپشن پر واپس جائیں۔

حتمی نتیجہ

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

آخری خیالات

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