Elementor Proのプライスリストウィジェットの使い方
Elementor Proのプライスリストウィジェットは、価格表を作成するためのウィジェットです。
コンテンツの一覧設定
リストを開くと、アイテムが表示されます。デフォルトで3つ作成されていますが、必要ないものは「×」をクリックして削除することができます。同じアイテムをコピーしたい場合は、書類のアイコンをクリックします。新しくアイテムを追加する場合は、「+ 項目を追加」ボタンをクリックします。それぞれのアイテムをクリックすると、以下の項目が表示されるので、設定していきましょう。
Price
アイテムに価格を入力します。
タイトル
アイテムのタイトルを記入します。
説明
説明文を記入します。
画像
ライブラリーから画像を選んで追加することができます。
リンク
各アイテムにURLを追加することができます。右にあるリンク設定ボタン(歯車マーク)をクリックすると次の項目が表示されます。
新しいウィンドウで開く
ここにチェックを入れると、リンクをクリックした際に、新しいウィンドウが開かれ、そこでリンク先のページを表示してくれます。
Nofollowを追加
クローラーにリンクを追跡してもらいたくない場合は、ここにチェックを入れます。
スタイルの一覧の設定
ここからは、「スタイル」の「一覧」の設定を確認していきます。
Title & PriceのColor
アイテムのタイトルと価格の色を設定します。
Title & Priceの書体
アイテムのタイトルと価格の書体を設定します。
説明の色
説明文の色を設定します。
説明の書体
説明文の書体を設定します。
区切りのStyle
アイテムのタイトルと価格の間の区切り線のタイプを「Solid」、「Dotted」、「Dashed」、「Double」、「None」の5つから選べます。
区切りの太さ
区切り線の太さを設定します。
区切りのColor
区切り線の色を設定します。
区切りのSpacing
区切り線の長さを設定します。
スタイルの画像設定
ここからは、「スタイル」にある「画像」の設定を確認していきます。
画像サイズ
画像の大きさをドロップダウンメニューから選択します。「カスタム」を選ぶと「幅」×「高さ」の項目が表示されますので、そこに数値を入力して、「適用」ボタンをクリックして設定が完了です。
ボーダー丸み
画像の角の丸みの調整ができます。
スペース
画像とテキスト間のスペースを設定します。
スタイルのItem設定
Rows Gap
アイテム間のスペースを設定します。
Vertical Align
画像を追加している場合、テキストを画像の「Top」に合わせるか、「Center」に合わせるか、それとも「Bottom」に合わせるか設定することができます。