> 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-araclari/web-kisisellestirme/yeni-deneyim-olustur/yeni-deneyim.md). # Yeni deneyim **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 üzerinde 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) web kişiselleştirme deneyiminiz için, deneyimlerinizi oluşturmaya başlayabilirsiniz **Değişiklik Ekle** düğmesi **Kurallar / Değişiklikler** bölümü.

Yerleşim özelliklerini ve metin hizalamasını ayarlamaktan arka plan görsellerini ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Kişiselleştirme size benzersiz ve ilgi çekici dijital ortamlar oluşturma gücü verir. Bu kılavuz, Netmera Web Kişiselleştirme aracında bulunan çeşitli CSS özelleştirmelerini inceleyerek, 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** ve değişikliklerinizi **sağ menüde takip edebilirsiniz.** Ayrıca, **HTML ayarlarını sağ tıklayarak** öğe üzerinde 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ından yararlanın. {% hint style="info" %} **Boyut Değerleri:** Boyut değerleri öğenin boyutunu belirlerken, konum değerleri konumunu tanımlar. Bu girişlere belirli piksel değerleri girmelisiniz (ör. 100px) ya da 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ı 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 düşünebilirsiniz. {% 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 alır: * **no-repeat:** Arka plan görseli yalnızca bir kez gösterilir ve tekrarlanmaz. * **repeat:** Arka plan görseli dikey ve yatay yönde 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 yanına sabitlenir ve boşluklar görseller arasında eşit olarak dağıtılır. * **round:** Arka plan görseli tekrarlanır ve boşluk kalmayacak şekilde alanı doldurmak için ayarlanır; bunun için uzatılması veya sıkıştırılması gerekse bile.

### Yerleşim Yerleşim bölümünde düzen özelliklerinizi belirleme özgürlüğüne sahipsiniz. Bu **float** özelliği, bir öğenin sola, sağa veya hiç yüzer konumda olup olmayacağını belirler. Aşağıdaki değerlerden biri atanabilir: * **none:** Öğe yüzer konumda değildir ve metinde geçtiği yerde tam olarak görüntülenir. Bu varsayılan davranıştır. * **left:** Öğe kapsayıcısının solunda yüzer. * **right:** Öğe kapsayıcısının sağında yüzer.

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 alt öğ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 işleneceğini belirler. Aşağıdaki değerlerden birini alabilir: * **visible:** Taşma kırpılmaz ve içerik öğenin kutusunun dışına taşar. Bu varsayılan davranıştır. * **hidden:** Taşma kırpılır ve belirtilen alanı aşan tüm içerik görünmez. * **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 saydamlık düzeyini ayarlamak için kullanılır; bu, şeffaflığını belirler. Saydamlı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 saydamdır. * 0: Öğe tamamen şeffaftır ve dolayısıyla görünmez.

Bu **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 üzerindeki konumunu tanımlar; bu da öğelerin üç boyutlu alanda nasıl katmanlandığını veya birbirinin üzerine nasıl yığıldığını belirler. Daha yüksek bir **z-index** değere sahip **z-index** öğeler, daha düşük değerlere sahip öğelerin önünde görünür. Ekranda iki öğe üst üste gelirse, daha yüksek **z-index** değere sahip olan, diğerinin üstünde görüntülenir. {% hint style="info" %} **Z-Index:** Varsayılan olarak öğelerin **z-index** değeri **auto**vardır; bu da HTML kaynak sırasındaki konumlarına göre yığıldıkları anlamına gelir. Ancak, **z-index** kullanarak öğelerin katmanlanmasını kontrol edebilir ve üst üste bindirmeler, açılır menüler ve araç ipuçları gibi efektler oluşturabilirsiniz. {% 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 sonraki yazı tipini dener. Yazı tipi adları iki türde 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ı tiplerini belirtirken, istediğiniz özel yazı tipiyle başlamanız ve ardından sona 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 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 öğedeki yazı tipinin boyutunu tanımlamak için kullanılır. Öğedeki metin içeriğinin ne kadar büyük veya küçük görüntüleneceğini belirler. Boyut piksel (px) kullanılarak 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. Bu **font-weight** özelliği, farklı kalınlık düzeylerini belirtmek için çeşitli değerler veya anahtar kelimeler kabul eder. * **normal**: Varsayılan yazı tipi kalınlığıdır; genellikle normal veya standart kalınlıktır. * **bold**: Kalın bir yazı tipi ağırlığı belirtir. Metin normalden daha kalın görünür. * **lighter**: Kalıtılan yazı tipi kalınlığına göre daha ince bir yazı tipi 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 konumlanacağını belirler. text-align için kullanılabilen 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; böylece hem sol hem sağ tarafta düz bir kenar oluşur. 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 metin hizalamasını kontrol edebilirsiniz.

**Metin Dekorasyonu:** Metne altı çizili, üstü çizili veya çizgi üstü gibi eklenen dekorasyonu belirtmek için kullanılan özelliktir. **Satır Yüksekliği**özelliğ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, metni daha seyrek hale getirirken; daha küçük bir değer satırlar arasındaki boşluğu azaltır, metni daha sıkı hale getirir. **Kelime Aralığı**özelliği: **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 yerleşimi 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, öğelerin boşluklarını, kenarlıklarını ve köşelerini kontrol etme esnekliğine sahip olursunuz; böylece web sayfalarınız için görsel açıdan çekici ve iyi yapılandırılmış düzenler oluşturabilirsiniz. **Boşluk:** CSS margin özellikleri, tanımlanmış kenarlıkların dışında öğelerin etrafında boşluk oluşturur. **İç Boşluk**: Bir öğenin iç boşluğu, içeriği ile kenarlığı arasındaki alandır. T **Kenarlık Kalınlığı**özelliği: `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 özelliklerle ayarlayabilirsiniz: `border-top-width`, `border-right-width`, `border-bottom-width`, ve `border-left-width`. **Kenarlık Rengi**özelliği: `border-color` özelliği, bir öğenin dört kenarlığının rengini ayarlar. **Köşe Yarıçapı**özelliği: `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. İçin kullanılabilen 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ıdır. * **dotted**: Küçük noktaların aralıklı olduğu 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 bir kenarlık belirtir. * **double**: İki düz çizgiden oluşan çift çizgili bir kenarlık belirtir. * **groove**: 3B oluklu bir kenarlık belirtir. Etkisi, **border-color** değere bağlıdır. * **ridge**: 3B sırtlı bir kenarlık belirtir. Etkisi, **border-color** değere bağlıdır. * **inset**: 3B içe gömük bir kenarlık belirtir. Etkisi, **border-color** değere bağlıdır. * **outset**: 3B dışa taşkın bir kenarlık belirtir. Etkisi, **border-color** değere bağlıdır. Farklı **border-style** değerleri 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 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, sadece "**Ekle**" seçeneğini seçebilirsiniz. Ayrıca, "**Ekle**" seçenekleri, istediğiniz herhangi bir konuma yeni HTML girdileri ekleme esnekliği sağlar. Ayrıca, "**JavaScript Ekle**" adlı bir seçenek de 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. Once click "**Kaydet**, bir "**Tamam**" düğmesi görünecektir. Düzenleme modundan çıkıp panele dönmek için "Tamam" düğmesine tıklayın. **Değişiklikleriniz 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` 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=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.