Cardエレメントの追加.
ヘッダーとタイトルを持つ枠付きのボックスで、中にテキストやボタンなどのエレメントを入れられます。サービス、チーム紹介、料金プランなど、関連するコンテンツをまとめるのに使います。
カードの追加
ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
- カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Cardをクリックします。ダイアログなしでカラムの一番上に追加されます。
- カーソルを合わせて、コントロールバーのMoreをクリックし、Settingsを選びます。Headerを入力します（例：Investor Relations）。
- カードのTitleを入力します（例：Q3 Results Published）。
- カードのスタイルとしてTypeを選びます。ここではPrimaryを選びます。テキストは自動的に白色になります。
- ダイアログのSaveをクリックします。
- カードにカーソルを合わせ、カラム側ではなくカード自身のコントロールバーの+をクリックします。空のカード本文にある+でもかまいません。カードはコンテナのため、Buttonを追加します。ラベルとリンクはButtonの手順で設定します。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。
表示内容
選んだ色のカードにヘッダーとタイトルが表示され、中にボタンが入ります。動画ではInvestor RelationsとQ3 Results PublishedがPrimaryカードに表示されています。ボタンは通常のButtonエレメントのため、個別に編集やスタイル設定ができます。ページを保存して公開すると、訪問者に表示されます。
カードの設定
エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。
- Header: カード上部のバー内のテキスト。空にするとバーは非表示になります。
- Title: カード本文上部の見出し。
- Type: カードの色。Default、Primary、Secondary、Success、Info、Warning、Danger、Dark、Lightから選びます。DefaultとLight以外は白色テキストになります。
カードはコンテナです。本文の中にテキスト、画像、ボタンなどのエレメントを追加したり、ドラッグ＆ドロップしたりできます。
表示されない場合
- ContentタブにCardがない。 ユーザープロファイルで非表示になっています。管理者に依頼して、Card (Bootstrap 4/5)にElementsのUser Profilesでチェックを付けてもらいます。
- 再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
- カードに境界線しかなく中身がない。 まだ中にエレメントが入っていません。カードにカーソルを合わせ、コントロールバーの+をクリックしてText、Image、Buttonを追加します。
- ヘッダーバーがない。 Headerフィールドが空です。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開いてヘッダーを入力します。
- カードのテキストが読みにくい。 ほとんどのTypeは白色テキストのため、Warningのような明るい色では薄く見えます。より濃いTypeを選ぶか、Lightを選びます。
次のステップ
Styleタブでカードの間隔や背景を変更します。