# Özelleştirilebilir kartlar

Web sitesi oluşturucusundaki "Özelleştirilebilir kartlar" bölümü, ürünleri, hizmetleri veya müşteri yorumları hakkında temel bilgileri kolayca ve hızlıca sunmak isteyenler için tasarlanmıştır. Bu bloklar, site sayfasına görsel olarak çekici kartlar eklemenize olanak tanır ve işletmenizin ihtiyaçlarına göre özelleştirilebilir.

<figure><img src="/files/2a0d33588ee578cf670034e2118376de9aa90ca7" alt=""><figcaption></figcaption></figure>

İster kurs hakkında ayrıntılı bir açıklama, ister memnun müşterilerden gelen geri bildirimler, ister hizmetlerinizi kullanmaya yönelik öneriler sunmak isteyin, "Özelleştirilebilir kartlar" ve "Kurs Kartları" bilgileri vurgulamaya ve site ziyaretçileri için daha erişilebilir ve kullanışlı hale getirmeye yardımcı olacaktır.

## Blok nasıl eklenir?

"Özelleştirilebilir kartlar" bölümünü eklemek için web sitenizin düzenleme modunda "+" işaretine tıklayın:

<figure><img src="/files/040393b4f2bff0adcde4b00b2c8063577d0156d4" alt=""><figcaption></figcaption></figure>

Ardından, açılan menüde "Özelleştirilebilir kartlar" bölümünü bulun ve siteye eklemek için üzerine tıklayın. Bölüm siteye eklenecek ve içerik ayarları menüsü sizin için açılacaktır:

<figure><img src="/files/d9ed84c956a8e9abbc9f58d878b83da90e63b4a9" alt=""><figcaption></figcaption></figure>

## Kart nasıl eklenir?&#x20;

İçeriğin "Özelleştirilebilir kartlar" bölümünün düzenleme menüsünde, kartların stili, görseller, düğmeler vb. için çeşitli ayar bölümleri göreceksiniz.

Sizin için kolaylık olması açısından, stil ayarlarının kartlara nasıl uygulandığını görmek için önce kart ekleyebilirsiniz.

Bunun için içerik ayarları menüsünde aşağı kaydırın ve "Kart Ekle" düğmesini bulun:

<figure><img src="/files/93610319c19d7122262a953e241a237bd487485e" alt=""><figcaption></figcaption></figure>

"Kart ekle" düğmesine tıkladığınızda, boş bir metin alanı, kart için ve düğme simgesi için görsel yükleme çubuğu, ayrıca düğmenin metni için ayarları görürsünüz:

<figure><img src="/files/f9a5ff1981d6c3ef2263120bb171baac334a9bad" alt=""><figcaption></figcaption></figure>

Kartın ayar alanları isteğe bağlıdır: yani örneğin karta ya da düğme simgesine bir görsel yüklemeyi veya metin eklemeyi atlayabilirsiniz - her şey sizin takdirinize bağlıdır.

Örneğin kartta bağlantılı bir düğmeye ihtiyacınız yoksa, "Düğme adı" ve "Bağlantı" alanlarını boş bırakın: böylece düğmeler kartta gösterilmeyecektir.

<figure><img src="/files/570eb375a60789b074715ce1f04ebb3c8505215e" alt=""><figcaption></figcaption></figure>

Kart metni için, herhangi bir metin düzenleyicidekine benzer çeşitli ayarlar vardır; burada yazı tipi boyutunu, yazı tipi çerçevesini, rengi, vurgulamayı ayarlayabilir, ayrıca bağlantı ekleyebilir ve daha fazlasını yapabilirsiniz.

Bunun için metni (metnin bir bölümünü) seçin ve gerekli ayarları metne uygulayın:

<figure><img src="/files/27f660b49f1bbeaac536aa6211c9d0cf6c6a1421" alt=""><figcaption></figcaption></figure>

İlk kartı tamamen yapılandırdıktan sonra, sonraki kartı ekleyin: bunun için, ilk eklenen kartın ayar çubuğunun altında bulunan "Kart Ekle" düğmesine tıklayın:

<figure><img src="/files/b4e7c76bc355d832075bd9ec0def798ce082f513" alt=""><figcaption></figcaption></figure>

## Kart ayarları

{% hint style="info" %}
Kartlar tek bir stile göre yapılandırılır: bu bölümde kullandığınız tüm ayarlar aynı bölümdeki tüm kartlara uygulanır.
{% endhint %}

### Kart Stili

Mavibot web sitesi oluşturucusunda kartlar için iki stil vardır: basit ve kaydırıcı biçiminde.

Basit bir stil kullanıldığında, tüm kartlar site bölümünün tek bir sayfasında hemen gösterilir:

<figure><img src="/files/ccc01da8e9a28f48dba68377e41a9926454e85a2" alt=""><figcaption></figcaption></figure>

"Kaydırıcı" stili kullanıldığında, kartlar bir karusel biçiminde olur ve böylece siteye daha fazla dinamizm katar:

Kaydırıcı stili için, kartın oklarının ve noktalarının nerede konumlanacağını seçebilirsiniz:

<figure><img src="/files/833117616c5723e4daf23826e70f0890f3b8417f" alt=""><figcaption></figcaption></figure>

Oklar kaydırıcının içinde, dışında veya gizli olarak konumlandırılabilir (örneğin, kartların otomatik olarak dönmesi için bir zamanlayıcı ayarlarsanız):

<figure><img src="/files/557d258edb45cef074ca333d35ee6b163ec3c726" alt=""><figcaption></figcaption></figure>

Noktalar da kaydırıcının içinde, dışında veya gizli olabilir.

Kartları otomatik olarak kaydırmak için, bir sayfanın gösterim zaman aralığını ayarlayın:

<figure><img src="/files/8434d2005e4aa93233ec6d041db7465847069662" alt=""><figcaption></figcaption></figure>

Zamanlayıcı değeri 0 olarak ayarlanırsa, kartlar otomatik olarak kaydırılmaz.

{% hint style="warning" %}
Dikkat!&#x20;

Süre milisaniye cinsinden ayarlanır; bir milisaniye 0,001 saniyeye eşittir. Bu, 7 saniye ayarlamanız gerekiyorsa, 7000 alanına değeri girmeniz gerektiği anlamına gelir.
{% endhint %}

Ayrıca kart türünü de seçebilirsiniz:

<figure><img src="/files/37694288a7ccd3be9b88f7756e6fed0340abee58" alt=""><figcaption></figcaption></figure>

#### Kart öğeleri için renk ayarları

Kartları kendi tarzınıza göre özelleştirmek için renk ayarlarını kullanın:

<figure><img src="/files/5a8d2174b590e634f2193b2a04246c97e2bc971f" alt=""><figcaption></figcaption></figure>

Renk ayarları tüm kartlara aynı anda uygulanır. Metin renginin her kartta farklı olmasını istiyorsanız, metin alanındaki ayarları kullanın.

Renk özelleştirmesi için geniş bir renk paleti mevcuttur:

<figure><img src="/files/158f919a713d1f7dd475267e4d44eb24a8ea566e" alt=""><figcaption></figcaption></figure>

Ve renk ayarlarını kartın herhangi bir öğesine uygulayabilirsiniz.

#### Kenarlık ve iç boşluk ayarları

<figure><img src="/files/90eed798ba690c3ccd19eeef5634193a835a2bee" alt=""><figcaption></figcaption></figure>

1. **Satır başına kart sayısı** - bir satırda (sayfada) gerekli kart sayısını ayarlamanıza yardımcı olacak bir metin alanı.
2. **İç boşluklar -** kartlar arasındaki yatay/dikey boşlukları ve kartların içindeki boşlukları artırmaya veya azaltmaya yardımcı olacak sayısal değerler girme alanlarıdır,

<figure><img src="/files/af040eeae5e46426eba4e475a13551e1aaeaf505" alt=""><figcaption></figcaption></figure>

