<div class='container'>
<div class='header-area'>
<div class="row">
<div class="col-sm-12">
<b:section class='header' id='header'/>
</div>
</div>
</div>
</div>
Section etiketine id olarak header ismini verdik. Sadece logo yer alacağı için widget kapasitesini 1 olarak sınırladık. Şimdi sıra logoyu eklemeye geldi. Öncelikle Yerleşim sekmesine girelim ve header katmanına gadget ekle linkine tıklayalım. Gadget yani widget olarak Sayfa Üstbilgisini seçelim. Resmi yükleyelim ve "başlık ve tanım yerine" gelmesini sağlayalım. Düzenlemeyi kaydet diyelim. Aşağıdaki resimde nasıl olduğunu görebilirsiniz..header-area{
background: rgba(255, 255, 255, 0.1);
padding:10px;
}
#header{
display: table;
margin: 0 auto;
}
Geriye son bir işlem kaldı. Eğer temayı mobil olarak görüntülerseniz logo resminin ekrana sığmadığını göreceksiniz. Bu durumu düzeltmek için tema kodu içerisinde <img expr:alt='data:title' expr:height='data:height'
kodunu aratın. Bulduğunuz img etiketi içerisine class="img-fluid"
sınıfını ekleyin, aşağıdaki resimde olduğu gibi. Bu işlemlerden sonra header yapımını tamamlamış olduk. Aşağıdaki videodan son halini görüntüleyebilirsiniz. Sorularınızı ise aşağıdaki yorum bölümünden belirtebilirsiniz.
Bu yazıya ait koda ulaşmak için tıklayınız.
Hiç yorum yok:
Yorum Gönderme