Elementor Proのプライステーブルウィジェットの使い方

コンテンツのHeader設定

まずは、「コンテンツ」の「Header」設定を確認していきましょう。

タイトル

価格テーブルのタイトルを入力します。

説明

価格テーブルのタイトルの真下に表示される説明文を入力します。

コンテンツのPricing設定

ここからは、「コンテンツ」の「Pricing」設定を確認していきます。

Currency Symbol

通過の記号を選択します。この記事を読んでくださっているほとんどの方は、「¥ Yen/Yuan」を選べばOKだと思います。

Price

ここに料金を記入します。

Currency Format

4桁の料金とかになると、数字を区切ります(1,000みたいに)が、区切る記号をカンマにするかピリオドにするかを決めることができます。

Sale

「ON」にすると「Price」で入力した金額がセール価格になります。

Original Price

「Sale」で「ON」にすると、これが表示されます。元々の価格を記入します。

Period

これは、料金をどれくらいの周期で再び課金するかという表示です。「Monthly-月額」、「Yearly-年額」、「一括」みたいに記載しておけば良いと思います。料金の下に表示さEnter text for the period of time for each payment that appears under the price

コンテンツのFeatures設定

ここでは、サービスの特徴やコンテンツ内容、特典などを設定していきます。「+ 項目を追加」をクリックするとリストを追加することができます。リストを削除する場合は「×」をクリックし、複製したい場合は書類アイコンをクリックします。

クリックすると次の項目が表示されます。

テキスト

特徴・内容・特典のテキストを追加します。

アイコン

「Icon Library」と「Upload SVG」の2種類ありますが、Elementorで用意されているアイコンを使用してい場合は、「Icon Library」をクリックして、アイコンを選択します。自分でSVG形式のファイルを持っていて、その画像を使用したいのであれば、「Upload SVG」をクリックして画像をアップロードします。

Icon Color

アイコンの色を設定します。

コンテンツのFooter設定

ここからは、「コンテンツ」の「Footer」設定を確認していきます。

Button Text

ボタンのテキストを入力します。

リンク

ボタンに埋め込むリンクを追加します。「リンク設定」という歯車のアイコンをクリックすると、「新しいウィンドウで開く」と「Nofollowを追加」が表示されます。

新しいウィンドウで開く

チェックを入れるとボタンをクリックすると新しいウィンドウを開いて、ページが表示されます。

Nofollowを追加

クローラーにリンクを追跡して欲しくない場合は、ここにチェックを入れます。

Additional Info

購入(ボタン)の下に表示する文章を入力できます。

コンテンツのRibbon設定

ここからは、「コンテンツ」の「Ribbon」設定を確認していきます。

表示

「はい」にするとタイトル・サブタイトルの項目の角にリボンが表示されます。

タイトル

リボンの文言を設定します。「1番人気」とか「オススメ」と表示するパターンが多いです。

位置

リボンの位置を「Left-左」か「Right-右」に設定できます。

スタイルのHeader設定

ここからは、「スタイル」の「Header」設定を確認していきます。

背景色

タイトルとサブタイトルセクションの背景色を設定できます。

パディング

タイトルとサブタイトルセクションの縦幅を設定できます。

タイトルの色

タイトルの色を設定します。

タイトルの書体

• フォント
• サイズ
• 太さ
• 変換
• スタイル
• 装飾
• 行の高さ
• 字間

上記の8つの設定項目がありますので、自由にタイトルの書体を設定しましょう。

Sub Titleの色

タイトル同様にサブタイトルの色を設定します。

Sub Titleの書体

タイトル同様に、サブタイトルの書体を設定します。

スタイルのPricing設定

ここからは、「スタイル」の「Pricing」設定を確認していきます。

背景色

価格セクションの背景色を設定します。

パディング

価格セクションの縦幅を設定します。

色

価格の色を設定します。(セール価格を設定している場合は、セール価格の色になります。)

書体

価格の書体を設定します。(セール価格を設定している場合は、セール価格の書体になります。)

Currency Symbolのサイズ

通貨の記号の大きさを設定します。

Currency Symbolの位置

通貨の記号を「Left-左」に置くか「Right-右」に置くか設定できます。

Currency SymbolのVertical Position

