ヒーローセクションをデザインする.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここでは画面いっぱいのヒーローを作ります。背景写真、見出し、補足1行、ボタンで、 訪問者のスクロールより写真が遅く動きます。どのページの上部にも使えます。このヒーローを中心にページ全体を作るには、次にマーケティングランディングページを作るを ご覧ください。

動画ではレポート製品のヒーローを作ります。

はじめる前に

  • ロールがEdit with DXPR Builder権限を持ちます。
  • メディアライブラリーに幅広写真があります。横1920ピクセル以上です。
  • ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。

手順1: セクションを追加する

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。ホバーしてMore > Settingsを開きます。
  2. 選ぶのはHTML classes下のAlign text centerです。見出し、テキスト、ボタンが一緒に中央寄せになります。
  3. オンにするのは100% heightでヒーローを画面いっぱいにし、Vertical centeringでコンテンツを中央に置きます。
  4. 開くのはStyleパネルで、Background image下でSelect Imageをクリックし、幅広写真にチェックしてInsert selectedをクリックします。
  5. 設定するのはBackground styleをCoverにし、写真をセクションいっぱいにします。
  6. 暗いBackground色を選びます。写真読み込み中に表示します。Font colorを白にしてSaveをクリックします。

ヒント

写真を500 KB未満に圧縮するとヒーローが速く読み込まれます。

手順2: ボタンを追加する

  1. セクションの+をクリックし、ContentタブからButtonを選びます。
  2. 設定するのはTitleに「無料トライアルをはじめる」、Linkに/trial、写真上のコントラスト用にTypeにLight、SizeにLargeにし、Saveをクリックします。

手順3: 見出しを追加する

  1. セクションの+を再びクリックし、ContentタブからTextを選びます。新規エレメントは上に載るため、ボタンの上に載ります。
  2. 見出しを入力します。「チームに追従するレポート」とし、見出しドロップダウンからHeading 2を選びます。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。
  3. 補足1行を加えます。「ダッシュボード、アラート、連携を1つのワークスペースに。数分で設定でき、開発者は不要です」
  4. 対象はStyleパネルでFont colorを白にし、Saveをクリックします。

手順4: パララックスを追加する

  1. セクションにホバーしてMore > Settingsを再び開きます。
  2. 開くのはBackground effectsパネルで、Background effectをParallax imageにします。Parallax speedは20ではじまります。強い効果には35までドラッグしてSaveをクリックします。

手順5: ヒーロー下にコンテンツを追加する

  1. ヒーローにホバーしてAdd Section Belowをクリックします。スクロール先のコンテンツ用です。
  2. 新セクションの+をクリックし、ContentタブからTextを選びます。見出しと短い段落を入力し、最初の行をHeading 2にしてSaveをクリックします。

手順6: 保存してプレビューする

  1. ビルダーツールバーのSaveをクリックします。
  2. ビューメニュー (eye icon、目のアイコン) を開き、Previewを選んで下へスクロールします。

さらに進む

動画にはありません。

  • オーバーレイ: Background effectをGradientにして、暗いStart colorとEnd colorを50%程度の不透明度で選びます。どの写真でもテキストが読めます。効果値は1つのため、オーバーレイはパララックスを置き換えます。
  • 短いヒーロー: 100% heightをオフにし、Styleパネルでセクション独自の上下パディングを付けます (例: 100ピクセル)。
  • 幅広ボタン: Block buttonをオンにするとカラム幅のボタンになります。

バリエーション

動画構成の代替案です。

動画背景ヒーロー

  1. 対象はBackground effectsパネルで、Background effectをYouTube videoにします。
  2. 動画URLをYouTube video URLに貼ります。
  3. 対象はVideo options下でLoopとDisable on mobile devicesにチェックします。音声はオフのままです。

グラデーションのみヒーロー

背景画像を使わず、Gradient効果に2つの濃いブランド色を使います。速く読み込まれるヒーローです。

分割ヒーロー

  1. セクション内にRowを追加します。2つの均等カラム付きで入ります。
  2. テキストとボタンを左カラムに、画像を右カラムに置きます。

表示結果

写真が画面いっぱいに広がり、見出し、補足行、無料トライアルをはじめるボタンが白で中央寄せに載ります。2つ目のセクションへ下ると、写真はページより遅く動きます。

図通りにならない場合

  • ヒーローがテキストと同じ高さしかありません。 100% heightがオフです。セクション設定でオンにしてSaveをクリックします。
  • スクロールしても写真が動きません。 Background effectがSimple imageのまま、Parallax speedが0、またはヒーロー下にスクロール先がありません。Parallax imageにし、Parallax speedを0超にドラッグして、手順5の2つ目のセクションを追加します。
  • 写真の上で見出しが暗いままです。 Textエレメントに独自Font colorがありません。Styleパネルを開き、Font colorを白にします。

次はこちら