カスタムコードを使用してヒーローバナーにグラデーションオーバーレイを追加する

グラデーションオーバーレイはヒーローバナーの視覚的な外観を向上させ、その上に配置されるコンテンツ（例： 見出し, テキストブロックまたは ボタン―読みやすくなった。

ヒーローバナー要素について

その ヒーローバナー 素子 GemPagesでは、ページ上部に大きく目を引くセクションを作成するためによく使用されます。通常、背景画像または背景色が設定され、その上にコンテンツが表示されます。

ヒーローバナーの背景にコントラストを高めたり、より洗練された外観にしたい場合は、カスタムコードを使用してグラデーションオーバーレイを適用できます。

カスタムコードを使用してグラデーションオーバーレイを追加する方法

ステップ1：カスタムコードパネルを開きます

GemPagesエディタで、 ヒーローバナー カスタマイズしたい要素。

その後、 ヒーローバナー要素を右クリックします をクリックして カスタムコード.

ステップ2：CSSコードを貼り付ける

次のコードを貼り付けます カスタムコード ボックス。

ElementClass .hero-banner-bg:after {

  コンテンツ： "";

  位置：絶対;

  トップ：0;

  左：0;

  右：0;

  下：0;

  background: linear-gradient(45deg, #253956, transparent) !important;

}

ステップ3：プレースホルダー値を置き換える

コードを保存する前に、プレースホルダーの値を希望の設定値に置き換えてください。

• ElementClass を置き換える

要素クラス これは、ヒーローバナー要素の実際のクラスのプレースホルダーです。

ヒーローバナーのクラスに置き換えてください。

• グラデーションをカスタマイズする

次の行はグラデーションの表示を制御します。

background: linear-gradient(45deg, #253956, transparent) !important;

以下の値をカスタマイズできます。

ステップ 4: 変更を保存する

お好みのクラス名とグラデーション設定でコードを更新したら、カスタムコードを保存してください。

グラデーションオーバーレイが期待どおりに表示されていることを確認するために、ページをプレビューしてください。