“Kazanan Döndürme” Kaydırma Etkisi ile CTA'nızı Nasıl Artırırsınız?
Yayınlanan: 2020-05-29Ödül kazanmak her zaman eğlencelidir. Bu nedenle şirketler, ürünlerini ve hizmetlerini ücretsiz olarak dağıtarak çevrimiçi olarak pazarlamaktadır. İlk siparişinizde ücretsiz bir tatlı kuponu veya bir e-posta listesine abone olduğunuzda ücretsiz bir e-kitap olabilir. Ancak bazen, bedavalar bile web'de göz ardı edilebilir. Zarif bir "kazanan döndürme" kaydırma efekti eklemek, ziyaretçiler için ilgi çekici bir etkileşim oluştururken CTA'nıza hak ettiği ilgiyi göstermenin harika bir yolu olabilir.
Bu eğitimde, Divi'de "kazanan döndürme" kaydırma efektiyle CTA'larınızı nasıl artıracağınızı göstereceğiz. Kullanıcı sayfayı aşağı kaydırdığında, kazanan ödül, ücretsiz teklifi benzersiz bir şekilde ortaya çıkarmak için döner. Ve bunu, aklınıza gelebilecek hemen hemen her ücretsiz teklifi tanıtmak için kullanabilirsiniz.
Başlayalım.
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Önceden Yapılmış Bir Düzen Seçin” seçeneğini seçin.
- Fırın Ana Sayfa Düzenini seçin ve düzeni kullanmak için tıklayın.
Bundan sonra, Divi'de "kazanan döndürme" kaydırma efektiyle CTA'yı oluşturmaya hazır olacaksınız.
Bölüm 1: “Kazanan Döndürme” Kaydırma Efekti Oluşturma
Başlamak için, Divi Builder içindeki alt ayarlar menüsünden katmanlar görünümünü dağıtın. Bu, tasarım öğelerimizi daha iyi yönetmeye yardımcı olacaktır.
Bölüm, Satır ve Sütunları ekleyin
Önceden hazırlanmış düzen, halihazırda içeriğe sahip birden fazla bölümle birlikte gelir. CTA'nın bulunmasını istediğimiz sayfaya yeni bir bölüm ekleyeceğiz. Bu eğitim için, doğrudan "Hizmetler" etiketli bölümün altına yeni bir normal bölüm ekleyin.
Bölümün içine iki sütunlu bir satır ekleyin.
Satır Ayarları
Herhangi bir modül eklemeden önce, satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Oluk Genişliği: 1
- Genişlik: %94
- Dolgu: 10 piksel üst, 10 piksel alt
- Kenar Genişliği: 1px
- Kenar Rengi: rgba(0,0,0,0.12)
Gelişmiş sekmesi altında, Ana Öğeye aşağıdaki Özel CSS'yi ekleyin:
display:flex; align-items: center;
Sütun 1 Kenarlık
Satır ayarları yapıldıktan sonra, 1. sütun için ayarları açın ve aşağıdaki gibi bir sağ kenarlık ekleyin:
- Sağ Kenar Genişliği: 1px
- Sağ Kenar Rengi: rgba(0,0,0,0.12)
Bir tanıtıcı modül kullanarak Döndürücü Ok ve Metin oluşturma
Ardından, kazanan seçimi gösteren ok görevi görecek olan dönen oku ve metni oluşturacağız.
Bulanıklık Modülü Ekle
Sol sütuna yeni bir tanıtım modülü ekleyin.
Bulanık İçerik
Ardından, tanıtıcı içeriği yeni bir başlık ve simgeyle güncelleyin.
- Başlık: Bir Kazandınız
- Simge: Sağ Ok (ekran görüntüsüne bakın)
bulanık tasarım
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Simge Rengi: #a06d51
- Resim/Simge Yerleşimi: Sol
- Simge Yazı Tipi Boyutu: 80px (masaüstü), 50px (tablet), 40px (telefon)
- Başlık Yazı Tipi: Patua Bir
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Metin Boyutu: 40px (masaüstü), 25px (tablet), 20px (telefon)
- Başlık Harf Aralığı: 1px
- Başlık Satırı Yüksekliği: 2em
Bulanık Özel CSS
Ardından, ana öğeye aşağıdaki özel CSS'yi ekleyerek, okun sol yerine sağda olması için tanıtıcı içeriğin sırasını değiştirin:
direction: rtl !important;
Ardından, bu özel CSS'yi Blurb Title'a ekleyerek, tanıtım başlığının altındaki varsayılan dolguyu çıkarın:
padding-bottom: 0px
Çoklu Tanımlamalarla Ödül Seçimleri Oluşturma
Sağ sütunda, dönecek ve sonunda bir kazanana karar verecek ödül seçimlerimizi ekleyeceğiz. Bunu yapmak için bir başlık ve bir resim ile 4 tanıtıcı modül oluşturup konumlandıracağız.
Bulanıklık Oluşturma 1
2. sütundaki ilk tanıtım bilgimizi oluşturmak için, 1. sütundaki tanıtım metnini çoğaltın ve 2. sütuna sürükleyin.
Sütun 2'de yinelenen tanıtım yazısının ayarlarını açın ve ana öğe için özel CSS'yi çıkarın:
Bu, simgemizi tekrar sola getirecektir.
Başlığı ve Resmi Güncelle
Ardından başlığı ve resmi aşağıdaki gibi güncelleyin:
- Başlık: ÜCRETSİZ Çerez!
- Resim: resim yükle (yaklaşık 100 piksele 100 piksel)
Blurb 1 Tasarım
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Görüntü Genişliği: 80px (masaüstü), 50px (tablet), 40px (telefon)
- İçerik Genişliği: %92
- Genişlik: %100
Kökeni Dönüştür
Dönüştürme döndürme seçeneğini kullanarak tanıtım yazılarını döndüreceğiz, bu nedenle tanıtım yazılarının nasıl döndürülmesi gerektiği için anlamlı bir dönüştürme kaynağı seçmek önemlidir. İlkini döndürmeyeceğiz, ancak bu ileriye dönük iyi bir şablon görevi görecek.
Tanımlama yazısının transform-orijinini aşağıdaki gibi güncelleyin:
- Kökeni Dönüştür: sağ merkez
Resim/ikon animasyonunu da çıkarmalısınız.
Mutlak Konum
Gelişmiş sekmesi altında, tanıtıcı ve mutlak konumu aşağıdaki gibi verin:
- Pozisyon: Mutlak
- yer: sağ merkez
Bulanıklık 2 Oluşturma
İkinci tanıtım yazısı oluşturmak için tanıtım yazısı 1'i çoğaltın.
Dönen Bulanıklık 2
Ardından, aşağıdaki gibi bir dönüşüm dönüşü ekleyin:
- Dönüş Z-Eksenini Dönüştür: 25deg
Tanıtım yazısının artık satırın görüntüleme alanının dışına döndürüldüğünü göreceksiniz.
Blurb 3 Oluşturma ve Döndürme
Üçüncü tanıtım yazısı oluşturmak için tanıtım yazısı 2'yi çoğaltın. Ardından dönüştürme dönüşünü aşağıdaki gibi güncelleyin:
- Dönüş Z-Eksenini Dönüştür: 50deg
Blurb 4 Oluşturma ve Döndürme
Dördüncü tanıtım yazısı oluşturmak için tanıtım yazısı 3'ü çoğaltın. Ardından dönüştürme dönüşünü aşağıdaki gibi güncelleyin:
- Dönüş Z-Eksenini Dönüştür: 75deg
Blurb Başlığını ve Resimlerini Güncelle
4 tanıtım yazısı eklemeyi bitirdikten sonra geri dönün ve her biri için başlığı ve resmi gerektiği gibi güncelleyin.
Sütun Kaydırma Döndürme
Kaydırma efekti eklemek için, döndürülmüş 4 tanıtım yazısının bulunduğu tüm sütunu döndüreceğiz.
2. sütun için ayarları açın ve aşağıdakileri güncelleyin:
- Kökeni Dönüştür: sağ merkez
Gelişmiş sekmesi altında, dönen kaydırma efekti sekmesini açın ve aşağıdakileri güncelleyin:
- Döndürmeyi Etkinleştir: EVET
- Başlangıç Rotasyonu: -%75 (%15'te)
Ardından hareket efekti tetikleyicisini "Elementin Başı" olarak güncelleyin.
Gizli Taşma ile Satırı Güncelle
Şimdi satır ayarlarına geri dönün ve aşağıdaki satır ayarını güncelleyerek içeriğin taşmasını gizleyin:
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
2. Bölüm: Ödül CTA'sını Oluşturma
Eğitimin bu son kısmı için, ödül ve bir düğme hakkında bilgi gösterecek bir CTA oluşturacağız. Ve "kazanan döndürme" animasyonu tamamlandıktan sonra CTA'yı göstermek için bir kaydırma efekti ekleyeceğiz. Bu, sürpriz bir etki türünü taklit edecektir.
Satırı Ekle
Başlamak için, yeni oluşturduğumuz satırın hemen altına tek sütunlu bir satır ekleyin.
Metin Modülü Ekle
CTA'mızın içeriğini eklemek için, sayfadaki önceden hazırlanmış düzenden bir metin modülü kopyalayacağız. “Çevrimiçi Alışveriş” başlıklı metin modülünü bulun ve kopyalayın.
Ardından, az önce oluşturduğunuz satıra yapıştırın.
Metin Tasarımı
Metin tasarımını aşağıdaki gibi güncelleyin:
- Metin Yazı Tipi: PT Sans
- Metin Yazı Tipi Ağırlığı: Kalın
- Metin Metin Boyutu: 16px
- Metin Satır Yüksekliği: 2em
- Metin Hizalama: Merkez
CTA Düğmesi Ekle
Ardından, önceden hazırlanmış düzenin üstündeki düğmeyi bulun ve kopyalayın.
Ardından doğrudan metin modülünün altına yapıştırın.
Satır Kaydırma Etkisi
"Kazanan döndürme" ödülü seçtikten sonra CTA'yı göstermek için satır ayarlarını açın ve aşağıdaki Kaydırma efektini güncelleyin:
Solma ve Soluk sekmesi altında…
- Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
- Opaklığı Başlatma: %0 (%50'de)
- Orta Opaklık: %100 (%55'te)
Son sonuç
Son düşünceler
Umarım, bu "kazanan döndürme" kaydırma efekti, kendi sitenizde nasıl daha ilgi çekici bir CTA tasarlayacağınız konusunda size yeni fikirler verir. Divi'nin dönüştürme seçeneklerini ve kaydırma efektlerini kullanarak onu oluşturmak biraz incelik gerektirir. Ancak bir kez tamamlandığında, düzeni kendi benzersiz içeriğinizle güncellemek gerçekten çok kolay.
Yorumlarda sizden haber bekliyorum.
Şerefe!