Yeni Deneyim
Web Araçları > Experiences > Web Personalization > Yeni Bir Experience Yayınla
Uyarı:
Tıkladığınızda Kaydet kampanyanın finansal başarısını belirlemeye yardımcı olur. Bitti, kampanyanın finansal başarısını belirlemeye yardımcı olur. değişiklikler web sayfanıza doğrudan uygulanır.
Yeni Bir Experience Oluşturma
tamamladıktan sonra Kurulum ve Kurallar web kişiselleştirme experience'ınız için, deneyimlerinizi ile oluşturmaya başlayabilirsiniz 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 görüntülerini ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Personalization size benzersiz ve ilgi çekici dijital ortamlar oluşturma gücü verir.
Bu kılavuz, Netmera Web Personalization aracında bulunan çeşitli CSS özelleştirmelerini keşfederek, web sayfalarınızı etkileyici görseller ve etkileşimlerle nasıl oluşturabileceğinizi gösterir. Bu teknikleri kullanarak gerçekten kişiselleştirilmiş kampanyanın finansal başarısını belirlemeye yardımcı olur. dinamik ziyaretçilerinizde kalıcı bir izlenim bırakan çevrimiçi deneyimler oluşturabilirsiniz.
Herhangi bir değişiklik yapmadan önce, değiştirmek 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şikliklerinizi sağ menüde takip edebilirsiniz. Ayrıca, öğeye sağ tıklayarak HTML ayarlarını değiştirebilirsiniz.
CSS Özelleştirmeleri
Boyut ve Konum
Sol menüde, Metin İçeriği girişi ile 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.
Boyut Değerleri:
Boyut değerleri öğenin boyutunu belirlerken, konum değerleri ise onun pozisyonunu tanımlar. Bu alanlara belirli piksel değerleri girilmelidir (ör. 100px) veya sistemin uygun değeri belirlemesi için "auto" kullanabilirsiniz.
Arka Plan
Arka plan ayarlarında, öğelerinizin arka plan rengini özelleştirebilir, arka plan görüntüsünü değiştirebilir ve arka plan görüntüsünün nasıl davranacağını belirleyebilirsiniz.
Arka Plan İpucu:
Mevcut arka plan görüntüsünü görmekte zorluk çekiyorsanız, arka plan rengi için şeffaf bir değer girmeyi düşünebilirsiniz.
Arka plan tekrarı, arka plan görüntüsü 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örüntüsü yalnızca bir kez gösterilir ve tekrar edilmez.
repeat: Arka plan görüntüsü dikey ve yatay olarak tekrarlanır. Görüntü sığmazsa, son görüntü kırpılacaktır. Bu varsayılan davranıştır.
repeat-x: Arka plan görüntüsü yalnızca yatay olarak tekrarlanır.
repeat-y: Arka plan görüntüsü yalnızca dikey olarak tekrarlanır.
space: Arka plan görüntüsü mümkün olduğunca kırpılmadan tekrar edilir. İlk ve son görüntüler öğenin iki yanına sabitlenir ve görüntüler arasındaki boşluk eşit olarak dağıtılır.
round: Arka plan görüntüsü boşluk kalmayacak şekilde tekrarlanır ve gerekirse gerilerek veya sıkıştırılarak alanı dolduracak şekilde ayarlanır.
Yerleşim
Yerleşim bölümünde yerleşim özelliklerinizi ayarlama ö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 biri verilebilir:
none: Öğe float etmez ve metinde olduğ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 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 ebeveyn öğesinin ortasına yerleştirilir.
top: Öğe aynı satırdaki en uzun öğenin üstü ile hizalanır.
bottom: Öğe aynı satırdaki en alçak öğe ile hizalanır.
baseline: Öğe ebeveyninin temel çizgisiyle hizalanır. Bu varsayılan davranıştır.
sub: Öğe ebeveyninin alt simge temel çizgisi ile hizalanır.
super: Öğe ebeveyninin üst simge temel ç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.
The overflow özelliği bir öğenin belirtilen alanını aşan içeriğin nasıl işleneceğini belirler. Aşağıdaki değerlerden birini alabilir:
visible: Taşma kırpılmaz ve içerik öğenin kutusunun dışında render edilir. 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 kullanıcıların belirtilen alanın dışına uzanan içeriğin kalanını görmesi için bir kaydırma çubuğu eklenir.
The opacity özelliği bir öğenin opaklık seviyesini ayarlamak için kullanılır; bu, öğenin şeffaflığını belirler. Opaklık seviyesi 0 ile 1 arasında bir değer olarak belirtilir;
1: Öğe hiç şeffaf değildir (tamamen opak).
0.5: Öğe %50 görünür.
0: Öğe tamamen şeffaftır ve bu nedenle görünmezdir.
The z-index özelliği bir web sayfasındaki öğelerin yığılma sırasını kontrol etmek için kullanılır. Bir öğenin z ekseni boyunca konumunu tanımlar; bu, öğelerin üç boyutlu alanda nasıl üst üste geldiğini belirler.
Daha yüksek bir z-index değere sahip öğe, daha düşük z-index değerlere sahip öğelerin önünde görünecektir. Eğer iki öğe ekranda üst üste gelirse, daha yüksek z-index olan öğe diğerinin üstünde görüntülenecektir.
Z-Index:
Varsayılan olarak öğelerin bir z-index değeri autotır; bu, HTML kaynak sırasındaki konumlarına göre yığınlandıkları anlamına gelir. Ancak, öğelerin katmanlanmasını kontrol etmek ve örtüşmeler, açılır menüler ve ipuçları 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 çok yazı tipi adı içerebilir. Tarayıcı ilk yazı tipini desteklemiyorsa, listedeki sonraki yazı tipini dener ve desteklenen bir yazı tipi bulana kadar devam eder.
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 ailesi kategorisinin adı.
Yazı tiplerini belirtirken, istediğiniz belirli yazı tipi ile başlamanız ve ardından 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.
The font-size özelliği bir öğe için yazı tipi boyutunu tanımlamak için kullanılır. Bu, öğe içindeki metin içeriğinin ne kadar büyük veya küçük görüntüleneceğini belirler. Boyut piksel (px) kullanılarak belirtilebilir.
The 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ündüğünü belirler. 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 ağırlığı, 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: Miras alınan 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.
Mevcut değerler text-align içindir:
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ı her satırın eşit genişlikte olması için gererek sol ve sağ kenarlarda 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ız genelinde metin hizalamasını kontrol edebilirsiniz.
Metin süsleme: Alt çizgi, üst çizgi veya üstü çizili gibi metne eklenen süslemeyi belirtmek için kullanılan özellik.
Satır yüksekliği: 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ğer satırlar arasındaki boşluğu artırır ve metni daha aralıklı yapar; daha küçük bir değer satırlar arasındaki boşluğu azaltır ve metni daha kompakt yapar.
Kelime aralığı: 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şluklarını istediğiniz tasarım ve düzeni elde etmek için kontrol edebilirsiniz.
Kenarlık
Bu CSS özelliklerini kullanarak, öğelerin boşluklarını, kenarlarını ve köşelerini kontrol etme esnekliğine sahip olup, 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ı herhangi bir sınırın dışında öğeler etrafında boşluk oluşturur.
Padding: Bir öğenin padding'i, içeriği ile sınırı arasındaki alandır.
Border-width: border-width özelliği bir öğenin dört sınırı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 bir sınırın genişliğini ayrı ayrı ayarlayabilirsiniz..
Border-color: border-color özelliği bir öğenin dört sınırının rengini ayarlar.
Border-radius: 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 sınırının (üst, sağ, alt ve sol) stilini ayarlamak için kullanılır. Her bir sınırın kendi stili olabilir. Aşağıdaki değerler border-style içindir:
için mevcuttur:none
: Varsayılan değerdir. Sınır belirtmez.hidden
: Tablo öğelerinin sınır çatışması çözümlemesi dışında "none" ile aynı. dotted
: Küçük noktalarla ayrılmış noktalı bir sınır belirtir.dashed
: Kısa kesiklerden oluşan ve aralarında küçük boşluklar bulunan bir kesikli sınır belirtir.solid
: Sürekli bir çizgi olan düz bir sınır belirtir.double
: İki adet düz çizgiden oluşan çift bir sınır belirtir.groove border-color : 3D oluklu bir sınır belirtir. Etki,
değerine bağlıdır.ridge border-color : 3D oluklu bir sınır belirtir. Etki,
: 3D çıkıntılı bir sınır belirtir. Etki,inset border-color : 3D oluklu bir sınır belirtir. Etki,
: 3D içe gömülü bir sınır belirtir. Etki,outset border-color : 3D oluklu bir sınır belirtir. Etki,
: 3D dışa çıkıntılı bir sınır belirtir. Etki, border-style Farklı
değerlerini kullanarak, öğelerinizin kenarları 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 "Kaldır
" seçeneğini seçerek seçili öğeyi silebilirsiniz.Mevcut HTML kodunu değiştirmek istiyorsanız, "Değiştir
" seçeneği gerekli değişiklikleri yapmanızı sağlar.Mevcut kod bloğuna yeni kod eklemek için basitçe "Ekle (Append)
" seçeneğini seçebilirsiniz."Ekle (Insert)
" seçenekleri, yeni HTML girdilerini istediğiniz konuma girme esnekliği sağlar.Ayrıca, "JavaScript Ekle
" adlı bir seçenek bulunur; bu, HTML yapısı içinde ihtiyaç duyduğunuz yere JavaScript kodu eklemenize olanak tanır.
Experience'inizi YayınlamaKaydetTüm değişiklikleri yaptıktan sonra, sağ üst körede bulunan "Kaydet" düğmesine tıklayarak panele geri dönebilirsiniz. "TAMAM" düğmesi görünecektir. Düzenleme modundan çıkıp panele geri dönmek için "TAMAM" düğmesine tıklayın. Değişiklikleriniz kaydedilecek ve içeriğe uygulanacaktır.
Last updated
Was this helpful?