スクロールで画像をファンアウトしてDiviで画像ギャラリーを宣伝する方法
公開: 2020-05-08Diviのスクロール効果を使用して画像をファンアウトする方法を知ることは、ランディングページで画像ギャラリーを宣伝するのに役立つ微妙で印象的なデザイン要素になる可能性があります。 アイデアは、トランプの手のように画像を扇形に広げてページを下にスクロールするときにユーザーを引き付けることです。
このチュートリアルでは、スクロールでファンアウトする画像のコレクションを含む画像ギャラリーを宣伝するためのクリーンなセクションレイアウトを作成します。 このデザインでは任意の画像を使用でき、ランディングページに追加すると便利です。
スニークピーク
これは、このチュートリアルで構築するデザインの概要です。
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。
[インポート]ボタンをクリックします。
移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。
次に、インポートボタンをクリックします。
完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
パート1：レイアウトとモックコンテンツの作成
チュートリアルのこの最初の部分では、左側の列にタイトルとボタンがある2列の行でセクションレイアウトを作成します。 第2部では、ファンアウト画像を右側の列に追加します。
セクション設定
レイアウトに何かを追加する前に、デフォルトセクションの設定を次のように更新します。
- パディング：10vw上部、10vw下部
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行の追加
次に、3分の2、3分の1の列構造を持つ新しい行を追加します。
行設定
次に、カスタムの背景画像で行の設定を更新します。 文房具店のランディングページの既製レイアウトのものを使用しています。 その後、以下を更新します。
- 背景画像サイズ：実際のサイズ
- 背景画像の位置：左上
- 最大幅：900px
タイトルを作成するためのテキストモジュールの追加
行の準備ができたら、新しいテキストモジュールを列1に追加して、タイトルを作成します。
テキストコンテンツ
次のH1見出しを本文のコンテンツに追加します。
<h1>Our Gallery</h1>
テキスト設定
次に、テキスト設定を次のように更新します。
- 見出しフォント：Bellefair
- 見出しテキストの配置（タブレットと電話）：右
- 見出しのテキストサイズ：150px（デスクトップとタブレット）、110px（電話）
ボタンの追加
テキストモジュールの下に、新しいボタンモジュールを追加します。
ボタンテキスト
ボタンのテキストを「ギャラリーの表示」で更新します。
ボタンの設定
[デザイン]タブで、以下を更新します。
- 配置（タブレットと電話）：右
- ボタンのテキストサイズ：14px
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃121212
- ボタンの境界線の幅：0px
- ボタンの文字間隔：3px
- ボタンフォント：Montserrat
- ボタンのフォントスタイル：TT
- マージン：7vwトップ
パート2：ファンアウトスクロール効果を使用した画像の作成
チュートリアルのこの第2部では、ファンアウトスクロール効果を使用して画像を作成します。 真ん中の画像から始めましょう。 ファッションギャラリーページの既成レイアウトの画像を使用しています。 一貫したデザインを得るには、すべて同じサイズにする必要があります。 私が使っているのは400px×600pxです。
ミドルイメージの作成
右側の列に新しい画像モジュールを追加します。
次に、画像をモジュールにアップロードします。
画像設定
モバイルディスプレイの最大幅とマージンを次のように更新します。
- 最大幅（タブレットと電話）：200px
- マージン（タブレットと電話）：0px左
右中の画像の作成
2番目の画像（または右中央の画像）を作成するには、最初の画像モジュールを複製します。
画像設定
次に、複製イメージモジュールの設定を開き、以下を更新します。
ポジション
- 位置：絶対
原点を変換する
- 変換原点：中央下
スクロール効果
[水平モーション]で、以下を更新します。
- 水平モーションを有効にする：はい
- 開始オフセット：0（20％）
- ミッドオフセット：0.5（50％）
- 終了オフセット：0.5（100％）
[回転]で、以下を更新します。
- 回転を有効にする：はい
- 先発投手：0度（20％）
- 中回転：20度（50％）
- 終了回転：20度（100％）
適切な画像の作成
右端にファンアウトする3番目の画像を作成するには、作成した2番目の画像を複製します。
スクロール効果を更新する
[水平モーション]で、以下を更新します。
- ミッドオフセット：1
- 終了オフセット：1
[回転]で、以下を更新します。
- 中回転：40度
- 終了回転：40度
お気づきの方もいらっしゃると思いますが、画像ごとに水平オフセットを0.5刻み、回転オフセットを20度ずつ増やしています。 これにより、画像間に等間隔が作成されます。 また、スクロール効果のアニメーションは中央下の変換原点に基づいているため、トランプの手のように画像がファンアウトしているような印象を与えます。
レイヤーボックスで画像にラベルを付ける
最後の2つの画像を作成する前に、混乱しないように現在の画像のラベルを更新しましょう。
左中央の画像の作成
左中央の画像を作成するために、右中央の画像を複製できます。
次に、中央の画像の上から列の上部にドラッグします。
その画像ラベルも更新できます。
スクロール効果を更新する
左中央の画像の設定を開き、次のスクロール効果を更新します。
水平方向の動きの下で…
- ミッドオフセット：-0.5
- 終了オフセット：-0.5
注：私たちが行っているのは、オフセット値を負に変更することだけです。
回転中…
- 中回転：-20度
- 終了回転：-20度
左の画像を作成する
最後に、右の画像を複製して列の最上部にドラッグして、最終的な左の画像を作成しましょう。
ラベルを更新することもできます。
スクロール効果を更新する
左の画像の設定を開き、スクロール効果を更新します。
水平方向の動きの下で：
- ミッドオフセット：-1
- 終了オフセット：-1
回転中…
- 中回転：-40度
- 終了回転：-40度
列1Zインデックス
現在、to列の画像は1列のコンテンツとオーバーラップします。これを変更するには、1列の設定を開き、次のようにzインデックスを更新します。
- Zインデックス：10
新しい画像とフィルターの追加
今、私たちがする必要があるのは、新しい/異なる画像で各画像を更新することです。
独自の効果を得るには、右側の画像を除くすべての画像に次のフィルターを追加します（複数選択を使用）。
- 飽和度：20％
- 不透明度：85％
結果
これがこれまでの結果です…
カラムを回転させる
デザインを少し変更するために、親列を回転させて画像のコレクションを回転させることができます。
これを行うには、列2の設定を開き、次の変換オプションを追加します。
- 変換回転Z軸：40度
最終結果
これが最終結果です。
デスクトップ
タブレット
電話
最終的な考え
このチュートリアルでは、Diviのスクロール効果を使用して画像をファンアウトする方法を学びましたが、そこで止まる必要はありません。 これと同じ手法を簡単に使用して、モジュールのコレクションをファンアウトできます（宣伝文句を考えています）。 各画像のスクロール効果でオフセット距離を制限したため、デザインは実際には機能しません（つまり、すべての画像全体を実際に表示することはできません）。 ただし、必要に応じて、オフセットを増やして画像をより見やすくすることができます。
コメントでお返事をお待ちしております。
乾杯！