Zusammenhang Desktop- und Mobile-Einstellungen

Alles, was Sie für den Desktop an Größen angeben, ist zunächst auch für die mobilen Einstellungen gültig. Abweichungen müssen Sie gezielt festlegen. Vom großen Bildschirm werden die Einstellungen weitergegeben, umgekehrt jedoch nicht. Änderungen in der mobilen Ansicht haben keine Auswirkungen auf die Desktop-Ansicht.

---

---

Geltung der Einstellungen

1. Standardverhalten:
   In Elementor gilt grundsätzlich, dass die Desktop-Einstellungen die Standardwerte sind. Das bedeutet, dass alle Anpassungen, die Sie für Elemente in der Desktop-Ansicht vornehmen, auch in der mobilen Ansicht sichtbar sind, es sei denn, Sie nehmen spezifische Anpassungen für mobile Geräte vor.
2. Anpassungen für mobile Geräte:
   Wenn Sie in der mobilen Ansicht Änderungen vornehmen, z. B. die Schriftgröße auf 18px setzen, überschreiben diese Einstellungen die Desktop-Standardwerte für die mobile Ansicht. Das bedeutet, dass die mobile Schriftgröße nur auf mobilen Geräten angezeigt wird, während die Desktop-Einstellung für Desktop-Geräte weiterhin gilt.
3. Wichtigkeit der spezifischen Anpassungen:
   Dies führt zu einer wichtigen Praxis im responsiven Design: Es ist oft notwendig, spezifische Anpassungen für mobile Geräte vorzunehmen, um sicherzustellen, dass die Benutzererfahrung auf kleineren Bildschirmen optimal ist. Sie sollten die Layouts, Schriftgrößen und Abstände für mobile Geräte gezielt anpassen, um sicherzustellen, dass sie gut lesbar und benutzerfreundlich sind.

---

 

---

Praktische Beispiele für den Zusammenhang

1. Typografie

• Desktop:
  Angenommen, Sie setzen die Schriftgröße eines Titels auf 32px für die Desktop-Ansicht.
• Mobile:
  Wenn Sie dann in der mobilen Ansicht die Schriftgröße auf 24px ändern, gilt diese 24px nur für mobile Geräte.
  Die Desktop-Version bleibt bei 32px.

2. Abstände

• Desktop:
  Sie haben einen Außenabstand (Margin) von 50px für einen Abschnitt auf Desktop gesetzt.
• Mobile:
  In der mobilen Ansicht könnten Sie diesen Abstand auf 20px reduzieren, um mehr Platz auf dem Bildschirm zu schaffen. Die mobile Einstellung hat Vorrang und wird nur auf mobilen Geräten angewendet.

3. Sichtbarkeit von Elementen

• Desktop:
  Ein bestimmtes Widget ist sichtbar und hat auf Desktop eine große Darstellung.
• Mobile:
  Sie können entscheiden, dass dieses Widget auf Mobilgeräten nicht angezeigt werden soll. In diesem Fall wird die Sichtbarkeit für mobile Geräte angepasst, während die Desktop-Einstellungen weiterhin gültig bleiben.

 

Woran erkenne ich,
dass Eigenschaften variabel einstellbar sind oder nicht?

1. Responsive Symbole

In Elementor gibt es kleine Symbole neben den Einstellungsfeldern, die anzeigen, ob eine Eigenschaft für verschiedene Geräte anpassbar ist:

• Desktop-Symbol:
  Ein Desktop-Symbol zeigt an, dass die Einstellung für die Desktop-Ansicht gilt.

• Tablet- und Mobil-Symbole:
  Wenn Sie auf das Tablet- oder Mobil-Symbol klicken, können Sie spezifische Werte für diese Ansichten festlegen. Wenn das Symbol aktiv ist, bedeutet dies, dass Sie eine separate Einstellung für diese Ansicht vornehmen können.

2. Globale Einstellungen

Einige Einstellungen, wie z. B. globale Farben und Schriftarten, gelten für alle Ansichten.
Diese globalen Einstellungen können in den Theme-Stil-Einstellungen von Elementor festgelegt werden. Wenn Sie eine globale Einstellung ändern, wird diese Änderung auf alle Geräte angewendet.

3. Eingeschränkte Anpassungsmöglichkeiten

Einige Eigenschaften sind möglicherweise nicht für alle Geräte anpassbar. Wenn Sie beispielsweise in den 'Erweiterten Einstellungen' eines Widgets keine Optionen für die mobile Sicht finden, bedeutet dies, dass diese spezifische Eigenschaft nicht variabel einstellbar ist. In solchen Fällen müssen Sie möglicherweise alternative Ansätze verwenden, um das gewünschte Design zu erreichen.

---

 

---

Desktop Modus

Je nach eingestelltem Modus ändern sich die Icons bei anpassbaren Einstellungen des Widgets.

---

 

---

Tablet Modus

 

---

 

---

Mobil-Modus

---

 

Container responsive Einstellungen

Schalten Sie in den gewünschten Desktop- oder Mobilen-Modus

Anpassungen vornehmen

Sobald Sie im gewünschten Modus sind, können Sie spezifische Anpassungen für den Container vornehmen:

• Breite und Höhe:
  Unter den Layout-Einstellungen können Sie die Breite und Höhe des Containers anpassen. Sie können die Breite auf einen bestimmten Prozentsatz oder eine feste Pixelgröße einstellen, um sicherzustellen, dass der Container auf verschiedenen Geräten gut aussieht.
• Ausrichtung:
  Sie können die Ausrichtung der Inhalte innerhalb des Containers festlegen (z. B. zentriert, linksbündig oder rechtsbündig). Diese Einstellungen können ebenfalls für jede Ansicht separat vorgenommen werden.
• Abstände:
  Unter den Erweiterten Einstellungen können Sie die Innen- und Außenabstände (Padding und Margin) für den Container anpassen. Diese Werte können für Desktop und mobile Geräte unterschiedlich sein, um eine optimale Benutzererfahrung zu gewährleisten.
• Flexbox-Einstellungen:
  Wenn Sie den Flexbox Container verwenden, können Sie die Flex-Richtung, Ausrichtung und Verteilung der Elemente innerhalb des Containers anpassen. Diese Einstellungen sind besonders nützlich, um responsive Layouts zu erstellen, die sich dynamisch an die Bildschirmgröße anpassen. 

---

---

Beispiel

Im Desktop-Modus befinden sich in einem Container drei Elemente nebeneinander. Im Tablet- und Mobil-Modus werden diese drei Elemente untereinander angezeigt. Wenn Sie jedoch erzwingen wollen, dass diese Elemente doch auch hier nebeneinander angezeigt werden sollen, verwenden Sie die Eigenschaft wrap.

---

 

---

Desktop-Ansicht - Elemente nebeneinander

Mobile-Ansicht -  Elemente untereinander

Um auch diese horizontal, also nebeneinander anzuzeigen, müssen Sie WRAP in der mobilen Ansicht einschalten, es erfolgt dann kein Umbruch.

Container bearbeiten / Layout / Elemente / WRAP

 

---

 

Auf welchen Geräten kann ich Widgets ausblenden?

Mit Elementor können Sie Widgets und Container auf folgenden Geräten ausblenden:

• Desktop
• Tablet
• Mobil

Diese Flexibilität ermöglicht es Ihnen, Ihre Inhalte gezielt für verschiedene Benutzergruppen zu optimieren und eine bessere Benutzererfahrung zu bieten. 

Warum ist das sinnvoll?

Das Ausblenden von Elementen auf bestimmten Geräten ist sinnvoll, um die Benutzererfahrung zu optimieren. Unterschiedliche Geräte haben unterschiedliche Bildschirmgrößen und -verhältnisse, und was auf einem Desktop gut aussieht, kann auf einem Mobilgerät unübersichtlich oder unleserlich sein. Durch das gezielte Ausblenden von Inhalten können Sie sicherstellen, dass Ihre Website auf allen Geräten ansprechend und funktional bleibt.

Wenn Sie zum Beispiel in der Desktop-Ansicht Widgets platzieren, die in der mobilen Ansicht nicht sinnvoll wären, dann sollten sie auch dort nicht sichtbar sein, oder ein Container in der mobilen Ansicht keinen Sinn macht. Sie können ausblenden oder auch Alternativen suchen und platzieren.

---

 

---

Beispiel Icon-Box ausblenden 

Icon-Box bearbeiten / Erweitert / Responsiv 

1. Elementor Editor öffnen:
   • Gehen Sie zu Ihrer WordPress-Seite und öffnen Sie die Seite, die Sie bearbeiten möchten, mit dem Elementor-Editor.
2. Element auswählen:
   • Klicken Sie auf das Element (Widget), das Sie ausblenden möchten. Dies kann ein Bild, ein Textblock oder ein anderes Widget oder auch ein Container sein.sein.
3. Erweiterte Einstellungen öffnen:
   • Im linken Menü sehen Sie die Optionen für das ausgewählte Widget. Klicken Sie auf den Tab "Erweitert".
4. Responsive Einstellungen:
   • Scrollen Sie nach unten zu den "Responsive"-Einstellungen. Hier können Sie festlegen, ob das Widget auf verschiedenen Geräten sichtbar sein soll.
5. Sichtbarkeit anpassen:
   • Sie sehen Optionen wie 
     "Auf Mobilgeräten ausblenden", 
     "Auf Tablets ausblenden" und 
     "Auf Desktops ausblenden".
     Aktivieren Sie die entsprechenden Kästchen, um das Widget auf den gewünschten Geräten auszublenden.
6. Änderungen speichern:
   • Vergessen Sie nicht, Ihre Änderungen zu speichern, indem Sie auf "Veröffentlichen" klicken.