# Yeni Deneyim **Web Tools > Experiences > Web Personalization > Yeni Bir Deneyim Yayınla** {% hint style="danger" %} **Uyarı**: Tıkladığınızda **Kaydet** ve **Bitti,** ve değişiklikler **web sayfanıza doğrudan uygulanır.** {% endhint %} ## Yeni Bir Deneyim Oluşturma web kişiselleştirme deneyiminiz için işlemleri tamamladıktan sonra [Kurulum ve Kurallar](/netmera-user-guide/netmera-user-guide-tr/web-araclari/web-kisisellestirme/yeni-deneyim-olustur/kurulum-ve-kurallar.md) deneyimlerinizi oluşturmaya **Değişiklik Ekle** düğmesiyle başlayabilirsiniz **Kurallar / Değişiklikler** bölümü altında yapılandırabilirsiniz.

Düzen özelliklerini ve metin hizalamasını ayarlamaktan arka plan görsellerini ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Personalization size benzersiz ve etkileyici dijital ortamlar oluşturma imkânı sunar. Bu rehber, Netmera Web Personalization aracında sunulan çeşitli CSS özelleştirmelerini ele alır ve web sayfalarınızı etkileyici görseller ve etkileşimlerle zenginleştirmenin yöntemlerini 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, değiştirmek istediğiniz öğeyi seçmeniz gerekir. Seçtikten sonra, tüm **CSS ayarlarını sol menüden** takip edebilir ve **değişikliklerinizi sağ menüden izleyebilirsiniz.** Ayrıca **öğeye sağ tıklayarak** HTML ayarlarını da değiştirebilirsiniz. ## CSS Özelleştirmeleri


#dimension-and-location	#dimension-and-location
#background	#background
#layout	#layout
#typography	#typography
#border	#border
#html-menu
#publishing-your-experience	#publishing-your-experience

### 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. {% hint style="info" %} **Boyut Değerleri:** Boyut değerleri öğenin boyutunu belirlerken, konum değerleri öğenin yerini tanımlar. Bu girişlere belirli piksel değerleri girmelisiniz (ör. 100px) ya da sistemin uygun değeri belirlemesi için "auto" kullanabilirsiniz. {% endhint %}

### 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ı belirtebilirsiniz. {% hint style="info" %} **Arka Plan İpucu:** Mevcut bir arka plan görselini görmekte zorlanıyorsanız, arka plan rengi için şeffaf bir değer girmeyi deneyin. {% endhint %}

Background repeat, arka plan görselinin arka plan boyutuna veya öğe boyutuna sığmadığında nasıl davranacağını tanımlar. Aşağıdaki değerleri alabilir: * **no-repeat:** Arka plan görseli yalnızca bir kez gösterilir 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 yatay olarak tekrarlanır. * **repeat-y:** Arka plan görseli yalnızca dikey olarak tekrarlanır. * **space:** Arka plan görseli kırpılmadan mümkün olduğunca tekrarlanır. İlk ve son görseller öğenin iki kenarına sabitlenir ve boşluk görseller arasında eşit şekilde dağıtılır. * **round:** Arka plan görseli boşluk kalmayacak şekilde tekrarlanır ve uyarlanır; bunun için esnetilmesi veya sıkıştırılması gerekse bile.

### Düzen Düzen bölümünde düzen özelliklerinizi özgürce ayarlayabilirsiniz. Bu **float** özelliği, bir öğenin sola, sağa mı yoksa hiç mi kaydırılacağını belirler. Aşağıdaki değerlerden birini alabilir: * **none:** Öğe kaymaz ve metin içinde bulunduğu yerde tam olarak gösterilir. Bu varsayılan davranıştır. * **left:** Öğe kapsayıcısının soluna kayar. * **right:** Öğe kapsayıcısının sağına kayar.

Bu **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 yüksek öğenin üst kenarıyla hizalanır. * **bottom:** Öğe, aynı satırdaki en düşük öğenin alt kenarıyla hizalanır. * **baseline:** Öğe, üst öğesinin taban çizgisiyle hizalanır. Bu varsayılan davranıştır. * **sub:** Öğe, üst öğesinin alt simge taban çizgisiyle hizalanır. * **super:** Öğe, üst öğesinin üst simge taban çizgisiyle hizalanır. * **text-top:** Öğe, üst öğenin yazı tipinin üst kısmıyla hizalanır. * **text-bottom:** Öğe, üst öğenin yazı tipinin alt kısmıyla hizalanır.

