Divi ile yapışkan bir CTA nasıl yapılır
Bu nedenle, güzel bir web sitesi oluşturmak, en iyi içerikle doldurmak ve iyi arama motoru optimizasyonu sağlamak için tüm onay kutularını kontrol etmek için divi kullanırsınız. Ancak bir süre sonra dönüşümünüz beklediğiniz gibi eşleşmez. Şimdi kendinize “Yanlış bir şey mi yaptım?” Paniklemeye ve sıfırlama düğmesine basmaya gerek yok. Bazen küçük değişikliklerin dönüşümünüz üzerinde büyük bir etkisi olabilir ve takdir açısından yapabileceğiniz en iyi şeylerden biri oyunculuk davetinizi optimize etmektir.
Bu makale sırasında davetiyeyi iyi kılan şeyleri tam olarak tartışacağız, çalışma biçimlerinin arkasındaki psikolojilerin bir kısmı, bazı iyi örnekler gösterecek ve son olarak size Divi web sitenize CTA yapışkanlığını nasıl uygulayacağınızı öğreteceğiz. CTA 101, harekete geçme davetinin arkasındaki tüm bilgi olduğunu söylemek aşırı değildir. Hemen hemen her yön (kopya, renk, boyut, genişlik, vb.) Yıkana kadar parçalanabilir ve analiz edilebilir, ancak bazıları ilgi alanları nedeniyle öne çıkabilir. Çoğu insanın renkleri sarı ile iyimserlik, enerji ile kırmızı, güvenle mavi, servet ve gevşeme ile yeşil, saldırganlık ile turuncu, kadınsı ile pembe, güçle siyah vb. Bu sadece sığ bir analizdir, ancak sattığınız hizmet veya ürün türüne bağlıdır, belirli renkler diğerlerinden daha etkili olacaktır.
Doğru kelimelerin eşlik etmediği sürece, tek başına rengin bir kopyası onu zorlamak için yeterli değildir. Araştırmaya göre, müşterilerin% 52’sinin sadece istenirse mağazaya girme olasılığı daha yüksektir – yolda veya broşürde bir işaret olsun. Ancak sorun, kullanıcıların nereye gittikleri her yerde reklamlarla sürekli bombalanmaya alışık olmalarıdır, bu tür bir mesajı görmezden gelmede oldukça iyidirler. Bu gerçek göz önüne alındığında, kopyanız CTA açısından güçlü ve öz olmalıdır. Örneğin, aktif fiiller kullanmak, müşterileri çekmek kadar hiçbir şey yapmayan “BURADA TIKLAYIN” gibi dolgu maddelerinden tercih edilir. “Ücretsiz bir kopya almak için kaydolun!” Belki daha iyi sonuçlar almak Kullanıcı içeriğin bağsız ekran için oldukça ilginç olduğunu düşünüyorsa. CTA metninin kendisine binmek, birikim de dönüşüm oranınızı etkileyebilir. Örnek olarak satış kanalı için oluşturulan yön sayfasını alın – sayfa, müşterileri ürün veya hizmet satın almak ve genellikle benzer bir yapıyı takip etmek için özel olarak oluşturulmuştur: birisini örnek olarak kullanma problemleri için ve daha sonra ürünlerinin yardımcı olmayı nasıl başardığına başvurur. Diğer tüm seçeneklerin başarısız olduğu yerlerde dışarı çıkıyorlar, nihayet size öğretilerini kendi sorunlarınıza uygulama fırsatı sunuyor (asla bir satış olmadı, her zaman bir şans).
Bu nedenle, harekete geçmeye iyi bir davet, doğru zamanda sadece eylem önermenin, bir beklenti duygusu yaratmanın, daha sonra cazip bir tasarım ve müşterilerinizi bir başlangıç seçimi yapmak için doğru kelimeleri kullanmanın bir kombinasyonudur. Birçok süreç gibi geliyor, ancak iyi bir CTA yaratmanın yolu iyi geçti ve konuyu daha derin öğrenmek isteyenler için birçok kaynak var. Divi kullanılarak yapılan basit bir örneğe bakalım, davetiyelerin esas olarak harekete geçmesi için çok fazla yapı kullanmıyor. Tüm ana sayfalar ilginç bir şekilde tasarlanmış harekete geçecek davetiyelerle doludur, ancak ana sayfalar çok fazla değildir. “Sizi aktif, sağlıklı ve mutlu tutmaktan mutluluk duyuyoruz. Randevu alın. “Kısa, özlü ve kararları ellerinize yerleştirirken acil bir his verin. Davet modülü hayatınızı kolaylaştırmak için divi harekete geçirmesi için, Divi varsayılan CTA modülü ile birlikte gelir. Bu, CTA’yı tıklatarak uygulamanızı sağlar. Divi Maker’ı kullanmak ve aynı ayar seviyesinin tadını çıkarmak tüm modülleriyle kullanılabilir.
Bu modül, renk, metin yönü, ayarlanabilir etiketler, kimlik ve sınıf, gelişmiş tasarım ayarları ve CSS aracılığıyla değişiklik eklemek için seçenekler gibi hayal edebileceğiniz tüm seçenekleri içerir.
<Vücut >
Aşağıdaki kod görüntülerinde, adı oldukça açık olan Top-CTA adlı yeni bir benzersiz kimlik oluşturuyoruz. CTA metnini değiştirmek istiyorsanız, yapıştıktan sonra gerekli kod satırını değiştirin.
bu bir yapışkan CTA
Şimdi, özel CSS düzlemini kullanarak uygulayabileceğiniz yeni yapışkan CTA’nızı ayarlamak için birkaç CSS öğrenmeniz gerekiyor. CSS alanı özellikle Epanel Divi’ye dahildir. Bilmeniz gereken bu kodların çoğu ve CSS ile uğraşmaya alışık olmasanız bile, bu gezinmek oldukça kolaydır. Adım adım tartışalım. İlk bölüm, arka plan, metnin hizalanması, dolgu, metni büyük harflere zorlama dahil olmak üzere CTA bıçaklarının genel tasarımını içerir, bıçakların tarayıcının tam genişliğini ve dizin-z’yi (yüksek bir şekilde ayarlanmıştır diğerlerini değiştirmek için değer). Üst üste her bölüm, daha önce Header.php’de tarif ettiğimiz sınıfı tartışır ve istediklerinizle ayarlayabileceğiniz küçük bir stil detayı ekler.
Son olarak, daha küçük bir çözünürlük için CTA bıçağının boyutunu değiştirmeye yardımcı olan bazı medya sorgularımız var, böylece ekranın yarısını almıyor ve tüm ziyaretçilerinizi korkutuyor (İnanın bana, bundan kurtulmak istemiyorsunuz Bölüm). #Top-CTA {
Arka Plan Renk: #Tercih ettiğiniz rengi buraya getirin;
Arka plan rengi: RGBA (57, 178, 235, .9);Metin-align: merkez;
Dolgu: 5px 0 5px;
Metin-Transform: büyük harf;
Konum: Sabit;
Üst: 0;
Genişlik:%100;
Z-index: 9997;
}
#Top-CTA A {
Renk: #fff;
yazı tipi boyutu: 28px;
yazı tipi-ağırlık: 700;
Ekran: satır içi blok;
}
#Top-cta a span.cta_gray {
Renk: #dfdfdf;
Text-Shadow: 1px 1px 1px #5A5A5A;
}
#top-cta .blurb_button {
Dolgu-sol: 20px;
}
#Top-cta a.cta {
Arka Plan rengi: #FF9900;
}
#Top-cta a.cta: hover {
Arka plan-rengi:#FFAD33;
}
/*——————— [768px] —————–
@Media sadece ekran ve (maksimum genişlik: 980px) {
#Top-CTA {
Dolgu: 10px 0 10px;
}
#Top-CTA A {
yazı tipi boyutu: 20px;
}
}
/*———————- [480px] —————–
@Media sadece ekran ve (maksimum genişlik: 767px) {
#Top-CTA {
Dolgu: 7px 0 7px;
}
#Top-CTA A {
yazı tipi boyutu: 18px;
}
#top-cta .et_pb_promo_button {
Dolgu: 4px 15px;
}
}
/*———————- [320px] ——————
@Media sadece ekran ve (maksimum genişlik: 479px) {
#Top-CTA {
Dolgu: 5px 0 5px;
Çizgi yüksekliği: 1.2em;
}
#Top-CTA A {
yazı tipi boyutu: 16px;
}
#top-cta .et_pb_promo_button {
Dolgu: 2px 10px;
}
}
Ayrı test etme zamanı!
Önceki bölümde fark etmiş olabileceğiniz gibi, böyle basit bir bıçakla bile, bunu yapmak için birçok ayar seçeneği vardır. Tabii ki, sadece iyi bir stil seçebilir, CTA’nızı yükseltebilir ve parmaklarınızı geçebilir veya daha fazla adım atabiliriz. Bu, ziyaretçilerin bazı tasarımlar için diğerlerinden daha iyi tepki verecekleri basit bir gerçektir ve en son trendleri takip edebilmenize rağmen, her zaman optimizasyon için yer olacaktır. Hangi değişikliklerin uygulanacağını seçmenin akıllı yolu, kendinize rehberlik etmek için analiz kullanmaktır. Örneğin, CTA doğasında bulunan iki tasarımınız varsa, her birinin metriğinizi belirli bir süre için nasıl etkilediğini test etmeye devam etmelisiniz ve daha sonra net bir kazananla kalmalısınız. Bu, özel izleyicileriniz için neyin başarılı olduğu hakkında bilgi oluşturmanıza ve içeriğinizi mümkün olduğunca ayarlamanıza olanak tanır. Çeşitli seçenekleriniz olduğunda bölünmüş test biraz daha karmaşık hale gelir. Aynı testte çok farklı bir tasarım girerseniz, yanlış sonuçlar alabilirsiniz. Bu nedenle, bunu yapmak için zamanınız ve sabrınız varsa, metriğinizden memnun olana kadar önceki test sonuçlarını (tasarımınızı iyileştirmek için her bilgiyi kullanarak) geliştirmeye çalışmalısınız. Ancak, korkmayın – bu ses çıkarmaktan çok daha kolaydır.