WordPressでサービスボックスを追加する方法

WordPressでサービスボックスを追加する方法

サービス・ボックスは、しばしばフィーチャー・ボックスとして知られています。貴社の製品やビジネスが提供する主要なサービスを強調するために使用されます。サービスボックスには、画像、アイコン、見出し、簡単な説明が含まれることが多く、意味を持たせることができます。

Tablebergはテーブルビルダープラグインですが、サービスボックスをアピールするなど、様々なウェブデザインに使用することができます。このチュートリアル記事では、WordPressでサービスボックスを追加する方法を簡単に紹介します。

Tabelbergプラグインをお持ちでない方は、下のバナーのボタンをクリックして入手してください。

美しいテーブルを作る
ブロックエディター付き

ステップ 01: 行と列の作成

を追加する。 テーブルバーグ・ブロック をクリックしてエディターへ プラス(+)アイコン.

TableBergブロックを見つけて、Gutenbergエディタに追加します。

次ページ 行と列の数を設定する サービスボックスを作成します。今回は4つのサービス・ボックスを作成するので、以下のように選択した。 2*2の行と列.

行と列の数を選択する

ステップ 02: セルにコンテンツを追加する

サービスボックスには3種類の要素が必要です。アイコン、段落、ボタンです。さっそく追加してみましょう。

テーブルの背景色

それはいいことだ 背景色を追加する を使用する必要があります。なぜなら、背景色に基づいてセルの他の要素の色を決定しなければならないからです。

Tablebergアイコンを選択 ツールバーのツールバーの スタイルタブ.Color(色)セクションの下にBackground(背景色)オプションが表示されます。 適切な色を選ぶ.

テーブルに背景を追加する

セルへのアイコン

Tablebergでは、Gutenbergエディタのように様々なブロックを追加することができます。をクリックしてください。 プラス(+)アイコン を追加する。 Icon block to the cell.

サービスボックスにアイコンブロックを追加

に来てほしい。 設定タブ.を変更するオプションが表示されます。 アイコンのサイズ、回転、 そして icon.今すぐだ、 アイコンを選ぶ これは、特定のセルのサービス・タイプに対応するものです。

サービスボックスのアイコンを選択

に行く。 スタイルタブ.以下のオプションが表示されます。 アイコンの色を変更する.私たちはそれを白にした。

アイコンカラーの変更

サービス名

が必要だ。 段落ブロック にサービス名を書く。

サービス名を追加する段落ブロックを追加する。

パラグラフ・ブロックの追加後 サービス名を書く をセルに追加する。右のサイドバーから、 サービス名をカラー化する そして サイズを設定する.

サービス名を書く

サービス内容

前の方法と同じように、Paragraphブロックを使ってサービスの説明を書く。

サービスの説明を書く

CTA Button

CTAボタンがなければサービスは不完全だ。だから CTAボタンを追加する をセルに送る。 プラス(+)アイコンをクリックする.

CTAボタンを追加する

をカスタマイズする。 背景色、文字色、 そして ホバー効果 を選んでください。

CTAボタンをカスタマイズする

ステップ03: ブロックとブロックの間にスペースを入れる

輻輳を解消するには、セル上の要素間にスペースを追加する必要がある。そのためには セル全体を選択.

次に スタイルタブ.タブを下にスクロールすると セルパッド そして セル間隔 options.

これら2つのオプションに値を設定することで、セル要素間にスペースを追加することができます。

ブロックとブロックの間にスペースを入れる

ステップ04:他のセルにコンテンツを追加する

Tablebergには、テーブルの行や列を即座に複製できる面白い機能がツールバーにある。

をクリックする。 [Pro] テーブル編集アイコン を選択する。次に この行を複製する オプションがある。

重複行

これで空白の列ができる。 列を削除する その必要はない。

不要な列を削除する

では [Pro] テーブル編集アイコンを選択する。 この列を複製する オプションがある。

列を複製する

これで、サービスボックスの準備は完了です。このように、Tablebergプラグインを使えば、テーブルのセル、行、列を複製することができます。

サービスボックスの準備完了

ステップ05:サービスボックスの間にスペースを入れる

テーブルブロック全体を Tablebergアイコンをクリック ツールバーの

に行く。 スタイルタブ.タブをスクロールダウンして、次の場所に来てください。 セル間隔.このオプションを使用すると、サービスボックスの間に隙間を作ることができます。

サービスボックスの間にスペースを追加

ステップ 06: サービスボックスの枠線を隠す

さて、ボックスの枠を隠す、 スタイルタブを開く.もう一度、タブを下にスクロールして 国境セクション.

オプションをオフにする [PRO] 行のみボーダー そして 枠外のセルを隠す.

サービスボックスのボーダーを隠す

これでサービス・ボックスの準備は完了です。必要であれば、さらにカスタマイズしてサービスボックスをより魅力的にすることができます。Tablebergテーブルのカスタマイズ方法については、こちらをご覧ください、 ドキュメントを見る.

結論

Tablebergは単なるテーブルビルダープラグインではありません。様々なウェブデザインやコンテンツ作成プロジェクトに使用できる万能ツールです。チュートリアルを隅から隅まで楽しんでいただけたら幸いです。

本日の記事について何か不明な点がありましたら、以下にコメントを残してください。サポートチームがすぐに対応いたします。

こちらもお読みください:



テーブルバーグ・チーム