Divi ile Yapışkan CTA'lar Nasıl Oluşturulur

Böylece Divi'yi muhteşem bir web sitesi oluşturmak için kullandınız, onu birinci sınıf içerikle doldurdunuz ve iyi arama motoru optimizasyonunu garanti etmek için tüm onay kutularını gözden geçirdiniz. Ancak bir süre sonra, dönüşümleriniz tam olarak beklediğiniz yerde değil. Şimdi kendinize “Yanlış bir şey mi yaptım?” Diye soruyor olabilirsiniz.

Henüz paniğe kapılıp sıfırlama düğmesine basmaya gerek yok. Bazen küçük değişikliklerin dönüşümlerinizde büyük etkisi olabilir ve ödül açısından yapabileceğiniz en iyi şeylerden biri de harekete geçirici mesajlarınızı optimize etmektir.

Bu makale boyunca, harekete geçirme çağrısını neyin iyi yaptığını tam olarak ele alacağız, çalışmalarının arkasındaki psikolojiden bazılarını size bazı harika örnekler göstereceğiz ve son olarak, Divi web sitenizde yapışkan bir CTA'yı nasıl uygulayacağınızı öğreteceğiz.

CTA 101

Harekete geçirme çağrılarının arkasında bütün bir bilim olduğunu söylemek abartı olmaz. Hemen hemen her yönü (kopya, renkler, boyut, genişlik vb.) tükenene kadar parçalanıp analiz edilebilir, ancak bazıları önemi ile öne çıkıyor.

Renk

Çoğu insan sarıyı iyimserlikle, kırmızıyı enerjiyle, maviyi güvenle, yeşili zenginlik ve rahatlamayla, turuncuyu saldırganlıkla, pembeyi kadınsı tarafla, siyahı güçle vb. ilişkilendirir. Bu yalnızca yüzeysel bir analizdir, ancak sattığınız hizmet veya ürün türüne bağlı olarak bazı belirli renkler diğerlerinden daha etkili olacaktır.

kopyala

Doğru kelimeler eşlik etmedikçe, renk tek başına ikna etmek için yeterli değildir. Araştırmaya göre, müşterilerin %52'sinin, ister yoldaki bir tabela isterse bir el ilanı olsun, basitçe istendiğinde bir mağazaya girme olasılığı daha yüksektir. Ancak sorun şu ki, kullanıcılar gittikleri her yerde sürekli reklam bombardımanına maruz kalmaya o kadar alışmışlar ki bu tür mesajları görmezden gelmekte oldukça başarılılar.

Bu gerçek göz önüne alındığında, CTA'lar söz konusu olduğunda metninizin güçlü ve özlü olması gerekir. Örneğin, aktif fiilleri kullanmak, müşteriyi cezbetmek için hiçbir şey yapmayan “Buraya tıklayın” gibi dolgu metinlerine tercih edilir. “Ücretsiz bir kopya için kaydolun!” kullanıcı, içeriğin dizgesiz bir görünüm için yeterince ilginç olduğunu düşünürse daha iyi sonuçlar alabilir.

Kurmak

CTA metninin yanı sıra, birikim, dönüşüm oranınızı da etkileyebilir. Örnek olarak satış hunisi için oluşturulmuş açılış sayfalarını ele alalım – özellikle müşterileri bir ürün veya hizmet satın almaya ikna etmek için yapılmışlardır ve genellikle benzer bir yapı izlerler: bir kişiyi örnek alarak bir sorun ortaya koyun ve ardından ürünlerinin nasıl olduğunu anlatmaya devam edin. diğer tüm seçeneklerin başarısız olduğu yerde onlara yardım etmeyi başardı, sonra sonunda size öğretilerini kendi sorunlarınıza uygulama fırsatı sunuyor (bu asla bir satış değildir, her zaman bir fırsattır ).

Bu nedenle, harika bir harekete geçirici mesaj, yalnızca doğru zamanda bir eylem önermenin, bir beklenti duygusu yaratmanın ve ardından, müşterilerinizi ilk bir seçim yapmaya ikna etmek için çekici bir tasarım ve doğru sözcükleri kullanmanın bir birleşimidir. İşlenmesi gereken çok şey var gibi görünüyor, ancak iyi bir CTA oluşturmanın yolu çok zorlu ve konuyu daha derinlemesine incelemek isteyenler için çok fazla kaynak var.

Ana eylem çağrısı için bir birikimden pek faydalanmayan Divi kullanılarak oluşturulmuş basit bir örneğe bakalım.

