Elementorを使って商品比較表を素早く作る完全チュートリアル

製品比較表は、複数の製品の主な特徴、画像、仕様、価格などの情報を並べて表示し、訪問者が迅速な意思決定を行えるようにする非常に便利な方法です。もしエレメンタウェブサイトを構築すると、それ自身で直接商品比較表を作成する機能を持っていないことがわかるかもしれません。しかし、ご心配なく。ハッピーアドオンこのプラグインはまさにそれを実現している。

HappyAddonsとは何ですか？

HappyAddonsはElementorユーザーのためのプラグイン拡張機能で、Elementorの機能を拡張する130以上の便利なウィジェットが含まれています。比較表ウィジェットを使えば、多機能な商品比較表を簡単に作成できます。

なぜeコマースサイトには商品比較表が必要なのか？

商品比較表は、複数の商品に関する情報を明確な構造で提示することができるため、顧客は短時間で比較を完了し、購入の選択を簡単に行うことができます。また、明確で直感的な情報の提示は信頼を高め、商品に対するマーチャントの自信を表現します。

このタイプの表は、eコマース・プラットフォームでは一般的なもので、自社製品のさまざまなモデルを表示するために使用されるだけでなく、競合他社と自社製品を比較し、長所と短所を表示するためにもよく使用される。消費者は一目で商品の違いがわかり、迷いが減り、すぐに注文することができる。

HappyAddonsで商品比較表を作成する手順

ステップ1：必要なプラグインをインストールする

事前に以下の2つのプラグインをインストールし、有効にしてください：

Elementor（無料版）
HappyAddons（無料版）

次に、編集したいページまたは記事を開き、Elementorエディタに移動して以下の設定を行います：

ステップ 2: 比較表ウィジェットの追加

左パネルの検索バーに「比較表」と入力し、ウィジェットをページにドラッグする。

デフォルトのフォームがページにロードされ、4つのメインコンテンツ設定エリアが表示されます：

テーブルヘッドの設定（テーブルヘッド）
テーブル行の設定（テーブル行）
ボタン設定（テーブルボタン）
テーブルセッティング

ヘッダー内容の設定

項目を追加」をクリックして、新しいヘッダー項目を作成します。各アイテムは、整列（左、中央、右）、アイコンの位置（左または右）、タイトルラベル、アイコンの色、列幅などを設定できます。

スイッチを入れることもできるスティッキーヘッダー関数をオンにすると、スクロール中にテーブルのヘッダーがページの上部に固定されます。

テーブル行の追加と管理

初期状態では、テーブルには2行のコンテンツがあり、それぞれが複数のカラムを含んでいる。

項目を追加」をクリックして新しい行を追加し、列（見出し、アイコン、画像）を行に挿入する。

例えば、ヘッダーカラムを追加する：

項目を追加]をクリック → [列として設定]をクリック → [コンテンツの種類]を "見出し "として選択します。

輸入キャプションアイコンなどの挿入も可能。

ヒント：列の内容は、デフォルトでは右から左に並んでいます。

ボタンエリアの設定

テーブルボタン」の設定に進み、ボタンのタイトルとリンクアドレスを入力する。

ボタンのスタイルを美しくする必要がある場合は、カスタムスタイルを有効にして、テキストの色、背景色、シャドウをさらに調整することができます、ホバー効果など

フォームの幅と応答性の設定

"テーブル設定 "は、異なるデバイスに応じてテーブル幅を設定することができます。タブレットや携帯電話で表示する場合、テーブルの内容を横方向にスライドさせ、異なる画面幅に合わせることができます。

カスタム・スタイル・エリア

スタイル」では、テーブルのヘッダー、テーブルの行、ボタンエリアのフォント、色、マージン、その他のスタイルを調整し、よりブランドのスタイルに沿った表示スタイルを作成することができます。

HappyAddons Proの高度な比較表機能の紹介

より複雑で情報量の多い比較表を作成したい場合は、HappyAddons Proにアップグレードしてみてください。

高度なウィジェット機能のハイライト：

最大10カラムまで対応
アイコンの位置は自由に設定可能
展開/折りたたみトグル・アイコンをサポート
レスポンシブ・バッジ・ナビゲーションのサポート
複数のコンテンツタイプをサポート（テキスト、アイコン、画像、ボタン、価格など）
テーブルのヘッダーを固定表示に設定可能
テンプレートのインポートと動的タグ統合機能

使用方法

インストール：Elementor無料版＋HappyAddons無料版＋HappyAddons Pro
コンポーネントの追加：高度な比較表へのドラッグ・アンド・ドロップ
初期設定：デフォルトでは3列のビューがロードされます。列数はGeneralオプションで拡張できます（最大10列）。
コンテンツの充填：列ごとに展開し、テキストやアイコンのようなさまざまなタイプのコンテンツを挿入します、ボタン他

カスタム設定オプション：

各カラムの幅を調整可能
柔軟なアイコン配置
列のプロジェクトは折りたたみと展開をサポート
セルごとにツールチップの説明を追加できるようになりました。
あらかじめ定義されたテンプレートをインポートするか、ショートコードを使用して動的データを埋め込む

デザイン美化機能：

カスタムカラー、コンテキストフォント、ボーダーなど
偶数行と奇数行のスタイルをサポート
アイテムごとにスタイルを設定可能（テキスト、バッジ、ボタンなど）
全体的な一貫性のためのグローバルカラーとフォント設定

レスポンシブ設定：

ナビゲーション・バッジの切り替えをモバイルでサポート
モバイルデバイスでボタンのスタイルを分ける

高度な機能ハイライトの概要

ダイナミックデータアクセス：ショートコードとダイナミックタグのサポート

スティッキーヘッダーアニメーション効果：コンテンツがスライドしているとき、ヘッダーは常に表示されます。

定義済みテンプレートのインポート：複雑なテーブル構造を素早く構築
多彩なスタイル・コントロール：さまざまなブランド・ニーズに対応

比較表ウィジェットの長所と短所

アドバンテージ：

簡単に始められ、高度なカスタマイズが可能
で直接購入できる。エレメンタエディタで操作する
テーブルヘッダーの修正、説明のヒント、折りたたまれた行、バッジ、その他多くの機能強化
動的コンテンツ、柔軟なデザインを備えた呼び出し可能なテンプレート

不十分だ：

列の最大数は10
直接キャプチャなし WooCommerce 製品データ
フォーム構造は手動で設定する必要があり、自動生成ロジックはない。

サンプル・アプリケーション・シナリオ

製品比較表例えば、アップルウォッチの異なるライン間の機能の違いを示している。

サービス・パッケージの比較価格帯別サービス内容のデモンストレーション

機能分化表製品またはサービスの機能モジュールのデモンストレーション

これらのシナリオは、高度な比較表ウィジェットで設計できます。

概要

Eコマースサイトやショーケース・サービスサイトを構築していて、明確な構造で視覚的にわかりやすい比較表を作成する必要がある場合。エレメンタHappyAddonsのこのウィジェットは、効率的で美しいソリューションを提供します。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み