Buttonエレメントの追加.
訪問者を誘導したい場所へ送る、わかりやすいコールトゥアクションのボタンを設置できます。サインアップフォーム、製品ページ、お問い合わせページへの誘導に使います。
ボタンの追加
ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
- カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Buttonをクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
- ボタンのラベルへの書き換えはTitleの初期テキストで行います。
- 移動先の入力はLinkで行います（
/contactやhttps://example.comなど）。 - 色の指定はTypeで行います。ここではSuccessを選びます。
- サイズはSizeで選びます。ここではLargeを選びます。
- ダイアログのSaveをクリックします。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。
表示内容
入力したラベルのボタンがカラムの一番上に表示されます。動画では大きく緑色で、Register for Open Dayと表示されています。編集中はリンクを開けません。動作確認するには、ページを保存し、ツールバーの表示メニューでPreviewを選んでボタンをクリックします。ページを保存して公開すると、訪問者に表示されます。
ボタンの設定
エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。
- Title: ボタンのテキスト。
- Link: ボタンの移動先。サイト内のパス（
/contactなど）か、完全なURLを指定します。 - Link target: リンクをSame window（同じウィンドウ）で開くかNew window（新しいウィンドウ）で開くか。Linkに値が入ると表示されます。
- Type: 色のスタイル。Primary、Secondary、Success、Info、Warning、Danger、Link、Light、Darkから選びます。
- Block button: ボタンをカラムの幅いっぱいに広げます。
- Outline style: 塗りつぶしなしで、色付きの境界線とテキストを表示します。Linkタイプにアウトラインはなく、常にテキストリンクの見た目になります。
- Size: Normal、Large、Small。
表示されない場合
- ContentタブにButtonがない。 ユーザープロファイルで非表示になっています。管理者にUser Profilesでの有効化を依頼してください。
- 再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
- クリックすると「page not found」になる。 Linkのパスが間違っています。サイト内のパスは
/contactのように/で始まります。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開いて修正します。 - ボタンの見た目が動画と違う。 見た目はType、Outline style、Block button、Sizeで決まります。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開いて確認します。
- リンクが同じタブで開く。 Link targetがSame windowになっています。先にLinkを入力してから、New windowを選びます。
次のステップ
Styleタブでボタンの間隔や背景を変更します。