Responsiver Modus in Elementor

Responsivität

Responsivität ist die Funktion einer modernen Website, ihr Layout automatisch und dynamisch an die Breite des Bildschirms anzupassen, mit der sie aufgerufen wird
Egal ob man die Website auf einem großen PC Bildschirm ("Desktop") anschaut oder mit dem Tablet oder dem Smartphone ("Mobile") - bei einer gut aufgebauten responsiven Homepage sieht diese in allen Bildschirmbreiten harmonisch und professionell aus, sie ist einfach zu bedienen, Texte sind gut zu lesen
Webseiten mit guter Responsivität werden nachweislich häufiger frequentiert, länger besucht und von Suchmaschinen höher eingestuft als nicht-responsive Webseiten
Die Ortsvereins-Website ist von Grund an responsiv angelegt und im Elementor Editor haben Sie umfassende Möglichkeiten, das Layout Ihrer Website auf die jew. Bildschirmbreiten anzupassen

Responsives Design bedeutet ein fließendes, dynamisches Layout einer Website mit Layout-Wechsel bzw. -Erweiterung ab dem jew. nächst-kleineren Schwellwert.
Die 3 gängigen Schwellwerte heißen "Desktop", "Tablet" und "Mobile"
Bei Ihrer Ortsvereins-Website entspricht "Desktop" allen Bildschirmbreiten größer als 1200px, "Tablet" allen Bildschirmbreiten zwischen 1200px und 768px und "Mobile" allen Bildschirmbreiten von 767px und kleiner
Die Grund-Einstellungen von mit Elementor gebauten Seiten werden immer in der Desktop-Ansicht vorgenommen.
Werden für Tablet oder Mobile keine explizit anderen Einstellungen vorgenommen, gibt der Desktop-Modus automatisch alle Einstellungen an die nächst-kleineren Bildschirmformate weiter

Klicken Sie bei dem gewünschten Beitrag oder der gewünschten Seite auf "Mit Elementor bearbeiten" - wie das geht, ist dokumentiert in unseren Anleitungen "Beitrag (Beitragsinhalte) bearbeiten" / "Seite (Seiteninhalte) bearbeiten"
Elementor braucht ggf. etwas Zeit, um den Editor vollständig zu laden

Wählen Sie per Mausklick das Element an, welches Sie für den Responsiven Modus optimieren möchten

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

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

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

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.

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