Deneyimler Oluşturma
Web Araçları -> Deneyimler -> Web Kişiselleştirme -> Yeni Bir Deneyim Yayınla
Uyarı:
Tıkladığınızda ve sonra ve Bitti, ve değişiklikler doğrudan web sayfanıza uygulanır.
Yeni Bir Deneyim Oluşturma
Tamamladıktan sonra Kurulum ve Kurallar web kişiselleştirme deneyiminiz için, Değişiklik Ekle düğmesi ile Kurallar / Değişiklikler bölümünde yapılandırabilirsiniz.
Yerleşim özelliklerini ve metin hizalamasını ayarlamaktan arka plan resimlerini ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Personalization size benzersiz ve ilgi çekici dijital ortamlar oluşturma gücü verir.
Bu rehber, Netmera Web Personalization aracında bulunan bir dizi CSS özelleştirmesini keşfeder ve web sayfalarınızı çarpıcı görseller ve etkileşimlerle nasıl oluşturabileceğinizi ortaya koyar. Bu teknikleri kullanarak gerçekten kişiselleştirilmiş ve dinamik ziyaretçileriniz üzerinde kalıcı bir izlenim bırakan çevrimiçi deneyimler oluşturabilirsiniz.
Herhangi bir değişiklik yapmadan önce, üzerinde değişiklik yapmak istediğiniz öğeyi seçmeniz gerekir. Seçildikten sonra tüm CSS ayarlarını sol menüde ve değişikliklerinizi sağ menüde takip edebilirsiniz. Ayrıca, öğeye sağ tıklayarak HTML ayarlarını de değiştirebilirsiniz.
CSS Özelleştirmeleri
Boyut ve Konum
Sol menüde, Metin İçeriği girişini kullanarak metni doğrudan değiştirebilirsiniz. Öğelerin boyutlarını ayarlamak için Boyut ayarını kullanın. Öğelerin konumunu ayarlamak için Konum ayarını kullanın.
Arka plan
Arka Plan ayarlarında öğelerinizin arka plan rengini özelleştirebilir, arka plan resmini değiştirebilir ve arka plan resminin nasıl davranacağını belirleyebilirsiniz.
Arka plan tekrar etme, arka plan resmi arka plan boyutuna veya öğe boyutuna uymadığında nasıl davranacağını tanımlar. Aşağıdaki değerlere sahiptir:
no-repeat: Arka plan resmi yalnızca bir kez gösterilir ve tekrar edilmez.
repeat: Arka plan resmi hem dikey hem de yatay olarak tekrarlanır. Resim sığmazsa son resim kırpılacaktır. Bu varsayılan davranıştır.
repeat-x: Arka plan resmi yalnızca yatay olarak tekrarlanır.
repeat-y: Arka plan resmi yalnızca dikey olarak tekrarlanır.
space: Arka plan resmi, kırpma olmadan mümkün olduğunca çok tekrarlanır. İlk ve son resimler öğenin iki yanına sabitlenir ve resimler arasındaki boşluk eşit şekilde dağıtılır.
round: Arka plan resmi tekrarlanır ve boşluk olmadan alanı dolduracak şekilde ayarlanır; gerekirse uzatılır veya sıkıştırılır.
Yerleşim
Yerleşim bölümünde yerleşim özelliklerinizi belirleme özgürlüğüne sahipsiniz.
Şu float özelliği, bir öğenin sola, sağa mı yoksa hiç mi float (kayan) olması gerektiğini belirler. Aşağıdaki değerlerden birini alabilir:
none: Öğe float olmaz ve metinde bulunduğu yerde tam olarak görüntülenir. Bu varsayılan davranıştır.
left: Öğe kapsayıcısının soluna doğru float olur.
right: Öğe kapsayıcısının sağına doğru float olur.
Şu vertical-align özelliği, bir öğenin dikey hizalamasını ayarlamak için kullanılır. Aşağıdaki değerleri alabilir:
middle: Öğe ebeveyn öğesinin ortasına yerleştirilir.
top: Öğe aynı satırdaki en yüksek öğenin üstü ile hizalanır.
bottom: Öğe aynı satırdaki en alçak öğe ile hizalanır.
baseline: Öğe ebeveyninin yazı taban çizgisi ile hizalanır. Bu varsayılan davranıştır.
sub: Öğe ebeveyninin alt simge taban çizgisi ile hizalanır.
super: Öğe ebeveyninin üst simge taban çizgisi ile hizalanır.
text-top: Öğe, ebeveyn öğenin yazı tipinin üstü ile hizalanır.
text-bottom: Öğe, ebeveyn öğenin yazı tipinin altı ile hizalanır.
Şu overflow özelliği, bir öğenin belirtilen alanını aşan içeriğin nasıl ele alınacağını belirler. Aşağıdaki değerlerden birini alabilir:
visible: Taşma kırpılmaz ve içerik öğenin kutusunun dışında görüntülenir. Bu varsayılan davranıştır.
hidden: Taşma kırpılır ve belirtilen alanın dışına uzanan herhangi bir içerik görünmez olur.
scroll: Taşma kırpılır ve belirtilen alanın dışına uzanan içeriğin geri kalanını görüntülemek için bir kaydırma çubuğu eklenir.
Şu opacity özelliği bir öğenin saydamlık seviyesini ayarlamak için kullanılır. Saydamlık seviyesi 0 ile 1 arasında bir değer olarak belirtilir, burada:
1: Öğe hiç saydam değildir (tamamen opak).
0.5: Öğe %50 saydamdır.
0: Öğe tamamen saydamdır ve bu nedenle görünmezdir.
Şu z-index özelliği, bir web sayfasındaki öğelerin üst üste gelme sırasını kontrol etmek için kullanılır. Bir öğenin z-ekseni boyunca konumunu tanımlar; bu, öğelerin üç boyutlu alanda nasıl katmanlandığını belirler.
Daha yüksek bir z-index değeri, daha düşük z-index değerlere sahip öğelerin önünde görünecektir. İki öğe ekranda örtüşüyorsa, daha yüksek z-index olan öge diğerinin üstünde görüntülenecektir.
Tipografi
Şu font-family özelliği bir öğe için yazı tipini tanımlamak için kullanılır. Birden çok yazı tipi adını "yedek" sistemi olarak tutabilir. Tarayıcı ilk yazı tipini desteklemiyorsa, desteklenen bir yazı tipi bulana kadar listedeki bir sonraki yazı tipini dener.
Yazı tipi adları iki tür olabilir:
Aile Adı: "Times New Roman," "Courier New," "Arial" gibi belirli bir yazı tipi ailesinin adı.
Genel Aile: "serif," "sans-serif," "cursive," "fantasy" veya "monospace" gibi genel bir yazı tipi aile kategorisinin adı.
Yazı tiplerini belirtirken, istediğiniz belirli yazı tipi ile başlamanız ve sonra sonuna bir veya daha fazla genel aile eklemeniz iyi bir uygulamadır. Bu, belirtilen yazı tipleri mevcut değilse tarayıcının genel aileden benzer bir yazı tipi seçmesine olanak tanır. Bu, farklı cihazlar ve tarayıcılar arasında daha iyi uyumluluk ve tutarlı render sağlar.
Şu font-size özelliği, bir öğe için yazı tipinin boyutunu tanımlamak için kullanılır. Öğenin içindeki metin içeriğinin ne kadar büyük veya küçük gösterileceğini belirler. Boyut piksel (px) kullanılarak belirtilebilir.
Şu font-weight özelliği, metindeki karakterlerin kalınlığını veya koyuluğunu kontrol etmek için kullanılır. Yazı tipinin ne kadar kalın veya ince görüneceğini belirler. Bu font-weight özelliği çeşitli kalınlık seviyelerini belirtmek için farklı değerler veya anahtar kelimeler kabul eder.
normal: Varsayılan yazı tipi kalınlığı, genellikle normal veya düzenli kalınlıktır.
bold: Bold (kalın) bir yazı tipi ağırlığını belirtir. Metin normalden daha kalın görünür.
lighter: Miras alınan yazı tipi ağırlığına göre daha hafif bir yazı tipi ağırlığı belirtir.
Şu text-align özelliği, bir öğe içindeki metnin yatay hizalamasını ayarlamak için kullanılır. Metnin öğenin içerik kutusu içinde nasıl konumlandırılacağını belirler.
için mevcut olan değerler text-align şunlardır:
left: Metni içerik kutusunun soluna hizalar.
right: Metni içerik kutusunun sağına hizalar.
center: Metni içerik kutusu içerisinde yatay olarak ortalar.
justify: Metin satırlarını, her satırın eşit genişlikte olmasını sağlayacak şekilde gerer, böylece hem sol hem de sağ kenarda düz bir kenar oluşturur. Bu genellikle gazeteler ve dergilerde daha düzenli bir görünüm elde etmek için kullanılır.
Farklı öğelere text-align özelliğini uygulayarak, web sayfanızdaki metin hizalamasını kontrol edebilirsiniz.
Text-decoration: Metne eklenen dekorasyonu (alt çizgi, üst çizgi veya üstü çizili gibi) belirtmek için kullanılan özellik.
Line-height: The line-height özelliği bir metin satırının yüksekliğini belirler. Bir metin bloğu içindeki satırlar arasındaki dikey boşluğu ayarlar. Daha büyük bir line-height değeri satırlar arasındaki boşluğu artırır ve metni daha geniş aralıklı hale getirir; daha küçük bir değer ise satırlar arasındaki boşluğu azaltır ve metni daha sıkıştırılmış hale getirir.
Word-spacing: The word-spacing özelliği, bir metin bloğundaki kelimeler arasındaki boşluğu ayarlamak için kullanılır. Belirtilen değere bağlı olarak kelimeler arasındaki boşluğu artırabilir veya azaltabilir.
Bu özellikleri kullanarak, web sayfanızdaki metin öğelerinin görünümünü ve boşluklandırmasını hedeflenen tasarım ve düzeni elde etmek için kontrol edebilirsiniz.
Kenar
Bu CSS özelliklerini kullanarak, öğelerin boşluklarını, kenarlıklarını ve köşelerini kontrol etme esnekliğine sahip olur ve web sayfalarınız için görsel olarak çekici ve iyi yapılandırılmış düzenler oluşturabilirsiniz.
Margin: CSS margin özellikleri, tanımlı kenarlıkların dışındaki öğeler etrafında boşluk oluşturur.
Padding: Bir öğenin padding'i, içeriği ile kenarı arasındaki boşluktur.
Border-width: The border-width özelliği, bir öğenin dört kenarının (üst, sağ, alt ve sol) genişliğini ayarlar. Her bir kenarın genişliğini ayrı ayrı şu gibi özelliklerle ayarlayabilirsiniz: border-top-width, border-right-width, border-bottom-widthile birlikte görünecektir. border-left-width.
Border-color: The border-color özelliği, bir öğenin dört kenarının rengini ayarlar.
Border-radius: The border-radius özelliği, öğenin köşelerinin yarıçapını tanımlar ve yuvarlatılmış köşeler oluşturmanıza olanak tanır.
Şu border-style özelliği, bir öğenin dört kenarının (üst, sağ, alt ve sol) stilini ayarlamak için kullanılır. Her bir kenarın kendi stili olabilir. İçin mevcut değerler border-style şunlardır:
none: Varsayılan değer. Kenarlık olmadığını belirtir.
hidden: Tablo öğeleri için kenarlık çakışması çözümlemelerinde hariç olmak üzere "none" ile aynıdır.
dotted: Küçük noktalardan oluşan noktalı bir kenarlık belirtir.
dashed: Kısa çizgilerle ve küçük boşluklarla ayrılan kesikli bir kenarlık belirtir.
solid: Sürekli bir çizgi olan düz bir kenarlık belirtir.
double: İki adet düz çizgiden oluşan çift bir kenarlık belirtir.
groove: 3B oluklu bir kenarlık belirtir. Efekt, border-color değerine bağlıdır.
ridge: 3B sırtlı bir kenarlık belirtir. Efekt, border-color değerine bağlıdır.
değerine bağlıdır.inset border-color değerine bağlıdır.
: 3B içe gömme bir kenarlık belirtir. Efekt,değerine bağlıdır. border-color değerine bağlıdır.
outset border-style : 3B dışa kabartma bir kenarlık belirtir. Efekt,
farklı
değerlerini kullanarak, öğelerinizin kenarlıkları için çeşitli görsel efektler elde edebilir ve web sayfası düzeninizde çok yönlü ve çekici tasarımlar oluşturabilirsiniz.
HTML MenüsüBir öğeye sağ tıkladığınızda bir HTML manipülasyon menüsü görünecektir.Bu menüden, seçili öğeyi silmek için "
Kaldır" seçeneğini seçebilirsiniz.Mevcut HTML kodunu değiştirmek istiyorsanız, "
Değiştir" seçeneği gerekli değişiklikleri yapmanızı sağlar." seçeneğini kullanarak.
"Mevcut kod bloğuna yeni kod eklemek için basitçe "Ekle
Ekleme" seçeneklerini seçebilirsiniz; bu seçenekler yeni HTML girişlerini istediğiniz konuma girme esnekliği sağlar.Ayrıca, "
JavaScript Ekle
" adlı bir seçenek vardır; bu seçenek HTML yapısı içinde ihtiyaç duyduğunuz yere JavaScript kodu eklemenize olanak tanır.ve sonraDeneyiminizi Yayınlamave sonraTüm değişiklikleri yaptıktan sonra, sağ üst körede bulunan "" düğmesine tıklayarak panele dönebilirsiniz. "düğmesine tıkladığınızda, " Bitti
Last updated
Was this helpful?