高度なリスト

高度なリスト要素とは何ですか?

GemPages は、コンテンツをリストに表示するための 2 つの要素を提供します。

• アイテムリスト要素: シンプルなリスト用に設計されています。各項目は アイコンを押します。は、GemPagesのアイコンライブラリから選択するか、独自のアイコンをアップロードできます。この要素は、製品のメリット、機能、簡単なハイライトなど、短いポイントを表示するのに適しています。
• 高度なリスト要素: アイコンに限定されるのではなく、 各リスト項目の横にある画像レイアウトをより視覚的にコントロールできます。画像を使った製品機能の紹介、ステップバイステップガイド、視覚的な比較など、よりリッチなビジュアル表現が求められるユースケースに最適です。 

ページに高度なリスト要素を追加する方法

ステップ 1: GemPagesダッシュボード、ページを選択してエディターに入ります。

ステップ 2: エディター内で、 高度なリスト 要素の下 コンテンツリスト セクション。ページ上の目的の場所にドラッグ アンド ドロップします。

要素をクリックすると、左側のサイドバーに設定が表示されます。 

設定タブを構成する

1. アイテム管理

このセクションでは リスト項目を追加、削除、または複製する.

• に 新しいアイテムを追加する、クリック 複製アイコン 既存のアイテムの横に表示されます。新しいアイテムは元のアイテムのすぐ下に表示されます。
• に アイテムを削除する、クリック ゴミ箱アイコン 削除したいアイテムをクリックして、削除を確認します。

2. アイテムの間隔

その アイテム間隔 リスト内の各項目間の垂直方向の間隔を制御します。スライダーまたは数値を入力して間隔を調整します。

• デフォルト: 12px
• 間隔を大きくするとリストが読みやすくなりますが、間隔を小さくするとよりコンパクトなデザインになります。

3. アイテムスタイル

アイコンとテキストのギャップ : アイコン (または画像) とテキスト間の水平方向のスペースを調整します。

• デフォルト: 12px
• よりオープンなレイアウトにするには隙間を増やし、よりタイトな外観にするには隙間を減らします。

パディング: 各リスト項目の周囲にスペースを追加します。

• 詳しくはこちら パディングを追加する 必要なピクセル数を入力します。
• これにより、コンテンツがアイテム ボックスの端に触れなくなります。

経歴: アイテムの背後に色付きの背景を追加できます。

境界線、角、影: これらのオプションを使用すると、アイテム コンテナーのスタイルを設定できます。

• 境界： スタイル (実線、破線、点線)、太さ、色を選択します。
• コーナー： 角を丸くするには、border-radius を調整します。
• 影： 影を追加して深みを作ったり、アイテムを強調したりします。

4。 サイズ

幅（Width）: 要素内のコンテンツ ボックスの幅を制御します。

• コンテンツに合わせる: ボックスはコンテンツのサイズに合わせて自動的に調整されます。
• フル： ボックスはコンテナの幅の 100% まで拡張されます。

パディング: コンテンツボックスの端と内部のコンテンツ間の間隔を調整します。クリック パディングを追加する 希望する値をピクセル単位で入力します。

アレンジ: ボックス内のコンテンツを配置します。 左派, センターまたは 右派.

• 幅が自動に設定されている場合、この設定は非表示になります。
• デフォルトの配置は左です。

5。 背景

背景を設定することもできます 詳細リスト要素全体:

• 色：

• イメージ：

6。 シェイプ

• 境界： 要素全体の境界線のスタイル、太さ、色を設定します。
• コーナー： border-radius を使用して要素の角を丸めます。
• 影： リストを視覚的に目立たせるために影の効果を適用します。

ページ上での要素の配置方法を指定します。左揃え、中央揃え、右揃えの3つのオプションから選択できます。

詳細タブを設定する

その 詳細設定タブ さらなるカスタマイズが可能になります:

• 追加 カスタムCSS デフォルト設定では利用できない方法でリストのスタイルを設定します。
• Adjust デバイスごとの可視性 デスクトップ、タブレット、モバイルでリストを非表示または表示します。
• Apply アニメーション またはインタラクション効果を使用して、コンテンツをより動的にします。

より詳細なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.