Divi'nin Yeni Arka Plan Seçeneklerine Sahip Şekillendirme Düğmeleri (6 Tasarım Dahil)

Divi'nin yeni arka plan seçenekleri arayüzünden yararlanmadıysanız, çok şey kaçırıyorsunuz. Arka plan tasarım olanakları şaşırtıcı. Ancak butonlarımız için aynı güçlü tasarım seçeneklerine sahip olmak harika olmaz mıydı? Cevabınız evet ise bu yazıya bayılacağınızı düşünüyorum.

Bugün size aynı güçlü arka plan tasarım özelliklerini stil düğmelerine nasıl getireceğinizi göstereceğim. Bu tasarım hilesi, size 3 katmanlı tasarım yeteneği sağlamak için Satır ve Sütun arka planını düğme modülünün arkasına katmanlar. Bu tür bir güçle işler tehlikeli hale gelebilir. Sakin kalmak ve ilk başta yavaş gitmek en iyisi

Hadi gidelim.

Gizlice Bakış

İşte bu yazıda ele alınan örnek düğme tasarımları.

Divi'nin Yeni Arka Plan Seçeneklerine Sahip Şekillendirme Düğmeleri (6 Tasarım Dahil)

Youtube Kanalımıza Abone Olun

Kurulum

Görsel Bina'yı kullanarak, bir sütun satırı olan normal bir bölüm ekleyin.

Ardından satıra bir Düğme Modülü ekleyin.

Ardından düğme modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Düğme Metni: [metni girin] Düğme URL'si: [URL girin]

Tasarım Seçenekleri

Düğme hizalaması: Merkez
Metin Rengi: Açık
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 48px

Gelişmiş seçenekler

Sütunun genişliğini doldurmak için %100 genişliğe ihtiyacımız olacak. Bunu yapmak için Ana Öğe kutusuna aşağıdaki özel CSS'yi girin:

Width: 100%;

Ayarları kaydet

Düğme kenarlığınız ve metniniz beyaz olduğu için şu anda sayfada hiçbir şey göremezsiniz. Düğme modülü ayarlarını kullanarak düğmenin arka plan rengini şekillendirmek yerine, daha gelişmiş arka plan seçeneklerini kullanarak düğmenin arkasındaki satırın/sütunun arka plan rengini özelleştireceğiz. Butonlar üzerinde daha spesifik tasarımlar yapmaya başladığımızda, buton modülü ayarlarını tekrar gözden geçireceğiz. Ama şimdilik, sırayı ayarlamayı bitirelim.

Yeni düğmenizin oturduğu Satır Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Sütun 1 Arka Plan Gradyanı sekmesini seçin ve ardından beyaz artı sembollü gri dairesel düğmeye tıklayın.

Şimdi, beyaz düğmenizin arkasında varsayılan degrade renklerinin göründüğünü görmelisiniz.

Sütun şimdi düğmemizin arkasına güzelce oturuyor, ancak düğmenin genişliğini azaltmamız gerekiyor. Bunu yapmak için satır boyutlandırma ayarlarını kullanacağız. Satırımız için özel bir genişlik belirleyerek butonumuzun genişliğini de ayarlamış oluyoruz.

Tasarım Seçenekleri

Tasarım seçenekleri altında, aşağıdakileri ayarlayarak satırın boyutunu yeni düğmemize uyacak şekilde ayarlayacağız:

Özel Genişlik Kullan: EVET
Özel genişlik: 500 piksel (bu, düğmenin maksimum genişliğini 500 piksele ayarlar)
Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Gelişmiş seçenekler

Satırın ve sütunun kenarlık yarıçapını, düğmemiz için ayarladığımızla eşleştirmemiz gerekiyor, böylece hepsi eşleşecek.Bunu yapmak için, Ana Öğe kutusuna aşağıdaki özel CSS'yi girin:

border-radius: 10px;

Aynı CSS'yi Sütun Ana Öğesi kutusuna girin:

border-radius: 10px;

Ayarları kaydet

Artık Satır ayarları özel bir genişliğe ve dolguya sahip olacak şekilde güncellendiğine göre, iki şey başarıldı. İlk olarak, butonumuz için başarılı bir şekilde özel bir genişlik belirledik. İkincisi, artık düğmemizi biçimlendirmek için kullanabileceğimiz başka bir arka plan seçeneği katmanımız var.

Bu, daha sonra stil için kullanabileceğimiz toplam 3 arka plan katmanıdır (düğme, sütun, satır).

Düğmenin şu anda nasıl oluşturulduğuna dair bir örnek.

Oldukça havalı değil mi?

Temel kurulum için bu kadar. Şimdi sıra düğmeleriniz için harika tasarımlar yaratmanın eğlenceli kısmına geldi.

Harika Düğme Tasarımları Oluşturma

#1 Video Arka Plan Düğmesi

Bu düğmeyi oluşturmak için, video için satır arka planı, degrade için sütun arka planı ve hafif mavi kaplama için düğme arka planı olmak üzere 3 katmanın tümünü kullanacaksınız.

Satır Ayarları için aşağıdaki İçerik seçeneklerini güncelleyin:

Arka Plan Videosu: [videoyu yükle] Sütun 1 Arka Plan Gradyan Renkleri: rgba(12,113,195,0.41), rgba(131.0.233,0.18)

Ayarları kaydet

Düğme Modülü Ayarları için aşağıdakileri güncelleyin:

İçerik Seçenekleri

Düğme Metni: “Şuna bakın”

Tasarım Seçenekleri

Düğme Arka Plan Rengi: rgba(12,113,195,0.25)
Düğme Kenar Rengi: #0c71c3

Ayarları kaydet

Şimdi elimizde kalan tek sorun, video arka planının sınır yarıçapı. Videoya düğmeyle eşleşen bir kenarlık yarıçapı vermek için bazı özel CSS eklememiz gerekiyor. Bu ekstra kod yalnızca video arka planı düğmesi için gereklidir.

Özel CSS'yi eklemek için Görsel Oluşturucu'dan sayfa ayarlarına gidin ve Gelişmiş sekmesine tıklayın. Ardından, Özel CSS giriş kutusunu aşağıdaki CSS ile güncelleyin:

.et_pb_section_video_bg {

border-radius: 10px;

}

Ayarları kaydet

İpucu : Bir başka harika tasarım seçeneği de videonun üzerine gelindiğinde gösterilmesidir. Düğme modülünüze düz bir arka plan rengi verin ve üzerine gelindiğinde şeffaf olarak değiştirin.

Bu kadar! Artık video arka planı olan bir düğmeniz var.

#2 Damalı Düğme

Damalı düğme, arka plan rengi gradyanlarının iki katmanının (satır ve sütun) kullanılmasını gerektirir.

Bu düğmeyi oluşturmak için 2 katman kullanacaksınız, ilk degrade düzeyi için satır arka planı ve son degrade renk katmanı için sütun arka planı.

Satır Ayarları için aşağıdaki İçerik seçeneklerini güncelleyin:

Arka Plan Degrade Renkleri: #8300e9, #0c71c3
Gradyan Yönü: 270deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %0
Sütun1 Arka Plan Degrade Renkleri: rgba(224,11,0,0.39), rgba(255,255,255,0)
Gradyan Yönü: 180deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %0

Ayarları kaydet

Şimdi Düğme Modülü Ayarlarına gidin ve aşağıdakileri güncelleyin

İçerik Seçenekleri

Düğme Metni: “Abone Ol”

Tasarım Seçenekleri

Düğme Kenar Genişliği: 0px
Düğme Harf Aralığı: 10px
Düğme Yazı Tipi: Varsayılan, Kalın (B), İtalik (I)
Düğme Vurgulu Harf Aralığı: 10px

Bu kadar. İşte nihai sonuç.

Artık düğmelerinize nasıl kareli efekt ekleyeceğinizi biliyorsunuz.

#3 Radyal Degrade Düğmesi

Bu düğmeyi oluşturmak için 2 katman (satır ve sütun) arka plan rengi gradyanları kullanacaksınız.

Satır Ayarları için aşağıdaki İçerik seçeneklerini güncelleyin:

