DXPR Builderのツアーと構成の選択.
DXPR Builderの短いツアーで、DXPR Themeの位置付けを確認します。エレメントピッカーを開き、スタイル付きセクションを1つ作ってプレビューします。このページの残りでは各製品の追加内容を示すため、単体のビルダー、DXPR Theme付きのビルダー、両方入りのDXPR CMSから選べます。
動画では新しい空ページでDXPR Builderを巡り、1つのセクションを作ります。
エディターのツアー
ビルダーを表示するコンテンツタイプの、保存済みの空ページから始めます。
- エレメントピッカーを開くには、Add Elementsをクリックします。
- タブを見ます。Content、Drupal Blocks、Drupal Views、Saved templates、Layoutです。
- 使うのはSectionで、Layoutタブから選びます。
- セクションにカーソルを合わせ、Moreを開いてSettingsを選び、StyleパネルでBackgroundを選びます。
- セクションの+をクリックしてRowを追加し、そのカラムにButtonとTextを追加します。テキストのFont colorはStyleパネルで選びます。
- ツールバーのSaveをクリックし、表示メニューを開いてPreviewを選びます。
表示内容
確認はPreviewで、薄いグレーのセクションに2カラムが表示されます。左には見出し、1行のテキスト、Learn moreボタン、右には紫の見出しとテキストがあります。Previewではコントロールバーと追加ボタンが隠れるため、訪問者の見た目でページを確認できます。
各製品の追加内容
DXPR Builderは巡ったばかりのDrupalモジュールです。任意のテーマで動作し、以下を追加します。
- 22のコンテンツエレメントと6つのレイアウトエレメント
- プレビュー付きのページ上での編集
- AIモジュール導入時のAIテキスト、ページ作成、画像
- 使い回せるページテンプレートとユーザーテンプレート
- 各ロールの利用内容を決めるユーザープロファイル
- レイアウト内のDrupalブロックとビュー
DXPR ThemeはDXPR製のBootstrap 5テーマです。色、フォント、ヘッダー、ページレイアウトの設定を追加し、スマートフォンとタブレットに対応します。独自のプロダクトキーは不要です。
| 他のテーマでのDXPR Builder | DXPR ThemeでのDXPR Builder | |
|---|---|---|
| Bootstrap 5 | テーマ由来か、Sideload Bootstrap files＝Bootstrap 5 | テーマが提供 |
| ビルダーのカラースウォッチ | 定義があればテーマのパレット | DXPR Themeカラーパレット |
| 固定ヘッダー下のスムーズスクロール | 対象はScroll offset selectorで、ヘッダーに設定 | インストール状態で動作 |
| プロダクトキー | 必要 | DXPR Builderのみ必要 |
両方の設定はDXPR BuilderのGeneral Settingsページにあり、BootstrapとAdvanced Settingsの下です。
構成の選択
| やりたいこと | 使うもの | 必要なもの |
|---|---|---|
| 設定済みですぐに新しいサイトを始める | DXPR CMS | 新しいDrupal 11サイト |
| 運用中のサイトに目で見て作るページ作成を足す | 単体のDXPR Builder | テーマまたはサイドロード設定のBootstrap 5 |
| ビルダーをカスタムテーマに合わせる | DXPR Builderとテーマ設定 | 開発者 |
新しく始めるコンテンツマーケターにはDXPR CMSが最適です。両製品とデモページがすぐ使える状態で届きます。既存サイトのあるWeb担当者はDXPR Builderを追加し、テーマを保ちます。
エレメントピッカーが表示されない場合
- 空ページに「Choose a template」と出るがAdd Elementsボタンがない。 Enable page creation assistantが
/admin/dxpr_studio/dxpr_builder/ai_settingsでオフです。代わりにビルダーツールバーの+をクリックしてピッカーを開きます。 - ボタンとカラムにスタイルがない。 テーマがBootstrap 5を読み込んでいません。Sideload Bootstrap filesをBootstrap 5にします。Bootstrapに
/admin/dxpr_studio/dxpr_builder/settingsで設定します。 - カラーピッカーにスウォッチがない。 テーマがカラーパレットを定義していません。ピッカー自体で色を選ぶか、DXPR Themeのようなパレット付きテーマを使います。
次のステップ
- 最初のページを作る：手順どおりのフルページを確認できます。
- DXPR Builderの利用者：マーケター、Web担当者、開発者の使い分けを確認できます。