WordPress’teki düğmenin rengini nasıl değiştirilir
WordPress, sıfırdan bir web sitesi oluşturmak için her şeyi verir. İhtiyacınız olanı elde etmek için çeşitli varsayılan işlevler ve bin eklenti sunar. Ancak, bazen aynı anda birkaç eklentinin kullanılması kullanıcı arayüzünde tutarsızlıklara neden olur. Neyse ki, her şeyi WordPress olarak ayarlayabilirsiniz. En sık sorulan sorulardan biri: “WordPress’teki düğmenin rengini nasıl değiştirilir?” Bu makalede, size rehberlik edeceğiz:
WordPress temasıyla düğmenin rengini nasıl değiştirilir
Wooocommerce’deki düğmenin rengini nasıl değiştirilir
Parola formundaki gönder düğmesinin rengini nasıl değiştirir
Şimdi içeri girelim!
WordPress temasıyla düğmenin rengini nasıl değiştirir, sitenizdeki düğmenin rengini ayarlamanın en kolay yolu WordPress temasını kullanmaktır. Düğmenin rengini tema ile değiştirmek için, yönetici gösterge panelinizdeki görünüm> Özelleştir> Ek CSS’ye gidin. Sitenizdeki tüm düğmelerin rengini değiştirmek için kullandığınız bazı CSS kodu örnekleri. Altbilginizdeki simgeler ve düğmeler için: .social-icons a, #site-footer düğmesi: değil (.toggle), #site-footer .button, #site-footer .Faux-button, #site-footer .wp-block -Button__link, #site-footer. WP-Block-File__Button, #site-footer girişi [type = “düğmesi”], #site-footer girişi [type = “reset”], #site-footer girişi [type = “gönder”] {] {] {] {]
Arka plan rengi: mavi;
Beyaz renk ;
} İçeriğinizdeki düğme için:
Düğme: Not (.toggle), .button, .Faux-Button, .wp-block-button__link, .wp-blok-blok-file. Wp-block-file__button, giriş [type = “düğmesi”], giriş [tür = “” Sıfırlama “], giriş [type =” gönder “], .bg-aksan, .bg-aksan-hover: Hover, .bg-aksan-hover: odak,: kök. Link-reply {arka plan rengi: mavi ;
} Bonus ipuçları, sitenizdeki bağlantının ve menünün rengini de değiştirebilirsiniz. Web sitenizdeki bağlantılar için:. Color-aksan,) :: Birinci harf, .wp-block-button.is-style-outline, a {
mavi ;
} Menü için:
Gövde: değil (. Overlay-başlık). Birincil menu> li> a, gövde: değil (. Overlay-başlık). Birincil menu> .icon,. Modal-menu A,. Footer-menu a ,. Footer-Widgets A, #site-footer .wp-block-button.is-style-outline, .wp-block-pullequote :: Önceden, .singular: değil (. Overlay-başlık). Başlık A,. Başlık-Footer-Group. Renk-aksan, başlık-footer grubu. Renk-aksan-kanat: Hover {
mavi ; Renk değerini her durumda istediğiniz gerçek renkle değiştirmeyi unutmayın. WooCommerce’deki düğmenin rengini nasıl değiştirir WooCommerce düğmesinin rengi, sitenizin çalıştığı tema ile ayarlanır. Sitenizdeki tüm düğmeler için genel bir ayar oluşturmak kolay olsa da, düğmeyi ayrı ayrı ayarlamak istediğiniz zamanlar vardır.
Bu yazıda, Woocommerce düğmesinin rengini değiştirmek için en hızlı yöntemi göstereceğiz. Bu yöntemi sitenizdeki başka bir düğmeye de uygulayabilirsiniz. Adım 1: İlk adım düğmesinden CSS seçmenlerini alın düğmeden bir CSS seçmen almaktır. Sitenizi herhangi bir krom veya web tarayıcısında açın, düğmeyi sağlayın ve inceleyin seçin. Bu örnekte sepete ekle düğmesini kullanacağız. Aynı şeyi diğer düğmelerle de yapabilirsiniz. Yeni bir pencere görünür. HTML kodundaki arabaya ekle düğmesini göreceksiniz. Şimdi, sınıf bölümüne dikkat edin. Düğmenin genellikle üç sınıfı vardır:
single_add_to_cart_button
alternatif
Adım 2: WooCommerce düğmesinin rengini seçin Seçiminiz ilk, düğmenin rengini seçelim. Renk almanın en hızlı yolu Google’a gitmek ve renk seçici bulmaktır.
Buradan seçtiğiniz rengi seçin. Bittiğinde, HEX altında # ile başlayan kodu kopyalayın. CSS kurallarınız için ihtiyacınız olan renk kodu budur. Yukarıdaki ekran görüntüsünde bu #FCBA03. Adım 3: WooCommerce düğmesinin rengini değiştirmek için CSS kurallarını yazın, görünümden alın> Özelleştir> Ek CSS.
Burada, aşağıdaki kod parçalarını yerleştirin. button.single_add_to_cart_button.button.alt {
Renkler: #FCBA03;
} Kutu şöyle görünecektir: bittiğinde, tüm ayarlarınızın değiştirilmesi için yayınlamaya basmayı unutmayın. Sadece bu! Ön uçtaki düğmenizin rengi şöyle görünecek:
Parola formundaki Gönder düğmesinin rengini nasıl değiştireceğiniz, kamu gözünden sabitlenmesi gereken bazı premium içeriğiniz olduğunu söyleyin. WordPress bir şifre koruma işlevi sunsa da, sitenizin tasarımına uygun olarak şifre formunu ayarlama seçeneği sunmaz. İşte o zaman PPWP eklentisini denemelisiniz. Bu eklenti, sadece içerik şifrenizi rahatsızlık vermeden korumanıza değil, aynı zamanda WordPress Customerer ile iyi entegre olmanıza izin verir. Başka bir deyişle, bu CSS satırına dokunmanıza gerek yoktur. Bu eklenti, şifrenizin tüm formlarını, yani site boyunca, tek, kısmen ayarlamanıza olanak tanır. Bu makalede, tek bir şifre formuyla devam edelim. Adım 1: İçeriğinizi bir PPWP eklentisi ile bir şifre ile koruyun WordPress eklentisine ücretsiz olarak bir PPWP eklentisi alabilirsiniz. Sitenizde başarılı bir şekilde yüklediğinizi ve etkinleştirilmiş eklentileri varsayalım. Şimdi sayfalar> sayfaları düzenleyin. Burada, sağdaki WordPress Koruma Şifre bölümümüzü göreceksiniz. İçeriğinizi kilitlemek için Anahtar düğmesini etkinleştirmeniz yeterlidir. Rastgele şifreler otomatik olarak yapılacaktır.
Yeni bir ekleme düğmesi ile özel bir şifre oluşturabilirsiniz. Varsayılan olarak, içeriğiniz şöyle bir şifre formu ile korunacaktır:
Sol taraftaki PPWP tek şifre formunun nesnesini seçin. Ayarlamanız için 3 seçenek vardır.Burada düğmeyi seçin. Düğme stilini etiketten başlayarak, metnin rengini arka plan rengine değiştirebilirsiniz. Rengi doğrudan seçebilir veya renk seçicisinden elde edilen renk kodunu ekleyebilirsiniz. Sadece bu!Parola formunuzun diğer bölümlerini de kolayca ayarlayabilirsiniz.Şimdi WordPress’teki düğmenin rengini nasıl değiştireceğinizi zaten biliyorsunuz, WordPress sitenizdeki düğme rengini ayarlama yönteminde size yönlendirdik.Temanızla ilgili tüm düğmeleri veya WooCommerce’deki sadece birkaç belirli düğmeyi değiştirebilirsiniz.İçeriği PPWP eklentisiyle korursanız, WordPress Customerer aracılığıyla düğmenizin rengini ve tüm lüks şifre formunu oluşturun. Düğmenizin rengini ayarlamak için hangi yöntemi kullanıyorsunuz?Aşağıdaki yorumlar bölümünde bizimle paylaşalım!
