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

ウェブサイトで特にサブスクリプション商品の販売などでこのようなボックス型の値段表をよく見かけますよね 。

プライステーブルのサンプル画像

Elementor Proの『プライステーブル』ウィジェットなら、このような値段表(プライステーブル)を簡単に作ることができますよ!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

また、動画でプライステーブルウィジェットの使い方もご覧いただけます。

プライステーブルウィジェットの挿入

プライステーブルウィジェットをカラムにドラッグ&ドロップで挿入

『プライステーブル』ウィジェットをドラッグ&ドロップでカラムに挿入します。

プライステーブルウィジェット挿入後の表示画面

こちらは『プライステーブル』ウィジェット挿入後の表示画面です。

コンテンツタブの編集

コンテンツタブ

Header

Headerのエディターとヘッダー部分を記した画像

『Header』(ヘッダー)とは上記画像の『タイトル』と『説明』の部分を指します。

タイトル

タイトル変更後の表示画面

『タイトル』は文字通り販売するもののタイトルをプレイスホルダーに記入します。

※このサンプルでは世界のコーヒーが毎月届くサブスクリプションの販売をすると仮定してタイトルを『コーヒー定期便』とします。

説明

説明を変更した後の表示画面

『説明』は販売するものの説明文を表示することができます。

※このサンプルでは説明を『世界のフレッシュなコーヒーを毎月お届けします。』としました。

なお、『説明』は不要な場合はプレイスホルダーを未記入にすれば非表示になります。

タイトルHTMLタグ

タイトルHTMLタグのリスト

『タイトルHTMLタグ』で『タイトル』のHTMLタグを『H2〜H6』の間で変更することができます。

※デフォルトはH3に設定されています。

Pricing

Pricingのエディターと編集で反映する部分を記した図

『Pricing』(プライシング)では値段の部分を編集することができます。

Currency Symbol

Currency Symbolのリストと編集に反映する箇所を示した図

『Currency Symbol』で通貨のマーク(例えば円なら¥)を変更することができます。

プレイスホルダーをクリックすると上記画像のような通貨のリストが表示されますのでそこから通貨マークを変更します。

※デフォルトでは『$Dollar』(アメリカドル)が選択されています。

リストに必要な通貨がない場合は『カスタム』で必要な通貨のマークを追加します。

※通貨のリストの内容とカスタムのくわしい説明は割愛します。

Price

Priceを変更した後の表示画面

『Price』(プライス)で値段を変更します。

プレイスホルダーに値段を記入します。

※デフォルトでは『39.99』と記入・表示されています。

また、値段に『¥1,980』とコンマを表示させたい場合はここでプレイスホルダーにコンマを入れます。

Currency Format

Currency Formatのリストと説明

『Currency Format』は値段表記のドットとコンマの部分の表記を以下から選択できます。

  • 1,234.56(デフォルト)
  • 1.234,56

しかし、こちらは『Currency Symbol』を『¥/円』に設定している場合は反映されません。

もし¥で表示の値段にコンマなどを表示させたい場合は『Price』の数字に直接入力する必要があります。

Sale

Saleをオンにしたときの表示画面とOriginal Priceの説明

『Sale』を『オン』にすると販売価格がセール値の場合に、値引き前の値段を画面に表示させることができます。

デフォルトでは『オフ』に設定されていますが、『オン』にすると上記のように値段の左側に『¥59』と表示され、エディターには『Original Price』が追加されます。

元値の表記の変更は『Original Price』で行います。

Original Priceを変更した後の表示画面
Original Priceを変更したときの表示画面

Period

Periodno説明と「月額」に変更した後の表示画面

『Period』は商品が定額制の場合の期間の表記を変更できます。

プレイスホルダーに記入した文字が画面にそのまま反映します。

例えば月額制のサブスクリプションの販売なら、『月額』と表示させるなど、商品に伴い変更、または非表示にしてください。

※デフォルトでは『Monthly』(英語で月額)に設定されています。

Features

Featuresのエディターと反映する箇所を示した図

『Features』は英語で『特徴』という意味で、商品の特徴をリストで表示させることができます。

デフォルトではすべての項目が『リストアイテム#◯』と表示されています。

各項目ごとに以下の編集を行います。

テキスト

項目のテキストの編集説明と変更した後の表示画面

『テキスト』は各項目の『リストアイテム#◯』と表示されたテキストを変更することができます。

プレイスホルダーに欲しいテキストを記入します。

アイコン

アイコンの説明と変更後の表示画面

『アイコン』でアイコンライブラリー、またはSVGのアップロードでアイコンの表示を変更することができます。

Icon Color

Icon Colorでアイコンの色を変更した後の表示画面

『Icon Color』でアイコンの色をカラーピッカーより自由に変更することができます。

項目を追加

+項目の追加の説明と、実際に項目を追加した後の表示画面

『+項目を追加』をクリックで新しい項目を追加することができます。

項目は好きなだけ追加することが可能です。

Footer

FooterのエディターとFotterを示した画像

Button Text

Button Text編集後の表示画面

