タブ要素

タブ要素とは何ですか?

ウェブサイトのタブは、紙のファイルフォルダーの物理的なタブから着想を得ました。タブを使用すると、コンテンツのさまざまなセクションをコンパクトで操作しやすい形式で表示できます。

GemPagesタブ要素、次のことができます。

• 整理された、スペースを節約するレイアウトでコンテンツを表示します。
• ユーザーがセクションを離れることなくコンテンツを切り替えることができるようにします。
• ページをすっきりと視覚的に魅力的な状態に保ちます。

GemPagesにタブ要素を追加する方法

以下の手順に従って挿入してください タブ要素 あなたのページに:

ステップ 1から： GemPagesダッシュボード編集するテンプレートを開きます。 タブ エディターの左側のサイドバーの 対話 セクション。要素を任意の位置にドラッグ アンド ドロップします。

ステップ 2: その他の要素を削除します。 見出し, テキストブロック, 画像、 タブ内でなど、希望するコンテンツ レイアウトを作成します。

タブ要素をクリックすると、 設定は左側のサイドバーで利用できます。これについては次のセクションで説明します。

タブ要素の設定を構成する

タブ要素がページに表示されると、その設定オプションが 左側のサイドバー.

1. 設定タブ

レイアウト

• コンテンツに対するタブの位置を制御します。
• デフォルト: タブ 左 内容の。

レイアウト オプション:

• コンテンツの上のタブ
• コンテンツの左側のタブ
• コンテンツの右側のタブ

レイアウトを選択すると、 レイアウトポップオーバー 簡単に変更できます。

タブ

1. 順序: デフォルトでは、要素には3つのタブ項目があります。ポップオーバーのタブタイトルは、デザインエリアのタブの内容を反映します。

• タブを追加するには、「さらに追加」オプションをクリックするだけです。 
• タブを複製するには: 目的のスライドの上にマウスを移動し、複製アイコンをクリックします。 
• タブを削除するには: 特定のスライドの上にマウスを移動し、ゴミ箱アイコンをクリックします。

2. テキスト: 各タブ コンテンツのテキスト スタイル。

3.幅: 各タブ項目の幅。デフォルトの幅は「自動」で、タブ内のコンテンツのサイズに合わせてタブ幅が自動的に調整されます。

幅のオプション: 幅入力フィールドのドロップダウン ボタンをクリックすると、幅のオプションを含むドロップダウン メニューが表示されます。

• 自動は幅がコンテンツに合わせて調整されることを意味します
• フルとは幅 = 100% (全幅) を意味します -> 各タブの幅は要素で埋められます

4。 背景: 各タブの背景色を設定します。

5. 国境: 境界線のスタイルをカスタマイズします。

6. タブの配置: Tab 要素内のすべてのタブ項目の配置。

• レイアウト上→水平配置。
• レイアウト左/右 → 垂直配置。

7. ホバー効果: 各タブにホバーしたときの効果の設定。

8. アクティブ状態: アクティブなときの各タブの設定。

サイズ

1.幅

幅 = 1200px: タブを配置して新しいセクションを作成する場合、またはセクション1の列内に配置する場合

幅 = 100% (全幅):タブが他の要素内に配置されている場合

幅のオプション: 幅入力フィールドのドロップダウン ボタンをクリックすると、幅のオプションを含むドロップダウン メニューが下に表示されます。 

• デフォルトは幅 = 1200px です
• フルとは、幅 = 100% (全幅) を意味します。

2.パディング

• 要素のパディング。
• パディングを追加すると、要素の実際のサイズと要素の端の間の間隔が広がります。

経歴

1 色

入力コンボをクリックするとカラーピッカーが開き、デフォルトの色 #DDDDDD が追加されます。

2。 画像

入力コンボをクリックすると、画像ピッカーが開き、デフォルトの画像が追加されます。

形状

これらのシェイプ設定は、アコーディオンのラッパー用です。 

• ボーダー
• コーナー
• Shadow

表示オプション

• デフォルトでアクティブ: タブ項目の 1 つをデフォルトで最初に選択されるように設定します。

整列

• 要素の幅が 100% の場合、配置は無効になります。
• そうでない場合、デフォルトの配置オプションは配置されます センター。

2. 詳細設定タブ

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.