TL;DR: So verstecken Sie Bilder in der mobilen Ansicht auf WordPress
Drei Möglichkeiten, Bilder auf Mobilgeräten in WordPress zu verstecken. Methode 1 verwendet SeedProd und verhindert, dass Bilder überhaupt geladen werden, nicht nur, dass sie visuell versteckt werden.
- Warum Bilder auf Mobilgeräten verstecken – Große Bilder verlangsamen die Ladezeiten und schieben Inhalte auf kleinen Bildschirmen aus dem Blickfeld.
- SeedProd-Website-Methode – Verwenden Sie die Geräte-Sichtbarkeit im Tab „Erweitert“, um „Auf Mobilgeräten ausblenden“ für jedes Bild oder jede Sektion umzuschalten.
- SeedProd-Landingpages – Dieselben Schritte gelten für SeedProd » Landingpages, keine Theme-Änderungen erforderlich.
- CSS-Methode – Fügen Sie eine `display:none`-Media-Abfrage hinzu, aber beachten Sie: Der Browser lädt das Bild auf Mobilgeräten trotzdem herunter.
Große Desktop-Bilder können Ihr mobiles Layout beeinträchtigen. Sie verlangsamen die Ladezeiten, schieben Inhalte zu weit nach unten und lassen Ihre Website auf kleinen Bildschirmen überladen wirken. Die Lösung ist einfach: Verstecken Sie Bilder auf Mobilgeräten, damit Besucher nur sehen, was wichtig ist.
In diesem Leitfaden zeige ich Ihnen drei einfache Möglichkeiten, Bilder in der mobilen Ansicht auf WordPress zu verstecken, einschließlich einer Option ohne Code und einer schnellen CSS-Methode.
Warum Bilder auf Mobilgeräten in WordPress verstecken?
Das Verstecken von Bildern in der mobilen Ansicht hält Ihre Website übersichtlich und einfach zu bedienen. Ein riesiges Heldenfoto oder ein Werbebanner, das auf dem Desktop gut aussieht, kann kleine Bildschirme überfordern, die Ladezeiten verlangsamen und wichtige Inhalte aus dem Blickfeld schieben. In einigen Fällen möchten Sie vielleicht auch nur für Desktops geltende Angebote schalten, ohne Telefonbesucher zu verwirren.
Das Fazit: Das Verstecken von Bildern auf Mobilgeräten bietet den Nutzern eine schnellere und klarere Erfahrung.
So zeigen und verstecken Sie Bilder in der mobilen Ansicht auf WordPress
Die Lösungen zum Verstecken von Bildern auf mobilen Bildschirmen mögen für Benutzer, die mit Programmiersprachen nicht vertraut sind, komplex erscheinen. Eine schnelle Google-Suche liefert Anleitungen zum Schreiben von benutzerdefiniertem CSS, Div-Klassen und allerlei Fachjargon.
Keine Sorge. Sie benötigen keine technischen Kenntnisse für die unten beschriebenen Methoden. Alles, was Sie brauchen, ist ein WordPress-Plugin, eine WordPress-Website und die Fähigkeit, einige einfache Schritte zu befolgen.
Methode 1: Bild in der mobilen Ansicht auf der Website verstecken
Wir verwenden SeedProd, um Bilder auf Mobilgeräten in WordPress ohne Code zu verstecken.
SeedProd ist der beste Website-Builder für WordPress. Er ermöglicht es Ihnen, WordPress-Themes, Landingpages und responsive Layouts ohne Code zu erstellen.
Es enthält Hunderte von vorgefertigten Vorlagen, und Sie können jeden Teil Ihrer Website mit dem visuellen Drag-and-Drop-Seitenersteller, Blöcken und Sektionen anpassen. Sie können auch die Einstellungen für die Geräte-Sichtbarkeit verwenden, um bestimmte Inhalte in mobilen und Desktop-Ansichten auszublenden.
SeedProd bietet auch integrierte Modi wie „Coming Soon“, Wartungsmodus, 404-Seite und Anmeldeseite. Sie können jeden Modus mit einem Klick ein- und ausschalten, sodass Sie Ihre Website während der Designarbeiten vor der Öffentlichkeit verbergen können.
Folgen Sie den nachstehenden Schritten, um Bilder in der mobilen Ansicht Ihrer WordPress-Website auszublenden.
Schritt 1. SeedProd installieren und aktivieren
Klicken Sie zuerst auf die Schaltfläche unten, um Ihre Kopie von SeedProd zu erhalten.
Hinweis: Um die Website-Builder-Funktion von SeedProd zu nutzen, benötigen Sie eine SeedProd Pro-Lizenz.
Nachdem Sie das Plugin heruntergeladen haben, installieren und aktivieren Sie es auf Ihrer WordPress-Site. Wenn Sie Hilfe benötigen, können Sie dieser Anleitung zum Installieren eines WordPress-Plugins folgen.
Gehen Sie als Nächstes zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.
Ihren Schlüssel finden Sie in Ihrem SeedProd-Konto-Dashboard im Abschnitt „Downloads“.
Klicken Sie auf die Schaltfläche Schlüssel überprüfen, um Ihre SeedProd-Lizenz freizuschalten, und fahren Sie dann mit dem nächsten Schritt fort.
Schritt 2. Wählen Sie eine Website-Vorlage
Der nächste Schritt beinhaltet die Erstellung eines benutzerdefinierten WordPress-Themes. Dadurch können Sie die Einstellungen für die „Gerätesichtbarkeit“ von SeedProd verwenden, um verschiedene Inhalte auf Desktop und Mobilgeräten anzuzeigen und auszublenden.
Gehen Sie zu SeedProd » Theme Builder und klicken Sie auf die Schaltfläche Themes, um eine Website-Vorlage auszuwählen.
Viele Themes sind für verschiedene Branchen und Website-Typen verfügbar, darunter E-Commerce, Blogs, Portfolios usw.
Sobald Sie ein Theme gefunden haben, das Ihnen gefällt, fahren Sie mit der Maus darüber und klicken Sie auf das Häkchensymbol, um es auf Ihre Website zu importieren.
Sie sehen nun die verschiedenen Teile, aus denen Ihr WordPress-Theme besteht.
Normalerweise müssten Sie diese manuell mit Code anpassen, aber mit SeedProd können Sie jeden Teil Ihrer Website mit dem Drag-and-Drop-Seitenersteller visuell bearbeiten.
Um einen Teil Ihrer Website anzupassen, fahren Sie mit der Maus über eine Theme-Vorlage und klicken Sie auf den Link „Design bearbeiten“. Für diese Anleitung beginnen wir mit der Homepage.
Sobald Sie eine Vorlage ausgewählt haben, können Sie das Layout mit dem Drag-and-Drop-Builder von SeedProd anpassen. Wenn Sie fertig sind, fahren Sie mit Schritt 4 fort, um das Bild auszublenden.
Schritt 4. Blenden Sie Website-Bilder auf Mobilgeräten mit Gerätesichtbarkeit aus
Das Ausblenden von Bildern in der mobilen Ansicht ist mit den Einstellungen für die „Gerätesichtbarkeit“ von SeedProd einfach. Sie können Bilder einzeln oder ganze Bildbereiche mit einem einzigen Klick ausblenden.
Um Bilder einzeln auszublenden, suchen Sie das Bild, das Sie ausblenden möchten, und klicken Sie darauf, um die Inhaltseinstellungen zu öffnen.
Klicken Sie als Nächstes auf die Registerkarte „Erweitert“ und erweitern Sie den Abschnitt „Gerätesichtbarkeit“.
Um das Bild auf Mobilgeräten auszublenden, klicken Sie auf den Schalter neben der Überschrift „Auf Mobilgeräten ausblenden“.
Dieses Bild wird nun nur für Desktop-Besucher angezeigt und ist auf Mobilgeräten ausgeblendet.
Sie können die gleichen Schritte befolgen, um ganze Bildzeilen mit SeedProd auszublenden. Öffnen Sie einfach die Einstellungen der Zeile und verwenden Sie im Tab „Erweitert“ die Einstellungen für die „Gerätesichtbarkeit“, um die Bildzeile auf Mobilgeräten auszublenden.
Sie können Ihre Änderungen in der Vorschau anzeigen, indem Sie auf das Symbol „Mobile Vorschau“ in der unteren Symbolleiste klicken.
Alle „grau dargestellten“ Bilder sind für mobile Website-Besucher nicht sichtbar.
Wenn Sie mit dem Aussehen Ihres Designs zufrieden sind, klicken Sie in der oberen rechten Ecke Ihres Bildschirms auf die Schaltfläche Speichern.
Befolgen Sie die obigen Schritte, um Bilder in der mobilen Ansicht für jede andere Theme-Vorlage auszublenden, z. B. für Ihre Seitenleiste, Einzelbeiträge, Seiten usw.
Sie können beispielsweise Ihre Beitragsbilder auf Mobilgeräten ausblenden, indem Sie Ihre Beitrags-Vorlage bearbeiten und die Sichtbarkeitseinstellungen für den Block „Beitragsbild“ wie folgt ändern:
Schritt 5. Veröffentlichen Sie Ihre WordPress-Website
Wenn Sie bereit sind, Ihr benutzerdefiniertes Theme live zu schalten, gehen Sie zu SeedProd » Theme Builder und stellen Sie den Schalter „SeedProd Theme aktivieren“ auf „Ein“.
Sie können Ihre Website jetzt in der Vorschau anzeigen, um die Änderungen zu sehen. Wie Sie diesem Beispiel entnehmen können, sind die Bilder, die wir zuvor ausgewählt haben, auf Mobilgeräten ausgeblendet.
Methode 2: Bilder in der mobilen Ansicht auf Landingpages verstecken
Die gleichen Schritte funktionieren auch für eigenständige Landing Pages. Erstellen Sie eine Seite unter SeedProd » Landing Pages, öffnen Sie sie im Editor und aktivieren Sie Auf Mobilgeräten ausblenden im Tab „Erweitert“.
Methode 3: Ein Bild auf Mobilgeräten mit CSS verstecken
Hinweis: Ich empfehle diese Methode nur, wenn Sie sich mit Programmiersprachen auskennen. Sie können den integrierten WordPress Customizer verwenden, um benutzerdefinierten CSS-Code zu Ihrer Website hinzuzufügen.
Ich verstehe, dass einige Website-Besitzer ihre Seiten lieber manuell anpassen. Aus diesem Grund zeigt die folgende Methode, wie Sie Bilder auf Mobilgeräten mit benutzerdefiniertem CSS ausblenden.
Finden Sie zuerst die Klasse des Inhaltselements, das Ihr Bild enthält. Zum Beispiel das Beitragsbild Ihrer Blogbeiträge. Sie können es dann mit der folgenden CSS-Klasse ausblenden:
@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}
Wichtig: display:none blendet das Bild visuell aus, aber der Browser lädt es auf Mobilgeräten trotzdem herunter. Wenn die Seitengeschwindigkeit das Ziel ist, ist Methode 1 die bessere Wahl. Die Geräte-Sichtbarkeit von SeedProd verhindert, dass das Bild überhaupt geladen wird.
Sie müssen „your-element-class“ durch die CSS-Klasse ersetzen, die Ihr Bild enthält. Möglicherweise müssen Sie auch die maximale Gerätedbreite an Ihr WordPress-Theme und Ihre Media Query anpassen.
In diesem Beispiel haben wir das Beitragsbild auf Mobilgeräten ausgeblendet, indem wir die Klasse „.featured-media img“ angesprochen haben:
@media only screen and (max-width: 782px) {
.featured-media img{
display: none;
}
}
Wie Sie sehen, verschwindet das Bild automatisch auf kleineren Bildschirmgrößen.
Wenn Sie den WordPress Block-Editor ohne SeedProd verwenden, prüfen Sie im erweiterten Bereich der Blockeinstellungen auf eine Umschaltoption „Auf Mobilgeräten ausblenden“. WordPress 6.x hat diese Option für die meisten Kernblöcke hinzugefügt.
FAQs zum Verstecken von Bildern in der mobilen Ansicht
Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bilder in der mobilen Ansicht auf WordPress ausblenden. Möglicherweise interessieren Sie sich auch für die folgenden Anleitungen:
- So fügen Sie für verschiedene Seiten in WordPress eine andere Seitenleiste hinzu
- So fügen Sie benutzerdefiniertes CSS in WordPress hinzu (Anfängerfreundlich)
- So fügen Sie einen Schatteneffekt (Box Shadow) in WordPress hinzu
- So blenden Sie Seitentitel in WordPress aus
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