『Button Text』はボタン内のテキストを変更することができます。

プレイスホルダーに入力した文字がそのまま反映されます。

リンク

リンクの説明・リダイレクトさせたいページのURLを記入

『リンク』ではボタンをクリックした後にリダイレクトするページのURLを設定します。

Additional Info

Additional Infoの説明

『Additional Info』はボタンの下に表示されるテキストです。

プレイスホルダーに入力した文字がそのまま反映されます。
※デフォルトで『This is text element』と入力されています。

こちらは特に追加情報がない場合は未入力にしましょう。
するとテキストの表示はなくなります。

Ribbon

Ribbonのエディターと反映する箇所を示した図

『Ribbon』は画像上に表示されているリボンの編集をすることができます。

表示

表示を『いいえ』にしたときの表示画面•リボンが非表示になる

『表示』はリボンを表示させるかどうかの選択になります。

表示を『いいえ』にすると上記画像のようにリボン自体の表示がなくなります。

※デフォルトは『はい』に設定されています。

タイトル

タイトル編集後の表示画面

『タイトル』ではリボンの中に表示されている文字を変更することができます。

※デフォルトでは『人気』と入力されています。

位置

位置の説明・位置を左に設定したときの表示画面

『位置』はリボンの位置ををボックスの右上か左上に配置することができます。

※デフォルトは『右』(右上)に設定されています。

スタイルタブの編集

スタイルタブ

Header

スタイルタブのHeaderのエディター編集で反映する箇所を示した図

背景色

Headerの背景色変更後の表示画面

『背景色』はHeader(ヘッダー)の背景色をカラーピッカーより自由に変更することができます。

パディング

Headerのパディングの説明と変更後の表示画面

『パディング』の値を変更することによりヘッダーのサイズを変更することができます。

タイトルの色・書体

色ではタイトルの色をカラーピッカーより自由に変更できます。

書体ではタイポグラフィの操作により自由にフォントや大きさなどの編集を行えます。

タイポグラフィのくわしい使い方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事の同セクションを参考にしてください。

Sub Titleの色・書体

『Sub Title』とはヘッダーの『説明』に当たります。

色、書体の変更のくわしい説明は割愛させていただきます。

Pricing

『Pricing』(値段)の各スタイルの変更を行うことができます。

背景色

Pricingの背景色変更後の表示画面

『背景色』はPricingの範囲(ヘッダー下からFeautures間)の背景色をカラーピッカーより自由に変更することができます。

上記は背景色を変更した後の表示画面です。
色が変更している部分がPricingの背景色の範囲です。

パディング

『パディング』でPricingの背景の高さを変更することができます。

くわしくは『Headerのセクションのパディング』を参考にしてください。

Pricingの色を変更した後の表示画面と色が変する箇所を示した図

『色』ではPrice(値段)とOriginal Price(元値)のCurrency Symbol(通貨マーク)の色の変更を行うことができます。

書体

Pricingの書体を変更した後の表示画面•書体サイズとカラムの大きさによりデフォルトの位置関係が変更したときのサンプル

『書体』ではPrice(値段)とCurrency Symbol(通貨マーク)の書体をタイポグラフィより編集することができます。

上記はフォントとサイズを変更した後の表示ですが、Priceのサイズ次第ではOriginal Price(元値)やCurrency Symbol(通貨マーク)の位置関係が変化します。

Currency Symbol / サイズ

Currency Symbolのサイズを最大値にした後の表示画面•値段の数字と同じサイズになる

『Currency Symbol』の『サイズ』ではPrice(値段)の左上に配置されたCurrency Symbol(通貨マーク)のみのサイズをカーソルを左右にスライドさせることにより縮小・拡大することができます。

※デフォルトでは『30』の値に設定されています。

上記はサイズの値を『100』(最大値)に設定したときの表示画面です。

なお、サイズを最大値にすると、Currency Symbolの高さはPriceと同じになります。

Currency Symbol / 位置

Currency Symbolの位置を右に変更した後の表示画面

『位置』ではCurrency Symbol(通貨マーク)の位置をPriceの左または右への配置を選択できます。

※デフォルトは『右』に設定されています。

Currency Symbol / Vertical Position

Currency SymbolのVertical  Positionのオプション(上・中央・下)をそれぞれ表示させた画面

『Vertical Position』はCurrency Symbol(通貨マーク)の縦方向の位置を以下から選択することができます。

  • 上(デフォルト)
  • 中央

Fractional Part

Fractional Partのエディターと反映箇所の説明

『Fractional Part』は通貨の形式が$や€のセントのような小数点以下の表示の部分のエディターです。

『サイズ』の説明は『Currency Symbol・サイズ』、
『Vertival Position』の説明は『Currency Symbol・Vertical Position』の説明を参考にしてください。

Original Price

Original Priceのエディターと反映箇所を記した図

『Original Price』は元値を指します。

  • 色:通貨マークを含まない数字部分のみの色をカラーピッカーより自由に変更できます。
  • 書体:通貨マークのみの書体をタイポグラフィで変更できます。
  • Vertical Position:『Currency Symbol・Vertical Position』のセクションの説明を参考にしてください。