Kartların içindeki boşluk için ortak bir sayısal değer ayarlayabilir veya satırın sağ köşesindeki dişliye tıklayarak üst, alt, sol ve sağ kenarlar için ayrı değerler belirleyebilirsiniz:

<figure><img src="/files/79c9f2266817b46e9217348d9284d730c8435571" alt=""><figcaption></figcaption></figure>

#### Kart yönelimi

<figure><img src="/files/61b1161dd94f15365ea69e480b62e49ae969eba3" alt=""><figcaption></figcaption></figure>

Kartın yönelimi yatay ya da dikey olabilir.

#### Hizalama

Merkezde, sol kenarda veya sağ kenarda olabilir.

<figure><img src="/files/3420de538190eb839f0c1b9ce840fe5f057de711" alt=""><figcaption></figcaption></figure>

#### Gölge ayarları

Kartlara derinlik katmaya ve onları bölümün/sayfanın arka planına karşı vurgulamaya yardımcı olur.

<figure><img src="/files/87203844256406cc7562a8c38621bd48ea6d8086" alt=""><figcaption></figcaption></figure>

## Görsel ayarları

Görsel ayarları, karta eklediğiniz tüm görsellere de uygulanır.

<figure><img src="/files/86d3025df63bc5fc5d47bddb94b158e625c1550c" alt=""><figcaption></figcaption></figure>

Görsel ayarlarında şunları belirlemeniz gerekir:

a) görsel genişliği:

<figure><img src="/files/e8291c1ee08118734bb6796a427e3c7fb4e4ec0c" alt=""><figcaption></figcaption></figure>

Alan piksel cinsinden sayısal bir değer alır; belirtilmezse, görselin gerçek piksel genişliğine göre otomatik olarak gösterilir.

b) görsel yüksekliği:

<figure><img src="/files/79315a9c35fdc18c7fcc5b52e6f9332522c5c7a9" alt=""><figcaption></figcaption></figure>

Alan piksel cinsinden sayısal bir değer alır; belirtilmezse, görselin gerçek yüksekliğine orantılı olarak otomatik olarak gösterilir.

c) yuvarlama:

<figure><img src="/files/ee9e3ddb72d50ccdd8750088a088c671508f0bb5" alt=""><figcaption></figcaption></figure>

Piksel cinsinden sayısal bir değer alan alan, görselin köşelerini yuvarlamaya yardımcı olur:

<figure><img src="/files/d680923bed82d5787a96c1bddfe5c3e8afc052eb" alt=""><figcaption></figcaption></figure>

d) görsel boyutu:

<figure><img src="/files/76c31d6ae0075644eec1f68c9711d28e6293aacb" alt=""><figcaption></figcaption></figure>

Ayar, görsel için belirtilen genişlik ve yüksekliğe göre görseli doldurmak/germek/konumlandırmak gerektiğinde uygulanır.

e) "Görsel metinden sonra" onay kutusu

Kutuyu işaretlerseniz, görsel kartta metnin altında yer alacaktır.

## Düğmeler nasıl ayarlanır

<figure><img src="/files/fd69839392a11c76b27961ac8815aa18e58057a7" alt=""><figcaption></figcaption></figure>

Düğmenin **metni,** ayrıca **bağlantısı** site ziyaretçinizin tıklaması gereken sayfa, kartın içinde ayarlanır:

<figure><img src="/files/3bc2f0a4b867138c80b5de81bb862759f5110236" alt=""><figcaption></figcaption></figure>

Ayrıca, metin ve bağlantıya ek olarak, kartta bir görsel yükleyerek düğme için bir simge de ayarlayabilirsiniz:

<figure><img src="/files/4e8215551a7d3a7147e98d5d46cbddbada96c718" alt=""><figcaption></figcaption></figure>

Düğme metninin ve arka planının rengini ayarlamak için buradaki ayarları kullanın:

