• 特徴
      メガメニュー

      豊富なメニューオプションによる容易なナビゲーション

      バリエーション・スウォッチ

      視覚的な商品選択が売上を加速させる

      ダイナミック・コンテンツ

      パーソナライズされたコンテンツがリアルタイムで適応

      スムーズスクローラー

      UXフローを改善するシームレススクロール

      ライブ・コピー・ペースト

      瞬時にコンテンツを複製し、時間を節約

      必須ショートコード

      パワフルなデザイン要素に素早くアクセス

      Template Library In Editor

      既製のテンプレートがデザインをスピードアップ

      ACFの統合

      柔軟なデータのための高度なカスタムフィールド

      デュプリケーター

      手間をかけずに簡単にサイトをクローン

      SVGサポート

      あらゆるスクリーンに対応する、鮮明でスケーラブルなグラフィック

      ホワイトレーベル・ブランディング

      ツールをリブランドしてプロフェッショナルな外観に

      視認性コントロール

      正確なコンテンツの表示・非表示

      パララックス/スクロール・エフェクト

      滑らかな動きで奥行きを魅せる

      表記

      明確なメモや注釈を簡単に追加

      ウィジェットツールチップ

      役立つヒントがユーザーとのインタラクションを向上

      トランスフォーム効果

      スタイリッシュなアニメーション

      セクション・スティッキー

      重要なセクションは常に見えるようにしておく

      カスタムCSS&JS

      カスタム・コードの微調整によるフル・コントロール

      アセット・マネージャー

      ファイルを最適化してサイトのスピードを上げる

  • テンプレート
  • 価格
  • Japanese
  • 特徴
      メガメニュー

      豊富なメニューオプションによる容易なナビゲーション

      バリエーション・スウォッチ

      視覚的な商品選択が売上を加速させる

      ダイナミック・コンテンツ

      パーソナライズされたコンテンツがリアルタイムで適応

      スムーズスクローラー

      UXフローを改善するシームレススクロール

      ライブ・コピー・ペースト

      瞬時にコンテンツを複製し、時間を節約

      必須ショートコード

      パワフルなデザイン要素に素早くアクセス

      Template Library In Editor

      既製のテンプレートがデザインをスピードアップ

      ACFの統合

      柔軟なデータのための高度なカスタムフィールド

      デュプリケーター

      手間をかけずに簡単にサイトをクローン

      SVGサポート

      あらゆるスクリーンに対応する、鮮明でスケーラブルなグラフィック

      ホワイトレーベル・ブランディング

      ツールをリブランドしてプロフェッショナルな外観に

      視認性コントロール

      正確なコンテンツの表示・非表示

      パララックス/スクロール・エフェクト

      滑らかな動きで奥行きを魅せる

      表記

      明確なメモや注釈を簡単に追加

      ウィジェットツールチップ

      役立つヒントがユーザーとのインタラクションを向上

      トランスフォーム効果

      スタイリッシュなアニメーション

      セクション・スティッキー

      重要なセクションは常に見えるようにしておく

      カスタムCSS&JS

      カスタム・コードの微調整によるフル・コントロール

      アセット・マネージャー

      ファイルを最適化してサイトのスピードを上げる

  • テンプレート
  • 価格
  • Japanese

common (28)

バリエーション・スウォッチ
プロ 新しい ポピュラー
EDDプロファイル・エディター
プロ 新しい
スタッカー
プロ 新しい ポピュラー
読書タイマー
無料 新しい
カスタムJS
無料 新しい
EDD購入履歴
プロ 新しい
簡単デジタルダウンロード
プロ 新しい
ウェブフックフォーム
プロ 新しい
SVGブロブ
プロ 新しい ポピュラー
フローティング・ナレッジベース
プロ 新しい ポピュラー
暗号通貨チャート・カルーセル
プロ 新しい ポピュラー
暗号通貨チャート
プロ 新しい ポピュラー
暗号通貨ティッカー
プロ 新しい ポピュラー
暗号通貨カルーセル
プロ 新しい ポピュラー
暗号通貨リスト
プロ 新しい ポピュラー
暗号通貨グリッド
プロ 新しい ポピュラー
アドブロック検出器
プロ 新しい ポピュラー
リアルな影
プロ 新しい ポピュラー
コンテンツプロテクター
プロ 新しい ポピュラー
コンテンツ・スイッチャー
プロ 新しい ポピュラー
SVGマップ
プロ 新しい ポピュラー
マーキー
プロ 新しい ポピュラー
フェイスブック フィード カルーセル
プロ ポピュラー
フェイスブック・フィード
無料 ポピュラー
背景 拡大
プロ ポピュラー
製品カルーセル
無料 ポピュラー
製品グリッド
無料 ポピュラー
ポスト / ブログカルーセル
プロ
作戦検索したウィジェットが見つかりません!心当たりはありますか?もしあれば 投稿する こちら

