Divi ile Eşsiz Genişleyen CTA Bölümü Nasıl Oluşturulur

Bir web sitesi oluştururken, ürünlerimizi ve hizmetlerimizi net harekete geçirici mesajlarla (CTA'lar) sergilemek istiyoruz. Düğmeleriniz için daha benzersiz bir tasarım oluşturacaksanız, düğmelerinizin tıklanabilir olup olmadığı konusunda herhangi bir karışıklığı önlemek için fareyle üzerine gelme efektleri eklemenize de yardımcı olur.

Bu öğreticide, öne çıkan ürünleri ve hizmetleri net ve benzersiz CTA'larla sergilemek için bölümleri nasıl tasarlayacağınızı göstereceğiz. Hatta CTA'larınıza genişletilebilir bir vurgulu efekti eklemek için yerleşik Divi tasarım seçeneklerini nasıl kullanacağınızı göstereceğiz.

Gizlice Bakış

İşte bu yazıda oluşturacağımız tasarıma küçük bir bakış.

Neye ihtiyacın var

Bugün ihtiyacınız olacak tek tasarım aracı Divi. Yenileyici ve dengeli bir tasarım oluşturmak için yaratıcı boşluklar, kenarlıklar ve düğmeler eklemek için Divi Builder tasarım seçeneklerini kullanacağız.

Divi ile Eşsiz Genişleyen CTA Bölümü Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Bölümü Tasarlamak

Başlamak için yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Varsayılan olarak Divi, düzenlemeniz için hazır tek sütunlu bir satıra sahip bir bölüme sahip olacaktır. Bu, başlamak için ihtiyacımız olan ş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 sekmesi altında, degrade arka plan sekmesine tıklayın ve aşağıdakileri girin:

Sol Degrade Rengi: #ffffff
Sağ Degrade Renk: #353e45

Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %70;
Bitiş Konumu: %70;

Bu, bölüm içeriği için çerçevemizin sağ tarafı olarak hizmet edecek olan bölüm arka planının yalnızca sağ tarafında koyu mavi rengi oluşturacaktır.

İpucu: Degradenin başlangıç ​​konumuna eşit veya bundan daha küçük bitiş konumunu seçtiğiniz sürece, iki degrade renginin karıştırılmamış kontrastını oluşturabilirsiniz. 90 derecelik eğim yönü, onu mükemmel bir dikey bölme çizgisi yapar.

Ardından, tasarım sekmesine gitmeli ve harika görünecek ve tüm cihazlarda iyi çalışacak bazı özel dolgular eklememiz gerekiyor.

Özel Dolgu: 10vh Üst, 0px Sağ, 10vh Alt, 0px Sol

Not: 10vh, tarayıcının görüntü alanı yüksekliğinin (vh) yüzde 10'u anlamına gelir. Bu, mobil cihazlarımıza ayrı bir değer vermek zorunda kalmadan tarayıcınızı farklı yüksekliklere ayarlarken güzel bir şekilde ayarlanacaktır.

Bölüm çerçeve tasarımımızın üst ve alt kısmını oluşturmak için bölümümüzün üst ve alt kenarlıklarını ekleyeceğiz.

Üst Kenarlık stili sekmesine tıklayın ve aşağıdakileri ekleyin:

Üst Kenar Genişliği: 15vh
Üst Kenar Rengi: #353e45

Ardından Alt Kenarlık stili sekmesine tıklayın ve aşağıdakileri ekleyin:

Alt Bordür Genişliği: 15vh
Alt Kenar Rengi: #353e45

Ayarları kaydet.

Bölüm Satırını Tasarlama

Artık Row'umuzu özelleştirmeye hazırız. Satır ayarlarını düzenlemek ve satır arka plan resminizi degrade kaplama ile vermek için tıklayın.

İlk olarak, arka plan resmi sekmesine tıklayın ve resminizi yükleyin. 1920 piksele 1200 piksel civarında olmalıdır. Ardından aşağıdakileri güncelleyin:

Arka plan resmi Boyutu: Kapak
Arka Plan Resmi Konumu: Merkez
Arka Plan Resmi Tekrarı: Tekrar Yok

Ardından arka plan degrade sekmesine tıklayın ve aşağıdakileri girin:

Sol Degrade Rengi: #ffffff
Sağ Gradyan Rengi: rgba(255,255,255,0)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %15
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Bu, sol taraftaki satırın yalnızca %15'inde beyaz bir kaplama oluşturur.

Şimdi tasarım sekmesine gidin ve satırınıza biraz özel boyut ve boşluk verin.

Bu satırı tam genişlikte yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Sütun Yüksekliğini Eşitle: EVET

Özel Marj: 5vh
Özel Dolgu: %5 Üst, %5 Alt

Ardından, satırın genişliğini ayarlamak için bazı şeffaf kenarlıklar ekleyin.

Sağ Kenar Genişliği: 15vw
Sağ Kenar Rengi: rgba(255,255,255,0)

Sol Kenar Genişliği: 5vw
Sol Kenar Rengi: #ffffff

Ayarları kaydet.

Genişleyen CTA'nızı Oluşturma

Sütun Yapınızı Ekleyin ve Düğme Modülünüzü Tasarlayın

Artık satır ayarlarınız yerinde olduğuna göre, satırınıza üçte iki üçte bir yapı ekleyin ve ardından sol üçte iki sütununa bir düğme modülü ekleyin.

Aşağıdaki seçenekleri güncelleyin:

Buton Metni: Projelerimiz
Düğme URL'si: [url'yi girin]

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 48px (masaüstü), 30px (tablet), 18px (akıllı telefon)
Düğme Metin Rengi: #353e45
Düğme Arka Plan Rengi: #ffffff
Düğme Kenar Genişliği: 0px
Düğme Harf Aralığı: 2px
Düğme Yazı Tipi: Karla
Yazı Ağırlığı: Kalın
Yazı Tipi: Stil: TT
Düğme Simgesi: ekran görüntüsüne bakın
Düğme Simge Rengi: #cb9d85
Düğme Vurgulu Harf Aralığı: 6px (masaüstü), 3px (tablet), 2px (akıllı telefon)

