Jumbotronエレメントの追加.

タイトル、リード文、ブランドらしい背景を持つ大きなヒーローバナーを設置できます。ボタンを入れる準備ができています。ページの冒頭、イベントの告知、1つの行動への誘導に使います。

ジャンボトロンの追加

1. カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Jumbotronをクリックします。
2. タイトル欄のTitleに入力します。
3. イベントを売り込むLead文を追加します。
4. 背景のTypeを選びます。白色テキストのPrimaryが目立ちます。
5. ダイアログのSaveをクリックします。
6. ジャンボトロン内の+をクリックしてButtonを追加します。ジャンボトロンはコンテナのためです。

次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。

表示内容

タイトル、リード文、ボタンが、カラムいっぱいのブランドらしいバナーに収まります。ボタンはジャンボトロン内の通常のButtonエレメントのため、個別に編集やスタイル設定ができます。

ジャンボトロンの設定

エレメントのMore > Settingsを開きます。設定項目は次のとおりです。

• Title: ジャンボトロンに表示するメインの見出し。
• Lead: タイトル下の大きめの導入文。
• Type: 背景のスタイル。Light、Primary、Secondary、Success、Info、Warning、Danger、Dark、Defaultから選びます。
• Padding: コンテンツまわりの内側の間隔。Large、Medium、Smallから選びます。

ジャンボトロンはコンテナです。中に他のエレメントをドラッグしたり、追加したりできます。ボタン、画像、追加のテキストなどです。

表示されない場合

• ContentタブにJumbotronがない。 ユーザープロファイルで非表示になっています。管理者にUser Profilesでの有効化を依頼してください。
• 再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
• バナーに「+」しか表示されない。 まだ中にエレメントが追加されていません。ジャンボトロンの+をクリックしてButtonやTextを選びます。
• 明るい背景に白いテキストになっている。 TypeがLightで、テーマのテキストも明るい色です。PrimaryかDarkを選びます。

次のステップ

Styleタブでジャンボトロンの間隔や背景を変更します。