アイコンボックスは通常、小さなグラフィックと短いテキストで構成されます。アイコンボックスを使用することで、主要な機能、サービス、ベネフィット、オファーなどを視覚的に魅力的で意味のある方法で強調することができます。
また、アイコンボックスを使用して、お客様の声、行動喚起、プロセスステップなどを表示することもできます。 テーブルバーグ は多機能なテーブルビルダー・プラグインです。このプラグインを使えば、ゴージャスで魅力的なアイコンボックスを簡単に作成できます。
この記事の次の部分では、プラグインを使用して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: ブロックとブロックの間にスペースを入れる
セルが混雑しているように見えますよね？セル内のブロックとブロックの間に十分なスペースがないからだ。でも、この問題は簡単に解決できます。
セル全体を選択.に行く。 スタイルタブ.少し下にスクロールしてください。
得られるもの セルパッド そして ブロック間隔 オプションを使用します。これらのオプションを使って、これらのブロックの間に必要なスペースを作ることができます。