Wilt u de widgetkiezers vinden Elementor ?
Een van de functies die beschikbaar zijn op Elementor Pro
Aangepaste stijl toevoegen via aangepaste CSS aan een bepaalde widget Elementor , moet u de selector van de bijbehorende widget kennen. We hebben de lijst met widgetkiezers verzameld Elementor om uw werk te vergemakkelijken.
Elke Elementor-widget - en zijn elementen - heeft een CSS-selector die u kunt gebruiken om de bijbehorende widget te targeten wanneer u aangepaste CSS wilt toevoegen om een ​​bepaalde stijl te bereiken. U kunt de selector vinden door de widget te inspecteren waaraan u de aangepaste CSS wilt toevoegen.
Aangezien het inspecteren van een widget alleen op een live-pagina kan, duurt het lang om elke widget te inspecteren. Dat is de reden waarom we deze lijst hebben gemaakt.
Een selector gebruiken
Stel dat u een andere grootte wilt toepassen tussen pictogram en tekst op een knop. Aangezien u met de standaardinstellingsoptie geen verschillende grootte tussen het knoppictogram en de tekst kunt instellen, kunt u dit bereiken via de aangepaste CSS. U kunt een pictogram of tekst targeten om aangepaste CSS toe te passen.
Selecteer eerst de selector van het element dat u wilt targeten (bijvoorbeeld het knoppictogram). Ga in het paneel met elementinstellingen naar het tabblad vergevorderd en open het blok Aangepaste CSS .
Enter selector [selector name] {} in het aangepaste CSS-veld.
Hier is het voorbeeld.
Voeg dan uw . toe inhoud CSS (declaratie) tussen accolades.
Hier is het voorbeeld.
Remarque: Elke Elementor-widget heeft een bovenliggend element ( wrapper ). Binnenkomen selector {} (zonder de naam van de selector) betekent de wrapper targeten.
Elementor Widget Selector Lijst
Accordeon
de widget .elementor-accordeon Accordion Titel .elementor-accordeon-titel Accordeon Beschrijving .elementor-tab-inhoud Accordeonpictogram openen .elementor-accordeon-pictogram Accordeonpictogram gesloten .elementor-accordeon-pictogram-gesloten
Alarm
de widget .elementor-waarschuwing Waarschuwingstitel .elementor-alert-titel Beschrijving van waarschuwing .elementor-alert-beschrijving Icoon afwijzen .elementor-alert-afwijzen
Geanimeerde kop
de widget .elementor-kop Statische tekst .elementor-kop-platte-tekst Dynamische tekst .elementor-kop-dynamische-wrapper
Archiefbeschrijving
Tekst archiveren .elementor-heading-titel
Berichten archiveren
de widget .elementor-widget-container Artikel posten .elementor-raster-item Uitgelichte Afbeelding .elementor-post__thumbnail Badge op de huid van de kaart .elementor-post__badge Avatar op Kaarten Skin img.avatar Tekstinhoudsgebied .elementor-post__tekst Bericht Titel .elementor-post__titel Post-uittreksel .elementor-post__uittreksel Lees meer .elementor-post__lees meer Metagebied plaatsen .elementor-post__metadata Post-datum .elementor-post-datum Post auteur .elementor-post-auteur Post tijd .elementor-na-tijd Post Commentaar .elementor-post-avatar Opdelen .elementor-paginering Vorig etiket .pagina-nummers.vorige volgende-label .pagina-nummers.volgende Pagineringsnummer .paginanummers Actief pagineringsnummer .paginanummers.huidig Knop Meer laden .elementor-knop-link Laad meer knoppictogram .elementor-knop-pictogram
Auteur Box
de widget .elementor-auteur-box avatar .elementor-auteur-box__avatar Auteur naam .elementor-auteur-box__name auteur Bio .elementor-auteur-box__bio Archief knop .elementor-auteur-box__button
Basis galerij
de widget .elementor-afbeelding-galerij Galerij-item .galerij-item Onderschrift .wp-bijschrift-tekst
Blockquote
de widget .elementor-blockquote Blockquote-inhoud .elementor-blockquote__content Blockquote Auteur .elementor-blockquote__auteur Tweet-pictogram .elementor-blockquote__tweet-knop Tweet-label .elementor-blockquote__tweet-label
de widget .elementor-knop Knoptekst .elementor-knop-tekst Knop Icoon .elementor-knop-pictogram
Oproep tot actie
de widget .elementor-cta Header Afbeelding .elementor-cta__bg lint .elementor-lint Linttekst .elementor-lint-innerlijke Inhoudstitel .elementor-cta__titel Inhoudsbeschrijving .elementor-cta__beschrijving Inhoud knop .elementor-cta__knop
Countdown
de widget .elementor-countdown-wrapper dagen .elementor-countdown-dagen uren .elementor-countdown-uren minuten .elementor-countdown-minuten seconden .elementor-countdown-seconden Aftellabel .elementor-aftellabel
Counter
de widget .elementor-teller Nummervoorvoegsel .element-teller-nummer-voorvoegsel Telefoon Nummer .elementor-teller-nummer Nummerachtervoegsel .element-teller-nummer-achtervoegsel Titel .elementor-tegentitel
verdeler
de widget .elementor-verdeler Separator .elementor-divider-separator Tekst-/pictogramelement .elementor-verdeler__element
Flip Box
de widget .elementor-flipbox Voorcontainer .elementor-flip-box__front Terug Container .elementor-flip-box__back Inhoudscontainer .elementor-flip-box__laag__inner Inhoudstitel .elementor-flip-box__layer__titel Inhoudsbeschrijving .elementor-flip-box__laag__beschrijving Inhoud knop .elementor-flip-box__knop
de widget .elementor-vorm Stap container .e-formulier__indicatoren Stappen nummer .e-formulier__indicatoren__indicator veld Label .elementor-veld-label Veldtekst .elementor-veld-tekstueel Tekstveldlabel .elementor-veld-type-tekst Tekstgebied Veldlabel .elementor-veld-type-tekstgebied E-mailveldlabel .elementor-veld-type-e-mail URL-veldlabel .elementor-veld-type-url Telefoonveldlabel .elementor-veld-type-tel Label radioveld .elementor-veld-type-radio Selecteer veldlabel .elementor-veld-type-selecteren Selectievakje veldlabel .elementor-veld-type-checkbox Acceptatie van veldlabels .elementor-field-type-acceptatie Datumveldlabel .elementor-veld-type-datum Tijdveldlabel .elementor-veld-type-tijd Nummer veldlabel .element-veld-type-nummer Veldlabel voor bestandsupload .elementor-veld-type-upload Volgende knop e-formulier__knoppen__wrapper__knop-volgende Vorige knop .e-form__buttons__wrapper__button-vorige Button Submit .elementor-knop
Gallery
Galerijtitel (voor meerdere galerijen) .elementor-galerij-titel Galerij-item .elementor-galerij-item Beschrijving (op overlay) .elementor-gallery-item__beschrijving
Titel
de widget .elementor-heading-titel
icon
de widget .elementor-icoon
Pictogram Box
de widget .elementor-icon-box-wrapper icon .elementor-icoon Inhoudscontainer .elementor-icon-box-inhoud Inhoudstitel .elementor-icon-box-titel Inhoudsbeschrijving .elementor-icon-box-beschrijving
Lijst met pictogrammen
Lijst Icoon .elementor-icon-lijst-icon Lijsttekst .elementor-icon-lijst-tekst
Beeld
Beeld img Onderschrift .wp-bijschrift-tekst
afbeelding Box
Beeld .elementor-image-box-img TekstContainer .elementor-image-box-inhoud Inhoudstitel .elementor-afbeelding-box-titel Inhoudsbeschrijving elementor-afbeelding-box-beschrijving
Beeldcarrousel
AfbeeldingContainer .swiper-dia Afbeeldingsitem .swiper-dia-afbeelding Pagineringscontainer .swiper-paginering Punten paginering .swiper-paginering-bullet Vorige pictogram .elementor-swiper-knop-vorige Volgende .elementor-swiper-knop-volgende Bijschrift bij afbeelding .elementor-afbeelding-carrousel-bijschrift
Media-item .elementor-carrousel-afbeelding Overlay met media-items .elementor-carrousel-afbeelding-overlay Punt paginering .swiper-pagineringsfractie Vorige knop .eicon-chevron-links Volgende knop .eicon-chevron-rechts Paginering van breuken .swiper-pagineringsfractie Paginering van voortgangsbalk .swiper-paginatie-voortgangsbalk Paginering van voortgangsbalk .swiper-paginatie-voortgangsbalk-vulling
Mobiel Menu schakelen .elementor-menu-schakelaar Mobiel menupictogram .eicon-menubalk Normaal menu .elementor-nav-menu Dropdown .elementor-nav-menu-dropdown Menu-item met submenu .elementor-item.heeft-submenu Submenu-item .elementof-sub-item
de widget .elementor-betalingsknop PayPal-knoppictogram .elementor-knop-pictogram Tekst PayPal-knop .elementor-knop-tekst
Portfolio's
Portfolio Item .elementor-portfolio-item Portfolio-item op overlay .elementor-portfolio-item__overlay Overlay-titel .elementor-portfolio-item__titel Portfoliofilter .elementor-portfolio__filter
Titel beantwoorden .commentaar-antwoord-titel Hoe vormgebied .commentaar-formulier Opmerkingenformulier .commentaar-formulier-commentaar Button Submit .form-verzenden
Info plaatsen
de widget .elementor-post-info avatar .elementor-avatar Lijst met pictogrammen .elementor-icon-lijst-icon Pictogram Tekst .elementor-icon-lijst-tekst
Berichtnavigatie
de widget .elementor-na-navigatie Vorige pictogram .post-navigatie__pijl-vorige Vorig etiket .post-navigatie__prev–label Titel van vorig bericht .post-navigatie__vorige–titel Volgende pictogram .post-navigatie__pijl-volgende volgende-label .post-navigatie__volgende–label Titel volgend bericht .post-navigatie__volgende–titel
Berichten
Artikel posten .elementor-post Uitgelichte Afbeelding .elementor-post__thumbnail Badge op de huid van de kaart .elementor-post__badge Avatar op Kaarten Skin img.avatar Tekstinhoudsgebied .elementor-post__tekst Bericht Titel .elementor-post__titel Post-uittreksel .elementor-post__uittreksel Lees meer .elementor-post__lees meer Metagebied plaatsen .elementor-post__metadata Post-datum .elementor-post-datum Post auteur .elementor-post-auteur Post tijd .elementor-na-tijd Post Commentaar .elementor-post-avatar Opdelen .elementor-paginering Vorig etiket .pagina-nummers.vorige volgende-label .pagina-nummers.volgende Pagineringsnummer .paginanummers Actief pagineringsnummer .paginanummers.huidig Knop Meer laden .elementor-knop-link Laad meer knoppictogram .elementor-knop-pictogram
Bericht Titel
de widget .elementor-heading-titel
Prijslijst
de widget .elementor-prijslijst Lijstitem .elementor-prijslijst-item Afbeelding van lijstitem .elementor-prijslijst-afbeelding Tekst van lijstitem .elementor-prijslijst-tekst Koptekst van lijstitem .elementor-prijslijst-header Titel van lijstitem .elementor-prijslijst-titel Scheidingsteken voor lijstitems .elementor-prijslijst-scheidingsteken Lijst artikelprijs .elementor-prijslijst-prijs Lijstitem Beschrijving: .elementor-prijslijst-beschrijving
Prijs tabel
de widget .elementor-prijstabel Tabelkoptekst .elementor-prijstabel__header Titel van de tabelkop .elementor-prijstabel__heading Beschrijving tabelkop .elementor-prijstabel__subheading Prijs .elementor-prijs-tabel__prijs Valuta .elementor-prijstabel__valuta Nummer na prijs .elementor-prijstabel__na-prijs Prijsperiode .elementor-prijstabel__periode Functielijstgebied .elementor-prijstabel__features-lijst Functielijstitem .elementor-prijstabel__feature-inner Tabel voettekst .elementor-prijstabel__voettekst Knop Tabelvoettekst .elementor-prijstabel__button Voettekst tabel .elementor-prijstabel__additional_info lint .elementor-prijstabel__ribbon Binnenlint .elementor-prijstabel__ribbon-inner
Progress Bar
Progress Bar .elementor-voortgangsbalk Voortgangsachtergrond .elementor-vooruitgang-wrapper Voortgangstitel .elementor-titel Vooruitgang innerlijke tekst .elementor-vooruitgang-tekst Voortgangspercentage .elementor-voortgangspercentage
Voortgangstracker
de widget .elementor-scroll-tracker Voortgang .huidig-voortgangspercentage
Recensies
de widget .elementor-veegmachine Review-item .swiper-dia Koptekst bekijken .elementor-getuigenis__header Beeldbeoordelaar .elementor-getuigenis__image Naam reviewer .elementor-getuigenis__name Titel recensent .elementor-getuigenis__titel Getuigenis Inhoud .elementor-getuigenis__content Getuigenis tekst .elementor-getuigenis__tekst Punt paginering .swiper-paginering-bullet Paginering van breuken .swiper-pagineringsfractie Fractie Paginering Huidig .swiper-paginatie-stroom Fractie Paginering Totaal .swiper-paginatie-totaal Paginering van voortgangsbalk .swiper-paginatie-voortgangsbalk Paginering van voortgangsbalk .swiper-paginatie-voortgangsbalk-vulling Vorige knop .eicon-chevron-links Volgende knop .eicon-chevron-rechts
Knopitem .elementor-share-btn Knop Icoon .elementor-share-btn__icon Knoptekst .elementor-share-btn__text
Slides
de widget .elementor-dia's-wrapper Inhoudsgebied .swiper-dia-inhoud Inhoudskop .elementor-dia-kop Inhoudsbeschrijving .elementor-dia-beschrijving Inhoud knop .elementor-schuifknop Punt paginering .swiper-paginering-bullet Vorige knop .eicon-chevron-links Volgende knop .eicon-chevron-rechts
sociale Pictogrammen
de widget .elementor-sociale-iconen-wrapper Pictogramartikel .elementor-sociaal-pictogram
Star Rating
de widget .elementor-star-rating__wrapper Rating Titel .elementor-star-rating__titel Gebied met sterpictogram .elementor-sterrenwaardering Volledig gevuld sterpictogram .elementor-ster-vol Halfgevuld sterpictogram .elementor-ster-5 Leeg sterpictogram .elementor-ster-leeg
Inhoudsopgave
de widget .elementor-widget-container ToC-koptekst .elementor-toc__header Titel koptekst ToC .elementor-toc__header-titel Knop uitvouwen .elementor-toc__toggle-knop–uitbreiden Knop Samenvouwen .elementor-toc__toggle-knop–uitbreiden ToC-lichaam .elementor-toc__lichaam ToC-lijstitem .elementor-toc__lijst-item ToC hoogste niveau .elementor-toc__lijst-item-tekst.elementor-toc__top-level
Tabs
de widget .elementor-tabbladen Tabtitel .elementor-tab-titel Tab Content .elementor-tab-inhoud
Testimonial
de widget .elementor-getuigenis-wrapper Getuigenis Inhoud .elementor-getuigenis-inhoud Getuigenis Meta .elementor-getuigenis-meta Avatar-getuigenis .elementor-getuigenis-afbeelding Getuigenisnaam en functietitel .elementor-getuigenis-details Getuigenisnaam .elementor-getuigenisnaam Getuigenis Functietitel .elementor-getuigenis-job
Getuigenis Carrousel
de widget .elementor-widget-container Getuigenis dia-item .elementor-getuigenis Getuigenis Inhoud .elementor-getuigenis__content Getuigenis Meta .elementor-getuigenis__footer Avatar-getuigenis .elementor-getuigenis__image Getuigenisnaam en functietitel .elementor-getuigenis__cite Getuigenisnaam .elementor-getuigenis__name Getuigenis Functietitel .elementor-getuigenis__titel Punt paginering .swiper-paginering-bullet Paginering van breuken .swiper-pagineringsfractie Fractie Paginering Huidig .swiper-paginatie-stroom Fractie Paginering Totaal .swiper-paginatie-totaal Paginering van voortgangsbalk .swiper-paginatie-voortgangsbalk Paginering van voortgangsbalk .swiper-paginatie-voortgangsbalk-vulling Vorige knop .eicon-chevron-links Volgende knop .eicon-chevron-rechts
text Editor
de widget .elementor-teksteditor
Toggle
de widget .elementor-schakelaar Artikel wisselen .elementor-toggle-item Titel van item wisselen .elementor-tab-titel Toggle Item-inhoud .elementor-tab-inhoud Schakelpictogram .elementor-toggle-pictogram Schakelpictogram Gesloten .elementor-toggle-icon-gesloten Schakelpictogram Openen .elementor-toggle-pictogram-geopend
Hoewel Elementor voor elke widget tal van stylingopties biedt, kun je verder gaan met aangepaste CSS. Om een ​​aangepaste stijl toe te passen op een widget (of zijn elementen) via aangepaste CSS, moet je de selector van de gekoppelde widget kennen.
Andere Elementor-bronnen:
U kunt eenvoudig een widget op een live-pagina inspecteren om de selector te vinden. Om u tijd te besparen, hebben we Elementor's lijst met widgetselectors gemaakt, zodat u niet elke widget zelf hoeft te inspecteren.
Conclusie
Alstublieft! We hebben u zojuist de lijst met Elementor-widgetkiezers voorgesteld. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires
U kunt echter ook overleggen onze middelen WordPress blog creatie Divi: het beste WordPress-thema aller tijden
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken
...
Dit vind ik leuk : ik hou van Loading ...
Vergelijkbare artikelen
