Zum Inhalt springen

Elementor mobile Ansicht bearbeiten

teil
mich

Einer der größten Vorteile von Elementor ist, dass du ohne große Probleme auch die mobile Ansicht deiner Website bearbeiten kannst. Wie das genau funktioniert und worauf du achten musst, zeige ich dir hier.

Inhalt

Wieso du die mobile Ansicht bearbeiten solltest

Wenn eine Website vor 15 Jahren noch nicht auf mobile Endgeräte Geräte optimiert wurde, konnte man das noch verzeihen. Der Anteil an mobilen Websitebesuchern war zu dieser Zeit noch quasi null, denn wenn man ins Internet wollte, benutzte man einen Computer oder Laptop.

Seit dem Release des iPhones befinden sich mobile Endgeräte jedoch auf dem Siegeszug und erreichen mittlerweile sogar teilweise über 50% der Websiteaufrufe. Deswegen ist eine responsive Ansicht deiner Website essentiell für den Erfolg.

Responsive Editor aktivieren

Um in Elementor die Mobile Ansicht für das Tablet oder Mobiltelefon zu bearbeiten, musst du zunächst die zu bearbeitende Seite oder den Block mit Elementor öffnen.

Elementor mobile Ansicht bearbeiten

Anschließend hast du links auf der Seite die Elementor Sidebar, in der du auch die Widgets aussuchen kannst. Ganz unten bei dieser Sidebar findest du auch die Footer Settings, in denen du einige weitere Einstellungen vornehmen kannst.

Klicke zunächst auf das Responsive Symbol um die mobile Ansicht zu bearbeiten.

Elementor Responsive Icon

Anschließend erscheint am oberen Rand des Bildschirmes eine neue Leiste mit drei Symbolen, für jedes Endgerät.

  • Grün ist die Desktopansicht
  • Rot ist die Tablet Ansicht
  • Gelb ist die Mobiltelefon Ansicht

Klicke auf die Ansicht, die du bearbeiten möchtest. Ich werde die Ansicht für das Mobiltelefon anpassen.

Elementor Ansichten

Die aktive Ansicht hat nun ein bläuliches Symbol und einen grauen Hintergrund und hebt sich somit von den anderen beiden Ansichten hervor. Doch bevor du anfängst die mobile Ansicht zu bearbeiten, solltest du dir klar sein, welche Änderungen du global (für alle Geräte) vornimmst und wie du gerätespezifische Einstellungen vornimmst und ggf. bestimmte Elemente für einzelne Ansichten ausblenden möchtest.

Gerätespezifische Einstellungen

Schriftgröße in mobiler Ansicht bearbeiten

Elementor bietet dir zwar die Möglichkeit die mobile Ansicht anzupassen, jedoch sind die Anpassungsmöglichkeiten begrenzt. Beispiele von möglichen, gerätespezifischen Einstellungen sind:

  • Textgröße
  • Textabstände
  • Ausrichtung
  • Eingangsanimationen
  • Layout
  • Margin und Padding

Wenn du nun also Änderungen in Elementor vornimmst, die nicht zu den Gerätespezifischen Einstellungen gehören, dann wird deine Änderung für die Ansicht aller anderen Geräte ebenfalls angepasst.

Ein Beispiel ist die Änderung eines Textes: Bearbeitest du gerade die Ansicht für das Mobiltelefon und änderst den Text, dann wird der Text auch für die Tablet und die Desktopansicht geändert. Änderst du hingegen die Textgröße des Titels, so wird die Änderung speziell für das ausgewählte Endgerät angepasst.

Das sind ganz schön viele Informationen auf ein mal und eine komplette Liste aller möglichen Änderungen aufzulisten, die du in Elementor vornehmen kannst um die mobile Ansicht zu bearbeiten wäre zu viel des Guten. Deswegen schauen wir uns ein mal genauer an, wie du selbst erkennen kannst, welche Änderungen global und welche gerätespezifisch sind.

Wie erkenne ich, ob eine Einstellung gerätespezifisch ist

Herauszufinden, ob eine Einstellung nur für eine bestimmte Geräteansicht durchgeführt wird, ist eigentlich ziemlich simpel:

Wie du in dem Screenshot „Elementor Mobile Icon“ siehst, befindet sich hinter „Ausrichtung“ ein kleines Symbol eines Mobiltelefons. Das heißt: immer, wenn du dieses Symbol hinter einer Einstellung siehst, dann weißt du, dass du die Einstellung ausschließlich für das ausgewählte Endgerät vorgenommen wird.

Elementor Mobile Icon

Wenn kein Symbol dahinter zu sehen ist, dann sind die vorgenommenen Einstellungen auch nicht gerätespezifisch und die Änderung, die du vornimmst wird automatisch auf allen Ansichten angepasst.

Wenn du nun zum Beispiel die Ausrichtung oder die Schriftgröße auf einer Ansicht bearbeiten möchtest, aber schon Anpassungen für andere Geräte vornehmen möchtest, dann kannst du sogar auf dieses Symbol klicken und ein anderes Gerät auswählen.

Elemente für bestimmte Geräte ausblenden

Wenn du deine Seite responsiv gestaltest und bei der Anpassung der mobilen Ansicht merkst, dass du bestimmte Elemente komplett für bestimmte Ansichten ausblenden möchtest, dann bietet dir Elementor auch die Möglichkeit ausgewählte Elemente oder sogar ganze Bereiche für definierte Endgeräte auszublenden.

Um ein Element auszublenden, klickst du dieses zunächst an und gehst in die Erweiterten Einstellungen. Anschließend findest den Unterpunkt Responsiv, den du auswählst

Anklicken -> Erweitert -> Responsiv -> Geräte auswählen, für die das Element versteckt werden solll.

Elementor Responsiv für Geräte verstecken

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

eugen

eugen

Scrum Master und so. Hab bock auf digitalen Erfolg. Fußball, kochen und digitaler Nomade. Test. 123.

Leave a Replay

Wer bin ich

eugen

eugen

Scrum Master und so. Hab bock auf digitalen Erfolg. Fußball, kochen und digitaler Nomade. Test. 123.

Letzte Beiträge

Lass mir doch nen Follow da!