Modal Tailwind CSS Popuplar Nasıl Oluşturulur?

Tailwind CSS

CSS, HTML öğelerinin bir web sitesi ekranında nasıl görüneceğini belirtir.

Tailwind CSS, siteler üzerinde kullanımı oldukça pratik ve kolay olan özelleştirilebilir bir çerçevedir. Ayrıca, yardımcı sınıf tabanlı bir çerçeve olduğu için özelleştirilebilir seçeneklerle arayüzler oluşturabilirsiniz.

Tailwind CSS, diğer çerçevelerden farklı bir yaklaşıma sahiptir. Web siteniz üzerinde size daha fazla kontrol imkanı sunar. CDN'den bir Tailwind CSS dosyasını bağlantı olarak ekleyerek kolayca kullanabilirsiniz.

Tek yapmanız gereken bağlantıyı HTML sayfasının baş kısmına eklemektir. Ayrıca, web sitenize özelleştirilebilir kodlar eklemek de mümkündür.

Bu özellikler sayesinde, Tailwind CSS kısa sürede web siteleri oluşturmak için uygundur. Bunun dışında, Tailwind belirli tasarımlar ve sabit düzenler üzerine kurulu değildir.

Bu şekilde, sitenizin nasıl görüneceğine farklı öğeleri bir araya getirerek siz karar verebilirsiniz.

Ayrıca, özelleştirme seçenekleriyle benzersiz web siteleri oluşturma avantajı sunar.

Örneğin, sitenize eklemek istediğiniz öğelerin boyutlarını, yazı tiplerini, renklerini ve gölgelerini ayarlayabilirsiniz. Tailwind CSS kodu şu şekilde görünebilir:

<div class="space-y-5">
 <div class="p-3 bg-white shadow rounded-lg">
   <h3 class="text-xs border-b">font-sans</h3>
   <p class="font-sans">
     The quick brown fox jumps over the lazy dog.
   </p>
 </div>
 <div class="p-3 bg-white shadow rounded-lg">
   <h3 class="text-xs border-b">font-serif</h3>
   <p class="font-serif">
     The quick brown fox jumps over the lazy dog.
   </p>
 </div>
 <div class="p-3 bg-white shadow rounded-lg">
   <h3 class="text-xs border-b">font-mono</h3>
   <p class="font-mono">
     The quick brown fox jumps over the lazy dog.
   </p>
 </div>
</div>

‍

Bu kodu eklediğinizde, farklı yazı tipleriyle ayarlama yapabilirsiniz. Ve sonuç şöyle görünecek:

tailwind css yazı tipi kodu sonucunu gösteriyor

(Kaynak)

Modal Popup Nedir?

Modal popup, genellikle bülten abonelikleri ve giriş formları için tercih edilir. Kontrol, kayıt ve giriş formlarını yönetmek için çoğu zaman modal açılır pencereler kullanılır. Ayrıca, bildirimleri göstermek amacıyla da bu açılır pencereler bir web sitesinde kullanılabilir.

Modal popuplar ile ipuçları, arama formları, tam ekran videolar ve görüntüler, iletişim formları göstermek mümkündür.

Bir web sitesindeki modal popup, son güncellenen sayfayı tekrar yüklemeden gösterir. Bu nedenle bilgiyi yeniden girmeye gerek kalmaz. Böylelikle, zaman kaybetmeden ilgili bilgiler görülebilir.

Modal popupların en önemli özelliklerinden biri, sessiz olmalarıdır. Bu sebeple, etkinleştirilmeleri için tetikleyicilere ihtiyaç duyulur.

Bu tetikleyiciler, modal popupları etkinleştirmek için belirli eylemler için ayarlanabilir. Örneğin, bülten popup'larını ve bildirimleri vurgulamak oldukça yararlıdır.

Bu tür popup'lar, CSS, HTML ve JavaScript kullanılarak oluşturulabilir. Biz ise CSS modal tailwind popupları ve bunların oluşturma adımlarına odaklanacağız.

Modal Tailwind CSS Popup

Daha önce belirttiğimiz gibi, özelleştirilebilir kodlar kullanarak siteniz için popup'lar oluşturmanız mümkün. Bu yüzden popup stilinizi sitenizin karakterine göre belirleyin ve onunla oynamaya başlayın!

Tailwind ile, bir CSS dosyasını ham formda alıp bir konfigürasyon dosyası üzerinden işlem yapmak çok kolaydır. Çıktı, bu konfigürasyon işleminden sonra üretilir ve Tailwind CSS popup kullanıma hazır hale gelir.