Tüm ana sayfa, zorlayıcı bir şekilde tasarlanmış harekete geçirici mesajlarla doludur, ancak ana sayfa çalıların etrafında pek yenilmez. “Sizi aktif, sağlıklı ve mutlu tutmayı seviyoruz. Randevu al.” kısa, özlü ve kararı size verirken aciliyet hissi veriyor.

Divi Eyleme Çağrı Modülü

Divi, hayatınızı kolaylaştırmak için yerleşik bir CTA modülü ile birlikte gelir. Bu, Divi oluşturucuyu kullanarak bir düğmeye tıklayarak CTA'ları uygulamanıza ve tüm modülleriyle aynı düzeyde özelleştirmenin keyfini çıkarmanıza olanak tanır.

Modül, renkler, metin yönü, özelleştirilebilir etiketler, kimlikler ve sınıflar, gelişmiş tasarım ayarları ve CSS aracılığıyla değişiklik ekleme seçeneği gibi hayal edebileceğiniz tüm seçenekleri içerir.

Modülün birçok seçeneği olsa da, bir sayfada gezinirken sabit kalacak bir harekete geçirici mesaj almak varsayılan olarak bunlardan biri değildir. Neyse ki Divi, alt tema kullanımı ve bazı basit CSS'lerin bir kombinasyonu aracılığıyla bazı gelişmiş ince ayarlarla oynamayı çok kolaylaştırıyor. Öyleyse kollarınızı sıvayın ve bazı kodlarla oynamaya hazır olun. (Acısız olacak, söz veriyoruz!)

Divi ile Yapışkan CTA Oluşturma

Sabit bir harekete geçirici mesaj, aşırı müdahaleci olmadığı veya web sitenizin tasarım akışını bozmadığı sürece, dönüşümleri artırmak için basit bir çözüm olabilir. İdeal olarak, yerleşime karışmasını istersiniz, ancak yine de müşterilere, hizmetlerinize istedikleri zaman katılabilecekleri konusunda potansiyel bir hatırlatma görevi görür.

Daha önce bahsettiğimiz gibi, bu CTA modülünde varsayılan bir seçenek değil, ama çok şükür Elegant Tweaks'tekiler bu özelliği uygulamak için basit bir yöntem buldular.

Her şeyden önce, header.php dosyanızı bir alt temaya kopyalamanız ve aşağıdaki kod satırlarını bulmanız gerekecek:

< body <? php body_class (); ?>>

< div id ="page-container">

Aşağıdaki kod parçacığında, adı açıklayıcı olan top-cta adında yeni bir benzersiz kimlik oluşturuyoruz. CTA'nın metnini değiştirmek istiyorsanız, yapıştırdıktan sonra gerekli kod satırlarını değiştirin.

 < div id ="top-cta"> < a href ="#"> This is an <span class="cta_gray"> example < /span > of a sticky < /a > < span class ="blurb_button"> < a class ="et_pb_promo_button cta" href="#"> CTA < /a > < /span > < /div >

Şimdi, ePanel'in altındaki Özel CSS alanını kullanarak dağıtabileceğiniz yepyeni yapışkan CTA'nızı özelleştirmek için biraz CSS'yi incelemeniz gerekecek.

Bu kodun çoğu zaten size tanıdık gelecektir ve CSS ile uğraşmaya alışkın olmasanız bile gezinmesi oldukça kolaydır. Adım adım üzerinden geçelim.

İlk bölüm, arka plan, metin hizalama, doldurma, metni büyük harfe zorlama, çubuğun tarayıcının tüm genişliğini kaplaması gerektiğini belirtme ve z-endeksi (ayarlanmış) dahil olmak üzere CTA çubuğunun genel tasarımını kapsar. diğerlerinin yerine geçmek için yüksek değer).

Birbirini izleyen her bölüm, daha önce header.php'de ana hatlarıyla belirttiğimiz sınıflarla ilgilidir ve kalbinizin içeriğine göre ayarlayabileceğiniz küçük stilistik ayrıntıları içerir.

Son olarak, ekranın yarısını kaplamaması ve tüm ziyaretçilerinizi korkutmaması için CTA çubuğunu daha küçük çözünürlükler için yararlı bir şekilde yeniden boyutlandıran bazı medya sorgularımız var (bize güvenin, bu kısmı atlamak istemezsiniz).

#top-cta {

background-color: #Insert your preferred color here;

background-color: rgba(57, 178, 235, .9);

text-align: center;

padding: 5px 0 5px;

text-transform: uppercase;

position: fixed;

top: 0;

width: 100%;