Arka Plan Degrade Renkleri: #8300e9, #0c71c3
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç ​​Konumu: %50
Bitiş Konumu: %100
Sütun1 Arka Plan Degrade Renkleri: rgba(224,11,0,0.39), rgba(255,255,255,0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç ​​Konumu: %50
Bitiş Konumu: %100

Ayarları kaydet

Şimdi Düğme Modülü Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Düğme Metni: “bana ulaşın”

Tasarım Seçenekleri

Düğme Kenar Genişliği: 0px
Düğme Yazı Tipi: Crafty Girls

Düğme Simgesi: [kalp simgesini seçin] Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR

Gelişmiş seçenekler

Son bir dokunuş için butona bir slayt gölgesi ekleyelim. Önceki koda ek olarak, Ana Öğe kutusuna aşağıdaki Özel CSS'yi girin:

box-shadow: 0px 5px 10px 3px #ccc;

Bu kadar! İşte nihai sonucunuz:

#4 Bullseye Düğmesi

Bu düğmeyi oluşturmak için 2 katman (satır ve sütun) arka plan rengi gradyanları kullanacaksınız. Ayrıca, alt kenarlık açılır efektini oluşturmak için düğme modülüne bazı özel css ekleyeceğiz.

Satır Ayarları için aşağıdaki İçerik seçeneklerini güncelleyin:

Arka Plan Degrade Renkleri: #023500, #008c02
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç ​​Konumu: %19
Bitiş Konumu: %0
Sütun1 Arka Plan Gradyan Renkleri: rgba(0,206,72,0.43), rgba(255,255,255,0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç ​​Konumu: %32
Bitiş Konumu: %0

Şimdi Düğme Modülü Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Düğme Metni: “Satın Al”

Tasarım Seçenekleri

Düğme Metin Boyutu: 65px
Düğme Kenar Genişliği: 0px
Düğme Yazı Tipi: Roboto, Kalın(B), Büyük Harf(TT)

Gelişmiş seçenekler

Şimdi son dokunuş için. Ana Öğe giriş kutusundaki mevcut koda aşağıdaki Özel CSS'yi ekleyin:

box-shadow: 0px 5px 0px 0px #01771f;

#5 Görüntü Düğmesi

Bu düğmeyi oluşturmak için, arka plan görüntüsü için satır, gradyan arka planı için sütun ve yarı saydam mavi renk kaplaması için düğme arka planı olmak üzere 3 katmanın tümünü kullanacaksınız.

Satır Ayarları için aşağıdaki İçerik seçeneklerini güncelleyin:

Arka Plan Resmi sekmesi altında

Arka Plan Resmi: [resmi yükle] Arka Plan Resmi Boyutu: Kapak
Arka Plan Resmi Konumu: Merkez
Arka Plan Resmi Tekrarı: Tekrar Yok
Arka Plan Resmi Karışımı: Çarpma

Arka Plan Gradyanı sekmesi altında

Arka Plan Degrade Renkleri: rgba(12,113,195,0.33), #edf000
Gradyan Türü: Doğrusal
Gradyan Yönü: 63deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %100

Şimdi Sütun 1 Arka Plan seçeneklerine gidin ve degrade sekmesini seçin.

Sütun 1 Arka Plan Gradyan Renkleri: rgba(236.239,31,0.66), rgba(0,0,0,0.49)
Sütun Gradyan Türü: Doğrusal
Sütun Gradyan Yönü: 139deg
Sütun Başlangıç ​​Konumu: %12
Sütun Bitiş Konumu: %0

Ayarları kaydet

Bu, ikinci seviye arka plan tasarımlarımızla ilgilenir. Bir tane daha kaldı.

Düğme Modülü Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik seçenekleri

Düğme Metni: “Bilet Al”

Tasarım Seçenekleri

Düğme Arka Plan Rengi: rgba(12,113,195,0.16)
Düğme Kenar Rengi: #efef4f
Düğme Yazı Tipi: Lato
Düğme Simgesi: [Bilet simgesini seçin] Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR

Düğme Vurgulu Metin rengi: #023b7c
Düğme Vurgulu Arka Plan rengi: #023b7c

Bu kadar!. Resim düğmenizi kontrol edin.

#6 Portre Düğmesi

Bu son düğmeyi oluşturmak için yalnızca bir arka plan tasarımı katmanı kullanacağız. Benzersiz bir görünüm oluşturmak için arka plan görüntüsü ve arka plan renginin bir görüntü karışımını kullanacağız.

Satır Ayarları için , 1. Sütun Arka Plan Seçenekleri'ne gidin ve aşağıdakileri güncelleyin:

Sütun Arka Plan Resmi: [portre resmi yükle] Sütun Arka Plan Resmi Boyutu: Sığdır (bu, portrenin her zaman düğmenin içine sığmasını sağlar)
Sütun Arka Plan Görüntüsü Konumu: Sol Orta (bu, portrenizi düğmenin soluna hizalar)
Sütun Arka Plan Resmi Tekrarı: Tekrar Yok
Sütun Arka Plan Görüntüsü Karışımı: Parlaklık (portre ile turuncu rengin güzel bir karışımını oluşturur)

Ayarladıysanız, mevcut degrade renklerini sildiğinizden emin olun. Değilse, turuncu arka planı karıştırabilmek istersiniz. Degrade sekmesine tıklayın ve renk seçici kutusunun üzerine gelin ve sağ üstte açılan çöp kutusu simgesine tıklayın.

Artık portakal karışımını düğmenizde görebilirsiniz.

Ayarları kaydet

Şimdi Düğme Modülü Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Düğme Metni: “Hadi Konuşalım”

Tasarım Seçenekleri

Düğme Hizalama: Sağ
Düğme Kenar Rengi: #ff7b23
Düğme Harf Aralığı: 3px
Düğme Yazı Tipi: Mutlu Maymun
Düğme Simgesi [sohbet simgesi ekle] Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Düğme Vurgulu Harf Aralığı: 3px

Hepsi tamam! Bir blog iletişim düğmesi için bu tasarımı beğendim. Bence hoş bir kişisel dokunuş katıyor.

Farklı sütun yapılarında düğme tasarlama

Şimdiye kadar, düğmelerimizin arka planı olarak hizmet etmek için tek sütun satırlarını kullandık. Bu bize 3 kat arka plan tasarımı sağlar. Ancak farklı bir sütun yapısına buton eklemek isterseniz yapabilirsiniz. Satırı arka plan katmanı olarak kaybedersiniz.

Örneğin, solda bir düğme ve sağda biraz metin bulunan 1/2 1/2 sütun satırı eklemek istediğinizi varsayalım. İşte ne yapardın.

Yeni bir normal bölümle başlayın ve 1/2 1/2 sütun satır yapısını seçin. Ardından sol sütuna bir düğme modülü ekleyin.

Düğme Modülü ayarlarında , Gelişmiş sekmesi altındaki Ana Öğe giriş kutusuna aşağıdaki CSS'yi eklediğinizden emin olun:

Width: 100%;

Düğme modülünün geri kalanını daha sonra özelleştirebilirsiniz.

Ardından, Satır Ayarlarına gidin ve Sütun 1 Arka Plan seçeneklerine gidin ve arka plan ayarlarını istediğiniz gibi güncelleyin.

Ardından Tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Sütun 1 Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol

Ayarları kaydet

Artık sol sütunda, tasarım için sütun 1 arka plan seçeneklerini kullanabilen bir düğmeniz var. Geri dönüp düğme stilini beğeninize göre güncelledikten sonra, metninizi sağ sütuna ekleyin ve işiniz bitti!

Duyarlı mı?

Evet. Düğmeler Divi'nin sütun yapısı içinde oluşturulduğundan, düğmeler tüm cihazlarda güzel bir şekilde yanıt verecektir. Belirli düğme öğelerinin farklı cihazlara nasıl ayarlanacağını ayarlamak için düğme modülü ayarlarını yeniden gözden geçirmeniz gerekebilir.

Çapraz Tarayıcı Desteği

Şu anda, arka plan harmanlama modu CSS özelliği, Internet Explorer veya Edge tarafından desteklenmemektedir ve Safari'nin sınırlı karıştırma seçenekleri vardır. Bununla birlikte, çoğu durumda deneyimlerime göre geri dönüş önemli değil.

Düğmeler IE'de şöyle görünür:

IE'ye bağlıysanız, hem IE hem de diğer tarayıcılarda harika görünen mutlu bir ortam bulmak için onları test etmenizi öneririm.

Son düşünceler

İtiraf etmeliyim ki, bu eğitim kişisel olarak benim için oldukça çığır açıcı. Geçmişte, düğmeleri yaratıcı bir şekilde tasarlamak istiyorsam alt temama bir sürü sınıf ve ek CSS eklemem gerekiyordu. Ama artık Divi'nin arka plan seçeneklerini kullanabildiğim için hayatım çok daha kolaylaştı. Umarım bu tasarım hilesini düğmelerinizi bir sonraki seviyeye taşımak için kullanabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe