PowerPack アドオンを使用して Elementor でタブ付きコンテンツを作成する方法

Elementor でタブ付きコンテンツを作成する方法を知りたいですか?

タブ付きコンテンツは、コンパクトながら機能的な方法で大量の情報を表示することにより、Web ページの外観を向上させます。

この記事では、Elementor および PowerPack アドオンを使用して、WordPress Web サイトのタブ付きコンテンツを作成する方法について説明します。

PowerPack Advanced タブ ウィジェット – 概要

Elementor の PowerPack アドオンは、Elementor ページ ビルダーの究極のアドオンの 1 つです。 Elementor でタブ付きコンテンツを作成するための Advanced Tabs ウィジェットを含む、150 以上のユニークでスタイリッシュなテンプレートと 80 以上の便利なウィジェットがあります。

高度なタブ ウィジェットは、WordPress Web サイトでタブ付きコンテンツを作成するのに最適なタブ ウィジェットです。 Elementor の PowerPack Advanced Tabs ウィジェットの機能を見てみましょう。

• 複数のコンテンツ ソースをサポート
• コンテンツのスタイルを設定するための、複数のコンテンツのカスタマイズ可能なオプション。
• 水平タブと垂直タブを作成できます。
• 応答性に優れたサポートを提供し、すべての画面でスムーズに動作します。
• テキストの色、タイポグラフィ、背景の種類、タブの間隔、境界線、テキストの配置など、複数のスタイル オプションを提供します。
• アイコン、タイトル、コンテンツ部分を個別にカスタマイズできます。

PowerPack アドオンを使用して Elementor でタブ付きコンテンツを作成する

開始する前に、Elementor ページ ビルダーと Elementor 用の PowerPack アドオンがインストールされ、アクティブ化されていることを確認してください。

WordPress Web サイトで両方のプラグインを有効にしたら、Elementor エディターを使用してページを開きます。

次に、ウィジェットエリアで「 Advanced Tabs 」を検索し、ウィジェットをページにドラッグアンドドロップします。

PowerPackをチェックすることを忘れないでください」 PP 」ウィジェットの右上隅に署名します。

詳細タブウィジェットのコンテンツタブ

詳細タブ ウィジェットのコンテンツ タブには、次の 2 つのセクションがあります。

1. 高度なタブ
2. レイアウト

これらのセクションを詳しく見てみましょう。

高度なタブ

このセクションで利用可能な機能を見てみましょう。

• 「タブ」はいくつでも追加できます。 「アイテムを追加」をクリックするだけで、さらにタブを作成できます。
• 各タブを個別にカスタマイズできます。
• コンテンツ タイプ:このオプションでは、コンテンツ、画像、リンク (ビデオ/画像)、保存済みセクション、保存済みウィジェット、保存済みページ テンプレートなど、複数のコンテンツ タイプを選択できます。

コンテンツタイプとしての「コンテンツ」

コンテンツを表示する場合は、次のオプションをカスタマイズできます。

1. タイトル:このオプションを使用して、コンテンツのタイトルを書きます。
2. コンテンツ:このセクションでは、番号リスト、箇条書きリスト、リンク、太字、斜体、下線などの機能を使用してタブにコンテンツを追加し、テキストのスタイルを設定できます。 それに加えて、メディア ライブラリから画像を追加することもできます。

コンテンツタイプは「画像」

画像を表示する場合は、次のオプションをカスタマイズできます。

1. 画像を選択:このオプションを使用して、画像ライブラリから画像を選択します。
2. 画像サイズ:このオプションを使用すると、目的の画像サイズを選択できます。

リンクを表示したい場合は、「リンク」オプションにリンクをドロップできます。 また、保存されたセクション、保存されたウィジェット、または保存されたページ テンプレートを選択すると、それに応じて選択できます。

タブごとに個別にコンテンツ部分をカスタマイズするように、各タブのアイコンについても同様にカスタマイズできます。

アイコン セクションの機能は次のとおりです。

1. アイコンの種類:アイコンまたは画像のいずれかのアイコンの種類を選択できます。 それはあなたのブランドのロゴやその他のものかもしれません.
2. アイコン:アイコン ライブラリからアイコンを選択できます。

レイアウト

このセクションで利用可能な機能を見てみましょう。

• レイアウト:レイアウトを水平または垂直パターンとして選択できます。
• レスポンシブ サポート:高度なタブ ウィジェットは、デスクトップ、タブレット、モバイルなど、すべてのデバイスでレスポンシブ モードをサポートします。
• スタイルの選択:このオプションを使用してタブのスタイルを選択します。
• 上にスクロール:タイトルをクリックしたときにタブの一番上にスクロールするかどうかについて、[はい] または [いいえ] を選択できます。

[注:このオプションは、タブの垂直レイアウト パターンを選択した場合にのみ使用できます。]

• デフォルトのアクティブなタブ インデックス:このオプションは、デフォルトのアクティブなタブを設定できます。 ウェブサイトにアクセスするたびに、選択したタブがデフォルトで表示されるようにします。
• カスタム ID プレフィックス: HTML でタブの ID 属性に適用されるカスタム ID プレフィックスを追加できます。

これらの変更を Advanced Tabs ウィジェットに適用して、最良の結果を確認してください。

詳細タブウィジェットのスタイルタブ

詳細タブ ウィジェットのスタイル タブには、次の 2 つのセクションがあります。

1. タブ
2. 題名
3. コンテンツ

これらのセクションを詳しく見てみましょう。

タブ

このセクションに含まれるすべての機能を見てみましょう。

• 水平方向または垂直方向の配置:このオプションを使用してタブの配置を選択しますが、最初にレイアウトを選択します。
• タブ間の間隔:このオプションでタブ間の間隔をカスタマイズします。
• 背景色:このオプションを使用すると、タブの背景色を選択できます。
• 境界線の半径:タブの境界線に曲線のエッジを表示する場合は、境界線の半径を適用します。
• パディング:タブのパディングを調整して、タブの境界線とコンテンツの間のスペースを維持します。

題名

このセクションに含まれるすべての機能を見てみましょう。

• アイコンの位置:アイコンの位置を上、下、右、左のいずれかから選択します。
• アイコンのサイズ:このオプションでアイコンのサイズを調整します。
• アイコン画像の幅:このオプションを使用してアイコン画像の幅を調整します。
• 境界線の半径:タブ タイトルの境界線に曲線のエッジを表示する場合は、境界線の半径を適用します。
• パディング:タブのパディングを調整して、タブ タイトルの境界線とコンテンツの間のスペースを維持します。
• タイトルのタイポグラフィ:このオプションを使用して、タイトル テキストのタイポグラフィをカスタマイズします。
• アイコンの色:このオプションでアイコンの色を選択します。
• タイトルの色:タイトルの色オプションを使用して、タイトル テキストの色をカスタマイズします。
• タイトルの背景色: タイトルに背景色を表示する場合は、このオプションを使用して背景色を選択できます。
• ホバー効果:このオプションを使用すると、ホバー効果を有効または無効にする柔軟性が得られます。

コンテンツ

このセクションに含まれるすべての機能を見てみましょう。

• 配置:このオプションを使用して、タブに表示されるコンテンツの配置を設定します。
• 背景の種類:クラシックまたはグラデーションの背景の種類を選択できます。
• テキストの色:タブに表示するコンテンツのテキストの色を選択します。
• テキストのタイポグラフィ:このオプションを使用して、コンテンツ テキストのタイポグラフィをカスタマイズできます。
• 罫線の種類:コンテンツの罫線の種類を、実線、二重、点線、破線、溝などの使用可能なオプションから選択します。
• 境界線の幅:コンテンツに適用される境界線の幅は、このオプションで調整できます。
• パディング:パディングを調整して、コンテンツ テキストとその境界線の間のスペースを確保し、整理されてきれいに見えるようにします。
• 境界線の色:このオプションを使用して、コンテンツの境界線の色をカスタマイズできます。
• 境界線の半径:コンテンツ パーツに境界線を適用した場合、このオプションを使用してその半径を調整できます。

以上が、PowerPack Addons による Elementor の Advanced Tabs ウィジェットのコンテンツとスタイル タブのカスタマイズでした。

選択に応じて、インストール、アクティブ化、およびいくつかの変更を行います。 それはそれと同じくらい簡単です。

Elementor Page Builder 用の PowerPack Advanced タブを入手する

PowerPack Elementor Addons が提供する Advanced Tabs ウィジェットのすべての機能を理解した後、Web サイトでの使用を気に入っていただけると確信しています。

このチュートリアルが、PowerPack Advanced Tabs ウィジェットを使用して Web サイト用のスタイリッシュな「タブ」を作成するのに役立つことを願っています。

PowerPack Addons によるウィジェットは、クリエイティブなコーダーによって驚くほど設計されているため、コーダーではない人でも数分で簡単に使用できます。

ここをクリックして PowerPack Advanced Tabs ウィジェットを入手し、Web サイトの外観とユーザー エクスペリエンスを向上させてください。

この記事を楽しんで読んだ場合は、他の PowerPack 要素もぜひ体験してください。

ここにコメントを残してください。 返信をお待ちしております。
また、Twitter、Facebook、YouTube にも参加してください。