アイテムリスト要素の右から左へのレイアウトを作成する方法

デフォルトでは、 アイテムリスト レイアウトでは、アイコンが左側に、テキストが右側に表示されます。簡単なCSS調整でレイアウトを反転させ、アイコンを右側に、テキストを右揃えにすることができます。

これは特に次の場合に便利です:

• RTL言語設計
• 代替リストレイアウト
• モダンなUIスタイル
• 視覚的にユニークな機能リストを作成する

ステップ1：アイテムリスト設定を開きます

GemPagesエディターで：

• 上にカーソルを合わせる アイテムリスト カスタマイズしたい要素
• 要素を右クリックします
• 選択 カスタムコード

これにより、特定のアイテムリスト要素にのみカスタムCSSを適用できます。

ステップ2：RTLレイアウトコードを追加する

以下のコードをカスタムコードセクションに貼り付けてください。

.ElementClass .gp-icon-list-wrapper {

  フレックス方向: 行逆方向;

}

.ElementClass .gp-icon-list-wrapper [data-gp-text] {

 テキスト整列：右;

}

ステップ3：要素クラスを置き換える

交換する .ElementClass アイテムリスト要素の実際のクラスIDを使用します。

ヒント：

• アラビア語、ヘブライ語、または右から左への記述（RTL）をモチーフにしたデザインには、このレイアウトを使用してください。
• 視覚的なバランスを向上させるために、カスタム間隔やアイコンのスタイル設定と組み合わせる
• コードを適用した後、デスクトップとモバイルデバイスの両方でレイアウトをプレビューします。

ステップ4：保存して公開する

終了したら:

• 変更を保存します
• ページを公開または更新する