Diviでフローチャートレイアウトを作成する方法

Diviでフローチャートのレイアウトを作成する方法を知っていると、Webサイトでプロセスやアイデアを伝達するための多くの機会が開かれます。 場合によっては、フローチャートを使用して、多数の項目を含む非常に複雑なアイデアを説明できます。 ただし、Webサイトでは、これらのより複雑なフローチャートを実現するのが難しい場合があります。特に、応答性を高めたい場合はそうです。

このチュートリアルでは、シンプルで効果的で応答性の高い、Webサイトで使用できる実用的なフローチャートレイアウトを作成する方法を紹介します。 基本的に、Diviの境界線、仕切り、宣伝文、および変換オプションを使用して創造性を発揮し、ニーズに合わせて簡単にカスタマイズできるフローチャートレイアウトを作成します。 さらに、Diviの組み込みオプションのみを使用して作成するため、カスタムコードやプラグインの追加について心配する必要はありません。

始めましょう！

スニークピーク

これは、このチュートリアルで作成するフローチャートの設計の概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでフローチャートレイアウトを作成する方法

ステップ1：中央に配置された宣伝文で行を作成する

Diviでフローチャートレイアウトの作成を開始するには、中央に配置された宣伝文を含む行を作成することから始めます。 これがフローチャートの最初の項目になります。

セクションパディング

まず、デフォルトセクションのセクション設定を開き、下部のパディングを0pxに設定します。

行

セクション内に、1列の行を追加します。

行設定を開き、次の設計設定を更新します。

• 側溝幅：1
• パディング：0px上、0px下

これらの2つの設計設定は、モジュールと行の間に余分なスペースが追加されないようにするために、このフローチャートレイアウトのすべての行に使用されます。

宣伝文のモジュール設計

最初のフローチャート項目を作成するために、宣伝文モジュールを使用します。

行に新しい宣伝文モジュールを追加します。

宣伝文句の設定

宣伝文の設定を開きます。 [コンテンツ]タブでは、デフォルトのタイトルと本文のテキストを保持できます。

次に、小さなアイコン画像で画像を更新するか、組み込みのDiviアイコンの1つを使用します。 このチュートリアルでは、クラウドファンディングレイアウトパックのアイコンを使用します。

次に、宣伝文に背景色を付けます。

• 背景色：＃f8f8f8

[デザイン]タブで、以下を更新します。

• テキストの配置：中央
• 最大幅：400px（デスクトップとタブレット）、90％（電話）
• モジュールの配置：中央
• パディング：上6％、下6％、左3％、右3％

注：この宣伝文のサイズは、フローチャートレイアウトのすべての宣伝文で共有されます。 このサイズはこのレイアウトで機能します。これは、フローチャートに2つ以上の隣接する（並んだ）宣伝文句が含まれることがないためです。 これにより、デザインの応答性を維持し、タブレットや電話でも見栄えを良くすることができます。

次に、次のように宣伝文に境界線を付けます。

• ボーダー幅：2px

ステップ2：垂直線と矢印を使用してコネクタ行を作成する

フローチャートレイアウトの次の部分では、中央に垂直の線と矢印があるコネクタ行を作成します。 この行は、ページを下に進む必要があるフローチャートコンテンツの行を接続するために使用されます。

この場合、中央の宣伝文モジュールで前の行の下に線と矢印を追加してフローチャートを開始します。

新しい行を作成し、前の行から行スタイルをコピーして貼り付けます

これを行うには、前の行の下に新しい1列の行を追加します。

[その他のオプション]メニュー（または右クリックオプション）を使用して、上の前の行から行スタイルをコピーし、新しい行に貼り付けます。

垂直ラインディバイダーの作成

垂直ラインディバイダーを作成するには、新しいディバイダーモジュールを行に追加します。

仕切りの設定で、次のようにデザイン設定を更新します。

• 線の色：＃333333
• ライン位置：下
• 仕切りの重量：150px
• 幅：2px
• モジュールの配置：中央
• マージン：-1px下

