Diviの列オプションを使用して背景画像で製品をフレーム化する方法
公開: 2020-01-26DiviのWooCommerceモジュールがあれば、Diviを使用して実現できるデザインはたくさんあります。 今日のDiviチュートリアルでは、Diviの組み込みオプションのみを使用して実現できる別の設計アイデアであなたを刺激しようとします。 具体的には、背景画像で商品をフレームに収める方法を紹介します。 結果は背景画像に完全に依存しますが、このチュートリアルを実行すると、自分のWebサイト用にテクニックをパーソナライズするために実行する手順がわかります。 チュートリアルのJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
フレーム製品レイアウトを無料でダウンロード
フリーフレームの製品レイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.レスポンシブ背景画像を使用してセクションを設定します
新しいセクションを追加
レスポンシブ背景画像
背景画像で商品をフレームに収める最初のステップは、作業中のページに新しいセクションを追加することです。 セクション設定を開き、レスポンシブ背景画像をアップロードします。 使用した両方の画像は、この投稿の冒頭でダウンロードできたフォルダーにあります。
- 背景画像：風景
- 背景画像サイズ：フィット
- 背景画像の位置：上部中央
- 背景画像：正方形
間隔
[デザイン]タブに移動し、さまざまな画面サイズにカスタムの上下のパディングを追加します。
- トップパディング：3vw（デスクトップ）、0vw（タブレットと電話）
- 下部のパディング：3vw（デスクトップ）、7vw（タブレット）、18vw（電話）
国境
境界線を追加してセクション設定を完了します。
- ボーダー幅：2vw
- ボーダーカラー：#ffffff
2.列に異なるフレーム要素を追加します
新しい行を追加
カラム構造
これで、背景画像でわかるように、製品は背景画像の右側に配置されています。 このセクションでは、新しい行に一致する列構造を選択します。 この場合、それは次の列構造です。
サイジング
モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
間隔
カスタムの左右のパディングを追加して、行の設定を完了します。
- 左パディング：5vw
- 右パディング：5vw
列2にテキストモジュールを追加します
コンテンツボックスを空のままにします
モジュールの追加を開始する時が来ました！ 製品が透けて見えるようにするために、空のテキストモジュールを使用します。
間隔
次に、間隔設定でモジュールの高さを増やします。
- トップパディング：22vw（デスクトップ）、39vw（タブレット）、35vw（電話）
- 下部のパディング：15vw（デスクトップ）、39vw（タブレット）、35vw（電話）
国境
また、境界線も追加します。
- ボーダー幅：3vw
- 下の境界線の幅：1vw
- ボーダーカラー：rgba（255,255,255,0.7）
Wooタイトルモジュールを列2に追加
動的コンテンツ
次のモジュールであるWooTitleモジュールに進みます。 お好みの製品を選択してください。
- 製品：リストで検索
背景色
次の背景色を使用します。
- 背景色：rgba（255,255,255,0.7）
タイトルテキスト設定
モジュールの[デザイン]タブに移動し、それに応じてH3テキスト設定を変更します。
- タイトル見出しレベル：H3
- タイトルフォント：Work Sans
- タイトルテキストサイズ：2.5vw（デスクトップ）、5vw（タブレット）、6vw（電話）
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：1vw
- ボトムパディング：1vw
- 左パディング：3vw
- 右パディング：3vw
Woo説明モジュールを列2に追加
動的コンテンツ
次に必要なモジュールはWooDescriptionModuleです。 お好みの製品を選択してください。
- 製品：リストで検索
- 説明タイプ：簡単な説明
背景色
それに応じてモジュールの背景色を変更します。
- 背景色：rgba（255,255,255,0.7）
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストサイズ：0.9vw（デスクトップ）、2.2vw（タブレット）、2.8vw（電話）
- タイトル行の高さ：2.2em
間隔
いくつかのカスタムパディング値を追加して、モジュール設定を完了します。
- トップパディング：1vw
- ボトムパディング：1vw
- 左パディング：3vw
- 右パディング：3vw
WooPriceテキストモジュールを列2に追加
動的コンテンツ
次は、Woo Price TextModuleです。 お好みの製品を選択してください。
- 製品：リストで検索
背景色
背景色を変更します。
- 背景色：rgba（255,255,255,0.7）
価格テキスト設定
モジュールの[デザイン]タブに移動し、それに応じて価格テキストの設定を変更します。
- 価格フォント：Work Sans
- 価格テキストの色：＃000000
- 価格テキストサイズ：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
間隔
いくつかのカスタムパディング値を追加して、モジュール設定を完了します。
- トップパディング：2vw
- ボトムパディング：2vw
- 左パディング：3vw
- 右パディング：3vw
Woo Add To CartModuleを列2に追加
動的コンテンツ
次の最後のモジュールであるWooAdd To Cartモジュールに進みます！ お好みの製品を選択してください。
- 製品：リストで検索
背景色
背景色を変更します。
- 背景色：rgba（255,255,255,0.7）
フィールド設定
モジュールのフィールド設定も変更します。
- フィールドの背景色：#ffffff
- フィールドテキストの色：＃000000
- フィールドフォント：Open Sans
- フィールド下部境界線幅：1px
- フィールド下の境界線の色：＃000000
ボタンの設定
次のようにボタンのスタイルを設定して続行します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1.1vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃000000
- ボタンの境界線の幅：0px
- ボタンの境界半径：10vw
- ボタンフォント：Sansを開く
- トップパディング：1vw（デスクトップ）、2vw（タブレット）、4vw（電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、4vw（電話）
- 左パディング：4vw（デスクトップ）、6vw（タブレット）、10vw（電話）
- 右パディング：4vw（デスクトップ）、6vw（タブレット）、10vw（電話）
間隔
そして、いくつかのカスタムマージンとパディング値を追加して、モジュール設定を完了します。
- 下マージン：2vw
- トップパディング：3vw
- ボトムパディング：3vw
- 左パディング：3vw
- 右パディング：3vw
3.列のスタイル、サイズ変更、および再配置
列2の設定を変更する
グラデーションの背景
さて、このチュートリアルの最後の部分では、さまざまなモジュールを統合することができます。 列2の設定を開き、次のグラデーションの背景を使用します。
- 色1：rgba（43,135,218,0）
- 色2：#ffffff
- グラデーションタイプ：線形
- 開始位置：39％
国境
いくつかの丸い角も追加します。
- すべてのコーナー：1vw
ボックスシャドウ
微妙なボックスシャドウも追加して、奥行きを作成しています。
- ボックスシャドウブラー強度：100px
- 影の色：rgba（0,0,0,0.24）
変換翻訳
そして、さまざまな画面サイズで変換変換値を変更して、列の設定を完了します。 この手順により、必要に応じて列を再配置できます。 独自の背景画像を使用する場合は、間違いなくこのオプションをお楽しみいただけます！
- 右：0px（デスクトップ）、9vw（タブレットと電話）
- 下：-5vw（デスクトップ）、0vw（タブレットと電話）
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの組み込みオプションとDivi Builderに含まれているWooCommerceモジュールを使用して、背景画像で製品をフレーム化する方法を示しました。 採用するアプローチは、使用している背景画像によって異なりますが、このチュートリアルを実行すると、全体的なアプローチを理解するのに役立ちます。 レイアウトのJSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。