多くのブログ記事で繰り返し述べてきたように、 テーブルバーグ は多目的に使えるプラグインだ。テーブルビルダープラグインというだけでなく、多目的ウェブデザインプロジェクトにも使用できる。例えば、フィーチャーボックス、コールトゥアクションセクション、インフォグラフィックス、ステップバイステップのプロセスなど。
このチュートリアルでは、WordPressでプロセスのステップを表示する方法を紹介します。始めましょう！
ステップ01: エディターにTablebergブロックを追加する
Tablebergプラグインは テーブルバーグ をブロックライブラリに追加します。エディターに追加するには プラス（＋）アイコン.
プロセスを表示するために必要な行と列の数を設定します。このチュートリアルでは、列と行を3*9とします。
テーブルの準備は整った。次に、行と列にコンテンツを追加して、プロセスのステップを紹介します。
ステップ 02: 個々の行の背景色を設定する
Tablebergでは、行の色を個別に設定することができます。これを行うには 行を選択する に移動する。 スタイルタブ.をクリックします。 [PRO] 行の背景色.残りをやってくれることを願っている。
行ごとに異なる色を設定しているのがわかるだろう。他のすべての要素のカラーリングとスタイル化は背景に依存するため、あらかじめ行の色を設定しています。
ステップ03：プロセスのステップ番号をリストアップする
その過程で扱うステップ番号を列挙する。ステップ番号 テキスト太字, 中央に配置するを設定する。 text colorそして サイズを大きくする.
ステップ04：ステップのタイトルとその説明を書く
次に、各欄にステップのタイトルと説明を書き始める。タイトル用と説明用の2つの段落ブロックを使うことができる。次に、テキストの色を白に設定します。
タイトルの文字サイズを説明文の文字サイズより少し大きくすると、区別しやすくなります。
ステップ05：それぞれのセルに画像を追加する
最後の列は画像を追加するために確保されている。表の行に対応する列のセルに画像を追加してみよう。
を追加する。 image block をクリックしてください。 プラス（＋）アイコン をそれぞれのセルに追加します。ローカルドライブやメディアライブラリから画像をアップロードできます。
セルに画像が追加されているのがわかります。丸いアイコンを同時に押しながらドラッグすると、画像のサイズを大きくすることができます。
同じように、最後の列の他のセルにも、内容に関連した画像を追加していく。
ステップ 06: 連絡先情報の追加
同様に、段落ブロックを使って、訪問者やユーザーがあなたに助けを求めることができるように連絡先情報を追加します。
Now, add the Styled List block をテーブルの最後の行に追加する。
ウェブサイトを表すアイコンを選択します。アイコンの横に、あなたのウェブサイトのアドレスを書いてください。
ステップ 07: テーブルのボーダーをカスタマイズする
Tablebergでは、テーブルの内側と外側の境界線を削除したり、色を変えたり、幅を変更したりすることができます。これらのオプションを適切に設定することで、テーブルをさらに美しくすることができます。
に行く。 スタイルタブ.タブを下にスクロールして 国境セクション.今日のチュートリアルでは、行のボーダーを除き、外側と列のボーダーを削除しました。行のボーダーには白色と1pxの幅を設定しました。
ステップ 08: プロセスステップのプレビュー
プレビューページに来てください。あなたのデザインが完璧に表示されるか確認してください。下の画面に見える範囲で表示させています。
結論
Tablebergはエキサイティングで有望な多機能テーブルビルダー・プラグインです。このプラグインを使えば、テーブル以外にも様々なゴージャスなウェブセクションを作成することができる。例えば ワードプレスでフィーチャーボックスを追加する方法.
私たちは、このプラグインで作成できる特別なものやデザインを紹介する、より多くのブログ記事を取り上げる予定です。だから、私たちと一緒にいて、あなたの知識ベースを成長させるために私たちのブログを探索し続けてください。