[詳細設定]タブで、次のようにオーバーフローを非表示にします。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

宣伝文句を使用した矢印の作成

次に、宣伝文句モジュールを使用して、分割線の上に配置する矢印アイコンを作成します。

矢印を作成するには、仕切りの下に新しい宣伝文モジュールを追加します。

矢印の宣伝文句の設定

宣伝文の設定で、デフォルトのタイトルと本文を取り出し、クリックして下矢印アイコンを使用します（スクリーンショットを参照）。

[デザイン]タブで、以下を更新します。

• アイコンの色：#bbbbbb
• 画像/アイコンの配置：中央
• アイコンのフォントサイズ：50px（デスクトップ）、40px（タブレットと電話）

• 最大幅：50％
• モジュールの配置：中央
• 高さ：50px（デスクトップ）、40px（タブレットと電話）

[詳細設定]タブで、次のCSSを宣伝文画像に追加します。

margin-bottom: 0px;
background: #ffffff;

これにより、宣伝文のデフォルトの余白が削除され、白い背景が追加されて、アイコンを線の上に配置すると、アイコンと線の間にスペースの外観が作成されます。

矢印を線の上に配置するには、以下を更新します。

• 位置：絶対
• 場所：センター
• Zインデックス：10

ステップ3：隣接するフローチャートの宣伝文句と矢印を使用して行を作成する

コネクタの行が完成したら、フローチャートの設計を続行するために、複数の隣接する宣伝文の別の行を追加します。

行を追加するには、最初の行（レイアウトの上部に作成した中央の宣伝文句のある行）をコピーして、コネクタ行の下に貼り付けます。

行設定を開き、以下を更新します。

• 最大幅：50％
• ボーダー幅：2px

50％の最大幅は、レイアウトが応答して機能するために重要です。 行の左右に溢れている宣伝文句がブラウザの幅を超えないようにします。

左側の境界線にフローチャートの宣伝文句を作成する

行に境界線が追加されたので、左側の境界線の上に宣伝文を配置します。

これを行うには、次の設計設定を更新します。

• モジュールの配置：左
• マージン：上70px、下70px

• 変換変換X軸：-50％

これは、宣伝文を境界線の上部の中央に水平に配置するための鍵です。

右の境界線上に隣接するフローチャートの宣伝文句を作成する

右側の境界線に別の宣伝文を追加するには、既存の宣伝文を複製します。

宣伝文を右側の境界線に配置するには、[詳細設定]タブに移動し、絶対位置を指定します。

• 位置：絶対
• 場所：右中央

次に、マージンを更新し、変換オプションを次のように変換します。

• マージン：なし
• 変換変換Y軸：-50％
• 変換変換X軸：50％

各境界線のコーナーに矢印の宣伝文句を追加する

フローチャートが線の進行方向をより明確にするために、行の境界線に矢印アイコンを追加します。

左上矢印

左上の境界線に矢印を追加するには、コネクタ行で作成した矢印の宣伝文を複製し、隣接する宣伝文を含む行にドラッグします。

重複する矢印の宣伝文を開き、アイコンを左矢印に変更します。

次に、矢印の宣伝文句の位置を更新します。

• 場所：左上

最後に、変換変換オプションを次のように更新します。

• 変換変換Y軸：-50％

右上矢印

右上の境界線上にある矢印を作成するには、作成した「左上」の矢印を複製します。 次に、設定を開き、位置の場所を変更します。

• 場所：右上

また、矢印アイコンを右矢印で更新します。

左下矢印

左下の境界線上にある矢印を作成するには、作成した「右上」の矢印を複製します。

次に、設定を開き、位置の場所を変更します。

• 場所：左下

次に、変換変換オプションを更新します。

• 変換変換Y軸：50％

右下矢印

右下の境界線上にある矢印を作成するには、作成した「左下」の矢印を複製します。

次に、設定を開き、位置の場所を変更します。

• 場所：右下

