最初のページを作る.

DXPR Builderを学ぶここから始める最初のページを作る

DXPR Builderでページを作ります。見出し横の画像、短い段落、ボタンです。既製のテンプレートから始めて文言を変えることもできます。どちらも数分で、保存したページを訪問者の見た目でプレビューして終わります。このページはDXPR Builderのインストールの後に使います。

動画ではページを一から作ります。セクション、ロー、画像、ボタン、テキスト、保存、プレビューの順です。

始める前に

  • DXPR Builderはプロダクトキー付きでインストール済みです(DXPR Builderのインストール)。
  • コンテンツタイプがビルダーを表示します。そのテキストフィールドはDXPR Builderフォーマッターを使っています。Drag and drop Page(dxpr_builder_page)などが例です。
  • 自分のロールにEdit with DXPR Builder権限があります。

ページの作成

  1. 開くのはContent > Add contentで、ビルダーを表示するコンテンツタイプを選びます。
  2. タイトルはTitleに入力し、Saveをクリックします。

保存したページが空のビルダーで開きます。DXPR Builderはこのページ上で動作し、編集フォーム上ではありません。

方法A:テンプレートから始める

タブSaved templatesには、サイトの人々が使い回し用に保存したレイアウトが一覧されます。DXPR CMSにはいくつか付属します(例:Colored icon boxes)。他のサイトではタブが空の場合があります。その場合は空ページのChoose a templateで、DXPR Builder付属のページテンプレートを選びます。保存したテンプレートの挿入ではこの手順を動画で説明します。

  1. クリックするのはAdd Elementsで、エレメントピッカーを開きます。
  2. 切り替えるのはSaved templatesタブです。
  3. テンプレートをクリックして挿入します。そのセクション、ロー、エレメントがページに表示され、編集可能な状態になります。
  4. ツールバーのSaveをクリックします。
  5. 目メニューを開いてPreviewを選び、訪問者の見た目でページを確認します。

方法B:一から作る

上記の動画はこの手順どおりです。

  1. クリックするのはAdd Elementsで、SectionをLayoutタブで選びます。
  2. セクションのコントロールバーにある+をクリックし、Rowを選びます。
  3. ローのグリッドアイコンをクリックし、1/3 + 2/3のようなカラムプリセットを選んでSaveをクリックします。
  4. 左カラムの+をクリックし、Contentタブを開いてImageを選びます。
  5. クリックするのはSelect Imageで、Apply filtersでメディアブラウザーを検索して写真にチェックを付け、Insert selectedをクリックします。
  6. 開くのはSEOパネルで、Alt attributeを入力してSaveをクリックします。
  7. 右カラムの+をクリックしてButtonを選びます。
  8. 入力するのはTitleとLinkで、Typeを選んでSaveをクリックします。
  9. 広いカラムのコントロールバーにある+をクリックしてTextを選びます。
  10. 見出しを入力してHeading 2に設定し、下に段落を入力してSaveをクリックします。
  11. ツールバーのSaveをクリックします。
  12. 目メニューを開いてPreviewを選び、訪問者の見た目でページを確認します。作業を続けるには同じメニューでEditを選びます。

追加内容の変更

  • Text:Textエレメントをクリックしてその場で編集します。ツールバーでは太字、斜体、見出し、リンク、リスト、フォント色などが使えます。表示されるボタンはユーザープロファイルで決まります。
  • Settings:エレメントのコントロールバーにあるMoreを開いてSettingsを選びます。Imageには幅、高さ、リンク、altテキスト、ButtonにはType、サイズ、リンクがあります。
  • Order:エレメントをコントロールバーで別の場所にドラッグします。

終わったらツールバーのSaveをクリックします。未保存の変更があるままページを離れようとすると、ブラウザーが警告します。

表示内容

表示はPreviewで、画像が左にあります。見出し、段落、ボタンはコントロールバーなしで右にあります。Editに戻ると、各エレメントはカーソルを合わせるとコントロールバーを表示します。DXPR Builderはページを編集対象フィールド(通常はBody)のHTMLとして保存します。コンテンツの公開後に訪問者にページが見えます。

Add Elementsボタンが表示されない場合

  • 空ページに「Choose a template」と「Or add elements using the +」と出る。 Enable page creation assistantが/admin/dxpr_studio/dxpr_builder/ai_settingsでオフです。代わりにビルダーツールバーの+をクリックしてエレメントピッカーを開きます。
  • ページにビルダーがまったく出ない。 コンテンツタイプがDXPR Builderフォーマッターを使っていないか、ロールにEdit with DXPR Builderがありません。インストールの確認の手順をご覧ください。
  • Saved templatesタブにテンプレートがない。 サイトでまだ誰も保存していないか、ユーザープロファイルで非表示です。空ページのChoose a templateを使うか、自分のテンプレートを保存します。
  • 再読み込み後に変更が消えている。 ページが保存されていません。ページを離れる前にビルダーツールバーのSaveをクリックします。

次のステップ

  • 編集ツール:すべてのコントロールとキーボードショートカットを確認できます。
  • エレメント:22のコンテンツエレメントと6つのレイアウトエレメントを確認できます。
  • レイアウト:画面ごとに合わせるセクション、ロー、カラムを確認できます。