Düğmeler, ziyaretçileri bir siteyle etkileşime geçmeye teşvik etmenin harika bir yoludur. Studio Editor'da, metin, bir simge veya her ikisini birden gösteren düğmeler ekleyebilirsiniz. Tasarım ve düzen üzerinde tam kontrole sahipsiniz, böylece tam aradığınız görünümü oluşturabilirsiniz.
Düğme ekleme
Yeni bir düğme eklerken iki kategori arasından bir tasarım saçabilirsiniz:
- Temel Düğmeler: Bu düğmeler sadece metin gösterir ve daha "minimal" bir görünüme sahiptir.
- Tasarımlı Düğmeler: Bu düğmeler hem metin hem simgeler gösterebilir ve daha gelişmiş özelleştirme seçenekleri sunar (ör. görüntülü arka planlar, renk gradyanları ve dahası).
Temel ve tasarımlı düğmeler hakkında daha fazla bilgi edinin
Temel ve tasarımlı düğmeler arasında dikkat etmeniz gereken birkaç fark vardır:
Desteklenen Özellikler
Temel Düğmelerin aksine, Tasarımlı Düğmeler aşağıdaki eylemleri desteklemez:
- Düğmenin tasarımını başka bir ögeye kopyalama
- Düğme metni için içerik önerileri alma
Duyarlı Tasarım Davranışı
Daha küçük ekran boyutlarında, iki düğme farklı duyarlı tasarım davranışları gösterir.
Temel Düğmeler metni otomatik sarar:
Tasarımlı Düğmeler ise üç nokta gösterir:
Bir düğme eklemek için:
- Sol çubuktaki Ekle simgesine
tıklayın. - Düğme seçeneğine tıklayın.
- Tasarımlarda gezinin ve bir Temel Düğme veya Tasarımlı Düğme'yi sayfanıza sürükleyin.
Temel düğmeleri özelleştirme
Temel bir düğme ekledikten sonra, metnini değiştirin ve düğmenin nereye bağlandığını seçin. Bunlar ayarlandıktan sonra tasarımı özelleştirmeye başlayabilirsiniz: Farklı bir dolgu rengi seçin, gölge ekleyin, boşluk ve metin biçimlendirme gibi diğer ayarları yapın.
Temel bir düğmeyi özelleştirmek için:
- İlgili düğmeyi seçin.
- Özelleştirme hedefini seçin:
- Metni Değiştir'e tıklayın.
- Metin alanına yeni metninizi girin.
İpucu: Temel düğmelerin bir simge gösterme seçeneği yoktur ama benzer bir efekt oluşturmak için semboller (örneğin X, +, >) girebilirsiniz.
Düğmeler, sitenin diğer bölümlerine (örneğin, sayfalar, bağlantılar, etkileşim kutuları), harici web sayfalarına ve hatta müşterinize bir e-posta göndermek veya numaralarını telefonla aramak gibi eylemlere yönlendirebilir.
- Bağlantı
simgesine tıklayın. - Soldaki listeden bir bağlantı türü seçin.
- İlgili bağlantı bilgilerini girin.
- Tamam'a tıklayın.
Temel düğmenizin tasarımını 2 farklı duruma uyarlayabilirsiniz: Normal veya Vurgulu. Arka plan rengi, kenarlık veya düğme köşelerinin şekli gibi ayarları değiştirin.
- Editörün sağ üstündeki Denetçiyi Aç okuna
tıklayın. - Sayfayı kaydırarak Tasarım bölümüne ilerleyin.
- Tasarlamak istediğiniz durumu seçin: Normal veya Üzerinde gezinme.
- Mevcut seçenekleri kullanarak düğmenin tasarımını özelleştirin:
- Dolgu Rengi ve Opaklık: Düğmenizin arka plan rengini değiştirin ve opaklığını ayarlayın.
- Kenarlık: Düğmenizin kenarlık kalınlığını ve rengini ayarlayın.
- Köşeler: Düğmenin köşelerinin yarıçapını (px cinsinden) daha yuvarlak veya kare olacak şekilde ayarlayın.
- Gölge : Düğmenize bir gölge efekti ekleyin ve özelleştirin.
- Metin: Düğme metninin biçimlendirmesini ayarlayın.
- Aralık: Metin ile düğme kenarlıkları arasındaki aralığı ayarlayın.
Tasarımlı düğmeleri özelleştirme
Tasarımlı düğmeler tonlarca özelleştirme seçeneği sunar, böylece en ince ayrıntısına kadar tasarlayabilirsiniz. Metni ve simgeyi istenen eylemle eşleşecek şekilde değiştirin, ikisinin nasıl düzenlenmesi gerektiğini seçin, arka plan olarak bir gradyan veya görüntü ayarlayın ve çok daha fazlasını yapın.
Bir düğmeyi özelleştirmek için:
- İlgili düğmeyi seçin.
- Özelleştirme hedefini seçin:
Metni ve/veya simgeyi değiştirin
- Metni ve Simgeyi Değiştir'e tıklayın.
- İhtiyaçlarınıza bağlı olarak şunları yapın:
- Görüntülenenleriseçin alanından bir seçenek belirleyin:
- Metin ve simge
- Sadece metin
- Sadece simge
- Düğme metnini Metin alanından düzenleyin.
- Düğme için farklı bir simge seçmek üzere Değiştir simgesine
tıklayın.
Düğmeler, sitenin diğer bölümlerine (örneğin, sayfalar, bağlantılar, etkileşim kutuları), harici web sayfalarına ve hatta müşterinize bir e-posta göndermek veya numaralarını telefonla aramak gibi eylemlere yönlendirebilir.
- Bağlantı simgesine tıklayın.
- Soldaki listeden bir bağlantı türü seçin.
- İlgili bağlantı bilgilerini girin.
- Tamam'a tıklayın.
Tasarımlı düğmenizin tasarımını 3 farklı duruma göre uyarlayabilirsiniz: Normal, Üzerinde gezinme ve Devre Dışı. Arka plan rengi, kenarlık veya düğme köşelerinin şekli gibi ayarları değiştirin.
- Editörün sağ üstündeki Denetçiyi Aç okuna tıklayın.
- Sayfayı kaydırarak Tasarım bölümüne ilerleyin.
- İlgili durumu seçin: Normal, Üstündeyken veya Devre Dışı.
- Mevcut seçenekleri kullanarak düğmenizi özelleştirin:
- Arka Plan Dolguları: Düğmenizin arka planı için bir renk, gradyan veya görüntü seçin.
- Metin: Düğme metninizin yazı tipini, biçimlendirmesini ve aralığını ayarlayın.Metne gölge eklemek için Gölgeler'e de tıklayabilirsiniz.
- Kenarlıklar: Kenarlıklarınız için bir renk / gradyan seçin ve kalınlığı px olarak ayarlayın.Aynı tasarımı tüm taraflara uygulayabilir veya her tarafı ayrı ayrı özelleştirmek için Kilidi Aç simgesine
tıklayabilirsiniz. - Köşeler: Yarıçapı piksel cinsinden değiştirerek köşelerinizi daha yuvarlak veya keskin hale getirin. Tüm köşeler için aynı yarıçapı ayarlayabilir veya bunları ayrı ayrı özelleştirmek için Kilidi Aç simgesine tıklayabilirsiniz.
- Gölgeler: Rengi, açıyı, mesafeyi, boyutu vb. ayarlarken iç / dış gölge veya birden çok gölge katmanı ekleyin.
- Düzen: Düğmenizde ne gösterileceğini (metin, simge veya her ikisi) ve bunların nasıl düzenlenip hizalanacağını seçin.
- Simge: Düğmenizde görünen simgenin rengini, boyutunu ve açısını ayarlayın.
İpucu:
Farklı opaklık seviyelerine sahip birden çok katman uygulayarak düğmenizin arka planına bir derinlik hissi katın.
Düğmenin düzenini ayarlama
Metnin ve / veya simgenin tam olarak istediğiniz gibi görünmesi için düğmenin hizalamasını, konumunu ve aralığını değiştirin.
- Düzen simgesine
tıklayın. - Mevcut ayarları düzenleyin:
- Görüntülenenleri seçin: Düğmenizde neyin görüntüleneceğine karar verin: Metin ve simge, Yalnızca metin , Yalnızca Simgeveya Hiçbir şey.
- Simge konumu: Hem metni hem de simgeyi göstermeyi seçerken, bunları nasıl konumlandıracağınıza karar verebilirsiniz: yan yana veya alt alta.
- Metin ve simge arasındaki boşluk: Hem metni hem de bir simgeyi göstermeyi seçerken, aralarındaki boşluğu (px cinsinden) ayarlamak için kaydırıcıyı sürükleyebilirsiniz.
- Hizalama: Metni ve simgeyi düğmenin soluna, ortasına veya sağına hizalayın. Ayrıca, Yasla simgesine
tıklayarak bunları düğmenin her iki kenar boşluğuna da hizalayabilirsiniz.
