Diviの位置オプションを使用して画像バンドルを作成する方法

画像ギャラリーの新しい外観を探している場合でも、製品画像の見栄えの良い表示が必要な場合でも、このチュートリアルが役立ちます。 通常、Divi Webサイトに画像を追加する場合、デザインを列ごとに1つの画像に制限することがあります。 これは従来は安全でクリーンなデザインですが、同じ列内で画像をグループ化すると、単一または複数の列レイアウトで見栄えのする美しい画像バンドルデザインを作成できる場合があります。

このチュートリアルでは、Diviの組み込みの位置オプションを使用して、さまざまな方法でWebサイトに使用できる3つのクリエイティブな画像バンドルをデザインする方法を紹介します。

始めましょう。

スニークピーク

このチュートリアルで作成するデザインを簡単に見てみましょう。

画像バンドルデザイン＃1

建築設計＃1を開始する

画像バンドルデザイン＃2

建築設計＃2を開始する

画像バンドルデザイン＃3

設計＃3の構築を開始します

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

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

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

始めるために必要なもの

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

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

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

イメージバンドル＃1の設計

この最初の画像バンドルデザインでは、中央の画像の両側に2つの（わずかに回転した）画像を配置します。

通常のセクションに1列の行を追加することから始めます。

中央の画像を追加

列の中に、画像モジュールを追加します。

次に、画像をモジュールにアップロードします。

これらの画像には、Fitness Coach LayoutPackのスクリーンショットを使用します。 それぞれが880pxx1200pxである必要があります。

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

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

次のようにボックスシャドウを追加します。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：38px
• ボックスシャドウスプレッド強度：5px
• 影の色：rgba（0,0,0,0.2）

次に、Zインデックスを1に設定して、バンドル内の他の画像の上にとどまるようにします。

• Zインデックス：1

左の画像を追加

バンドルに左側の画像を作成するには、中央の画像の下に新しい画像を追加します。

新しい画像で画像を更新します（最良の結果を得るには、すべて同じサイズであることを確認してください）。

[デザイン]タブで、幅を次のように更新します。

• 幅：30％

次に、次のようにボックスシャドウを追加します。

• ボックスシャドウ：スクリーンショットを参照
• 影の色：rgba（0,0,0,0.2）

次に、左側の中央の画像に隣接するように、画像を左中央の位置に絶対位置を指定します。

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

画像に少し回転を与えるには、次のように変換回転オプションを更新します。

変換回転Z軸：-10度

適切な画像を追加する

右側の画像を作成するには、[レイヤー]ボックスを開き、左側の画像を複製します。

後で簡単に識別できるように、画像モジュール（左の画像、右の画像など）にラベルを付けます。 次に、複製イメージの設定を開き、次のように場所を調整します。

• 場所：右中央

次に、変換回転オプションを次のように調整します。

• 変換回転Zインデックス：10度

複製した画像を新しい画像と交換することを忘れないでください。

これまでの結果を確認してください。

複数の列への画像バンドルの追加

画像は1つの列内に配置されるため、この画像バンドルデザインを複数の列レイアウトに簡単に追加できます。

イメージバンドルを複数の列に追加するには、現在のイメージバンドルを含む行を複製します。

複製行で、列を複製して、イメージバンドルが含まれている別の列を作成します。 これにより、2列のレイアウトで画像バンドルが作成されます。

3つの画像バンドルの行を作成するには、2列の行を複製してから、複製した行の列の1つを複製します。 これにより、3列のレイアウトが得られます。

最終結果

これが画像バンドル＃1の最終的なデザインです。

イメージバンドル＃2の設計

この次のデザインは、5つの画像（中央に1つの画像、列の各コーナーに4つの画像）を含む画像バンドルを特徴としています。

まず、4分の1、2分の1、4分の1列の行を持つ新しい通常のセクションを作成します。

センター画像を追加

中央の列に、イメージモジュールを追加します。

次に、画像をモジュールにアップロードします。 家具店レイアウトパックの画像を使用しています（それぞれ800px x 1200）。

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

• 背景色：＃f7f3ec

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

• マージン：0px
• パディング：上5％、下5％、左5％、右5％

[詳細設定]タブで、Zインデックスを1つ上げて、画像がZ空間の他の画像の上にとどまるようにします。

• Zインデックス：1

左上の画像を追加

左上の画像を追加するには、中央の列の中央の画像の下に新しい画像モジュールを追加します。

モジュールに新しい画像をアップロードします。

次に、次のように設計設定を更新します。

• 幅：40％
• マージン：0px下

列の間隔

列の高さは、中央の画像の高さと、追加する上下のパディングの量によって決まります。 したがって、絶対位置の画像に適切な間隔を設定するには、上部と下部のパディングを増やして列の高さを増やす必要があります。

• パディング（デスクトップ）：上12％、下12％
• パディング（タブレット）：上24％、下24％

次に、左上の画像に次のように絶対陽電子を与えます。

• 位置：絶対
• 場所：左上

右上の画像を追加

左上の画像が配置されたので、画像を複製して右上の画像を作成します。

（この時点で、後で簡単に識別できるように、各画像にラベルを追加することをお勧めします。）

複製（右上）の画像を開き、絶対位置の場所を更新します。

• 場所：右上

左下の画像を追加

左下の画像を作成するには、右上の画像を複製し、必要に応じてラベルを更新します。

複製（左下）画像の設定を開き、絶対位置の場所を更新します。

• 場所：左下

右下の画像を追加

右下の画像を作成するには、左下の画像を複製し、必要に応じてラベルを更新します。 次に、画像を更新して新しい場所を指定します。

• 場所：右下

ボックスシャドウデザインアクセントを追加

素敵なデザインのアクセントを追加するために、次のように左上の画像にボックスシャドウを追加できます。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの水平位置：-170px
• ボックスシャドウの垂直位置：170px
• 影の色：rgba（36,57,74,0.07）

次のように、右上の画像に無料のボックスシャドウデザインのアクセントを追加します。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの水平位置：170px
• ボックスシャドウの垂直位置：170px
• 影の色：rgba（36,57,74,0.07）

左の列にテキストを追加

デザインにテキストを追加するには、左側の列に新しいテキストモジュールを追加します。

コンテンツ

次に、コンテンツを次のように更新します。

<h2>Image Bundle</h2>

テキストデザイン

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

• 見出し2フォント：Montserrat
• 見出し2フォントスタイル：TT
• 見出し2テキストの配置：右
• 見出し2のテキストの色：＃24394a
• 見出し2テキストサイズ：34px
• 見出し2文字の間隔：4px
• 見出し2行の高さ：1.3em

左列のパディング

テキストを少し下げるには、左側の列の設定を開き、次のパディングを更新します。

• パディング：残り20％

右の列にテキストを追加

右の列のテキストを作成するには、左の列のテキストモジュールをコピーして、右の列に貼り付けます。 次に、テキスト設定を開き、以下を更新します。

• 見出し2テキストの配置：左

右列のパディング

左の列の場合と同じように、右の列（列3）に次のパディングを追加して、テキストモジュールを停止します。

• パディング：33％トップ

セクションの背景

デザインを終了するには、セクション設定を開き、次の背景色を追加します。

• 背景色：＃f7f3ec

これがこれまでの結果です。

複数の列への画像バンドルの追加

この画像バンドルを複数の列に追加するには、行を複製してから、複製した行の左右の列を削除し、画像バンドルのある列のみを残します。

複数選択を使用して、左上の画像と右上の画像を選択します。 設定を開き、ボックスシャドウを取り出します。

次に、列を1回または2回複製して、画像バンドルが含まれる複数の列を作成します。

画像バンドルの3列レイアウトを作成する場合は、各列の列設定を開き、次のようにパディングを更新します。

• パディング：上8％、下8％

最終結果

これが最終結果です。

そして、ここではモバイル上にあります。

画像バンドルデザイン＃3

この最後の画像バンドルデザインでは、5つの画像を微妙な3D回転で並べて配置し、子テーマやレイアウトパックなどの優れたディスプレイを作成します。

行を追加する

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

中央の画像を追加

行内に画像モジュールを追加します。

次に、画像を画像モジュールにアップロードします。 デザイン＃1で使用したものと同じ880px x1200pxのFitnessCoach LayoutPackのスクリーンショットを使用しています。

[デザイン]タブで、次のようにサイズ設定オプションを更新します。

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

次に、画像に微妙なボックスシャドウを付けます。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの垂直位置：-12px
• ボックスシャドウブラー強度：28px
• 影の色：rgba（0,0,0,0.11）

次に、デフォルトの下マージンを0pxに設定して取り出します。

• マージン：0px下

オーバーラップしたときに画像が他の画像の上にとどまるようにするには、Zインデックスを調整します。

• Zインデックス：2

列パースペクティブを追加

残りの画像を画像バンドルに追加する前に、変換オプションを使用して画像を回転するときに画像に遠近法を追加するカスタムCSSを列に追加する必要があります。 これにより、リアルな3D効果が作成されます。

左中央の画像を追加

パースペクティブが整ったので、他の画像の追加を開始できます。

左中央の画像を作成するには、中央の画像を複製します。

必要に応じて[レイヤー]ボックスの画像ラベルを更新してから、複製した画像モジュールを新しい画像で更新します。

画像の設定を開き、絶対位置の位置とZインデックスを次のように更新します。

• 場所：左下
• Zインデックス：1

次に、次の変換オプションを追加して、画像を配置および回転します。

• 変換変換X軸：75％
• 変換回転X軸：30度

左の画像を追加

左の画像を作成するには、作成した左中央の画像を複製します。

新しい画像の設定を開き、幅を更新します。

• 幅：20％

次に、変換変換オプションを次のように調整します。

• 変換変換X軸：0px

次に、画像が左中央の画像の後ろにとどまるようにZインデックスを調整します。

• Zインデックス：0

右中の画像を追加

次に、右中央の画像を画像バンドルに追加します。

画像を作成するには、[レイヤー]ポップアップを開きます。 次に、左中央の画像を複製し、複製した画像を左の画像の下にドラッグして、それに応じてラベルを付けます（つまり、「右中央の画像」）。

右中央の画像の設定を開き、次のように絶対位置の位置を変更します。

• 場所：右下

次に、変換オプションを次のように調整します。

• 変換変換X軸：-75％
• 変換回転X軸：-30度

正しい画像を追加

右の画像（最後の画像）を作成するために、左の画像を複製できます。 次に、複製した画像を右中央の画像の下にドラッグし、「右の画像」というラベルを付けます。

正しい画像設定を開き、次のように絶対位置の位置を更新します。

• 場所：右下

次に、変換の回転を調整します。

• 変換回転X軸：-30度

これまでの結果を確認してください。

そして、これが複数の列に追加された同じ画像バンドルです。

最終的な考え

Diviの絶対位置オプションがどのように機能するかを理解したら、それを使用して、かなり素晴らしい画像バンドルデザインを作成できます。 これらの画像バンドルの最も優れている点は、単一の列内に存在するため、複数の列で見栄えがよく、モバイルでも完全に拡大縮小できることです。

これにより、次のプロジェクトのためにすばらしい画像表示を作成するためのインスピレーションが得られることを願っています。

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

乾杯！