Derse nasıl düğme eklenir

Kwiga'da iki şekilde düğme ekleyebilirsiniz:

1. Hızlı yöntem – düğmenin rengini ve metnini ayarlamanızı sağlar.
   

2. Kod kullanarak – kenarlık yarıçapı, boyut, dış çizgi rengi, yükseklik ve daha fazlası gibi tüm parametreleri düzenlemenizi sağlar.
   

Hızlı Ekleme

Düğme eklemek istediğiniz dersi açın ve “Metin, Görsel, Kod Yerleştirme” öğesini ekleyin. Düğmeyi yerleştirmek istediğiniz alana tıklayın ve +Düğme seçeneğini metin düzenleyici araç çubuğundan seçin.

Açılan menüde bağlantı ekleyebilir, düğme adını belirleyebilir ve düğme ile metin rengini özelleştirebilirsiniz. Şuna tıklayın: Gönder, düğme dersinize eklenecektir!

Kod ile Düğme Ekleme

HTML kodunu kullanarak bir kurs dersine veya maratona düğme ekleyebilirsiniz. Bunu nasıl yapacağınızı aşağıda göstereceğiz.

Düğme eklemek istediğiniz dersi açın ve “Metin, Görsel, Kod Yerleştirme” öğesini ekleyin.

Ardından kod düzenleyiciyi açın (metin düzenleme araç çubuğunu göremiyorsanız — metin giriş alanını etkinleştirmek için beyaz alana tıklayın):

Kod düzenleyici açılacaktır (ekranda siyah bir alan) ve menünün üst kısmında hazır kod şablonları eklemek için düğmeler göreceksiniz. Düğme oluşturmak için şunu seçin: Düğme:




Sayfada kodu ve onun üzerinde düğmenizi göreceksiniz.

Düğmedeki yazı tipi boyutunu, iç boşluğu, düğme genişliğini özelleştirebilir ve kenarlık yarıçapını ayarlayabilirsiniz.

Düğme rengini RGB veya HEX kodu, bir dönüştürücüya da bir renk seçici aracı.

Bir satıra birden fazla düğme yerleştirme

Yan yana yerleştirilen birden fazla düğme oluşturmak için ek kod gerekir. Aşağıda, üç farklı renkte "Base", "Comfort" ve "Pro" metinlerine sahip üç düğmenin kodu yer alır. Kodun ilgili bölümlerini düzenleyerek metni, rengi ve düğme biçimini değiştirebilir, ayrıca bağlantıyı eklemeyi unutmayabilirsiniz.



<!-- Örnek Düğme -->

<div id="buttons-container">

    <a id="my-button" href="/"> Base </a>

    <a id="my-button" href="/"> Comfort </a>

    <a id="my-button" href="/"> Pro </a>

</div>

<style>

#buttons-container {

    display: flex;

    grid-gap: 20px;

    justify-content: center;

}

@media(max-width: 640px) {

    #buttons-container {

        flex-direction: column;

    }

}

#my-button {

    display: flex;

    margin: 0 auto;

    width: 100%;

    padding: 13px 20px;

    border-radius: 20px;

    color: rgb(255, 255, 255);

    background: orange;

    justify-content: center;

    &:first-child {

        background: green;

    }

    &:last-child {

        background: purple;

    }

}

</style>

Sarıyla vurgulanan alanlar, düğme renginin belirtildiği yeri gösterir.