z-index: 9997;

}

#top-cta a {

color: #fff;

font-size: 28px;

font-weight: 700;

display: inline-block;

}

#top-cta a span.cta_gray {

color: #dfdfdf;

text-shadow: 1px 1px 1px #5a5a5a;

}

#top-cta .blurb_button {

padding-left: 20px;

}

#top-cta a.cta {

background-color: #ff9900;

}

#top-cta a.cta:hover {

background-color:#FFAD33;

}

/*-------------------[768px]------------------*/

@media only screen and ( max-width: 980px ) {

#top-cta {

padding: 10px 0 10px;

}

#top-cta a {

font-size: 20px;

}

}

/*-------------------[480px]------------------*/

@media only screen and ( max-width: 767px ) {

#top-cta {

padding: 7px 0 7px;

}

#top-cta a {

font-size: 18px;

}

#top-cta .et_pb_promo_button {

padding: 4px 15px;

}

}

/*-------------------[320px]------------------*/

@media only screen and ( max-width: 479px ) {

#top-cta {

padding: 5px 0 5px;

line-height: 1.2em;

}

#top-cta a {

font-size: 16px;

}

#top-cta .et_pb_promo_button {

padding: 2px 10px;

}

}

Bölünmüş Test Zamanı!

Önceki bölümümüzde fark etmiş olabileceğiniz gibi, bu kadar basit bir çubukla bile, onu gerçekten kendinize ait kılmak için bir ton özelleştirme seçeneği var. Tabii ki, sadece güzel bir stil seçebilir, CTA'nızı yukarı kaldırabilir ve parmaklarınızı çaprazlayabilirsiniz ya da işleri bir adım daha ileri götürebiliriz.

Ziyaretçilerin bazı tasarımlara diğerlerinden daha iyi yanıt vereceği basit bir gerçektir ve en son trendlerin hepsini takip edebilmenize rağmen, her zaman optimizasyon için biraz yer olacaktır. Hangi değişikliklerin uygulanacağını seçmenin akıllı yolu, kendinizi yönlendirmek için analitiği kullanmaktır.

Örneğin, sabit CTA'nız için iki tasarımınız varsa, her birinin belirli bir süre boyunca metriklerinizi nasıl etkilediğini test etmeye devam etmeli ve ardından net kazanana bağlı kalmalısınız. Bu, belirli izleyicileriniz için neyin işe yaradığına dair bilgi birikimi oluşturmanıza ve içeriğinizi gerçekten mümkün olduğunca uyarlamanıza olanak tanır.

Çok çeşitli seçenekleriniz olduğunda, bölünmüş testler biraz daha karmaşık hale gelir. Aynı testlere çılgınca farklı tasarımlar eklerseniz, çarpık sonuçlar elde etmekle yükümlüsünüz. Bu nedenle, bunu yapmak için zamanınız ve sabrınız varsa, ölçümlerinizden memnun kalana kadar önceki testlerin sonuçlarını (tasarımlarınızı geliştirmek için her bir bilgi parçasını kullanarak) geliştirmeye çalışmalısınız.

Yine de korkmayın – bu bizim seslendirdiğimizden çok daha kolay. Testleriniz istediğiniz kadar uzun veya kısa olabilir (bilgili bir karara varmak için yeterli trafik aldığınız sürece) ve ölçümleri okumak zor değildir. Daha fazla tıklama alıyor musunuz? Hemen çıkma oranınız düşüyor mu? En önemlisi, daha fazla satış alıyor musunuz? Eğer öyleyse, arkanıza yaslanın ve keyfini çıkarın, hak ettiniz.

Çözüm

Dünyadaki tüm ziyaretçilere veya en popüler ürünlere sahip olabilirsiniz, ancak bazen insanlar hizmetlerinize kaydolmaya veya cüzdanlarını açmaya karar vermeden önce biraz dürtüye ihtiyaç duyarlar. Bu dürtme, etkili bir harekete geçirici mesaj kadar basit olabilir.

Divi kullanılarak oluşturulmuş harika CTA'lara ilişkin örneklerimizden ilham alın, kendi sabit harekete geçirici mesajlarınızı oluşturmak için yukarıda belirtilen adımları izleyin ve dönüşümlerinizi optimize etmek için bölünmüş testi kullanmayı unutmayın.

Harekete geçirici mesajları kullanarak herhangi bir başarı elde ettiniz mi? Aşağıdaki yorumlar bölümünde deneyimlerinizi bizimle paylaşın!

Bplanet / Shutterstock.com'dan makale küçük resmi