“Genişlet” nasıl yapılır “Zarif bir tema gibi
Zarif temalar son zamanlarda web sitelerinin tasarımını taklit edilmesi gereken bazı özellikleri içerecek şekilde değiştirdi. Önceki yazıda, zarif bir tema blog tasarımının nasıl uygulanacağını ve ana menüyü kopyalayacağımı yazdım. Ancak, bu yazı için size Eylem Çağrısı (CTA) zarif temasını nasıl çoğaltacağınızı göstereceğim. Bu CTA, zarif temalar web sitesi altbilgisinin yakınında yer almaktadır. Bu CTA hakkında özel olan, kullanıcı öğeye eğitildikten sonra animasyonu tetikleyen ek bir işlevdir. Bugün size sadece bu CTA stilini değil, aynı zamanda animasyon işlevini de çoğaltmanın bir yolunu göstereceğim. Bu, birkaç özel CSS ve birkaç JavaScript satırına sahip DIVI kod modülü kullanılarak yapılır. Ancak, herhangi bir Divi modülünde aynı animasyon işlevini kolayca genişletebilirsiniz.
Başlayalım. Tasarımı Divi Binası ile Uygulamak Görsel bir oluşturucu kullanarak bir kod modülü kullanarak harekete geçme davetiyesi, tam geniş bir satır sütunu ile yeni bir normal bölüm ekleyin.
401.632 müşteriler zaten Divi ile muhteşem web siteleri inşa ediyor. Web’de en güçlendirilmiş WordPress topluluğuna katılın
30 günlük para iade garantisi sunuyoruz, bu yüzden katılın risksiz!
Bugün kaydolun
Bu HTML, CTA’nız için bir içerik olarak işlev görecektir. H3 etiketlerine sarılmış CTA’nın ana başlığını göreceksiniz. Alt başlıklar standart P etiketlerine sarılır. Ve bağlantı (hemen bir düğme olur) “işaret” adlı bir CSS kimliği vardır. Ayrıca “CTA-Info” sınıfı içeriği sarar. Bu, daha sonra stil yapmak 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ı simgesini tıklayın.
Bölüm ayarlarındaki CSS sekmesinin altında, CSS “CTA-bölüm” kimliğini ekleyin ve değişikliklerinizi değiştirin.
/*** Stil CTA Bölümü ve Sıra Yol noktası tetiklenmediğinde ***/
#cta-section {
Dolgu: 0 80px;
Geçiş: Tüm .8s kolaylığı;
-Moz-Transition: Tüm .8s kolaylığı;
-Webkit-Transition: Tüm .8s kolaylığı;
}
#Cta-row {
Marj: 80px Auto 0 otomatik;
Dolgu: 80px 0;
Max-Width:%100;
Arka Plan rengi: #6C17DC;
-Moz-Sınırlı-Radius: 4px;
-Webkit-Sınırlı-Radius: 4px;
Border-Radius: 4px;
Box-Shadow: 0px 10px 50px #939FA9;
Geçiş: Tüm .8s kolaylığı;
-Moz-Transition: Tüm .8s kolaylığı;
-Webkit-Transition: Tüm .8s kolaylığı;
}
/*** Style CTA Bölümü ve Row Waypointy Animal-CTA sınıfını değiştirir ***/#CTA-Section.Anate-CTA {
Dolgu: 46px 0 66px 0;
Taşma: gizli;
}
.animate-cta #cta-row {
Marj: 0 otomatik 0 otomatik;
-Webkit-Transform: Ölçek (1.1);
Dönüşüm: Ölçek (1.1);
Arka Plan rengi: #4843d2;
Genişlik: miras;
}
/*** Stil düğmesi ***/
#işaret {
Ekran: satır içi blok;
Genişlik: 246px;
Renk: #fff;
Metin-Transform: büyük harf;
yazı tipi boyutu: 16px;
yazı tipi-ağırlık: 600;
Arka Plan rengi: #F92C8B;
Dolgu: 20px 40px;
Marj-Top: 30px;
Border-Radius: 60px;
-Webkit-Sınırlı-Radius: 60px;
-Moz-Sınırlı-Radius: 60px;
Geçiş: Tüm .8s kolaylığı;
-Webkit-Transition: Tüm .8s kolaylığı;
-Webkit-Transition: Tüm .8s kolaylığı;
Box-Shadow: 0px 5px 20px #231F92;
-Moz-box-shadow: 0px 5px 20px #231F92;
-Webkit-Box-Shadow: 0px 10px 50px #231F92;
}
#Sign: Hover {
Arka Plan rengi: #2cc2e6;
Box-Shadow: 0px 20px 80px #1B1867;
-Moz-box-shadow: 0px 20px 80px #1B1867;
-Webkit-Box-Shadow: 0px 20px 80px #1B1867;
}
/*** kod içinde stil içeriği ***/
.Cta-info {
Renk: #fff;
Metin-align: merkez;
Marj: 0 otomatik! Önemli;
Maksimum genişlik: 1080px;
Dolgu: 50px;
}
.Cta-info H3 {
Renk: #fff;
yazı tipi boyutu: 35px;
Çizgi yüksekliği: 1.3em;
}
Şimdi bakmaya başlıyorsun. Yapmamız gereken şey, CTA’ya kaydırma yaparken görünüm portu tarayıcınızda görünür olan ilginç bir animasyon efekti vermek için kısa bir komut dosyası eklemektir.
Element’e geçerken CTA’yı canlandırmak için bir yol noktası komut dosyası ekleyin, sayfanızdaki öğelere kaydırdığınızda işlevleri tetiklemenin en kolay yollarından biri, Waypoints adlı bir JavaScript kütüphanesi kullanmaktır. Divi kurulu bir yol noktası (yay!) İle donatılmış olduğundan, tek yapmamız gereken bir kütüphane kullanan bir komut dosyası içermektir. Divi → Tema seçeneği → entegrasyon ve “blogunuzun başına kod ekle” nde aşağıdaki komut dosyasını yapıştırın.
JQuery (‘#cta-section’). Waypoint (function () {
jQuery (‘#cta-section’). toggleclass (‘hayvan-cta’);
}, {ofset: ‘80%’});
});
Bu komut dosyası, CTA bölümüne kaydırdığınızda (ID CSS “CTA-Bölümü” ile) “Animal-CTA” adlı bir sınıfı etkinleştirecek bir işlev ekler. Ofset’i%80 olarak gösteren kod bölümüne dikkat edin. Bu, CTA’nın üst kısmı tarayıcı penceresinin üst kısmının% 80’i olduğunda işlevin tetikleneceği anlamına gelir. CTA sayfanın ortasına ulaştığında işlevi tetikleme işlevini geciktirmek istiyorsanız, ofset değerini yaklaşık%50 olarak değiştirebilirsiniz. Ancak, CTA’nız sayfanın en altında olacaksa, yine de% 80 -% 90’a yakın bir değer kullanmalısınız. Bunun nedeni, CTA’nızın kaydırılırken tarayıcı pencerenizin ortasına asla ulaşamayacağı ve bu nedenle tetiklenmeyeceğidir.
İşte burada! Şimdi tamamlanan projeye bakalım.
CTA işlevlerini başka bir modüle ekleyin Bu CTA işlevselliğini Divi Builder’daki başka bir modüle eklemek istiyorsanız, bunu yapmak oldukça kolaydır. İşte başlamanız için adımlar:
Ayarlarda, CSS altında, “CTA bölüm” CSS kimliğini ekleyin. Satır ayarlarına, CSS altına CSS “CTA-ROW” kimliğini ekleyin ve CSS sınıfı “CTA-Column” sütunu ekleyin. Aşağıdaki özel CSS’yi girin:
.cta-column.et_pb_column: son çocuk {
Marj: 0 otomatik;
Marj-Sağ: Otomatik! Önemli;
Maksimum genişlik: 1080px;
Şamandıra: yok;
}
Sıraya istediğiniz modülü ekleyin (örn. Davet modülü hareket ediyor) ve buna göre hissettirin. CTA’nızın arka plan rengi ile örtüşmemesi için modülünüze şeffaf bir arka plan eklemek isteyebilirsiniz.
Önemli Not: Sayfa başına bu işlevle birden fazla CTA ekleyemezsiniz.
CTA zarif temasını kopyalamak, gelecekte herhangi bir projeye eklenecek yararlı bir özelliktir. Çok kibirli olmadan okuyucunun dikkatini çeker. Kod modülünü kullanmak, CTA’ya özel HTML eklemek için daha fazla geliştirici verir. Ve yol noktası animasyon işlevi kod modülü ile sınırlı değildir. Ayrıca, Divi Builder kullanarak herhangi bir modülle CTA yapmak için gerekli CSS kimliğini herhangi bir bölüme, satır ve sütuna da ekleyebilirsiniz. Aşağıdaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
