Technologische Neuigkeiten, Bewertungen und Tipps!

So verbergen Sie ein Bild in der mobilen Ansicht in WordPress (Schritt fĂĽr Schritt)

Hinweis: Der folgende Artikel hilft Ihnen weiter: So verbergen Sie ein Bild in der mobilen Ansicht in WordPress (Schritt fĂĽr Schritt)

Suchen Sie nach einer einfachen Möglichkeit, ein Bild in der mobilen Ansicht auf Ihrer WordPress-Website auszublenden?

Die Anzeige jedes Designelements Ihrer Website auf mobilen Bildschirmen kann das Seherlebnis unübersichtlich und überwältigend machen. In diesem Fall ist es für Besucher schwieriger, das Gesuchte zu finden, und es kann sogar dazu führen, dass sie Ihre Website verlassen.

Wäre es nicht großartig, wenn Sie bestimmte Designelemente nur für mobile Betrachter „abschalten“ könnten?

In diesem Artikel erfahren Sie, wie Sie Bilder auf Mobilgeräten in WordPress ausblenden, um den Website-Besuchern ein besseres Benutzererlebnis zu bieten.

Warum Bilder in der mobilen Ansicht in WordPress ausblenden?

Eine überfüllte mobile Website kann Ihre Besucher abschrecken, aber das ist nicht der einzige Grund, Inhalte auf Mobilgeräten auszublenden.

Manchmal möchten Sie möglicherweise Desktop-Besucher mit einem gezielten Angebot erreichen. In diesem Fall möchten Sie Ihre Werbebilder vor mobilen Besuchern verbergen, damit Sie sie nicht versehentlich ansprechen und Ihre Ergebnisse verfälschen.

Ein weiterer Grund für das Ausblenden von Bildern besteht darin, dass sie möglicherweise zu groß sind, um auf mobilen Bildschirmen angezeigt zu werden. Ein riesiges Heldenbild mag auf dem Desktop großartig aussehen, auf Mobilgeräten kann es jedoch viel wertvollen Platz beanspruchen. In diesem Fall ist es die beste Lösung, es auszublenden.

So blenden Sie Bilder in der mobilen Ansicht in WordPress ein und aus

Die Lösungen zum Ausblenden von Bildern auf mobilen Bildschirmen können für Benutzer, die mit Programmiersprachen nicht vertraut sind, komplex erscheinen. Eine schnelle Google-Suche zeigt Anweisungen zum Schreiben von benutzerdefiniertem CSS, Div-Klassen und allerlei Fachjargon.

Mach dir keine Sorge. Für die im Folgenden behandelten Methoden benötigen Sie kein technisches Fachwissen. Sie benötigen lediglich ein WordPress-Plugin, eine WordPress-Website und die Möglichkeit, einige einfache Schritte auszuführen.

Methode 1: Bild in der mobilen Ansicht auf der Website ausblenden

FĂĽr die erste Methode verwenden wir ein leistungsstarkes WordPress-Plugin, um Bilder in der mobilen Ansicht auszublenden.

SeedProd ist der beste Website-Builder für WordPress. Sie können damit WordPress-Themes, Landingpages und responsive Layouts erstellen, ohne Code schreiben zu müssen.

Es enthält Hunderte vorgefertigter Vorlagen und Sie können jeden Zentimeter Ihrer Website mit dem visuellen Drag-and-Drop-Seitenersteller, den Blöcken und Abschnitten anpassen. Sie können die Gerätesichtbarkeitseinstellungen auch verwenden, um bestimmte Inhalte in Mobil- und Desktop-Ansichten auszublenden.

SeedProd bietet auch integrierte Modi wie „Bald verfügbar“, Wartungsmodus, 404-Seite und Anmeldeseite. Sie können jeden Modus mit einem Klick ein- und ausschalten und so Ihre Website vor der Öffentlichkeit verbergen, während Sie an ihrem Design arbeiten.

FĂĽhren Sie die folgenden Schritte aus, um Bilder in der mobilen Ansicht auf Ihrer WordPress-Website auszublenden.

