Elementorを使用してWordPressで機能ボックスを作成する方法

機能ボックスは、特別オファー、メリット、サービス、行動への呼び出しなどのコンテンツにユーザーの注意を引くことができるWebページの強調表示セクションです。視覚的に目立つように設計されており、訪問者が一見したところに重要なメッセージを簡単に表示できるようになります。

目を引く機能ボックスを作成することは今日難しくありません。 Elementorは、Webサイトのデザインを容易にした強力で有名なドラッグアンドドロップページビルダープラグインです。かつてコーディングを知らなかった人でさえ、ElementorでスタイリッシュなWebページを設計できるようになりました。

レイアウト、色、アイコン、画像、アニメーションなどを完全に制御できます。したがって、この記事では、Elementorプラグインを使用してWordPressで機能ボックスを作成する方法に関するステップバイステップのチュートリアルについて説明します。お楽しみください。始めましょう！

なぜ機能ボックスの作成を検討する必要があるのですか？

機能ボックスには、訪問者が本当に注意を引くことで、訪問者があなたのウェブサイトのコンテンツと対話する方法を形作る力があります。 Webサイトで機能ボックスの作成を検討する必要がある理由を簡単に見てください。

• 重要な機能を強調表示します

機能ボックスは、提供の最も重要な機能に注意を向けるのに最適です。これはあなたの製品、サービス、またはパッケージかもしれません。製品ページ全体の詳細を詳細にする代わりに、機能ボックスは主要な機能を視覚的に分離し、すぐに目立つ方法で提示するのに役立ちます。

• 値を通信します

魅惑的な機能ボックスを使用すると、ブランド/製品を際立たせるものを視聴者に知らせることができます。それはあなたにあなたのコアバリューをオンラインオーディエンスにクリーンで直接的な方法で伝えるスペースを提供します。これにより、信頼が構築され、訪問者をより深いレベルでつなげます。

• 一貫したレイアウトを作成します

サイト全体に複数の機能ボックスを作成する必要がある場合があります。 Elementorは、単にあなたが好きなだけ何度か機能ボックスを複製することを可能にします。したがって、ウェブサイト全体で一貫性とリズムを保証します。それらが複製された後、あなたはそれらのコンテンツを変更するだけです。

• ブランドアイデンティティを強化します

機能ボックスは、ブランドアイデンティティを強化する絶好の機会を提供します。ブランドの色、フォント、アイコンスタイルに合わせて、視覚的な調和を維持できます。この微妙な繰り返しは、あなたのブランドがよりまとまって記憶に残る感を感じるのに役立ちます。

• コンテンツの読みやすさを改善します

長い段落は読者を圧倒することができます。しかし、機能ボックスを使用すると、コンテンツを簡単に理解できる小さな部分に分割します。彼らはあなたのコンテンツをよりスキャン可能にすることができます。これにより、訪問者は大きなコンテンツブロックを探索するのに多くの時間を費やすことなく、メッセージをすばやく理解することができます。

機能ボックスを作成するための前提条件

チュートリアルに飛び込む前に、事前に確保する必要があるいくつかの前提条件があります。次のプラグインがサイトにインストールされ、アクティブ化されていることを確認してください。

• Elementor
• HappyAddons

なぜHappyAddons？

Elementorが今日とても人気がある理由は、強力なアドオンの素晴らしいコレクションがあることです。それらのそれぞれには、Core Elementorプラグインのパワーをさらに拡張するために、多くの追加機能とウィジェットが付属しています。 HappyAddonsはそのようなアドオンです。

HappyAddonsには、130以上の機能が豊富なウィジェット、28以上のエキサイティングな機能、100以上の事前に設計されたテンプレート、テーマビルダーがあります。 Free Elementorバージョンには、多くの高度な機能やウィジェットが提供されていないことをご存じでしょう。しかし、あなたが本当に包括的な無料オプションを求めているなら、HappyAddonsはスマートな選択になる可能性があります。

HappyAddonsの無料版では、70以上のウィジェットと20以上の機能、および事前に設計されたテンプレートがたくさんあります。したがって、HappyAddonsの無料バージョンで見事な機能ボックスを作成できます。これが、このチュートリアルで使用する理由です。

WordPressで機能ボックスを作成する方法：ステップバイステップチュートリアル

上記のプラグインがサイトにインストールされ、アクティブ化されることを願っています。今こそチュートリアルを開始する時が来ました。私たちに従ってください。

ステップ01：Elementor Canvasで投稿またはページを開く

機能ボックスを作成する投稿またはページを開きます。

ステップ02：列レイアウトを選択します

必要に応じて列レイアウトを選択します。このチュートリアルでは、3列のレイアウトを選択します。

ステップ03：適切なウィジェットをキャンバスにドラッグアンドドロップする

すでに述べたように、HappyAddonsは機能ボックスを作成するために使用できる多くの機能豊富なウィジェットを提供しています。その中で、3つの最高のウィジェットは、アイコンボックス、情報ボックス、カードです。任意のウィジェットを使用できます。ただし、チュートリアルでは、情報ボックスウィジェットを使用します。

Elementorパネルで情報ボックスウィジェットを見つけます。キャンバスの適切な列にドラッグしてドロップします。

Info BoxウィジェットがElementor Canvasに追加されたことがわかります。

GoogleシートをWordPressテーブルに埋め込み、ソート可能にする方法を調べます。

ステップ04：情報ボックスウィジェットのプリセットを選択します

プリセットは、保存された設定とカスタマイズを備えた事前に設計されたレイアウトです。プリセットを選択すると、その設定全体とスタイリゼーションがウィジェットに適用され、事前に定義された外観が表示されます。時間が短い場合、プリセットを使用すると時間を節約できます。

HappyAddonsウィジェットのほとんどには、いくつかのプリセットが含まれています。たとえば、情報ボックスウィジェットには12個のプリセットがあります。必要なプリセットを選択するだけです。

注：機能をゼロから構築する場合は、プリセットの使用を避けることができます。ただし、チュートリアルでは、プリセットを使用します。

ステップ05：機能ボックスにアイコン/画像を追加します

機能ボックスにアイコンを追加すると、ユーザーと訪問者が製品が提供する特定の機能を視覚化するのに役立ちます。

アイコン/画像セクションを展開します。メディアタイプの下のアイコンをクリックします。アイコンライブラリが開きます。

ライブラリをスクロールするか、検索ボックスにキーワードを入力することで、目的のアイコンを見つけることができます。アイコンを見つけたら、選択し、下部の[挿入]ボタンをクリックします。

私たちが行ったように、アイコンが機能ボックスに追加されていることがわかります。

WordPressにフリップボックスを追加する方法を学びます。

ステップ06：機能ボックスにタイトルと説明を追加する

簡潔なタイトルと説明を機能ボックスに追加することは必須です。これは、ユーザーに機能に関する簡単なアイデアを即座に提供できます。

タイトルと説明のセクションを展開します。希望のタイトルと説明をセクションの下のそれぞれのボックスに書き込みます。 Elementor Canvasの機能ボックスに変更が表示されます。最後に、タイトルと説明を中央に合わせます。

ステップ07：ボタン設定を構成します

同様に、ボタンセクションを展開します。ボタンの新しいコピーを書き、宛先リンクを追加することができます。必要に応じて変更を行います。

ステップ08：機能ボックスを様式化します

[スタイルズ]タブに来てください。タブから機能ボックス内の各要素をカスタマイズするオプションを取得します。あなたはできる

＃スタイライズアイコン/画像

アイコン/画像セクションを展開します。アイコンのサイズ、間隔、パディング、マージン、ボーダータイプ、およびその半径をカスタマイズできます。

少し下にスクロールすると、機能アイコンの色を変更するオプションが表示されます。必要に応じてこれらの変更を行います。

＃スタイライズタイトルと説明

次に、タイトルと説明のセクションを展開します。そこから、テキスト間のタイポグラフィ、テキストの色、間隔を変更できます。

＃スタイライズ機能ボタン

同様に、ボタンセクションを展開します。次に、タイポグラフィ、パディング、その他の必要な設定を必要に応じて変更します。

ステップ09：機能ボックス全体に背景色を追加する

適切な背景色を機能ボックスに追加すると、より美しく見えるようになり、そのコンテンツを強調表示するのに役立ちます。

鉛筆アイコンをクリックして、ウィジェット全体を選択します。 [Advanced Tab]> [背景]セクションに移動します。

バックグラウンドタイプオプションの横にあるブラシアイコンをクリックします。好きな色を選択してください。色はすぐに機能ボックスに適用されます。

ステップ10：機能ボックスを複製します

これで、製品が持っているすべての機能をカバーするために、複数の機能ボックスを作成することができます。これを行う最良の方法は、Elementorに付属する重複オプションを使用することです。

コンテナアイコンを右クリックして、機能ボックス全体を選択します。

リストが開きます。リストの重複オプションをクリックします。

同様に、機能ボックスを何度も好きなだけ複製します。同じ外観とスタイリゼーションを備えた3つの機能ボックスを作成するために複製したことがわかります。

これで、レイアウトから空白のボックスを削除する必要があります。

同様に、空白ボックスのコンテナアイコンを右クリックします。次に、リストの削除オプションを選択します。すべての空白のボックスを削除するために同じことをします。

レイアウトからすべての空白のボックスを削除したことがわかります。

＃機能ボックスのコンテンツを編集します

機能ボックスが完全に複製されたら、コンテンツを変更して、各ボックスに異なる機能情報を表示できます。

ステップ11：機能ボックスをモバイル応答します

機能ボックスをモバイル応答しない限り、サイトが小画面デバイスから訪問すると、壊れたり乱雑になります。 Elementorは、ページをモバイル応答性にする方法を提供します。

Elementorパネルの下部にある応答モードをクリックします。これにより、キャンバスにトップバーが追加されます。そこから切り替えて、ページがさまざまな画面サイズでどのように見えるかを探索できます。

特定の画面サイズでレイアウトがよく見えない場合は、スタイルサイズをタブから変更することができます。

あなたが行う変更は、その特定の画面タイプに対してのみ保存されます。したがって、Elementorプラグインを使用して、デザインをモバイル応答性にすることができます。

ステップ12：機能ボックスをプレビューします

ページのフロントエンドに来て、機能ボックスが見栄えが良く、ボタンが機能しているかどうかを確認してください。それがあなたの側でうまくいくことを願っています。

総括する！

このチュートリアルを楽しんだことを願っています。今日の機能ボックスは、あなたが見落とすことができる単純なWeb要素ではなくなりました。あなたがそれらをうまく設計して置くことができれば、彼らはあなたの製品やサービスについて顧客の心の心に長続きする印象を与えることができます。したがって、機能ボックスを設計する際に考慮する必要があるいくつかの要因があります。

各機能ボックスとそのコンテンツを完全に区別できるように、十分な空白を備えたクリーンなレイアウトを確保します。すべての機能ボックスで同じアイコンスタイル、フォントファミリ、カラーパレットを使用して、視覚的な調和を維持します。そして最後になりましたが、デザインをモバイル応答性にすることを忘れないでください。