Period

Periodの位置のオプション(Below・Beside)をそれぞれ表示した画像

『Period』は月額やMonthlyなどの期間を記した部分を指します。

『位置』は『Below』(値段下部)または『Beside』(値段右横)から選択できます。

色と書体の説明は割愛させていただきます。

Features

スタイルタブのfeaturesのエディターと反映箇所を記した図

背景色 / パディング

Featuresの背景色を変更した後の表示画面

『背景色』はFeaturesの背景部分の色をカラーピッカーより自由に変更ができます。

『パディング』でFeaturesの背景の高さを変更することができます。

くわしくは『Headerのセクションのパディング』を参考にしてください。

色 / 書体

『色』はアイコンを含めたFeaturesの色をカラーピッカーより自由に変更することができます。
※しかし、アイコンカラーはコンテンツタブ•Featuresの『Icon Color』で設定された色が優先されます。

『書体』の説明は割愛します。

配置

Featutresの位置のオプション(右・中央・左)をそれぞれ表示させた画像

『配置』はFeaturesのテキストの位置を以下から選択できます。

  • 左揃え
  • 中央揃え(デフォルト)
  • 右揃え

カラムの幅や文字数に応じてテキストは改行されます。

Featuresの幅を変更したときの表示画面・幅が狭まるとテキストも改行する

『幅』はFeaturesのアイコンを含めたテキストの幅をカーソルを左右にスライドさせることにより変更できます。

文字数が多いときはここで調整することをお勧めします。

上記セクションの『配置』の画像を見ていただければわかると思いますが、カラムの幅に応じた自動改行の場合、文字がアイコンの下に改行されてしまったりします。

また、配置が中央揃えでもアイコンが垂直に整列する利点もあります。

区切り線

区切り線を『いいえ』(非表示)にしたときの表示画面

『区切り線』は各Featuresの項目の間に区切り線を表示するかどうかの選択です。

上記は区切り線で『いいえ』を選択したときの表示画面です。

※デフォリトは『はい』に設定されています。

区切り線を『はい』(表示)のときの区切り線のエディター区切り線の編集後の表示画面
区切り線編集後のサンプル

区切り線を『はい』にした場合は以下のセクションの設定が追加されます。

  • スタイル:直線(デフォルト)/ 二重線 / 点線 / 破線から選択できます。
  • 色:カラーピッカーより自由に変更ができます。
  • 太さ:区切り線の太さを1〜10の値の間で変更ができます。(デフォルトの値:2)
  • 幅:区切り線の長さをカーソルを左右にスライドさせることにより変更することができます。
  • すき間:Featuresの項目同士のスペースの幅をカーソルを左右にスライドさせることにより縮小・拡張することができます。

Footer

スタイルタブ・Footerのエディターと反映箇所を示した図

背景色 / パディング

Footerの背景色を変更した後の表示画面

『背景色』はFotter(フッター)の背景色をカラーピッカーより自由に変更ができます。

『パディング』でFotterの背景の高さを変更することができます。

くわしくは『Headerのセクションのパディング』を参考にしてください。

ボタン

ボタンのエディターとボタンを編集した後の表示画面

『ボタン』のスタイルの変更の仕方につきましては、【Elementorのボタンウィジェットの使い方】に記事のどうセクションでくわしく説明をしていますのでそちらを参考にしてください。

Additional Info・マージン

Additional Infoのマージン編集後の表示画面

『Additional Info』のマージンでAdditional Info(説明)の位置を変更することができます。

デフォルトではボタンの真下に設定れていますが、例えば上記画像のようにボックスの右下に移動させたい時などは各値のリンクを解除し、上下左右のい値を調整します。

Ribbon

『Ribbon』(リボン)の各スタイルを変更することができます。

背景色 / 文字色

Ribbonの背景色と文字色の反映箇所と変更後の表示画面

リボンの『背景色』『文字色』をカラーピッカーよりそれぞれ自由に変更することができます。

なお、文字の書体は『書体』で変更が可能ですが、説明は割愛します。

Distance

Distanceを最小値と最大値にしたときの表示画面

『Distance』はリボンの長さを最小0〜最大50の間で変更することができます。

ボックスシャドウ

Ribbonのボックスシャドウをつけたときの表示画面とエディター

『ボックスシャドウ』ではリボンの背景に影をつけることができます。

ペンマークをクリックすると上記のようなボックスシャドウのエディターが表示され、影の色や方向、ぼかしなど編集することができます。


プライステーブルウィジェットは商品販売に特化したボックス型のウィジェットです。

値引き前の価格の表示やリボンで売れ筋商品をアピールでき、商品の特徴も見やすく一覧にできるのも嬉しいポイントです。

ぜひ、商品販売をする際にサイトで活用してみてはいかがでしょうか?

Elementor Proではプライステーブルウィジェットの他にも、値段表示に特化した【Elementor Pro『プライスリスト』ウィジェットの使い方】もありますのでぜひ参考にしてくださいね!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通