Service ブロックを使用してサービスを強調表示する – AitThemes カスタム ブロック

Service ブロックは、Citadela Pro プラグインでリリースした最初のブロックです。このブロックのおかげで、サービスや製品の機能、キーポイント、ビジョン、仕事の範囲を完璧に表現できます。 WordPress ページまたは投稿にサービス ブロックを追加すると、特定の要素を強調表示したり、アイコン、説明、CTA を追加したりできます。訪問者の注意を 1 つの特定のサービスのみに向けるか、複数のサービス ブロックを介して複数のサービスに注目させるかは、あなた次第です。しかし、最初から始めましょう。

この記事では次のことについて説明します。

• サービスブロックの目的と用途
• WordPress テーマとの互換性
• ウェブサイトにサービスブロックを追加する方法
• インスペクターを使用したブロックのカスタマイズ
• 複数のサービスを含む専用のサービス ページを作成する方法

サービスブロックの主な目的 - サービスを魅力的な方法で表示する

サービス ブロックを使用する主な目的は、魅力的な方法で情報を提示できるようにすることです。特定のグループを他のテキストから明確に区別し、強調表示して全員の注意を引くことができます。次の理由により、サービス ブロックはレイアウト内で見栄えがよくなります。

• コンテンツの構造化
• アイコンで更新する
• グラフィックとスペースを使用してサービスを分離する

上記のおかげで、サービス ブロックはすぐに訪問者の注意を引くことができます。

ウェブサイト全体のナビゲーションの向上

サービスが強調表示されるため、Web サイトの目をスキャンするのがはるかに簡単になります。顧客がウェブサイトをスクロールするだけだとしても、提供するサービスを見逃すことはありません。

サービスに URL を追加すると、CTA のナビゲーション ボックスとして使用できます。これにより、顧客はボックスをクリックして詳細を確認したり、サービスを注文したりすることができます。

機能を提供するために使用されるサービス ブロック

サービス ブロックは、提供する製品やサービスの機能を強調するために使用することもできます。つまり、個々のサービス ブロックはそれぞれ 1 つの特定の機能を提供します。このグラフィック表現により、特定の製品の重要な品質を引き出すことができます。訪問者は大量のテキストを読みたいわけではないことを念頭に置いてください。

サービスブロックはどこで使用できますか

サービス ブロックは投稿やページ内で、実際には必要な場所ならどこでも使用できます。通常、Webサイト訪問者とのファーストコンタクトとなるホームページで使用すると良いでしょう。サービス ブロックは訪問者の注意を簡単に集めることができるため、最もアクセス数の多いページでサービスを使用することをお勧めします。

サービスブロックは、ホームページと同様に訪問者数が多い専用のサービスページで使用できます。提供するすべてのサービスを 1 か所で提示できます。

サービスページの作成方法については後ほど説明します。

WordPress テーマとの互換性

Service ブロックの主な利点は、WordPress ブロック エディター (Gutenberg) をサポートするすべての WordPress テーマで利用できることです。つまり、当社のテーマでも、Avada や Divi などのサードパーティのテーマでも使用できます。必要なのは Citadela Pro プラグインをインストールすることです。

ウェブサイトにサービスブロックを追加する方法

すでに述べたように、エディターにサービス ブロックを追加するには、Citadela Blocks プラグインが必要です。プラグインを有効化すると、WordPress エディターにブロックが自動的に追加されます。

サービス ブロックは、上部バーまたはエディター内の任意の場所にある「+」記号をクリックして追加できます。その後、「サービス」という用語を使用して特定のブロックを検索するだけです。

Service ブロックを追加する 2 番目のオプションは、「/」を使用して「service」という単語を記述することです。

終わり。利用可能なオプションを備えたサービス ブロックは次のようになります。

サービスブロック設定

まず最初に、Web サイトのデザインにより適したサービス レイアウトを選択できます。デフォルトでは、アイコン、タイトル、説明が中央に配置されるボックス レイアウトがあります。上部のツールバーでリストレイアウトに変更できます。アイコンがタイトルの隣に移動され、すべてが左揃えになります。

Service ブロック内には、ヒントとしても機能するプレースホルダーがあります。個別のボックスに何を書けばよいのかが正確にわかります。タイトルは通常、機能のサービスの名前を意味します。通常、その下のテキストはサービスの詳細を説明するか、顧客がそのサービスを注文する必要がある理由を説明します。

テキストは通常どおり書式設定でき、太字、斜体に設定したり、リンクを追加したりできます。

インスペクターを使用したブロックのカスタマイズ

Inspector の詳細設定を使用すると、ニーズに合わせてサービス ブロックを変更できます。あなたになら変えられる：

1. ブロックカラー

• 背景色
• タイトルの色
• テキストの色

2. サービスブロック内のアイコンまたは画像

サービス ブロックにはデフォルトでアイコンが表示されます。検索バーを使用して、ピッカーから別のアイコンを選択できます。アイコンの色も変更できます。アイコンの代わりに任意の画像を使用することもできます。アイコンのサイズに合わせたり、サービスボックスの幅に合わせたりすることができます。

サービス ボックス内にアイコンまたは画像を表示したくない場合は、この機能を完全にオフにすることができます (アイコンまたは画像を表示 –> なし)。

3.リンク

訪問者を別のページに移動するには、サービス ボックスにリンクを追加します。 CTA を正しく選択すると、クリック数とコンバージョン率が増加します。 「続きを読む」と書いてURLを挿入するだけです。このリンクを新しいブラウザー タブで開くことも選択できます。

4. カスタム CSS クラス

上級 WordPress ユーザーの場合は、他のブロックと同様に、独自の CSS コードを追加するオプションを利用できます。これにより、サービス ブロックの設計にさらに大きな変更を加えることができます。

複数のサービスを含むサービスページを作成する方法

この記事の冒頭で述べたように、サービス ページを使用すると、すべてのサービスを 1 か所で表示できます。新しいページを作成し、複数の Service ブロックを並べて、または順番に挿入します。サービスを備えたブロックは、要件に基づいてどこにでも配置できます。それをどう使うかはあなた次第です。

サービスブロックを使用してWordPressブロックエディターにサービスページを追加するにはどうすればよいですか?

• 最初に追加する必要があるのは 列ブロック
• 列数を設定します。 3 つのサービスを紹介したい場合は 3 つの列が必要です
• その後、各列に 1 つの Service ブロックを追加します

各サービスは個別のブロックであるため、管理はシンプルかつ明確です。選択したブロックを複製して、ページ上の別の場所で使用できます。最良の点は、サービス ブロックがモバイル デバイス上のレスポンシブ バージョンでも適切に表示されることです。

すでにサービスブロックをお試しになりましたか?どうやって見つけますか？以下のコメントであなたの最初の反応を楽しみにしています。