Amazon商品ボックスは、Amazonプラットフォームで販売されている商品を視覚的に魅力的に紹介するためにデザインされています。商品ボックスには、画像、特徴、説明、価格、直接リンクが含まれており、商品を購入することができます。
このボックスの主な目的は、顧客に商品の特徴や利点を一目で伝え、即座に購入するよう促すことです。Tablebergプラグインを使えば、WordPressエディタ上で魅力的なAmazon商品ボックスを作成することができます。
このチュートリアルでは、WordPressにAmazonの商品ボックスを追加する方法について説明します。
ステップ01: エディターにTablebergブロックを追加する
プラグインにはTablebergというカスタムブロックが付属しています。をクリックしてください。 プラス（＋）アイコン.を追加する。 テーブルバーグ・ブロック to the editor.
内容に応じて必要な列と行の数を設定します。このチュートリアルでは、2*1とします。
テーブルの基本バージョンは準備できた。次に、列と行にコンテンツを追加する。
ステップ02：Amazon商品の画像を追加する
Tablebergでは、Gutenbergエディタのようにテーブルセルに複数のカスタムブロックを追加することができます。ブロックを追加する イメージブロック を、アマゾンの商品画像を表示するためのセルに追加する。
アマゾンの商品画像を追加しました。丸いアイコンを同時に押しながらドラッグすると、サイズを大きくすることができます。
ステップ03：商品の詳細を追加する
右の列には、商品名、特徴、価格、簡単な説明を追加します。これらはすべて 段落ブロック.
商品名を書く
デフォルトでは 段落ブロック が自動的に選択されます。商品名を記入するだけです。
商品名のサイズを大きくする from the タイポグラフィセクション を右サイドバーに追加した。このテキストは他のテキストよりも大きく見えるはずだからです。
商品の価格を追加する
新規追加 段落ブロック をクリックして、商品の価格を記入してください。
価格設定に異なるキャッチーな色を設定し、人々の目を引くようにする。
人々を興奮させるために割引価格を表示するのは常に素晴らしいことです。ストライクタフで値上げ価格を追加することで、これを行うことができます。
そこで、価格を上げて書く。ハイライトと取り消し線オプションを使って、別の色を設定し、取り消し線を引くことができます。
商品についての説明を書く
別のParagraphブロックを使って、アマゾンの商品の説明を書く。
ステップ04：CTAボタンを追加する
Find and add the ボタンブロック の下にある。
ボタンのコピーを書く。次に 設定タブ.
より 幅の設定を選択する。 ボタンの幅を広げる 好きなように。
次に スタイルタブ.適切なオプションを使用する、 カラライズ そして ボタンコピーのサイズを変更する.
ステップ 05: ブロックとブロックの間にスペースを入れる
列全体を選択 をクリックする。をクリックする。 スタイルタブ.に来てください。 ブロック間隔セクション タブを下にスクロールする。列のブロックの間にスペースを追加する値を配置します。
ステップ06：アマゾンの商品ボックスにリボンをつける
リボンを使えば、ユーザーの購買意欲を即座に刺激する簡単なプロモーション・メッセージを表示することができます。リボンを追加する Ribbon block を表示したいカラムに移動する。
追加 リボンコピー、リボンスタイル、位置、 そして カラー 設定とスタイル」タブのオプションを使用します。
ステップ07：Amazon商品ボックスの枠線をカスタマイズする
ボックスの境界線をカスタマイズすることで、その美観を美しくすることができます。ボックスの テーブル・ボーダー・セクション をスクロールして スタイルタブ.
インナーボーダーをオフにする.その後だ、 色を変える そして 外枠の幅.
これでAmazon Productボックスの準備は完了です。お好きなように変更してください。
ボーナスポイント既成の製品ボックス・テンプレートを使う
Tablebergプラグインは、包括的な テンプレートライブラリ を使えば、たくさんのウェブセクションを即座に準備することができます。また、Amazonの商品テーブルを作成するために使用することができます多くの組み込み済みのフィーチャーボックスも含まれています。
以下のビデオクリップでは、フィーチャーボックスを見つけ、エディターに追加する方法を紹介しました。次に、その内容を変更するだけで、Amazon商品ボックスを準備することができます。
結論
チュートリアルを簡単に説明しました。Amazonプロダクトボックスは、さらに多くの情報を追加することで、広大なものにすることができます。複数の画像やCTAボタンを追加することもできます。この記事では、あなたがより面白いデザインを作成するために使用することができますインスピレーションガイドに提示しようとしたところです。
例えば、その場を離れる前に、もう少し時間を割いて、次の記事を読んでみてほしい。 WordPressでプロセスのステップを表示する方法 をプラグインに追加した。
