Editor X: Kılavuzların Kullanımı
7 dakikalık okuma
Editor X platformu, ajanslara ve serbest çalışanlara yönelik yeni platformumuz Wix Studio'ya geçiş yapıyor.Wix Studio hakkında daha fazla bilgi edinin (Yalnızca İngilizce)
CSS kılavuzları, ögelerinizin yapılandırılmış bir şekilde düzenlenmesini sağlamanın harika bir yoludur. Editor X'te her konteyner ve bölüm yerleşik bir kılavuzla birlikte gelir. Kompozisyonunuzun gerektirdiği satır ve sütun sayısını seçebilir ve boyutlarını birçok farklı ölçüme göre ayarlayabilirsiniz.
Bu makalede, Editor X'te kılavuzlarla çalışma hakkında her şeyi öğrenin:
Daha fazla bilgi edinmek ister misiniz?
Editor X akademisindeki ızgaralar hakkındaki eğitim videomuza göz atın.
Mevcut bir kılavuzu ayarlama
Her bölüm ve konteyner ayarlayabileceğiniz yerleşik 1x1 kılavuzla birlikte gelir. Tek tıklamayla farklı bir düzene geçin veya çizgileri mevcut kompozisyonunuzun üzerine sürükleyerek kendi kılavuzunuzu oluşturun.
Kılavuzu ayarlamak için:
- İlgili konteynere veya sayfa bölümüne tıklayın.
- Kılavuzu aşağıdaki yollardan birini kullanarak değiştirin:
Bir düzen seçin
Kılavuzu tuvalde özelleştirin
İpucu:
Ayrıca, Bölüm Ekle simgesine tıklayarak yerleşik kılavuzu olan bir bölüm ekleyebilirsiniz.
Izgarayı Denetçi panelinden yönetme
Kılavuzunuzu özelleştirerek tam istediğiniz düzeni elde edin. Satır ve sütun sayılarını değiştirebilir, boyutlarını ve aralıklarını ayarlayabilirsiniz.
Bir kılavuzu yönetmek için:
- İlgili kılavuza tıklayın.
- Editor X'in en üstündeki Denetçi simgesine tıklayın.
- Düzen sekmesine tıklayın ve Görüntüleme'ye gidin.
- Yapmak istediğiniz işlemi seçin:
- Farklı bir düzen seçin: Mevcut kılavuzla aynı sayıda hücre içeren farklı bir görünüm seçmek için Düzen açılır menüsüne tıklayın.
- Kılavuzunuzu manuel düzenleyin: Nasıl yapılacağını öğrenmek için üzerine tıklayın:
Daha fazla sütun veya satır ekleme
Sütunlarınızın ve satırlarınızın boyutunu değiştirme
Boşlukların boyutunu düzenleme
Bir satırı veya sütunu silme
Kesme noktalarıyla çalışma:
Bir kılavuz tasarlarken, kılavuzunuz yalnızca üzerinde çalıştığınız belirli kesme noktasında görünür. Ögelerinizin kompozisyonunun kusursuz olmasını sağlamak için her ekran boyutu için ayrı bir ızgara oluşturmalısınız.
Ögeleri bir kılavuz içerisinde konumlandırma
Ögeleri eklerken ve kılavuzunuza yerleştirirken, duyarlı bir düzen oluşturmanıza yardımcı olacak çeşitli araçlar vardır:
Ögeleri yanaştırma
Ögeleri kılavuz çizgilerine yanaştırma yoluyla tam istediğiniz gibi konumlandırıldıklarından emin olabilirsiniz. Bir kılavuz hücresine bir öge eklediğinizde, otomatik olarak en yakın dikey ve yatay kılavuz çizgilerine yanaştırılır. Yanaştırmayı, Denetçi panelinden gerektiği şekilde ayarlayabilirsiniz.
Ögeleri farklı bir kılavuz hücresine taşıma
Denetçideki Konum sekmesinin altında, bir ögeyi seçebilir ve içinde bulunduğu kılavuz hücrelerini görebilirsiniz. Ögeyi istediğiniz noktaya sürükle-bırak kullanmadan taşımak için herhangi bir kılavuz hücresine tıklayın.
Ögeleri bir kılavuz hücresini dolduracak şekilde uzatma
Ögeleri sadece tek bir tıklamayla bir kılavuz hücresini dolduracak şekilde uzatın. Bir öge birden fazla hücrenin kılavuz çizgileri üzerinde konumlandırılırsa, bulunduğu tüm hücrelerin üzerine uzatılır.
Kılavuz birimmleri tablosu
Kılavuzunuzu oluşturmak için tüm CSS birimleri yelpazesini kullanın. Yüzdeler, pikseller veya kesirler kullanarak sütunların ve satırların boyutunu ayarlayabilirsiniz. Ayrıca sütunların ve satırların minimum ve maksimum boyutunu ayarlayabilir ve hatta ihtiyacınız olan kılavuzu oluşturmak için hesaplamaları kullanabilirsiniz.
Not:
Satır ve sütunlarınızın boyutunu farklı birimlerde ayarlayabilirsiniz. Varsayılan olarak, satır birimleri piksel, sütun birimleri ise kesir cinsindendir.
Birim | Birim Türü | Açıklama |
---|---|---|
Kesir (fr) | Değişken | Sütunlarınızın/satırlarınızın boyutunu, sayfa bölümü/konteyner boyutunun bir kesri olacak şekilde ayarlayın. Ör. 2 sütunlu bir ızgarada, sol sütun 2fr'ye ve sağ sütun 1fr'ye ayarlanmışsa, sol sütun bölümün/konteynerin 2/3'ünü kaplayacaktır. |
Otomatik | Değişken | Satırların ve sütunların yüksekliği ve genişliği, içindeki içeriğe uyacak şekilde otomatik olarak ayarlanır. |
Yüzde (%) | Değişken | Sütunlarınızın/satırlarınızın boyutunu bölümün/konteynerin yüzdesi olacak şekilde ayarlayın. |
Piksel (px) | Sabit | Sütunlarınızın/satırlarınızın boyutunu, bölümün/konteynerin sabit sayıda ekran pikseli olacak şekilde ayarlayın. 1px = 1 inç'in 1/96'sı. |
Görüntü Alanı Genişliği (vw) | Görüntü Alanı | Sütunlarınızın/satırlarınızın boyutunu, görünüm alanının genişliğinin (tarayıcı penceresi boyutu) yüzdesi olacak şekilde ayarlayın. Ör. Görüntü alanının genişliği 50cm ise, 1vw = 0.5cm. |
Görüntü Alanı Yüksekliği (vh) | Görüntü Alanı | Sütunlarınızın/satırlarınızın boyutunu, görünümün yüksekliğinin (tarayıcı penceresi boyutu) bir yüzdesi olacak şekilde ayarlayın. Ör. Görüntü alanının yüksekliği 50cm ise, 1vh = 0.5cm. |
Min/Maks | Diğer | Sütunlarınızın/satırlarınızın boyutunu minimum ve maksimum ölçüme ayarlayın. Bu seçeneği kullanırken kılavuz birimlerinden herhangi birini seçebilirsiniz. |
Min İçerik | Diğer | Sütunlarınızın/satırlarınızın boyutunu asla bu minimum içerikten daha küçük olmayacak şekilde ayarlayın. |
Maks İçerik | Diğer | Sütunlarınızın/satırlarınızın boyutunu asla bu maksimum içerikten daha büyük olmayacak şekilde ayarlayın. |
Hesaplama | Diğer | Sütunların/satırların boyutunu ayarlamak için kılavuz birimlerinden herhangi birini kullanarak bir hesaplama oluşturun. |
Bu içerik yardımcı oldu mu?
|