{"id":367167,"date":"2023-02-18T11:09:00","date_gmt":"2023-02-18T08:09:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367167"},"modified":"2023-05-08T14:19:14","modified_gmt":"2023-05-08T11:19:14","slug":"so-erstellen-sie-eine-reaktionsschnelle-elementor-wordpress-website","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-eine-reaktionsschnelle-elementor-wordpress-website\/","title":{"rendered":"So erstellen Sie eine reaktionsschnelle Elementor-WordPress-Website"},"content":{"rendered":"\n

Da die meisten Benutzer \u00fcber mobile Ger\u00e4te auf das Internet zugreifen, kann es sich Ihre Website wirklich leisten, nicht responsive zu sein?<\/p>\n

Was ist Responsive Design wirklich?<\/h2>\n

Responsiv bedeutet also im Kontext einer Website, dass die Seite auf verschiedene Seitenverh\u00e4ltnisse reagiert<\/strong>, also auf unterschiedlichen Ger\u00e4ten nicht gleich aussieht, sondern sich an das Ger\u00e4t des Besuchers anpasst<\/strong>. Im Jahr 2019 haben mehr Benutzer mit ihren Mobilger\u00e4ten auf das Internet zugegriffen<\/a> als mit Desktop-Computern, aber Mobile-First-Design<\/a> \u2013 die Praxis, Websites haupts\u00e4chlich mit Blick auf mobile Benutzer zu erstellen \u2013 gibt es schon viel l\u00e4nger.<\/p>\n

Mit einem reaktionsschnellen Elementor-Design \u00e4ndern Sie im Grunde alle Komponenten Ihrer Website und ordnen sie neu an, damit sie auf einen unterschiedlich gestalteten Bildschirm passen<\/strong> \u2013 Desktop, Tablet (768 Pixel) und Mobilger\u00e4t (360 Pixel) \u2013 ohne an Qualit\u00e4t einzub\u00fc\u00dfen. Und da WordPress das beliebteste Content-Management-System \u00fcberhaupt ist, ist es kein Wunder, dass so viele Entwickler sich alle M\u00fche geben, reaktionsschnelle WordPress-Themes<\/a> zu erstellen, obwohl dies ebenfalls keine Garantie ist.<\/p>\n

Wie greife ich auf verschiedene Layouts in Elementor zu?<\/h2>\n

In der linken unteren Ecke<\/strong> finden Sie das Bildschirmsymbol. Wenn Sie es ausw\u00e4hlen, wird das Vorschau-Untermen\u00fc ge\u00f6ffnet. Dort finden Sie die Optionen f\u00fcr Vorschauen f\u00fcr Tablet- und Mobillayouts.<\/p>\n

\"So<\/a><\/p>\n

Die Desktop-Ansicht ist die Standardeinstellung, aber Sie k\u00f6nnen dies leicht \u00e4ndern. Sie sollten beachten, dass sich Ihre Vorschau \u00e4ndert, um sie an ein kleineres und anders gestaltetes Ger\u00e4t<\/strong> mit einem anderen Seitenverh\u00e4ltnis anzupassen, damit Sie ein Gef\u00fchl daf\u00fcr bekommen, wie Ihr Website-Layout auf jedem Ger\u00e4t angezeigt wird.<\/p>\n

\"So<\/a><\/p>\n

Wichtig ist, dass Sie daran denken, dass unabh\u00e4ngig davon, wie Sie Ihre kosmetischen Designoptionen im Tablet- oder Mobilmodus \u00e4ndern, Ihr Desktop-Modus und -Layout davon unber\u00fchrt bleiben<\/strong>. Auf diese Weise geht nichts von Ihrer Arbeit an irgendeinem Layout verloren.<\/p>\n

Welche Elemente kann ich anpassen?<\/h2>\n

Lassen Sie uns vor allem eines klarstellen \u2013 Sie k\u00f6nnen jedes Element anpassen, das mit dem unten gezeigten Symbol gekennzeichnet ist. F\u00fcr diese Elemente k\u00f6nnen wir die Werte f\u00fcr jedes Element separat f\u00fcr Desktop-, Tablet- und mobile Formate anpassen.<\/p>\n

\"So<\/a><\/p>\n

Die Art und Weise, wie Ihre Besucher Ihre Textelemente sehen, ist sehr wichtig. Wenn Ihre Schriftarten nicht f\u00fcr Mobilger\u00e4te geeignet sind, finden Ihre Besucher die Website m\u00f6glicherweise unlesbar<\/strong>, was sich wiederum auf Ihre SEO (Suchmaschinenoptimierung) auswirkt. Bei der Menge an Informationen, die Ihre Besucher einfach durch Text erhalten, k\u00f6nnen Sie dies nicht ignorieren. Eine gut lesbare Website sieht ordentlich, aufger\u00e4umt und professionell aus.<\/p>\n

Schauen Sie sich zum Beispiel diesen Beichtstuhl an:<\/p>\n

\"So<\/a><\/p>\n

Dies sieht in einem Desktop-Layout perfekt aus, insbesondere bei einem breiten Bildschirm. Aber auf einem kleineren Ger\u00e4t, insbesondere im Hochformat, sehen alle Textabschnitte, die die Horizontale bevorzugen, gegl\u00e4ttet und unleserlich aus<\/strong>.<\/p>\n

Sie k\u00f6nnen dies beheben, indem Sie das Ger\u00e4t ausw\u00e4hlen, f\u00fcr das Sie das Layout \u00e4ndern m\u00f6chten. Wenn Sie mit der Standardoption (Desktop) zufrieden sind, m\u00fcssen Sie noch einige Optimierungen f\u00fcr Tablets und Handys vornehmen.<\/p>\n

Wie jedes Element hat ein Textelement Attribute. Das erste, was Sie beachten sollten, ist das HTML-Tag. \u00c4ndern Sie nicht das HTML-Tag<\/strong>. Diese sind f\u00fcr SEO sehr wichtig und sollten, einmal gut eingerichtet, nicht mehr ver\u00e4ndert werden. Um die Textgr\u00f6\u00dfe zu \u00e4ndern, sehen Sie sich die Registerkarte Stil an.<\/strong><\/p>\n

\"So<\/a><\/p>\n

Suchen Sie die Typografieeinstellungen. Dort k\u00f6nnen Sie Schriftart, Gr\u00f6\u00dfe, Gewicht, Zeilenh\u00f6he und Buchstabenabstand \u00e4ndern. Wenn Sie die Ausrichtung Ihres Textes \u00e4ndern m\u00f6chten, finden Sie diese Option, indem Sie die Registerkarte Inhalt ausw\u00e4hlen.<\/p>\n

\"So<\/a><\/p>\n

Beachten Sie, dass einige \u00c4nderungen \u2013 wie z. B. Gro\u00dfbuchstaben umwandeln \u2013 auch auf anderen Ger\u00e4ten \u00fcbernommen<\/strong> werden. Typografieoptionen sind ger\u00e4tespezifisch. Eine wichtige \u00dcberlegung ist auch, dass Textelemente proportional angepasst werden sollten.<\/strong> Worauf Sie achten sollten, ist das Dimensionsverh\u00e4ltnis aller Textelemente.<\/p>\n

So sieht ein proportional modifizierter Abschnitt aus:<\/p>\n

\"So<\/a><\/p>\n

Elementor erstellt die Grundstruktur f\u00fcr Ihre Inhalte mithilfe von Abschnitten oder Zeilen<\/strong>. Die Zeilenh\u00f6he ist daher sehr wichtig. Einmal eingestellt, kann die Zeilenh\u00f6he f\u00fcr jedes Ger\u00e4t angepasst werden<\/strong>. Worauf Sie achten sollten, ist der Abstand zwischen dem Inhalt Ihres Elements und dem Zeilenrand.<\/p>\n

\"So<\/a><\/p>\n

Was auf einem Desktop-Ger\u00e4t gut aussehen mag, nimmt auf Mobilger\u00e4ten und Tablets viel vertikalen Platz ein. Um die Zeilenh\u00f6he anzupassen, w\u00e4hlen Sie die Zeile aus und w\u00e4hlen Sie dann die Bearbeitungsoption<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

W\u00e4hlen Sie dann die Registerkarte \u201eLayout“ und stellen Sie den Schieberegler \u201eMindesth\u00f6he“ nach Belieben ein. Sie k\u00f6nnen unterschiedliche H\u00f6hen f\u00fcr unterschiedliche Display-Layouts<\/strong> haben. Dies ist besonders wichtig, wenn Sie auch Ihre Schriftgr\u00f6\u00dfen anpassen.<\/p>\n

\"So<\/a><\/p>\n

R\u00e4nder und Polsterung<\/h3>\n

Was Sie auch im Auge behalten m\u00fcssen, sind R\u00e4nder und Polsterung. Ein Rand ist der Abstand zwischen Elementen, w\u00e4hrend Polsterung der Abstand zwischen den R\u00e4ndern eines Elements und seinem Inhalt ist<\/strong>. Unabh\u00e4ngig davon, ob Sie Ihre Website von Grund auf neu aufgebaut haben oder ob Sie an einer vorgefertigten Vorlage f\u00fcr<\/a> Elementor<\/strong> arbeiten, sollten Sie keine Probleme haben, durch die Elemente zu navigieren. Jedes Element in einem ausgew\u00e4hlten Abschnitt zeigt einen blauen Rahmen beim Schweben an \u2013 bewegen Sie einfach Ihre Maus \u00fcber ein Element und Sie sehen seinen Rahmen<\/strong>. Dies ist eine gute M\u00f6glichkeit, ein Gef\u00fchl f\u00fcr die Struktur eines Abschnitts zu bekommen.<\/p>\n

\"So<\/a><\/p>\n

W\u00e4hlen Sie ein Element und dann die Registerkarte Erweitert aus. F\u00fcr Polsterung und R\u00e4nder finden Sie vier Optionen: oben, rechts, unten und links<\/strong>. Hier geben Sie Ihre F\u00fcll- und Randwerte ein. Das Verkn\u00fcpfungssymbol auf der rechten Seite des Untermen\u00fcs sperrt sie in Bezug zueinander<\/strong>: Sie k\u00f6nnen ausw\u00e4hlen, dass alle den gleichen Wert haben oder f\u00fcr jeden Rand oder Abstand einen anderen Wert haben.<\/p>\n

\"So<\/a><\/p>\n

Das Erstellen von Spalten<\/a> kann Anzeigeprobleme verursachen, wenn es nicht f\u00fcr verschiedene Ger\u00e4te optimiert ist. Ihre bevorzugten Einstellungen h\u00e4ngen von der Anzahl der Spalten und deren Inhalt ab<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Standardm\u00e4\u00dfig stapelt Elementor Spalten auf Mobilger\u00e4ten untereinander<\/strong>. Das bedeutet, dass die Spalten nicht zusammengedr\u00fcckt werden und ihr Inhalt lesbar bleibt.<\/p>\n

\"So<\/a><\/p>\n

Um die Spalten f\u00fcr mobile Benutzer \u00fcbersichtlicher zu gestalten, k\u00f6nnen Sie die Reihenfolge der Spalten in jeder Zeile umkehren<\/strong> \u2013 w\u00e4hlen Sie einfach den Abschnitt, dann die Registerkarte \u201eErweitert“, das Untermen\u00fc \u201eResponsiv“ und schalten Sie die Schalter \u201eSpalten umkehren“ f\u00fcr das Tablet- und Mobilger\u00e4t-Layout um wie gew\u00fcnscht.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie beispielsweise ein Element in der Desktop-Ansicht ausw\u00e4hlen und dann die Registerkarte \u201eErweitert“ ausw\u00e4hlen und das Untermen\u00fc \u201eResponsiv“ ausw\u00e4hlen, sehen Sie drei Umschalter zum Ein-\/Ausblenden: f\u00fcr Mobilger\u00e4te, Tablets und Desktop-Ger\u00e4te. Diese k\u00f6nnen Sie verwenden, um Elemente oder Bereiche ein- oder auszublenden, je nachdem, auf welchem \u200b\u200bGer\u00e4t sie angezeigt werden. Diese Option ist nur f\u00fcr einige Elemente oder Abschnitte praktisch, die Ihre Besucher je nach verwendetem Ger\u00e4t m\u00f6glicherweise uninteressant oder belanglos finden, obwohl Sie sie verwenden k\u00f6nnen, um drei v\u00f6llig unterschiedliche Seiten zu gestalten, wenn Sie m\u00f6chten.<\/p>\n

Da haben Sie es: Die Anpassung Ihres Webseitendesigns f\u00fcr Mobilger\u00e4te und Tablets \u2013 und umgekehrt \u2013 war noch nie so einfach. Und denken Sie daran, dass das Erstellen von reaktionsschnellen Elementor-Websites nur eine der vielen Funktionen von Elementor ist. Wir sind hier, um Ihnen zu helfen, sie zu erkunden.<\/p>\n

Aufnahmequelle: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Erstellen Sie in nur wenigen einfachen Schritten eine reaktionsschnelle Elementor-Website f\u00fcr ein optimales Besuchererlebnis.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-367167","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\/367167","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=367167"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/367167\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=367167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=367167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=367167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}