セクションのデザイン、保存、使い回し.

1つのセクションを丁寧に作り、必要な全ページで使い回します。オープンキャンパスのコールアウトに、間隔、大きめのフォント、ブランドカラー、角丸でスタイルを付けます。次にページを保存し、セクションをテンプレートとして保持して再度挿入します。各スタイル手順には、詳細用の個別ガイドがあります。

動画ではコールアウトにスタイルを付け、テンプレートとして保存して2度目に挿入しています。

始める前に

• DXPR Builderでページを編集でき、作業用のセクションがあります。最初のページを作るをご覧ください。

設定手順

1. セクション内の+をクリックし、エレメントピッカーのContentタブを開いてTextを選びます。設定ダイアログが開きます。
2. 告知文を入力し、最初の行をHeading 2にします。
3. 同じダイアログのStyleパネルを開き、ボックスモデルのPaddingの上下を40ピクセルにします。
4. サイズ指定はFont sizeを20にします。
5. 白色のFont colorと紺色のBackgroundを選びます。
6. 設定はBorder radiusを12にしてSaveをクリックします。
7. DXPR BuilderツールバーのSaveをクリックします。
8. コールアウトにポイントし、セクション全体の最も外側のコントロールバーにあるMoreをクリックします。次にSave as templateを選び、Template nameを入力してGlobal templateにチェックを付け、Saveをクリックします。
9. DXPR Builderツールバーの+をクリックし、Saved templatesタブを開いて自分のテンプレートをクリックします。
10. DXPR BuilderツールバーのSaveをクリックします。

表示内容

コールアウトは、白色の大きめテキスト、上下の余白、角丸を持つ紺色ブロックです。手順9の後は2つ目のコピーがページにあります。コピーは独立しています。テキストを変えても最初のコールアウトはそのままです。テンプレートは全ページのSaved templatesタブで待機します。Global templateにチェックがあると、他の編集者にも見えます。

各スタイル手順の個別ガイド：

• 間隔：ボックスモデルのパディングとマージンを確認できます。
• タイポグラフィ：フォントサイズとフォント色を確認できます。
• 色とブランディング：ブランドに合う色を確認できます。
• 境界線とシャドウ：境界線の角丸、スタイル、ドロップシャドウを確認できます。
• 背景：エレメント背後の色、画像、効果を確認できます。
• ローとカラムとレスポンシブデザイン：レイアウトと画面サイズを確認できます。
• ユーザーテンプレートと保存したテンプレートタブ：セクションの保存と使い回しを確認できます。

テンプレートが表示されない場合

• Saved templatesタブにテンプレートがない。 保存が終わっていないか、別のサイトにいます。セクションのMoreメニューからもう一度保存し、Searchでテンプレート名を確認します。
• Moreメニューでセクションではなくページ全体を保存した。 DXPR BuilderツールバーのMoreを使っています。セクション自身のコントロールバー（最も外側）のMoreを使います。
• テキストが大きくも白くもならない。 他のエレメントの設定を変えています。Textエレメント自体のSettingsを開き、StyleパネルのFont sizeとFont colorを確認します。

次のステップ

• ユーザーテンプレート：テンプレートの管理、共有、削除を行います。
• デザインガイド：色、ボタン、カード、全幅レイアウトを確認できます。