(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月10日 | Elementor Proの使い方 | コメント0件

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」に合わせるか設定することができます。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

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

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?