Basit CSS Izgara Düzenlerini WordPress'e Entegre Etme

WordPress'e tutarlı, sağlam bir ızgara düzeni elde etmek, doğru araçları kullanırsanız acısız bir işlem olabilir. Bu eğiticide, WordPress'te çok hafif ve değiştirmesi kolay bir ızgara sisteminin nasıl hızlı bir şekilde kurulacağını adım adım öğreneceksiniz. Izgarayı ayarlamak için doğru araçları kullanmaya odaklanabilmemiz için tasarımı basit tutacağız, ancak gerektiğinde ızgarayı kendi başınıza biçimlendirebileceğinizi unutmayın.

Bu kılavuzda WordPress'teki varsayılan bir Havuz teması kullanacağım ve sadece kılavuzları doğru bir şekilde elde etmek için "sıfırdan başla" yaklaşımını göstereceğim..

Adım 1: Izgara Genişliğini Belirle

Başlamadan önce, şebekenizin ne kadar geniş olması gerektiğini belirlemeniz gerekir. WordPress sitemde, bir nesneye sağ tıkladığınızda Google Chrome'un "Element İnceleme" özelliğini kullanarak ana sütunumun genişliğinin 450 piksel olduğunu görebiliyorum. Bu, web sayfasındaki bir nesnenin genişliğini ve yüksekliğini hızlı bir şekilde belirleyebildiğim en hızlı yol..

Adım 2: Izgara Tasarımcısı

İsterseniz yapabileceğiniz bir ızgarayı el yapmak yerine, mevcut birçok ızgara üretme aletinden biriyle kullanmanızı öneririm. Bu ders için, grid jeneratörünü MindPlay tarafından kullanacağım. Çok basit ve hafif bir ızgara jeneratörü.

Üç sütunlu bir ekran istiyorum ve piksellerimin 450'de olduğundan emin olmam gerekiyor. Bu nedenle buna göre ayarlayın ve "Dışa Aktar" sekmesine atlayın. Üzerinden gitmeyeceğiz * tipografi Bu eğitimdeki özellikler, bu kesinlikle kendi başınıza keşfetmeye değer olsa da.

Dışa Aktar sekmesinde, en üstteki "Stil Sayfası" çerçevesini kullanın ve "Izgara" yorumunu görene kadar aşağı kaydırın. Yorumdan her şeyi bu çerçevenin altına kopyalayacaksınız. Sadece 30 satır olmalı

Adım 3: WordPress Stil Sayfanızı Güncelleme

WordPress sitenize giriş yapın ve Görünüm> Editör'e gidin..

Editör panelinin sağ alt köşesinde styles.css dosya (veya temanıza bağlı olarak benzer bir şey). Açmak için buna tıklayın.

Sayfanın en altına gidin ve tercihinizi MindPlay.dk ile yapıştırın:

Adım 4: Izgarayı Uygulama

Izgarayı kullanmak için, sadece bir

sınıf "ızgara" ile. Kılavuzun her alanı CSS'de tanımlanır. Yeni bir sayfa aç veya gönder. Kılavuzunuzu oluşturmaya başlamak için HTML sekmesine gidin.

Başlamak için yerine yapıştırabileceğiniz bazı örnek pre:

   Sol sütun
  Orta sütun
  Sağ sütun

İşte WordPress'te nasıl göründüğü:

Sayfayı kaydedin / güncelleyin ve sonuçlara bakın. Benim durumumda, bu sitenin ana sayfası:

Yukarıdaki ekran görüntüsünden görebileceğiniz gibi, üç sütunumuz var ve olmasını istediğimiz yerde her şey doğru. Aşağıdakilerden başlayarak istediğiniz kadar satır ekleyebilirsiniz

    Sol sütun
  Orta sütun
  Sağ sütun
    Sol Sıra # 2
  Orta Sıra # 2
  Sağ Sıra # 2

İşte şimdiye dek nasıl göründüğü:

Artık resim veya metin ekleyebilir ve her satırı tam istediğiniz gibi biçimlendirebilirsiniz..

Tweaking için ipuçları

Birden fazla satırınız olduğunda, bazı tarayıcılarda sorun yaşayabilirsiniz. Bu sorunu aşmak için, marjı en sağda tutmanız gerekir (.ızgara m4, Bizim durumumuzda) her satırın olmasını istediğiniz yüksekliğe. 250 piksele 250 piksele sahip görüntüleri kullanıyorsanız, satır yüksekliğini .ızgara m4 250 piksel olmak

.grid-m4 float: left; genişlik: 20px; yükseklik: 250px;

Bu emin yapacak .ızgara m1 Bir sonraki satırın sol tarafında, üstündeki satıra kadar taşmaz.

Tüm kılavuzun arka planını stillendirmek istiyorsanız, ekranın yüksekliğini ayarlamanız gerekir. .Kafes sınıf. Diyelim ki ızgaralarınızda her biri 250px'de dört sıra var. 1000px'te .grid sınıfına yükseklik eklemek isteyeceksiniz, böylece eklediğiniz stil öğeleri tüm ızgara tasarımını kapsayacak.

.ızgara genişlik: 450 piksel; yükseklik: 1000px; marj: otomatik;

Kullandığınız MindPlay.dk ızgara oluşturucusunun sürümüne bağlı olarak, site ".grid-m4" oluşturmayabilir ve bunun yerine kullanmanız gerekebilir .ızgara m1 sonra .Izgara C3 şebekenizin doğru yere yayıldığından emin olmak için:

  Sol sütun
  Orta sütun
  Sağ sütun

Nihai sonuçlar

Nihai sonuçlarım iki satır ve bazı basit grafiklerle nasıl görünüyor:

İyi eğlenceler tasarlayın ve şebekenizi dilediğiniz gibi şekillendirebileceğinizi unutmayın.

Editörün Notu: Bu gönderi tarafından yazılmıştır Tara Hornor Hongkiat.com için. Tara, İngilizce bilmektedir ve pazarlama, reklam, markalaşma, grafik tasarım ve masaüstü yayıncılık üzerine yazmaktadır. Yazma kariyerine ek olarak Tara, kocası ve iki çocuğuyla vakit geçirmekten de hoşlanıyor..