WordPressでフィーチャーボックスを追加する方法

ワードプレスのウェブサイトにフィーチャーボックスを追加する方法

フィーチャーボックスは、特定のコンテンツや製品、サービスに注目させるためにウェブページ上にデザインされた領域です。フィーチャーボックスは、画像、アイコン、簡潔なテキスト、ボタンなどの要素でデザインされます。

Tablebergは多目的テーブルビルダープラグインです。フィーチャーボックスの素晴らしいレイアウトを作成するのに役立ちます。このチュートリアル記事では、このプラグインを使ってWordPressにフィーチャーボックスを追加する方法を簡単に紹介します。

下のバナーのボタンをクリックしてプラグインを入手してください。

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

プラグインをサイトにインストールしたら、以下のチュートリアルに従ってください。

ステップ01: エディターにTablebergブロックを追加する

を追加する。 テーブルバーグ・ブロック to the editor.

GutenbergエディタにTableBergブロックを追加する

作成したいフィーチャーボックスの数に応じて、ウェブサイトの行と列の数を定義します。

3つのフィーチャー・ボックスを作成するので、列と行の数を2*2に選択した。

行と列の数を設定する

定義された行数と列数が追加されました。

行と列が追加される

ステップ 02: ボックスに商品画像を追加する

フィーチャーボックスは、それぞれの製品の画像がなければ意味がありません。を追加してください。 イメージブロック を適当なセルに移す。

ボックスに商品画像を追加する

適当なセルに画像を追加する。丸いアイコンをドラッグすることで、画像のサイズを変更できます。

画像をフィーチャーボックスにリサイズする

ステップ03:星評価を追加する

星の評価は、商品の品質や人気を直感的に表現する方法です。また、顧客エンゲージメントにも役立ちます。そこで Star Rating block をテーブルに置く。

フィーチャーボックスに星評価を追加

の下から 設定タブ 右サイドバーで、スター評価ブロックの値を設定します。必要に応じてブロックのサイズを変更することもできます。

星評価ブロックの設定値

ステップ04:CTAボタンを追加する

CTAボタンを使えば、ユーザーの購買意欲や商品ページへの訪問意欲を高めることができます。そこで ボタンブロック の下にある。

フィーチャーボックスにCTAボタンを追加する

に行く。 スタイルタブボタンブロックを選択したままにする。

ここから、ボタンを変更することができます テキストの色、背景色、サイズ、パディング、 アンd 半径は必要に応じて。

フィーチャーボックスのボタンをカスタマイズする

ステップ05:機能リストと説明を追加する

機能リストと説明を追加するにはスペースが必要なので、2つのセルを統合したほうがよいでしょう。 セルを選択する でカーソルを合わせる。 シフトキーを押しながら.

テーブルの編集をクリックする ツールバーのを押す。 Merge option on the list.

フィーチャーボックスのセルをマージする

を追加する。 段落ブロック フィーチャー・ボックスにテキストを書き込む。

パラグラフブロックをフィーチャーボックスに追加してテキストを追加する

製品の特徴をリストで表示する方がよい。そこで Styled List block.

フィーチャーリストをフィーチャーボックスに追加する

下の画像のように製品の特徴をリストアップできるといいですね。あなたは リストのアイコンを変更し、サイズを大きくする、 そして 色を変更する.

製品の特徴をリストアップする

最後に、機能リストの下にある段落ブロックを使用して、製品の簡単な説明を追加します。

商品についての簡単な説明を追加する

これで、フィーチャー・ボックスのコンテンツは準備できました。では、ボックスをもう少しカスタマイズしてみましょう。

ステップ 06: フィーチャーボックスのボーダーをカスタマイズする

Tablebergでは、以下のカスタマイズが可能です。 外部 そして 内枠.

に行く。 スタイルタブ.少し下にスクロールしてください。以下のオプションが表示されます。 希望の色を設定する そして ボーダーの厚さ.

フィーチャーボックスのボーダーをカスタマイズする

ステップ07:フィーチャーボックスにリボンを追加する

リボンは、割引や新入荷などの重要な情報を強調するのに役立つ小さな装飾的なタグやバナーです。リボン Ribbon block を最も近いセルに移す。

フィーチャーボックスにリボンを追加

に行く。 設定タブを書く。 リボンコピー そして その位置 をフィーチャーボックスの上に置く。

リボンテキストとフィーチャーボックス上の位置を設定する

最後に スタイルタブ.

Select the text そして background color リボンのために。

リボンの色を選ぶ

ステップ08:フィーチャーボックスのプレビュー

プレビューページにアクセスしてください。この機能がうまく機能していることがわかるだろう。

フィーチャーボックスのプレビュー

結論

この記事を楽しんでいただけましたか?Tablebergプラグインを使えば、もっといろいろなデザインができます。例えば、終了する前にあと2つの投稿を探ってみてください。それらの投稿は

プラグインに関するご質問がございましたら、コメント欄からお知らせください。すぐに納得のいく答えをお返しします。



テーブルバーグ・チーム