プライスボックス は、商品を販売するウェブサイトを運営している場合、非常に便利なツールです。通常、ほとんどのeコマースサイトでは、パッケージ、製品、コース、日用品などを販売するために使用します。人々はしばしば次のように呼びます。 価格表 技術産業において。さらに、よく構成された価格表は、ユーザーにとって価格比較を容易にし、何を購入するかを簡単に決めることができる。

実際、適切な価格ボックスデザインでオファーや価格を顧客に提示できれば、顧客は喜んで支払う可能性が高いです。Elementorを使えば、実際、きちんとした魅力的な価格表を作成することができます。ウィジェット 価格表, Element Pack が開発した。このウィジェットには、効果的なプライスボックスを簡単に作成できる素晴らしい機能があります。 

このブログでは、次のような方法でプライスボックスを作成する方法を順を追って説明します。 Elementor そして Element Pack アドオン 価格表 ウィジェット。

Elementorで美しいプライスボックスを作る

Inserting Price Table widget

まず最初に。初心者の方にはあまり知られていないかもしれませんが、役に立つかもしれません。ドラッグ&ドロップで 価格表 ウィジェットElement Pack ロゴを添付)をあなたのウェブページに挿入する。

もし、あなたが Element Pack プラグインがインストールされていれば問題ありません。その場合、代わりにElementorsの価格表ウィジェットを使用することができます。なお、どちらもプロ版で利用可能です。

レイアウトのカスタマイズ

1つ言っておかなければならないことがある。Element Packはウィジェットのカスタマイズオプションをたくさん用意している。その結果、プライスボックスをカスタマイズするための大きなメニューバーがあります。Element Packの 価格表 ウィジェットは、ユニークでスタイリッシュなデザインを簡単に作成するのに役立ちます。

メインディッシュに移ろう!

Layout section

ウィジェットをドロップすると、ポップアップ表示されます。 コンテンツタブ.このタブは、ボックスの中身をカスタマイズするための基本設定を保持する。ご覧のように、最初のセクションは レイアウト には2つのオプションがある; レイアウト.どちらも デフォルト。 このタブのセクションリストに注目してほしい。

Layout section

別のものを選択した場合 皮膚 (Partait)をクリックすると、プライスボックスの外観も変わります。ここで、'画像'がセクションリストにない。また レイアウト オプション 肌だ。 しかし、その理由は 皮膚 オプションを指定すると、そのレイアウトに関連するオプションの表示/非表示が自動的に切り替わります。

Layout section of the price box

もう一度、デフォルト設定に戻る。その レイアウト オプション 皮膚 にも使い道がある。なんといっても、ここから数多くのレイアウトスタイルを選ぶことができる。レイアウトスタイルはそれぞれ異なり、オプションのセットも異なります。

あなたのためのブログ
最も人気のあるブログ

ワードプレスについてもっと知る

画像と詳細の追加

レイアウトを選んだら、あとは詳細を追加するだけです。プライスボックスには、どんな画像を追加してもかまいません。サービスや商品に関連した画像を追加することで、より注目を集めることができます。実際、画像を追加することで、その商品の魅力が増します。

しかし、ランディングページにすでにそのサービスに関するすべての情報が表示されている場合は、画像は必要ないかもしれない。しかし、とにかく画像を追加する方法を紹介しよう。

Image section

こちらへ コンテンツタブ> 画像セクション

正確に言おう。画像を プライスボックス 難しい問題ではない。しかし、難しいのは正しい画像を選ぶことだ。ただ 画像 セクションから画像を選択します。

Customizing Image from style tab

画像を選択した後、その画像についていくつかのカスタマイズもできます。画像は スタイルタブにアクセスする。 画像.ここでは、次のようなオプションを見つけることができます。 背景色, サイズ, 不透明度, ホバー・アニメーション等々。

ほとんどの場合、画像サイズ、背景色、不透明度のオプションで十分だ。しかし、ご覧のように Element Pack ボーダー、ボーダー半径、ボックスシャドウなどのオプションがあります。しかし、自分で試してみてください!素晴らしいデザインができることを保証します。

 

人気ブログ

ElementorのIframeウィジェットの使い方 by Element Pack

プライスボックスの詳細

さて、細部に移ろう。

見出しと小見出し

Editing title of the price box

