Zeki Can - WordPress

  CSS, HTML

CSS ve HTML ile Yan Yana Kutu Yapımı

HTML ve CSS kullanımı ile responsive kutular oluşturacağız. Bu kutuları web sitenizde istediğiniz bir bölümde kullanabilirsiniz.

İlk olarak style.css dosyanıza alttaki kod yapısını yapıştırın. Bu kod yapısında değişiklikler yaparak arka plan rengini ve kutu içerisinde yazan yazı boyutu tipini değiştirebilirsiniz.

WordPress style.css dosyasını açıp en altta altta ki kodu yapıştırın. Style.css dosyası nerede bilmiyorsanız WordPress Style.Css Dosyası Nerededir ? adlı yazımı okuyarak kolayca bulabilirsiniz.

/* ZekiCan.Net Renkli Kutu Yapımı */
.esnek-kutum {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.zekicannet-kutum-bir {
  flex: 1;
  background: linear-gradient(#D74177,#FFE98A);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}
.zekicannet-kutum-iki {
  flex: 1;
  background: linear-gradient(#FB872B,#D9E021);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}
.zekicannet-kutum-uc {
  flex: 1;
  background: linear-gradient(#312A6C,#852D91);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}
.zekicannet-kutum-dort {
  flex: 1;
  background: linear-gradient(#009E00,#FFFF96);
  max-width:23%;
  padding: 5px;
  height: 150px;
  margin:1%;
  flex-shrink:1;
  flex-basis:23%;
  box-sizing:border-box;
}

Style.Css Dosyasına kodu ekledik ve stillerimizi belirledik. Bu stilleri dediğim gibi istediğiniz gibi düzenleyebilirsiniz.

Kutularımızı nereye yerleştirmek istiyorsak altta verdiğim kodları o alana yerleştirin. Sidebar kısmına yerleştirmek için WordPress Admin Panelinden Bileşenler kısmına gidin. Bileşenlerden Özel HTML bileşenini Sidebar alanına sürükleyin ve içerisine verdiğim kodları yerleştirin.

<ul class="esnek-kutum">
  <li class="zekicannet-kutum-bir"></li>
  <li class="zekicannet-kutum-iki"></li>
  <li class="zekicannet-kutum-uc"></li>
  <li class="zekicannet-kutum-dort"></li>
  </ul>

Ben 4 adet yan yana kutu oluşturdum. Bunu istediğiniz gibi arttırıp çoğaltmak sizin elinizde. Stil dosyasında yapacağınız küçük değişiklikler ile harika bir görünüm elde edebilirsiniz.

Gradient renkler kullanarak daha güzel bir renk kombinasyonu yakalayabilirsiniz. Gradient renkler konusunda Göze Hoş Gelen Renk Kodları ve Gradient Renk Kodları adlı yazılarımı okuyarak birbirine uygun renkleri keşfedebilirsiniz.

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar