Machen Sie Ihre Elementor-Website mobiler

Eine auf Mobilgeräte reagierende Website ist ein wesentlicher Bestandteil jedes Online-Geschäfts.

Google hat die Geschwindigkeit des Ladens mobiler Seiten als Schlüsselfaktor für das Suchranking einer Website verwendet. Dies liegt hauptsächlich daran, dass mehr als die Hälfte des globalen Webverkehrs aus dem mobilen Verkehr stammt.

Daher ist eine auf Mobilgeräte ansprechende Website sowohl für die Gesundheit Ihrer Website als auch für ein besseres Ranking in der Google-Suchmaschine unvermeidlich. mit dem Seitenersteller von Elementor responsive Website für Mobilgeräte erstellen können

• Was ist das reaktionsschnelle Website-Design von Elementor?
• So passen Sie die Einstellungen für Mobilgeräte, Desktops und Registerkarten an
• Passen Sie die Überschrift in Ihrem mobilen Display an
• Passen Sie die Polsterung oder die Ränder für Mobilgeräte an
• Erstellen Sie jede Spalte horizontal und sie passt sich wunderbar an alle Geräte an
• Ändern Sie das Hintergrundbild gemäß der Mobil- / Desktopansicht
• Ändern Sie die Sichtbarkeit eines Abschnitts in der Desktop- / Mobilansicht
• Ändern Sie die Spaltenreihenfolge
• Erstellen Sie einen alternativen Abschnitt
• Passen Sie die Spaltenbreite an
• Fazit

Was ist das reaktionsschnelle Website-Design von Elementor?

Ein responsives Layout funktioniert innovativ, indem es den gesamten Inhalt automatisch entsprechend jeder Bildschirmgröße skaliert. Es passt die Größe von Bildern und Inhalten auf dem mobilen Bildschirm automatisch an, sodass Ihre Zuschauer Ihre Inhalte ohne Aufwand anzeigen können.

Die meisten von uns kaufen ein Thema, das behauptet, auch mobil ansprechbar zu sein. Es kann jedoch frustrierend sein, wenn das Design Ihres Themas auf dem mobilen Bildschirm vollständig zusammenbricht.

Um solche Situationen zu überwinden, haben wir eine responsive Lösung für Mobilgeräte entwickelt, mit der Sie Ihr Website-Design mit responsiven Layout-Tools Elementor Page Builder Mit Hilfe dieser mobilen Responsive-Tools können Sie jede Ecke Ihres Website-Layouts optimieren, insbesondere Typografie, Padding, Margin und mobile Ausrichtung. Außerdem können Sie die Spalteneinstellungen ändern und auf Mobilgeräten bestellen.

Jetzt können Sie die mobilen Einstellungen Ihrer Seite bearbeiten, indem Sie in den mobilen Ansichtsmodus wechseln und die folgenden Optionen aktivieren, um sie an das mobile Layout anzupassen.

1. Überprüfen Sie, ob eine Überschrift auf einem mobilen Bildschirm zu groß erscheint.
2. Überprüfen Sie die Auffüllung des Inhalts oder des Bereichs an den Seiten des Inhalts
3. Überprüfen Sie die Ausrichtung der Seitenspalten. Wie sieht sie perfekt aus? zentriert, rechts oder links
4. Überprüfen Sie die Spaltenreihenfolge, wenn sie in der richtigen Reihenfolge angezeigt werden oder Sie sie ändern müssen.

Lassen Sie uns nun tiefer gehen und herausfinden, wie sich die Dinge mit dem Elementor Page Builder entwickeln werden.

So passen Sie die Einstellungen für Mobilgeräte, Desktops und Registerkarten an

Fast alle bearbeitbaren Funktionen bieten die Möglichkeit, die Einstellungen für Mobilgeräte, Desktops und Registerkarten anzupassen. Wenn Sie unten im Menü auf den Reaktionsmodus klicken

Passen Sie die Überschrift in Ihrem mobilen Display an

Manchmal möchten wir eine fette und markante Überschrift auf unserer Desktop-Site, die auf dem Desktop-Display einwandfrei aussieht. Wenn Sie jedoch die mobile Ansicht aktivieren, nimmt die Überschrift den gesamten Bildschirm ein und sieht nicht so aus, als würde sie hineinpassen.

Sie können die Textgröße jedes Textelements auf der Registerkarte und auf Mobil anpassen. Sie können auch verschiedene Textgrößen für mobile Überschriften festlegen, die auf dem mobilen Bildschirm gut aussehen und besser in den Bildschirm passen. Auf dieser Demoseite habe ich eine Überschrift erstellt, die auf der Desktop-Site gut aussieht, während sie auf dem mobilen Bildschirm den gesamten Bildschirm einnimmt.

Wenn ich auf die Bearbeitungsoption der Überschriftenspalte klicke, kann ich in den Typografiebereich gehen, wo ich die Überschriftengröße anpassen kann, die auf dem Desktop und auch auf dem mobilen Bildschirm gut aussieht. Ich kann beide separat steuern. In meiner Desktop-Site-Ansicht beträgt die Überschriftengröße 49 Pixel, in der mobilen Ansicht passt sie jedoch nicht

Zum Nachjustieren klicke ich auf den mobilen Reaktionsmodus> Stil> Typografie> px-Größe auf 30 einstellen, was leicht in den mobilen Bildschirm passt.

Passen Sie die Polsterung oder die Ränder für Mobilgeräte an

Beim Anpassen der Auffüllungen wird empfohlen, keine Werte in Pixel anstelle von festgelegten Werten in EM oder Prozent zu verwenden, da die Größe relativ zur Gesamtbildschirmgröße beibehalten wird.

Sie können sehen, dass wir rechts und links eine Polsterung von 70 Pixel verwendet haben, was auf der Desktop-Site gut aussieht. Die mobile Ansicht für diese Einstellung ist jedoch völlig durcheinander.

Wir können die Polsterung auf jeder Seite auf 17 px einstellen, dann stellt sich heraus, dass alles in Ordnung ist.

Alternativ können Sie die Einstellung für die gesamte Spalte auf 750 Pixel festlegen, wobei Ihr Inhalt in einem Feld angezeigt wird, ohne dass der Bildschirm sowohl in der Desktop- als auch in der mobilen Ansicht angepasst werden muss. Der Inhalt innerhalb der Box wird automatisch angepasst.

Erstellen Sie jede Spalte horizontal und sie passt sich wunderbar an alle Geräte an

Sobald Sie eine Spalte horizontal erstellt haben, was die Designer am meisten bevorzugen, können Sie die Abschnitte duplizieren und Zeit sparen. Erstellen Sie jeweils einen Abschnitt und verwenden Sie ihn erneut, wenn Sie Zeit sparen möchten.

Ändern Sie das Hintergrundbild gemäß der Mobil- / Desktopansicht

Einige Hintergrundbilder sehen in der Desktop-Ansicht gut aus, aber es besteht die Möglichkeit, dass das Bild nicht so gut aussieht wie auf dem mobilen Bildschirm. Denken Sie also kreativ und wählen Sie ein anderes Bild auf dem mobilen Bildschirm. Um eine andere mobile Ansicht auszuwählen, klicken Sie auf den Abschnitt> Registerkarte Stil> klicken Sie auf das Gerätesymbol und wählen Sie die mobile Ansicht aus. Unabhängig davon, welches Bild Sie auswählen, wird es nur in der mobilen Ansicht angezeigt.

Ändern Sie die Sichtbarkeit eines Abschnitts in der Desktop- / Mobilansicht

Sie können auch die Sichtbarkeit eines Abschnitts oder einer Spalte je nach Gerät steuern.

Manchmal zeigen wir unsere Inhalte oder Bilder in zwei oder drei Abschnitten oder verschiedenen Spalten an, aber wir möchten sie nicht auf Mobilgeräten anzeigen. Aus diesem Grund kann Elementor den Abschnitt ausblenden, den Sie in der mobilen Ansicht nicht anzeigen möchten.

Gehen Sie zu> Abschnittseinstellungen> Erweitert> Ansprechend. Dort sehen Sie verschiedene Möglichkeiten oder visuelle Einstellungen. Sie können den Abschnitt auf dem Desktop ausblenden, auf der Registerkarte ausblenden oder auf Mobilgeräten ausblenden, je nach Ihren Vorlieben.

Ändern Sie die Spaltenreihenfolge

Sie können die Spaltenreihenfolge auch im Abschnitt Einstellungen ändern. Gehe zu; Abschnittseinstellungen> Erweitert> Antwort> Spalte umkehren und klicken Sie auf Ja.

Erstellen Sie einen alternativen Abschnitt

Erstellen Sie alternative Abschnitte in der Mobil- und Desktopansicht. Manchmal sieht der Schiebereglerbereich auf Mobilgeräten nicht so nützlich aus wie auf dem Desktop, sodass Sie einen anderen Abschnitt verwenden können, anstatt den Schiebereglerbereich zu verwenden. Sie können dies tun, indem Sie zur Registerkarte Erweitert gehen> die Sichtbarkeit des Abschnitts, den Sie nicht anzeigen möchten, aktivieren / deaktivieren und ein alternatives Bild hinzufügen.

Passen Sie die Spaltenbreite an

Alle Spaltenabschnitte erhalten eine Breite von 100%, wenn Sie sie in der mobilen Ansicht anzeigen. Die Breite kann jedoch gemäß der Spaltenbreite in Mobile geändert werden. Wenn Sie zwei Spalten haben, können Sie die maximale Breite jedes Abschnitts auf 50% festlegen.

Fazit

Elementor verfügt über alle leistungsstarken Funktionen zur Steuerung des reaktionsschnellen Spaltenlayouts aller Bildschirmgrößen. Sie können jeden Abschnitt gemäß der Auswahl des Ansichtsmodus neu einstellen. Das Beibehalten einer mobilfreundlichen Website ist unvermeidlich, da der Google-Algorithmus das Ranking mobiler Websites am meisten berücksichtigt. Responsive Websites sind nicht nur wichtig, um eine bessere Suchmaschinenoptimierung zu erzielen, sondern Sie müssen auch mehr Traffic erzielen, da mehr als 80% des Traffics aus mobilen Ansichten stammen.

Jetzt verfügt der Elementor-Seitenersteller über exklusive Funktionen, mit denen Benutzer ohne großen Aufwand eine mobilfreundliche Website erstellen können. Hoffentlich finden Sie meinen Artikel hilfreich und haben alle Ihre Antworten zum Erstellen einer reaktionsfähigen Website mit Elementor erhalten.