Diviの新しい画像置換ホバーオプションでクリエイティブに
公開: 2019-09-28Diviの新しい画像置換ホバーオプションは、プロジェクトにまったく新しいレベルの創造性をもたらします。 この投稿では、ホバーすると画像が変化する美しいセクションを作成する方法を紹介します。 このデザインが、Diviの画像置換ホバーオプションを使用して独自のクリエイティブセクションを作成するきっかけになることを願っています。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
画像置換レイアウトを無料でダウンロード
無料の画像置換レイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう
新しいセクションを追加
間隔
新しいページを作成するか、既存のページに新しいセクションを追加することから始めます。 行を追加する前に、セクションの間隔設定を調整してください。
- 上マージンと下マージン：2vw
- 左右のマージン：2vw
国境
次に、境界線の半径を追加します。
- 丸みを帯びた角：10px
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
バックグラウンド
モジュールを追加する前に、淡いサーモンのグラデーションの背景を追加します。
- 背景：グラデーション
- グラデーションカラー1：ペールサーモン＃f4e9de
- グラデーションカラー2：パラーサーモンでも＃fff0e8
サイジング
行の幅を調整して続行します。
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
最後に、間隔を調整します。
- トップパディング：
- デスクトップ+タブレット：5vw
- 左パディング：
- タブレット+電話：5vw
- 右パディング：
- デスクトップ：7vw
- タブレット+電話：5vw
列1にテキストモジュールを追加
H2コンテンツを追加する
モジュールの追加を開始する時が来ました！ 列1にテキストモジュールを追加し、選択したH2コンテンツを挿入します。
見出しテキスト
[デザイン]タブに移動し、それに応じてH2テキスト設定のスタイルを設定します。
- 見出しテキストレベル：H2
- H2フォント：アニーは望遠鏡を使う
- H2フォントの太さ：太字
- H2テキストの配置：中央
- H2テキストカラー：ブラウン＃793715
- H2テキストの色：
- デスクトップ：7.2vw
- タブレット：12vw
- 電話番号：11vw
サイジング
次にデスクトップの幅を変更します。
- 幅：
- デスクトップ：45vw
- タブレット+電話：100％
変身
大事なことを言い忘れましたが、テキストを回転させ、変換設定を使用してその位置を変更します。
- 変換回転：
- デスクトップ：270度
- 変換翻訳：
- x軸：-10vw
- y軸：19vw
1番目の画像モジュールを列1に追加します
透明なイラストを追加する
テキストモジュールのすぐ下に新しい画像モジュールを追加し、選択したイラストをアップロードします。 このチュートリアルで使用している画像は、この投稿の冒頭にあるzipフォルダーをダウンロードすることで見つけることができます。
サイジング
次に、画像サイズを全幅に強制します。
- 全幅：はい
間隔
次に、間隔の設定を調整します。
- トップマージン：
- デスクトップ+タブレット：-11vw
- 左マージン：
- デスクトップ：-2vw
- タブレット+電話：-36vw
- 左右のパディング：
- デスクトップ：10vw
- タブレット+電話：34vw
2番目のイメージモジュールを列1に追加します
透明なイラストを追加する
最初の画像モジュールのすぐ下に、別の画像モジュールを追加します。 お好みのイラストを挿入してください。
サイジング
モジュールを強制的に全幅にします。
- 全幅：はい
間隔
次に、間隔の設定を調整します。
- トップマージン：
- デスクトップ：-2vw
- タブレット+電話：-10vw
- 左マージン：
- デスクトップ+タブレット：-14vw
- 左右のパディング：
- デスクトップ：7vw
- タブレット+電話：35vw
3番目の画像モジュールを列1に追加します
画像を追加する
列に別の画像モジュールを追加し、イラストを挿入します。
サイジング
次に、モジュールを強制的に全幅にします。
- 全幅：はい
間隔
最後に、間隔を調整します。
- トップマージン：
- タブレット+電話：-18vw
- 左マージン：
- デスクトップ：-13vw
- タブレット+電話：10vw
- 左右のパディング：
- デスクトップ：7vw
- タブレット+電話：35vw
4番目の画像モジュールを列1に追加します
画像を追加する
列1の最後のモジュールは別の画像モジュールです。 イラストを挿入します。
サイジング
モジュールを強制的に全幅にします。
- 全幅：はい
間隔
次に、間隔を調整します。
- トップマージン：
- デスクトップ：3vw
- タブレット+電話：-15vw
- 左マージン：
- デスクトップ：-3vw
- タブレット+電話：30vw
- 左右のパディング：
- デスクトップ：10vw
- タブレット+電話：35vw
変身
最後になりましたが、イラストを回転させてください。
- 変換回転：84度
1番目のテキストモジュールを列2に追加します
コンテンツを追加する
次のコラムへ！ 選択したH3コンテンツを含むテキストモジュールを追加します。
リンクを追加
次に、モジュールへのリンクを追加します。
バックグラウンド
背景設定に移動し、次に背景色を追加します。
- 背景：色
- 背景色：ブラウン＃793715
見出しテキスト
次に、デザインタブでH3テキストのスタイルを設定します。
- 見出しテキストレベル：H3
- H3フォント：アニーは望遠鏡を使う
- H3カラー：ホワイト#ffffff
- H3フォントサイズ：
- デスクトップ：2vw
- タブレット：5vw
- 電話：6vw
サイジング
次に、サイズ設定を調整します。
- 幅：33％
- モジュールの配置：中央
間隔
次に、さまざまな画面サイズにわたっていくつかの間隔値を追加します。
- 下マージン：1vw
- トップパディング：
- デスクトップ：0.5vw
- タブレット+電話：2.3vw
- ボトムパディング：
- デスクトップ+タブレット：1.1vw
国境
境界線の半径を追加して続行します。
- 丸みを帯びた角：1vwすべての角
ボックスシャドウ
最後に、ボックスシャドウを追加します。
- ボックスシャドウ：最初のオプション
- 水平位置：7px
- ぼかし強度：25px
1番目の画像モジュールを列2に追加します
画像を追加
2列目に必要な次のモジュールは画像モジュールです。 2つの異なる画像をアップロードします。1つは静的状態用で、もう1つはホバー中です。
- 静的：最初の画像
- ホバー：2番目の画像
サイジング
画像を全幅に強制します。
- 全幅：はい
間隔
次に、間隔の値を調整します。
- トップマージン：
- デスクトップ：-2vw
- タブレット+電話：20vw
- 下マージン：
- デスクトップ+タブレット：4vw
- 左マージン：
- デスクトップ：-5vw
国境
次に丸い角を追加します。
- 丸みを帯びた角：10ピクセルすべての角
ボックスシャドウ
画像にも微妙なボックスシャドウを付けます。
- ボックスシャドウ：2番目のオプション
- 垂直位置：20px
- ぼかし強度：80px
変身
最後に、ホバーで変換スケール値を調整します。
- ホバー時の変換スケール：110％
列2のテキストモジュールと画像モジュールが重複しています
両方のモジュールのクローンを作成し、複製を正しい順序で配置します。
列2の2番目のテキストモジュールを調整します
コンテンツとリンクを変更する
重複テキストモジュールの内容を変更します。
列2の2番目のイメージモジュールを調整します
画像を変更する
静的設定とホバー設定の両方で画像を変更します。
列2のクローンを作成します
列3を削除し、列2を複製します
行の設定に戻り、3番目の列を削除します。 次に、2番目の列を複製します。
列3の最初のテキストモジュールを調整します
コンテンツとリンクを変更する
2番目の列を複製した後、列3の1番目のテキストモジュールのテキストとリンクを調整します。
列3の最初の画像モジュールを調整します
画像を変更する
画像モジュールの画像も変更します。
間隔
次に、間隔を調整します。
- トップマージン：
- デスクトップ：-2vw
- タブレット+電話：11vw
- 下マージン
- デスクトップ+タブレット：5vw
列3の2番目のテキストモジュールを調整します
コンテンツとリンクを変更する
列3の最後のテキストモジュールのテキストとリンクを変更します。
列3の2番目のイメージモジュールを調整します
画像を変更する
最後の画像モジュールの静止画像とホバー画像も変更します。
間隔
最後に、画像モジュールの間隔を調整すれば完了です。
- トップマージン：
- デスクトップ：-3vw
- タブレット+電話：7vw
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
結論
この投稿では、Diviの新しい画像置換ホバーオプションを使用してデザインを作成する方法を紹介しました。 この機能は、多くの創造的な可能性につながる可能性があります。 あなた自身のプロジェクトでそれらを使用することを願っています。 静止画像とホバー画像の両方に同じ画像サイズを使用することを忘れないでください。 ご質問やご提案がございましたら、下のコメント欄にご遠慮なくお寄せください。