Bir Web Sitesinde Düğme Oluşturma Yöntemleri
Düğmeler, bir web sitesinin en temel unsurlarından biridir ve kullanıcıları belirli eylemlere yönlendirmede kilit rol oynar; satın alma yapmak, haber bültenine kaydolmak veya sadece başka bir sayfaya gitmek gibi. Yüksek görünürlükte ve etkileşimli bir özellik olarak düğmeler genellikle öne çıkarılacak şekilde tasarlanır ve kullanıcıları sitenizle etkileşime girmeye teşvik eder. Peki siteniz için HTML düğmesini edinmenin en tipik yolları nelerdir?
HTML Düğmesi Kodu Oluştur
İlk çözüm, HTML düğmesinin kodunu istediğiniz şekilde kendiniz yazmaktır. Böylece tam olarak ihtiyaç duyduğunuz özelliklere sahip bir düğme oluşturursunuz. Kendi yapımınız olduğu için nihai projeniz mevcut kodlama becerilerinizle sınırlıdır.
Bir Düğmeyi Widget Olarak Oluşturun
Alternatif olarak, her şeyi görsel olarak değiştirdiğiniz veya ilgili alanlarda özellikleri yazarak bir düğme oluşturmaya olan hızlı, kod gerektirmeyen bir çözüm kullanabilirsiniz. Bir widget oluşturma süreci, kodlama bilginizin seviyesi ne olursa olsun net ve sezgiseldir.
Bir widget ile hızlıca bir buton nasıl oluşturulur?
Button widget lets you create a button in a few easy steps:”>Elfsight Düğme Eklentisi, birkaç kolay adımda bir düğme oluşturmanıza olanak tanır:
- Uygun bir düğme senaryosu için bir şablon seçin.
- CTA’yı, bağlantıyı ve tasarımı ayarlayın.
- Oluşturulan HTML kodunu kopyalayın ve web sitenize yapıştırın.
Bu sayede sitenizde dakikalar içinde tamamen işlevsel ve özelleştirilebilir bir butona sahip olabilirsiniz — kodlama gerektirmez!
Editörde kendi özel HTML düğmenizi oluşturmaya çalışın ⇩
Detaylı Rehber: HTML’de Düğme Nasıl Oluşturulur
Bu ayrıntılı talimatlarla, web sayfanız için Düğme widget’ını sorunsuzca oluşturabilir ve bugün kullanıcı etkileşimini artırmaya başlayabilirsiniz.
- Uygun bir şablon seçin. Düzenleyicide herhangi bir seçenekle başlayarak kendi düğmenizi oluşturun veya ihtiyaçlarınıza uygun bir şablon bulun.
- Düğmeyi Özelleştirin. Tercihleriniz doğrultusunda Düğme Widget’ının görünümünü ve davranışını ayarlayın. Düğme rengini seçin, boyutu belirleyin, yazı tipini tanımlayın, şekli değiştirin ve hatta Özel JS veya CSS kullanın.
Butonunuz hazır olduğunda, kontrol panelinizden devam etmek için yayımlayın. Hemen butonunuzun HTML kodunu göreceksiniz. Şimdi tek yapmanız gereken bu kodu sitenizin HTML’ine eklemek. Bir sonraki bölüm bu işlemi ayrıntılı olarak açıklar.
Herhangi Bir Web Sitesine Düğme Ekle
HTML tabanlı herhangi bir siteye düğme widget’ını eklemek çok basit. En popüler CMS platformları için süreçleri kapsayan bazı kılavuzlara göz atacağız ve özellikle panellerinin kendine özgü yönlerine odaklanacağız.
HTML Web Sitesine Düğme Ekle
HTML sitenizde belirli bir sayfaya buton widget’ını eklemek kolaydır. Oluşturduğunuz kodu Elfsight’ten gerekli noktaya yapıştırın.
- Web sitenizin arka ucuna erişin. Yönetim panelinizden HTML kodunu düzenleyebilmeniz, widget’in sorunsuz entegrasyonunu sağlar.
- Hesaplayıcı kodunu ekleyin. Web sitenizde widget’in görünmesini istediğiniz konumu seçin ve butonunuzun HTML kodunu ekleyin.
- Değişikliklerinizi kaydedin. Her şeyin beklendiği gibi çalışıp sayfada tutarlı göründüğünü kontrol edin.
WordPress Sitenize Düğme Ekle
Sağlanan kodu bir bloğa yapıştırarak kod gerektirmeyen widget’inizi hızla sitenize ekleyebilirsiniz. Böylece butonunuz tam olarak istediğiniz yerde görünecektir.
- WordPress hesabınıza giriş yapın. HTML kodunda değişiklik yapmak için yönetici panelinde çalışmanız gerekecek.
- Go to ‘Pages’ and choose the page you want. İş hedeflerinizi ve eklentiyi belirli bir alana eklemenin nedenlerini aklınızda bulundurun.
- Özel HTML Bloğu Ekle. Butonun gömüleceği web sitesinin gerekli bölümünde görünmesi gerekir.
- Bu bloğa üretilen kodu ekleyin. Sayfayı güncelleyin ve widget’in çalıştığını kontrol edin.
Wix Web Sitesine Düğme Ekle
Wix sitesi için gerekli sayfaya widget kodunu ve HTML düğmesini eklemek kolaydır. Elfsight’ten aldığınız özel kod, sayfaların istenen alanıyla sorunsuz bütünleşir.
- Wix web sitesi düzenleyicinize erişin. Wix hesabınıza giriş yapın ve düzenlemek istediğiniz siteyi seçin. Sitenizin kontrol paneline gidin ve web sitesi düzenleyiciyi açmak için ‘Siteyi Düzenle’ üzerine tıklayın.
- Widget için bir HTML bloğu ekleyin. Sol taraftaki menüdeki Artı simgesine tıklayın ve Gömme bölümüne gidin. ‘Özel Gömümler’ sekmesi altında ‘Bir Widget Göm’ seçeneğini kullanarak sayfanıza yeni bir HTML bloğu ekleyin.
- Buton widgetinin HTML kodunu ekleyin. Tıkla ‘Kodu Gir’ ve Buton widget editörü tarafından sağlanan kurulum kodunu yapıştırın. Kodu girdikten sonra sayfanıza widget’i gömmek için ‘Güncelle’ye basın.
- Widget’in boyutlarını ve konumunu ayarlayın. Sayfadaki yerleşimini ve boyutlarını doğru şekilde ayarlayın; uyumlu ve görsel olarak çekici görünmesi için yeniden boyutlandırıp konumlandırın.
- Mobil cihazlar için optimize et. Mobil düzenleyiciye geçin ve gerekli ayarlamaları yapın. Widget’in mobilde harika göründüğünden emin olun, ardından düzeni beğendiğinizde değişiklikleri yayınlayın.
Shopify Web Sitenize Düğme Ekle
Shopify sitenizin herhangi bir sayfasına HTML düğmesini hızlıca ekleyebilirsiniz. Sadece Elfsight’ten hazırlanmış kodu sitenizin gerekli alanına yapıştırmanız yeterli.
- Shopify yönetim paneline gidin. Web sitenizin ‘Çevrimiçi Mağaza’ alanını bulun.
- Açılır menüden ‘Özelleştir’ seçin. Sol taraftaki menüden ‘Bölüm Ekle’ yi seçin.
- Özel İçerik bölümünde, ‘Ekle’ye tıklayın. Önceden kurulmuş Shopify parçalarını kaldırmanız gerekecek.
- ’Özel HTML’ı Seçin. İçerik Ekle menüsünde bulacağınız seçenektir.
- HTML bölümünü bulun. Form kurulum kodunu ekleyebileceğiniz ve tüm değişiklikleri kaydedebileceğiniz yer budur.
Squarespace Web Sitesine Düğme Ekle
Herkes hızlıca özelleştirilebilir düğmeyi Squarespace sitesi üzerinde istediğiniz sayfaya gömebilir. Tek yapmanız gereken, Elfsight’ten üretilen kodu sayfadaki belirli bir bloğa yapıştırmaktır.
- Squarespace hesabınıza giriş yapın. Squarespace hesabınıza giriş yapın ve widget için sitenizi seçin. Sitenizin kontrol paneline gidin ve düzenlemek istediğiniz siteyi seçin.
- Web Sitesi bölümüne gidin. Form aracını eklemek istediğiniz sayfayı seçin. Ana menüden Web Sitesi bölümüne gidin ve istediğiniz sayfayı seçin.
- Düzenle’ye tıklayın ve ardından ‘Bölüm Ekle’ye basın. Seçili sayfada ‘Düzenle’ye tıklayın ve ardından widget’ın çalışmasını istediğiniz yerde ‘Bölüm Ekle’yi seçin. Bu, sayfanızda widget için yeni bir bölüm oluşturmanıza olanak tanır.
- Bir kod bloğu ekleyin. ‘Boş bir bölüm ekle’yi seçin, ardından ‘Blok Ekle’yi tıklayın ve listeden ‘Kod’ı seçin. Buraya Buton’un widget kodunuzu ekleyeceksiniz.
- Widget’in kurulum kodunu ekleyin. ‘Düzenle’ simgesine tıklayın, Buton widget kurulum kodunu yapıştırın ve bloğun genişliğini ayarlayın. Sayfanızda widget’in düzgün konumlandığını ve görsel olarak çekici göründüğünü garanti edin.
Webflow sitene Düğme Ekle
Webflow sayfalarına widget eklemek kolaydır; yalnızca düğmenizin ürettiği HTML kodunu ilettiğiniz yere bir Gömme öğesi eklemeniz yeterlidir.
- Webflow’da Başlayın. Webflow hesabınıza giriş yapın ve widget’ı gömmeyi planladığınız siteyi seçin.
- Gömme Widget’ı. Webflow düzenleyicisinde Artı simgesine tıklayın. Ardından sol menüden Göm öğesini sürükleyip bırakın ve düğmenin gösterileceği konumu seçin.
- Kodu ekleme. Görünen HTML Gömme Kod Editörü’ne formun kurulum kodunu yapıştırın. Ardından ‘Kaydet ve Kapat’ düğmesine tıklayın.
- Özelleştirme ve Yayınlama. Düğünüzün ayarlarını yapın, ardından ‘Yayınla’ düğmesine basın ve etkinleştirmek için alan adlarını seçin.
Elementor Web Sitesine Düğme Ekle
Elementor’a Buton widget’ını kolayca ekleyebilirsiniz. Widget kodunu yapıştıracağınız sayfada boş bir blok olması yeterlidir.
- WordPress Arka Ucundan Başlayın. WordPress sitenizin arka ucuna giriş yapın, ‘Sayfalar’ bölümüne gidin ve Buton Bileşeni eklemek için sayfayı seçin.
- Elementor düzenlemeye başlayın. Seçili sayfayı özelleştirmeye başlamak için ‘Elementor ile Düzenle’yi seçin.
- HTML elemanını ekle. HTML öğesini sayfanıza sürükle-bırak özelliğini kullanarak yerleştirin.
- Widget’in kodunu web sitesine ekleyin. Elfsight ile düğmenin HTML kodunu HTML Kod Kutusuna yapıştırın.
- Güncelle ve keyfini çıkarın. Değişikliklerinizi uygulamak için ‘Güncelle’ye tıklayın ve gömülü butonla sayfanızın nasıl dönüştüğünü görün.
HTML Kodu ile Buton Nasıl Oluşturulur
Üçüncü taraf araçlar kullanmadan HTML’de bir düğme nasıl oluşturulur inceleyin. Temel HTML bilgisine sahip olarak bu düğmenin bazı parametrelerini ayarlayabilir ve bu kodun ardından yer alan kısa yönergeye bakarak ihtiyacınız olan bağlantıyı ekleyebilirsiniz.
Nasıl Çalışır
- Düğme, yapısal olarak basit HTML ve temel stil için CSS kullanır.
- Düğmenin görünümünü .cta-button sınıfı kullanarak değiştirebilirsiniz (arka plan rengi, boyut, yazı tipi vb.).
- The onclick event triggers a redirect to the specified link. Users can replace ‘https://your-cta-link.com’ with their own URL (the link they want to direct visitors to).
Web Sitelerindeki Düğme Widget Örnekleri
Elfsight, sitenizin estetiğine uyacak şekilde özelleştirebileceğiniz geniş bir düğme şablonu yelpazesi sunar ve rakiplerinizi geride bırakır. Minimal bir stil, cesur ve canlı renkler ya da şık ve profesyonel bir tasarım tercih edin—markanızı en iyi yansıtan ve benzersiz özellikleri öne çıkaran her zaman bir seçenek vardır. Bir bakın:
Örnek 1: Şimdi Satın Al Düğmesi
‘Şimdi Satın Al‘ widget şablonu e-ticaret işletmeleri için mükemmel. Tek bir tıklama ile ziyaretçileri çevrimiçi mağazanıza yönlendiren cesur ve dikkat çekici bir tasarım ile bir CTA başlığı sunar. Bu şablon, aciliyet hissi yaratmaya yardımcı olur ve potansiyel müşterileri ürünlerinizi keşmetmeye ve satın almaya teşvik eder.
Örnek 2: Instagram’da Takip Et Düğmesi
Instagram’da Takip Et şablonu, Instagram kullanıcı adını içerir ve ziyaretçileri web sitenizden doğrudan hesabınızı takip etmeye davet eder. Bu şablon, takipçi sayınızı artırmanıza ve markanızın sosyal medya erişimini genişletmenize yardımcı olur.
Örnek 3: Facebook’ta Takip Düğmesi
‘Facebook’ta Takip Et’ şablonu ile web sitenizin ziyaretçileriyle dünyanın en büyük sosyal medya platformunda bağlantı kurabilirsiniz. Bu şablon, CTA mesajını öne çıkarır ve ziyaretçileri sayfanızı beğenmeye ve takip etmeye teşvik eder; böylece sadık bir topluluk oluşturarak markanızla etkileşimde kalmalarını sağlayabilirsiniz.
Örnek 4: Pinterest’te Takip Düğmesi
‘Pinterest’te Takip Et’ şablonu, görsel hikaye anlatımına ve ilham odaklı işletmelere harika bir uyum sağlar. Tanınabilir bir Pinterest yazı tipini kullanır ve web sitesi ziyaretçilerini panolarınızı keşfetmeye ve markanızı takip etmeye davet eder. Bu şablon hesabınıza trafik çekmenize yardımcı olur ve marka görünürlüğünü artırır.
Örnek 5: Bize E-posta Gönder Düğmesi
‘E-posta Gönder’ şablonu işletmenizle iletişime geçme sürecini kolaylaştırır. Sade bir düğme tasarımına sahiptir ve ziyaretçileri sitenizin sayfasından doğrudan bir e-posta yazmaya tıklamaya teşvik eder. Bu şablon, sorularınız veya talepleriniz için hızlı ve kullanışlı bir iletişim yolu sunarak kullanıcı deneyimini geliştirir.
Örnek 6: TikTok’ta Takip Et Düğmesi
TikTok popülaritesi artmaya devam ederken, işletmeler bu enerjik sosyal medya platformuna ulaşmak için ‘TikTok’ta Takip Et’ düğme şablonunu kullanabilir. Parlak pembe renkli bir marka kimliği öğesiyle bu şablon ziyaretçileri TikTok hesabınızı takip etmeye davet eder; böylece ilgi çekici video içerikleri paylaşabilir ve daha genç, yüksek etkileşimli bir kitleyle bağ kurabilirsiniz.
Örnek 7: WhatsApp Düğmesi ile Sohbet
‘WhatsApp ile Sohbet’ düğmesi şablonu ile gerçek zamanlı müşteri desteği ve sohbet sunabilirsiniz. Bu şablon yeşil renk şemasını ve WhatsApp mesajlaşma uygulamasını kullanarak sohbet başlatmaya teşvik eden CTA metnini içerir. Bu şablon, potansiyel müşterilerinize kişiselleştirilmiş yardım sunmak için doğrudan iletişimi kolaylaştırır.
Örnek 8: Twitter’da Takip Düğmesi
Twitter’da Takip Et şablonu, Twitter varlığınızı güçlendirmeye yardımcı olabilir. Ziyaretçilere doğrudan bir CTA mesajıyla Twitter hesabınızı takip etmeleri yönlendirilir. Takipçi sayısını artırır, marka bilinirliğini güçlendirir ve tweetler üzerinden etkileşimi teşvik eder.
Örnek 9: Skype ile Sohbet Düğmesi
‘Skype ile Sohbet’ Düğme Şablonu, metin veya video sohbeti tercih eden işletmeler için mükemmel bir seçenek. Web sitesi kullanıcılarını Skype üzerinden sohbet başlatmaya veya aramaya davet eden CTA metnini içerir. Bu, doğrudan iletişimi ve kişiselleştirilmiş etkileşimi sağlar; ayrıca müşteri deneyimini güçlendirir ve güven oluşturur.
Örnek 10: Bize Arayın Düğmesi
‘Bizi Arayın‘ şablonu, işletmenizle telefonla iletişim kurma sürecini basitleştirir. Bir telefon simgesi gösterir ve ziyaretçileri web siteniz üzerinden doğrudan işletmenizi aramaya teşvik eder. Bu, iletişim için kullanışlı ve anında bir yol sağlar; potansiyel müşterilerin bilgi edinmek veya netleşmek için iletişime geçmesini kolaylaştırır.
HTML kodsuz Düğme aracılığıyla, ziyaretçilerinizi belirli işlemlere yönlendiren görsel olarak çarpıcı çağrı düğmeleri oluşturabilirsiniz. E-ticaretten sosyal medya etkileşimine, iletişime ve daha fazlasına kadar her şablon, bağ kurma, dönüştürme ve kullanıcı deneyimini geliştirme konusunda benzersiz bir fırsat sunar. Amaçlarınızla uyumlu olanı seçin!
35’ten Fazla Düğme Şablonu Keşfedin
Web Sitesi Düğmesi Kullanımı İçin İpuçları
Web sitenizin düğmelerinden en iyi verimi almak için sadece sayfaya yerleştirmekle yetinmeyin. Tasarım, kelime seçimi ve konumlandırma gibi birkaç kilit unsur üzerinde odaklanarak onların etkisini önemli ölçüde artırabilir ve kullanıcı etkileşimini teşvik edebilirsiniz.
- 📌 Açık ve harekete geçirici metinler kullanın. Düğmenizdeki metin net ve kullanıcıya tam olarak ne yapması gerektiğini iletmelidir. ‘Hemen Başla,’ ‘Şimdi Kaydol,’ ya da ‘Daha Fazla Bilgi’ gibi ifadeler doğrudan ve harekete geçirici olduğu için etkilidir. ‘Buraya Tıkla’ gibi belirsiz ifadelerden kaçının.
- 📌 Zıt renklerle öne çıkarın. Düğmeniz sayfada görsel olarak öne çıkmalı ve kullanıcıların kolayca fark etmesini sağlamalı. Web sitenizin arka planıyla kontrast oluşturan renkler kullanın, aynı zamanda markanızın paletiyle uyumlu olsun. Metin tamamen okunabilir olmalı.
- 📌 Stratejik Konumlandırın. Düğmeler için konum çok önemli. Kullanıcının harekete geçme olasılığının en yüksek olduğu yerde konumlandırıldığından emin olun; ana bilgilerle yakınında olsun. Üst bölümde veya ayrıntılı bilgilerin ardından başka bir düğme ile takip etmeyi düşünün ki kullanıcılar harekete geçmeye hazır olduğunda ilgiyi yakalasın.
Sonuç olarak, düğmeler kullanıcı eylemlerini yönlendirmek ve web sitenizde dönüşümleri artırmak için güçlü bir araçtır. Bu ipuçlarını takip edin: net bir metin kullanın, düğmenizi öne çıkarın ve stratejik olarak konumlandırın.
Sonuç
Artık işletmenizin ihtiyaç duyduğu işlemleri gerçekleştirmek için sitenize işlevsel bir düğmeyi nasıl ekleyeceğinizi biliyorsunuz. Ürünlerinizin dikkatini çekin, bir inceleme isteyin ve sosyal medyanıza abone olmaları için onları davet edin. Düğme widget’ı basittir, ancak kullanım senaryoları sınırsızdır.
Düğmenin her türlü site oluşturucu veya CMS üzerinde çekici görüneceğinden ve kusursuz çalışacağından emin olabilirsiniz.
SSS
Düğme Widget’ı Ücretsiz mi?
Düğme widget’ını farklı çağrı eylemleri için kullanabilir miyim?
Bir web sitesinde Eylem Çağrısı Düğmesi Nedir?
HTML’de Düğmeyi Nasıl Ortalarsınız?
Web Sitenizi Geliştirmek İçin Ek Fikirler
- Markan sosyal medyada mı? Web sitenizde sosyal medya aktivitelerinizi tanıtmanıza yardımcı olacak bir widgetimiz var. Elfsight’in Social Feed widget’ını inceleyin ve çevrimiçi kitlenizi artırın.
- Sayılarla mı uğraşıyorsunuz? Elfsight’in Hesaplayıcı widget’ı ile deneyin. Çok sayıda hesaplama alanı, kullanışlı bir oluşturucu ve hesaplayıcıların otomatik üretilmesi için Yapay Zeka özelliği ile, teklifinizden elde edilecek faydayı ölçmek isteyen müşterilerinize mükemmel bir çözüm sunabilirsiniz.
- Daha fazla geri bildirim mi istiyorsunuz? Amazon, Facebook, Yelp ve 30’dan fazla diğer şirketin incelemelerini Tüm Yorumlar widget’ında gömülü olarak gösterin. Web sitenizi kullanarak kitlenizin müşteri incelemelerini herhangi bir platformda sergileyin.
Ayrıca Elfsight’in e-ticaret, sosyal medya faaliyetlerini ve web sitesi yönetimini kolaylaştırmak için geliştirdiği tüm widget’ları inceleyin.
Bir Sorunuz Var mı?
Bu kılavuzun işinize yaradığına inanıyoruz. Bize ulaşın web sitesi düğmesini gömme hakkında daha fazla bilgiye ihtiyacınız varsa veya herhangi bir yardıma ihtiyaç duyuyorsanız. Deneyiminizin sorunsuz ve başarılı geçmesi için buradayız. Elfsight, web sitenizin tüm ihtiyaçları için eksiksiz, kod gerektirmeyen bir çözüm sunmaya kendini adadı. Ayrıca fikirler ve uzmanlıkların bir araya geldiği canlı bir Topluluk olduğumuz için, yaratıcı önerilerinizi İstek Listesi‘nde paylaşmaktan çekinmeyin!
