Zarif Temalar gibi "Genişleyen" bir CTA Nasıl Oluşturulur

Yayınlanan: 2017-05-14

Elegant Themes kısa süre önce web sitelerinin tasarımını taklit etmeye değer bazı özellikler içerecek şekilde değiştirdi. Daha önceki yazılarımda Elegant Theme blog tasarımının nasıl uygulanacağı ve birincil menünün nasıl kopyalanacağı hakkında yazmıştım. Ancak bu gönderi için size Zarif Temalar harekete geçirici mesajını (CTA) nasıl çoğaltacağınızı göstereceğim. Bu CTA, Elegant Themes web sitesinin alt bilgisine yakın bir yerde bulunur. Bu CTA'nın özelliği, kullanıcı öğeye kaydırdığında animasyonu tetikleyen ek işlevselliktir.

Bugün size sadece bu CTA'nın stilini değil, aynı zamanda animasyon işlevini de nasıl kopyalayacağınızı göstereceğim. Bu, Divi'nin Kod Modülü ile bazı özel CSS ve birkaç satır JavaScript kullanılarak gerçekleştirilir. Ancak, aynı animasyonlu işlevselliği Divi'nin herhangi bir modülünde kolayca genişletebilirsiniz.

Başlayalım.

Tasarımı Divi ile Uygulamak

Kod Modülünü Kullanarak Harekete Geçirici Mesaj Oluşturma

Görsel Oluşturucu'yu kullanarak, tam genişlikte bir satır sütunuyla yeni bir normal bölüm ekleyin.

Ardından Kod Modülünü satırınıza ekleyin.

Genel Kod Ayarları altında, içerik bölümüne aşağıdaki html'yi ekleyin.

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

Bu html, CTA'nız için içerik görevi görecektir. Ana CTA başlığının bir h3 etiketine sarıldığını fark edeceksiniz. Alt başlık, standart bir p etiketine sarılır. Ve bağlantının (yakında düğme olacak) "işaret" adında bir CSS kimliği var.

Ayrıca içeriğin etrafına “cta-info” sınıfına sahip bir div sarılır. Bu, daha sonra şekillendirme amaçları için önemlidir.

Değişiklikleri Kaydet

Şimdi yeni bölümünüze yeni bir CSS kimliği eklememiz gerekiyor. Bölüm ayarlarını açmak için bölüm ayarları simgesine tıklayın.

Bölüm Ayarları'ndaki CSS sekmesi altında, CSS kimliğini "cta-section" ekleyin ve değişiklik değişikliklerinizi kaydedin.

Ardından satırınıza bir CSS kimliği eklememiz gerekiyor. Satır ayarları simgesine tıklayın.

CSS sekmesi altında, satır ayarlarını "cta-row" adlı yeni bir CSS kimliğiyle güncelleyin.

Değişiklikleri Kaydet

CTA'nın düzeni için ihtiyacımız olan tek şey bu. İçeriğimiz ve CSS kimliklerimizle, bazı özel CSS eklemeye hazırız.

Özel CSS Ekleme

Divi → Tema Özelleştirici → Ek CSS'ye gidin (veya alt temanızın style.css dosyasını doğrudan güncelleyebilirsiniz). Kod kutusunun içine aşağıdaki CSS'yi ekleyin:

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

Şimdi CTA'nız parçaya bakmaya başlıyor. Tek yapmamız gereken, kaydırma sırasında tarayıcınızın görünümünde CTA görünür hale geldiğinde CTA'ya o göz alıcı animasyon efektini vermek için kısa bir komut dosyası eklemek.

Öğeye Kaydırırken CTA'yı Canlandırmak için Yol Noktası Komut Dosyasını Ekleme

Sayfanızdaki bir öğeye ilerlediğinizde bir işlevi tetiklemenin en kolay yollarından biri, Waypoints adlı JavaScript kitaplığını kullanmaktır. Divi, Waypoints kurulu olarak geldiği için (yay!), tek yapmamız gereken kitaplığı kullanan bir komut dosyası eklemek.

Divi → Tema Seçenekleri → Entegrasyon'a gidin ve aşağıdaki komut dosyasını “Blogunuzun başına kod ekleyin” bölümüne yapıştırın.

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

Bu komut dosyası, CTA bölümüne (CSS kimliği "cta-bölümü" olan) kaydırdığınızda "animate-cta" adlı bir sınıfı değiştirecek bir işlev ekliyor. Kodun ofseti %80 olarak belirleyen kısmına dikkat edin. Bu, CTA bölümünün üst kısmı tarayıcı penceresinin üstünden %80 olduğunda işlevin tetikleneceği anlamına gelir. CTA sayfanın ortasına ulaştığında işlevi tetiklemek için geciktirmek istiyorsanız, ofset değerini %50 gibi bir değere değiştirebilirsiniz. Ancak, CTA'nız sayfanın en altında olacaksa, %80 - %90'a yakın bir değere bağlı kalmalısınız. Bunun nedeni, kaydırma sırasında CTA'nızın tarayıcı pencerenizin ortasına asla ulaşamaması ve bu nedenle tetiklenmemesidir.

Bu kadar!

Şimdi bitmiş projeye bir göz atalım.

CTA İşlevselliğini diğer Modüllere Ekleme

Bu CTA işlevini Divi Builder içindeki diğer modüllere eklemek istiyorsanız, bunu yapmak oldukça kolaydır. İşte başlamanıza yardımcı olacak adımlar:

Tam genişlikte (tek sütun) bir satır içeren standart bir bölüm oluşturun.
Bölüm Ayarlarında, CSS altında, CSS kimliğini "cta-section" ekleyin.
Satır Ayarlarında, CSS altında, CSS kimliğini "cta-row" ekleyin VE Sütun CSS Sınıfını "cta-column" ekleyin.
Aşağıdaki özel CSS'yi ekleyin:

 .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}

Satıra istediğiniz herhangi bir modülü (yani, Harekete Geçirici Mesaj Modülü) ekleyin ve buna göre biçimlendirin. CTA'nızın bölüm arka plan rengini aşmaması için modülünüze şeffaf arka planlar eklemek isteyebilirsiniz.

Önemli Not: Bu fonksiyon ile sayfa başına birden fazla CTA ekleyemezsiniz.

Son düşünceler

Elegant Theme'nin CTA'sını çoğaltmak, gelecekteki herhangi bir projeye eklemek için kullanışlı bir özelliktir. Fazla zorlamadan okuyucunun dikkatini çekiyor. Kod Modülünü kullanmak, geliştiricilere CTA'ya özel html eklemek için daha fazla esneklik sağlar. Ve yol noktası animasyonu işlevi Kod Modülü ile sınırlı değildir. Divi Builder'ı kullanarak herhangi bir modülle CTA'lar oluşturmak için herhangi bir bölüme, satıra ve sütuna gerekli CSS kimliklerini de ekleyebilirsiniz.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!