サイト訪問者は、ファーストビューからベネフィットセクションまでの情報を閲覧することで、自分自身の課題とそれを解決することのメリット、そしてあなたの商品・サービスについて把握ができています。

このタイミングでより詳しい情報を記載したページへ誘導するのが商品セクションの役割です。

設定方法

WordPress管理画面 > 外観 > カスタマイズ > フロントページ設定 > 商品セクション設定をクリックすると下記画面が表示されます。

商品セクション設定

商品セクションのデザインは、見出しとテキストだけのシンプルな構成です。

画像

パララックス設定に使う背景画像を指定します。タイトルと説明文が固定された状態でスクロールに応じて背景画像の見える範囲が上下に移動する差効果のことです。背景画像サイズは、横幅:1920px 高さ:1280pxを推奨します。

画像の高さ

背景画像が見える範囲を高さで指定します。初期値は400pxです。タイトルや説明文のボリュームなどで高さを調整してください。

メッセージレイアウト

タイトルと説明文の配置を左配置、中央配置、右配置の3つから選択することができます。背景画像の内容に合わせてお好みの配置をお選びください。

タイトル

商品・サービスの名称だけでなく、PRポイントを入れて簡単なキャッチコピーを作成してください。下に続く説明文で細くすることができるので、シンプルなタイトルで問題ありません。

説明文

ボタンのクリックを誘導するために、タイトルの内容を補足し、サイト訪問者がボタンをクリックしたくなるような説明文を作成してください。

ボタンテキスト

ボタンテキストには、ボタンをクリックするとどうなるのかイメージできる文言を入力してください。例1 お問い合わせ 例2 サービス詳細を見る など

ボタンURL

固定ページなどのURLを入力します。ボタンをクリックするとコンタクトフォームセクションに自動スクロールするようにしたい場合、#contactfrom-sectionと入力してください。

配色設定

商品セクションでは、背景画像に色を覆いかぶせることで、テキストを際立たせる配色が可能です。以下、デモサイトの配色パターンをご紹介しますので参考にしてください。

  • タイトルと説明文の配色:#fff
  • ボタンの配色:#c6aa5b
  • ボタンテキストの配色:#fff
  • 背景色:#000
  • 景色の透過率:スケールバーを中央の位置
  • パターンフィルター:チェック柄
スポンサーリンク