Diviプラグインのハイライト：テーブルメーカー

Diviには多くのモジュールがありますが、テーブルを作成するためのモジュールはありません。 幸いなことに、解決策があります。 Table Makerは、DiviBuilderを使用して完全にカスタマイズ可能なテーブルを作成できるサードパーティのプラグインです。 これがDiviWebサイトに適したプラグインであるかどうかを判断するのに役立つように、この記事では、Table Makerを調べて、何ができるかを確認します。

テーブルメーカーのインストール

インストールはシンプルで簡単です。

1. プラグイン>新規追加>プラグインのアップロードに移動します
2. [ファイルの選択]をクリックします
3. コンピューターでプラグインのzipファイルを見つけて選択します
4. [今すぐインストール]をクリックします
5. [アクティブ化]をクリックします

テーブルメーカーモジュール

TableMakerと呼ばれる新しいモジュールがDiviBuilderに追加されます。 主な機能を見てみましょう。

テーブルメーカーの[コンテンツ]タブ

[コンテンツ]タブには、サブモジュール用の領域が含まれています。 これらは、テーブルの列を作成するために使用されます。 列については、ヘッダーとフッターの数、列と行のサイズを調整したり、デバイスタイプごとにレスポンシブブレークポイントを調整したり、スクロールを有効にしたり、アイコン、ボタン、画像を選択したりできます。 アイコン、ボタン、画像には、サイズ、色、配置などをカスタマイズできます。

列サブモジュール

サブモジュールは列を定義し、行にコンテンツを追加するためのフィールドを含みます。 これは、各行に番号が付けられているコードエディタのように機能します。 幅、アイコン、ボタン、画像を調整することもできます。

最初の行はデフォルトで列のタイトルですが、ヘッダーが必要ない場合はこれを変更できます。 HTMLを含めることができます。つまり、マークアップに使用される特定の文字を避ける必要があります。 CSS、ショートコード、iFrame、アイコン、画像、ボタンなどを追加することもできます。

列には、テキスト、背景、セル、ヘッダーセル、フッターセルなどを含むすべての要素のデザインのカスタマイズが含まれます。

必要な数の列を作成します。 個別にスタイルを設定したり、スタイルを1つから別の列に拡張したりできます。4つの列を追加し、各列の色と幅を個別に調整しました。

ヘッダーとフッター

ヘッダーとフッターの列数を設定できます。 デフォルトでは、ヘッダーは1つで、フッターはありません。 この例では、最初の2つをヘッダーとして設定し、最後の2つをフッターとして設定しました。 色は独立してスタイリングされます。

行についても同じことができます。 この例では、2つの行をヘッダー（左側の2つ）として設定し、1つをフッター（右側の1つ）として設定しました。

テーブルスクロール

テーブルスクロールは、水平スクロールと垂直スクロールの両方を提供します。 必要に応じて、列ヘッダーと行ヘッダーをスティッキーにすることができます。 これにより、それらが所定の位置に保持されるため、スクロールして表示されなくなります。 この例では、スクロールを有効にして、ヘッダーを固定しました。 垂直方向にスクロールできるように、たくさんの列を追加しました。 行ヘッダーはそのまま残ります。

テーブルアイコン

各セルに必要な数のアイコンを追加できます。 デフォルトのアイコンを設定し、セルごとに個別にアイコンを選択します。 デフォルトのアイコンを選択し、[コンテンツ]タブからサイズと色を調整します。

アイコンは、サブモジュールのコンテンツ領域にあるアイコンタグを使用して、表示する特定のセルに追加されます。 サブモジュールのアイコンタブから選択することで、デフォルトのアイコンを上書きしてこの列のデフォルトを設定できます。また、表示する特定のアイコンの名前を入力できます。 エレガントテーママーケットプレイスの販売ページには、アイコンとその名前のリストへのリンクがあります。

テーブルボタン

テーブルボタンもタグを使用して追加されます。 [コンテンツ]タブにデフォルトのボタンを追加します。 これらの設定からボタンのスタイルを設定することもできます。 各列サブモジュール内のこれらの同じ設定でデフォルトボタンをオーバーライドします。

サブモジュールのコンテンツ領域にボタンタグを付けて、各セルにボタンを追加します。 タグ内に追加して、ボタンのテキストを変更します。 この例では、デフォルトのボタンにいくつかのセルを追加し、2番目のボタンのテキストを変更しました。

テーブル画像

画像、アイコン、その他の種類のコンテンツをセルに追加できます。 画質、プロポーション、スケール、水平方向と垂直方向の配置を設定します。 画像にはたくさんのオプションがあります。

画像はギャラリーに追加されますが、どのセルに表示するかを指定するまで表示されません。これはタグを使用して行われます。 開始画像タグを入力すると、終了タグが自動的に追加され、そのセル内に画像が表示されます。 セル内の他のコンテンツと一緒に含めることができます。 タグの間に数字を追加して、表示する特定の画像を指定します。

テーブルメーカーのデザインタブ

[デザイン]タブには、テーブルフレーム、ストライプ、セル、テキスト、ヘッダー、フッター、サイズ、間隔、境界線などの設定が含まれています。主な設定は次のとおりです。

テーブルフレーム

[デザイン]タブには、テーブルフレーム、セル、テキスト、ヘッダー、行、フッター、サイズ、間隔、境界線などのカスタマイズが含まれています。これがテーブルフレームです。 デフォルトのフレームタイプはギャップを使用します。これにより、セル間に少しスペースが配置されます。 これはNoneで、セル間の境界を削除します。

ギャップの場合、列と行のギャップを個別に調整できます。 列のギャップを8pxに、行のギャップを4pxに増やしました。

線は、各セルの周囲に境界線を配置します。 線のスタイル、色、太さを制御できます。 これがデフォルトです。

この例では、スタイルを点線に設定し、色を変更し、線幅を3pxに調整しました。

テーブルストライプ

テーブルストライプは、標準のスプレッドシートのようなストライプ効果を作成します。 適用する場所を選択し、順序を選択し、色相、彩度、明るさを調整できます。 これらはデフォルト設定です。

この例では、ストライプの色相を86度、彩度を172％、明るさを82％に調整しました。 3つの調整すべてが連携して、興味深い色のオプションを作成します。

この例では、テーブルセル、ヘッダーセル、および列ヘッダーセルの色を調整しました。

この例では、ヘッダーセルに＃1ボックスシャドウを追加し、行ヘッダーセルに＃3ボックスシャドウを追加しました。 各セルタイプのテキストの水平方向と垂直方向の配置を個別に中央揃えにしました。 また、ギャップ用のスペースを追加しました。

ヘッダーとフッターのスタイリング

ヘッダーとフッターのテキストとセルの色を個別にスタイル設定できます。 この例では、フッターを追加し、テキストを白ですべて大文字にし、セルの色を濃い青に設定し、セルにボックスシャドウを追加しました。

この例では、セル、ヘッダーセル、およびフッターセルの境界線を個別に調整しました。

テーブルメーカーの例

5つの列、列ヘッダー、および行ヘッダーを持つテーブルを作成しました。 行ヘッダーには、各商品の商品ページに移動するショッピングボタンと、商品画像があります。 両方のヘッダーは、黒い背景、丸みを帯びた角、およびレイアウトのフォントを使用しています。

セルは、ストライプ、レイアウトからのより大きなフォント、および丸みを帯びた角を使用します。 最後の列には、商品の在庫があるかどうかを示すアイコンが表示されます。 ヘッダーとセルのそれぞれにボックスシャドウを追加しました。 テーブルフレームは、列のギャップに4ピクセル、行のギャップに7ピクセルのギャップを使用します。

これは、行ヘッダーに画像がない同じデザインです。

これは、モバイルに表示される製品画像のレイアウトです。 これにより、テーブルが2列に削減され、1つが行ヘッダーになります。 これは列ごとに分けています。

行ごとに分割することもできます。 この例では、画像を削除し、行ごとに分割されたテーブルを示しています。

これは、行をアコーディオンとして示しています。 いずれかをクリックすると、そのコンテンツが表示されます。

テーブルメーカーを購入する場所

TableMakerはDiviMarketplaceで購入できます。 無制限のWebサイトの料金は35ドルで、30日間の返金保証と1年間のサポートと更新が含まれています。 ドキュメントは、ビデオウォークスルーおよびテキストとして提供されます。

終わりの考え

これが、Diviのテーブルメーカーの外観です。 ここでは取り上げなかったいくつかの機能を含め、Diviのテーブルを作成およびカスタマイズするための多くの機能があります。 画像、アイコン、ボタンの使用方法を確認するために必要なのはドキュメントだけです。

最初は、タグを使用してボタン、アイコン、画像をテーブルに追加するのは少し厄介に思えましたが、簡単に実行でき、セルのコンテンツはコードエディターで追加されるため、自分よりもはるかに細かく制御できます。 dは通常持っています。

Table Makerは、Diviでテーブルを作成するための優れたプラグインです。 HTML、ショートコード、iFrame、CSSなどのコンテンツを追加できるため、作成できるテーブルの種類が大幅に強化されます。 Diviを使用して独自のカスタムテーブルを作成することに興味がある場合は、TableMakerを一見の価値があります。

我々はあなたから聞きたい。 Divi用のテーブルメーカーを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

PCH.Vector / shutterstock.com経由の注目の画像