<figure><img src="/files/c110c41c6412b35ffa3bb4bd9ac8565b479fe94d" alt=""><figcaption></figcaption></figure>

Ardından, düğme için boyut, genişlik ve iç boşlukları ayarlayabilirsiniz:

<figure><img src="/files/c4d22cd24a18a196ae02ca6373d3a21c07c39822" alt=""><figcaption></figcaption></figure>

1. **Düğmenin genişliği** - piksel ve yüzde değerlerini kabul eden bir alandır:

<figure><img src="/files/5d6b735250fbd8de87a8864bc85e67a7d550e9b5" alt=""><figcaption></figcaption></figure>

2. **Düğme hizalaması** - düğmeyi kartta sağ veya sol kenara göre, ayrıca merkeze göre ayarlamaya yardımcı olur.

<figure><img src="/files/f22aa19e15b4e0a224bb0d0c7e18ff75c417877d" alt=""><figcaption></figcaption></figure>

3. **Düğme kenar yuvarlama yarıçapı -** düğme köşelerini yuvarlamak için piksel cinsinden sayısal değer alan bir alandır:

<figure><img src="/files/6b9ada532c5572ce3a8d756190524d23cbf9f32f" alt=""><figcaption></figcaption></figure>

4. **Kenarlık genişliği -** düğme çerçevesinin genişliğini ayarlamak için piksel cinsinden sayısal değer alan bir alandır:

<figure><img src="/files/b9b772c29f0b64b2bdb6490621b838fa56afc0a4" alt=""><figcaption></figcaption></figure>

5. **Kenar boşluğu**&#x20;

Düğme için kart içinde üst, alt, sol ve sağ kenarlara göre iç boşlukları ayarlamanıza yardımcı olur.

<figure><img src="/files/8e1164d062b4d53f4ce07194a8c6b824c462317d" alt=""><figcaption></figcaption></figure>

6. **İç boşluk**

Düğmenin içindeki boşlukları ayarlamanıza yardımcı olur.

<figure><img src="/files/5c1d135aa863afc2172e7658185bfff70dbc5db6" alt=""><figcaption></figcaption></figure>

7. **Simge**

Karttaki bir düğmeye bir simge yüklediyseniz, simge uygun şekilde ayarlanabilir:

<figure><img src="/files/15ea799123cc615f62228638a5b0fa9a9689b9c9" alt=""><figcaption></figcaption></figure>

Ayrıca simgenin metne göre sol veya sağdaki konumunu da ayarlayabilirsiniz:

<figure><img src="/files/3ff1fe62f22d9b6c408de8cdb8da8586bcdb18e8" alt=""><figcaption></figcaption></figure>

8. **Düğme için gölge**

Gölge yalnızca kart için değil, düğme için de ayrı olarak ayarlanabilir. Bunun için düğme ayarlarında "Gölge" adlı açılır alanı bulup gölge yoğunluğu derecesini seçmek yeterlidir: hafif veya güçlü:

<figure><img src="/files/559559409c0378930aae3b44b834930ca3caac6a" alt=""><figcaption></figcaption></figure>

9. **Düğme animasyonu**

<figure><img src="/files/037a99c16a70af192b436e129b2dc311fa91f013" alt=""><figcaption></figcaption></figure>

Müşterilerin (site kullanıcılarının) düğmedeki hedeflenen eyleme dikkatini çekmeye ve siteye dinamizm katmaya yardımcı olur:

1\) flaş düğme animasyonu:

<figure><img src="/files/218f2e0862cdf6ab21fd189a9bdad9ac47734086" alt=""><figcaption></figcaption></figure>

2\) ripper düğme animasyonu:

<figure><img src="/files/49ea79b287413a6b1c315654fa414d04ede08ed7" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Bitti! \
Şimdi web sitenizde kartları sıfırdan nasıl oluşturacağınızı ve özelleştireceğinizi biliyorsunuz.
{% endhint %}


---

# 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://docs.mavibot.ai/doc/tr/websites/siteler/blocks/cards.md?ask=<question>
```

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.