グローバルスタイル

グローバル スタイルをカスタマイズするには?

色

グローバルスタイルはサポートしています 15 種類のグローバルカラー 5つのカテゴリーに分かれています:

• ボタンの色
• テキストの色
• 背景色
• カラーライン
• アクセントカラー 

これらの色は公開されたテーマから生成されます。 既存の色を置き換えるには、その色をクリックしてパレットから別の色を選択します。

各カラー オプションが及ぼす影響:

• ボタンの色： ボタン要素で作成されたすべてのボタン（例：カートに追加ボタン、CTAボタン）に適用されます。定義されている場合、メインの塗りつぶし色とホバー状態を制御します。
• テキストの色： 見出し、段落、その他のテキストベースの要素のデフォルトのフォント色を設定します。
• 背景色： カルーセル、カスタムコード、ポップアップ、アイコン、商品リスト（ドットカラー）、カウントダウンタイマー、ヒーローバナー、アイコンリスト、詳細リスト、マーキー、バンドル割引、商品カスタムフィールドなど、サポートされている要素の背景色をプリセットで設定します。
• 線の色: レイアウト全体の区切り線、境界線、セパレーターの色に影響します。
• アクセントカラー: リンク、アイコン、ホバー効果などのハイライトやインタラクティブな要素に使用されます。

色を変更するには、カラーボックスをクリックし、パレットから新しい色合いを選択します。変更は、これらのグローバルカラー変数にリンクされているすべての要素に自動的に適用されます。

フォントマネージャー

グローバルスタイルは2種類のテキストスタイルを提供します。 見出し and 段落ドロップダウンメニューから好みのオプションを選択できます。使用するフォントは Googleのフォント. 

タイポグラフィ

GemPagesは6種類の 見出し と3種類の 段落要素設定では、テキスト スタイルに関連するすべての設定は、これらのグローバル タイポグラフィ設定から選択されます。

GemPagesをインストールすると、グローバルタイポグラフィがテーマのテキストスタイルと同期されます。Shopifyテーマから同期されるタイポグラフィ情報には以下が含まれます。 フォント ファミリ、フォント サイズ、行の高さ、フォントの太さ、フォント スタイル, 文字間隔.

間隔

GemPagesでは、グローバルな間隔値を設定することで、ウェブサイトの間隔を同期させることができます。 10タイプ 利用可能なグローバル間隔は 3 つあり、それぞれ 3 つのデバイスの値でカスタマイズできます。 デスクトップ, タブレット, モバイル.

グローバル間隔のデフォルトの単位はピクセル（px）です。グローバル間隔は、マージン、パディング、アイテム間隔、列間隔の設定に使用できます。

デフォルトの行幅

デフォルトの行幅について

ページは通常、複数のセクションで構成され、各セクションには異なるスタイルが必要です。たとえば、Hero Banner などのセクションには通常背景があり、これを全幅に設定すると便利です。ただし、他のセクションでは、レイアウトを維持し、コンテンツを画面の中央に配置するために、幅が固定されています。したがって、このようなセクションの幅を自動的に調整するには、ユニバーサル値が必要です。

使用方法

• 行幅

GemPagesはデフォルトの幅の値を 1200px デスクトップ用と 100% タブレットとモバイル向けで、現在のすべてのテンプレートに適しています。GemPages によってこの値が自動的に適用されるため、調整する必要はありません。 

ただし、異なる幅の値が必要な場合は、ボックスに数値を入力できます。たとえば、1000px と入力すると、全幅ではないセクション/行のデフォルトの幅は 1000px になります。

• ページパディング

セクション/行の希望するパディングの数値を入力します。このパディングは全幅のセクション/行には適用されないことに注意してください。

コー​​ナー

GemPages では、グローバル コーナー値を設定することで、Web サイトで使用されるコーナーを同期できます。3 つのコーナー スタイルを定義できます。 S, 技法, L。 をクリックするだけです 鉛筆 ピクセル単位で値を入力するためのアイコン。  

よくあるご質問

GemPages でグローバル スタイルを無効にできますか?

• エディタで要素を選択する
• 要素の設定タブで、色、フォント、間隔、境界線の値を手動で設定します。