Yeni Deneyim
Web Tools > Experiences > Web Personalization > Publish a New Experience
Uyarı:
Tıkladığınızda Kaydet and Bitti, and değişiklikler web sayfanıza doğrudan uygulanır.
Yeni Bir Experience Oluşturma
Web personalization experience'ınız üzerinde işlemi tamamladıktan sonra, Kurulum ve Kurallar ile deneyimlerinizi oluşturmaya başlayabilirsiniz Add Changes butonunda Rules / Changes bölümünde yapılandırabilirsiniz.
Yerleşim özelliklerini ve metin hizalamasını ayarlamaktan arka plan görselleri ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Personalization size benzersiz ve etkileşimli dijital ortamlar oluşturma gücü verir.
Bu kılavuz, Netmera Web Personalization aracında kullanılabilen çeşitli CSS özelleştirmelerini keşfeder ve web sayfalarınızı etkileyici görseller ve etkileşimlerle nasıl oluşturabileceğinizi açıklar. Bu teknikleri kullanarak gerçekten kişiselleştirilmiş and dinamik çevrimiçi deneyimler oluşturabilir ve ziyaretçileriniz üzerinde kalıcı bir izlenim bırakabilirsiniz.
Herhangi bir değişiklik yapmadan önce, 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. değişiklikleri Ayrıca, öğeye sağ tıklayarak HTML ayarlarını değiştirebilirsiniz.
CSS Özelleştirmeleri
Boyut ve Konum
Sol menüde, Text Content girişini kullanarak metni doğrudan değiştirebilirsiniz. Öğelerin boyutlarını ayarlamak için Dimension ayarını kullanın. Öğelerin konumunu ayarlamak için Location ayarını kullanın.
Dimension Değerleri:
Dimension değerleri öğenin boyutunu belirlerken, konum değerleri onun pozisyonunu tanımlar. Bu alanlara belirli piksel değerleri girmeniz gerekir (örn. 100px) veya sistemin uygun değeri belirlemesi için "auto" kullanabilirsiniz.
Arka plan
Background ayarlarında, öğelerinizin arka plan rengini özelleştirebilir, arka plan görselini değiştirebilir ve arka plan görselinin nasıl davranacağını belirleyebilirsiniz.
Arka Plan İpucu:
Mevcut bir arka plan görselini görmekte zorluk yaşıyorsanız, arka plan rengi için şeffaf bir değer girmeniz yararlı olabilir.
Background repeat, arka plan görseli arka plan boyutuna veya öğe boyutuna sığmadığında nasıl davranacağını tanımlar. Aşağıdaki değerlere sahiptir:
no-repeat: Arka plan görseli yalnızca bir kez görüntülenir ve tekrarlanmaz.
repeat: Arka plan görseli hem dikey hem yatay olarak tekrarlanır. Görsel sığmazsa, son görsel kırpılır. Bu varsayılan davranıştır.
repeat-x: Arka plan görseli yalnızca yatayda tekrarlanır.
repeat-y: Arka plan görseli yalnızca dikeyde tekrarlanır.
space: Arka plan görseli kırpılmadan mümkün olduğunca çok tekrarlanır. İlk ve son görseller öğenin kenarlarına sabitlenir ve görseller arasındaki boşluk eşit şekilde dağıtılır.
round: Arka plan görseli tekrarlanır ve boşluk kalmayacak şekilde doldurmak için gerektiğinde esnetilerek veya sıkıştırılarak ayarlanır.
Düzen
Layout bölümünde düzenleme özelliklerinizi belirleme özgürlüğüne sahipsiniz.
The float özelliği bir öğenin sola, sağa mı yoksa hiç mi float edeceğini belirler. Aşağıdaki değerlerden birini alabilir:
none: Öğe float etmez ve metinde bulunduğu konumda görüntülenir. Bu varsayılan davranıştır.
left: Öğe kapsayıcısının soluna doğru float eder.
right: Öğe kapsayıcısının sağına doğru float eder.
The vertical-align özelliği bir öğenin dikey hizalamasını ayarlamak için kullanılır. Aşağıdaki değerleri alabilir:
middle: Öğe, üst öğesinin ortasına yerleştirilir.
top: Öğe aynı satırdaki en uzun öğenin üstüyle hizalanır.
bottom: Öğe aynı satırdaki en alçak öğe ile hizalanır.
baseline: Öğe, üst öğesinin temel çizgisiyle hizalanır. Bu varsayılan davranıştır.
sub: Öğe, üst öğesinin alt simge (subscript) temel çizgisiyle hizalanır.
super: Öğe, üst öğesinin üst simge (superscript) temel çizgisiyle hizalanır.
text-top: Öğe, üst öğesinin yazı tipinin üstü ile hizalanır.
text-bottom: Öğe, üst öğesinin yazı tipinin altı ile hizalanır.
The overflow özelliği bir öğenin belirlenen alanını aşan içeriğin nasıl ele alınacağını belirler. Aşağıdaki değerlerden birini alabilir:
visible: Taşan içerik kırpılmaz ve içerik öğenin kutusunun dışında render edilir. Bu varsayılan davranıştır.
hidden: Taşan içerik kırpılır ve belirlenen alanın ötesine geçen herhangi bir içerik görünmez olur.
scroll: Taşan içerik kırpılır ve kullanıcıların belirtilen alanın ötesine geçen içeriğin geri kalanını görmesi için bir kaydırma çubuğu eklenir.
The opacity özelliği bir öğenin opaklık seviyesini belirlemek için kullanılır; bu, öğenin saydamlığını tanımlar. Opaklık seviyesi 0 ile 1 arasında bir değer olarak belirtilir, burada:
1: Öğe hiçbir şekilde saydam değildir (tamamen opak).
0.5: Öğe %50 saydamdır.
0: Öğe tamamen saydamdır ve dolayısıyla görünmezdir.
The z-index özelliği bir web sayfasındaki öğelerin üst üste gelme sırasını kontrol etmek için kullanılır. Öğenin z-eksenindeki konumunu tanımlar ve bu, öğelerin üç boyutlu alanda nasıl katmanlandığını belirler.
Daha yüksek bir z-index değerine sahip öğe, daha düşük z-index değerlerine sahip öğelerin önünde görünür. Eğer iki öğe ekranda üst üste geliyorsa, daha yüksek z-index olanı diğerinin üzerinde görüntülenir.
Z-Index:
Varsayılan olarak, öğelerin bir z-index değeri autoolup, HTML kaynak sırasına göre üst üste bindirilirler. Ancak, katmanlama kontrolü yapmak ve overlay, dropdown ve tooltip gibi efektler oluşturmak için z-index kullanabilirsiniz.
Tipografi
The font-family özelliği bir öğe için yazı tipini tanımlamak için kullanılır. Bir "yedek" sistemi olarak birden fazla yazı tipi adı içerebilir. Tarayıcı ilk yazı tipini desteklemiyorsa, listede desteklenen bir yazı tipi bulana kadar sonraki yazı tiplerini dener.
Yazı tipi adları iki tür olabilir:
Aile Adı: Belirli bir yazı tipi ailesinin adı, örneğin "Times New Roman", "Courier New", "Arial" vb.
Genel Aile: Genel bir yazı tipi ailesi kategorisinin adı, örneğin "serif", "sans-serif", "cursive", "fantasy" veya "monospace".
Yazı tiplerini belirtirken, istediğiniz belirli yazı tipiyle başlamanız ve ardından bir veya daha fazla genel aile eklemeniz iyi bir uygulamadır. Bu, belirtilen yazı tipleri yoksa tarayıcının genel aileden benzer bir yazı tipi seçmesine olanak tanır ve farklı cihazlar ve tarayıcılar arasında daha iyi uyumluluk ve tutarlı görüntüleme sağlar.
The font-size özelliği bir öğe için yazı tipi boyutunu tanımlamak için kullanılır. Öğenin içindeki metin içeriğinin ne kadar büyük veya küçük görüntüleneceğini belirler. Boyut piksel (px) cinsinden belirtilebilir.
The font-weight özelliği metindeki karakterlerin kalınlığını veya boldluğ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 farklı kalınlık seviyelerini belirtmek için çeşitli değerler veya anahtar kelimeler kabul eder.
normal: Varsayılan yazı tipi kalınlığı, genellikle normal veya düzenli kalınlıktır.
bold: Kalın bir yazı tipi ağırlığını belirtir. Metin normalden daha kalın görünür.
lighter: Kalıtılan yazı tipi ağırlığına göre daha hafif bir yazı tipi ağırlığını belirtir.
The 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.
text-align için mevcut değerler şunlardır: text-align are:
left: Metni içerik kutusunun soluna hizalar.
right: Metni içerik kutusunun sağına hizalar.
center: Metni içerik kutusu içinde yatay olarak ortalar.
justify: Metin satırlarını öyle ayarlar ki her satır eşit genişlikte olur, böylece hem sol hem sağ kenarda düz bir kenar oluşur. Gazeteler ve dergilerde daha düzenli bir görünüm elde etmek için sıklıkla kullanılır.
Farklı öğelere text-align özelliğini uygulayarak, web sayfanız genelinde metin hizalamasını kontrol edebilirsiniz.
Text-decoration: Metne alt çizgi, üst çizgi veya üstü çizili gibi eklenen dekorasyonu belirtmek için kullanılan özelliktir.
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 ferah yaparken, daha küçük bir değer satırlar arasındaki boşluğu azaltır ve metni daha sıkıştırır.
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ızda metin öğelerinin görünümünü ve aralamasını istediğiniz tasarım ve düzeni elde etmek için kontrol edebilirsiniz.
Kenarlık
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, öğelerin tanımlı kenarlıklarının dışında çevresinde boşluk oluşturur.
Padding: Bir öğenin padding'i, içeriği ile kenarı arasındaki boşluktur. T
Border-width: The border-width özelliği bir öğenin dört kenarının (üst, sağ, alt ve sol) genişliğini ayarlar. border-top-width, border-right-width, border-bottom-width, border-left-widthve gibi özellikleri kullanarak her kenarın genişliğini ayrı ayrı ayarlayabilirsiniz..
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.
The border-style özelliği bir öğenin dört kenarının (üst, sağ, alt ve sol) stilini ayarlamak için kullanılır. Her kenarın kendi stili olabilir. Aşağıdaki değerler border-style are:
için mevcuttur:none
: Varsayılan değer. Kenarlık olmadığını belirtir.hidden
: Tablo öğeleri için kenarlık çatışması çözümünde "none" ile aynı, ancak başka durumlarda farklı davranabilir.dotted
: Küçük noktalarla aralıklı bir kenarlık belirtir.dashed
: Kısa çizgilerden oluşan aralıklı bir kenarlık belirtir.solid
: Sürekli bir çizgi olan düz bir kenarlığı belirtir.double
: İki düz çizgiden oluşan çift kenarlığı belirtir.groove border-color : 3B oluklu bir kenarlık belirtir. Etki,
değerine bağlıdır.ridge border-color : 3B oluklu bir kenarlık belirtir. Etki,
: 3B kabartmalı bir kenarlık belirtir. Etki,inset border-color : 3B oluklu bir kenarlık belirtir. Etki,
: 3B gömülü bir kenarlık belirtir. Etki,outset border-color : 3B oluklu bir kenarlık belirtir. Etki,
: 3B çıkıntılı bir kenarlık belirtir. Etki, border-style 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ünür.Bu menüden seçili öğeyi silmek için "Remove
" seçeneğini seçebilirsiniz.Mevcut HTML kodunu değiştirmek istiyorsanız, "Replace
" seçeneği gerekli değişiklikleri yapmanıza olanak tanır.Mevcut kod bloğuna yeni kod eklemek için basitçe "Append
" seçeneğini seçebilirsiniz."Insert
" seçenekleri, yeni HTML girdilerini istediğiniz herhangi bir konuma girme esnekliği sağlar.Ayrıca, HTML yapısı içinde ihtiyacınız olan yere JavaScript kodu eklemenizi sağlayan "Insert JavaScript
" adlı bir seçenek de vardır.
Experience'inizi YayınlamaKaydetTüm değişiklikleri yaptıktan sonra, sayfanın sağ üst köşesinde bulunan "Kaydet" butonuna tıklayarak panele dönebilirsiniz. "tıkladığınızda," bir "Done " butonu görünecektir. Düzenleme modundan çıkmak ve panele geri dönmek için "Done" butonuna tıklayın. Değişiklikleriniz kaydedilecek ve içeriğe uygulanacaktır.
Last updated
Was this helpful?