を使用している場合 ウッドマートのテーマハイエンドなeコマースサイトを構築し、商品のスタイルミックスやコレクションの組み合わせを紹介したい場合、ルックブックページは理想的な方法です。ブランドのトーンを高めるだけでなく、訪問者が実際の場面で商品がどのように見えるかをより直感的に確認することができます。
WoodMartで美しく機能的なウェブサイトを作成する方法をご紹介します。 ルックブック またはカタログの表示ページ。
![画像[1]-WoodMart チュートリアル:ショーケースページを使ったルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611094307490-image.png)
ステップ1:ページの内容と画像を準備する
手を汚す前に、準備しておくことをお勧めする:
- 高画質の製品シーン画像またはモデル画像
- 各画像の製品リンク
- 短い文章による紹介(オプション)
ルックブックの中心はビジュアル・プレゼンテーションであり、画像のクオリティがページ全体の高級感を決定する。
ステップ 2: 新しいページを作成し、ElementorまたはWPBakeryを有効にする。
WoodMartは2種類のページビルダーをサポートしています:エレメンタ 歌で応える WPベーカリー.Elementorを使用している場合は、次のことができます:
- WordPressバックエンド → ページ → 新しいページを追加する
![画像[2]-WoodMartチュートリアル:表示ページを持つルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611095241663-image.png)
- ルックブック」または「マッチング・カタログ」と名付ける。
- Elementorで編集 "または "WPBakeryで編集 "をクリックして、視覚化インターフェースに入ります。
![画像[3]-WoodMartチュートリアル:ショーケースページを使ったルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611093901884-image.png)
ステップ 3: WoodMart 独自の要素を含む Lookbook モジュールの追加
ウッドマート ルックブックの作成に適したウィジェットがいくつか内蔵されている:
- ルックブック画像ホットスポットモジュール
このモジュールは、画像上で複数のクリックを追加することができ、各ホットスポットは、対応する製品にリンクすることができ、一般的に "モデルウェア"、 "ホームシーン "などの表示で使用されます。
![画像[4]-WoodMartチュートリアル:表示ページを持つルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611181037592-image.png)
- ルックブックホットスポット要素をドラッグします。
- 各ホットスポットには、商品名、短いテキスト説明、ジャンプリンクを設定することができます。
![画像[5]-WoodMartチュートリアル:表示ページを持つルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611095812903-image.png)
- スタイルまたはモデル写真をアップロードする
- ホットスポットの追加をクリックし、位置を調整する。
![画像[6]-WoodMartチュートリアル:ショーケースページを使ったルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611182352864-image.png)
- 商品グリッド+シナリオモジュール
ページの中央にバナー画像を挿入し、その下に商品リストを配置することで、視覚的な違和感を演出することができる。
![画像[7]-WoodMartチュートリアル:表示ページを持つルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611100452541-image.png)
- 画像+ボタンの組み合わせモジュール
紳士服エリア」「アクセサリーエリア」など、仕切られたカタログに適しています。
![画像[8]-WoodMartチュートリアル:ショーケースページを使ったルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611102644323-image.png)
ステップ4:レスポンシブ表示の設定
ルックブックのページは画像が多く、ホットスポットが集中する傾向があります。モバイル適応は非常に重要です。エディターの上部にある "タブレット "と "モバイル "ビューに切り替えて、各モジュールが正しく表示されているか1つ1つ確認することをお勧めします。特にホットスポットの位置は、小さな画面では微調整が必要な場合があります。
![画像[9]-WoodMartチュートリアル:表示ページを持つルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611103032442-image.png)
ステップ5:ナビゲーションボタンまたはパンくずを追加する
ページホッピング体験を向上させるために、ページ上部に「モールに戻る」または「全商品を見る」ボタンを追加して、ユーザーがルックブックを閲覧した後に迷子になるのを防ぐことができます。
![画像[10]-WoodMartチュートリアル:表示ページを持つルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611103334786-image.png)
ウッドマートのパンくずナビゲーション(ブレッドクラム)に配置することをお勧めします。メインナビゲーションメニューマイルとなり、訪問者が見つけやすくなった。
ステップ6:ジャンプリンクの公開とテスト
ページ内容が完成したら、「公開」をクリックし、フロントエンドで効果をプレビューしてください。
![画像[11]-WoodMartチュートリアル:表示ページを持つルックブックの作成](https://www.361sale.com/wp-content/uploads/2025/06/20250611105009993-image.png)
以下の点を重点的にチェックする:
- 各ホットスポットが正しくジャンプしているか
- 画像がスムーズに読み込まれるか
- モバイルでページが鮮明に表示されるかどうか
ヒント:ルックブックのコンバージョンを高めるには?
- 各画像の下に「Buy Now」を追加する。ボタンまたはリンク
- 時間制限の追加プロモーション・ラベル(例:「新製品」「話題の商品」「期間限定割引」など)
- ソーシャルメディアのリードジェネレーションと一緒にルックブックページを使い、ユーザーのクリックを誘う。
概要
WoodMartでLookbookページを作成するのは複雑ではありません。重要なのはビジュアルデザインと商品リンクです。質の高い素材を用意し、注目の機能や商品リンクを上手に活用することで、あなたのブランドをよりプロフェッショナルな雰囲気にし、また、ブランド力を高めることができます。換算率.
水平スワイプやビデオ背景など、より複雑なLookbookエフェクトを作成したい場合、ポップアップウィンドウまた、WoodMartのテーマは、購入などを強力にサポートします。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/58824この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。






















![絵文字[wozuimei]-Photonflux.com|プロのWordPress修理サービス、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 専門WordPress修復サービス、全世界対応、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし