新しいページビルダーは、Workvivoで現代的なブロックベースのコンテンツ編集体験を導入しました。管理者はドラッグ&ドロップインターフェースで、柔軟なコンテンツブロック、構造化されたレイアウト、リアルタイムプレビューでプロフェッショナルなモバイルファーストページを作成できます。
この強化により、管理者やコンテンツクリエイターにとってページの使いやすさ、柔軟性、スケーラビリティが大幅に向上します。
Pagesを視覚的に簡単に作成できるようにする新しいコンポーネントを見ていきましょう。コンポーネントブロックとMarkdownエディターの両方を見ていきましょう。
コンポーネントブロックガイド
これらのブロックは左側のサイドバーや コンポーネント オプションをクリックすると表面に表示され、より高度なデザインコントロールやレイアウトに使われます。
📐 レイアウト
- 2列: コンテンツを2つの縦の列に分割します
- 3つの列: コンテンツを3つの縦の列に分割します
📝 基本内容
- 段落: 標準的な本文テキストブロック
- 見出し1: 主要セクションの見出し
- 見出し2: サブセクションの見出し
- 見出し3: ネスト区画見出し
- 見出し4: マイナーサブセクションの見出し
- リスト(番号付き): 番号付き順序リスト
- バレットリスト: 箇条書き付きの順序なしリスト
🧱 構造化および視覚的コンポーネント
| 構成要素 | 詳細 | ユースケース |
|---|---|---|
| 埋め込み | 外部コンテンツ(ドキュメント、ダッシュボード、Figma、フォームなど)を埋め込む | ライブまたはインタラクティブリソースを参照する際の使用 |
| カード | コンテンツはビジュアルカード形式で表示されます | ナビゲーションや重要リソースのハイライト使用に |
| コールアウト | 強調のためにハイライトされたコンテンツブロック | 強調のためにハイライトされたコンテンツブロック |
| 表 | 整理されたデータのための構造化行と列 | 比較や構造化情報への使用 |
| 画像 | ページに画像を挿入します | 視覚的な支援や例としての使用 |
| アコーディオン | 拡張/折りたたみ可能なコンテンツセクション | 拡張/折りたたみ可能なコンテンツセクション |
| 動画 | 動画の埋め込みやアップロード | 区間を分ける水平線 |
| ボタン | クリック可能なアクション要素 | CTAや主要なワークフローのリンクに利用 |
| ディバイダー | 区間を分ける水平線 | 長いページのセクションを視覚的に区切り、読みやすさを向上させるために使うことができます |
Markdownエディターガイド
このエディターは、テキストを書いたり編集したりするシンプルで効果的な方法を提供します。Markdownエディターとコンポーネントブロックの両方でいくつかのフォーマットオプションが存在します
🔄 編集
- 元に戻す: 最新の変更を元に戻す
- やり直し: 直近まで取り消された変更を復元する
🧾 テキストスタイルのドロップダウン(通常のテキストメニュー)
- 大きな見出し: 主要セクションの見出し
- 小さな見出し: サブセクションの見出し
- 箇条書き: 箇条書き付きの順序なしリスト
- 番号付きリスト: 番号付き順序リスト
- 引用: インデントされた引用またはハイライトされたテキストブロック(重要なメモや参照テキストを呼び出すために使われます)
- コードブロック: コードや技術テキストを表示するためのフォーマット済みブロック(コードのスニペットや構造化された技術コンテンツに使用)
✍️ テキスト書式
- 太字: テキストに重みを置く
- 斜体: テキストに微妙な強調を加える
- 取り消し線: テキストは削除済みまたは完了済みの表示
- インラインコード(</>): テキストをインラインコードとしてフォーマットする(コマンド、変数、ファイル名、または文中の短い技術的なスニペットを参照する際に使用)
📐 アライメントとインデンテーション
- 左/中央/右に合わせる: テキストを左/水平/右に揃えます
- 正当化: テキストを行全体に均等に揃えます。
- 右へみ込み: コンテンツをデントして階層を作ります。
- 左のくぼみ: インデントされたコンテンツがデフォルトのアライメントに戻されます。
➕ 挿入映像と特典
- 挿入(+): コンポーネントライブラリを開く
- リンク: 選択したテキストへのハイパーリンクを追加します(外部リソースや内部ナビゲーションに使用)
- 絵文字: コンテンツに絵文字を挿入する(視覚的な手がかりやトーンに使う)
- 翻訳: コンテンツを他言語に翻訳する(グローバルまたは多言語コンテンツに使用)
- モバイルプレビュー: モバイルでのコンテンツの表示(モバイルの可読性やレイアウトを確認するために使用)
- <->: ページ幅を「Default」から「Medium」または「Full」に調整するオプションを提供します。