アイコンボックスは通常、小さなグラフィックと短いテキストで構成されます。アイコンボックスを使用することで、主要な機能、サービス、ベネフィット、オファーなどを視覚的に魅力的で意味のある方法で強調することができます。
また、アイコンボックスを使用して、お客様の声、行動喚起、プロセスステップなどを表示することもできます。 テーブルバーグ は多機能なテーブルビルダー・プラグインです。このプラグインを使えば、ゴージャスで魅力的なアイコンボックスを簡単に作成できます。
この記事の次の部分では、プラグインを使用してWordPressにアイコンボックスを追加する方法を説明します。以下のリンクをクリックしてプラグインを入手してください。
美しいテーブルを作る
ブロックエディター付き
ステップ01: エディターにTablebergブロックを追加する
を追加する。 テーブルバーグ・ブロック をGutenbergブロックと同じようにエディタに追加します。
を設定する。 行と列の数 作成したいアイコンボックスの数に従ってください。
例えば、このチュートリアルでは3つのアイコンボックスを作成します。そのため、3つの列と1つの行を設定します。
作成されたボックスの数がわかります。次に、コンテンツを追加してアイコンボックスを作成します。
ステップ 02: ボックス/セルにアイコンを追加する
Tableberでは様々な要素をセルに追加することができ、それによってテーブルのセルを非常に魅力的なものにすることができます。このセクションでそれらを説明する。
セルに背景色を追加する
でテーブル全体を選択する。 クリック その Tablebergアイコン をクリックする。次に スタイルタブ.タブの下に、色のオプションが表示されます。適切なオプションを使用して、テーブルのセルの背景を設定します。
Note: すべてのテーブル・ボックス要素はこの背景色に基づいてデザインされるため、最初に背景色を設定する必要があります。
ボックス/セルにアイコンを追加する
Gutenbergのブロックエディタのように、テーブルセル内にブロックを追加することができます。 プラス（＋）アイコンをクリック セルにを見つけ、追加する。 Icon block to the cell.
アイコンの変更と選択
に行く。 設定タブ アイコンのブロックを選択したまま、右サイドバーのこのタブでは、以下のオプションがあります。 アイコンのサイズを大きくする, セット回転そして アイコンを変更する.
既存のアイコンライブラリからアイコンを選択するか、ローカルドライブからアイコンをインポートすることができます。
アイコンのカラー化
に行く。 スタイルタブ.を設定する。 アイコンの色 そして 背景色.
確かに、背景色のレイアウトは良く見えませんよね。私たちがカバーします。
スタイルタブの下に少しスクロールします。すると padding、margin、 そして radius options.
下の画像のように、適切な値を配置することで、背景色のレイアウトを作成することができます。
ステップ 03: セル/ボックスにテキストを追加する
テキストコンテンツがないアイコンボックスは意味がない。 パラグラフ・ブロックの追加 セルのアイコンの下にある。
タイトルの追加 アイコンボックスについて次へ 整列させる 中央で 色を選ぶそして サイズを設定する をテキストに使用する。
同様に、アイコンボックスの説明を 段落ブロック.
ステップ 04: セル/ボックスにボタンを追加する
ボタンを追加することで、ユーザーを別のページ、ドキュメント、リソースに誘導することができます。ボタンを追加する ボタンブロック to the cell.
ボタンを追加した後 CTAコピーを追加するを変更する。 テキストと背景色そして コピーサイズを大きくする.
ステップ 05: ブロックとブロックの間にスペースを入れる
セルが混雑しているように見えますよね？セル内のブロックとブロックの間に十分なスペースがないからだ。でも、この問題は簡単に解決できます。
セル全体を選択.に行く。 スタイルタブ.少し下にスクロールしてください。
得られるもの セルパッド そして ブロック間隔 オプションを使用します。これらのオプションを使って、これらのブロックの間に必要なスペースを作ることができます。
これでアイコン・ボックスの準備は整った。
ステップ 06: アイコンボックスを複製する
手動で他のアイコンボックスを同じように作成することもできますし、ボックスを複製することもできます。Tablebergには、行や列を複製するエキサイティングな機能があります。
をクリックする。 [プロ] テーブルの編集 オプションをツールバーに追加する。あとは自分でできる。詳しいガイドについては ワードプレスでサービスボックスを追加する方法.この機能の使い方は、この記事の後半で説明した。
下の画像で、アイコンボックスを複製し、その内容を変更しているのがわかるだろう。
ステップ07：セル間にスペースを追加する
に行く。 スタイルタブ. スクロールダウンして セル間隔。 このオプションでは、以下の画像のようにセル間にスペースを追加することができます。.
ステップ 08: セル境界線の削除
スタイル」タブの下にある テーブル・ボーダー そして Inner Border オプションを設定します。を設定する。 ボーダー値を0にする を両方の場所に置く。これでセルから境界線が消える。
このように、WordPressでアイコンボックスを作成することができる。
クロージング・アップ
このチュートリアルを楽しんでいただけましたか？このガイドに記載されているステップに従うことで、簡単にアイコンボックスを追加・カスタマイズし、ブランドと調和させ、重要な情報を効果的に強調することができます。
離れる前に、もう少し勉強しておこう。 WordPressでテーブルをフォーマットする方法.
