> For the complete documentation index, see [llms.txt](https://user.netmera.com/netmera-user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://user.netmera.com/netmera-user-guide/netmera-user-guide-tr/web-tools/web-personalization/create-new-experience/new-experience.md). # Yeni deneyim CSS, boyut, arka plan, yerleşim, tipografi, kenarlık ve HTML seçeneklerini kullanarak bir web kişiselleştirme deneyimi için web sitesi öğelerini düzenleyin, ardından yayınlayın. **Web Araçları > Deneyimler > Web Kişiselleştirme > Yeni Bir Deneyim Yayınla** {% hint style="danger" %} **Uyarı**: Tıkladığınızda **Kaydet** ve **Tamam,** ve değişiklikler **doğrudan web sayfanıza uygulanır.** {% endhint %} ## Yeni Bir Deneyim Oluşturma web kişiselleştirme deneyiminiz için deneyimlerinizi oluşturmaya başlayabilirsiniz [Kurulum ve kurallar](/netmera-user-guide/netmera-user-guide-tr/web-tools/web-personalization/create-new-experience/setup-and-rules.md) web kişiselleştirme deneyiminiz için deneyimlerinizi **Değişiklik Ekle** düğmesini **Kurallar / Değişiklikler** bölümünde.

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 ilgi çekici dijital ortamlar oluşturma gücü verir. Bu kılavuz, 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 tekniklerden yararlanarak gerçekten **kişiselleştirilmiş** ve **dinamik** çevrimiçi deneyimler oluşturabilir ve ziyaretçileriniz üzerinde kalıcı bir etki bırakabilirsiniz.

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** düzenleyebilir ve değişikliklerinizi **sağ menüde takip edebilirsiniz.** Ayrıca, **öğeye sağ tıklayarak** HTML ayarlarını 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, 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. {% hint style="info" %} **Boyut Değerleri:** Boyut değerleri öğenin boyutunu belirlerken, konum değerleri konumunu tanımlar. Bu alanlara belirli piksel değerleri girmeniz gerekir (örn. 100px) veya sistemin uygun değeri belirlemesine izin vermek için "auto" kullanabilirsiniz. {% endhint %}

### Arka Plan Arka Plan 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. {% 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ğerlere sahiptir: * **no-repeat:** Arka plan görseli yalnızca bir kez gösterilir ve tekrarlanmaz. * **repeat:** Arka plan görseli dikey ve 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şluklar görseller arasında eşit olarak dağıtılır. * **round:** Arka plan görseli boşluk kalmayacak şekilde tekrarlanır ve alanı dolduracak biçimde ayarlanır; bunun için esnetilmesi veya sıkıştırılması gerekse bile.

### Düzen Düzen bölümünde düzen özelliklerinizi ayarlamakta özgürsünüz. Bu **float** özelliği, bir öğenin sola, sağa ya da hiç kaydırılıp kaydırılmayacağını belirler. Aşağıdaki değerlerden biri atanabilir: * **none:** Öğe kaydırılmaz ve metinde geçtiği yerde görüntülenir. Bu varsayılan davranıştır. * **left:** Öğe kapsayıcısının solunda yer alır. * **right:** Öğe kapsayıcısının sağında yer alır.

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 kısmına hizalanır. * **bottom:** Öğe, aynı satırdaki en düşük öğenin alt kısmına hizalanır. * **baseline:** Öğe, üst öğesinin taban çizgisine hizalanır. Bu varsayılan davranıştır. * **sub:** Öğe, üst öğesinin alt simge taban çizgisine hizalanır. * **super:** Öğe, üst öğesinin üst simge taban çizgisine hizalanır. * **text-top:** Öğe, üst öğenin yazı tipinin üst kısmına hizalanır. * **text-bottom:** Öğe, üst öğenin yazı tipinin alt kısmına 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 biri atanabilir: * **visible:** Taşma kırpılmaz ve içerik öğe kutusunun dışında görüntülenir. Bu varsayılan davranıştır. * **hidden:** Taşma kırpılır ve belirtilen alanı aşan içerik görünmez olur. * **scroll:** Taşma kırpılır ve belirtilen alanı aş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 şeffaflık düzeyini ayarlamak için kullanılır. Şeffaflık düzeyi 0 ile 1 arasında bir değer olarak belirtilir; burada: * 1: Öğe hiç şeffaf değildir (tamamen opaktır). * 0.5: Öğe %50 yarı saydamdır. * 0: Öğe tamamen şeffaftır ve bu nedenle görünmez.

Bu **z-index** özelliği, bir web sayfasındaki öğelerin üst üste yığılma sırasını kontrol etmek için kullanılır. Bir öğenin z ekseni üzerindeki konumunu tanımlar; bu da öğelerin üç boyutlu alanda birbirlerinin üzerine nasıl katmanlandığını belirler. Daha yüksek bir **z-index** değere sahip öğe, daha düşük **z-index** değerlere sahip öğelerin önünde görünür. Ekranda iki öğe üst üste binerse, daha yüksek bir **z-index** değere sahip olan diğerinin üstünde görüntülenir. {% hint style="info" %} **Z-Index:** Varsayılan olarak, öğelerin bir **z-index** değeri **auto**olur; bu da HTML kaynak sırasındaki konumlarına göre üst üste yığıldıkları anlamına gelir. Ancak, **z-index** öğelerin katmanlanmasını kontrol etmek ve kaplamalar, açılır menüler ve araç 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. Yedekleme sistemi olarak birden fazla yazı tipi adını 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ürde olabilir: 1. **Aile Adı:** "Times New Roman", "Courier New", "Arial" gibi belirli bir yazı tipi ailesinin adıdır. 2. **Genel Aile:** "serif", "sans-serif", "cursive", "fantasy" veya "monospace" gibi genel bir yazı tipi ailesi kategorisinin adıdır. Yazı tiplerini belirtirken, önce istediğiniz özel 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çmesine olanak tanır. Böylece farklı cihazlar ve tarayıcılar arasında daha iyi uyumluluk ve tutarlı görüntüleme sağlanır.

Bu **font-size** özelliği, bir öğedeki 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örüntüleneceğini belirler. Boyut piksel (px) ile 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 veya 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ı ağırlığıdır; genellikle normal veya standart kalınlıktadır. * **bold**: Kalın bir yazı ağırlığı belirtir. Metin normalden daha kalın görünür. * **lighter**: Kalıtılan yazı ağırlığına göre daha ince bir yazı ağırlığı 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. text-align için kullanılabilir 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 esnetir; böylece hem sol hem sağ tarafta düz bir kenar oluşturur. Bu, daha düzenli bir görünüm elde etmek için genellikle gazetelerde ve dergilerde kullanılır. Bu **text-align** özelliğini farklı öğelere uygulayarak, web sayfanız genelinde metnin hizalamasını kontrol edebilirsiniz.

**Text-decoration:** Metne alt çizgi, üst çizgi veya üstü çizili gibi süslemeler eklemek 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ğer, 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 sıkı hale getirir. **Word-spacing**: **word-spacing** özelliği, bir metin bloğundaki sözcükler arasındaki boşluğu ayarlamak için kullanılır. Belirtilen değere bağlı olarak sözcükler 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.

### Kenarlık Bu CSS özelliklerini kullanarak, web sayfalarınız için görsel olarak çekici ve iyi yapılandırılmış düzenler oluşturmak üzere öğelerin boşluklarını, kenarlıklarını ve köşelerini esnek bir şekilde kontrol edebilirsiniz. **Margin:** CSS margin özellikleri, tanımlı kenarlıkların dışında öğelerin etrafında boşluk oluşturur. **Padding**: Bir öğenin padding'i, 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 şu özelliklerle ayrı ayrı 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ığın kendi stili olabilir. Bu özelliğin kullanılabilir değerleri şunlardır: **border-style** şunlardır: * **none**: Varsayılan değerdir. Kenarlık belirtmez. * **hidden**: "none" ile aynıdır, ancak tablo öğelerindeki kenarlık çakışmalarının çözümünde farklıdır. * **dotted**: Aralıklı küçük noktalar içeren noktalı bir kenarlık belirtir. * **dashed**: Küçük boşluklarla ayrılmış kısa çizgilerden oluşan kesik çizgili bir kenarlık belirtir. * **solid**: Sürekli bir çizgi olan düz 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ğere bağlıdır. * **ridge**: 3B sırtlı bir kenarlık belirtir. Etki, **border-color** değere bağlıdır. * **inset**: 3B içe gömülü bir kenarlık belirtir. Etki, **border-color** değere bağlıdır. * **outset**: 3B dışa taşan bir kenarlık belirtir. Etki, **border-color** değere bağlıdır. Farklı **border-style** değerler kullanarak, öğelerinizin kenarlıkları için çeşitli görsel etkiler elde edebilir, 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 "**Kaldır**" seçeneğini kullanarak 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 "**Sona Ekle**" seçeneğini kullanabilirsiniz. Bu "**Ekle**" seçenekleri, yeni HTML girdilerini istediğiniz herhangi bir konuma ekleme esnekliği sağlar. Ayrıca, "**JavaScript Ekle**" seçeneği, HTML yapısı içinde JavaScript kodunu tam ihtiyacınız olan yere eklemenize olanak tanır.

## Deneyiminizi Yayınlama Tüm değişiklikleri tamamladığınızda, "**Kaydet**" düğmesine tıklayarak sağ üst köşede yer alan panele geri dönebilirsiniz. "**Kaydet**," bir "**Tamam**" düğmesi görünür. Düzenleme modundan çıkmak ve panele dönmek için "Tamam" düğmesine tıklayın. **Yaptığınız değişiklikler kaydedilecek ve içeriğe uygulanacaktır.**

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://user.netmera.com/netmera-user-guide/netmera-user-guide-tr/web-tools/web-personalization/create-new-experience/new-experience.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.