WordPress için daha iyi bir düğme ve CTA tasarlama kılavuzu
Nispeten küçük bir gayrimenkul doldurma konusunda hareket eden düğmeler ve davetiyeler, ancak bunlar herhangi bir web sitesinin en önemli tasarım öğelerinden bazılarıdır. Onların önemi göz önüne alındığında, bir düğme almak ve doğru hareket etmeye davet etmek büyük bir sorundur. Ancak, düğmeyi tasarlamak karmaşık olabilir. Düğmeler, renkler, simgeler, şekiller, yerleşimler ve metin tasarlarken dikkate alınması gereken birçok tasarım faktörü vardır – ve davet düğmeleri doğru yapmak için daha da önemli hareket eder. Bu yazıda, WordPress siteniz için düğmeler tasarlamanın temellerini tartışacağız. Ayrıca, düğmenizin harekete geçme davetinin bir parçası olarak kullanılacağı zaman dikkate alınması gereken faktörleri de dikkate alacağız. Son olarak, size bir düğme oluşturmak ve WordPress ile kodu nasıl kullanacağınızı göstermek için kullanabileceğiniz bir kod vereceğiz.
Etkili bir web sitesi düğmesi tasarlamak için üç ilke temel bilgilerle başlayalım. Etkili bir düğme yapmak istiyorsanız, en iyi uygulamalardan bazılarını takip etmelisiniz. Bu en iyi uygulama sağduyu gibi görünebilir ve çünkü öyle. Ancak, önceki düğme tasarımı hakkında hiç düşünmediyseniz, bu ilkelerin bazılarını ihlal ettiğinizi görebilirsiniz. İlke #1: Düğme, evet, düğme gibi görünmelidir! Web sitesi tasarımı amaçlandığı gibi işlev görür, düğmeyi seçmek kolay olmalıdır. Analitik ürünleri için Google’ın bunu yön sayfasında nasıl yaptığını görelim.
Yuvarlak simge düğmesi sayfada harekete geçin.
“Daha fazla bilgi öğrenin” düğmesi mavidir ve bir ok (ve bazen birkaç metin) içerir.
Davet düğmesi bir kare ve yeşil şeklinde hareket eder. Siteniz için bir düğme tasarladığınızda, farklı bir düğme tasarımının bu tasarımı uygulamada farklı ve tutarlı bir amaca sahip olduğu bir sistem geliştirin. Davet düğmesinin nasıl öne çıkması, Web sitenizdeki diğer düğmelerden biraz farklı hareket etme davetinin (CTA) öğesinde yer alan düğmenin dışında. Bunun nedeni, CTA düğmesinin sadece işlevsel bir kullanıcı arayüzü öğesi olarak işlev görmek yerine belirli eylemleri teşvik etmek için tasarlanması gerektiğidir. CTA düğmesini mümkün olduğunca etkili bir şekilde yapmak için bu kılavuzu unutmayın:
Arka plan rengi ile çok kontrastlı bir renk kullanın ve sitenizdeki diğer UI türü düğmelerinden öne çıkın.
Inbound.org’daki CTA düğmesi için kalın renk kullanılır
CTA düğmesini görülmesini kolaylaştırın ve bulundurun ve CTA düğmesinin etrafında çok fazla boş alan bırakarak. KissMetrics, CTA düğmesini cömertçe ayarlayarak öne çıkarır.
Özellikle sınırlı bir zaman teklifi yaparsanız, CTA düğmeniz için bir kopya yazarken acil bir dil kullanın. Baron Fig gibi E-Niaga siteleri genellikle aciliyet iletmek için “şimdi” kelimesini kullanır.
Kodunuzla bir düğme oluşturma Her zaman bir düğme oluşturmak için bir eklenti kullanabilirsiniz, ancak kendiniz kodlayarak, düğmenizin görünümü ve davranışı üzerinde tam kontrole sahip olursunuz. Bu nedenle, temel düğme tasarımı ilkeleri dikkate alındığında, kodla üç genel düğme tasarımını nasıl oluşturabileceğinize bakalım: dikdörtgen metin düğmesi, daire simgesi düğmesi ve metin ve simgeleri birleştiren düğmeler. Kodlu dikdörtgen bir metin düğmesi nasıl yapılır
Metin düğmesinin yapılması çok kolaydır ve kendi kodunuzu yazarsanız, istediğiniz gibi görünecek şekilde ayarlayabilirsiniz. Basit bir metin düğmesi için HTML İşaretlemesi ile başlayalım. JPEN365/F06ADDDE12675935C813BA5AEF29BC2#Dosya-Text-Button-HTML’nin özünü belirtin
To link this button to the page, add the URL to the anchor element by removing the fence sign and replacing it with your URL, like this: href = “http://example.com/page-tos-link-to-to “. Düğme metni, işaretleme düğmesindeki şimdi satın almayı seçtiğiniz bir kopya ile değiştirerek değiştirilebilir. Altında, açıklık daha küçük ayrıntılı metin içerir. Ayrıntılı metin görüntülemek istemiyorsanız aralığın dışındaki tüm metni silin.
Ardından, düğmeyi düzenlemek için bazı CSS eklememiz gerekiyor:JPEN365/F06ADDDE12675935C813BA5AEF29BC2#Dosya-Text-Button-CSS’nin özünü içerir
Her düğmenin görünümünü değiştirmek için, CSS’yi yorumların gösterdiği noktalarda düzenleyin. Yukarıdaki CSS, yukarıdaki resimde gösterildiği gibi gri sınır ve yuvarlak açılı yeşil bir düğme yapacaktır. Kodlu bir daire simgesi düğmesi nasıl yapılır
Bu düğme, Google Analytics’teki ICON düğmesinden esinlenmiştir. Neyse ki, yapmak oldukça kolay. İlk olarak, web sitemize simge yazı tipleri eklememiz gerekiyor. Bunu birkaç farklı şekilde yapabiliriz. Sıradan bir HTML belgesinde bir düğme yaparsanız, harika yazı tipini içe aktarmak için bu bağlantıyı kafa belgesi kafasına koymanız yeterlidir.
JPEN365/F06ADDDE126759535C813BA5AEF29BC2#File-Font-Awesome-CDN-HTML’nin özünü içerir
Öte yandan, doğrudan WordPress’e bir düğme eklerseniz ve temanız harika yazı tipi simgesini içermezse, CDN harika yazı tipi enqueue, ücretsiz WordPress eklentisini yükleyerek sıraya girebilirsiniz. Şimdi, simge düğmelerimiz için kullanacağımız işaretlemeyi yazabiliriz. Yukarıdaki resimde dört simge yapmak için şu kodu kullanacağız: JPEN365/F06ADDDE126759535C813BA5AEF29BC2#Dosya-icon-Buttons-html FA FA-ANCE-sol sınıfı, simgeler içeren ilk I öğesine uygulanır. Simge harika bir yazı tipi ile yüklenir ve harika yazı tipi web sitesinde tam bir simgeler listesini görebilirsiniz.
Bu kod, harika yazı tipi simgelerinden birini birleştiren düğmeler üretmek için kullanılabilir. Örneğin, bir Facebook simgesi oluşturmak için aşağıdaki kodu kullanacaksınız:
JPEN365/F06ADDDE12675935C813BA5AEF29BC2#File-Facebook-icon-HTML’nin özünü içerir
Son olarak, işaretlememizi bir düğmeye dönüştürmek için birkaç CSS uyguladık:
JPEN365/F06ADDDE126759535C813BA5AEF29BC2#File-icon-Button-CSS’nin özünü içerir
Bu kodu kendi sitenizde kullanmak istiyorsanız, yukarıdaki CSS hakkındaki yorumlar düğme ekranınızı mükemmelleştirmenize yardımcı olacaktır. Simge hizalamasını bir simgeden bir sonraki simgeye değiştirmek isteyebileceğinizi unutmayın. Bunu yapmak için, HTML işaretlemesinde gösterildiği gibi simgeye uygun bir sınıf eklemeniz ve CSS’nin son kısmını kullanarak simgeye uygulanan yatakları ayarlamanız gerekir.
Simgeyi odaklamak için, hareketle başlayan herhangi bir sınıf eklemeyin. Metin ve simge ile bir kutu düğmesi nasıl yapılır
Simge ve metin düğmesinden zaten var olan CSS ile, metin ve simgeleri birleştiren düğmeyi kolay olacak şekilde yapın. Tek yapmamız gereken metin düğmemizin işaretleme simgesini eklemek, JPEN365/f06addde12675955c813ba5aef29bc2#file-text-icon-button-html
Gördüğünüz gibi, yeni bir simge kullandık ve simge ve yakındaki metin arasında biraz yer açmak için Simge düğmesi stilinden, hareket solundan yeniden kullandık. WordPress’e düğmeler ekleme WordPress web sitesine düğmeler eklemek için yapılması gereken iki adım vardır. İlk olarak, CSS yüklemeniz gerekir. İkincisi, düğmenin görünmesini istediğiniz gönderiye veya sayfaya işaretleme eklersiniz. Web sitenize CSS eklemek için birkaç seçeneğiniz var.
Çocuk temasını kullanabilir ve çocukların tema stiline CSS ekleyebilirsiniz.
Şimdi WordPress 4.7 başlatıldı, WordPress ayarının ek CSS bölümüne CSS ekleyebilirsiniz. Özel bir CSS eklentisi kullanabilirsiniz.
Sonuç WordPress siteniz için kodlama düğmesi oldukça basittir ve UI öğelerinin etkinliğini ve harekete geçmeye davet etmek için çeşitli renkleri, düğmelerin, simgelerin ve tasarımların kopyalarını deneme fırsatı verir.
Etkili bir düğme yapmak ve harekete geçmeye davet etmek için hangi ipuçları var? Bilgeliğinizi ve deneyiminizi aşağıdaki yorumlar bölümünde paylaşın!
Etiket:
top
Harekete geçme çağrısı
UI