\ Bu **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şan içerik kırpılmaz ve içerik öğenin kutusunun dışında görüntülenir. Bu varsayılan davranıştır. * **hidden:** Taşan içerik kırpılır ve belirtilen alanın dışına taşan içerik görünmez olur. * **scroll:** Taşan içerik kırpılır ve belirtilen alanın dışına taşan içeriğin geri kalanını görüntülemek için bir kaydırma çubuğu eklenir.

\ Bu **opacity** özelliği, bir öğenin saydamlık seviyesini ayarlamak için kullanılır; bu da şeffaflığını belirler. Saydamlık seviyesi 0 ile 1 arasında bir değer olarak belirtilir; burada: * 1: Öğe hiç saydam değildir (tamamen opaktır). * 0.5: Öğe %50 şeffaftır. * 0: Öğe tamamen şeffaftır ve bu nedenle görünmez.

Bu **z-index** özelliği, bir web sayfasındaki öğelerin katman sırasını kontrol etmek için kullanılır. Bir öğenin z eksenindeki konumunu tanımlar; bu da öğelerin üç boyutlu alanda nasıl üst üste 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. Ekranda iki öğe üst üste gelirse, daha yüksek **z-index** olan öğe diğerinin üzerinde gösterilir. {% hint style="info" %} **Z-Index:** Varsayılan olarak, öğelerin **z-index** değeri **auto**olur; bu da HTML kaynak sırasındaki konumlarına göre üst üste dizildikleri anlamına gelir. Ancak, **z-index** öğelerin katmanlamasını kontrol etmek ve kaplamalar, açılır menüler ve ipuçları gibi efektler oluşturmak için kullanabilirsiniz. {% endhint %}

### Tipografi Bu **font-family** özelliği, bir öğe için yazı tipini tanımlamak için kullanılır. Birden fazla yazı tipi adını bir "yedek" sistemi olarak içerebilir. 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: 1. **Aile Adı:** "Times New Roman", "Courier New", "Arial" vb. gibi belirli bir yazı tipi ailesinin adı. 2. **Genel Aile:** "serif", "sans-serif", "cursive", "fantasy" veya "monospace" gibi genel bir yazı tipi ailesi kategorisinin adı. Yazı tipi belirtirken, önce istediğiniz belirli yazı tipiyle başlamak ve ardından sona bir veya daha fazla genel aile eklemek iyi bir uygulamadır. Bu, belirtilen yazı tipleri mevcut değilse tarayıcının genel aileden benzer bir yazı tipi seçmesini sağlar. Bu da farklı cihazlar ve tarayıcılar arasında daha iyi uyumluluk ve tutarlı görüntüleme sağlar.

Bu **font-size** özelliği, bir öğenin yazı tipi boyutunu tanımlamak için kullanılır. Öğe içindeki metin içeriğinin ne kadar büyük veya küçük gösterileceğini belirler. Boyut piksel (px) cinsinden belirtilebilir.

Bu **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 ya da ince görüneceğini belirler. **font-weight** özelliği, farklı kalınlık seviyelerini belirtmek için çeşitli değerler veya anahtar sözcükler kabul eder. * **normal**: Varsayılan yazı tipi kalınlığıdır; genellikle normal ya da standart kalınlıktır. * **bold**: Kalın yazı tipi kalınlığını belirtir. Metin normalden daha kalın görünür. * **lighter**: Devralınan yazı tipi kalınlığına göre daha hafif bir yazı tipi kalınlığı belirtir.

Bu **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 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çinde yatay olarak ortalar. * **justify**: Metin satırlarını, her satır eşit genişlikte olacak şekilde uzatır ve hem sol hem sağ tarafta düz bir kenar oluşturur. Bu, daha düzenli bir görünüm elde etmek için sıkça gazetelerde ve dergilerde kullanılır. özelliğini uygulayarak **text-align** farklı öğelere, web sayfanız genelinde metin hizalamasını kontrol edebilirsiniz.

**Text-decoration:** Altı çizili, üstü çizili veya çizgili gibi metne eklenen süslemeyi belirtmek için kullanılan özelliktir. **Line-height**: " **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ırarak metni daha seyrek hale getirirken, daha küçük bir değer satırlar arasındaki boşluğu azaltarak metni daha kompakt hale getirir. **Word-spacing**: " **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, istediğiniz tasarım ve düzeni elde etmek için web sayfanızdaki metin öğelerinin görünümünü ve aralığını kontrol edebilirsiniz.

### Border Bu CSS özelliklerini kullanarak, web sayfalarınız için görsel açıdan çekici ve iyi yapılandırılmış düzenler oluşturmak amacıyla öğelerin boşluklarını, kenarlıklarını ve köşelerini esnek şekilde kontrol edebilirsiniz. **Margin:** CSS margin özellikleri, tanımlı kenarlıkların dışında öğelerin etrafında boşluk oluşturur. **İç boşluk**: Bir öğenin padding değeri, içeriği ile kenarlığı arasındaki boşluktur. T **Border-width**: " `border-width` özelliği, bir öğenin dört kenarlığının (üst, sağ, alt ve sol) genişliğini ayarlar. Her bir kenarlığın genişliğini ayrı ayrı şu özellikleri kullanarak ayarlayabilirsiniz: `border-top-width`, `border-right-width`, `border-bottom-width`, ve `border-left-width`. **Border-color**: " `border-color` özelliği, bir öğenin dört kenarlığı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.

Bu **border-style** özelliği, bir öğenin dört kenarlığının (üst, sağ, alt ve sol) stilini ayarlamak için kullanılır. Her kenarlık kendi stiline sahip olabilir. için mevcut değerler **border-style** şunlardır: * **none**: Varsayılan değerdir. Kenarlık olmadığını belirtir. * **hidden**: "none" ile aynıdır; ancak tablo öğeleri için kenarlık çakışması çözümlemesinde farklılık gösterir. * **dotted**: Aralıklı küçük noktalardan oluşan noktalı bir kenarlık belirtir. * **dashed**: Küçük aralıklarla ayrılmış kısa çizgilerden oluşan kesikli bir kenarlık belirtir. * **solid**: Sürekli bir çizgiden oluşan düz bir kenarlık belirtir. * **double**: İki düz çizgiden oluşan çift kenarlık belirtir. * **groove**: 3B oluklu bir kenarlık belirtir. Etki, **border-color** değerine bağlıdır. * **ridge**: 3B sırtlı bir kenarlık belirtir. Etki, **border-color** değerine bağlıdır. * **inset**: 3B içe gömülü bir kenarlık belirtir. Etki, **border-color** değerine bağlıdır. * **outset**: 3B dışa taşan bir kenarlık belirtir. Etki, **border-color** değerine bağlıdır. Farklı **border-style** 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 düzenleme 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ızı sağlar. Mevcut kod bloğuna yeni kod eklemek için "**Append**" seçeneğini basitçe seçebilirsiniz. "**Insert**" seçenekleri, yeni HTML girdilerini istediğiniz herhangi bir konuma ekleme esnekliği sağlar. Ayrıca, "**Insert JavaScript**" adlı bir seçenek vardır; bu seçenek, JavaScript kodunu HTML yapısı içinde tam olarak ihtiyaç duyduğunuz yere eklemenize olanak tanır.

## Deneyiminizi Yayınlama Tüm değişiklikleri tamamladığınızda, sağ üst köşede bulunan "**Kaydet**" düğmesine tıklayarak panele geri dönebilirsiniz. "**Kaydet**," düğmesine tıkladığınızda bir "**Bitti**" düğmesi görünür. Düzenleme modundan çıkıp panele geri dönmek için "Bitti" düğmesine tıklayın. **Değişiklikleriniz kaydedilecek ve içeriğe uygulanacaktır.**

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://user.netmera.com/netmera-user-guide/netmera-user-guide-tr/web-araclari/web-kisisellestirme/yeni-deneyim-olustur/yeni-deneyim.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.