ウィジェットセレクターについて学びたいですか? Elementor ?この記事を読み続けてください。
Web デザインの世界では、ユニークでプロフェッショナルなユーザー エクスペリエンスを作成するには、ページ上のすべての要素をきめ細かくカスタマイズすることが不可欠です。 WordPress で最も人気のあるページビルダーの 1 つである Elementor は、カスタマイズしたい要素を正確にターゲットにできる強力な機能、つまりウィジェット セレクターを提供します。
Elementor のウィジェット セレクターを使用するとスタイルを適用できます カスタムCSS サイトの特定の要素にアクセスできるため、各ウィジェットの外観と動作を完全に制御できます。色の変更、余白の調整、動的な視覚効果の作成など、デザインの細部を微調整するためにウィジェット セレクターは必要なツールです。
この記事では、Elementor のウィジェット セレクターとは何か、高度なカスタマイズにウィジェット セレクターが不可欠である理由、サイトの外観を改善するためにウィジェット セレクターを効果的に使用する方法について詳しく説明します。この機能を活用して独自のレイアウトを作成し、ユーザー エクスペリエンスを最適化し、すべてのページで視覚的な一貫性を維持する方法を学びます。
サイトのカスタマイズを次のレベルに引き上げ、Elementor のウィジェット セレクターの複雑さをマスターする準備ができている場合は、読み続けてください。
コンテンツ
Elementor のウィジェット セレクターは、ウィジェットのカスタマイズと微調整に不可欠なツールです。あなたのウェブサイトの外観。カスタム CSS で使用すると、ページのデザインの精度と柔軟性が向上します。 Elementor でウィジェット セレクターを使用する説得力のある理由をいくつか示します。
1. パーソナライゼーションの精度
ウィジェット セレクターを使用すると、ページ上の特定の要素をターゲットにすることができ、その外観をきめ細かく制御できます。グローバル設定とは異なり、他の要素に影響を与えることなく、選択したウィジェットにのみスタイルを適用できます。これにより、特定のニーズに合わせた独自のデザインを作成できます。
2. 設計の柔軟性
ウィジェット セレクターを使用すると、色、余白、フォント、背景など、デザインのさまざまな側面を簡単にカスタマイズできます。この柔軟性は、複雑で美しいレイアウトを作成するために非常に重要です。ブランドの要件や特定のデザイン目標を満たすために、各ウィジェットに異なるスタイルを適用できます。
3. ユーザーエクスペリエンスの最適化
ウィジェット セレクターを使用すると、各要素がすべてのデバイスで最適に表示されるようになり、ユーザー エクスペリエンスを向上させることができます。たとえば、モバイル バージョン、タブレット、デスクトップ画面のスタイルを調整して、訪問者にとってスムーズで楽しいナビゲーションを確保できます。
4. 時間を節約します
ウィジェット セレクターを使用すると、ターゲットを絞った変更を迅速に行うことができるため、カスタマイズ プロセスが簡素化されます。複数の調整を行ったり、グローバル設定を変更したりすることなく、ウィジェットのスタイルを調整できます。これにより、特に多くの要素を含むサイトで作業する場合に時間が節約されます。
5. 設計の一貫性
セレクターを使用すると、さまざまなウィジェット間でスタイルを適用する際の一貫性が確保されます。特定の CSS ルールを設定することで、サイト全体で一貫した外観を維持できます。この一貫性は、ブランドのビジュアル アイデンティティを強化し、一貫したユーザー エクスペリエンスを提供するために不可欠です。
6. 高度なインタラクション制御
セレクターは、ホバー効果やアニメーションなどのウィジェットとのユーザー操作の管理にも役立ちます。追加のプラグインを必要とせずに、注目を集めてサイトのインタラクティブ性を向上させる動的な視覚効果を作成できます。
7. 簡単なデバッグとメンテナンス
ウィジェット セレクターを使用すると、サイトのデバッグと保守が容易になります。変更を加えたり問題を解決したりする必要がある場合、特定のウィジェットに適用されているスタイルをすばやく見つけて調整できるため、更新と修正のプロセスが簡素化されます。
要約すると、Elementor ウィジェット セレクターは、正確なカスタマイズ、設計の柔軟性、ユーザー エクスペリエンスの最適化を提供します。その可能性を活用することで、時間を節約し、サイト全体の一貫性を確保しながら、視覚的に魅力的で機能的に効果的な Web サイトを作成できます。
ボタンのアイコンとテキストに異なるサイズを適用するとします。 デフォルトの設定オプションでは、ボタン アイコンとテキストの間に異なるサイズを設定できないため、カスタム CSS を使用してこれを実現できます。 アイコンまたはテキストをターゲットにして、カスタム CSS を適用できます。
まず、ターゲットにしたい要素のセレクターを選択します (たとえば、ボタン アイコン)。 要素設定パネルで、タブに移動します 高度な ブロックを開きます カスタムCSS.
入力 selector [selector name] {} カスタム CSS フィールドで。
これが例です。
次に、中括弧内に CSS コンテンツ (宣言) を追加します。
これが例です。
レマルク： すべての Elementor ウィジェットには親要素 ( wrapper ) があります。 入る selector {} (セレクター名なし) は、ラッパーをターゲットにすることを意味します。
アコーディオン
| ウィジェット | .elementor-アコーディオン |
| アコーディオンのタイトル | .elementor-accordion-title |
| アコーディオンの説明 | .elementor-tab-content |
| アコーディオン アイコン 開く | .elementor-accordion-icon |
| アコーディオン アイコン 閉じた | .elementor-accordion-icon-closed |
警告
| ウィジェット | .elementor-alert |
| アラートのタイトル | .elementor-alert-title |
| アラートの説明 | .elementor-alert-description |
| アイコンを閉じる | .elementor-alert-dismiss |
アニメーションの見出し
| ウィジェット | .elementor-見出し |
| 静的テキスト | .elementor-headline-plain-text |
| ダイナミックテキスト | .elementor-headline-dynamic-wrapper |
アーカイブの説明
| アーカイブ テキスト | .elementor-Heading-title |
アーカイブ投稿
| ウィジェット | .elementor-ウィジェットコンテナ |
| 投稿アイテム | .elementor-grid-item |
| 注目の写真 | .elementor-post__サムネイル |
| カードスキンのバッジ | .elementor-post__バッジ |
| カードスキンのアバター | img.アバター |
| テキストコンテンツエリア | .elementor-post__text |
| ポストタイトル | .elementor-post__title |
| ポスト抜粋 | .elementor-post__excerpt |
| 続きを読む | .elementor-post__続きを読む |
| 投稿メタエリア | .elementor-post__meta-data |
| 投稿日 | .elementor-post-date |
| 投稿者 | .elementor-投稿者 |
| 投稿時間 | .elementor-post-time |
| コメントを投稿 | .elementor-ポストアバター |
| ページネーション | .elementor-ページネーション |
| 前のラベル | .ページ番号.prev |
| 次のラベル | .ページ番号.次へ |
| ページネーション番号 | .ページ番号 |
| アクティブなページ番号 | .ページ番号.現在 |
| さらにボタンをロード | .elementor-button-link |
| もっと読み込むボタンのアイコン | .elementor-button-icon |
著者ボックス
| ウィジェット | .elementor-作者ボックス |
| アバター | .elementor-author-box__アバター |
| 著者名 | .elementor-author-box__name |
| 著者紹介 | .elementor-author-box__bio |
| アーカイブボタン | .elementor-author-box__button |
基本ギャラリー
| ウィジェット | .elementor-image-gallery |
| ギャラリーアイテム | .gallery-item |
| キャプション | .wp-キャプション-テキスト |
BLOCKQUOTE
| ウィジェット | .elementor-blockquote |
| ブロック引用コンテンツ | .elementor-blockquote__content |
| ブロック引用の作成者 | .elementor-blockquote__作者 |
| つぶやきアイコン | .elementor-blockquote__つぶやきボタン |
| ツイートのラベル | .elementor-blockquote__tweet-label |
| ウィジェット | .elementor-button |
| ボタンのテキスト | .elementor-button-text |
| ボタンアイコン | .elementor-button-icon |
実施要請
| ウィジェット | .elementor-cta |
| ヘッダー画像 | .elementor-cta__bg |
| リボン | .elementor-ribbon |
| リボン テキスト | .elementor-ribbon-inner |
| コンテンツのタイトル | .elementor-cta__title |
| コンテンツの説明 | .elementor-cta__description |
| コンテンツボタン | .elementor-cta__button |
カウントダウン
| ウィジェット | .elementor-カウントダウン-ラッパー |
| 日 | .elementor-countdown-days |
| HOURS | .elementor-カウントダウン時間 |
| MINUTES | .elementor-カウントダウン-分 |
| SECONDS | .elementor-カウントダウン秒 |
| カウントダウン ラベル | .elementor-カウントダウン-ラベル |
カウンター
| ウィジェット | .elementor-カウンター |
| 番号のプレフィックス | .element-counter-number-prefix |
| 数 | .elementor-counter-number |
| 番号サフィックス | .element-counter-number-suffix |
| イベントタイトル | .elementor-counter-title |
分配器
| ウィジェット | .elementor-divider |
| セパレータ | .elementor-divider-separator |
| テキスト/アイコン要素 | .elementor-divider__element |
フリップボックス
| ウィジェット | .elementor-フリップボックス |
| フロントコンテナ | .elementor-flip-box__front |
| バックコンテナ | .elementor-flip-box__back |
| コンテンツコンテナ | .elementor-flip-box__layer__inner |
| コンテンツのタイトル | .elementor-flip-box__layer__title |
| コンテンツの説明 | .elementor-flip-box__layer__description |
| コンテンツボタン | .elementor-flip-box__button |
| ウィジェット | .elementor-form |
| ステップコンテナ | .e-form__indicators |
| ステップ数 | .e-form__indicators__indicator |
| フィールドラベル | .elementor-field-label |
| フィールド テキスト | .elementor-field-textual |
| テキスト フィールド ラベル | .elementor-field-type-text |
| テキスト エリア フィールド ラベル | .elementor-field-type-textarea |
| メール フィールド ラベル | .elementor-field-type-email |
| URL フィールド ラベル | .elementor-field-type-url |
| 電話フィールド ラベル | .elementor-field-type-tel |
| 無線フィールド ラベル | .elementor-field-type-radio |
| フィールド ラベルの選択 | .elementor-field-type-select |
| チェックボックス フィールド ラベル | .elementor-field-type-checkbox |
| フィールド ラベルの承認 | .elementor-field-type-acceptance |
| 日付フィールド ラベル | .elementor-field-type-date |
| 時間フィールド ラベル | .elementor-field-type-time |
| 数値フィールド ラベル | .element-field-type-number |
| ファイル アップロード フィールド ラベル | .elementor-field-type-upload |
| 次へボタン | e-form__buttons__wrapper__button-next |
| 前のボタン | .e-form__buttons__wrapper__button-前の |
| 送信ボタン | .elementor-button |
ギャラリー
| ギャラリーのタイトル (複数のギャラリーの場合) | .elementor-gallery-title |
| ギャラリーアイテム | .elementor-gallery-item |
| 説明 (オーバーレイ上) | .elementor-gallery-item__description |
見出し
| ウィジェット | .elementor-Heading-title |
アイコン
アイコンボックス
| ウィジェット | .elementor-icon-box-wrapper |
| アイコン | .elementor アイコン |
| コンテンツコンテナ | .elementor-icon-box-content |
| コンテンツのタイトル | .elementor-icon-box-title |
| コンテンツの説明 | .elementor-icon-box-description |
アイコン一覧
| リストアイコン | .elementor-icon-list-icon |
| リストテキスト | .elementor-icon-list-text |
画像
| 画像 | img |
| キャプション | .wp-キャプション-テキスト |
画像ボックス
| 画像 | .elementor-image-box-img |
| テキストコンテナ | .elementor-image-box-content |
| コンテンツのタイトル | .elementor-image-box-title |
| コンテンツの説明 | 要素画像ボックスの説明 |
イメージカルーセル
| 画像コンテナ | .スワイパースライド |
| ピクチャーアイテム | .swiper-スライドイメージ |
| ページネーションコンテナ | .swiper-ページネーション |
| ドットのページネーション | .swiper-pagination-bullet |
| 前のアイコン | .elementor-swiper-button-prev |
| 次へ | .elementor-swiper-button-next |
| 画像キャプション | .elementor-image-carousel-caption |
| メディアアイテム | .elementor-carousel-image |
| メディア アイテム オーバーレイ | .elementor-carousel-image-overlay |
| ドットページネーション | .swiper-ページネーション-分数 |
| 前のボタン | .eicon-chevron-左 |
| 次へボタン | .eicon-chevron-right |
| 分数ページネーション | .swiper-ページネーション-分数 |
| プログレスバーのページネーション | .swiper-pagination-progressbar |
| プログレスバーのページネーションの塗りつぶし | .swiper-pagination-progressbar-fill |
| モバイル メニュートグル | .elementor-menu-toggle |
| モバイルメニューアイコン | .eicon-メニューバー |
| 通常メニュー | .elementor-nav-メニュー |
| 落ちます | .elementor-nav-menu–ドロップダウン |
| サブメニュー付きのメニュー項目 | .elementor-item.has-submenu |
| サブメニュー項目 | .elementor サブアイテム |
| ウィジェット | .elementor-支払いボタン |
| PayPal ボタン アイコン | .elementor-button-icon |
| PayPal ボタンのテキスト | .elementor-button-text |
ポートフォリオ
| ポートフォリオ品目 | .elementor-ポートフォリオ-アイテム |
| オーバーレイ上のポートフォリオ アイテム | .elementor-portfolio-item__overlay |
| オーバーレイ タイトル | .elementor-portfolio-item__title |
| ポートフォリオフィルター | .elementor-portfolio__filter |
| 返信のタイトル | .コメント返信タイトル |
| どのようにフォームエリア | .コメントフォーム |
| Comment Form | .comment-form-comment |
| 送信ボタン | .フォーム送信 |
投稿情報
| ウィジェット | .elementor-post-info |
| アバター | .elementor-アバター |
| アイコン一覧 | .elementor-icon-list-icon |
| アイコンのテキスト | .elementor-icon-list-text |
投稿ナビゲーション
| ウィジェット | .elementor-ポストナビゲーション |
| 前のアイコン | .post-navigation__arrow-prev |
| 前のラベル | .post-navigation__prev–label |
| 前の投稿のタイトル | .post-navigation__prev–タイトル |
| 次のアイコン | .post-navigation__arrow-next |
| 次のラベル | .post-navigation__next–label |
| 次の投稿タイトル | .post-navigation__next–title |
投稿
| 投稿アイテム | .elementor-post |
| 注目の写真 | .elementor-post__サムネイル |
| カードスキンのバッジ | .elementor-post__バッジ |
| カードスキンのアバター | img.アバター |
| テキストコンテンツエリア | .elementor-post__text |
| ポストタイトル | .elementor-post__title |
| ポスト抜粋 | .elementor-post__excerpt |
| 続きを読む | .elementor-post__続きを読む |
| 投稿メタエリア | .elementor-post__meta-data |
| 投稿日 | .elementor-post-date |
| 投稿者 | .elementor-投稿者 |
| 投稿時間 | .elementor-post-time |
| コメントを投稿 | .elementor-ポストアバター |
| ページネーション | .elementor-ページネーション |
| 前のラベル | .ページ番号.prev |
| 次のラベル | .ページ番号.次へ |
| ページネーション番号 | .ページ番号 |
| アクティブなページ番号 | .ページ番号.現在 |
| さらにボタンをロード | .elementor-button-link |
| もっと読み込むボタンのアイコン | .elementor-button-icon |
ポストタイトル
| ウィジェット | .elementor-Heading-title |
価格表
| ウィジェット | .elementor-price-list |
| リストアイテム | .elementor-price-list-item |
| リスト アイテムの画像 | .elementor-price-list-image |
| リスト項目テキスト | .elementor-価格リスト-テキスト |
| リスト アイテム ヘッダー | .elementor-price-list-header |
| リスト アイテムのタイトル | .elementor-価格リスト-タイトル |
| リスト アイテム セパレータ | .elementor-価格リスト-区切り文字 |
| リストアイテムの価格 | .elementor-price-list-price |
| リスト項目の説明 | .elementor-price-list-description |
価格表
| ウィジェット | .elementor-price-table |
| テーブルヘッダー | .elementor-price-table__header |
| テーブル ヘッダー タイトル | .elementor-price-table__Heading |
| テーブル ヘッダーの説明 | .elementor-price-table__subHeading |
| 価格 | .elementor-price-table__price |
| 通貨 | .elementor-price-table__currency |
| 価格の後の番号 | .elementor-price-table__after-price |
| 価格期間 | .elementor-price-table__期間 |
| 機能一覧エリア | .elementor-price-table__features-list |
| 機能一覧項目 | .elementor-price-table__feature-inner |
| テーブルフッター | .elementor-price-table__footer |
| テーブル フッター ボタン | .elementor-price-table__button |
| テーブル フッター テキスト | .elementor-price-table__Additional_info |
| リボン | .elementor-price-table__ribbon |
| インナーリボン | .elementor-price-table__ribbon-inner |
プログレスバー
| プログレスバー | .elementor-progress-bar |
| 進捗の背景 | .elementor-progress-wrapper |
| 進捗タイトル | .elementor-タイトル |
| 進行中のテキスト | .elementor-progress-text |
| 進捗率 | .elementor-進捗率 |
プログレストラッカー
| ウィジェット | .elementor-scrolling-tracker |
| 進捗 | .current-progress-percentage |
レビュー
| ウィジェット | .elementor-swiper |
| レビュー項目 | .スワイパースライド |
| ヘッダーの確認 | .elementor-testimonial__header |
| 画像レビュアー | .elementor-testimonial__image |
| レビュアー名 | .elementor-testimonial__name |
| レビュアーの役職 | .elementor-testimonial__title |
| 証言の内容 | .elementor-testimonial__content |
| 推薦文 | .elementor-testimonial__text |
| ドットページネーション | .swiper-pagination-bullet |
| 分数ページネーション | .swiper-ページネーション-分数 |
| 分数ページネーション現在 | .swiper-pagination-current |
| 分数 ページネーション 合計 | .swiper-pagination-total |
| プログレスバーのページネーション | .swiper-pagination-progressbar |
| プログレスバーのページネーションの塗りつぶし | .swiper-pagination-progressbar-fill |
| 前のボタン | .eicon-chevron-左 |
| 次へボタン | .eicon-chevron-right |
| ボタン項目 | .elementor-share-btn |
| ボタンアイコン | .elementor-share-btn__icon |
| ボタンのテキスト | .elementor-share-btn__text |
スライド
| ウィジェット | .elementor-slides-wrapper |
| コンテンツエリア | .swiper-slide-contents |
| コンテンツの見出し | .elementor-slide-Heading |
| コンテンツの説明 | .elementor-slide-description |
| コンテンツボタン | .elementor-スライドボタン |
| ドットページネーション | .swiper-pagination-bullet |
| 前のボタン | .eicon-chevron-左 |
| 次へボタン | .eicon-chevron-right |
社会のアイコン
| ウィジェット | .elementor-social-icons-wrapper |
| アイコンアイテム | .elementor-social-icon |
星評価は
| ウィジェット | .elementor-star-rated__wrapper |
| 評価タイトル | .elementor-star-rated__title |
| スターアイコンエリア | .elementor-star-評価 |
| いっぱいになった星のアイコン | .elementor-star-full |
| 半分塗りつぶされた星のアイコン | .elementor-star-5 |
| 空の星のアイコン | .elementor-星空 |
目次
| ウィジェット | .elementor-ウィジェットコンテナ |
| 目次ヘッダー | .elementor-toc__header |
| ToC ヘッダーのタイトル | .elementor-toc__header-title |
| 展開ボタン | .elementor-toc__toggle-button–展開 |
| 折りたたみボタン | .elementor-toc__toggle-button–展開 |
| 目次本文 | .elementor-toc__body |
| 目次リスト項目 | .elementor-toc__list-item |
| 目次トップレベル | .elementor-toc__list-item-text.elementor-toc__トップレベル |
タブ
| ウィジェット | .elementor-tabs |
| タブのタイトル | .elementor-tab-title |
| タブのコンテンツ | .elementor-tab-content |
Testimonial
| ウィジェット | .elementor-testimonial-wrapper |
| 証言の内容 | .elementor-証言内容 |
| 証言メタ | .elementor-証言-メタ |
| アバターの声 | .elementor-証言画像 |
| 推薦状の名前と役職 | .elementor-証言-詳細 |
| お名前 | .elementor-testimonial-name |
| 推薦状の役職 | .elementor-testimonial-job |
紹介状カルーセル
| ウィジェット | .elementor-ウィジェットコンテナ |
| 証言スライドアイテム | .elementor-証言 |
| 証言の内容 | .elementor-testimonial__content |
| 証言メタ | .elementor-testimonial__footer |
| アバターの声 | .elementor-testimonial__image |
| 推薦状の名前と役職 | .elementor-testimonial__cite |
| お名前 | .elementor-testimonial__name |
| 推薦状の役職 | .elementor-testimonial__title |
| ドットページネーション | .swiper-pagination-bullet |
| 分数ページネーション | .swiper-ページネーション-分数 |
| 分数ページネーション現在 | .swiper-pagination-current |
| 分数 ページネーション 合計 | .swiper-pagination-total |
| プログレスバーのページネーション | .swiper-pagination-progressbar |
| プログレスバーのページネーションの塗りつぶし | .swiper-pagination-progressbar-fill |
| 前のボタン | .eicon-chevron-左 |
| 次へボタン | .eicon-chevron-right |
テキストエディタ
| ウィジェット | .elementor-テキストエディタ |
トグル
| ウィジェット | .elementor-トグル |
| トグルアイテム | .elementor-toggle-item |
| アイテムのタイトルを切り替え | .elementor-tab-title |
| アイテムの内容を切り替え | .elementor-tab-content |
| トグルアイコン | .elementor-toggle-icon |
| トグル アイコン 閉じている | .elementor-toggle-icon-closed |
| トグル アイコン 開く | .elementor-toggle-icon-opened |
Elementor は各ウィジェットに多くのスタイル設定オプションを提供しますが、カスタム CSS を使用してそれを超えることができます。 カスタム CSS を介してカスタム スタイルをウィジェット (またはその要素) に適用するには、関連するウィジェットのセレクターを知る必要があります。
他の ressources Elementor：
ライブ ページのウィジェットを調べるだけで、そのセレクターを見つけることができます。 時間を節約するために、Elementor のウィジェット セレクターのリストを作成したので、すべてのウィジェットを自分で検査する必要はありません。
Elementor の無料版で CSS セレクターを使用できますか?
はい、無料版では、カスタマイズ パネルからカスタム CSS を追加できます。 ワードプレスのテーマ.
まとめ
Elementor でカスタム ウィジェット セレクターを使用すると、比類のない精度で Web サイトのデザインを調整できるようになります。利用可能なさまざまなタイプのセレクターを理解し、それらを適用する方法を知ることで、ウィジェットのあらゆる側面をカスタマイズして、クリエイティブなビジョンに完全に一致させることができます。
余白、色、その他のウィジェット固有のスタイルを調整する場合でも、セレクターを使用すると、これらの変更を簡単に行うことができる柔軟性が得られます。これらのセレクターを効果的に使用すると、サイトの外観が向上するだけでなく、一貫したプロフェッショナルなユーザー エクスペリエンスにも貢献します。
これらのツールをマスターすると、コンテンツのプレゼンテーションが最適化され、ページ上の各要素の視覚的な効果が最大化されます。 Elementor が提供するすべての可能性を発見するために、さまざまなセレクターを躊躇せずに試してください。これらの調整によってページがどのように変化し、より魅力的なユーザー エクスペリエンスが提供されるかがわかります。
それで ！ Elementor ウィジェット セレクターのリストを紹介しました。 そこに着く方法について懸念がある場合は、以内にお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
