Inhoudsopgave
Veel voorkomende verzoeken hebben betrekking op het verbergen van specifieke onderdelen op de website die geen eigen aan/uit-knop hebben op de beheerkant. Omdat het niet mogelijk is om op de voorkant voor elk detail een thematische beheerknop te hebben, kun je ongewenste onderdelen eenvoudig verbergen met CSS als je niet bekend bent met het bewerken van HTML-codes om het onderdeel helemaal te verwijderen.
Zoek het onderdeel dat u wilt verwijderen
Je kunt de ontwikkelaarstools van de browser gebruiken om het exacte onderdeel te vinden dat je wilt verwijderen.
Stel dat u het gedeelte met de datum en auteur onder het blogbericht wilt verwijderen, klik dan met de rechtermuisknop op dit gedeelte Inspect Element en open de browser developer tools:
Als u de muiscursor over uw broncode beweegt, kunt u een gemarkeerd gedeelte op de pagina zien dat verwijst naar een regel broncode onder uw muiscursor:
Op deze manier kun je het gedeelte vinden dat je wilt verbergen - bijvoorbeeld verwijzend naar bovenstaande schermafbeeldingen of het alle secties zijn met datum en auteur, of alleen datumsectie, of alleen auteursectie.
Schrijf CSS om geselecteerde sectie te verbergen
Als je een onderdeel hebt geselecteerd dat je wilt verbergen, gebruik dan het ID- of CLASS-attribuut van de geselecteerde HTML-tag in je eigen CSS-stijlen, of gebruik de exacte CSS-selector die het thema voor deze tag gebruikt. De CSS-selector voor de geselecteerde tag die door het thema wordt gebruikt, kun je vinden aan de rechterkant van het ontwikkelgereedschap van de browser.
Als je bijvoorbeeld besluit om het hele gedeelte met de datum en auteur te verwijderen, is de selector die door het thema wordt gebruikt: .elm-posts-main .item .item-info
CSS-stijl om HTML-tag aan de zijkant te verbergen is "display: none;", je kunt ook belangrijk om te voorkomen dat een CSS-stijl verder wordt overschreven met een andere CSS.
Dus de uiteindelijke CSS-stijl om het gedeelte met de datum en auteur te verbergen wordt:
.elm-posts-main .item .item-info {
display: none !important;
}
Aangepaste CSS-code toevoegen in Customizer
Je kunt de aangepaste CSS-code toevoegen aan Uiterlijk > Aanpassen > Extra CSS
Na het publiceren kun je het controleren op je website:
