Widgets auf Mobilgeräten ausblenden ohne PlugIn

Mr.Quick

Hallo,

ich benutze das Theme "Twentyfifteen" . Widgets will ich ausblenden bzw. nicht anzeigen lassen auf Mobilgeräten und Seiten wie die Datenschutzerklärung oder Impressum sollen die Widgets nicht angezeigt werden.

Das möglichst ohne PlugIn. Widgets-Options kenne ich.

Wer hat einen Rat.

Danke voraus,

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Arbeite mit CSS und Media Queries.

Link zur Seite mit den Widgets?

Mr.Quick

Hallo,

vielen Dank. Hier der Link zur Webseite | https://wpde.4lima.de/

Mr.Quick

Ich gehe davon aus das Du

Code

{
display:none;
}

meinst.

Dazu habe ich einen interessant Artikel gefunden (Performance Nachteile)
https://maurice-web.de/article/besser…tig-ausblenden/

threadi

Welche Widgets aus Mobil meinst Du denn? Ich sehe keine.

Mr.Quick · Screenshot 2023-01-26 at 18-55-47 Testarea Theme Twenty-Fifteen.webp

Die Widgets unter der Navigation. LInke Seite. s. Screenshot.

threadi

Du guckst das nicht Mobil an - die Ansicht ist viel zu breit dafür. Mobil wäre z.B. das hier:

Welche Auflösung willst Du also anpassen?

Mr.Quick

Hallo, hier die Mobilansicht.

MIr wäre lieb auf allen Smartphones und auch Tablet.

threadi

Ach, das ist dort im Menü versteckt dann. Na dann:

Code

@media screen and (max-width: 990px) {
 .widget-area {
   display: none;
 }
}

Mr.Quick

Danke. Funktioniert einwandfrei.

Bekomme ich das mit

Code

loading="lazy"

wieder hin das die Performance wieder stimmt?

Danke voraus.

Mr.Quick

Hallo, funktioniert soweit sehr gut. Schön wäre es jetzt noch das bei einer bestimmten Seite ein anderes Widget eingeblendet wird.
Gibt es da auch eine Lösung oder muss ich dann wirklich auf "Widget Options" zurück greifen? Danke voraus.

meisterleise

Falls die Rede von einem der nun ausgeblendeten Widgets ist, kannst du es auch wieder einblenden, indem du per CSS definierst, dass Widget B nicht ausgeblendet werden soll, wenn die Seiten ID 123 ist.

Mr.Quick

Vielen Dank. Gibt es ein Code-Beispiel um ein bestimmtes Widget auf einer bestimmten Seiten-ID einzublenden? Danke voraus.

meisterleise

Hier das Prinzip

Mr.Quick

Danke. Meine Überlegung - Auf einer bestimmten Seite das Widget eingeblendet aber auf Mobilgerät muss es trotzdem ausgeblendet sein.
Jetzt grübel ich noch über dem Code.

Für weitere Tipps, Danke voraus.

threadi

Versteh ich nicht. Die Widgets sind Mobil und auf Tablet jetzt ausgeblendet. Auf Desktop auf jeder Seite zu sehen. Wieso willst Du sie auf einer speziellen Seite dennoch einblenden (sind sie doch schon), aber mobil nicht (sind sie bereits nicht)?

Mr.Quick

Wenn ich Widget 01 auf https://wpde.4lima.de/fotogalerie verlinke.
Sollte Widget 01 dort nicht zu sehen sein. Dafür ein anderes.

Danke voraus.

meisterleise

Mit @Media und site ID solltest du das alles nach Belieben steuern können. Die class .widget-area müsstest du dann durch die Klassen der einzelnen Widgets ersetzen. Ggf. ist dabei auch die Pseudoklasse :not hilfreich (nur nutzen, wenn wirklich benötigt).

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Widgets auf Mobilgeräten ausblenden ohne PlugIn

Jetzt mitmachen!