Divi ile benzersiz bir CTA genişleme nasıl yapılır
Bir web sitesi oluştururken, ürün ve hizmetlerimizi açık bir CTA Davetiyesi (CTA) ile göstermek istiyoruz. Düğmeniz için daha benzersiz bir tasarım oluşturacaksanız, düğmenizin tıklanıp tıklanamayacağı konusunda karışıklıktan kaçınmak için bir havada bir etkisi eklemenize yardımcı olur. Bu öğreticide, net ve benzersiz CTA ile üstün ürün ve hizmetleri görüntülemek için bölümlerin nasıl tasarlanacağını göstereceğiz. CTA’nıza genişletilebilecek Hover efektini eklemek için varsayılan Divi tasarım seçeneğini nasıl kullanacağınızı bile göstereceğiz. Aşağıdaki gizlice göz atma, bu yazıda yapacağımız biraz sızdırılmış bir tasarım.
Bugün ihtiyacınız olan tek tasarım aracına ihtiyacınız olan şey Divi. Serinletici ve dengeli bir tasarım oluşturmak için bazı boşluklar, sınırlar ve yaratıcı düğmeler eklemek için Divi Builder Tasarım seçeneğini kullanacağız. YouTube kanalına abone olan divi ile benzersiz bir CTA genişletme bölümü nasıl yapılır yeni bir sayfa için bir parça tasarlıyoruz ve başlamak için bir görsel yapımcı uyguluyoruz. Varsayılan olarak, Divi, düzenlemeye hazır olan bir satır bir sütunu içeren bir bölüme sahip olacaktır. Bu, başlamamız gereken şey için işe yarayacaktır. Bölüm ayarlarını güncellemek ve seçenekleri aşağıdaki gibi güncellemek için tıklayın.İçerik sekmesinin altında, gradyan arka plan sekmesini tıklayın ve aşağıdakileri girin: Sol gradyan rengi: #ffffff sağ gradyan rengi: #353e45 gradyan yönü: 90 derece başlangıç konumu:%70; Son pozisyon:%70; Bu, bölümün içeriği için çerçevemizin sağ tarafı olarak işlev görecek parçanın arka planının sadece sağ tarafında koyu mavi bir renk yapacaktır. İpucu: İlk gradyan konumuna eşit veya daha az son konumu seçtiğiniz sürece, iki gradyan renginden karışmayan kontrast oluşturabilirsiniz. 90 derecelik gradyan yönü onu mükemmel bir dikey bölüm hattı yapar. Ardından tasarım sekmesini açmamız ve tüm cihazlarda iyi görünecek ve iyi görünecek bazı özel pedler eklememiz gerekir. Pilding Custom: 10vh yukarıda, 0px sağ, 10vh aşağıda, 0px Sol Not: 10VH, görünüm portu (VH) tarayıcısının yüzde 10’unun kısaltmasıdır. Bu, mobil cihazımıza kendi değerini vermek zorunda kalmadan tarayıcınızı farklı bir yüksekliğe ayarlarken iyi ayarlanır.
Çerçevenin bir kısmımızın üstünü ve altını yapmak için, üst ve alt sınırları bizim tarafımıza ekleyeceğiz. Üst sınır kuvveti sekmesini tıklayın ve aşağıdakileri ekleyin: Üst sınır genişliği: 15VH Üst Sınır Renk: #353E45 Ardından Alt Sınır Kuvvetleri sekmesini tıklayın ve aşağıdakileri ekleyin: Alt Sınır Genişliği: 15VH Alt Sınır Renk: #353E45 Ayarları kaydedin. Hatları Tasarlama Şimdi çizgilerimizi ayarlamaya hazırız. Satır ayarlarını düzenlemek için tıklayın ve arka plan görüntüsünüzü bir gradyanla verin. İlk olarak, Arka Plan Görüntüsü sekmesini tıklayın ve resminizi yükleyin. 1920px kez 1200 piksel olmalıdır. Ardından aşağıdakileri güncelleyin: Arka Plan Görüntü Boyutu: Arka Plan Görüntü Pozisyon Kapağı: Orta Tekrarlama Arka Plan Görüntü: Tekrar yok Sonra Arka Plan Gradyan sekmesini tıklayın ve aşağıdakileri girin: Sol Gradyan Renk: #ffffff Sağ Gradyan Renk: RGBA (255,255,255, 0) Gradyan Yönü: 90 derece Başlangıç Konumu:% 15 Nihai Konum:% 0 Gradyanı arka planın üzerine yerleştirin Görüntü: Evet Bu, sol taraftaki satırın sadece% 15’inde beyaz bindirme oluşturur. Şimdi Tasarım sekmesini açın ve birkaç özel boyut ve mesafeden satırlarınızı verin. Bu çizgiyi tam genişlik yapın: Evet Özel oluklar kullanın genişliği: Evet Oluk genişliği: 1 Eşit sütun yüksekliği: Evet Özel Part boşluğu: 5VH dolgu özel:% 5 üst,% 5 aşağıda
Ardından, satırın genişliğini ayarlamak için bazı şeffaf sınırlar ekleyin. Sağ kenarlık genişliği: 15VW Sağ Sınır Renk: RGBA (255,255,255.0) Sol sınır genişliği: 5VW Sol Sınır Rengi: #ffffff Ayarları kaydedin. Geliştiren CTA’nızı sağlayın Sütununuzun yapısını ekleyin ve şimdi satır ayarlarınız yer aldıktan sonra düğme modülünüzü tasarlayın, satırınıza üçte bir yapıyı ekleyin ve ardından iki üçüncü sütuna düğme modülünü ekleyin .
Aşağıdaki seçeneği güncelleyin: Metin Düğmesi: Proje URL’imiz düğmesi: [URL girin] Düğme için özel bir stil kullanın: Evet Metin Boyutu Düğmesi: 48px (masaüstü), 30px (tablet), 18px (akıllı telefon) Metin Renk Düğmesi: #353E45 Arka Plan Renk Düğmesi: #FFFFF Genişlik Sınır Düğmesi Sınır: 0PX Mesafe Düğmesi: 2px Yazı Tipi Düğmesi: Karla Ağırlık Yazı Tipi: Yazı Tipi Kalınlığı: TT Düğmesi Icon: Ekran Görüntüleri Renk Düğmesi Icon: #CB9D85 Harf Navigasyon Düğmesi: 6px (Desktop ), 3px (tablet), 2px (Akıllı Telefon) Bu tasarımın anahtarı, kullanıcı imleci düğmeye yönlendirdiğinde genişleme etkisini tetiklemek için harfler arasındaki mesafe düğmesini kullanmaktır. Yaygın mesafeyi azaltmak için cep telefonundaki değeri düşürdüm. Ardından tasarımı tamamlamak için düğmenize birkaç özel rulman ve gölge kutusu ekleyin. Özel dolgu:% 15 üst,% 24 sağ,% 15 altında,% 15 sol dolgu% 25’e ayarlandı. Bu, düğme metninin sayısına/boyutuna bağlı olarak her bir düğmede değişir. Tüm düğmelerin paralel olduğundan ve sayfada aynı genişliğe sahip olduğundan emin olmak için her bir düğme için bu değeri ayarlamanız gerekir. Gölge Kutusu: Yatay ekrana bakın Gölge Kutusu: 58px Dikey Konum Gölge Kutusu: 0 Bulanık Güç Gölge Kutusu: 80PX Kutulu Gölge Kutusu: -43px
Gölge Rengi: RGBA (0.0,0,0.0.5) Kutunun gölge tasarımının anahtarı, yatay konumu ayarlamak ve geni düğmenin sol tarafında görünmeyecek şekilde yaymaktır. Düğmemize son dokunuş eklemek için düğme simgesinin konumunu değiştirin, düğme ok simgemi yeniden konumlandıracağım, böylece her zaman düğmenin sağ tarafına yapışacak. Bu şekilde farklı metinlere sahip bir düğme ekleyebilirsiniz ve oklar her zaman sağ tarafta iyi sıralanır. Bunu yapmak için devam eden sekmeyi açın ve aşağıdaki gibi aşağıdaki özel CSS’yi ekleyin: Sağ: 30px; Şimdi doğrudan sayfadaki sonuçlara bakalım. Daha fazla parça eklemek, sayfanızda daha fazla parça yapmak için yapmanız gereken kolaydır, hatları çoğaltmaktır. Bu nedenle, iki parça daha yapmak için, iki kez kopya ve ardından satır, düğme metninin arka plan görüntüsünü güncelleyin. Düğmenin genişliğinin aynı kalmasını sağlamak için düğmeniz için doğru dolgu yüzdesinin doğru yüzdesini güncellemeniz gerekir. Üç bölümün nihai sonuçları aşağıdadır.Bir cep telefonunda da iyi çalışın! İşte masaüstü ve hücreseldeki düzenin gösterimi: Son zihniniz, bu öğreticideki bu tasarım tekniklerinden bazılarını kullanarak CTA’nın çok şaşırtıcı kısımlarını yapabilir. Mekanlar ve özel sınırlar, tüm tarayıcılarda temiz görünen ve çok iyi ayarlanan parçalarınız ve satırlarınız için benzersiz bir çerçeveleme yapar. Ve harflerle yapılan yaygın yüzen etki, ek kodlar kullanmak zorunda kalmadan bir tür mikro etkileşim elde etmenin iyi bir yoludur. Umarım bu size kendi sitenizde güzel davranmaya davet etmenize ilham verir. Yorumlarda sizden haber almayı umuyorum.