また、矢印アイコンを左矢印で更新します。

すべての矢印を配置したら、レイヤービューを使用してそれぞれのラベルを更新できます。

ステップ4：別のコネクタ行を追加する

2つの隣接するフローチャートの宣伝文とすべての矢印を含む行が完成したら、別のコネクタ行を追加してフローチャートを続行できます。

これを行うには、上で作成したコネクタ行を複製し、隣接するフローチャートの宣伝文を含む行の下に貼り付けます。

ステップ5：右ボーダーラインコネクタを使用してフローをカスタマイズする

既存のフローチャートの設計では、フローは一番上のアイテムから始まり、左右の隣接するアイテムに分岐し、次に中央に戻って次の中央のアイテムに進みます。 フローをカスタマイズするために、セクションを複製して、フローチャートをカスタマイズして、左側の隣接する宣伝文句で停止し、右側の宣伝文句から続行できるようにします。

重複セクション

これを行うには、最初にフローチャートのコンテンツのセクション全体を複製します。

別の宣伝文句アイテムを追加する

複製（下）セクションで、2つの隣接する宣伝文を含む行の左側の宣伝文を見つけます。 次に、左側の宣伝文を複製して、その真下に新しい宣伝文を作成します。

下の矢印と境界線を削除する

次に、左下矢印と右下矢印の宣伝文句を削除します。

複数の宣伝文を含む行の行設定を開き、下の境界線を取り出します。

• 下の境界線の幅：0px

右ボーダーラインコネクタで行を作成する

次に、行の右側の境界線を下のコネクタ行に接続する右側の境界線コネクタを使用して、フローチャートの設計をカスタマイズします。

これを行うには、別の行を作成し、右側にカスタマイズされた分割線と矢印の宣伝文句を追加します。

3つの宣伝文を使用して、既存の行の下に新しい1列の行を追加します。

次のように行のデザイン設定を更新します。

• 側溝幅：1
• 最大幅：50％
• パディング：0px上、0px下

次に、行に右の境界線を追加します。

• 右ボーダー幅：2px

次に、行に分周器モジュールを追加します。

次のように仕切りの設定を更新します。

• 線の色：＃333333
• ライン位置：下
• 仕切りの重量：2px
• 幅：50％
• マージン：-2px下

[詳細設定]タブで、仕切りの位置を更新します。

• 位置：絶対
• 場所：右下

仕切りが配置されたら、最初のセクションの3番目の行から右下の矢印の宣伝文をコピーし、右の仕切り線のある行に貼り付けます。

複製して移動した矢印の宣伝文句の設定を開き、以下を更新します。

• 位置：デフォルト

• モジュールの配置：右

左の境界線の流れを止める

現在、左下の宣伝文の下に露出している左の境界線の一部があります。 それを隠すには、その下の宣伝文の下の余白を簡単に取り出します。

手順6：左側の境界線コネクタを使用して行を更新する

フローチャートには、左側の境界線コネクタも必要になる場合があります。 これを作成するには、次のように右側の境界線コネクタを使用して行を更新します。

• 左ボーダー幅：2px
• 右ボーダー幅：0

行内の仕切りを新しい場所で更新します。

• 場所：左下

次に、矢印の宣伝文句の配置を更新します。

• モジュールの配置：左

そして、アイコンを右矢印に変更します。

最終結果

最終結果を確認してください。 先に進み、2番目のセクションを複製し、両方が表示されるように左側の境界線コネクタを追加しました。

最終的な考え

このチュートリアルでは、誰もが驚くほどレスポンシブなデザインでプロセスやアイデアを訪問者に伝えるために使用できる便利なフローチャートレイアウトを作成しました。 これを使用して、サービスやデザインのプロセスを紹介したり、インフォグラフィックを作成したり、新しい方法でコンテンツを通じて顧客を誘導したりします。 うまくいけば、それはあなたの次のプロジェクトに役立つでしょう。

コメントでお返事をお待ちしております。

乾杯！