タイトルはコンテンツにとって非常に重要です。そのため、訪問者の注意を引くようなタイトルを付ける必要があります。プライスボックスの場合は、商品名やサービスプラン名など、直接的なタイトルを付ける必要があります。カスタマイズについては スタイルタブ> ヘッダー.そこで、タイトルと小見出しの色とタイポグラフィを変更できる。

価格タグ

次に価格について。その 価格表 ウィジェットはこのパートで興味深い設定をしている。

Editing Price tag

市場に出回っている他の価格ラベルと同様、価格設定は 価格 セクションをご覧ください。面白いのは、通貨ラベルを 通貨記号 オプションがある。

Editing Price tag

もう一度、スイッチャーをクリックすると セール別の価格フィールドが表示されます。 オリジナル価格.ここでは、商品の元の価格を十字のスタイルで置くことができます。一般的には、割引商品やオファーを表示するために使用することができます。

Editing Price tag of the price box

そして最後に、価格設定をカスタマイズすることができます。 スタイルタブ> 価格.上に示したように、背景色を他の部分とは別にするようにしてください。こうすることで、見る人に値札が強調されます。

プライスボックスの商品・サービスの特徴

Features section of the price box

こちらへ コンテンツタブ> 特徴

手始めに、特徴セクションは、あなたのオファーがどのようなものを含んでいるかを理解する鍵を握っています。簡単に詳しく説明する部分ではありませんが、内容をざっと見ることができます。したがって、この部分には直接的な言葉を使い、具体的に説明しましょう。

カスタマイズについて話そう。ご覧の通り、このセクションにはたくさんのリピーターがいます。さらに追加したり、削除することもできます。各リピーターには2つのオプションセットがあります。 通常のテキストもう一方は ツールチップテキスト.通常のテキストには、ロゴ、ロゴの色、タイトルを選択するオプションがあります。ほとんどの場合、ツールチップオプションは無視できます。

Features section

さて、この部分の見通しを変えてみよう。この場合は スタイルタブ> 特徴.そこには、上記のオプションがあります。実は、プライスボックス全体の色は1色に統一しています。ここでも、プライスタグだけが強調表示されています。

ただし カラー, タイポグラフィー, ボーダーライン幅 そして 重量そして ギャップ この部分から。さらに、テキストの配置を変更するオプションもある。しかし、このスタイルの真ん中にしておいた方がいいかもしれない。

完成まであと少しです。プライスボックスの種類にかかわらず、フッターを追加する必要があります。作り方を見てみましょう。

Footer of the price box

について コンテンツタブ価格表ウィジェット というセクションがある。 フッター.基本的に、フッターエリアにはコールアウトボタンと追加のテキストボックスがある。設定から、以下の2つのスイッチャーを見ることができます。 簡単なデジタル・ダウンロードの統合 そして カスタム属性の追加.最初のリンクは イーディーディー をボタンに追加してください。2つ目のボタンについては、以下のページで紹介しています。 これ.

Footer

ただし、フッターの外観は フッター セクションの スタイルタブ.実際、ボタンを丸くするには ボーダー半径 オプションを使用してください。ここでフッターの背景色と前景色を変更できます。また、ボタンにホバー効果とボックスシャドウを追加できます。

リボン

人々がよく使うのは リボン をプライス・ボックスに表示する。これは、特定の商品を強調するマークに他なりません。その使い方をご紹介しましょう。

Ribbon

について コンテンツタブ、 最後のセクションは リボン.セクションの上部にスイッチャーがあります。リボンを表示させるには、これをオンにする必要がある。ただし、タイトルを編集したり、リボンの位置を アライメントと水平/垂直位置.また、リボンは好きなように回転させることができる。

Ribbon of the price box

さて、リボンのアウトルックを変更するには、次のようにします。 スタイルタブ> リボン.確かに上の画像のように、色、ボーダー半径、タイポグラフィ、ボックスシャドウを変えることで簡単にデザインできる。

コンプリート・プライス・ボックスを見る

Completed Price Box

おめでとうございます。そして、この瞬間まで患者を支えてくれてありがとうございます。私たちと一緒に作った見事なプライスボックスを見てください。上記の例を参考に、このようなボックスを簡単に作成することができます。 eコマースのウェブサイト。

Another Completed Price table

もうひとつ、このプライスボックスにはカスタム背景を追加することもできます。簡単に作成できます。魅力的です。また、楽しい。このブログを読んでくれてありがとう。良い一日を!

最高のウェブ・ソリューション

当社の製品でウェブサイトを強化したいですか?

Copyright © 2026 Bdテーマ. 無断複写・転載を禁じます。

Money Transfer Logo