Responsiver Modus in Elementor

Responsivität

Grundwissen Responsivität

1

Elementor Editor öffnen

screen-responsive-01
2

Widget / Spalte / Abschnitt anwählen

  • Wählen Sie per Mausklick das Element an, welches Sie für den Responsiven Modus optimieren möchten
screen-responsive-02
3

Responsiven Modus einschalten

  • Klicken Sie links unten im Editorbereich in der dunkelgrauen Symbolleiste neben dem pinken Aktualisieren-Button auf das 4. Symbol von links (Desktop-Bildschirm und dem Tablet / "Responsiver Modus") - rechts im Vorschaubereich wird oben ein dunkler horizontaler Balken mit den 3 Schwellwert-Symbolen "Desktop" , "Tablet" und "Smartphone" eingeblendet
screen-responsive-03
4

Schwellwert-Ansicht auswählen

  • Per Klick auf die jeweiligen 3 Schwellwert-Symbole "Desktop" , "Tablet" und "Smartphone", aktivieren Sie jeweils eine Simulation, wie Ihre Seite / Ihr Abschnitt / Ihr Widget / Ihre Spalte  ind dieser Bildschirmbreite aussehen könnte
screen-responsive-04
5

Eigenschaften mit Responsiv-Option

  • In Elementor sind immer DIE Eigenschaften eines Widgets / einer Spalte / eines Abschnitts für die Responsiv-Anpassungen freigegeben, die neben dem  Eingabe-Feld ein kleines Desktop-Symbol (/ Tablet-Symbol /Smartphone-Symbol) aufweisen
screen-responsive-05
6

Einstellungen vornehmen

  • Geben Sie jeweils für 1 Eigenschaft die gewünschten, vom "Desktop"-Modus abweichenden, Einstellungen im "Tablet"-Modus ein.
  • Geben Sie jeweils für 1 Eigenschaft die gewünschten, vom "Tablet"-Modus abweichenden, Einstellungen im "Mobile"-Modus ein.
screen-responsive-06
7

Speichern

  • Klicken Sie abschließend unten im linken Editor-Bereich auf den pinken Aktualisieren-Button, um die vorgenommenen Responsiv-Einstellungen zu speichern
screen-responsive-07