Wie kann ich ein Element auf meiner Website ausblenden?

Inhaltsübersicht

Picture of Simeon Nenov

Simeon Nenov

Inhaberin von Simplfix Studio
Simeon hilft Unternehmen seit vielen Jahren, deren Markenbekanntheit durch digitale Lösungen zu steigern.

Jeder Website-Entwickler steht vor der Herausforderung, bestimmte Elemente wie Text, Schaltflächen oder Bilder zu entfernen. In diesem kurzen Lernprogramm erfahren Sie, wie Sie das Problem effektiv angehen können.

Eine Möglichkeit ist, das unerwünschte Element aus dem Theme zu löschen oder den Builder zu verwenden (Elementor, Divi, WPBakery usw.). Das Problem ist jedoch, dass unerfahrene Entwickler oft nicht wissen, welches Element was erzeugt und daher sind sie nicht in der Lage es zu entfernen. Zum Glück gibt es eine einfache Lösung.

Lernen Sie anhand eines Video-Tutorials Schritt für Schritt, wie Sie ein Element in Ihrer WordPress-Website ausblenden können.

Wie Sie ein Element in Ihrer WordPress-Website ausblenden.

Schritt 1: Prüfen Sie das Element

Als Erstes müssen Sie Ihre Website auf der Seite öffnen, auf der sich das zu unwünschte Element befindet. Markieren Sie dann das Element, klicken Sie mit der rechten Maustaste und klicken Sie auf „Inspizieren“ (für Chrome).

Schritt 2: Identifizieren Sie das Element im Code

Dann sehen Sie, welches Element Sie zur Prüfung ausgewählt haben (es wird hervorgehoben). In unserem Fall ist es

<h2 class="elementor-heading-title elementor-size-default">...</h2>

Schritt 3: Kopieren Sie den entsprechenden Code

Oben rechts sehen Sie die Stile, die das Element beeinflussen (im weißen Rechteck). Das Einzige, was Sie tun sollten, ist, den gesamten Code zu kopieren. In unserem Fall:

.elementor-162795 elementor-151978 .elementor-element.elementor-element-41227282 .elementor-heading-title

Schritt 4: Anpassen im WordPress-Admin

Schließen Sie dann das Inspektorfenster und klicken Sie auf die Schaltfläche „Anpassen“ in der oberen Leiste Ihres WordPress-Administrators. Sie müssen als Administrator eingeloggt sein, um sie zu sehen.

Schritt 5: Zusätzliche CSS

Klicken Sie auf „Zusätzliches CSS“.

Schritt 6: Einfügen und Ausblenden

Fügen Sie den Code, den Sie kopiert haben, in den Code-Editor ein. Fügen Sie dann einfach den folgenden Code ein:

{
display:none;
}

Und voilà, das Element ist versteckt!

Wenn Sie Hilfe beim Aufbau Ihrer Website benötigen oder einfach nur einen freundlichen Ratschlag wünschen, zögern Sie nicht, uns zu kontaktieren!

Zum Wohl!

Quellen

Die Quelle für dieses Tutorial sind ausschließlich die Erfahrungen des Autors aus dem wirklichen Leben. Zum besseren Verständnis werden auch Screenshots und ein Screencast erstellt.

Nützliche Ressourcen

https://www.w3schools.com/css/css_display_visibility.asp – CSS-Eigenschaft ‚display‘ erklärt

Social Media
Markenidentität
Web-Design
Druckdesign
Look at you! You look beautiful today!