Hoe CSS te gebruiken om website-elementen te verbergen

Een van de redenen voor de schoonheid van onze website is het prachtige ontwerp en verschillende WordPress-thema's die ons helpen die schoonheid te verbeteren. Om het unieke karakter van de website te behouden, passen veel mensen het thema aan waarbij de ontwikkelaar verschillende dingen van pagina tot pagina weglaat. Bijvoorbeeld - het weglaten van een zijbalk of tekstvak. Om dat te doen, moeten we een idee hebben over twee specifieke CSS-eigenschappen: zichtbaarheid en weergave. Met deze twee eigenschappen kan iedereen gemakkelijk pagina-elementen verbergen. En dat is wat we zullen zien in de tutorial van vandaag.

Redenen achter het verbergen van elementen

Wanneer een ontwikkelaar een WordPress-thema maakt, denkt hij aan de voorkeuren en behoeften van allerlei soorten mensen. Niet iedereen is echter hetzelfde, dus maatwerk is nodig. Wat mensen van een website weglaten, is meestal een koptekst of navigatiemenu.

Meestal hebben we dit soort actie nodig als we iets van een specifieke pagina willen verwijderen. Om het wat botter te zeggen, stel dat je een recensie- of beoordelingssectie uit een blogpost wilt verwijderen. Als u nu de beoordelingssectie uit de volledige thema-instellingen verwijdert, wordt deze van alle berichtpagina's verwijderd. Omdat we het van een specifieke pagina willen verwijderen, kunnen we dat element van de pagina eenvoudig verbergen met CSS.

Het te verbergen element targeten

U weet welk pagina-element u wilt verbergen, maar wat u niet weet, is wat het zegt in de programmeertaal of hoe de ontwikkelaar het heeft gespecificeerd.
We kunnen er gemakkelijk achter komen. Klik met de rechtermuisknop op het element dat u wilt verbergen en selecteer vervolgens Inspecteren.

Ga dan naar de sectie Elementen op Dev Tools. Daar kunt u de CSS-ID van uw geselecteerde elementen zien. Beweeg nu met uw muis over de elementencode en er zal een gemarkeerd gedeelte op de pagina zijn. Klik op de juiste regel om uw selectie te vergrendelen.

Nu moeten we overschakelen naar CSS met behulp van deze selector.

Gebruik van display-CSS

De eenvoudigste manier om elk element te verbergen, is door het te wissen. We kunnen dat eenvoudig doen via de eigenschap " display:none ". Als gevolg hiervan zal dat element niet meer op die pagina verschijnen. En het deel dat dat specifieke element bedekt, wordt automatisch verwijderd en gevuld. Bovendien zal er geen probleem zijn met de responsiviteit.

Hier in deze afbeelding kun je zien dat we de hoofdkop wilden verwijderen. Eerst hebben we op het element-ID geklikt, daarna gaan we naar het paneel Stijl voor CSS-aanpassingen en voegen de onderstaande code toe.

display:none

En we zijn klaar met de gemakkelijkste manier om een element van de hele website te verwijderen.

Gebruik van zichtbaarheid CSS

Net als display-CSS kunnen we ook de zichtbaarheids-CSS gebruiken om elk element te verbergen. Theoretisch doen ze allebei hetzelfde werk, maar in de praktijk verbergen we het element gewoon, niet het verwijderen. Zichtbaarheid CSS helpt u om het element onzichtbaar te maken en het behoudt de toegewezen ruimte.

visibility:hidden;

Zichtbaarheid of weergave: welke moet in welke situatie worden gebruikt?

We weten al welke CSS-code welk werk doet. Als we een element volledig van de pagina willen verwijderen, gebruiken we Display CSS. En als we een element willen laten verdwijnen met de voorwaarde om de positie vast te houden, dan gebruiken we de Visibility CSS.

Als we bijvoorbeeld de achtergrond van een rij met één kolom willen verwijderen, gebruiken we "visibility:hidden" omdat het alleen de achtergrond verwijdert, maar de rij met één kolom en de inhoud erin laat. En als we de "display:none;" gebruiken, worden de inhoud, rijen en kolommen erin samen met de achtergrond verwijderd en wordt de pagina automatisch op een nieuwe manier georganiseerd.

Element verbergen op een bepaalde pagina

Als er wijzigingen worden aangebracht door wat we tot nu toe hebben gezien, zal dit effect hebben op de hele website. Nu gaan we kijken hoe we een element op een specifieke pagina kunnen laten verdwijnen. Hiervoor moeten we de specifieke Page ID Class achterhalen. Onthoud dat het een eenvoudig pagina-ID- nummer is, geen CSS-ID .

U kunt deze ID eenvoudig vinden door met de muis over de pagina te bewegen. Hier nemen we een bericht als voorbeeld. U kunt "post=3" zien in een rechthoek gemarkeerde plaats in de link, en dat is de pagina-ID voor de " Privacybeleid "-pagina van een website.

U kunt deze id ook controleren vanaf elke bewerkings- of voorbeeldpagina .

Nu zullen we Display CSS aan deze pagina toevoegen om de zijbalk te verbergen. Dit kunnen we doen vanuit Theme Customizer.

.page-id-3 div#sidebar {
display:none;
}

De hierboven geschreven code verwijdert gewoon de zijbalk van een specifieke pagina waar de hieronder geschreven code het element overal zal verwijderen.

dev#sidebar {
visibility:hidden;
}

Laatste woorden

In de tutorial van vandaag willen we het verschil uitleggen tussen CSS-eigenschappen voor weergave en zichtbaarheid en welke eigenschap je moet gebruiken bij het aanpassen van je WordPress-site. We hopen dat je deze blogpost nuttig vindt. Zo JA, dan is een aandeel fenomenaal!