Elementor Proのプライスリストウィジェットの使い方

Elementor Proのプライスリストウィジェットは、価格表を作成するためのウィジェットです。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツの一覧設定

Elementor プライスリスト コンテンツ 一覧

リストを開くと、アイテムが表示されます。デフォルトで3つ作成されていますが、必要ないものは「×」をクリックして削除することができます。同じアイテムをコピーしたい場合は、書類のアイコンをクリックします。新しくアイテムを追加する場合は、「+ 項目を追加」ボタンをクリックします。それぞれのアイテムをクリックすると、以下の項目が表示されるので、設定していきましょう。

Price

アイテムに価格を入力します。

タイトル

アイテムのタイトルを記入します。

説明

説明文を記入します。

画像

ライブラリーから画像を選んで追加することができます。

リンク

各アイテムにURLを追加することができます。右にあるリンク設定ボタン(歯車マーク)をクリックすると次の項目が表示されます。

新しいウィンドウで開く

ここにチェックを入れると、リンクをクリックした際に、新しいウィンドウが開かれ、そこでリンク先のページを表示してくれます。

Nofollowを追加

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

スタイルの一覧の設定

Elementor プライスリスト スタイル 一覧

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

Title & PriceのColor

アイテムのタイトルと価格の色を設定します。

Title & Priceの書体

アイテムのタイトルと価格の書体を設定します。

説明の色

説明文の色を設定します。

説明の書体

説明文の書体を設定します。

区切りのStyle

アイテムのタイトルと価格の間の区切り線のタイプを「Solid」、「Dotted」、「Dashed」、「Double」、「None」の5つから選べます。

区切りの太さ

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

区切りのColor

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

区切りのSpacing

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

スタイルの画像設定

Elementor プライスリスト スタイル 画像

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

画像サイズ

画像の大きさをドロップダウンメニューから選択します。「カスタム」を選ぶと「幅」×「高さ」の項目が表示されますので、そこに数値を入力して、「適用」ボタンをクリックして設定が完了です。

ボーダー丸み

画像の角の丸みの調整ができます。

スペース

画像とテキスト間のスペースを設定します。

スタイルのItem設定

Elementor プライスリスト スタイル Item

Rows Gap

アイテム間のスペースを設定します。

Vertical Align

画像を追加している場合、テキストを画像の「Top」に合わせるか、「Center」に合わせるか、それとも「Bottom」に合わせるか設定することができます。

コメントを残す

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