Harekete geçirici mesaj, birçok şekil ve form alabilen ve birçok işlevi yerine getirebilen bir web sitesi özelliğidir. Ve çoğu zaman olduğu gibi, net kurallar yoktur, fakat çözümler belirli düzenliliklere eğilimlidir. WordPress web sitenize harekete geçirici mesaj eklemek yeterince kolaydır ve size bunu nasıl yapacağınızı göstereceğiz.
Fakat kendimizi aşmayalım – harekete geçirici mesajın (veya CTA’nın) gerçekte ne olduğunu tartışmak için biraz zaman ayıralım. Tasarım söz konusu olduğunda işinizi bildiğinizden eminseniz, doğruca somunlar ve civatalar bölümüne gitmekten çekinmeyin.
Tartışacağımız şey bu:
-
Harekete Geçirici Mesaj nedir?
-
Harekete Geçirici Mesajı İyi Bir Düğme Yapan Nedir?
-
Elementor İçin Qi Eklentilerini Kullanarak Harekete Geçirici Mesaj Nasıl Eklenir?
Harekete Geçirici Mesaj nedir?
İpucu adında: CTA, kullanıcıyı harekete geçmeye teşvik etmek amacıyla tanıtılan herhangi bir tasarım öğesidir. Öğenin kendisi genellikle bir düğmedir, fakat birçok farklı biçimde olabilir. Benzer şekilde, kullanıcının yapmasını istediğiniz eylem, belirli bir sayfayı ziyaret etmekten, bülteninize abone olmaya ve sizden bir ürün veya hizmet satın almaya kadar her şey olabilir.
Harekete geçirici mesajın genellikle bir dönüştürme aracı olarak görülmesinin nedeni budur, fakat bununla sınırlı olması gerekmez – ana sayfanızın ziyaretçilerini düzenlediğiniz bir etkinliğin canlı akışına katılmaya teşvik etmek veya etkinliklerinizi okumak için kullanabilirsiniz. Örneğin SSS veya herhangi bir Önce Bunu Oku içeriği.
Harekete Geçirici Mesajı İyi Bir Düğme Yapan Nedir?
Diğer birçok web sitesi öğesinde olduğu gibi, bir CTA tasarlama hakkında söylenecek çok şey var. Aslında, bir CTA düğmesi tasarlamanın ayrıntılarına girmek istiyorsanız, en iyi uygulamalarla ilgili ayrıntılı bir makalemiz var. Size burada kısa versiyonu vereceğiz.
Metin açısından, özellikle onları paralarından vazgeçmeleri için cezbetmeye çalışıyorsanız ve aynı zamanda kullanıcının gerçekleştirmesi beklenen eylemi net bir şekilde iletmeye çalışıyorsanız, ziyaretçinin ilgisini gerçekten çekmeniz gerekir: Buradan Daha Fazlasını Okuyun veya Şuraya Abone Olun: Daha Harika İçerik, makul ve net seçimler sağlar. Mümkünse, Sadece Bugün veya Şimdi Tıklayın ve %50 Tasarruf Edin veya benzeri bir aciliyet duygusu aşılayarak işleri renklendirmeye çalışmalısınız.
Görünüm söz konusu olduğunda, harekete geçirici mesaj düğmesini web sitenizin ortamında öne çıkarken aynı zamanda onunla çatışmayacak şekilde adımlar atmalısınız. Şekil açısından, genel kanı, dikdörtgenlerin bir denge hissi uyandırdığı, renk söz konusu olduğunda ise tamamlayıcı renklerin göze hoş gelirken yeterli kontrast sağlama eğiliminde olduğu yönündedir. Akıllıca kullanıldığında, üzerine gelindiğinde animasyon, istenirse daha fazla görsel çekicilik sağlayabilir.
Son olarak konumlandırma için kesin kurallar olmasa da, bir CTA için en iyi yer, kullanıcının kararını vermek için yeterli bağlama sahip olduğu nokta gibi görünüyor. Bu durum sayfanın üst kısmının bunun için en iyi yer olmadığı anlamına gelir – web sitenizin içeriğinden iyi bir şekilde yararlanmanız gerekir.
Bu durum tasarım ilkeleri söz konusu olduğunda bunu yapar. Fakat bunları en iyi nasıl uygulayabilirsiniz?
Elementor İçin Qi Eklentilerini Kullanarak Harekete Geçirici Mesaj Nasıl Eklenir?
Elementor, popülaritesi artan ücretsiz bir sayfa oluşturucudur ve bunun iyi bir nedeni vardır: Bu ön uç oluşturucu, basit, sezgisel, sürükle ve bırak arayüzü, bir sürü yararlı ve çekici pencere öğesi ve zengin özelliklere sahip, çok yönlü ücretsiz bir sayfa oluşturucuya sahiptir. sürüm. Elementor’un zaten etkileyici olan işlevsellik yelpazesini genişletmek ve genişletmek için, Qode’da Elementor için profesyonelce tasarlanmış 60 adet yepyeni pencere öğesi paketi geliştirdik: Elementor İçin Qi Eklentileri.
Şık ve etkileyici WordPress web siteleri oluşturmaya başlamak için yapmanız gereken tek şey, Elementor’un en son sürümünü yüklemek (ücretsiz sürüm işinizi görecektir) ve ardından tescilli Qi Addons For Elementor eklentimizi yüklemektir. Tamamen bedava.
Eklenti, Infographics ve tipografiden SEO ve e-ticarete kadar çeşitli amaçlar için bir Elementor widget koleksiyonu sunar. Bu makalede odaklanacağımız widget, şaşırtıcı bir şekilde Harekete Geçirici Mesaj widget’ıdır. Eklentimizi kullanarak WordPress’te bir CTA ayarlamak kolaydır ve aşağıdaki videoda görebileceğiniz gibi neredeyse hiç zaman almaz:
Yine de herkes video eğitimlerini sevmez, bu yüzden bu adım adım kılavuzu metin biçiminde de sunuyoruz, o yüzden başlayalım.
Halihazırda Elementor kullanıyorsanız, yapmanız gereken tek şey Qi Addons For Elementor’u kurmak. Değilse, Elementor’u da yüklemeniz gerekir. Elementor için Qi Eklentileri, hiç de şaşırtıcı olmayan bir şekilde, Elementor’un çalışmasını gerektirir.
Elementor için en son Elementor ve Qi Eklentilerini yükledikten sonra, CTA’nızı eklemek istediğiniz sayfayı veya gönderiyi bulun veya yeni bir tane oluşturun. Bunu bir gönderinin parçası olarak nasıl kullanacağınızı size göstereceğiz, fakat onu bir sayfaya eklemek hemen hemen aynı şekilde çalışır.
Bir gönderi ve rastgele oluşturulmuş bir metinle başlayacağız. Sol tarafta Harekete Geçirici Mesaj öğesini arayın. Bir Qi Addons öğesini macenta rengiyle ayırt edebilirsiniz. CTA öğenizin gitmesini istediğiniz yere sürükleyin.
Genel sekmesinde, Genel bölümü varsayılan olarak açılacaktır. Burada harekete geçirici mesajınızın metin içeriği için Başlık ve Metin alanlarını bulacaksınız. Bunları varsayılan yer tutucu değerlerinden değiştirdik.
Aşağıdaki Düğme açılır menüsü, düğmenin davranışını yönetir. Varsayılan olarak düğme, öğenin sağ tarafındadır. Fakat belirli ekran boyutlarında bu mükemmel bir konum olmayabilir ve düğmenin sağ yerine metnin altında görüneceği ekran genişliğini tanımlayarak bunu tam burada ayarlayabilirsiniz. 1024 pikselin altında seçtik.
Son olarak CTA bağlantısını yalnızca düğme yerine tüm bölüme uygulamak için Bağlantı Yerleşimini Etkinleştir menüsünü kullanabilirsiniz. Evet olarak ayarladık.
Sırada, Düğme ayarları bölümümüz var. Düzen menüsünün üç seçeneği vardır: varsayılan Dolgulu, düğmenin tam renkli arka planı anlamına gelir, Anahatlı, yalnızca ana hatları görünür kılar ve Metinsel, düğmeyi tamamen gizler ve yalnızca metni bırakır. Dolu olarak bırakacağız. Düzen, Dolu olarak ayarlandığında, ayrıca Tür ayarlarını da kullanabilirsiniz. Varsayılan, Standart’tır, fakat bir simge seçene kadar pek bir şey yapmayan İç Kenarlıklı veya Simge Kutulu bir düğmeniz olabilir. Standard’da bıraktık.
Etkinleştir Düğme Metni Altı Çizili, metnin altını çizecek şekilde ayarlanabilir. Metnin altının çizilmesini istemediğimiz için olduğu gibi bırakacağız. Düğme Boyutu kontrolü oldukça açıklayıcıdır. Düğme Metni, varsayılan olarak Burayı Tıklayın olarak ayarlanmıştır, fakat onu biraz daha bilgilendirici Daha Fazla Görüntüle olarak değiştireceğiz.
Düğme Bağlantısı, harekete geçirici mesajınıza göre hareket ettikten sonra kullanıcınızın yönlendirilmesini istediğiniz yerdir. Bu sadece bir gösteri olduğundan, yer tutucu olarak bir hashtag kullanacağız. Bağlantı alanının yanındaki dişli simgesine tıklayarak, bazı bağlantı seçeneklerini açacağız. Yaptığımız gibi Yeni pencerede aç’ı işaretlemek, bağlantıyı yeni bir pencerede açılacak şekilde ayarlayacaktır. Diğer seçenekler, nofollow özniteliğini ve gerektiğinde diğer öznitelikleri eklemeyi içerir.
Ayarların Düğme Simgesi bölümü, bir .svg dosyası yükleyerek veya simge kitaplığınızdan birini kullanarak bir Simge ekleyebileceğiniz yerdir. Artı işaretine tıklayıp mevcut setten seçerek ve ardından Ekle’ye tıklayarak kitaplığımızdan bir açı simgesi kullanmayı seçtik.
Simge Konumunu da mevcut olan ancak mermiler için daha uygun olan sol yerine varsayılan Sağda bıraktık.
Demek bir CTA yerleştirdiniz. Şimdi onu güzelleştirmenin ve web sitenizin tasarımına sığdırmanın zamanı geldi.
Stil sekmesi, harekete geçirici mesajınız için stil seçeneklerini bulabileceğiniz yerdir. En temel stil seçenekleri kendi kendini açıklıyor. Başlık Etiketimizi H3, başlık rengimizi siyah (onaltılık kod #000000) ve arka planımızı koyu gri (#1e1e1e) olarak ayarlayacağız. Tipografi ayarlarınızı da (yazı tipi, ağırlık, boşluk ve diğer biçimlendirme seçenekleri) değiştirebilirsiniz. Sahip olduklarımızdan memnunuz, bu yüzden onları oldukları gibi bırakacağız.
Burası ayrıca CTA’nız için bir arka plan seçebileceğiniz yerdir. Boya fırçasına tıklamak, klasik bir renkli arka plan için ayarları açarken, yanındaki seçenek bir renk gradyanlı arka plan oluşturmanıza olanak tanır. Basit bir renkli arka planla gideceğiz ve onu beyaz yapacağız (#ffffff), fakat stilinize uyan rengi seçebilirsiniz. Widget ayrıca bir Görüntü arka planı ayarlamanıza olanak tanır.
CTA’nız için bir Kenarlık Türü de seçebilirsiniz (varsayılan, Yok’tur – kenarlık yoktur). Birkaç seçenek var, fakat sağlam bir sınır için gittik. Yalnızca bir piksel kalınlığında olmasını istiyoruz, bu da aşağıdaki Genişlik alanına girdiğimiz değerdir. Genişlik alanı varsayılan olarak bağlantılıdır (her tarafta aynıdır). Sağ taraftaki bağlantı simgesine tıklayarak değerlerin bağlantısını kaldırabilirsiniz. Bordür rengi için açık gri (#d9d9d9) kullandık.
Boşluk Stili bölümü, harekete geçirici mesaj öğenizin dolgusu ve kenar boşlukları için kontroller sağlar. Tutucu Dolgu, kutunun kenarlarından içeriğine olan mesafedir. Tam istediğimiz gibi ince ayar yapmadan önce dolgu değerlerinin bağlantısını kaldıracağız: üst 72, sağ 74, alt 78 ve sol 74 piksel. Text Margin Top, metin ve başlık arasındaki mesafeyi kontrol eder. 17 piksel olarak beğendik. Sağa İçerik Dolgusu, metin ile düğme arasındaki dolgudur. Metnimize rahat bir 9 piksel verdik. Son olarak Button Margin kontrolleri, düğmenin çevredeki öğelerden uzaklığını yönetir. Onları oldukları gibi bırakacağız.
Her şeyi piksel cinsinden yaptık, fakat yüzdeleri veya emleri de kullanabilirsiniz.
Stil sekmesinde, Düğme Stili bölümünü buluyoruz. İlk seçenek Tipografi seçeneği ama biz buton metnimizden memnun kaldık o yüzden olduğu gibi bırakacağız. Sırada Normal/Hover geçişi var. Geçiş, varsayılan olarak Normal olarak ayarlanmıştır; bu, düğmeyi normalde göründüğü gibi yapılandırdığımız anlamına gelir. Hover olarak ayarladığımızda, düğmenin üzerine gelme davranışını ayarlamış olacağız.
Düğmeyi gerçekten öne çıkarmak için, Metin Rengi kontrolünü beyaz (#ffffff) ve Arka Plan Rengini parlak bir mandalina (#fc8d70) olarak ayarlayacağız. Farklı bir Kenarlık Rengi de seçebilirsiniz, fakat düğmenin iki tonlu görünümünü seviyoruz. Sırada, kenarlığınızı daha da ince ayar yapmak için Kenarlık Genişliği ve Kenarlık Yarıçapı denetimlerine sahipsiniz, fakat bunları kenarlıksız düğmemiz için kullanmayacağız. Son olarak düğmenin Dolgusu, metinden düğmenin kenarlarına olan mesafeyi yönetir. Önce değerlerin bağlantısını kaldıracağız ve kendi top 14, sağ 40 alt 13 ve sol 40 pikselimizi gireceğiz.
Geçişi Hover olarak değiştirerek, düğmemizin üzerine gelme davranışı için aynı seçenekleri ayarlayabileceğimizi görebiliriz. Bir kullanıcı faresiyle düğmenin üzerine geldiğinde metnin, arka planın veya kenarlığın rengini değiştirecek şekilde ayarlayabilirsiniz, fakat bu ayarları kullanmayacağız. Ayrıca Fareyle üzerine gelindiğinde sekmesi için Dolgu ayarlarının benimsendiğini de görebilirsiniz.
Düğme Simge Stili ayrıca Normal/Hover geçişine sahiptir. Simge Boyutunu ve Simge Rengini de değiştirebilirsiniz, fakat varsayılanlar bize uygundur. Kenar boşluklarını biraz değiştireceğiz: önce değerlerin bağlantısını kaldırın ve ardından üst için 2 ve sol için 10 girin.
İşin Hover tarafına geçtiğinizde, Simge Rengi kontrolünün Simgeyi Taşı menüsüyle değiştirildiğini görebilirsiniz. Burada fareyle üzerine gelindiğinde animasyonu seçebilirsiniz. Simgeyi biraz sağa hareket ettiren varsayılan Yatay Kısa ayarını seviyoruz, fakat başka seçenekler de var (Yatay, Dikey, Çapraz) veya animasyondan tamamen kaçınabilirsiniz. Ziyaretçinin dikkatini çekmek için biraz ayrık animasyondan hoşlanırız.
Stil sekmesinin son iki bölümü, Düğme İç Kenarlık Stili ve Düğme Altı Çizgi Stili için kontrollerdir. İç kenarlık veya alt çizgi kullanmadığımız için düğmemize herhangi bir etkisi olmayacaktır. Normal ve Hover davranışlarına da sahip olduklarını söyleyeceğiz.
Qi Addons For Elementor’u kullanarak harekete geçirici mesajı bu şekilde oluşturabilirsiniz – kapsamlı bir…