行内の列の背景を設定する

列に背景を追加すると、デザインの柔軟性が向上し、ストアのブランドに合わせて視覚的に区別できるセクションを作成できるようになります。これにより、コンテンツを効果的に分離し、読みやすさを向上させ、重要な要素を強調することができます。

行内の列の背景を設定するにはどうすればよいでしょうか?

GemPagesはすでに背景色の設定をサポートしています。 行要素 簡単に。 

この機能を利用して、以下の簡単な方法で行内の列の背景を設定できます。

オプション 1: 列内に行をネストして背景を設定する

ステップ1： エディターの左側のサイドバーから行要素をドラッグ＆ドロップします。例えば、3列の行を作成します。

ステップ2： 各列内に新しい行をネストします。必要に応じて各列にコンテンツを追加します。

ステップ3： 手順2で作成したネストされた各行をクリックして設定を開きます。下にスクロールして 経歴 セクションの横にあるボックスをクリックします 色圏 背景色の設定。

注意： この方法は、ネストされた行の高さが等しい場合に最適です。各列内のコンテンツのサイズが異なる場合、背景が不均一になる可能性があります。

オプション 2: カスタム コードを使用して列の背景を設定する

この方法では、各列の背景色を個別に設定するカスタム コードを追加します。 

次の手順に従います。

ステップ1： 各列内にネストされた行を追加します。必要に応じて、各ネストされた行にコンテンツを追加します。

ステップ2： メインの行要素のラベルを右クリックし、 カスタムコード.

ステップ3： コードエディタダイアログで、 CSS タブをクリックして、次のカスタム コードを追加します。

[data-component-tag="Col"] {

  background-color: #yourdesiredcolor;

}

交換する #yourdesiredcolor ご希望のカラーコードを入力してください。例えば、#FFBAADというカラーコードを入力し、 Save

ステップ4： 結果を確認し、保存して公開し、設定を有効にします。