Machen Sie Ihre Elementor-Website mobilfreundlicher und responsiver

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

Google nutzt die Ladegeschwindigkeit mobiler Seiten als Schlüsselfaktor für das Suchranking einer Website. Das liegt vor allem daran, dass mehr als die Hälfte des weltweiten Web-Traffics aus mobilem Traffic stammt.

Daher ist eine auf Mobilgeräte reagierende Website sowohl für die Gesundheit Ihrer Website als auch für ein besseres Ranking in der Google-Suchmaschine unumgänglich. In diesem Artikel konzentrieren wir uns darauf, wie wir mit dem Elementor-Seitenersteller auf Mobilgeräte reagierende Website

• Was ist das responsive Website-Design von Elementor?
• So passen Sie die Mobil-, Desktop- und Tab-Einstellungen an
• Passen Sie die Überschrift in Ihrem mobilen Display an
• Passen Sie den Abstand 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 entsprechend der Mobil-/Desktop-Ansicht
• Ändern Sie die Sichtbarkeit eines beliebigen Abschnitts in der Desktop-/mobilen Ansicht
• Ändern Sie die Spaltenreihenfolge
• Erstellen Sie einen alternativen Abschnitt
• Spaltenbreite anpassen
• Abschluss

Was ist das responsive Website-Design von Elementor?

Ein responsives Layout funktioniert innovativ, indem der gesamte Inhalt automatisch an die jeweilige Bildschirmgröße angepasst wird. Es passt die Größe von Bildern und Inhalten auf dem mobilen Bildschirm automatisch an, sodass Ihre Zuschauer Ihre Inhalte ohne Aufwand sehen können.

Die meisten von uns kaufen ein Theme, das angeblich auch auf Mobilgeräte reagiert. Allerdings kann es frustrierend sein, wenn das Design Ihres Themes auf dem mobilen Bildschirm völlig zusammenbricht.

Um solche Situationen zu meistern, haben wir eine mobile Responsive-Lösung entwickelt, mit der Sie Ihr Website-Design mit den des Elementor Page Builders . Mithilfe dieser auf Mobilgeräte reagierenden Tools können Sie jede Ecke Ihres Website-Layouts optimieren, insbesondere Typografie, Innenabstand sowie Rand und mobile Ausrichtung. Außerdem können Sie die Spalteneinstellungen und die Reihenfolge auf Mobilgeräten ändern.

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 Polsterung des Inhalts oder den Platz 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, ob sie in der richtigen Reihenfolge angezeigt werden oder ob Sie sie ändern müssen.

Lassen Sie uns nun tiefer in die Materie eintauchen und herausfinden, wie die Dinge mit dem Elementor Page Builder funktionieren werden.

So passen Sie die Mobil-, Desktop- und Tab-Einstellungen an

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

Passen Sie die Überschrift in Ihrem mobilen Display an

Manchmal möchten wir auf unserer Desktop-Site eine fette und hervorstechende Überschrift, die auf dem Desktop-Display völlig in Ordnung aussieht. Wenn Sie jedoch die mobile Ansicht einschalten, 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 Tabs und Mobilgeräten anpassen. Sie können auch unterschiedliche 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 großartig aussieht, während sie auf dem mobilen Bildschirm den gesamten Bildschirm einnimmt.

Wenn ich auf die Bearbeitungsoption der Überschriftenspalte klicke, kann ich zum Abschnitt „Typografie“ wechseln, 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 hinein

Um die Anpassung vorzunehmen, klicke ich auf den Responsive-Modus für Mobilgeräte > Stil > Typografie > Passe die Pixelgröße auf 30 an, damit sie problemlos in den mobilen Bildschirm passt.

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

Beim Anpassen der Abstände wird empfohlen, keine Werte in Pixeln anstelle von festgelegten EM- oder Prozentwerten zu verwenden, da dadurch die Größe im Verhältnis zur gesamten Bildschirmgröße erhalten bleibt.

Sie können sehen, dass wir rechts und links einen Abstand von 70 Pixeln verwendet haben, was auf der Desktop-Site gut aussieht. Allerdings ist die mobile Ansicht für diese Einstellung ein völliges Durcheinander.

Wir können die Polsterung auf jeder Seite auf 17 px anpassen, dann ist alles völlig in Ordnung.

Alternativ können Sie die Einstellung für die gesamten Spalten auf 750 Pixel festlegen, sodass Ihre Inhalte in einem Feld angezeigt werden, ohne dass der Bildschirm sowohl in der Desktop- als auch in der Mobilansicht angepasst werden muss. Der Inhalt der Box wird automatisch angepasst.

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

Sobald Sie die 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 bei Bedarf wieder, um Zeit zu sparen.

Ändern Sie das Hintergrundbild entsprechend der Mobil-/Desktop-Ansicht

Einige Hintergrundbilder sehen in der Desktop-Ansicht gut aus, es besteht jedoch die Möglichkeit, dass das Bild nicht so größer 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. Welches Bild Sie nun auswählen, es wird nur in der mobilen Ansicht angezeigt.

Ändern Sie die Sichtbarkeit eines beliebigen Abschnitts in der Desktop-/mobilen Ansicht

Sie können auch die Sichtbarkeit jedes Abschnitts oder jeder 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 > Abschnitt Einstellungen > Erweitert > Responsiv. Dort sehen Sie verschiedene Möglichkeiten oder visuelle Vorlieben; Sie können den Abschnitt je nach Wunsch auf dem Desktop, auf der Registerkarte oder auf Mobilgeräten ausblenden.

Ändern Sie die Spaltenreihenfolge

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

Erstellen Sie einen alternativen Abschnitt

Erstellen Sie alternative Abschnitte in der Mobil- und Desktop-Ansicht. Manchmal sieht der Slider-Bereich auf Mobilgeräten nicht so nützlich aus wie auf dem Desktop, sodass Sie anstelle des Slider-Bereichs einen anderen Bereich verwenden können. Sie können dies tun, indem Sie zur Registerkarte „Erweitert“ gehen > die Sichtbarkeit des Abschnitts, den Sie nicht anzeigen möchten, ein-/ausschalten und ein alternatives Bild hinzufügen.

Spaltenbreite anpassen

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

Abschluss

Elementor verfügt über alle leistungsstarken Funktionen zur Steuerung des reaktionsschnellen Spaltenlayouts aller Bildschirmgrößen. Sie können jeden Abschnitt entsprechend der Auswahl des Ansichtsmodus neu anpassen. Die Beibehaltung einer mobilfreundlichen Website ist unvermeidlich, da der Google-Algorithmus das Ranking mobilfreundlicher Websites am meisten berücksichtigt. Responsive Websites sind nicht nur für eine bessere SEO unerlässlich, sondern Sie müssen auch mehr Traffic generieren, da mehr als 80 % des Traffics aus mobilen Aufrufen stammen.

Jetzt verfügt der Elementor-Seitenersteller über exklusive Funktionen, die es seinen Benutzern ermöglichen, ohne großen Aufwand eine für Mobilgeräte optimierte Website zu erstellen. Ich hoffe, dass Sie meinen Artikel nützlich finden und alle Ihre Antworten zum Erstellen einer responsiven Website mit Elementor erhalten haben.