通貨の記号の位置を設定します。「Top-上部」、「Middle-中央部」、「Bottom-下部」の3種類あります。

Fractional Partのサイズ

小数点以下の価格を設定している場合は、ここで小数点以下の数字のサイズや位置を設定できます。「サイズ」では、小数点以下の数字の大きさを設定できます。

Fractional PartのVertical Position

小数点以下の数字の位置を「Top-上部」、「Middle-中央部」、「Bottom-下部」の3種類から選びます。

Original Priceの色

セール価格を設定している場合は、ここで元の価格の書体を設定できます。「色」では、元の価格の色を設定します。

Original Priceの書体

元の価格の書体を設定します。

Original PriceのVertical Position

元の価格の位置を「Top-上部」、「Middle-中央部」、「Bottom-下部」の3種類から選びます。

Periodの色

料金の請求期間を表すテキストの色を設定します。

Periodの書体

料金の請求期間を表すテキストの書体を設定します。

PeriodのPosition

• Beside：料金の横
• Below：料金の真下

料金の請求期間を表すテキストの位置を「Beside-料金の横」か「Below-料金の真下」のどちらかに設定します。

スタイルのFeaturesの設定

ここからは、「コンテンツ」の「Features」設定を確認していきます。

背景色

商品の特徴を表記するセクションの背景色を設定します。

パディング

商品の特徴を表記するセクションの外枠とコンテンツのスペースを設定します。

色

特徴を表すテキストの色を設定します。

書体

特徴を表すテキストの書体を設定します。

配置

特徴を表すテキストの位置を「Left-左」、「Center-中央」、「Right-右」設定します。

幅

特徴リストの幅を設定します。

区切り線

「はい」にするとリスト間に区切り線を挿入することができます。

スタイル

• 直線
• 二重線
• 点線
• 破線

ここから下の項目は、「区切り線」で「はい」に切り替えた場合に表示されます。区切り線のスタイルを「点線」、「二重線」、「点線」、「破線」の4タイプから選択できます。

色

区切り線の色を選択します。

太さ

区切り線の太さを設定します。

幅

区切り線の幅を設定します。

すき間

特徴リストを区切り線のスペースを設定します。

スタイルのFooter設定

ここからは、「コンテンツ」の「Footer」設定を確認していきます。

背景色

ボタンセクションの背景色を設定します。

パディング

ボタンセクションの縦幅を設定します。

ボタンのサイズ

• 微小
• 小
• 中
• 大
• 特大

ボタンの大きさを「微小」、「小」、「中」、「大」、「特大」の5つの中から1つを選択します。

ボタンの文字色

ここからは、「普通」と「ホバー」に別れていますが、「普通」は通常時のボタン、「ホバー」はマウスカーソルを置いた時のボタンの設定になります。「文字色」では、ボタンのテキストカラーを設定します。

ボタンの書体

ボタンテキストの書体を設定します。

ボタンの背景色

ボタン本体の色を設定します。

ボーダータイプ

• なし
• 直線
• 2本線
• 点線
• 破線
• 溝

ボタンのボーダーのタイプを「なし」、「直線」、「2本線」、「点線」、「破線」、「溝」の6種類から1つを選びます。

幅

ボーダーの幅を設定します。

色

ボーダーの色を設定します。

アニメーション

これは「ホバー」の方に表示される項目ですが、ボタンにマウスカーソルを置いた時のアニメーションを選択します。

ボーダー丸み

ボタンのボーラーの丸みを設定します。

テキストパディング

ボタンの外枠とテキストとのスペースを設定します。

Additional Infoの色

ボタンの下に表示するテキストの色を設定します。

Additional Infoの書体

ボタンの下に表示するテキストの書体を設定します。

Additional Infoのマージン

ボタンの下に表示するテキストの位置を設定します。

スタイルのRibbon設定

ここからは、「スタイル」の「Ribbon」設定を確認していきます。

背景色

リボン本体の色を設定します。

Distance

価格テーブルの右上の角もしくは左上の角からのどれくらいの位置にリボンを置くか設定します。

文字色

リボンテキストの色を設定します。

書体

リボンテキストの書体を設定します。

ボックスシャドウ

リボンの影の設定をします。