Divi'de Akışkan Düğme Tasarımları Oluşturmak için Eksiksiz Bir Kılavuz

Değişken düğme tasarımı, tarayıcı pencerenizin (veya görünüm pencerenizin) boyutuna göre akıcı bir şekilde ölçeklenen bir düğme tasarlama işlemidir. Akışkan web tasarımı uygulamalarının bir düğmenin tüm tasarım özelliklerine uygulanmasını içerir. Bu, düğmenin tasarımını tüm cihazlarda öngörülebilir ve tutarlı hale getirir. Ayrıca, belirli kesme noktalarında tasarımda çok sayıda ayarlama yapmayı içeren geleneksel duyarlı tasarım tekniklerine yenileyici bir alternatiftir.

Bu eğitimde, Divi'de akıcı düğme tasarımları oluşturma sürecinde size rehberlik edeceğiz. İşte ele alacağımız şey:

• Divi Düğmesinin Anatomisi
• Divi'de Sıvı Düğmesi Nasıl Yapılır
• Uzunluk Birimini Anlamak
• Düğme için Değişken (veya Ölçekleyici) Yazı Tipi Boyutu Kullanma
• Bir Akışkan Divi Düğmesinin Anatomisi
• Divi'de Akışkan Düğme Tasarımları Oluşturma (5 Örnek Tasarım)
• Yazı Tipi Boyutu için Clamp() Kullanan Akışkan Düğmeler

Akışkan düğme tasarımı, akışkan tipografisinin uygulanmasına dayandığından, Divi'deki akışkan tipografisi ile ilgili eksiksiz kılavuzumuza göz atmanıza yardımcı olabilir.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Ve işte bu akıcı düğme tasarım konseptini gösteren bir kod kalemi.

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.

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:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi Düğmesinin Anatomisi

Varsayılan olarak, bir Divi Düğmesi, hem px hem de em uzunluk birimlerini içeren yerleşik stillere sahip olacaktır (yukarıdaki resme bakın). px uzunluk birimini kullanan özellikler şunları içerir:

• Yazı tipi boyutu: 20px
• Yuvarlatılmış Köşeler: 3px
• Kenar Genişliği: 3px
• Simge Yazı Tipi Boyutu: yazı tipi boyutuna (20px) göre miras alınır

Bu px değerleri mutlaktır ve yazı tipi boyutunu veya tarayıcı görünüm alanının boyutunu değiştirseniz de aynı kalacaktır.

Em uzunluk birimini kullanan özellikler şunları içerir:

• Dolgu: 0,3em üst, 0,3em alt, 0,7em sol, 2em sağ
• Çizgi Yüksekliği: 1.7em
• Simge Sol Kenar Boşluğu: 0.3em

Bu em değerleri, öğenin (veya düğmenin) yazı tipi boyutuna bağlıdır ve yazı tipi boyutu değiştiğinde değişecektir (ölçek).

Divi'de Sıvı Düğmesi Nasıl Yapılır

Uzunluk Birimini Anlamak

Divi'de akıcı bir düğme oluşturmanın anahtarı, uzunluk birimlerinin nasıl çalıştığını anlamaktır. em uzunluk birimi, öğenin yazı tipi boyutuna göredir (ne olursa olsun). Esasen em değeri, öğenin yazı tipi boyutunun bir katıdır. Örneğin, öğenin yazı tipi boyutu 20px ise, 2em, 2(20px) ile aynıdır. Bu, öğenin yazı tipi boyutu değiştiğinde em uzunluk biriminin değişeceği anlamına gelir. Ancak px uzunluk birimi değişmeyecektir.

Varsayılan örneğimizle devam edersek, düğme için varsayılan sağ dolgu 2em'dir (veya em'nin 2 katıdır). Düğme yazı tipi boyutu 20 piksel olduğundan, sağ dolgu 2 kez 20 pikseldir (ki bu 40 pikseldir). Üst ve alt dolgu 0.3em'dir. Yani üst ve alt dolgu 6 pikseldir (0,3 çarpı 20 piksel, 6 piksele eşittir).

Yazı tipi boyutuna göre em uzunluk birimlerinin gerçek değerini anlamak için aşağıdaki resme bakın.

Düğme için Değişken (veya Ölçekleyici) Yazı Tipi Boyutu Kullanma