Schritt 1. Installieren und aktivieren Sie SeedProd

Klicken Sie zunächst auf die Schaltfläche unten, um Ihr Exemplar von SeedProd zu erhalten.

Note: Um die Website-Builder-Funktion von SeedProd nutzen zu können, benötigen Sie eine SeedProd Pro-Lizenz.

Nachdem Sie das Plugin heruntergeladen haben, installieren und aktivieren Sie es auf Ihrer WordPress-Site. Sie können dieser Anleitung weiter folgen Installation eines WordPress-Plugins Wenn du Hilfe benötigst.

Gehen Sie als Nächstes zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.

Sie finden Ihren Schlüssel im Dashboard Ihres SeedProd-Kontos im Abschnitt „Downloads“.

Drücke den Schlüssel überprüfen Klicken Sie auf die Schaltfläche, um Ihre SeedProd-Lizenz zu entsperren, und fahren Sie dann mit dem nächsten Schritt fort.

Schritt 2. Wählen Sie eine Website-Vorlage

Der nächste Schritt besteht darin, ein benutzerdefiniertes WordPress-Theme zu erstellen. Dadurch können Sie die „Gerätesichtbarkeit“-Einstellungen von SeedProd verwenden, um verschiedene Inhalte auf Desktops und Mobilgeräten anzuzeigen und auszublenden.

Gehe zu SeedProd » Theme Builder und klicken Sie auf Themen Klicken Sie auf die Schaltfläche, um eine Website-Vorlage auszuwählen.

Viele Themes sind fĂĽr verschiedene Branchen und Website-Typen verfĂĽgbar, darunter E-Commerce, Blogs, Portfolios usw.

Wenn Sie ein Thema gefunden haben, das Ihnen gefällt, bewegen Sie den Mauszeiger 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üssen 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 beliebigen Teil Ihrer Website anzupassen, bewegen Sie den Mauszeiger über eine Designvorlage und klicken Sie auf den Design-Link „Design bearbeiten“. Für diesen Leitfaden beginnen wir mit der Homepage.

Schritt 3. Passen Sie Ihr Website-Design an

Wenn Sie eine Designvorlage öffnen, wird der visuelle Seiteneditor von SeedProd angezeigt. Auf der linken Seite befinden sich Blöcke und Abschnitte zum Hinzufügen benutzerdefinierter Inhalte und auf der rechten Seite eine Live-Vorschau.

Sie können auf ein beliebiges Element klicken, um seine Einstellungen anzuzeigen und das Design und Layout zu ändern. Mit dem Headline-Element können Sie beispielsweise den Inhalt, die Ausrichtung, die Überschriftenebene usw. bearbeiten.

Es ist auch einfach, Ihrem Design neue Elemente hinzuzufĂĽgen. Ziehen Sie einfach einen Block von links und legen Sie ihn in Ihrer Live-Vorschau ab.

In diesem Beispiel haben wir den Block „Countdown“ verwendet. Countdown-Timer sind eine hervorragende Möglichkeit, Ihrer Website mehr Dringlichkeit zu verleihen und Besucher zum Handeln zu ermutigen, bevor sie etwas verpassen.

Wie bei allen SeedProd-Blöcken können Sie darauf klicken, um:

  • Ă„ndern Sie den Timertyp
  • Passen Sie die Timer-Ausrichtung an
  • FĂĽgen Sie eine benutzerdefinierte Nachricht hinzu
  • Leiten Sie Benutzer um, wenn der Timer abgelaufen ist
  • Ă„ndern Sie die Timergröße

Sie können auch auf die Registerkarte „Vorlagen“ klicken, um schnell einen anderen Stil auszuwählen.

Schritt 4. Website-Bilder auf Mobilgeräten mit Gerätesichtbarkeit ausblenden

Das Ausblenden von Bildern in der mobilen Ansicht ist mit den „Gerätesichtbarkeit“-Einstellungen von SeedProd ganz einfach. Mit einem Klick können Sie Bilder einzeln oder ganze Bildausschnitte ausblenden.

