Die Darstellung von Webseiten für mobile Geräte ist heutzutage elementar. Wir zeigen, wie Sie in Elementor die mobile Ansicht anpassen können.
Wenn Sie heutzutage Webseiten erstellen, sollten Sie diese grundsätzlich nach der Prämisse „mobile first“ designen. Das bedeutet, dass Sie Ihre Webseiten zuerst für die mobilen Geräte und danach erst für Desktop-Geräte erstellen und optimieren.
Auch in Elementor ist es problemlos möglich, die mobile Ansicht von Webseiten anzupassen und zu entwickeln. Wie genau das funktioniert und worauf Sie dabei achten sollten, erklären wir Ihnen in diesem Artikel.
Mobile Ansicht in Elementor aktivieren
Um die mobile Ansicht in Elementor zu aktivieren und in dieser zu arbeiten, öffnen Sie zunächst die Seite oder das Elementor-Template, das Sie bearbeiten möchten. Hier sehen Sie am oberen Rand des Bildschirms je ein Icon für die Desktop-Ansicht, die Tablet-Ansicht sowie die Smartphone-Ansicht.
Standardmäßig öffnet Elementor beim Öffnen des Editors die Desktop-Ansicht. Klicken Sie nun die Smartphone-Ansicht an, so reduziert Elementor nicht nur die Breite des Editors, sondern zeigt Ihnen die Webseite auch so an, wie sie auf mobilen Geräten dargestellt wird.
Haben Sie, trotz des „mobile first“-Ansatzes, bereits in der Desktop-Ansicht Elemente platziert, so sehen Sie hier auch direkt, wie diese Elemente in der mobilen Ansicht dargestellt werden. Natürlich können Sie hier auch direkt Änderungen vornehmen und die Darstellung in der mobilen Ansicht anpassen.
Eigenschaften für die mobile Ansicht anpassen
Viele Widgets in Elementor können für die 3 standardmäßigen Ansichten unterschiedlich eingestellt werden. Sie haben beispielsweise die Möglichkeit, die Breite oder die Abstände eines Containers oder eines anderen Widgets für jede der 3 Ansichten manuell einzustellen.
Wie auf dem Screenshot zu sehen, ist die Einstellung der Breite in diesem Widget auf die Darstellung für Smartphones eingestellt. Dies ist an dem kleinen Icon erkennbar.
Immer wenn Sie dieses Icon (oder eines der anderen beiden Icons, je nach aktuell gewählter Ansicht) sehen, dann handelt es sich um eine Einstellung, die Sie explizit für die jeweilige Ansicht einstellen können. Dies ist nicht bei allen, jedoch den relevantesten Eigenschaften möglich.
Wenn Sie Eigenschaften nicht explizit für eine Ansicht eingestellt haben, dann kann es sein, dass die Werte aus einer anderen Ansicht übernommen werden. Diese können Sie dann natürlich anpassen. Arbeiten Sie sich auch bei allen Eigenschaften, die Sie so anpassen, von der kleinsten (Smartphone) bis zur größten (Desktop) Ansicht durch.
Elementor-Bereiche in mobiler oder Desktop-Ansicht ausblenden
Es kann durchaus vorkommen, dass Sie gewisse Elemente oder ganze Bereiche und Container für bestimmte Ansichten ausblenden wollen. Auch dafür bietet Elementor eine entsprechende Funktion.
Wählen Sie zunächst das Element beziehungsweise Widget aus, welches Sie ausblenden wollen. Navigieren Sie dann in den Tab „Erweitert“ und suchen Sie hier die Einstellungen, die sich unter dem Reiter „Responsiv“ verstecken.
Hier können Sie für jede der 3 Ansichten festlegen, ob das Widget angezeigt werden soll, oder nicht. Wenn Sie dem „mobile first“-Ansatz folgen, sollten Sie diese Funktion selten benutzen müssen. Ist ein Element beispielsweise auf mobilen Geräten nicht adäquat zur Darstellung auf Desktops umzusetzen, dann sollte darauf verzichtet werden.
Dennoch kann es vorkommen, dass Sie auf diese Funktion zurückgreifen wollen oder müssen. Sie sollten Sie dennoch mit Bedacht und nur in absoluten Ausnahmefällen benutzen. Die DOM-Struktur Ihrer Webseite wird dadurch erhöht, was Auswirkungen auf die Ladezeit der Seite haben kann.
Auch Suchmaschinen können die ausgeblendeten Bereiche dennoch lesen. Dies kann im schlimmsten Fall sogar negative Auswirkungen auf Ihre Webseite haben.
Elementor bietet Ihnen noch viele weitere Möglichkeiten, um Inhalte und Seiten dynamisch anzuzeigen und darzustellen. Eine davon ist die Nutzung von Dynamic Conditions in Elementor, wodurch Sie beispielsweise Inhalte aus Advanced Custom Fields einbinden und darstellen lassen können.
