Tüm bloklar, yazı tipleri, arka planlar ve görüntüleme için aynı genel ayarları kullanır; bu, blok içeriğinin farklı olmasına izin verirken sitenizde tutarlı bir görsel stil sağlar.

Herhangi bir blok için genel ayarları yapılandırmak üzere, farenizi bloğun üzerine getirin ve beliren Ayarlar düğmesini seçin.

Sağdaki genel bölüm ayarları menüsünü açmak için Ayarlar düğmesine tıklayın.

Yazı Tipi Ayarları

Aşağıdaki ayarları değiştirebilirsiniz:

  • Yazı tipi ve stil: Yazı tipi ailesi, stil (Normal veya İtalik) ve kalınlık (kalınlık).
  • Boşluk: Harf aralığı, satır yüksekliği ve yazı tipi boyutu.

Hem Başlık hem de Metin alanına sahip bloklar için iki stil seçeneğiniz vardır:

  1. Tekdüzelik için tüm bloğa tek bir yazı tipi stili uygulayın.
  2. Aynı blok içinde farklı görsel roller oluşturmak için Başlık ve Metin için ayrı stiller tanımlamak üzere Ek yazı tipi seçeneğini etkinleştirin.

Özel yazı tipi nasıl eklenir

Özel bir yazı tipi eklemek için aynı ada sahip düğmeyi bulun ve tıklayın:

Çok çeşitli farklı yazı tiplerinin bulunduğu bir sayfaya yönlendirileceksiniz:

Adım 1. İstediğiniz yazı tipini bulun

a) Bu, arama çubuğu kullanılarak yapılabilir:

Yazı tipi için gerekli kriterleri seçin:

  • Yazı tipi kategorisi
  • sans-serif (çizgisiz harfler)
  • serif (çizgili harfler)
  • handwriting (el yazısını taklit eden yazı tipi)
  • monospace (sabit aralıklı veya orantısız yazı tipi, tüm karakterlerin aynı genişliğe sahip olduğu yazı tipi)
  • display (kalın görüntülenen yazı tipi)
  • Dil desteği
  • Kiril
  • Latin

b) Bir yazı tipini manuel olarak bulmak için biçimlendirme şeridinde listeyi kaydırın.

Adım 2. Seçilen yazı tipine tıklayın:

Yazı tipi seçeneklerini içeren bir modal pencere göreceksiniz:

Adım 3. İhtiyacınız olanın yanındaki kutuyu işaretleyerek bir yazı tipi seçeneği belirleyin:

Adım 4. "Ekle" düğmesine tıklayın:

Özel yazı tipi ayarlarınız kaydedildikten sonra burada görüntülenecektir.

Adım 6. "Kaydet" düğmesine tıklayın:

Eklenen yazı tipleri, varsayılan yazı tipleriyle aynı listede gösterilecektir.

Arka Plan Ayarları

Bölüm arka planını düz bir renk, gradyan, resim veya video ile özelleştirin.

Bir arka plan resminin üzerine bir renk veya gradyan katmanı ekleyebilirsiniz.

Resim, dosya olarak veya resme bağlantı olarak eklenebilir:

Depolamadan bir video eklenebilir

Öncelikle video dosyanızı dosya depolama alanına yükleyin.

Arka plan resmi ayarları

Resim konumlandırma kontrolü

Bir bölüm içindeki resim, iki bağımsız parametre kullanılarak konumlandırılır:

  1. Yatay hizalama (X ekseni)
  2. Dikey hizalama (Y ekseni)

Konumu bir anahtar kelime veya kombinasyon kullanarak belirtin:

Anahtar Kelime Etki
top, bottom, center Dikey hizalama
left, right, center Yatay hizalama
bottom left, top right, center center Birleşik konum

Hassas kontrol için sayısal değerler de kullanabilirsiniz:

  • Yüzdeler (ör. 30% 75%)
  • Pikseller (ör. 20px 100px)
  • Veya karışık birimler

Resim boyutlandırma seçenekleri

Aşağıdaki yöntemleri kullanarak bir resmin boyutlarını kontrol edebilirsiniz:

1. Özel boyutlar ayarlayın

Esnek değerler kullanarak hem genişliği hem de yüksekliği tanımlayın.

  • Biçim: [genişlik] [yükseklik]
  • Örnek 1 (Piksel): 500px 300px
  • Örnek 2 (Yüzde): 15% 10%

2. Hazır bir anahtar kelime kullanın

Belirli bir ölçekleme davranışı uygulamak için tek bir parametre belirtin:

  • contain — Resmi, en boy oranını koruyarak bölümün yüksekliğine tamamen sığacak şekilde ölçekler (Örnek 3).
  • cover — Resmi orijinal piksel boyutlarında görüntüler (Örnek 4: orijinal boyut 1268 × 1343 piksel).

Resim tekrarı

Bu seçenek varsayılan olarak devre dışıdır. Mevcut ayarlar şunları içerir:

Resim nasıl sabitlenir

Sabit bir arka plan resmi ayarlamak için bu anahtarı etkinleştirin. Etkinleştirildiğinde, resim kaydırma sırasında sabit kalır ve içeriğin üzerinde hareket etmesine izin verir.

Arka plan rengi ve gradyanı

Bölümün arka planını düz bir renkle özelleştirebilir veya mevcut seçeneklerden bir gradyan seçebilirsiniz.

Görüntüleme Ayarları

Bu bölümün nerede görüneceğini (ör. hangi cihazlarda veya platformlarda) belirtebilirsiniz. Varsayılan olarak web sitesinde ve Facebook'ta görüntülenir. Açılır menüyü kullanarak, bu blok için yalnızca web sitesinde görünür hale getirme gibi bir görüntüleme seçeneği seçebilirsiniz.

Kenar Yarıçapı:

Kenar yarıçapı piksel - px cinsinden belirtilir.

Bölüm yüksekliği

Bölümün yüksekliği aşağıdaki birimler kullanılarak tanımlanabilir:

  • px: piksel (sabit değer)
  • vh: görüntü alanı yüksekliği (ekran boyutuna duyarlı)

Bölüm genişliği

1 sütunun genişliği = 106 px

Varsayılan olarak, bölüm genişliği tam ekrana ayarlanmıştır ve içerik 8 sütunlu bir düzen içinde görüntülenir.

Örnek 1: İçerik bölüm içinde ortalanmıştır ve düzenin 5 sütununu kaplar.

Örnek 2. Bir bölüm 8 sütun kaplar ve içerik bölümün tüm genişliğini kapsar:

Kaydırmayla Tetiklenen Görünüm Efekti

İçeriğiniz için kaydırmayla tetiklenen animasyonları etkinleştirmek için bu anahtarı etkinleştirin. İçeriğin alttan, üstten, soldan veya sağdan görünmesini seçebilirsiniz.

İçerik görüntüleme

İçerik varsayılan olarak yatay olarak görüntülenir ve ortalanır. Sayfanın sol veya sağ kenarına kaydırılabilir.

Dikey olarak, içerik varsayılan olarak üste hizalanır. Sayfada aşağı taşınabilir veya ortalanabilir.

Metni Mavibot stillerine göre dar ekranlara uyarlamak için lütfen bu kaydırıcıyı etkinleştirin:

Kenar Boşlukları (bölüm için)

Dış kenar boşlukları

Bölümler arasındaki boşluğu ayarlamak için bu alanları kullanabilirsiniz. Varsayılan olarak, iç dolgu (üst/alt/sol/sağ) 0 px olarak ayarlanmıştır.

Tüm kenarlara eşit kenar boşlukları uygulamak için değeri ana alana girin. Üst, alt, sol ve sağ kenar boşlukları otomatik olarak ayarlanacaktır.

Görsel tutarlılığı sağlamak için, kenar boşlukları her bölüm için ayrı ayrı yapılandırılmalıdır.

İç kenar boşlukları

Bölümün iç kenar boşluğunu ayarlamak için bu alanları kullanın. Varsayılan olarak, kenar boşluğu (üst, alt, sol, sağ) 32 px olarak ayarlanmıştır.

Cihaza göre görünürlük aralığı

Görünürlük aralığı, bu bloğun hangi cihazlarda (ör. masaüstü, tablet, mobil) görüntüleneceğini belirler. Bu ayar her blok için ayrı ayrı yapılandırılır.

Bu neden kullanışlıdır ve nasıl çalışır?

Bir blok (ör. bir kapak) masaüstünde iyi görüntüleniyor ancak mobilde görüntülenmiyorsa, yalnızca ekran genişliği 960 piksel veya daha büyük olan cihazlarda görünecek şekilde yapılandırabilirsiniz. Bu, bloğun yalnızca masaüstü görünümlerinde görünmesini ve mobil cihazlarda gizlenmesini sağlar.

Ardından bu bloğu kopyalamanız ve görünümünü özellikle mobil cihazlar için özelleştirmeniz gerekir (fotoğrafı, yazı tipi boyutunu vb. değiştirin). Bu blok için görünürlüğü 0 ila 960 piksel aralığında ayarlayın. Bloğun mobil versiyonu olacaktır.

Sonuç olarak, masaüstü versiyonu bilgisayarlarda, mobil versiyon ise akıllı telefonlarda ve tabletlerde görüntülenecektir.

Görünürlük aralığı (farklı parametre değerleri), çözünürlüğü seçerek birimin görünümünü belirli bir cihaz için özelleştirebilmek için gereklidir. Örneğin, blok bir tablette veya belirli bir telefon modelinde iyi görüntülenmiyorsa, bu cihazların çözünürlüğüne göre görünümünü özelleştirebilirsiniz.

Varsayılan olarak, bölüm her boyuttaki cihazda görüntülenir.

Örnek

İlk bölümü mobil cihazlar ve tabletler için yapılandırın

  • Bir bölüm oluşturun
  • Görünürlük aralığını 0 ila 640 px olarak ayarlayın
  • Küçük ekranlar için optimize edilmiş bir resim yükleyin

İkinci bölüm PC'ler (dizüstü bilgisayarlar) içindir. Görünürlük aralığını 641 piksel ve üzeri olarak ayarlayın.

  • Değişikliklerinizi kaydedin ve düzenleme sayfasına gidin. Kolaylık olması için bölüm görünürlük ayarları orada görüntülenecektir.

Bölümlerin belirli bir cihazda nasıl görüneceğini test etmek için site önizleme sayfasına gidin. Sağ fare düğmesine tıklayın ve "Kodu görüntüle"ye tıklayın.

Sitenin nasıl görüneceğini görmek istediğiniz cihazı seçin.

Görünüm zamanlaması

Bu alanı, bir bölümün görünmesinden önceki gecikmeyi saniye (s) veya dakika (d) cinsinden tanımlamak için kullanabilirsiniz.