モジュールの背景を使用してDiviでインライン視差画像を表示する
公開: 2019-09-07CSSインライン視差背景を使用すると、Webサイトのルックアンドフィールを向上させることができます。このチュートリアルは、完璧な例です。 複数のモジュール背景を使用して、背景画像の複数の部分を表示する見事で一貫性のある結果を作成します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
インライン視差レイアウトを無料でダウンロード
無料のインライン視差レイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう
新しいセクションを追加
作業中のページに新しい通常のセクションを追加することから始めます。
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
列1の設定
間隔
最初の列に一番上のパディング値を追加します。
- トップパディング：
- デスクトップ：2vw
- タブレット+電話：6vw
列2の設定
間隔
2番目の列にも上部のパディング値を追加します。
- トップパディング：
- デスクトップ：4vw
- タブレット+電話：6vw
列4の設定
間隔
列3をスキップし、列4にいくつかの間隔値を追加します。
- トップパディング
- デスクトップ：19vw
- タブレット：0vw
- 電話：1vw
- 左右のパディング
- デスクトップとタブレット：1vw
- 電話番号：0vw
1番目のテキストモジュールを列1に追加します
H2コンテンツを追加する
次に、最初のテキストモジュールを列1に追加します。選択したH2コンテンツを挿入します。
見出しテキスト
[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。
- 見出しテキストレベル：H2
- H2フォント：EB Garamond
- H2フォントスタイル：TT
- H2テキストの色：黒#oooooo
- H2テキストサイズ：
- デスクトップ：3.1vw
- タブレット：5.4vw
- 電話：10vw
- H2ラインの高さ：
- デスクトップ+タブレット：1.1em
- 電話番号：1.3em
間隔
次に、モジュールに間隔を追加します。
- トップパディング：
- デスクトップ：4vw
- タブレット+電話：0vw
- 左パディング：
- デスクトップとタブレット：1vw
- 電話：2vw
- 右パディング
- デスクトップとタブレット：1vw
- 電話番号：0vw
2番目のテキストモジュールを列1に追加します
コンテンツを追加する
次に、最初のテキストモジュールの下に2番目のテキストモジュールを追加します。 段落の内容を挿入します。
文章
[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：EB Garamond
- テキストの色：ダークグレー＃3d3d3d
- 文字サイズ：
- デスクトップ：1vw
- タブレット：2.2vw
- 電話：3.8vw
- テキスト行の高さ：1.8em
間隔
次に、モジュールの間隔設定を調整します。
- ボトムパディング：
- 電話：4vw
- 左パディング：
- デスクトップ+タブレット：1.4vw
- 右パディング：
- デスクトップ：1.3vw
- タブレット+電話：1.7vw
ボタンモジュールを列1に追加
コンテンツを追加する
最初の列を完了するには、ボタンモジュールを追加します。 コピーを挿入します。
リンクを追加
ボタンへのリンクも追加します。
ボタン
[デザイン]タブに移動し、それに応じてボタン設定のスタイルを設定します。
- ボタンのテキストサイズ：
- デスクトップ：1vw
- タブレット：2vw
- 電話：4vw
- ボタンのテキストの色：ダークグレー＃3d3d3d
- ボタンの境界線の幅：1px
- ボタンフォント：EB Garamond
間隔
次に、ボタンの間隔設定を調整します。
- トップマージン：
- デスクトップ+タブレット：1vw
- 下マージン：
- 電話：5vw
1番目のテキストモジュールを列2に追加します
コンテンツを追加する
次のコラムへ！ 選択したH4コンテンツを含むテキストモジュールを追加します。
バックグラウンド
背景画像を追加して続行します。 デスクトップ用のCSS視差背景画像をアップロードし、小さい画面サイズで通常の画像を使用します（CSS視差なし）。
- デスクトップの背景：画像
- 視差：CSS
- タブレット+電話の背景：画像
背景ホバー
次に、ホバーのみにグラデーションの背景を追加します。
- 背景ホバー：色のグラデーション
- 色のグラデーション1：ライトゴールデンイエロー＃edba63
- 色のグラデーション2：ゴールデンイエロー＃ed9d12
- 勾配方向：23度
- 背景画像の上にグラデーションを配置：はい
見出しテキスト
デザインタブに移動し、H4テキスト設定を変更します。
- テキスト見出しレベル：H4
- H4フォント：EB Garamond
- H4テキストの色：白#ffffff
- H4テキストサイズ：
- デスクトップ：2.3vw
- タブレット：4.5vw
- 電話：8.5vw
間隔
次に、間隔を調整します。
- トップマージン：
- 電話：-6vw
- トップパディング：
- デスクトップ：15vw
- タブレット：22vw
- 電話番号：43vw
- ボトムパディング：
- デスクトップ+タブレット：1vw
- 左右のパディング：
- デスクトップとタブレット：1.5vw
- 電話：5vw
国境
ボーダーのスタイリングを続けます。
- 丸みを帯びた角：1vwすべての角
- ボーダースタイル：すべての側面
- ボーダー幅：0.3vw
- ボーダーカラー：ホワイト#ffffff
スケールホバーの変換
ホバーにズーム効果を追加して、モジュールの設定を完了します。
- ホバー時の変換スケール：102％
2番目のテキストモジュールを列2に追加します
コンテンツを追加する
選択したH4コンテンツを含む2番目のモジュールを2番目の列に追加します。
バックグラウンド
前のテキストモジュールと同様に、デスクトップにCSS視差の背景画像を追加し、小さい画面サイズに通常の背景画像を追加します。
- デスクトップの背景：画像
- 視差：CSS
- タブレット+電話の背景：画像
背景ホバー
ホバーグラデーションの背景も追加します。
- 背景ホバー：色のグラデーション
- 色のグラデーション1：ライトマゼンタ＃91463f
- 色のグラデーション2：マゼンタ＃910400
- 勾配方向：23度
- 背景画像の上にグラデーションを配置：はい
見出しテキスト
次に、H4テキスト設定のスタイルを設定します。
- テキスト見出しレベル：H4
- H4フォント：EB Garamond
- H4テキストの色：白#ffffff
- H4テキストサイズ：
- デスクトップ：2.3vw
- タブレット：4.5vw
- 電話：8.5vw
間隔
そして、間隔の設定を変更します。
- トップパディング：
- デスクトップ：15vw
- タブレット：21.1vw
- 電話番号：43vw
- ボトムパディング：
- デスクトップ+タブレット：1vw
- 左右のパディング：
- デスクトップとタブレット：1.5vw
- 電話：5vw
国境
境界線の設定も変更します。
- 丸みを帯びた角：1vwすべての角
- ボーダースタイル：すべての側面
- ボーダー幅：0.3vw
- ボーダーカラー：ホワイト#ffffff
スケールホバーの変換
最後になりましたが、テキストモジュールにズームイン効果を追加します。
- ホバー時の変換スケール：102％
列2から列3にテキストモジュールを複製します
テキストモジュールを複製してドラッグする
両方のテキストモジュールのクローンを作成し、行の3番目の列に配置します。
列3の最初のテキストモジュールを調整します
H4コンテンツの変更
列3の最初の重複テキストモジュールを開き、内容を変更します。
タブレットと電話の背景を変更する
次に、小さい画面サイズの背景画像を変更します。
ホバーで色のグラデーションを変更する
グラデーションホバーで色を変更して続行します。
- 色のグラデーション1：ローズピンク＃cc9293
- 色のグラデーション2：ピンク＃cc9293
間隔
最後に、次のように間隔を調整します。
- トップマージン：
- タブレット：-6.4vw
- 電話番号：0vw
列3の2番目のテキストモジュールを調整します
H4コンテンツの変更
まず、内容を変更します。
タブレットと電話の背景を変更する
次に、小さい画面サイズで背景画像を変更します。
ホバーで色のグラデーションを変更する
グラデーションの背景も変更します。
- 色のグラデーション1：ソフトパイン＃5c755c
- 色のグラデーション2：パイングリーン＃4D754D
1番目のテキストモジュールを列4に追加します
コンテンツを追加する
列4に移動して、テキストモジュールを追加します。 選択したH3コンテンツをいくつか挿入します。
見出しテキスト
[デザイン]タブに移動し、H3テキスト設定を次のように変更します。
- 見出しテキストレベル：H3
- H3テキストフォント：EB Garamond
- H3フォントスタイル：TT
- H3テキストの色：黒#oooooo
- H3テキストサイズ：
- デスクトップ：3vw
- タブレット：5vw
- 電話番号：12vw
- H3ラインの高さ
- デスクトップ+タブレット：1em
- 電話番号：1.1em
2番目のテキストモジュールを列4に追加します
コンテンツを追加する
最初のテキストモジュールの下に別のテキストモジュールを追加します。 段落の内容を挿入します。
文章
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：EB Garamond
- テキストの色：ダークグレー＃3d3d3d
- 文字サイズ：
- デスクトップ：1vw
- タブレット：2.2vw
- 電話：3.8vw
- テキスト行の高さ：1.8em
間隔
次に、間隔を調整します。
- ボトムパディング：
- 電話：4vw
- 左パディング：0.9vw
- 右パディング：2.2vw
ボタンモジュールを列1から列4に複製
ボタンモジュールを複製してドラッグします
- 列1のボタンモジュールを複製します。
- テキストモジュールの下の列3にドラッグします。
間隔
複製されたボタンモジュールのいくつかの間隔値を調整すれば完了です！
- 下マージン：0vw
- 左マージン：
- デスクトップ+タブレット：0.7vw
- 電話：0.9vw
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
結論
この投稿では、同じ画像の異なる部分を表示する4つのテキストボックスを使用してインライン視差デザインを作成する方法を示しました。 このデザインを楽しんでいただければ幸いです。ご質問やご提案がございましたら、下のコメントセクションにコメントを残してください。