Bu tasarımın anahtarı, bir kullanıcı düğmenin üzerine geldiğinde genişleme efektini tetiklemek için düğme vurgulu harf aralığını kullanmaktır. Genişleyen mesafeyi azaltmak için mobildeki değerleri düşürdüm.

Ardından, tasarımı tamamlamak için düğmenize biraz özel dolgu ve kutu gölgesi ekleyin.

Özel Dolgu: %15 Üst, %24 Sağ, %15 Alt, %15 Sol

Sağ dolgu %25 olarak ayarlanmıştır. Bu, düğme metninin miktarına/boyutuna bağlı olarak her düğmede değişecektir. Tüm düğmelerin aynı hizada olduğundan ve sayfada aynı genişlikte göründüğünden emin olmak için her düğme için bu değeri ayarlamanız gerekecektir.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 58px
Kutu Gölge Dikey Konumu: 0
Kutu Gölge Bulanıklığı Gücü: 80px
Kutu Gölge Yayılma Gücü: -43px

Gölge Rengi: rgba(0,0,0,0.5)

Kutu gölge tasarımının anahtarı, gölgenin düğmenin sol tarafında görünmemesi için yatay konumu ve yayılma gücünü ayarlamaktır.

Düğme Simgesini Yeniden Konumlandırın

Düğmemize son bir dokunuş eklemek için düğme ok simgemi her zaman düğmenin sağ tarafına sarılacak şekilde yeniden konumlandıracağım. Bu şekilde farklı metinlere sahip düğmeler ekleyebilirsiniz ve ok her zaman sağ tarafta güzel bir şekilde hizalanacaktır. Bunu yapmak için gelişmiş sekmeye gidin ve aşağıdaki özel CSS'yi girdikten sonra kutusuna ekleyin:

right: 30px;

Şimdi canlı sayfadaki sonucu kontrol edelim.

Daha Fazla Bölüm Eklemek Kolaydır

Sayfanızda daha fazla bölüm oluşturmak için yapmanız gereken tek şey satırı çoğaltmak. Bu nedenle, iki bölüm daha oluşturmak için satırı iki kez çoğaltın ve ardından satır arka plan resmini, düğme metnini güncelleyin. Düğmelerin aynı genişlikte kalmasını sağlamak için düğmeniz için doğru dolgu yüzdesi değerini de güncellemeniz gerekir.

İşte üç bölümün de nihai sonucu.

Mobilde de harika çalışıyor!

Masaüstü ve mobil cihazlarda düzen şöyle görünür:

Son düşünceler

Bu eğitimde bu tasarım tekniklerinden bazılarını kullanarak oldukça şaşırtıcı CTA bölümleri oluşturabilirsiniz. Özel boşluk ve kenarlıklar, tüm tarayıcılarda temiz görünen ve harika bir şekilde ayarlanan bölümünüz ve satırlarınız için benzersiz çerçeveler oluşturur. Harf aralığıyla oluşturulan genişleyen vurgulu efekti, ek kod kullanmak zorunda kalmadan bir tür mikro etkileşim elde etmenin harika bir yoludur.

Umarım bu, kendi sitenizde güzel harekete geçirici mesajlar oluşturmanız için size ilham verir.

Yorumlarda sizden haber bekliyorum.