サービス・ボックスは、しばしばフィーチャー・ボックスとして知られています。貴社の製品やビジネスが提供する主要なサービスを強調するために使用されます。サービスボックスには、画像、アイコン、見出し、簡単な説明が含まれることが多く、意味を持たせることができます。
Tablebergはテーブルビルダープラグインですが、サービスボックスをアピールするなど、様々なウェブデザインに使用することができます。このチュートリアル記事では、WordPressでサービスボックスを追加する方法を簡単に紹介します。
Tabelbergプラグインをお持ちでない方は、下のバナーのボタンをクリックして入手してください。
美しいテーブルを作る
ブロックエディター付き
ステップ 01: 行と列の作成
を追加する。 テーブルバーグ・ブロック をクリックしてエディターへ プラス（＋）アイコン.
次ページ 行と列の数を設定する サービスボックスを作成します。今回は4つのサービス・ボックスを作成するので、以下のように選択した。 2*2の行と列.
ステップ 02: セルにコンテンツを追加する
サービスボックスには3種類の要素が必要です。アイコン、段落、ボタンです。さっそく追加してみましょう。
テーブルの背景色
それはいいことだ 背景色を追加する を使用する必要があります。なぜなら、背景色に基づいてセルの他の要素の色を決定しなければならないからです。
Tablebergアイコンを選択 ツールバーのツールバーの スタイルタブ.Color（色）セクションの下にBackground（背景色）オプションが表示されます。 適切な色を選ぶ.
セルへのアイコン
Tablebergでは、Gutenbergエディタのように様々なブロックを追加することができます。をクリックしてください。 プラス（＋）アイコン を追加する。 Icon block to the cell.
に来てほしい。 設定タブ.を変更するオプションが表示されます。 アイコンのサイズ、回転、 そして icon.今すぐだ、 アイコンを選ぶ これは、特定のセルのサービス・タイプに対応するものです。
に行く。 スタイルタブ.以下のオプションが表示されます。 アイコンの色を変更する.私たちはそれを白にした。
サービス名
が必要だ。 段落ブロック にサービス名を書く。
パラグラフ・ブロックの追加後 サービス名を書く をセルに追加する。右のサイドバーから、 サービス名をカラー化する そして サイズを設定する.
サービス内容
前の方法と同じように、Paragraphブロックを使ってサービスの説明を書く。
CTA Button
CTAボタンがなければサービスは不完全だ。だから CTAボタンを追加する をセルに送る。 プラス（＋）アイコンをクリックする.
をカスタマイズする。 背景色、文字色、 そして ホバー効果 を選んでください。
ステップ03: ブロックとブロックの間にスペースを入れる
輻輳を解消するには、セル上の要素間にスペースを追加する必要がある。そのためには セル全体を選択.
次に スタイルタブ.タブを下にスクロールすると セルパッド そして セル間隔 options.
これら2つのオプションに値を設定することで、セル要素間にスペースを追加することができます。
ステップ04：他のセルにコンテンツを追加する
Tablebergには、テーブルの行や列を即座に複製できる面白い機能がツールバーにある。
をクリックする。 [Pro] テーブル編集アイコン を選択する。次に この行を複製する オプションがある。
これで空白の列ができる。 列を削除する その必要はない。
では [Pro] テーブル編集アイコンを選択する。 この列を複製する オプションがある。
これで、サービスボックスの準備は完了です。このように、Tablebergプラグインを使えば、テーブルのセル、行、列を複製することができます。
ステップ05：サービスボックスの間にスペースを入れる
テーブルブロック全体を Tablebergアイコンをクリック ツールバーの
に行く。 スタイルタブ.タブをスクロールダウンして、次の場所に来てください。 セル間隔.このオプションを使用すると、サービスボックスの間に隙間を作ることができます。
ステップ 06: サービスボックスの枠線を隠す
さて、ボックスの枠を隠す、 スタイルタブを開く.もう一度、タブを下にスクロールして 国境セクション.
オプションをオフにする [PRO] 行のみボーダー そして 枠外のセルを隠す.
これでサービス・ボックスの準備は完了です。必要であれば、さらにカスタマイズしてサービスボックスをより魅力的にすることができます。Tablebergテーブルのカスタマイズ方法については、こちらをご覧ください、 ドキュメントを見る.
結論
Tablebergは単なるテーブルビルダープラグインではありません。様々なウェブデザインやコンテンツ作成プロジェクトに使用できる万能ツールです。チュートリアルを隅から隅まで楽しんでいただけたら幸いです。
本日の記事について何か不明な点がありましたら、以下にコメントを残してください。サポートチームがすぐに対応いたします。
こちらもお読みください：
