最初のページを作る.
DXPR Builderでページを作ります。見出し横の画像、短い段落、ボタンです。既製のテンプレートから始めて文言を変えることもできます。どちらも数分で、保存したページを訪問者の見た目でプレビューして終わります。このページはDXPR Builderのインストールの後に使います。
動画ではページを一から作ります。セクション、ロー、画像、ボタン、テキスト、保存、プレビューの順です。
始める前に
- DXPR Builderはプロダクトキー付きでインストール済みです(DXPR Builderのインストール)。
- コンテンツタイプがビルダーを表示します。そのテキストフィールドはDXPR Builderフォーマッターを使っています。Drag and drop Page(
dxpr_builder_page)などが例です。 - 自分のロールにEdit with DXPR Builder権限があります。
ページの作成
- 開くのはContent > Add contentで、ビルダーを表示するコンテンツタイプを選びます。
- タイトルはTitleに入力し、Saveをクリックします。
保存したページが空のビルダーで開きます。DXPR Builderはこのページ上で動作し、編集フォーム上ではありません。
方法A:テンプレートから始める
タブSaved templatesには、サイトの人々が使い回し用に保存したレイアウトが一覧されます。DXPR CMSにはいくつか付属します(例:Colored icon boxes)。他のサイトではタブが空の場合があります。その場合は空ページのChoose a templateで、DXPR Builder付属のページテンプレートを選びます。保存したテンプレートの挿入ではこの手順を動画で説明します。
- クリックするのはAdd Elementsで、エレメントピッカーを開きます。
- 切り替えるのはSaved templatesタブです。
- テンプレートをクリックして挿入します。そのセクション、ロー、エレメントがページに表示され、編集可能な状態になります。
- ツールバーのSaveをクリックします。
- 目メニューを開いてPreviewを選び、訪問者の見た目でページを確認します。
方法B:一から作る
上記の動画はこの手順どおりです。
- クリックするのはAdd Elementsで、SectionをLayoutタブで選びます。
- セクションのコントロールバーにある+をクリックし、Rowを選びます。
- ローのグリッドアイコンをクリックし、1/3 + 2/3のようなカラムプリセットを選んでSaveをクリックします。
- 左カラムの+をクリックし、Contentタブを開いてImageを選びます。
- クリックするのはSelect Imageで、Apply filtersでメディアブラウザーを検索して写真にチェックを付け、Insert selectedをクリックします。
- 開くのはSEOパネルで、Alt attributeを入力してSaveをクリックします。
- 右カラムの+をクリックしてButtonを選びます。
- 入力するのはTitleとLinkで、Typeを選んでSaveをクリックします。
- 広いカラムのコントロールバーにある+をクリックしてTextを選びます。
- 見出しを入力してHeading 2に設定し、下に段落を入力してSaveをクリックします。
- ツールバーのSaveをクリックします。
- 目メニューを開いて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をクリックします。