Um Bilder einzeln auszublenden, suchen Sie das Bild, das Sie ausblenden möchten, und klicken Sie dann darauf, um die Inhaltseinstellungen zu öffnen.

Klicken Sie anschließend 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 jetzt nur Desktop-Besuchern angezeigt und ist auf Mobilgeräten ausgeblendet.

Sie können die gleichen Schritte ausführen, um mit SeedProd ganze Bildzeilen auszublenden. Öffnen Sie einfach die Einstellungen der Zeile und verwenden Sie auf der Registerkarte „Erweitert“ die Einstellungen für „Gerätesichtbarkeit“, um die Bildzeile auf Mobilgeräten auszublenden.

Sie können eine Vorschau Ihrer Änderungen anzeigen, indem Sie in der unteren Symbolleiste auf das Symbol „Mobile Vorschau“ klicken.

Alle „ausgegrauten“ Bilder sind für Besucher mobiler Websites nicht sichtbar.

Wenn Sie mit dem Aussehen Ihres Designs zufrieden sind, klicken Sie auf Speichern Klicken Sie auf die Schaltfläche in der oberen rechten Ecke Ihres Bildschirms.

Befolgen Sie die oben genannten Schritte, um Bilder in der mobilen Ansicht für andere Themenvorlagen auszublenden, z. B. für Ihre Seitenleiste, einzelne Beiträge, Seiten usw.

Wenn Sie beispielsweise die vorgestellten Bilder Ihres Blog-Beitrags auf Mobilgeräten ausblenden möchten, können Sie Ihre Vorlage für einen einzelnen Beitrag bearbeiten und die Sichtbarkeitseinstellungen im Block „Hervorgehobenes Bild“ wie folgt ändern:

Schritt 5. Veröffentlichen Sie Ihre WordPress-Website

Wenn Sie bereit sind, Ihr benutzerdefiniertes Design live zu schalten, gehen Sie zu SeedProd » Theme Builder und drehen Sie den Schalter „SeedProd Theme aktivieren“ auf die Position „Ein“.

Jetzt können Sie eine Vorschau Ihrer Website anzeigen, um die Änderungen anzuzeigen. Wie Sie diesem Beispiel entnehmen können, sind die zuvor ausgewählten Bilder auf Mobilgeräten ausgeblendet.

Methode 2: Bilder in der mobilen Ansicht auf Landingpages ausblenden

Sie können SeedProd auch verwenden, um Bilder in der mobilen Ansicht für einzelne Zielseiten auszublenden. Dies ist eine hervorragende Lösung, wenn Sie Ihr bestehendes WordPress-Theme beibehalten und hochkonvertierende Landingpages in WordPress erstellen möchten.

Schritt 1. Installieren und aktivieren Sie SeedProd

Befolgen Sie zunächst die oben genannten Schritte, um das SeedProd-Plugin zu installieren und auf Ihrer Website zu aktivieren.

Note: Sie können für diese Methode die kostenlose Version von SeedProd verwenden, da die Einstellungen für die Gerätesichtbarkeit für alle Benutzer verfügbar sind. Für die größere Auswahl an Landingpage-Vorlagen verwenden wir jedoch SeedProd Pro.

Schritt 2. Wählen Sie eine Landingpage-Vorlage

Gehen Sie als Nächstes zu SeedProd » Landing Pages und klicken Sie auf Neue Landingpage hinzufügen Taste.

Auf der nächsten Seite können Sie eine beliebige Landingpage-Vorlage auswählen, darunter:

  • Demnächst
  • Wartungsmodus
  • 404 Seite
  • Verkauf
  • Webinar
  • Lead-Squeeze
  • Danke
  • Anmeldung

Wenn Sie eine Vorlage finden, die Ihnen gefällt, bewegen Sie den Mauszeiger darüber und klicken Sie auf das Häkchensymbol.

Anschließend können Sie Ihrer Zielseite einen Namen geben und auf klicken Speichern Sie und beginnen Sie mit der Bearbeitung der Seite Taste.

Schritt 3. Passen Sie Ihr Landingpage-Design an

Ihre Landingpage-Vorlage wird im selben Seitenersteller geöffnet, den wir zuvor zum Anpassen des WordPress-Themes verwendet haben. Es funktioniert auf die gleiche Weise und enthält dieselben Abschnitte und Elemente wie der Theme Builder.

Die einzigen Blöcke, die Sie auf Ihrer Landingpage nicht verwenden können, sind die WordPress- und WooCommerce-Vorlagen-Tags. Diese Blöcke sind ausgeblendet, da Landingpages keine dynamischen WordPress-Inhalte wie Blogbeiträge, Kategorien, Tags usw. verwenden.

Stattdessen können Sie Ihre Zielseite wie folgt anpassen:

  • Werbegeschenke
  • Animierte Schlagzeilen
  • Optin-Formulare
  • Countdown-Timer
  • Google Maps
  • Einbettungen in soziale Medien
  • Und vieles mehr.

Schritt 4. Bilder mit Gerätesichtbarkeit ausblenden

Sie können Bilder auf Mobilgeräten auf Ihrer Landingpage genauso ausblenden, wie Sie es mit dem Theme Builder getan haben. Klicken Sie einfach auf das Bild, das Sie ausblenden möchten. Stellen Sie dann auf der Registerkarte „Erweitert“ den Schalter „Auf Mobilgeräten ausblenden“ auf die Position „Ein“.

Das Bild wird ausgegraut, wenn Sie es auf Mobilgeräten in der Vorschau anzeigen. Dies bedeutet, dass das Bild für mobile Besucher ausgeblendet ist.

Passen Sie Ihre Zielseite weiter an, bis Sie mit dem Aussehen zufrieden sind.

Schritt 5. Veröffentlichen Sie Ihre Landingpage

Um Ihre benutzerdefinierte Zielseite zu veröffentlichen, klicken Sie auf den Dropdown-Pfeil Speichern Taste. Wählen Sie dann die aus Veröffentlichen Möglichkeit.

Wenn Sie eine Vorschau Ihrer Zielseite auf einem Mobilgerät anzeigen, können Sie das Bild, das Sie mit den Sichtbarkeitseinstellungen ausgeblendet haben, nicht sehen.

Methode 3: Ein Bild auf Mobilgeräten mit CSS ausblenden

Wir verstehen, dass einige Websitebesitzer es vorziehen, ihre Websites manuell anzupassen. Aus diesem Grund zeigt Ihnen die folgende Methode, wie Sie Bilder auf Mobilgeräten mithilfe von benutzerdefiniertem CSS ausblenden.

Note: Wir empfehlen diese Methode nur, wenn Sie mit Programmiersprachen vertraut sind. Sie können den integrierten WordPress-Customizer verwenden, um benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen.

Suchen Sie zunächst die Klasse des Inhaltselements, das Ihr Bild enthält. Zum Beispiel das hervorgehobene Bild Ihrer Blogbeiträge. Sie können es dann mithilfe der folgenden CSS-Klasse ausblenden:

@media only screen and (max-width : 320px) { .your-element-class { display: none; } }

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ätebreite anpassen, um sie an Ihr WordPress-Theme und Ihre Medienabfrage anzupassen.

In diesem Beispiel haben wir das Beitragsbild auf Mobilgeräten ausgeblendet, indem wir auf die „.featured-media img-Klasse“ gezielt haben:

Nur @media-Bildschirm und (maximale Breite: 782 Pixel) { .featured-media img{ display: none; } }

Wie Sie sehen, verschwindet das Bild bei kleineren Bildschirmgrößen automatisch.

Hier hast du es!

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, zu erfahren, wie Sie Bilder in der mobilen Ansicht in WordPress ausblenden. Diese Anleitung zum Hinzufügen einer Autorenbox zu WordPress könnte Ihnen auch gefallen.

Danke fĂĽrs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook fĂĽr weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.