Divi製品ページテンプレート内にWooギャラリー画像を垂直に積み重ねる方法
公開: 2020-07-01デフォルトでは、ギャラリー画像をWooCommerce製品に追加するとすぐに、製品ページデザインのフロントエンドで製品の注目画像の下に水平に表示されます。 一部の特定のデザインでは、たとえばフルスクリーンの製品ページデザインでは、これらのwooギャラリー画像を垂直に積み重ねる方が便利な場合があります。 Diviのテーマビルダーで作成した製品ページテンプレート内にwooギャラリー画像を垂直に積み重ねる簡単な方法を探している場合は、このチュートリアルを気に入るはずです。 そこにたどり着く方法を段階的に説明します。 このアプローチには、無料でダウンロードできる最小限の製品ページテンプレートが付属しています。 このチュートリアルは、1：1の比率の画像を使用する製品ページで最適に機能します。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
製品ページテンプレートを無料でダウンロード
無料の製品ページテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
Diviテーマビルダー内で製品ページテンプレートを作成する
Diviテーマビルダーに移動し、新しいテンプレートを追加します
まず、Diviテーマビルダーに移動し、[新しいテンプレートの追加]をクリックします。
すべての製品でテンプレートを使用する
このテンプレートはすべての製品で使用されますが、条件を自由に変更してください。
テンプレートのボディテンプレートエディタを入力してください
テンプレートを作成したら、[カスタムボディの追加]をクリックし、[カスタムボディの作成]を選択して続行し、テンプレートエディタにリダイレクトします。
カテゴリページテンプレート本文の作成を開始します
セクション＃1を変更する
背景色
テンプレートエディタ内に、セクションがあります。 そのセクションを開き、白い背景色を追加します。
- 背景色：#ffffff
間隔
[デザイン]タブに移動し、次にデフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：95％
- 最大幅：2560px
- 行の配置：中央
間隔
小さい画面サイズでも、カスタムの上下のパディングを使用します。
- トップパディング：100px（タブレットと電話のみ）
- 下部のパディング：100px（タブレットと電話のみ）
主な要素CSS
デスクトップで列のコンテンツを整列させるために、行のメイン要素で2行のCSSコードを使用します。 タブレットと携帯電話の表示プロパティを元に戻します。
デスクトップ：
display: flex; align-items: center;
タブレットと電話：
display: block;
列2グラジエントバックグラウンド
一般的な行の設定が完了したら、2番目の列の設定を開き、放射状のグラデーションの背景を適用します。
- 色1：＃f7f2ef
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：中心
- 開始位置：20％
- 終了位置：20％
列2の間隔
列のデザインタブに移動し、さまざまな画面サイズでカスタムパディング値を変更します。
- トップパディング：30％（デスクトップ）、10％（タブレットと電話）
- ボトムパディング：10％
- 左パディング：5％
- 右パディング：5％
WooImagesモジュールを列1に追加
動的コンテンツ
モジュールを追加する時が来ました！ 列1に必要な最初のモジュールは、WooImagesモジュールです。 このチュートリアルは、注目の画像とギャラリー画像を1：1の比率で使用している場合に最適です。 そうすれば、次のステップで画像を円に変えることができます。 Woo Images Moduleを追加したら、動的コンテンツが「ThisProduct」に設定されていることを確認します。
- 製品：この製品
列1にコードモジュールを追加する
CSSコードを追加する
Woo Images Moduleのすぐ下に、コードモジュールを追加します。 このコードモジュールに挿入するCSSコードは、列の左側にwooギャラリー画像を垂直に積み重ねるのに役立ちます。
<style>
.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}
.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}
</style>
Wooタイトルモジュールを列2に追加
動的コンテンツ
次の列に進みます。 そこで、最初に必要なモジュールはWoo TitleModuleです。
- 製品：この製品
タイトルテキスト設定
モジュールの[デザイン]タブに移動し、見出しのテキスト設定を次のように変更します。
- タイトルフォント：PT Sans
- タイトルフォントの太さ：太字
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：84px（デスクトップ）、60px（タブレット）、45px（電話）
Woo説明モジュールを列2に追加
動的コンテンツ
次のモジュールであるWooDescriptionModuleに進みます。
- 製品：この製品
- 説明タイプ：簡単な説明
テキスト設定
それに応じてモジュールのテキスト設定を変更します。
- テキストフォント：Karla
- テキストサイズ：17px（デスクトップとタブレット）、15px（電話）
- テキスト行の高さ：1.9em
間隔
上マージンと下マージンを追加して、モジュール設定を完了します。
- トップマージン：5％
- 下マージン：5％
ウー価格モジュールを列2に追加
動的コンテンツ
Woo DescriptionModuleのすぐ下にWooPriceModuleを追加します。
- 製品：この製品
価格テキスト設定
モジュールの[デザイン]タブに移動し、価格テキストの設定を次のように変更します。
- 価格フォント：PT Sans
- 価格フォントの太さ：太字
- 価格テキストの色：＃ce8654
- 価格テキストサイズ：27px
Woo Add to CartModuleを列2に追加
動的コンテンツ
このチュートリアルを完了するために必要な次の最後のモジュールは、Woo Add toCartモジュールです。
- 製品：この製品
フィールド設定
[デザイン]タブに移動し、次のようにフィールド設定を変更します。
- フィールドの背景色：#ffffff
- フィールドテキストの色：＃000000
- フィールドフォント：Open Sans
- すべてのコーナー：0px
- フィールド下部境界線幅：1px
- フィールド下の境界線の色：＃ce8654
ボタンの設定
次に、ボタン設定でボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃0a0201
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンフォント：PT Sans
- ボタンのフォントの太さ：太字
- ボタントップパディング：20px
- ボタン下部のパディング：20px
- ボタン左パディング：50px
- ボタン右パディング：50px
間隔
そして、Woo Add to Cart Moduleに上部マージンを追加して、モジュール設定とこのチュートリアルを完了します。 製品ページテンプレートの変更が完了したら、製品ページで結果を表示する前に、テーマビルダーの変更をすべて保存してください。
- トップマージン：5％
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、DiviのテーマビルダーとWooCommerceモジュールを使用して作成した製品ページをクリエイティブにする方法を紹介しました。 具体的には、ウーギャラリーの画像を縦に積み重ねる方法を紹介しました。 このアプローチは、フルスクリーンの製品ページデザインに適していますが、作成するあらゆる種類の製品ページテンプレートに役立ちます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。