WordPress Gutenberg – Bilder ausblenden


Stichworte: Wordpress

Du möchtest einige Gutenberg Blöcke in WordPress ausblenden. Wie immer gibt es dafür ein Plugin. Aber vielleicht willst du – so wie ich – nicht hunderte von Plugins installieren. Hier eine Möglichkeit, wie du das erreichen kannst.

@media (max-width: 768px) {
  .nur-pc {
  display: none;
  }}

Es handelt es sich um sogenannte CSS Media Queries. Doch das ist – sofern du nicht tiefer in die Materie einsteigen willst – egal.

Was bedeutet dieser Code?

  • Ich fange mal von hinten an. display: none; sagt, dass nichts angezeigt werden soll
  • nur-pc ist ein willkürlicher Namen, den wir später noch benötigen. Es ist eine selbsterstellte CSS Klasse, die man benutzen kann
  • Die Bedingung für das Ganze lautet: max-width: xxxWobei die Zahl dahinter die maximale Pixelbreite angibt.

Im Gutenberg Block Editor eintragen

Einfach wie auf dem Bild erkennbar eintragen. Dann wird bei einem Smartphone das Bild nicht angezeigt.

Ergebnis

Wenn du mit einem Gerät, dass maximal 768px in der Breite darstellt die Seite aufrufst, wird der Block mit deinem Bild nicht angezeigt. Einen Nachteil will ich nicht verschweigen: Das Bild wird immer geladen, jedoch nicht angezeigt.

Wenn du tiefer einsteigen willst und die @media Queries total interessant findest, dann schau mal hier: ionos.de

Hast du einen Tipp für mich?

Ich würde mich über einen Kommentar sehr freuen

Schreibe einen Kommentar