Em uzunluk birimlerini kullanarak değişken bir düğme tasarlarken, her şey düğme yazı tipi boyutunun boyutuna bağlıdır. Başka bir deyişle, yazı tipi boyutu, düğme için em uzunluk birimi kullanılarak tüm özelliklerin değerine uygulanacaktır. Bu nedenle, düğme stillerinin akıcı olmasını istiyorsanız, düğmeye değişken (veya ölçekleyici) bir yazı tipi boyutu vermelisiniz. Kullanılacak en yaygın değişken uzunluk birimi, tarayıcı görüntü alanı genişliğine göre olan vw uzunluk birimidir. Başka bir deyişle, tarayıcı genişliği değiştikçe vw uzunluk birimi değişir.

Değişken bir düğme yapmak için 20px yazı tipi boyutunu 2.4vw gibi bir şeyle değiştirin. Bu değer tarayıcı genişliği ile değiştiği için, em uzunluk birimini kullanan tüm düğme özellikleri de tarayıcı genişliği ile ölçeklenir.

Bir Akışkan Divi Düğmesinin Anatomisi

Basitçe söylemek gerekirse, akıcı bir Divi Düğmesi oluşturmak iki temel ilkeyi içerir:

1. Yazı tipi boyutu için değişken uzunluk birimi (vw) kullanın
2. Tüm düğme stili özellikleri için em uzunluk birimi değerlerini kullanın

Bu, kenarlık genişliği, kenarlık yarıçapı ve hatta kutu gölgeleri için em uzunluk birimlerini kullanabileceğiniz anlamına gelir.

Aşağıda, tüm stil özellikleri için değişken yazı tipi boyutu (2.4vw) ve uzun uzunluk birimleri içeren bir değişken düğmesinin resmi verilmiştir.

Em uzunluk birimlerini kullanan her bir özelliğin gerçek değerleri, değişken yazı tipi boyutu değerini ve tarayıcı görüntü alanı genişliğine (vw) göre ölçeği devralır.

Divi'de Akışkan Düğme Tasarımları Oluşturma

Artık akıcı bir düğmenin nasıl oluşturulacağını daha iyi anladık. Divi'de birkaç akıcı düğme tasarımı oluşturalım.

#1 Temel Örnek

Başlamak için, daha önce gösterdiğimiz temel örneği oluşturalım.

Divi Builder'dan yeni bir tek sütunlu satır oluşturun.

Tasarım sekmesi altında, düğme metin boyutunu vw uzunluk birimi değeriyle güncelleyin, böylece görünüm alanı genişliğiyle ölçeklenir:

• Düğme Metin Boyutu: 2.4vw (masaüstü ve tablet), 18.4 piksel (telefon)

Ardından, düğme metin boyutuna göre bir em uzunluk birimi değeriyle aşağıdaki özellikleri güncelleyin:

• Düğme Kenar Genişliği: 0.15em
• Düğme Sınır Yarıçapı: 1.3em
• Düğme Harf Aralığı: 0.05em
• Dolgu: 0,3em üst, 0,3em alt, 1em sol, 2em sağ
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0.15em

İşte nihai sonuç.

#2 Yuvarlatılmış Köşeli ve Kutu Gölgeli Akışkan Düğme

Başlamak için yeni bir düğme oluşturun ve düğme metnini “Başlayın” şeklinde güncelleyin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 2.4vw (masaüstü ve tablet), 18.4 piksel (telefon)
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffffff (masaüstü), #d9f9e9 (fareyle üzerine gelin)
• Düğme Kenar Genişliği: 0.15em
• Düğme Kenar Rengi: #d9f9e9
• Düğme Sınır Yarıçapı: 1.3em

• Düğme Harf Aralığı: 0.05em
• Düğme Yazı Tipi: Jura
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Simgesi: sağ ok
• Düğme Simge Rengi: #000000
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR

• Dolgu: 0,2em üst, 0,2em alt, 1em sol, 2em sağ
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0.3em
• Kutu Gölge Bulanıklığı Gücü: 0,5em
• Kutu Gölge Yayılma Gücü: -0.3em

İşte sonuç.

#3 Benzersiz Kutu Gölgeli ve Simge Yerleşimli Akışkan Düğme

Bu sonraki akıcı düğme tasarımı için benzersiz bir kutu gölgesi ve simge yerleşimi kullanacağız.

Başlamak için önceki örnek #2'yi çoğaltın. Ardından tasarımı güncellemek için çoğalt düğmesinin ayarlarını açın.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Düğme Sınır Yarıçapı: 0px
• Düğme Simge Rengi: #ffffff
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Yatay Konumu: -1.75em
• Kutu Gölge Dikey Konumu: 0px
• Gölge Rengi: #000000

Gelişmiş sekmesi altında, aşağıdaki özel CSS'yi After Element'e ekleyin:

margin-right: .3em;
right: 0;

İşte sonuç.

#4 Üç Renkli Arka Plan Gradyanlı Akışkan Düğme

Bu sonraki akıcı düğme tasarımı için, arka plan gradyanını benzersiz bir kutu gölge stiliyle birleştirerek düğme için benzersiz bir üç renkli arka plan gradyanı oluşturacağız.

Düğmeyi oluşturmak için, daha önce tasarlanmış olan 3 numaralı örnek düğmeyi çoğaltın.

Ardından stilleri güncellemek için düğme ayarlarını açın.

Gelişmiş sekmesi altında, Öğeden Sonra içindeki özel CSS'yi silin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Gradyanı Sol Renk: #f475ee
• Düğme Arka Plan Gradyanı Sağ Renk: #9694fc
• Gradyan Yönü: 90deg
• Bitiş Konumu: 2.5em
• Düğme Kenar Genişliği: 0px
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: -2.5em
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 1.5em
• Kutu Gölge Yayılma Gücü: -1em
• Gölge Rengi: #85c6f2

Ve işte sonuç.

#5 Özel Akışkan Genişliğine sahip Akışkan Düğmesi

Bu sonraki akışkan düğme tasarımı için düğmemize özel bir akışkan genişliği ekleyeceğiz. Bu, tarayıcı genişliğiyle akıcı bir şekilde ölçeklenen daha büyük düğmeler oluşturmamıza olanak tanır.

Düğmeyi oluşturmak için, daha önce tasarlanan örnek #2 düğmesini çoğaltın.

Tasarım sekmesi altında, Düğme Hizalamasını ortalanacak şekilde güncelleyin.

Gelişmiş Sekmesi altında, Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

masaüstü

display:block;
width: 100%;
max-width: 15em;

İşte sonuç.

Nihai sonuçlar

Şimdi 4 akışkan düğme tasarımımızın nihai sonuçlarını görün.

Yazı Tipi Boyutu için Clamp() Kullanan Akışkan Düğmeler

Değişken düğmenizin minimum ve maksimum boyutu üzerinde daha fazla kontrol istiyorsanız, minimum yazı tipi boyutunu, ölçekleyici yazı tipi boyutunu ve maksimum yazı tipi boyutunu ayarlamak için CSS Clamp() işlevini kullanabilirsiniz.

Bunu yapmak için, varsayılan ayara geri dönmesi için düğmelerinizin her biri için düğme metin boyutunu sıfırlamanız gerekir.

Ardından, gelişmiş sekmesi altında, her bir düğmenin Ana Öğesine aşağıdaki CSS'yi ekleyin.

Bu, yazı tipi boyutunun minimum 20 piksel, ölçekleyici (veya akışkan) boyutu 4vw ve maksimum boyutu 40 piksel olmasını sağlar.

Clamp() kullanmanın ana yararı, sıvıya duyarlı tasarımı korurken düğmenin çok büyük veya çok küçük ölçeklenmesini durdurabilmenizdir.

Clamp() ile Nihai Sonuçlar

Kesin Sonuçlar Tekrar

Ve burada, yazı tipi boyutu olarak kıskaç() olan ve olmayan her bir akışkan düğmesi koleksiyonuna son bir bakış.

vw uzunluk yazı tipi boyutunu (masaüstü ve tablet) ve px uzunluk birimini (telefon) kullanma

Minimum, ölçekleyici ve maksimum yazı tipi boyutunu ayarlamak için kelepçe () kullanma

Son düşünceler

Divi'de değişken düğmeler oluşturmak iki ana ilkeye dayanır: (1) Düğmenin yazı tipi boyutu için değişken uzunluk birimi (vw gibi) kullanın ve (2) düğmenin tüm stil özellikleri için em uzunluk birimi değerleri kullanın. Bunu anladıktan sonra, doğru değişken yazı tipi boyutunu bulmak (vw, klemp(), vb. kullanarak) ve ardından düğme tasarımının geri kalanı için çeşitli em değerlerini kullanmak önemlidir. Bu, tarayıcınızın görüntü alanı genişliğini ayarlarken düğmenin mükemmel şekilde akışkan olmasını sağlayacaktır.

Aklında tut. Akışkan düğmeleri, ana kapları da akışkan olmadığında gerçekten çalışmaz. Örneğin, 400 piksellik bir satırın içinde değişken bir düğmeniz varsa, düğmenin ölçeklenecek yeri kalmayacak ve tasarım bozulacaktır. Sıraya %80 veya 90vw genişlik vermek, akıcı düğme tasarımları için daha uygun olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!