カルーセルナビゲーションドットを透明にして白い枠線をつける方法 

GemPagesのカルーセル要素にある非アクティブなナビゲーションドットは、デフォルトでは灰色で表示され、枠線はありません。よりすっきりとしたモダンな外観にしたい場合は、カスタムCSSを使用してこれらのドットを透明にし、白い枠線を追加することができます。

このガイドでは、手順を一つずつ説明します。このガイドに従うと、カルーセルの非アクティブなナビゲーションドットは次のようになります。

• 透明な背景を持つ
• 白い枠線を表示する
• よりすっきりとした、ミニマルなデザインを維持する

ステップ1：カルーセル要素にカスタムCSSを追加する

• ページを開く GemPages エディター
• 以下を行うには、 カルーセル要素
• 右クリックして選択 カスタムコード

• カスタムコードパネルに、以下のCSSを貼り付けてください。

ElementClass .gp-carousel-dot-container button {

 border: 1px solid #fff;

}

• 交換する 要素クラス カルーセル要素の実際のクラスを使用して

ステップ2：非アクティブなナビゲーションドットを透明に変更する

CSSを使用する代わりに、エディターでこの設定を直接更新することもできます。

• 以下を行うには、 カルーセル要素
• に行きます ドット 設定パネル
• 見つける 非アクティブ カラー オプション
• 色を 高い透明性

これにより、非アクティブなドットのデフォルトの灰色の背景が削除されます。