Diviを使用してWoo製品ページのレスポンシブブロックデザインを作成する方法
公開: 2019-11-02Diviでwooモジュールを使用できるようになったので、唯一の制限は想像力です。 すべてのダイナミックウーモジュールは、ビルダー内の他のすべてのモジュールと同様にカスタマイズ可能です。 この投稿では、商品ページのクリエイティブなブロックデザインを再現する方法を紹介します。 ダイナミックモジュールは、暗い背景から際立つクリエイティブセットにグループ化されています。 JSONファイルを無料でダウンロードすることもできます！
それを手に入れましょう。
プレビュー
始める前に、さまざまな画面サイズのデザインを見てみましょう。
デスクトップ
モバイル
レスポンシブブロックデザインを無料でダウンロード
無料のレスポンシブブロックデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
1.WooCommerce製品を追加/開く
製品詳細
既存の製品を開くか、新しい製品を作成します。 このブロックスタイルのデザインを再現するには、次の情報を入力する必要があります。
- 題名
- 説明
- 価格
- カテゴリー
- 属性
- 注目の画像
属性タブは、woo追加情報モジュールの情報が取得される場所です。 この情報を追加するには、[属性]タブをクリックし、次のように3つのカスタム属性を作成します。
- 属性：
- 容量：250ml /ティーカップ2杯
- 材質：純銅
- 状態：通常の摩耗と破れ
注目の画像は、デザインの色と同じ色の背景を持っている必要があります。
DiviBuilderを有効にしてページ設定を変更する
すべての製品の詳細が入力されたら、先に進んでDiviBuilderを有効にします。 ページレイアウトを「全幅」に変更します。
VisualBuilderに切り替えます
VisualBuilderに切り替えて続行します。
デフォルトの製品セクションを削除
カスタム製品ページを作成しているので、先に進んでデフォルトのwoo製品セクションを削除します。
2.レスポンシブブロックデザインを再作成します
新しいセクションを追加
バックグラウンド
デザインを再作成するための最初のステップは、新しいセクションを追加することです。 さまざまな画面サイズにグラデーションの背景を追加します。
- 背景：グラデーション
- カラー1：ライトグレー＃f2f6f5
- カラー2：ほぼ黒＃313131
- 方向：
- デスクトップ：90％
- タブレット+電話：180％
- 開始+終了：
- デスクトップ：50％
- タブレット：40％
- 電話番号：30％
サイジング
セクションのサイズ設定を調整します。
- 幅：100％
- 最大幅：100％
間隔
デフォルトの上下のパディングも削除します。
- 上+下のパディング：0vw
可視性
最後に、セクションのオーバーフローを調整します。
- 垂直+水平オーバーフロー：非表示
行＃1を追加
カラム構造
セクションを設定した後、1列の最初の行を追加します。
サイジング
[デザイン]タブで、さまざまな画面サイズに合わせてサイズを調整します。
- 幅：
- デスクトップ：50％
- タブレット+電話：100％
- 最大幅：100％
- 行の配置：左
可視性
最後に、水平および垂直オーバーフローを表示に設定します。
- 水平+目に見えるオーバーフロー：目に見える
ウーブレッドクラムを追加
コンテンツ
最初のモジュールであるウーブレッドクラムモジュールを追加します。 「この製品」を選択します。
- 製品：この製品
文章
[デザイン]タブで、テキストのスタイルを次のように設定します。
- テキストフォント：Fenix
- テキストの色：ブラウン＃594239
- 文字サイズ：
- デスクトップ：1vw
- タブレット：2vw
- 電話：3vw
間隔
さまざまな画面サイズにいくつかの間隔値を追加します。
- トップマージン：3vw
- 左マージン：
- デスクトップ：10vw
- タブレット+電話：20vw
ウー画像を追加
コンテンツを追加する
次に、WooImageモジュールを使用して製品画像を追加します。 [コンテンツ]タブで、[この製品]を選択します。
- 製品：この製品
サイジング
モジュールのサイズを調整して続行します。
- 幅：100％
可視性
最後に、オーバーフローを非表示にします。
- 水平+垂直オーバーフロー：非表示
行＃2を追加
カラム構造
2列の2番目の行を追加します。
サイジング
まず、サイズを調整します。
- 側溝幅：1
- 幅：
- デスクトップ：53％
- タブレット+電話：53％
- 最大幅：100％
- 配置：右
間隔
次に、間隔の値。
- トップマージン：
- デスクトップ：-47vw
- タブレット+電話：0vw
- 左マージン：
- タブレット：-5vw
- 電話番号：-8vw
- ボトムパディング：
- デスクトップ+タブレット：4.1vw
- 左パディング：
- デスクトップ：0vw
- タブレット：16vw
- 電話番号：12vw
- 右パディング：
- デスクトップ：0vw
- タブレット：0vw
カスタムCSS
[詳細設定]タブで、カスタムCSSを追加します。
- 主な要素のCSS：
- 表示：フレックス;
display: flex;
可視性
最後に、オーバーフローを表示に設定します。
- 水平+垂直オーバーフロー：目に見える
列1の設定
間隔
モジュールを追加する前に、列1の間隔の値を調整してください。
- 左パディング：4vw
- 右パディング：0vw
列2の設定
間隔
列2の間隔の値も調整します。
- トップパディング：
- デスクトップ：7vw
- タブレット：17vw
- 電話番号：28vw
- 右パディング：
- デスクトップ+タブレット：15vw
列1にテキストモジュールを追加
コンテンツを追加する
次に、モジュールを追加します。 テキストモジュールから始めます。 製品の説明的なコンテンツを挿入します。
文章
次に、テキストのスタイルを設定します。
- フォント：Fenix
- 色：＃f2eed0
- サイズ：
- デスクトップ：1.3vw
- タブレット：2.6vw
- 電話：3.8vw
- 文字間隔：1px
- 配置：中央
サイジング
さまざまな画面サイズに合わせてモジュールのサイズを調整します。
- 幅：
- デスクトップ：50％
- タブレット：60％
- 電話番号：80％
間隔
また、間隔の値を次のように調整します。
- 上+下のパディング：1vw
- 左+右パディング：1vw
国境
それに応じてモジュールに境界線を追加します。
- ボーダースタイル：上+左+右
- 境界線の幅：
- 上+左+右：2px
- ボーダの色：
- 上+左+右：クリーム＃f2eed0
列1にウータイトルを追加
コンテンツを追加する
次に、wooタイトルモジュールを追加し、コンテンツタブで「この製品」を選択します。
- 製品：この製品
バックグラウンド
モジュールのスタイルを設定するには、濃いオレンジ色の背景を追加します。
- 背景：色
- カラー：コッパーオレンジ＃d66b00
タイトルテキスト
次に、見出しのテキスト設定を変更します。
- タイトル見出しレベル：H1
- フォント：Fenix
- 色：クリーム＃f2eed0
- サイズ：
- デスクトップ：2.9vw
- タブレット：7.8vw
- 電話：13.9vw
- H1文字間隔：1px
サイジング
さらに、モジュールのサイズを調整します
- 幅：100％
間隔
次に、いくつかのパディング値を追加します。
- 上+下のパディング：
- デスクトップ：2vw
- タブレット：3vw
- 電話番号：4vw
- 左+右パディング：
- デスクトップ：2vw
- タブレット：3vw
- 電話番号：4vw
国境
最後に、次のように境界線を追加します。
- ボーダースタイル：上+左+右
- 境界線の幅：
- 上+左+右：2px
- ボーダの色：
- 上+左+右：クリーム＃f2eed0
列1にウーの説明のタイトルを追加
コンテンツを追加する
タイトルの下に、woodescriptionモジュールを追加します。 [コンテンツ]タブで、[この製品]を選択します。
- 製品：この製品
- 説明タイプ：説明
文章
次に、テキストのスタイルを設定します。
- フォント：Open Sans
- 色：クリーム＃f2eed0
- サイズ：
- デスクトップ：08vw
- タブレット：2vw
- 電話：3vw
サイジング
また、サイズを調整します。
- 幅：100％
間隔
同様に、間隔を調整します。
- 上+下のパディング：
- デスクトップ：2vw
- タブレット+電話：3vw
- 左+右パディング：
- デスクトップ：2vw
- タブレット+電話：3vw
国境
他のモジュールと同様に、境界線を追加します。
- ボーダースタイル：4つのボーダーすべて
- 幅：2px
- 色：クリーム＃f2eed0
列2にWoo追加情報を追加
コンテンツを追加する
次に、woo追加情報モジュールを使用してカスタム属性を追加します。 [コンテンツ]タブで、[この製品]を選択します。
- 製品：この製品
文章
テキスト設定を次のように変更します。
- フォント：Open Sans
- スタイル：斜体
- 色：クリーム＃f2eed0
- サイズ：
- デスクトップ：0.6vw
- タブレット：1.6vw
- 電話：2.2vw
属性テキスト
次に、それに応じて属性テキストのスタイルを設定します。
- フォント：Fenix
- 色：クリーム＃f2eed0
- サイズ：
- デスクトップ：1.1vw
- タブレット：2vw
- 電話：3vw
- 間隔：1px
サイジング
また、サイズを調整します。
- 幅：100％
国境
そして最後に、境界線を追加します。
- ボーダースタイル：上+右+下
- 境界線の幅：
- 上+右+下：2px
- ボーダの色：
- 上+右+下：クリーム＃f2eed0
行＃3を追加
カラム構造
2列の3番目の行を追加します。
サイジング
モジュールを追加する前に、さまざまな画面サイズに合わせて行のサイズを調整してください。
- 幅：
- デスクトップ：50％
- タブレット：87％
- 電話番号：93％
- 配置：右
パディング
また、パディングを調整します。
- ボトムパディング：12vw
列1の設定
間隔
最初の列のパディングを調整して続行します。
- 左パディング：
- デスクトップ：5vw
- タブレット+電話：12vw
列1にウー価格を追加
コンテンツを追加する
次に、woo価格モジュールを使用して製品の価格を追加します。 [コンテンツ]タブで、[この製品]を選択します。
- 製品：この製品
価格テキスト
次に、それに応じてテキストのスタイルを設定します。
- フォント：Fenix
- 色：クリーム＃f2eed0
- サイズ：
- デスクトップ：1.5vw
- タブレット：3.5vw
- 電話：5vw
サイジング
また、モジュールのサイズを調整します。
- 幅：
- デスクトップ：39％
- タブレット：45％
- 電話番号：54％
間隔
間隔も調整します。
- トップパディング：
- デスクトップ：1vw
- タブレット：2vw
- 電話：3v2
- ボトムパディング：
- デスクトップ：1vw
- タブレット+電話：2vw
- 左パディング：
- デスクトップ：1vw
- タブレット+電話：2vw
- 右パディング：
- タブレット+電話：2vw
国境
最後に、境界線を追加します。
- ボーダースタイル：4辺すべて
- 幅：2px
- 色：クリーム＃f2eed0
Woo Add ToCartを列2に追加
コンテンツを追加する
最後のモジュールは、カートへの追加モジュールです。 [コンテンツ]タブで、[この製品]を選択します。
ボタンのスタイル
次のようにボタンのスタイルを設定します。
- カスタムスタイル：はい
- ボタンのテキストサイズ：
- デスクトップ：1.3vw
- タブレット：3.5vw
- 電話：5vw
- テキストの色：クリーム＃f2eed0
- 背景色：コッパーオレンジ＃d66b00
ボタンのパディング
次に、ボタンにいくつかのパディング値を追加します。
- トップ+ボトムパディング：0.5vw
- 左+右パディング：1.5vw
サイジング
最後になりましたが、モジュールのサイズを調整すれば完了です。
- 幅：100％
プレビュー
さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
それはラップです
それでおしまい！ コンテンツがこのチュートリアルのコンテンツよりも長いまたは短い場合、ブロックの間隔が乱れる可能性があります。 あなたがしなければならないのは、それらが構成によりよく合うように列の設定を調整することです。 このチュートリアルが、より素晴らしいDiviデザインを作成するきっかけになることを願っています。 ご不明な点がございましたら、コメント欄でお知らせください。