Divi で組織図を作成してみませんか?
でフローチャート レイアウトを作成する方法を知る Divi プロセスやアイデアをコミュニケーションする多くの機会を開きます。 サイトのWeb. 場合によっては、フローチャートを使用して、多数の要素を含む非常に複雑なアイデアを説明できます。
〜に サイトのWeb、ただし、特にレスポンシブにしたい場合は、これらのより複雑なフローチャートを実現するのが難しい場合があります.
このチュートリアルでは、Web 上で使用できる便利なフローチャート レイアウトを作成する方法を説明します。 サイトのWeb、シンプル、効果的、応答性が高い。
さらに、作成には Divi の組み込みオプションのみを使用するため、カスタム コードやプラグインの追加について心配する必要はありません。
のは、始めましょう！
概要
このチュートリアルで作成するフローチャートのデザインを簡単に見てみましょう。
Divi Builder で新しいページを作成する
開始するには、次のことを行う必要があります。
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック DiviBuilderを使用する
その後、クリック 構築を開始 (ゼロから構築)
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Diviでフローチャートレイアウトを作成する方法
ステップ 1: 中央の宣伝文で行を作成する
Divi でフローチャート レイアウトの作成を開始するには、中央の宣伝文を含む行を作成することから始めます。 これは、フローチャートの最初の要素になります。
セクションパディング
まず、デフォルト セクションのセクション設定を開き、下部パディングを 0px に設定します。
- パディング (下): 0px
ライン
セクション内で、列に行を追加します。
ライン設定を開き、次の設計設定を更新します。
- ガター幅: 1
- パディング (上下): 0px
宣伝文句のModデザイン
最初のフローチャート要素を作成するには、Blurb モジュールを使用します。
Blurb モジュールをインラインで挿入します。
モジュールパラメータ
Blurb モジュールの設定を開きます。 タブの下 コンテンツ、デフォルトのタイトルと本文テキストを保持できます。
次に、小さなアイコン画像で画像を更新するか、組み込みのDiviアイコンのいずれかを使用します. このチュートリアルでは、 クラウドファンディングレイアウトパック .
次に、モジュールに背景色を指定します。
- 背景: #f8f8f8
タブの下 設計、次を更新します。
- テキストの配置: 中央揃え
- 最大幅: 400px (デスクトップおよびタブレット)、90% (スマートフォン)
- アライメントモジュール: センター
- パディング: 6% (上下)、3% (左右)
次に、次のように Blurb モジュールに境界線を付けます。
- ボーダー幅：2px
ステップ 2: 垂直線と矢印で接続線を作成する
フローチャート レイアウトの次の部分では、中央に垂直線と矢印があるコネクタの行を作成します。 この線は、次の線を接続するために使用されます。 コンテンツ ページの下の方に続く組織図。
この場合、Blurbn モジュールを中央にして、前の行の下に行と矢印を追加してフローチャートを開始します。
新しい行を作成し、前の行からスタイルをコピーして貼り付けます
これを行うには、前の行の下の列に新しい行を追加します。
「 その他 モジュール設定 (またはオプションを右クリック) し、上の前の行からスタイルをコピーして、新しい行に貼り付けます。
縦線区切りの作成
垂直線区切りを作成するには、新しい Divider モジュールを線に追加します。
仕切りの設定で、デザイン設定を次のように更新します。
- 線の色: #333333
- 行の位置: 下
- ディバイダーの重量: 150px
- 幅: 2 ピクセル
- アライメントモジュール: センター
- 余白: -1px(下)
タブの下 高機能、次のようにオーバーフローを非表示にします。
- 水平オーバーフロー: 非表示
- 垂直オーバーフロー: 非表示
Blurb モジュールで矢印を作成する
次に、プレゼンテーション モジュールを使用して、分割線の上に配置される矢印アイコンを作成します。
矢印を作成するには、仕切りの下に新しい Blurb モジュールを追加します。
Blurb Mod の設定
モジュール設定で、デフォルトのタイトルと本文テキストを削除し、 アイコンを使用、 次に、矢印アイコンを選択します (スクリーンショットを参照)。
タブの下 設計、次を更新します。
- アイコンの色: #bbbbbb
- 画像/アイコンの配置: 中央
- アイコンのフォントサイズを使用: はい
- アイコンのフォント サイズ: 50px (デスクトップ)、40px (タブレットとスマートフォン)
- 最大幅：50％
- アライメントモジュール：センター
- 高さ: 50px (デスクトップ)、40px (タブレットとスマートフォン)
タブの下 高機能に、次の CSS を追加します。 宣伝画像 :
margin-bottom: 0px;
background: #ffffff;
線の上に矢印を配置するには、次を更新します。
- ポジション: アブソリュート
- 場所: センター
- Zインデックス：10
ステップ 3: フローチャートの隣接部分に線を作成する
コネクタの行が完成したら、隣接するいくつかの Blurb モジュールの別の行を追加して、フローチャートの設計を続けます。
線を追加するには、最初の線 (レイアウトの上部に作成した中央の吹き出し付きの線) をコピーしてコネクタ線の下に貼り付けます。
回線設定を開き、以下を更新します。
- 最大幅：50％
- ボーダー幅: 2px
フローチャートの左側
境界線が線に追加されたので、ぼかしモジュールを左の境界線の上に配置します。
これを行うには、次の設計パラメーターを更新します。
- アライメントモジュール: 左
- 余白: 70px(上下)
- X 軸を平行移動: -50%
これは、ぼかしモジュールが境界線の上で水平方向に中央に配置されるための鍵です。
フローチャートの右側
右側の境界線に別の Blurb モジュールを追加するには、既存の Blurb を複製します。
宣伝文句を右側の境界線に配置するには、タブに移動します 高機能 絶対位置を指定します。
- ポジション: アブソリュート
- 位置: 中央右
次に、次のオプションを更新します。
- マージン: なし
- Y 軸の移動: -50%
- X 軸を平行移動: 50%
各境界線の角に矢印を追加
行の進行方向をフローチャートで明確にするために、行の境界行に矢印アイコンを追加します。
矢印左上
左上の境界線の行に矢印を追加するには、コネクタ行で作成した矢印 Blurb モジュールを複製し、隣接する Blurb モジュールを含む行にドラッグします。
Duplicate Arrow Blurb モジュールを開き、アイコンを左向きの矢印に変更します。
次に、モジュール位置の場所を更新します。
- 場所：左上
最後に、transform translate オプションを次のように更新します。
- Y 軸の移動: -50%
矢印右上
右上の境界線上にある矢印を作成するには、矢印を複製します" 左上隅に 作成したばかりです。 次に、設定を開き、位置の場所を変更します。
- 場所：右上
また、矢印アイコンを右向きの矢印に更新します。
左下矢印
左下の境界線上にある矢印を作成するには、矢印を複製します。 右上 作成したばかりです。
次に、設定を開き、位置の場所を変更します。
- 場所：左下
次に、Transform Translate オプションを更新します。
- Y 軸の移動: 50%
右下矢印
右下の境界線上にある矢印を作成するには、矢印を複製します" 左下 作成したばかりです。
次に、設定を開き、位置の場所を変更します。
- 場所：右下
また、矢印アイコンを左向きの矢印に更新します。
すべての矢印を配置したら、 レイヤービュー .
ステップ 4: 別のコネクタ ラインを追加する
フローチャートの XNUMX つの隣接する部分とすべての矢印を含む線を完成させたら、別の接続線を追加してフローチャートを続行できます。
これを行うには、上で作成したコネクタ ラインを複製し、フローチャートの隣接部分の Blurb モジュールを含むラインの下に貼り付けます。
ステップ 5: ストレート エッジ ライン コネクタを使用してフローをカスタマイズする
既存のフローチャートの設計では、フローは先頭の要素から始まり、左右の隣接する要素に分岐し、中央に戻って次の中間の要素に進みます。
フローをカスタマイズするには、セクションを複製して、左側の隣接するプレゼンテーション要素で停止し、右側のプレゼンテーション要素から続行するようにフローチャートをカスタマイズできるようにします。
重複セクション
これを行うには、最初にフローチャートを含むセクション全体を複製します。
別の左のぼかしモジュールを追加
複製セクション (下) で、XNUMX つの隣接するモジュールを含む行の左側の Blurb モジュールを見つけます。 次に、左側の宣伝文句を複製して、すぐ下に新しい宣伝文句を作成します。
下矢印と境界線を削除
次に、左下の矢印と右下の矢印を削除します。
複数の宣伝文句を含む行の行設定を開き、下の境界線を削除します。
- 下枠の幅: 0px
直線の境界線コネクタで線を作成する
ここで、線の右側の境界線を下のコネクタ線に接続する右側の境界線コネクタを使用して、フローチャートのデザインをカスタマイズしたいと考えています。
これを行うには、別の線を作成し、右側にカスタム分割線とアウトライン矢印を追加します.
XNUMX つのレイアウトを使用して、既存の行の XNUMX 列下に新しい行を追加します。
タブの下で、次のように行の設定を更新します。 設計 :
- ガター幅: 1
- 最大幅：50％
- パディング: 0px(上下)
次に、線に直線の境界線を追加します。
- 右ボーダーの幅: 2px
次に、ラインに Divider モジュールを追加します。
仕切りの設定を次のように更新します。
- 線の色: #333333
- 行の位置: 下
- 仕切りの重量：2px
- 幅: 50%
- 余白: -2px(下)
詳細タブで、セパレーターの位置を更新します。
- ポジション: アブソリュート
- 場所：右下
仕切りを配置した状態で、最初のセクションの XNUMX 行目の右下の矢印から Blurb モジュールをコピーし、右側の仕切り線のある行に貼り付けます。
複製して移動した矢印の Blurb モジュール設定を開き、以下を更新します。
- 位置: デフォルト
- アライメントモジュール: 右
左ボーダーライン流れ止め
現在、左下の枠の一部が宣伝文の下に露出しています。 非表示にするには、この下の宣伝文の下の余白を削除するだけです。
ステップ 6: 左端のライン コネクタを使用してラインを更新する
フローチャートには、左境界線コネクタも必要になる場合があります。 それを作成するには、次のように右側の境界線コネクタで線を更新できます。
- 左ボプダーの幅: 2px
- 右枠の幅: 0
行内のセパレーターを新しい場所に更新します。
- 場所：左下
次に、矢印の配置を更新します。
- アライメントモジュール: 左
アイコンを右矢印に変更します。
最終結果
最終結果を確認してください。
今すぐDIVIをダウンロードしてください!!!
まとめ
このチュートリアルでは、誰でもプロセスやアイデアを伝えるために使用できる便利なフローチャート レイアウトを作成しました。 訪問者 見事なレスポンシブデザイン。
サービスやデザインプロセスを紹介したり、インフォグラフィックを作成したり、クライアントにガイドを案内したりするために使用します。 コンテンツ 新しい方法で。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