Modal Tailwind CSS'in birçok avantajı vardır, örneğin:

Bir dosyada minimum kod satırı bulunması
Özelleştirilebilir tasarımlar
Duyarlı web siteleri oluşturmak
Ayrıca, sonradan değişiklik yapmak çok basittir çünkü ayar seçenekleri kolay kullanılır. Tailwind popup formları kullanışlı ve çok erişilebilirdir!

Modal popup Tailwind CSS kodu şu şekilde görünebilir:

<!-- Button trigger modal -->
<button type="button" class="px-6
      py-2.5
      bg-blue-600
      text-white
      font-medium
      text-xs
      leading-tight
      uppercase
      rounded
      shadow-md
      hover:bg-blue-700 hover:shadow-lg
      focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
      active:bg-blue-800 active:shadow-lg
      transition
      duration-150
      ease-in-out" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog relative w-auto pointer-events-none">
    <div
      class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
      <div
        class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
        <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">Modal title</h5>
        <button type="button"
          class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
          data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body relative p-4">
        Modal body text goes here.
      </div>
      <div
        class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
        <button type="button" class="px-6
          py-2.5
          bg-purple-600
          text-white
          font-medium
          text-xs
          leading-tight
          uppercase
          rounded
          shadow-md
          hover:bg-purple-700 hover:shadow-lg
          focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0
          active:bg-purple-800 active:shadow-lg
          transition
          duration-150
          ease-in-out" data-bs-dismiss="modal">Close</button>
        <button type="button" class="px-6
      py-2.5
      bg-blue-600
      text-white
      font-medium
      text-xs
      leading-tight
      uppercase
      rounded
      shadow-md
      hover:bg-blue-700 hover:shadow-lg
      focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
      active:bg-blue-800 active:shadow-lg
      transition
      duration-150
      ease-in-out
      ml-1">Save changes</button>
      </div>
    </div>
  </div>
</div>

‍

Bu kodu sitenize eklediğinizde, son sonuç şu şekilde görünür:

(Kaynak)

Popupsmart ile Tailwind CSS Modal Popup Oluşturma

Popupsmart kullanarak kolayca modal tailwind popup'lar oluşturabilirsiniz. Popupsmart, benzersiz popup'lar oluşturmanıza olanak tanıyan, kodlama gerektirmeyen akıllı bir popup oluşturucudur.

Amacınıza göre, farklı türlerde popup'lar oluşturabilir ve bunları 5 dakika içinde web sitenize ekleyebilirsiniz.

Popupsmart ile oluşturulan popup'lar şu amaçlar için kullanılabilir:

Ayrıca, popup'larınızdaki formlar ile geri bildirim alabilir ve müşterilerinize daha etkili bir şekilde ulaşabilirsiniz.

Popupsmart Şablonları & Modal Popup Oluşturma

Popupsmart'ta seçebileceğiniz birçok farklı popup şablonu bulunmaktadır.

Kaydolun ve “+ Yeni Kampanya” butonuna tıklayarak popup oluşturmaya başlayın.

Popupsmart panosunda yeni kampanya düğmeleri

Farklı iş hedeflerine göre, bu şablonlar değişkenlik gösterebilir.

Popup oluştururken Popupsmart Playbook veya Playbook adımındaki popup şablonlarını inceleyebilirsiniz:

Ayrıca, hedefinize göre bir şablon seçebilir ve markanızın kimliğine göre özelleştirebilirsiniz.

İlham verici fikirler için popup tasarımlarına göz atabilirsiniz.

Popup'larınızın amacını düşünün ve bu şablonlara karar verin. Popup'ınızı yazı tiplerini, renklerini özelleştirerek kişiselleştirebilirsiniz.

Dikkat çekici ve iyi yazılmış bir başlık ve metin eklemeyi unutmayın. Ayrıca, ürünlerinizin ve hizmetlerinizin resimlerini popup'a ekleyerek daha iyi bir etki yaratın.

Örneğin, bir şablonu ziyaretçileri ankete katılmaya teşvik etmek amacıyla değiştirdik ve yeniden konumlandırdık.

"Özelleştir" ve "Stil" bölümünde tüm öğeleri düzenlemek mümkündür.

Modal Tailwind CSS Popup Entegrasyonu Popupsmart ile

Popup'unuzu oluşturup hedefleme seçeneklerini seçtiğinizde, popup yayınlamaya hazır hale gelir!

