{"id":366892,"date":"2023-01-22T20:32:00","date_gmt":"2023-01-22T17:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=366892"},"modified":"2023-04-26T09:51:55","modified_gmt":"2023-04-26T06:51:55","slug":"so-bearbeiten-sie-die-mobile-version-der-wordpress-site","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-bearbeiten-sie-die-mobile-version-der-wordpress-site\/","title":{"rendered":"So bearbeiten Sie die mobile Version der WordPress-Site"},"content":{"rendered":"\n<p>Warum ist die mobile Version Ihrer Website entscheidend f\u00fcr Ihren Erfolg?<\/p>\n<p>Beginnen wir mit der Tatsache, dass <a href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mehr als 50\u00a0% des weltweiten Internetverkehrs von Mobiltelefonen stammt<\/a>. Dies bedeutet buchst\u00e4blich, dass mehr als die H\u00e4lfte Ihrer Kunden Ihre Website von ihrem Handy aus besuchen. Ab 2018, als <strong>Google die Mobile-First-Indexierung von Websites einf\u00fchrte, ist <a href=\"https:\/\/themewp.inform.click\/de\/mobile-first-design-was-es-ist-und-warum-es-wichtig-ist\/\" title=\"responsives Webdesign\">responsives Webdesign<\/a><\/strong> nur noch wichtiger geworden, und die Konzentration auf das mobile Erlebnis einer Website wurde logischerweise zu einer Priorit\u00e4t f\u00fcr alle, die ihr Gesch\u00e4ft ernst nehmen. Ein weiterer wichtiger Vorteil mobilfreundlicher Websites ist, dass <strong>sie einfach und intuitiv sind<\/strong>. Sie bieten eine reibungslose Benutzererfahrung und erleichtern potenziellen Kunden die Kontaktaufnahme mit Ihnen. Au\u00dferdem laden sie schnell und machen das Teilen von Inhalten einfach und nat\u00fcrlich. Eine M\u00f6glichkeit, \u00fcber eine reaktionsschnelle Website nachzudenken, besteht darin, sie als kostenlose M\u00f6glichkeit zu sehen, in Suchmaschinen besser zu ranken. Warum sollten Sie diese Gelegenheit verpassen? <strong>Je besser Ihr Rang ist, desto mehr organische Suchergebnisse erhalten Sie, was mehr Leads und mehr Conversions bedeutet<\/strong>.<\/p>\n<hr \/>\n<h2>So zeigen Sie eine Vorschau der mobilen Version Ihrer Website an<\/h2>\n<p>Ein responsives WordPress-Theme garantiert viele Vorteile, aber Sie m\u00fcssen trotzdem <strong>in Echtzeit \u00fcberpr\u00fcfen, wie Ihre Website auf Smartphones aussieht<\/strong>. Es gibt viele m\u00f6gliche Variationen bei Bildschirmgr\u00f6\u00dfen und Browsern, sodass <strong>keine der mobilen Vorschauen Ihnen eine perfekte und 100 % genaue Vorschau bieten kann<\/strong>. Sie sollten sich immer auf die reale Erfahrung verlassen, die Sie beim Betrachten Ihrer Website auf einem echten Smartphone oder Mobilger\u00e4t erhalten. Dies k\u00f6nnte Sie dazu inspirieren, Ihre wichtigsten Zielseiten zu optimieren und verschiedene Versionen zu erstellen, die f\u00fcr das mobile Erlebnis optimiert sind.<\/p>\n<p>Sehen wir uns also an, wie Sie auf zwei verschiedene Arten eine Vorschau anzeigen k\u00f6nnen, wenn Sie eine f\u00fcr Mobilger\u00e4te optimierte WordPress-Site haben.<\/p>\n<h3>Verwendung des Theme Customizer von WordPress<\/h3>\n<p>Die erste und einfachste M\u00f6glichkeit, die Vorschau der mobilen Version anzuzeigen, ist die Verwendung des Theme Customizer von WP. Das Verfahren ist einfach. <a href=\"https:\/\/themewp.inform.click\/de\/so-melden-sie-sich-in-wenigen-einfachen-schritten-bei-wordpress-an\/\" title=\"Melden Sie sich bei Ihrem WordPress-\">Melden Sie sich bei Ihrem WordPress-<\/a> Dashboard an und gehen Sie zu <strong>Darstellung &gt; Anpassen<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7731a65d0.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7731a65d0.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Nachdem Sie auf den WordPress Theme Customizer geklickt und ihn ge\u00f6ffnet haben, <strong>sehen Sie alle Optionen im Men\u00fc auf der linken Seite<\/strong>. Abh\u00e4ngig von dem von Ihnen verwendeten Thema k\u00f6nnen einige Variationen in den angebotenen Optionen vorhanden sein.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773537821.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773537821.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p><strong>Beachten Sie das mobile Symbol am unteren Rand des Bildschirms<\/strong>. Klicken Sie darauf und Sie sehen eine <strong>Vorschau, wie Ihre Website auf Mobilger\u00e4ten aussieht<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7739771d3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7739771d3.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Wenn Sie die blauen Bearbeitungssymbole verwirren \u2013 keine Sorge. Sie sind nur in der Vorschau sichtbar und niemals auf Ihrer Live-Site.<\/p>\n<p>Tipp: Wenn Sie Ihren Blog noch nicht gestartet haben oder sich im Wartungsmodus befinden, ist <strong>diese Vorschaumethode sehr praktisch, da Sie damit \u00c4nderungen vornehmen und pr\u00fcfen k\u00f6nnen, wie sie aussehen, bevor Sie Ihre Website live<\/strong> schalten .<\/p>\n<h3>Verwenden des Ger\u00e4temodus der Entwicklertools von Google Chrome<\/h3>\n<p>Wenn Sie sich aus irgendeinem Grund nicht wohl f\u00fchlen, den WP Theme Customizer zu verwenden, <strong>k\u00f6nnen Sie jederzeit \u00fcberpr\u00fcfen, ob Sie mit dem Google Chrome-Browser WordPress f\u00fcr Mobilger\u00e4te optimiert haben<\/strong>. Es ist auch ein sehr einfaches und leichtes Verfahren, das aus ein paar Schritten besteht.<\/p>\n<p>\u00d6ffnen Sie einfach Ihren Google Chrome-Browser wie gewohnt und gehen Sie zu der Seite, die Sie \u00fcberpr\u00fcfen m\u00f6chten. Klicken Sie dann mit <strong>der rechten Maustaste auf die Seite und w\u00e4hlen Sie Inspect<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773c37a6b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773c37a6b.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Beachten Sie, dass Sie auf diese Weise <strong>eine Vorschau jeder Seite auf jeder Website sehen<\/strong> k\u00f6nnen, nicht nur auf Ihrer. Es k\u00f6nnte sogar die Website Ihres Konkurrenten sein.<\/p>\n<p>Auf der rechten Seite \u00f6ffnet sich ein neues Fenster und sieht so aus:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773fcd9ce.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773fcd9ce.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>In der Entwickleransicht k\u00f6nnen Sie den HTML-Quellcode Ihrer Website anzeigen.<br \/>\nKlicken Sie nun auf die Schaltfl\u00e4che <strong>Toggle Device Toolbar<\/strong>, um zur mobilen Ansicht zu gelangen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7742207a5.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7742207a5.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Sie werden einige \u00c4nderungen in der mobilen Vorschau bemerken: Ihre Website wird verkleinert, um sie an die mobile Bildschirmgr\u00f6\u00dfe anzupassen, und andere \u00c4nderungen k\u00f6nnen stattfinden. Achten Sie genau auf die Unterschiede und notieren Sie, was Sie \u00e4ndern sollten.<\/p>\n<p>\u00dcberpr\u00fcfen Sie, was passiert, wenn Sie versuchen, Ihren Mauszeiger \u00fcber die mobile Ansicht zu bewegen \u2013 es wird ein Kreis.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7744a51d5.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7744a51d5.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Der Sinn des Kreises besteht darin, den Touchscreen eines Mobilger\u00e4ts nachzuahmen.<\/p>\n<p>Tipp: Wenn Sie sehen m\u00f6chten, <strong>wie Ihr mobiler Bildschirm ein- und auszoomt, halten Sie die Umschalttaste gedr\u00fcckt und klicken und bewegen Sie Ihre Maus<\/strong>.<\/p>\n<p>Der Vorteil dieser Methode zur Vorschau Ihrer mobilen Website besteht darin, dass Sie sehen k\u00f6nnen, wie die Seite auf verschiedenen Arten von Smartphones aussieht. Diese zus\u00e4tzlichen Optionen befinden sich \u00fcber der mobilen Ansicht Ihrer Website. Egal, welche Art von Vorschau Sie ge\u00f6ffnet haben, als Sie auf Toggle Device Toolbar geklickt haben, hier k\u00f6nnen Sie die Bildschirmgr\u00f6\u00dfe des Ger\u00e4ts \u00e4ndern.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7746b6c41.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7746b6c41.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Tipp: Verwenden Sie das Drehen-Symbol in der oberen rechten Ecke, um den mobilen Bildschirm zu drehen. Sie k\u00f6nnen <strong><a href=\"https:\/\/themewp.inform.click\/de\/so-ueberpruefen-sie-website-elemente-in-ihrem-browser\/\" title=\"Elemente auf der Seite auch \u00fcberpr\u00fcfen,\">Elemente auf der Seite auch \u00fcberpr\u00fcfen,<\/a><\/strong> indem Sie mit der rechten Maustaste klicken und die Option \u00dcberpr\u00fcfen ausw\u00e4hlen.<\/p>\n<h2>Warum ist Page Builder wichtig f\u00fcr RWD?<\/h2>\n<p>RWD ist etwas, wor\u00fcber Sie von Anfang an bei der Erstellung Ihrer Website sorgf\u00e4ltig nachdenken m\u00fcssen. Es gibt viele Dinge zu analysieren, wenn Sie Ihre Website auf verschiedenen Bildschirmgr\u00f6\u00dfen gleicherma\u00dfen attraktiv, navigierbar und effektiv gestalten m\u00fcssen. <a href=\"https:\/\/themewp.inform.click\/de\/die-5-besten-drag-and-drop-wordpress-seitenersteller\/\" title=\"WordPress-Seitenersteller\">WordPress-Seitenersteller<\/a> spielen in diesem Prozess eine entscheidende Rolle, sie <strong>liefern Ihnen die Eckpfeiler des Designs Ihrer Website, daher m\u00fcssen Sie sich gut informieren, bevor Sie die Wahl treffen<\/strong>. Wenn Sie also etwas Zeit in die Recherche zu Seitenerstellern investieren, sparen Sie tats\u00e4chlich viel Zeit, die Sie f\u00fcr die Erstellung Ihrer Website aufwenden k\u00f6nnen.<\/p>\n<p>Basierend auf unserer Erfahrung sind <a href=\"https:\/\/themewp.inform.click\/de\/tipps-zum-einstieg-in-den-wpbakery-page-builder\/\" title=\"WPBakery\">WPBakery<\/a> und <a href=\"https:\/\/themewp.inform.click\/de\/elementor-wordpress-plugin-wie-leistungsfaehig-ist-es\/\" title=\"Elementor\">Elementor<\/a> eine ausgezeichnete Wahl, da sie ein breites Spektrum an unterschiedlichen Anforderungen erf\u00fcllen k\u00f6nnen.<\/p>\n<p><strong>Wenn Sie ein begrenztes Budget haben, ist Elementor die beste Wahl<\/strong>. Es ist ein einfach zu bedienendes, anf\u00e4ngerfreundliches Plugin, das eine sehr gro\u00dfz\u00fcgige kostenlose Version mit einem soliden Satz von Elementen hat. Es l\u00e4sst sich auch <strong>gut in andere f\u00fchrende WP-Plugins<\/strong> und -Dienste wie <a href=\"https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">MailChimp<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerce<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/leadin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HubSpot<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/wordpress-seo\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Yoast SEO<\/a> usw. integrieren. Wenn Sie sich ein Premium-Plugin leisten k\u00f6nnen, wird <strong>WPBakery Page Builder<\/strong> Sie nie entt\u00e4uschen. Es kommt mit einer unglaublich gro\u00dfen Sammlung von Elementen, einer F\u00fclle von Bl\u00f6cken und Optionen. Es ist auch einfach zu bedienen und l\u00e4sst viel Kreativit\u00e4t zu.<\/p>\n<p>Obwohl Seitenersteller f\u00fcr RWD unerl\u00e4sslich sind, ist <strong>das Design, das Sie verwenden m\u00f6chten, ebenfalls wichtig, da es einige erstaunliche Funktionen bieten kann<\/strong>. Wie Sie vielleicht wissen, entwickeln Themenautoren spezifische Widgets und Elemente, die separat von Seitenerstellern angepasst werden k\u00f6nnen. Viele dieser Elemente erm\u00f6glichen es Ihnen, die Reaktionsf\u00e4higkeit nach Ihren Bed\u00fcrfnissen einzustellen. Aus diesem Grund <strong>sollten Sie das Thema w\u00e4hlen, das von bekannten, vertrauensw\u00fcrdigen Autoren entwickelt wurde<\/strong>. Dies ist besonders wichtig, wenn Sie ein kostenloses WordPress-Theme verwenden m\u00f6chten. Um Ihre Zeit und Nerven zu sparen, haben wir unz\u00e4hlige kostenlose Themen getestet. Wenn Sie also ein ansprechendes, funktionsreiches und zuverl\u00e4ssiges kostenloses Design verwenden m\u00f6chten, empfehlen wir Ihnen, das <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/?campaign=EditMobileVersion&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi<\/a> -Design auszuprobieren .<\/p>\n<h2>So bearbeiten Sie die mobile Version Ihrer Website in Elementor<\/h2>\n<p>Man kann mit Sicherheit sagen, dass Elementor bei weitem der beste Seitenersteller ist, wenn es darum geht, die mobile Version Ihrer Website zu bearbeiten. <strong>Es kann vorkommen, dass Sie dieses kleine Symbol namens Ansichtsfenster-Symbol in den Einstellungen \u00fcbersehen haben<\/strong> :<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e77496f309.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e77496f309.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Dieses Symbol zeigt an, dass <strong>jeder Wert, neben dem es steht, separat f\u00fcr die Desktop- und f\u00fcr die mobile Site-Version bearbeitet werden kann<\/strong>. Nehmen wir zum Beispiel die Einstellungen f\u00fcr die Spaltenbreite \u2013 Sie k\u00f6nnen <strong>den Wert f\u00fcr Desktop, Mobilger\u00e4t und Tablet anpassen<\/strong>. Der Wert, den Sie f\u00fcr jedes Ger\u00e4t eingeben, gilt nur f\u00fcr das ausgew\u00e4hlte Ger\u00e4t. Beachten Sie, dass neben dem HTML-Tag kein Symbol angezeigt wird, was bedeutet, dass es f\u00fcr jedes Ger\u00e4t denselben Wert hat.<\/p>\n<p>Falls Sie den Wert f\u00fcr das mobile Ger\u00e4t \u00e4ndern m\u00f6chten, m\u00fcssen Sie nur die <strong>mobile Layoutoption ausw\u00e4hlen und die gew\u00fcnschten Werte eingeben<\/strong> (diese Werte werden nur auf mobilen Ger\u00e4ten implementiert). Auf der rechten Seite des Bildschirms haben Sie die Live-Vorschau aller \u00c4nderungen, die Sie vornehmen, damit Sie sofort sehen k\u00f6nnen, wie die neuen Werte auf dem Ger\u00e4t aussehen werden.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774c823e7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774c823e7.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Um zur Desktop-Ansicht zur\u00fcckzukehren, m\u00fcssen Sie zur <strong>Desktop-Layout-Option wechseln<\/strong>. Sie k\u00f6nnen dies tun, wie wir oben erw\u00e4hnt haben, oder indem Sie <strong>dieses kleine Symbol im unteren Men\u00fc auf der Seite verwenden<\/strong> :<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774f43937.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774f43937.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Eine weitere wichtige Sache, die im Zusammenhang mit der Reaktionsf\u00e4higkeit erw\u00e4hnt werden muss, ist, dass die <strong>Spalten und Zeilen f\u00fcr einzelne Ger\u00e4te<\/strong> deaktiviert werden k\u00f6nnen, dh wir k\u00f6nnen sagen, dass sie auf einigen Bildschirmgr\u00f6\u00dfen nicht sichtbar (oder sichtbar) sein werden.<\/p>\n<p>Um auf diese Option zuzugreifen, folgen Sie dem Pfad:<\/p>\n<ul>\n<li>Klicken Sie mit der rechten Maustaste auf die <strong>Zeile\/Spalte<\/strong><\/li>\n<li>W\u00e4hlen Sie <strong>Abschnitt bearbeiten<\/strong><\/li>\n<li>Klicken Sie auf die <strong>Registerkarte Erweitert<\/strong><\/li>\n<li>W\u00e4hlen Sie das <strong>Dropdown-Men\u00fc Responsiv aus<\/strong><\/li>\n<\/ul>\n<p>Diese Option ist sehr wichtig, falls wir einen Abschnitt haben, von dem wir wissen, dass er nur f\u00fcr die Anzeige auf dem Desktop sinnvoll ist, also werden wir ihn auf anderen Ger\u00e4ten stornieren. Und um das Fehlen auszugleichen, k\u00f6nnen wir einen Abschnitt erstellen, der auf allen anderen Ger\u00e4ten au\u00dfer dem Desktop angezeigt wird.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7751c005c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7751c005c.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Wenn es um Spalten geht, finden wir auch die <strong>Option &quot;Spalte umkehren&quot;<\/strong> (Tablet \/ Mobile). Am besten erkl\u00e4rt man sich das an einem Beispiel. Nehmen wir an, wir haben einen Abschnitt wie diesen auf dem Desktop, in dem der Inhalt <strong>in zwei Spalten mit Bildern aufgeteilt ist, gefolgt von einem kurzen Text<\/strong> :<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7754550c7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7754550c7.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Auf mobilen Ger\u00e4ten wird der Inhalt nat\u00fcrlich wie im Bild unten neu angeordnet, wobei der urspr\u00fcnglichen Reihenfolge vom Desktop gefolgt wird:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7756d019f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7756d019f.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<p>Die <strong>umgekehrte Spaltenoption erm\u00f6glicht es uns, die Reihenfolge eines bestimmten Abschnitts f\u00fcr mobile Ger\u00e4te oder Tablet-Layouts zu \u00e4ndern<\/strong>. Wenn wir dies f\u00fcr den ersten Abschnitt auf kleineren Ger\u00e4ten tun, ist das Ergebnis effektiver angezeigter Inhalt:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e775976759.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e775976759.jpg\" alt=\"So bearbeiten Sie die mobile Version der WordPress-Site\"><\/a><\/p>\n<h2>So bearbeiten Sie die mobile Version Ihrer Website mit Plugins<\/h2>\n<p>Fr\u00fcher oder sp\u00e4ter werden Sie versucht sein, eine Vielzahl von Plugins zu verwenden, die es Ihnen leicht machen, Ihrer Website eine Seitenleiste, einen CTA, ein Widget oder ein \u00e4hnliches Element hinzuzuf\u00fcgen. Dies ist der Moment, in dem viele vergessen, dass eine <strong>Seitenleiste oder ein anderes Element, das auf einem Desktop-Bildschirm perfekt funktioniert, auf Mobilger\u00e4ten m\u00f6glicherweise nicht so gut ist<\/strong>. Bevor Sie also diese praktischen Tools nutzen, pr\u00fcfen Sie, ob sie auch reaktionsschnell sind. Die Wahrheit ist, viele von ihnen sind und k\u00f6nnen Ihnen tats\u00e4chlich dabei helfen, UX zu verbessern. Aber um das sicher zu wissen, lesen Sie die Rezensionen oder finden Sie eine Demo, bevor Sie eine installieren. <strong>Solange sich das Plugin auf Mobilger\u00e4ten gut verh\u00e4lt, k\u00f6nnen Sie sicher sein, dass Ihre Website auf Erfolgskurs ist. Vergessen wir auch nicht, dass Ihre Optionen je nach verwendetem Thema sehr unterschiedlich sind<\/strong>. Ein <a href=\"https:\/\/wpklik.com\/tag\/premium\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Premium-Thema<\/a>garantiert sicherlich viel mehr M\u00f6glichkeiten.<\/p>\n<h3>Responsives Men\u00fc \u2013 Der erste Eindruck z\u00e4hlt<\/h3>\n<p>Das Men\u00fc ist die S\u00e4ule der Benutzererfahrung. Es ist das erste oder eines der ersten Dinge, auf die jemand klickt, wenn er Ihre Website besucht. <strong>Es wirkt sich darauf aus, wie schnell der Besucher findet, wof\u00fcr er gekommen ist, wie lange er bleibt und viele andere Aspekte von UX<\/strong>. Es ist wichtig, ein sch\u00f6nes, gut strukturiertes Men\u00fc zu haben, das die Navigation reibungslos macht, aber es ist nicht so einfach, wie es scheint. M\u00f6glicherweise haben Sie ein gro\u00dfartiges Men\u00fc, das auf einem Desktop perfekt funktioniert, aber f\u00fcr ein Handy zu schwer ist. Eine L\u00f6sung in diesem Fall besteht darin, Ihre Desktop-Version auch an die mobile Bildschirmgr\u00f6\u00dfe anzupassen. Aber was, wenn dadurch zu viele n\u00fctzliche Informationen verloren gehen? In diesem Fall k\u00f6nnen Sie ein anderes Men\u00fc erstellen, das nur f\u00fcr die Bildschirmgr\u00f6\u00dfe von Mobilger\u00e4ten angepasst ist. Viele WP-Themes bieten die M\u00f6glichkeit, dies zu tun. Wenn Ihr Thema nicht dazu geh\u00f6rt, machen Sie sich keine Sorgen, <strong>es gibt viele<a href=\"https:\/\/themewp.inform.click\/de\/top-10-wordpress-menu-plugins-zur-optimierung-ihrer-menus\/\" title=\"tolle Plugins f\u00fcr responsive Men\u00fcs\">tolle Plugins f\u00fcr responsive Men\u00fcs<\/a><\/strong>. Unsere Empfehlung ist das <a href=\"https:\/\/wordpress.org\/plugins\/responsive-menu\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Responsive Menu-Plugin<\/a>, das mehr als 150 Optionen zur Anpassung enth\u00e4lt und keine Programmierkenntnisse erfordert. Sie k\u00f6nnen damit Animationen und Hintergrundbilder hinzuf\u00fcgen, die Position von Men\u00fcschaltfl\u00e4chen festlegen und vieles mehr. Es ist unglaublich einfach zu bedienen und daher besonders praktisch f\u00fcr absolute Anf\u00e4nger.<\/p>\n<h3>Bilder und Galerien<\/h3>\n<p>Ein Bild spricht Tausende von Sprachen, <strong>stellen Sie also sicher, dass Ihr Bild auf jeder Bildschirmgr\u00f6\u00dfe genauso umwerfend aussieht<\/strong>. Wir leben in einer sehr visuell orientierten Kultur, und egal in welcher Nische Sie sich bewegen, gro\u00dfartige Fotos sind ein Muss. Aber egal, wie gro\u00dfartige Bilder Sie haben, wenn sie langsam geladen oder nicht ordentlich pr\u00e4sentiert werden, laufen Sie Gefahr, einen erheblichen Prozentsatz Ihres Publikums zu verlieren. Um dieses Szenario zu vermeiden, empfehlen wir das <a href=\"https:\/\/wordpress.org\/plugins\/envira-gallery-lite\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Envira Gallery Lite-Plug-<\/a> in, mit dem Sie <strong>leistungsstarke Galerien wie ein Profi erstellen<\/strong> k\u00f6nnen. Einige seiner Vorteile sind, dass es hochgradig f\u00fcr die Web- und Serverleistung optimiert ist, was eine gute Nachricht f\u00fcr Ihre SEO ist.<\/p>\n<h3>Social-Sharing-Schaltfl\u00e4chen<\/h3>\n<p><a href=\"https:\/\/themewp.inform.click\/de\/die-5-besten-social-media-sharing-wordpress-plugins-2022\/\" title=\"Wenn Sie ein gro\u00dfartiges, ansprechendes Men\u00fc und beeindruckende Galerien haben, m\u00fcssen Sie sich als N\u00e4chstes um die Social-Sharing-Schaltfl\u00e4chen\">Wenn Sie ein gro\u00dfartiges, ansprechendes Men\u00fc und beeindruckende Galerien haben, m\u00fcssen Sie sich als N\u00e4chstes um die Social-Sharing-Schaltfl\u00e4chen<\/a> k\u00fcmmern. <strong>Ihre Gr\u00f6\u00dfe sollte dem Ger\u00e4t angepasst sein<\/strong>. Ein gro\u00dfer Button auf einem kleinen Bildschirm l\u00e4sst den Besucher okzidental klicken, und das ist ziemlich irritierend. Andererseits sind kleine Buttons auf einem gro\u00dfen Bildschirm nicht so leicht zu erkennen. Ein Plug-in, mit dem Sie benutzerdefinierte Schaltfl\u00e4chen erstellen k\u00f6nnen, ist das <a href=\"https:\/\/wordpress.org\/plugins\/sassy-social-share\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sassy Social Share-Plug-<\/a> in. Einfach zu bedienen, v\u00f6llig kostenlos und anf\u00e4ngerfreundlich, macht es das Teilen f\u00fcr Sie und die Besucher Ihrer Website zum Kinderspiel.<\/p>\n<h3>Mobile Firendly-Websites<\/h3>\n<p>In Situationen, in denen Sie Ihre Website schnell mobil reagieren m\u00fcssen, gibt es keine bessere L\u00f6sung als ein Plugin wie <a href=\"https:\/\/wordpress.org\/plugins\/wptouch\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WPtouch<\/a>. Dieses Plugin ist so gestaltet, dass es <strong>Ihrer WP-Site automatisch ein einfaches und elegantes mobiles Design hinzuf\u00fcgt<\/strong>. Die Tatsache, dass es von Google empfohlen wird, sagt viel \u00fcber seine Wirksamkeit aus. Selbst wenn Sie also keine mobile Version Ihrer Website haben, kann ein Plugin wie dieses sofort eine f\u00fcr Mobilger\u00e4te optimierte Version Ihrer Website aktivieren, sodass Sie Ihr Ranking nicht verlieren. Au\u00dferdem k\u00f6nnen Sie viele Aspekte des Erscheinungsbilds der Website anpassen.<\/p>\n<p>Die Ladegeschwindigkeit von Seiten ist auch ein sehr wichtiger Aspekt der Benutzererfahrung, insbesondere auf Mobilger\u00e4ten. Wenn Sie in diesem Bereich vor einigen Herausforderungen stehen, sollten Sie das <a href=\"https:\/\/wordpress.org\/plugins\/accelerated-mobile-pages\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Accelerated Mobile Pages<\/a> -Plug-in verwenden, da dies eine der schnellsten und einfachsten M\u00f6glichkeiten ist, die Ladegeschwindigkeit Ihrer Website zu verbessern.<\/p>\n<h3>Vermeiden Sie das Hinzuf\u00fcgen von Popups auf Mobilger\u00e4ten<\/h3>\n<p>Popups sind selten am\u00fcsant, aber auf Mobiltelefonen sind sie besonders irritierend. Sie bedecken einen gro\u00dfen Teil des Bildschirms und verlangen von einem Besucher, sie zu schlie\u00dfen, bevor er auf den Inhalt der Seite zugreift. Daher ist <strong>es am besten, sie in der mobilen Version Ihrer Website vollst\u00e4ndig zu vermeiden<\/strong>. Wie Sie sie vermeiden, h\u00e4ngt haupts\u00e4chlich von Ihrem Dienstanbieter ab, aber die meisten von ihnen haben eine Option, um aufdringliche Popups auf Mobiltelefonen zu deaktivieren. Denken Sie auch <strong>daran, dass Google Websites mit sehr aufdringlichen Popups bestraft<\/strong>.<\/p>\n<h3>Abschlie\u00dfend<\/h3>\n<p>Da die Anzahl der Personen, die Smartphones f\u00fcr den Zugriff auf das Internet verwenden, stetig zunimmt, ist es sinnvoll, viel mehr L\u00f6sungen und Optionen f\u00fcr die mobilen Versionen von Websites zu erwarten. Designer arbeiten hart daran, die F\u00fclle von Nutzungsmustern anzugehen, aber die Grundlagen von RWD sind die gleichen \u2013 stellen Sie sicher, dass Sie ein <a href=\"https:\/\/themewp.inform.click\/de\/10-erstaunliche-mobilfreundliche-wordpress-themes-2022\/\" title=\"mobilfreundliches WP-Thema\">mobilfreundliches WP-Thema<\/a> und einen Seitenersteller w\u00e4hlen, der alle Optionen bietet, die Sie ben\u00f6tigen.<\/p>\n<p>Wie reaktionsschnell ist Ihre Website also? M\u00fcssen Sie viele \u00c4nderungen vornehmen, um es mobilfreundlicher zu machen? Teilen Sie uns Ihre Antworten mit und fragen Sie im Kommentarbereich nach weiteren Informationen.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Erfahren Sie, wie Sie die mobile Version der WordPress-Site schnell und einfach bearbeiten, um maximalen Erfolg zu erzielen und gro\u00dfartige Ergebnisse zu erzielen.<\/p>\n","protected":false},"author":1,"featured_media":364361,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-366892","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/366892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=366892"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/366892\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/364361"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=366892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=366892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=366892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}