Diviの変換設定を使用して家系図を作成する方法

あなたのウェブサイトのために家系図を作成しようとしたことがありますが、それにアプローチする方法を正確に知りませんでしたか？ さて、今日のDiviチュートリアルでは、その方法を正確に説明します。 家系図の作成に加えて、すべての画面サイズで応答性を維持できるようにしています。 家系図の作成が完了したら、いつでも自分の好みに応じて画像、テキスト、デザインを変更し、公開する準備を整えることができます。 この家系図のデザインをすぐに始めたいですか？ JSONファイルを無料でダウンロードして、作成している任意のWebサイトに追加できます。

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

家系図のレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

私たちのYoutubeチャンネルを購読する

家族のポジショニング

新しいセクションを追加

間隔

作り始めましょう！ 最初に行う必要があるのは、作業中のページに新しい通常のセクションを追加することです。 セクション設定を開き、ビューポート幅を使用してカスタムの上下のパディングを追加します。

• トップパディング：8vw
• ボトムパディング：8vw

行＃1を追加

カラム構造

次の列構造を使用して、セクションに最初の行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、行がセクションと画面の幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

間隔

デスクトップの行の左側と右側に空白を追加するために、ビューポートの幅の単位を使用して、カスタムの左右のパディングを追加します。

• トップパディング：0px
• ボトムパディング：0px
• 左パディング：15vw（デスクトップ）、0vw（タブレットと電話）
• 右パディング：15vw（デスクトップ）、0vw（タブレットと電話）

画像モジュールを列に追加

画像をアップロード

モジュールの追加を開始する時が来ました！ 最初に必要なのは画像モジュールです。 幅と高さが「180px」の画像をアップロードします。

配置

次に、[デザイン]タブに移動し、画像の配置を変更します。

• 画像の配置：中央

サイジング

次に、サイズ設定を変更します。

• 幅：49％
• モジュールの配置：中央

国境

そして、境界線設定の各コーナーに高い値を追加して、画像を円に変えます。 「20vw」を使用していますが、任意の高い数値を使用できます。

列にテキストモジュールを追加

コンテンツを追加する

次のモジュールであるテキストモジュールに進みます。 ここに家族の名前を追加します。

背景色

次に、背景設定に移動し、背景色を白に変更します。

• 背景色：#ffffff

テキスト設定

次にテキスト設定を変更します。 家系図に別のルックアンドフィールを作成したい場合は、これらの設定を自由に試してみてください。

• テキストフォント：Open Sans
• テキストの色：＃000000
• テキストサイズ：0.8vw（デスクトップ）、1.2vw（タブレット）、1.9vw（電話）
• テキスト行の高さ：0.4em
• テキストの向き：中央

間隔

間隔設定に移動し、カスタムマージンとパディング値を追加します。 これらの値は、テキストモジュールを形成し、画像モジュールとわずかに重なるようにするのに役立ちます。

• トップマージン：-0.5vw
• 左マージン：1vw
• 右マージン：1vw
• トップパディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
• 下部のパディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）

国境

境界線の設定に移動し、上部の境界線も追加します。

• 上枠幅：5px
• 上枠の色：＃000000

ボックスシャドウ

ボックスシャドウとともに、ページに奥行きを作成します。

• ボックスシャドウの垂直位置：10px
• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.17）

Zインデックス

テキストモジュールが画像モジュールの上にあることを確認するために、テキストモジュールの表示設定でZインデックスを増やします。

• Zインデックス：2

行を3回クローンする

最初の行の作成とその中のすべてのモジュールの変更が完了したら、先に進んで行のクローンを3回作成できます。 これは、チュートリアルの次のステップで時間を節約するのに役立ちます。 これらの各行は、家系図に異なるレベルを作成するために使用されます。

行＃1をカスタマイズする

両方のモジュールのクローンを7回作成する

家系図の最初のレベルのカスタマイズを始めましょう！ ワイヤーフレームモードに切り替えて、行の2つのモジュールのクローンを7回作成します。 完了すると、行のバックエンドは次のようになります。

列のメイン要素CSS

列全体をグリッドに変換しています。 合計で、列に16個のモジュールがあるはずです。 これらの16個のモジュールを8つのグリッド列に配置します。 これは、8つのグリッド列のそれぞれに2つのモジュールが含まれることを意味します。 1つの画像モジュールと1つのテキストモジュール。 最初の行の行設定を開き、CSSコードの次の行を列のメイン要素に追加します。

display: grid;
grid-template-columns: repeat(8, 12.5%);

行＃2をカスタマイズする

両方のモジュールのクローンを3回作成する

2列目へ！ ここでは、両方のモジュールのクローンを3回作成します。

列の主要要素

行の列のメイン要素にCSSコードの次の行を追加することにより、列を4つのグリッド列を持つグリッドに変換します。

display: grid;
grid-template-columns: repeat(4, 25%);

4列の既存の行列構造を選択するのではなく、このアプローチを使用する理由は、小さい画面サイズでもすべてが100％応答するようにするためです。

行＃3をカスタマイズする

両方のモジュールのクローンを作成する

3列目へ！ 各モジュールのクローンを1回作成します。

列の主要要素

次に、CSSコードの次の行を列のメイン要素に追加します。

display: grid;
grid-template-columns: repeat(2, 50%);

行＃4をカスタマイズする

行間隔

次の最後の行に！ ここで行う必要があるのは、行のパディング値を変更することだけです。

• トップパディング：0px
• ボトムパディング：0px
• 左パディング：31vw
• 右パディング：31vw

画像モジュールを使用して家族をつなぐ

行＃1を追加

カラム構造

家族全員が並んだので、繋がり始めましょう！ これを行うには、最初の行と2番目の行の間に新しい行を追加します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ値を変更します。

• 幅：100％
• 最大幅：100％

間隔

次に間隔設定に移動し、いくつかのカスタムパディング値を追加します。

• トップパディング：0px
• ボトムパディング：0px
• 左パディング：15vw（デスクトップ）、0vw（タブレットと電話）
• 右パディング：15vw（デスクトップ）、0vw（タブレットと電話）

画像モジュールを列に追加

イラストをアップロード

次に、画像モジュールを追加し、この投稿の冒頭でダウンロードしたフォルダーにあるイラストをアップロードします。

サイジング

イメージモジュールのサイズ設定に移動し、[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

間隔

間隔設定で[画像の下にスペースを表示]オプションを必ず無効にしてください。

• 画像の下にスペースを表示：いいえ

行を2回クローンし、位置を変更します

行とその中のイメージモジュールの変更が完了したら、先に進んで2回クローンを作成します。 それに応じて複製を配置します。

行＃1をカスタマイズする

画像モジュールを3回クローンする

最初の行に戻り、モジュールのクローンを3回作成します。

列の主要要素

行の列のメイン要素にCSSコードの次の行を追加して、これらの画像モジュールを4つのグリッド列を持つグリッドに配置します。

display: grid;
grid-template-columns: repeat(4, 25%);

行＃2をカスタマイズする

クローン画像モジュール

2行目に移動し、イメージモジュールのクローンを1回作成します。

列の主要要素

行の列のメイン要素にCSSコードの次の行を追加して、両方のモジュールを2つのグリッド列を持つグリッドに配置します。

display: grid;
grid-template-columns: repeat(2, 50%);

行＃3をカスタマイズする

間隔を変更する

次の最後の複製に移ります。 ここで行う必要があるのは、カスタムのパディング値を変更することだけです。これで完了です。

• トップパディング：0px
• ボトムパディング：0px
• 左パディング：27vw
• 右パディング：27vw

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviを使用してモダンなファミリーツリーを作成する方法を紹介しました。 私たちが再作成した家系図は、すべての画面サイズで見栄えがします。 このチュートリアルの開始時に、JSONファイルを無料でダウンロードしてすぐに開始することもできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！