見事なDivi分割セクションデザインで画像を切り替える方法
公開: 2019-10-31インタラクティブなデザインはどんなウェブサイトも輝かせることができます。 このチュートリアルでは、見事な分割セクションデザインで画像を切り替える方法を紹介します。 画像にカーソルを合わせると、他の画像を覆いながら前面に表示されます。 以下の手順に従って、デザインを再作成するか、サインアップリンクからJSONファイルをダウンロードします。 各列の背景色を制御できるように、背景が透明な画像を使用してください。
それを手に入れよう！
プレビュー
さまざまな画面サイズのデザインを見てみましょう。
デスクトップ
モバイル
Toggle ImageDesignを無料でダウンロード
無料のトグル画像デザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう
新しいセクションを追加
間隔
新しいページを作成するか、既存のページを開きます。 通常のセクションを追加し、セクション設定を開いて、デフォルトの上下のパディングをすべて削除します。
- 上+下のパディング：0vw
可視性
次に、セクションのオーバーフローを非表示に設定します。
- 水平+垂直オーバーフロー：非表示
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールを追加する前に、行のサイズを調整してください。
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
行のデフォルトの上部と下部のパディングも削除します。
- 上下のパディング：0vw
列1の設定
バックグラウンド
次に列1の設定を開き、背景色を追加します。
- カラー：ペールローズ＃E7BAC6
国境
次に、さまざまな画面サイズで列の境界線設定を調整します。
- 丸みを帯びた角：右上+右下
- デスクトップ：10vw
- タブレットと電話：0vw
可視性
[詳細設定]タブに移動し、次のように表示設定を調整します。
- 水平+垂直オーバーフロー
- デスクトップ：デフォルト
- ホバー：表示
- Zインデックス：
- デスクトップ：10
- ホバー：11
列2の設定
バックグラウンド
次に、色の背景を列2に追加します。
- 色：ペールグリーン＃bfd5a5
国境
2番目の列の境界線設定を次のように変更します。
- 丸みを帯びた角：左上+左下
- デスクトップ：10vw
- タブレットと電話：0vw
可視性
最後になりましたが、それに応じて可視性の設定を変更します。
- 水平+垂直オーバーフロー
- デスクトップ：デフォルト
- ホバー：表示
- Zインデックス：
- デスクトップ：9
- ホバー：11
列1に画像モジュールを追加
画像を追加
モジュールの追加を開始する時が来ました！ 画像モジュールを列1に追加し、選択した半透明の画像をアップロードします。
バックグラウンド
列の背景色を画像の背景色として使用します。
- カラー：ペールローズ＃E7BAC6
サイジング
次に、[デザイン]タブで、サイズ設定を調整します。
- 全幅を強制：はい
間隔
カスタムパディングも追加します。
- 右パディング：
- タブレット：18vw
- 電話番号：20vw
変身
大事なことを言い忘れましたが、モジュールの変換変換設定を調整します。
- 変換変換：x軸19vw
列1にテキストモジュールを追加
コンテンツを追加する
次のモジュール、つまりテキストモジュールに進みます。 選択したH2と段落のコンテンツをいくつか追加します。
文章
[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- フォント：Verdana
- 色：白#ffffff
- サイズ：
- デスクトップ：2vw
- タブレット：3vw
- 電話：3.5vw
- 文字間隔：1px
- 配置：中央揃え
見出しテキスト
次に見出しテキストのスタイルを設定します。
- 見出しレベル：H2
- フォント：Verdana
- 重量：太字
- 配置：中央
- 色：マゼンタ＃9d3056
- サイズ：
- デスクトップ：6vw
- タブレット+電話：8vw
サイジング
次に、モジュールのサイズを調整します。
- 幅：
- デスクトップ：56％
- タブレット+電話：43％
間隔
さまざまな画面サイズで間隔設定を変更して、モジュールの設定を完了します。
- トップマージン：
- デスクトップ：-55vw
- タブレット：-70vw
- 電話番号：-90vw
- ボトムパディング：
- デスクトップ+タブレット：0vw
- 左パディング：2vw
バーカウンターモジュールを列1に追加
バーカウンター設定1-4
タイトル
列1で必要な次の最後のモジュールは、バーカウンターモジュールです。 バーカウンターにタイトルを追加します。
- 苺
- ブルーベリー
- ブラックベリー
- ラズベリー
パーセンテージ
パーセンテージとともに。
- 20
- 40
- 10
- 20
サイジング
最初のバーをクリックして、高さを設定します。 4つのバーすべてに対してこの手順を繰り返します。
- 高さ：1.5vw
一般的なバーカウンターの設定
要素
一般的なバーカウンター設定で、要素設定を開きます。 パーセンテージを「いいえ」に切り替えます。
- パーセンテージを表示：いいえ
バックグラウンド
次に、半透明の背景を追加します。
- 色：透明度のあるペールローズrgba（157,48,86,0.18）
バー
[デザイン]タブで、バーにマゼンタのバーの色を付けます。
- 背景色：マゼンタ＃9d3056
タイトルテキスト
次に、タイトルテキスト設定のスタイルを設定します。
- フォント：Verdana
- 色：白#ffffff
- サイズ：
- デスクトップ：1vw
- タブレット：2vw
- 電話：3vw
サイジング
モジュールのサイズ設定を調整して続行します。
- 幅：
- デスクトップ：49％
- タブレット+電話：33％
間隔
間隔の設定も変更します。
- トップマージン：
- タブレット+電話：-3vw
- 下マージン：
- デスクトップ：21vw
- タブレット+電話：28vw
- 左マージン：
- デスクトップ：3vw
- タブレット+電話：6vw
- 下+左パディング：0vw
国境
次に、境界線の設定を変更します。
- 丸みを帯びた角：1vw四隅すべて
可視性
最後に、可視性タブでzインデックスとオーバーフローを調整します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：非表示
- Zインデックス：11
列2に画像モジュールを追加します
画像を追加
2列目へ！ 新しい画像モジュールを追加し、選択した半透明の画像をアップロードします。
バックグラウンド
次に、列2の背景色を画像の背景色として使用します。
- 色：ペールグリーン＃bfd5a5
サイジング
[デザイン]タブで、モジュールのサイズを調整します。
- 全幅を強制：はい
間隔
小さい画面サイズにもカスタムの左パディングを追加します。
- 左パディング：
- タブレット：16vw
- 電話：18vw
変身
大事なことを言い忘れましたが、変換変換設定を変更します。
- 変換変換：x軸-19.6vw
列2にテキストモジュールを追加します
コンテンツを追加する
続けて、テキストモジュールを列2に追加し、H2と段落の内容をいくつか追加します。
文章
次に、[デザイン]タブで、テキストのスタイルを設定します。
- フォント：Verdana
- 色：白#ffffff
- サイズ：
- デスクトップ：2vw
- タブレット：3vw
- 電話：3.5vw
- 文字間隔：1px
- 配置：中央
見出しテキスト
見出しのテキスト設定も変更します。
- 見出しレベル：H2
- フォント：Verdana
- 重量：太字
- 配置：中央
- 色：緑＃2c5b00
- サイズ：
- デスクトップ：6vw
- タブレット+電話：8vw
サイジング
そして、モジュールのサイズ設定を調整します。
- 幅：60％
- 配置：右
間隔
大事なことを言い忘れましたが、さまざまな画面サイズでいくつかのカスタム間隔値を使用してください。
- トップマージン：
- デスクトップ：-55vw
- タブレット：-63vw
- 電話番号：-90vw
- ボトムパディング：
- デスクトップ+タブレット：37vw
- 左パディング：
- デスクトップ：0vw
- タブレット+電話：16vw
- 右パディング：
- タブレット+電話：2vw
バーカウンターモジュールを列2に追加
バーカウンター設定1-4
タイトル
列2に必要な最後のモジュールは、バーカウンターモジュールです。 4つのバーカウンターを追加します。
- ブロッコリー
- セロリ
- キュウリ
- ケール
パーセンテージ
各バーカウンターにパーセンテージを割り当てます。
- 20
- 40
- 20
- 30
サイジング
最初のバーの個々の設定を開き、サイズ設定で高さを変更します。 4つのバーすべてに対してこの手順を繰り返します。
- 高さ：1.5vw
一般的なバーカウンターの設定
要素
一般的なバーカウンター設定で、パーセンテージトグルを「いいえ」に変更します。
- パーセンテージを表示：いいえ
バックグラウンド
次に、半透明の背景色を追加します。
- 色：透明度のある淡い緑色rgba（17,119,3,0.18）
バー
次に、[デザイン]タブで、カウンターバーに色を追加します。
- バーの色：緑＃9d3056
タイトルテキスト
テキストのスタイルを設定して続行します。
- フォント：Verdana
- 色：白#ffffff
- サイズ：
- デスクトップ：1vw
- タブレット：2vw
- 電話：3vw
サイジング
さまざまな画面サイズの幅も変更します。
- 幅：
- デスクトップ：49％
- タブレット+電話：33％
間隔
間隔設定に移動し、さまざまな画面サイズにカスタム間隔値を追加します。
- トップマージン：
- デスクトップ：-37vw
- タブレット+電話：-40vw
- 下マージン：
- デスクトップ：21vw
- タブレット+電話：28vw
- 左マージン：
- デスクトップ：23vw
- タブレット+電話：60vw
- 下+左パディング：0vw
国境
丸みを帯びた角もいくつか追加しています。
- 丸みを帯びた角：1vw四隅すべて
可視性
可視性タブでオーバーフローとzインデックスを調整して、モジュールの設定を完了します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：非表示
- Zインデックス：11
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
それはラップです！
この投稿では、美しいデザインの画像を切り替える方法を紹介しました。 これは、インタラクティブなデザインを作成し、Diviの組み込みのzインデックスを使用して、表示される画像を決定するための優れた方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！