DXPR Builderを学ぶ

このセクションの内容

ここから始める

インストールと更新

• 動作要件
• DrupalサイトへのDXPR Builderのインストール
• DXPR CMSで新しいサイトを始める
• コンテンツタイプでのDXPR Builder利用
• デモページでDXPR Builderを試す
• DXPR Builderの更新
• 変更履歴
• 以前のリリース
• DXPR BuilderのFont Awesome 7

最初のページを作る

• 最初のページを作る
• DXPR Builderのツアーと構成の選択
• セクションのデザイン、保存、使い回し
• DXPR Onboarding：バッジ、ウィング、ランク
• DXPR Builderの対象読者

他のビルダーから移行

• DXPR Builder 1.x・2.xからの移行
• Layout Builderからページを移す
• Paragraphsからページを移す

ページを作る

ページを編集

• エレメントをドラッグで配置する
• エレメントの検索と追加
• 編集したい箇所の選択
• ページ上でのテキスト編集
• エレメントのMoreメニューの使い方
• エレメントのコピーと貼り付け
• Cloneでのエレメントの複製
• 変更の取り消しとやり直し
• 訪問者目線でのページ確認
• ページの保存と公開
• スマートフォンやタブレットでのページ編集

コンテンツを追加

テキストとメディア

• Textエレメントの追加
• Imageエレメントの追加
• Image carouselエレメントの追加
• Videoエレメントの追加
• Local videoエレメントの追加
• HTMLエレメントの追加

レイアウト

• セクションを追加する
• ローを追加する
• タブパネルを追加する
• 折りたたみパネルを追加する
• カルーセルレイアウトを追加する
• ポジションドレイヤーコンテナーを追加する
• ネストレイアウトを追加する

マーケティング

• Jumbotronエレメントの追加
• Buttonエレメントの追加
• Linkエレメントの追加
• Alertエレメントの追加
• Cardエレメントの追加
• Panelエレメントの追加
• Block quoteエレメントの追加
• Social linksエレメントの追加

データとモーション

• Number counterエレメントの追加
• Circle counterエレメントの追加
• Progress barエレメントの追加
• Countdown timerエレメントの追加
• Marqueeエレメントの追加
• Mapエレメントの追加
• Iconエレメントの追加
• Dividerエレメントの追加

エレメントのスタイル

• Styleパネルでのエレメントの見た目の変更
• コンテンツの背後に色や写真を置く
• 境界線、角丸、シャドウの追加
• エレメントの内側と外側の間隔
• 文字サイズと色の変更
• セクションへのリンクとクラスの使い回し

デザインガイド

• ブランドカラーを使う
• アクションを促すボタンをスタイルする
• カードをスタイルする
• セクションに色・写真・グラデーションを敷く
• スクロール・ホバー・クリックでエレメントに動きを付ける
• Bootstrapグリッドでレイアウトを計画する
• セクションを端から端まで広げる
• レイアウトをスマートフォンに対応させる
• ホバーでエレメントを反応させる

レイアウトの再利用

• テンプレートからページをはじめる
• セクションを保存して再利用する
• 保存済みテンプレートを探して挿入する
• サイト間でテンプレートを複写する

AIで書く・デザインする

• DXPR BuilderでAIをオンにする
• AI設定
• AIモデルとプロバイダー
• AIでページを下書きする
• AIでセクションを変更する
• AIで画像を生成する
• AIで写真を変更する
• AIに代替テキストを書かせる
• AIでテキストを書き換える
• AIテキストの確認と確定
• AIコンテンツツールを調べる
• AIで書き方のトーンを比較する
• AIでコンテンツを翻訳する
• AIでウェブページを複製する
• AI ChatでA/Bテストのバリアントを作成する
• AIの活用例

チュートリアル

• ヒーローセクションをデザインする
• ランディングページを作る
• イベントページを作る
• 会社紹介ページを作る
• サービスページを作る
• お問い合わせページを作る
• ブログレイアウトを作る
• FAQページを作る
• ポートフォリオギャラリーを作る
• 画像ギャラリーを作る
• チームディレクトリーを作る
• 製品ページを作る
• 料金表を作る
• 事例紹介を書く
• シングルページサイトを作る
• 複数カラムのコンテンツを作る
• ナレッジベースを作る
• フォームを追加する
• SEOに強いページを作る

サイト管理

ビルダーの設定

• プロダクトキーとサイト全体設定を入力する
• 上限にカウントされるコンテンツを確認する
• 編集者がページを始めるレイアウトを管理する
• 編集者が保存したテンプレートを共有・整理する

権限の管理

• ビルダープロファイル
• 各ロールがビルダーで見る内容を選ぶ
• 編集者に権限を与える
• 権限
• ライセンス概要
• ライセンス枠内に編集者を収める
• 編集者ライセンスを解放する
• 複数のサイトで1つのプロダクトキーを使う
• 機能比較

コンプライアンス対応

• ファイアウォールとデータレジデンシー
• セキュリティ
• ビルダーページのバックアップと復元

アクセシビリティと検索対策

• ページをアクセシブルにする
• 検索エンジンにページを見つけてもらう

本番運用

• パフォーマンス
• キャッシュ
• マルチサイトでの利用
• コンテンツステージング
• バージョン管理
• CI/CD連携

Drupal機能との連携

• ページへのDrupalブロックの追加
• ページにDrupalビューを表示する
• メディアライブラリーから画像を配置する
• Entity Browserで画像を選ぶ
• Layout Builderの中でDXPR Builderを使う
• CKEditorテキストエディター
• 他言語でページを作る
• コンテンツタイプ

バリエーションのテスト

• A/Bテストを設定する
• 3つ以上の版を一度にテストする
• A/Bテスト結果の読み方
• A/Bテストのベストプラクティス

ブランドに合わせる

• テキストエディターにブランドスタイルとボタンを追加する
• テーマのCSSでビルダーコンテンツをスタイルする
• ビルダーページでブランドフォントを使う
• アイコンライブラリー
• ローカルビルドでエディターを実行する
• ユーティリティクラス
• DXPR Builderテンプレートをオーバーライドする

問題の解決

• エディターが表示されない
• ライセンスとプロダクトキーのエラー
• 保存が失敗する
• 画像アップロードを直す
• 訪問者と表示が違う
• エレメントの問題を直す
• 失敗した更新を直す
• AIのトラブルシューティング

拡張

アーキテクチャとAPI

• アーキテクチャ
• サブモジュール
• CSSアーキテクチャ
• Hooks APIリファレンス
• APIリファレンス
• AI APIリファレンス

開発ガイド

• カスタムエレメントの作成
• カスタムアイコンセット
• Theming

ツール

• Drushコマンド
• テスト
• コントリビュート

リファレンス

エレメントとCSS

• エレメントリファレンス
• CSSクラスリファレンス
• キーボードショートカット

設定とAPI

• 設定リファレンス
• APIエンドポイント
• システム要件

ヘルプ

• FAQ
• 用語集

レガシー

• DXPR Builder Enterprise変更履歴