Renk şemaları
Tema ayarlarınızda farklı renk şemaları tanımlayabilir ve renk şeması seçiciyi kullanarak renk şemalarını online mağazanızın farklı bölümlerine uygulayabilirsiniz. Renk şeması, bir renk kümesidir. Temanızda, istediğiniz zaman tema düzenleyicisinden değiştirebileceğiniz bir dizi varsayılan renk şeması bulunur. Renk paletinizin online mağazanız genelinde tutarlı bir şekilde uygulanmasını sağlamak için marka renklerinizi ekleyebilirsiniz.
Şablonların ayrı renk ayarları olmadığından online mağazanızın tasarımı, web siteniz genelinde tutarlı olur. Şablon, bir mağazanın ana sayfası veya ana içeriği olarak kabul edilir. Mağazanız genelinde farklı renk şemaları olması, kötü bir kullanıcı deneyimine neden olabilir ve müşterilerin ürün satın almadan mağazanızdan ayrılmasına yol açabilir.
Renk şeması ayarını içeren bölümler için online mağaza özelliklerini ve sayfa türlerini inceleyebilirsiniz .
Renk şeması tema ayarları
Renk şemaları, öğeleri ve bunların ilgili renklerini görsel olarak, temsili bir şekilde gruplandıran bir tema ayarıdır. Uyumlu bir renk şemasındaki çeşitli öğelere farklı renkler atayabilirsiniz ve bu şema, bir renk şeması seçici varsa temanız genelinde uygulanabilir. 21 adede kadar renk şemanız olabilir. Ayrıca, şema önizlemesinde, renklerinizin nasıl göründüğüne de göz atabilirsiniz.
| Ayar | Açıklama |
|---|---|
| Arka plan | Renk, bazı bölümlerin arka planına ve dış çizgi düğmesinin arka planına uygulanır. |
| Arka plan gradyanı | Bazı bölümlerin arka planına renk gradyanı uygulanır. Arka plan gradyanı, mümkün olan yerlerde arka planın yerini alır. |
| Metin | Renk, bölüme veya blok metnine uygulanır. |
| Sabit düğme arka planı | Renk, birincil düğme arka planına uygulanır. |
| Sabit düğme etiketi | Renk, birincil düğme metnine uygulanır. |
| Dış çizgi düğmesi | Renk, ikincil düğme metnine ve kenarlıklara uygulanır. |
| Gölge | Renk, gölgelere uygulanır. |
Renk şemanızı yönetme
Mağazanızın renk şeması ve renk seçenekleri, tema ayarlarınızdan belirlenir. Düz renkler için, yeni bir renk seçmek üzere renk seçiciyi kullanın veya metin alanına rengin değerini girin. Renk alanı aşağıdaki renk adlarını ve değerlerini kabul eder:
- Renk adları (
red,black),blue - RGB renk kodları,
- On altılı renk değerleri
Adımlar:
Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Özelleştirmek istediğiniz temanın yanındaki Özelleştir seçeneğine tıklayın.
Önce dişli simgesine, ardından Renkler'e tıklayın.
Şemalar bölümünde, mevcut bir şemaya tıklayın veya yeni bir renk şeması eklemek için Şema ekle'ye tıklayın.
Değiştirmek istediğiniz içerik türü renginin renk numunesi parçasına tıklayın.
Renginizi ayarlamak için bir hex renk kodu girin veya renk seçiciden bir renk seçin. Rengi şeffaf hale getirmek için metin alanındaki hex kodunu silin.
Kaydet'e tıklayın.
Renk şemanızı uygulama
Tema ayarlarınızda renk şemanızı tanımladıktan sonra temanın bölüm ve bloklarında, renk şeması seçiciyi kullanarak bir renk şeması atayabilirsiniz. Renk şeması seçici yalnızca belirli bölümlerde, bloklarda ve genel tema ayarlarında kullanılabilir.
Gradyanlar
Görsel olarak ilginç arka plan seçenekleri oluşturmak için bazı temalarda renk gradyanı ayarlayabilirsiniz. color_background ayarı, CSS arka plan özelliğini özelleştirmek için kullanılır.
Gradyan seçici, renkleri, gradyan tarzını, açıyı, konumu ve gradyanın opaklığını seçmenize olanak tanır. Gradyan seçicide belirlenen tercihler tema düzenleyicisinde gerçek zamanlı olarak görüntülenir. Ayrıca, doğrulama denetleyicisi içeren CSS kodu kullanarak da gradyan arka planı oluşturabilirsiniz.
Gradyanları ayarlama
Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Özelleştirmek istediğiniz temanın yanındaki Özelleştir seçeneğine tıklayın.
Önce dişli simgesine, ardından Renkler'e tıklayın.
Şemalar bölümünde, düzenlemek istediğiniz mevcut bir şemaya tıklayın.
Arka plan gradyanı gibi, bir gradyan renk numunesi parçasına tıklayın.
Daha önce bir gradyan ayarlamadıysanız aralarından seçim yapmanız için önceden ayarlanmış birkaç seçenek gösterilir. Seçenekler panelini açmak için önceden ayarlanmış gradyanlardan herhangi birini seçin.
Gradyan seçeneklerinizi belirleyin:
- Doğrusal veya dairesel gradyan arasında bir seçim yapın. Tercih ettiğiniz gradyan stilini seçmek için düğmeleri kullanın.
- Yukarı ve aşağı okları kullanarak gradyanın açısını ayarlayın. Açı yüzdesini 5 birim artırmak ya da azaltmak için yukarı veya aşağı oka tıklayın.
- Gradyanınızın Konumunu seçmek için kaydırıcıyı kullanın veya alana sayısal bir değer girin.
- Belirli bir rengin hex kodunu girin veya renk kaydırıcısını kullanarak bir ton seçin. Son seçilen renkler, gradyan seçenekleri panelinin alt kısmında görüntülenir.
- Gradyanınızı opak hale getirmek için sağdaki kaydırıcıyı kullanarak gradyanın şeffaflık değerini seçin. Hex renk kodunun yanındaki alana bir yüzde de girebilirsiniz.
Kaydet'e tıklayın.
Gradyanları ayarlamak için CSS kullanma
CSS background özellik değerlerinin çoğu, arka plan rengi ayarlamak için kullanılabilir. Bu alanı düz renkler için (ör. #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) ve hsla(0, 0%, 0%, 1) değerlerinin hepsi düz bir siyah arka plan üretir) veya gradyanlar için (ör. linear-gradient(red, green), radial-gradient(red, green) ya da conic-gradient(red, green)) kullanabilirsiniz. Ayrıca, gradyanlar tekrarlanabilir.
Adımlar:
Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Özelleştirmek istediğiniz temanın yanındaki Özelleştir seçeneğine tıklayın.
Önce dişli simgesine, ardından Renkler'e tıklayın.
Şemalar bölümünde, düzenlemek istediğiniz mevcut bir şemaya tıklayın.
Düzenlemek istediğiniz gradyana tıklayın.
Gradyan'ın yanındaki oka tıklayın ve CSS'yi seçin.
CSS kodu alanına gradyan kodunuzu girin veya yapıştırın. Tema düzenleyicisi önizlemesi, gradyanınızı uygun konumda gösterir.
Kaydet'e tıklayın.
Gradyan kaldırma
Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
Özelleştirmek istediğiniz temanın yanındaki Özelleştir seçeneğine tıklayın.
Önce dişli simgesine, ardından Renkler'e tıklayın.
Şemalar bölümünde, düzenlemek istediğiniz mevcut bir şemaya tıklayın.
Kaldırmak istediğiniz gradyana tıklayın.
Gradyanı kaldır'a tıklayın.
Kaydet'e tıklayın.