Popupsmart'ın kullanıcı dostu entegrasyon sistemi sayesinde, web sitenize bir popup eklemek çok kolay.

Tek yapmanız gereken, popup'unuzu tamamladıktan sonra aldığınız kodu kopyalayıp yapıştırmak.

Sonrasında, Yayınla bölümünde, alan adınızın yanındaki "Şimdi Doğrula" üzerine tıklayarak kodu hızlıca alabilirsiniz.

Bu kodu web sitenize ekledikten sonra, popup'unuz kullanıma hazır! Şu şekilde görünmeli:

CMS'inize bağlı olarak kodunuzu gömmek için farklı yollar vardır ve ihtiyaç duyduğunuzda size yardım sunabiliriz.

Kullanıma hazır olduğunda, popup'unuz web sitenizde şu şekilde görünebilir:

‍

Neden Modal Tailwind CSS Popup'ları Kullanıyoruz?

🔥Kullanıcı Etkileşimi: Modaller, kullanıcıların mevcut sayfadan ayrılmadan belirli içeriklere veya eylemlere (ör. Formlar, bildirimler) odaklanmasına olanak tanıyarak etkileşimi artırır.
⚡Sorunsuz Kullanıcı Deneyimi: Modaller içeriği aynı sayfa içinde görüntülediğinden, kullanıcılar iş akışlarını bozmadan veya başka bir sayfaya gitmeden onlarla etkileşime girebilir.
🎨Özelleştirilebilir Tasarım: Tailwind CSS, yardımcı sınıfları kullanarak modalleri görünüm, boyut ve yerleşim açısından kolayca özelleştirmenize olanak tanıyarak web sitenizin tasarımına uymasını kolaylaştırır.
♿Duyarlılık: Tailwind'in duyarlı tasarım özellikleri, modallerin farklı ekran boyutlarına sorunsuz bir şekilde uyum sağlamasını ve cihazlar arasında tutarlı bir deneyim sunmasını sağlar.
📱Erişilebilirlik: Doğru şekilde uygulandığında, modaller kullanıcının dikkatini kritik eylemlere (onaylar veya girişler gibi) odaklayarak erişilebilirliği artırırken, kolay kapatma için kontroller sağlar.
🔧 Esneklik: Tailwind CSS modalleri, çeşitli amaçlar için oturum açma formları, uyarılar veya açılır pencereler gibi dinamik ve etkileşimli öğeler oluşturmak için JavaScript ile kolayca entegre edilebilir.

Sıkça Sorulan Sorular (SSS)

Tailwind CSS Ne İçin Kullanılır?

Tailwind CSS, websitesi oluşturmayı hızlı bir şekilde gerçekleştirmek için kullanılır. Oldukça özelleştirilebilir olup, farklı seçeneklerle kolayca kullanılabilir. Bir websitesinde arayüzler oluşturmak için kullanılır. Tailwind CSS ile websitenizin her bir ögesini özelleştirebilirsiniz. Sonuç olarak, farklı özelliklere sahip benzersiz websiteleri oluşturmak mümkündür.

Tailwind CSS ile Nasıl Popup Yapılır?

Kodlar ve özelleştirmeler yardımıyla Tailwind CSS ile popuplar oluşturabilirsiniz. Önceki bölümlerde verdiğimiz adımları ve fikirleri takip ederek, kendi modal Tailwind CSS popuplarınızı oluşturabilirsiniz. Ayrıca, modal Tailwind CSS popuplar tamamen özelleştirilebilir olduğundan, web sitenizin öğelerini istediğiniz gibi tasarlayabilirsiniz.

Popupsmart, iyi tasarlanmış şablonları ile bunu daha da kolay hale getirir. Bu şablonları kısa sürede kişiselleştirebilirsiniz. Hedef kitlenize ulaşmak ve e-posta listenizi büyütmek için bu popupları eklemeyi düşünün.

Sonuç

Modal tailwind CSS açılır pencereleri oluşturmakla ilgili her şey bu kadar!

Umarız bu konuyu okumaktan keyif almışsınızdır ve kendi popup'ınızı nasıl oluşturacağınızı öğrenmişsinizdir.

Modal tailwind CSS açılır pencerelerine her zaman ihtiyaç duyulmasa da, Popupsmart ile bir tane oluşturmanın her zaman daha iyi ve daha kolay bir yolu vardır.

Bu içeriklere de göz atın: