Diviの位置オプションを使用してインタラクティブな画像コラージュを作成する方法

Diviの新しい位置オプションは、絶対位置プロパティを使用して独自の画像コラージュレイアウトを作成するための扉を開きます。 これにより、デザインの各要素をより正確に配置できます。 そして、それをDivi内のデザイン設定の無数の組み合わせと組み合わせると、かなり素晴らしい画像コラージュをデザインできます。

このチュートリアルでは、Diviの組み込みの位置オプションを使用して、DiviWebサイトの美しいインタラクティブな画像コラージュを数分で作成する方法を紹介します。

始めましょう！

スニークピーク

これは、このチュートリアルで作成するインタラクティブな画像コラージュレイアウトの概要です。

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

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。

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

始めるために必要なもの

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

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

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

Diviの位置オプションを使用したインタラクティブな画像コラージュの作成

行と列の最適化

まず、1列の行を作成します。

行設定

次に、（ガター幅を介して）モジュール間に余分なスペースがないように行を更新する必要があるため、ガター幅を1に設定します。また、行がブラウザーウィンドウの全幅にまたがることを確認する必要があります。そのため、vwの長さの単位を利用して画像を配置できます（vw（ビューポートの幅）の長さの単位はブラウザウィンドウの幅に関連しています）。 幅を100％に設定すると、vwの長さの単位を使用して画像を行/列内に配置できるため、シームレスなレスポンシブデザインのために、すべてのブラウザーの幅で位置がそのまま維持されます。 また、行の外側の画像オーバーフローを非表示にするには、オーバーフローを非表示に設定する必要があります。

これを行うには、次のように行設定を最適化します。

列の高さの設定

デフォルトでは、列の高さは、列に含まれるコンテンツ（またはDiviモジュール）の高さによって決まります。 Diviモジュール（HTMLのすべてのdivと同様）はデフォルトで静的な位置になります。つまり、ページの通常のフローに配置されるため、親列に実際のスペース/高さが追加されます。 ただし、絶対位置を持つDiviモジュールは、通常のフローから抜け出し、カラムの実際のスペース/高さを作成しません。 このため、所定のスペース内に画像を配置できるように、列に指定された高さを追加する必要があります。

これを行うには、行設定を開き、次のカスタムCSSをメイン要素に追加して列設定を更新します。

height: 40vw;

また、電話の静止位置に画像を戻すため、[電話]タブで高さをデフォルトの状態に戻します。 次のカスタムCSSを[電話]タブに追加します。

height: auto !important;

タイトルテキストの追加

列の高さを設定すると、絶対位置の要素を列に追加し始めることができます。 画像コラージュレイアウトのタイトル用のテキストモジュールを追加することから始めましょう。

テキストモジュールの内容

次に、テキストを次の内容で更新します。

<h2>Recent Work</h2>

テキストモジュールの設定

次に、テキストモジュールの設定を次のように更新します。

• 見出し2フォント：Limelight
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃24005b
• 見出し2テキストサイズ：5vw（デスクトップとタブレット）、50px（電話）
• 幅：100％
• 最大幅：35vw（デスクトップとタブレット）、100％（電話）
• 位置：絶対（デスクトップ）、デフォルト（電話）
• 水平オフセット（デスクトップ）：35vw

画像の作成と配置

タイトルが配置されたので、インタラクティブな画像コラージュの最初の画像を作成しましょう。 アイデアは、すべての最適化が整った最初の画像を作成して、それを複製して、コラージュの残りの画像を簡単に作成して配置できるようにすることです。

ホバー効果、ライトボックス、絶対測位を使用した最初の画像の最適化。

まず、テキストモジュールの下に画像モジュールを追加します。

次に、画像をモジュールにアップロードし、ライトボックスで画像を開くオプションを選択します。 これで、クリックすると画像がライトボックスに表示されます。

ホバーで画像を拡大縮小する

ライトボックスの相互作用に加えて、画像を少し大きく拡大するホバー効果を追加します。 これを行うには、次の変換オプションを更新します。

• 変換スケール（ホバー）：115％

ホバーでZインデックスを優先する絶対測位

画像を配置するために、vwの長さの単位で絶対位置を使用します。 次のように位置オプションを更新します。

デスクトップ（およびタブレット）

• 位置：絶対
• 場所：左上
• 垂直オフセット：5vw
• 水平オフセット：-2vw

電話で

• 位置：デフォルト

ホバー時

• Zインデックス：2

画像デザインとレスポンシブ設定

次に、以下を更新します。

• 画像の配置：左（デスクトップ）、中央（電話）
• 幅：75％（電話）
• 最大幅：20vw（デスクトップとタブレット）、100％（電話）
• マージン（電話）：30px下
• ボックスシャドウ：スクリーンショットを参照
• 飽和度：0％（デスクトップ）、100％（ホバー）

他の画像をすばやく作成して配置するためのテンプレートとして最初の画像を使用する

最初の画像が完成したら、新しい画像を作成してインタラクティブな画像コラージュを作成するのは本当に簡単です。 デザインをリアルタイムで表示しながら、画像を所定の位置にドラッグしてサイズを調整できるため、これは強力なデザインツールでもあります。

これがプロセスです…

1. 複製アイコンをクリックして、画像を複製します。 複製された画像は、複製している画像の真上にある同じ場所に完全に配置されます。
2. 画像を所定の位置にドラッグします。 複製された画像は前の画像のvwの長さの単位を継承するため、ドラッグアイコンを使用して、行内の目的の場所に画像を正確に配置できます。
3. 画像を新しいものに更新します。
4. 組み込みのサイズオプションを使用して、画像のサイズを調整します。

これは、2番目の画像を作成するときにどのように見えるかを示しています。

このプロセスの優れた点は、画像を所定の位置にドラッグするたびに位置（垂直および水平オフセット）が決定されることです。 設定でオフセット位置を手動で更新する必要はありません。

ただし、この例で使用したオフセットを確認できるように、サイズ調整とともに以下の各画像にオフセットを含めます。

画像＃2の更新

• 垂直オフセット：10.06 vw
• 水平オフセット：16.51 vw
• 最大幅：18 vw

画像＃3の更新

• 垂直オフセット：24.25vw
• 水平オフセット：7.13vw
• 最大幅：20vw

画像＃4の更新

• 垂直オフセット：17.69vw
• 水平オフセット：31.91vw
• 最大幅：18vw

画像＃5の更新

• 垂直オフセット：12vw
• 水平オフセット：46.82vw
• 最大幅：15vw

画像＃6の更新

• 垂直オフセット：19.13vw
• 水平オフセット：58.84vw
• 最大幅：12vw

画像＃7の更新

• 垂直オフセット：28.24vw
• 水平オフセット：54.2vw
• 最大幅：10vw

画像＃8の更新

• 垂直オフセット：32.5vw
• 水平オフセット：74.04vw
• 最大幅：8vw

画像＃9の更新

• 垂直オフセット：1.01vw
• 水平オフセット：75.5vw
• 幅：27vw
• 最大幅：27vw

背景画像を追加する

最後の仕上げとして、セクションに背景画像を追加すれば完了です。

最終結果

これは、インタラクティブな画像ギャラリーがデスクトップとタブレットでどのように表示されるかを示しています。 画像を前面に表示し、画像のフルカラーバージョンを表示し、画像を拡大するホバー効果に注目してください。 次に、画像をクリックしてライトボックス効果を表示できます。

これが電話ディスプレイのデザインです。

さまざまなレイアウトデザインの画像のロケーションポイントを変更する

各画像のオフセットはロケーションポイントを基準にしているため、画像の元のロケーションポイントを変更して、さまざまな方向からのデザインを数秒で確認できます。

これを行うには、Diviの複数選択機能を使用して、すべての画像モジュールを選択します。 次に、画像モジュール設定の1つを開いて、要素設定モーダルを表示します。

次に、レイアウトのさまざまな構造の4つのコーナーのそれぞれに場所を変更できます。

右上隅の場所

左下隅の場所

右下隅の場所

最終的な考え

ディビの新しいポジションオプションは、強力で便利です。 また、このチュートリアルで経験したように、画像の独自のレイアウトを設計するためのすばらしい設計ツールがいくつか提供されています。 うまくいけば、このインタラクティブな画像コラージュがあなたの次のプロジェクトの小さなインスピレーションとして役立つでしょう。

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

乾杯！