HTML Elemente mit CSS ausblenden

Habt ihr euch schon immer gewundert, f├╝r was das Custom CSS im WordPress-Customizer eigentlich gut ist? In diesem Tutorial von Contentb├Ąr erkl├Ąre ich euch, wie ihr beispielsweise ein Logo Element mit CSS im Custom CSS von WordPress ausblendet.

Wie findet man einen CSS-Selektor von HTML Elementen?

Einen CSS Selektor oder eine CSS-ID, CSS-Klasse findest du ├╝ber die Entwicklertools im Browser. In der aktuellen Firefox Version funktioniert dies so:

Rechtsklick -> Untersuchen(Q)

Anschlie├čend findest du alles ├╝ber den Inspektor. Im folgenden Screenshot ist die Logo-CSS-Klasse gelb markiert.

CSS Klasse finden mit den Entwicklertools vom Browser

Das gefundene Element ausblenden

Solltest du das HTML-Element und die dazugeh├Ârige Klasse ├╝ber die Entwicklertools gefunden haben, kannst du diese nun bearbeiten. Du kannst auf der rechten Seite des Inspektors bereits mit den Werten experimentieren und schauen, wie sich das Ganze auf deine Seite auswirkt.

CSS Code um das Logo auszublenden

Wir sehen, dass die Klasse “site-logo” die Attribute f├╝r das Logo beinhalten. Mit folgendem CSS-Code blenden wir das Logo aus:

.site-logo {
display:none;
}

Tutorial: HTML-Elemente mit CSS ausblenden in WordPress

Bei jedem WordPress-Theme findet man einen Custom-CSS Part, ├╝ber den man eigenes CSS verwenden kann um das Theme anzupassen. Im folgenden Youtube-Video erkl├Ąre ich euch, wie ihr CSS nutzt um Elemente eurer WordPress Seite auszublenden.

Was kann man mit CSS machen?

Mit einer CSS-Klasse oder ID, definierst du Formatierung und die Anpassung eines HTML-Elements. So kannst du beispielsweise bei einer h2-├ťberschrift benutzerdefinierte Formatierungen bestimmen.

/*custom CSS Beispiel */
#customh2 {
font-size: 22px;
background-color:blue;
}
<h2 id="customh2">Dies ist meine Custom ├ťberschrift</h2>

Im Beispiel siehst du, wie du deine h2-├ťberschrift mit der ID “customh2” ausstattest, um ihr dann Attribute wie font-size und background-color zu geben.

Keine Lust, CSS ├╝ber Tutorials zu lernen?

Das Contentb├Ąr-Team hilft dir gerne bei individuellen CSS-Anpassungen, unsere Abteilung f├╝r Softwareentwicklung ist der richtige Ansprechpartner daf├╝r.

Schreibe einen Kommentar

WordPress Cookie Hinweis von Real Cookie Banner