WordPress'te Özel Düğmeler Nasıl Oluşturulur (Kodlamasız)

Düğmeler, kullanıcının dikkatini çekmenin en etkili yollarından biridir. Hiç hiç merak ettiniz mi, “Bu havalı ve şık düğmeleri, kesinlikle hiçbir kod yazmadan kolayca nasıl oluşturabilirsiniz?

Bu eğiticide, aşağıdakileri yapmak için kullanabileceğiniz yüksek CTR harekete geçirici mesaj düğmelerinin nasıl oluşturulacağını göstereceğim:-

Düğmelerin yüksek TO'ya sahip olduğu kanıtlanmıştır. Dönüşüm için optimize edilmiş bir siteyi daha önce ziyaret ettiyseniz açılış sayfası, Bunun gibi düğmeler görmüş olabilirsiniz:

Bir wordpress blogundaki düğmelere örnek

 

Bu düğmeleri en yükseklerimden bazılarında kullanıyorum trafik her ziyaretçinin dönüştürme ve içeriğimin en iyisini görme şansına sahip olmasını sağlamak için blog gönderileri ve sayfalar oluşturmak. Ayrıca bana yardımcı oluyor daha fazla para kazan bağlı kuruluş bağlantılarım aracılığıyla.

Dönüşüm blog sayfalarıma trafik çekmek için etkileşimli düğmeleri nasıl kullanırım ve sizinkini kodlamadan nasıl oluşturabilirsiniz?

Resme baktığınızda işaretli olan turuncu buton MAXbuttons eklentisi ile yapılmış buton örneğidir. Bu öğreticide, aynı adım adım prosedürü uygulayacaksınız; bu, ekranınızda herhangi bir yerde gösterilecek düğmeler oluşturmanıza yardımcı olacaktır. WordPress blogu.

Sıfır kodlama ve CSS özelleştirmesi gerektiren bunu yapmanın en kolay yolunu göstereceğim.

Bu dersimizde MAXButtons eklentisini kullanacağız. İşte bunu kullanmanız için birkaç neden:

  • destekleyen bağımsız eklenti önbellek için daha hızlı yükleme hızı.
  • Son derece özelleştirilebilir, Kullanımı ücretsiz
  • Kullanımı kolay ama güçlü
  • Önceden oluşturulmuş bağlantı optimizasyon kaynaklarıyla birlikte gelir
  • Destekler çeşitli temalar
  • Kısa kodu ve iç düzenleyici kısayolunu destekler

Bu eklenti, burada BforBlogger'larda kullandığım eklenti. başka yok fişe takmak MAXButtons kadar güçlü ve kullanımı kolaydır.

Bu söyleniyor, başlayalım.

Adım 1: MAXButtons WordPress Eklentisini Kurun

Maxbuttons, yeni başlayanlardan profesyonel kullanıcılara kadar kullanılan güçlü bir eklentidir. Etkileyici, son derece özelleştirilebilir ve sınırsız sayıda düğme ve gösteri oluşturabilirsiniz. WordPress basit kısa kodlar kullanarak blog. Yani, yapmanız gereken ilk şey bu eklentiyi kurmak ve etkinleştirmek.

MAX düğmelerini indirin

Adım 2: Sıfırdan Bir Düğme Oluşturma

WordPress kontrol panelinizin kenar çubuğundan MAXButtons menüsüne gidin. Yeni düğme ekle seçeneğine tıklayın. Düğmenizi oluşturmanız ve düzenlemeniz gereken yeni bir düzenleyici ekranı açılacaktır. Sana nasıl yapıldığını göstereyim.

MaxButtons Düğmeleri adım 1 – sıfırdan bir düğme oluşturma ve düzenleme

1 – Bir düğme adı girin. Bu gerekli olmasa da, her yeni düğmenize bir ad vermenizi öneririm, böylece aralarında ayrım yapabilirsiniz ve 10'dan fazlasını oluşturursanız birden fazla düğmeyi kolayca bulabilirsiniz. Bu dahili kullanım içindir. Kullanıcılar bunu canlı sitede görmez.

[Yüzen önizlemeye bakmaya devam edin. Düğmenizi düzenlemeye başladığınızda değişir. Bu size canlı sitede tam olarak nasıl görüneceğine dair bir fikir verecektir.]

2 – Düğme adının altındaki sonraki alana, kullanıcı tıkladığında göndermek istediğiniz URL'yi girin. Bu bir olabilir bağlı bağlantı promosyon, içerik yükseltme, e-posta listesi katılım formu veya herhangi bir sayfa vb. için. Eklemek isteyip istemediğinizi seçebilirsiniz. nofollow özellik etiketi düğmenize bağlantı ve yeni bir pencerede açmak istiyorsanız. Dahili ve harici, her iki bağlantı da kullanılabilir.

3 – Üçüncü alana bir buton araç ipucu ekleyebilirsiniz. Bir kullanıcı imlecini düğmenin üzerinde tuttuğunda bir araç ipucu gösterilir. SO, daha fazla değer katacağı için bunu yapmak iyi bir fikir olabilir. Kullanıcının tıkladığı anda göreceği şeyin kısa bir açıklamasını girin.

4 – Metinde, buton sloganınızın girilmesi gereken yer burasıdır. Yukarıdaki resimde de görebileceğiniz gibi, canlı sitede gösterilecek metin kısa ve mümkün olduğunca noktaya yakın olmalıdır. Mümkünse 3 kelimenin altında tutun. Bir şey tıklama gibi burada, lütfen bu düğmeye tıklamaktan daha iyidir.

5 – Diğer seçenekler, metin yazı tipi ailesini, boyutunu ve biçimini içerir. Mevcut seçenekler arasından seçim yapabilirsiniz ve resimde Georgia'yı 18 px boyutunda kalın stilde kullandım. Düğmenize bir animasyon efekti eklemek için metnin üzerine gelme rengini de değiştirebilirsiniz. Fareyle üzerine gelme rengi, imleç düğmenin üzerine gelir gelmez etkinleşir. İsterseniz metni hizalayabilirsiniz.

düğme kenarlığı ve kenarlık rengini wordpress temasına uyacak şekilde düzenleme

6 – İlk bölümü kaydırdıktan sonra kenarlık özelleştirme seçeneğini göreceksiniz. Bu bölümde, butonunuzun kenarlığını değiştiriyorsunuz. Biri normal kenarlık, diğeri vurgulu olmak üzere iki kenarlık seçeneği vardır. Fareyle üzerine gelme düğmesi ideal kenarlık renginden farklı olmalıdır.

Farklı bordür stilleri arasından seçim yapabileceğiniz bir bordür stili menüsü de vardır. Örneğin, yukarıdaki resimde çift stili kullandım. Varsayılan stil sağlamdır ve havalı görünmemektedir, bu yüzden bunu değiştirmek daha iyidir.

yeni oluşturulan düğme için arka plan ayarları ve özelleştirme

7 – Sonraki bölümde, butonunuzun arka plan rengini veya taban rengini özelleştirebilirsiniz. Bu rengi, izleyicilerin ilişki kurabileceği bir renkle değiştirmelisiniz, örneğin, WordPress temasıstandart renktir. Turuncu rengi seviyorum, bu yüzden turuncuya çevirmem gerekiyor. Renk paleti açılır penceresinden herhangi bir rengi kolaylıkla seçebilirsiniz.

Bunun altında, arka plan vurgulu rengi de vardır. Kullanıcılarınıza imleçlerini düğmenin üzerine getirdiklerinde farklı bir renk göstermek istiyorsanız bunu değiştirin.

Bu kadar. Alt bölümdeki ayarlar, özel CSS ile oynamayı seven ileri düzey kullanıcılar içindir. Acemi olduğunuzu varsayıyorum, bu yüzden lütfen bu ayarlara dokunmayın. Onları olduğu gibi bırakın.

3. Adım: Kaydet ve Önizleme

Son adım: düğmeyi ve önizlemesini kaydetme

Şimdi, düğmenizi canlı hale getirmek için ihtiyacınız olan tek şey:

  1. Kaydet düğmesine tıklayın.
  2. Ekranda gösterilen kısa kodu kopyalayın.
  3. Sitenizin herhangi bir yerine yapıştırın.

Kısa kodun metne değil görsel düzenleyiciye yapıştırılması gerekir. Aşağıda, bu eğitimde ve resimlerde gösterdiğim aynı demo düğmesi var.

[maxbutton id = ”8 ″]

Oldukça iyi görünüyor ve yüksek TO için optimize edilmiş. Widget bölümünde ve alt bilgi bölümünde herhangi bir düğmeyi göstermek için kısa kodu kullanabilirsiniz. Bunu yapmak için metin widget'ını kullanın.

oluşturulan tüm düğmeler ve bunların kısa kodları

Ayrıca, bir düğme oluşturup başarılı bir şekilde kaydettikten sonra, kendisine atanan kısa kodla birlikte düğme önizlemesinin hemen MAXButtons eklenti menüsünün “düğmeler” bölümünde görünmeye başlayacağını unutmayın.

Umarım bu eğitim yardımcı olmuştur. Bu gönderiyi Facebook ve Twitter'da paylaşın.

Paylaş:

Yorum bırak

E-posta hesabınız yayımlanmayacak.