WordPress Responsive Design: Sicherstellen, dass Websites auf Handys und Computern gut aussehen

Elementor verfügt über leistungsstarke responsive Bearbeitungsfunktionen, mit denen Sie Ihre Website auf Computern, Tablets und Mobiltelefonen mit nur wenigen einfachen Einstellungen schön und benutzerfreundlich gestalten können. und einfach zu bedienen.

Was ist responsives Design?

Kurz und bündig.Responsive Design bedeutet, dass dieselbe Webseite ihr Layout automatisch an die Größe des Bildschirms des Geräts anpasst.：

• Auf einem Computer (großer Bildschirm) kann der Inhalt nebeneinander angezeigt werden (z. B. drei Spalten mit Bildern);
• Auf einem flachen (mittleren) Bildschirm wird sie automatisch zweispaltig;
• Auf Mobiltelefonen (kleine Bildschirme) wird der Text automatisch in eine einzige Spalte gestapelt, um zu vermeiden, dass der Text zu klein wird oder der Inhalt überläuft.

Elementor passt sich automatisch an die meisten Szenarien an, aber es gibt immer noch Details, die manuell optimiert werden müssen, um das beste Erlebnis für jedes Gerät zu gewährleisten.

Schritt 1: Kennenlernen des responsiven Bearbeitungsmodells von Elementor

Wenn Sie die Elementor-Bearbeitungsoberfläche aufrufen, finden Sie drei Symbole auf der rechten Seite der oberen Symbolleiste, die den drei Geräteansichten entsprechen:

• 🖥️ Desktop-Ansicht(Standardanzeige)
• 📱 Flachbettansicht(768px linke/rechte Breite)
• 📱 Mobile Ansicht(375px links/rechts Breite)

ArbeitsweiseKlicken Sie auf das entsprechende Symbol, um in den Vorschaumodus für dieses Gerät zu wechseln. Alle Stiländerungen (z. B. Schriftgröße, Abstände, Layout) können individuell für ein einzelnes Gerät eingestellt werden, ohne sich gegenseitig zu beeinflussen.

Schritt 2: Grundeinstellungen für Responsive Design (3 erforderlich)

1. die Textgröße: Vermeidung von zu kleinem oder zu großem Text auf Mobiltelefonen

Text, der auf einem Computer gut aussieht, ist auf einem Mobiltelefon möglicherweise nicht lesbar (zu klein) oder die Zeilenumbrüche sind fehlerhaft (zu groß) und müssen individuell angepasst werden:

1. Wählen Sie den Textbaustein (Überschriften, Absätze usw.) aus und gehen Sie zum Bedienfeld "Formatvorlagen" auf der rechten Seite.
2. Suchen Sie die Einstellung "Schriftgröße" und klicken Sie auf das "Responsive Icon" (ein kleines Computersymbol, das beim Anklicken drei Eingabefelder anzeigt, entsprechend Desktop/Tablet/Mobile) neben dem Wert.
3. Wechseln Sie zur "Mobilen Ansicht" und geben Sie die entsprechende Größe direkt ein (z. B. sind Überschriften auf Mobiltelefonen auf 24-32px eingestellt, Absätze auf 14-16px).

auf etw. aufmerksam machenTextgröße: Die Textgröße folgt dem Prinzip "je kleiner der Bildschirm, desto größer, aber klarer sollte der Text sein", um sicherzustellen, dass er auf einem Mobiltelefon ohne Zoomen gelesen werden kann.

2. die Breite von Bildern und Modulen: nicht über den Bildschirm hinausgehen

Bilder, die auf Computern auf "80% Breite" eingestellt sind, können auf Mobiltelefonen immer noch zu breit erscheinen oder auf beiden Seiten zu viel Weißraum haben:

1. Wählen Sie das Bild/Modul aus und gehen Sie zum rechten Bedienfeld "Stile" (Bilder befinden sich unter "Stile" → "Breite", andere Module möglicherweise unter "Erweitert" → "Breite").
2. Klicken Sie auf das Symbol Responsive neben dem Breitenwert, um zur mobilen Ansicht zu wechseln.
3. Stellen Sie die Breite auf "100%" ein (damit das Bild/Modul die Breite des Telefondisplays ausfüllt und keinen weißen Platz an den Seiten hat), oder passen Sie sie nach Bedarf an (z. B. 90%, um einen kleinen Rand zu lassen).

zur Kenntnis nehmenWenn die Größe des Bildes selbst zu klein ist, wird es durch die Einstellung auf 100% unscharf. Es wird daher empfohlen, Bilder mit hoher Auflösung (mindestens 1000px Breite) im Voraus vorzubereiten.

3. die Abstände und Ränder: Vermeidung von überfüllten Inhalten

Der Platz auf dem Handy-Bildschirm ist begrenzt, die Abstände zwischen den Modulen sind zu groß, um Platz zu verschwenden, zu kleine Module wirken überfüllt:

1. Wählen Sie ein beliebiges Modul aus (z. B. Schaltfläche, Absatz) und gehen Sie zum Bereich "Erweitert" auf der rechten Seite.
2. Suchen Sie den "Äußeren Rand" (den Abstand zwischen dem Modul und anderen Elementen) oder den "Inneren Rand" (den Abstand zwischen dem Inhalt innerhalb des Moduls und dem Rand) und klicken Sie auf das "Responsive Icon" neben dem Wert.
3. Wechseln Sie zur 'Mobilen Ansicht' und reduzieren Sie die Werte (z.B. ändern Sie den oberen Außenrand von 50px auf 20px, um das Modul kompakter zu machen).

Finesse: Drücken und halten Sie Ctrl Taste können Sie mehrere Module gleichzeitig auswählen und die Abstände für mehr Effizienz stapelweise anpassen.

Schritt 3: Layout-Anpassung (Optimierung des Spaltenlayouts für Handys)

Wenn Ihre Homepage ein "mehrspaltiges Layout" verwendet (z. B. 3 Spalten mit Dienstleistungsbeschreibungen, 2 Spalten mit Grafikkombinationen), kann sie auf Mobiltelefonen überfüllt sein und muss in eine einzige Spalte geändert werden:

1. Suchen Sie den Abschnitt, der mehrere Spalten enthält (klicken Sie auf das blau gepunktete Feld außerhalb des Moduls, um den gesamten Abschnitt auszuwählen).
2. Gehen Sie zum Bereich "Layout" auf der rechten Seite und suchen Sie die Einstellung "Spalten" (z. B. derzeit "3 Spalten").
3. Klicken Sie auf das Symbol "Responsive" neben dem Wert "Spalten", um zur mobilen Ansicht zu wechseln.
4. Ändern Sie die Anzahl der Spalten auf "1 Spalte", dann wird die Seite auf dem Mobiltelefon automatisch in eine einzige Spalte gestapelt, und der Inhalt ist übersichtlicher.

typisches BeispielEin Beispiel: 3 Produktspalten auf Computern, 2 Spalten auf Tablets und 1 Spalte auf Mobiltelefonen, was die große Bildschirmfläche ausnutzt und die Lesbarkeit auf kleinen Bildschirmen gewährleistet.

Schritt 4: Unnötige Elemente ausblenden (für kleine Bildschirme)

Einige Elemente, die die Seite auf einem Computer bereichern, aber auf einem Mobiltelefon überflüssig wären (z. B. komplexe dekorative Symbole, großer erklärender Text), können auf einem Mobiltelefon ausgeblendet werden:

1. Wählen Sie das Modul aus, das Sie ausblenden möchten, und gehen Sie zum Bereich "Erweitert" auf der rechten Seite.
2. Scrollen Sie nach unten zu den "Responsive"-Einstellungen und suchen Sie die Option "Auf Mobilgeräten ausblenden" (oder markieren Sie "Auf Desktop ausblenden" bzw. "Auf Tablet ausblenden").
3. Wenn Sie das Häkchen bei "Auf mobilen Geräten ausblenden" setzen, wird das Modul automatisch in der mobilen Ansicht ausgeblendet und wirkt sich nicht auf die Anzeige auf Computern und Tablets aus.

Anwendbare SzenarienDekorative Seitensymbole, computerspezifisches Kontaktformular (das auf dem Handy durch ein saubereres Formular ersetzt werden kann).

Schritt 5: Vorschau und Test (wichtigster Schritt)

Sobald die Einrichtung abgeschlossen ist, sollten Sie sie auf einem echten Gerät testen (oder mit der Elementor-Vorschaufunktion kritisch prüfen):

1. Vorschau in ElementorKlicken Sie nacheinander auf das Symbol "Desktop→Tablet→Mobil" und blättern Sie durch die Seiten, um jedes Modul zu prüfen:
   • Wird der Text vollständig angezeigt (kein Abschneiden, keine Überschneidung)?
   • Sind die Bilder klar und füllen den Bildschirm aus (keine Streckung, keine Verzerrung)?
   • Sind die Schaltflächen groß genug (mindestens 44×44px auf Mobiltelefonen, um das Anklicken zu erleichtern)?
2. Reale GeräteprüfungScannen Sie den "QR-Code" oben auf Elementor mit Ihrem Mobiltelefon, öffnen Sie die Seite auf Ihrem eigenen Mobiltelefon und bedienen Sie tatsächlich die Schaltflächen und Eingabefelder, um die Leichtgängigkeit des Gleitens zu spüren.
3. Gemeinsame Probleme beheben：
   • Wenn Zeilenumbrüche verwirrend sind: Verringern Sie die Schriftgröße auf dem Mobiltelefon oder vergrößern Sie die Modulbreite.
   • Wenn das Bild verzerrt ist: Setzen Sie "Objektanpassung" auf dem Mobiltelefon auf "Überschreiben" (Bild→Stil→Objektanpassung).
   • Wenn die Schaltfläche zu klein ist: Erhöhen Sie den "inneren Rand" der Schaltfläche auf Mobiltelefonen (mindestens 15px für oben und unten, 20px für links und rechts).

Responsive Design-Prinzipien für Einsteiger

1. mobile firstDie Software wurde mit Blick auf die Handy-Ansicht entwickelt, bevor sie auf den Computer ausgeweitet wurde (um drastische Änderungen zu einem späteren Zeitpunkt zu vermeiden).
2. Weniger ist mehrDa der Platz auf dem Handy-Bildschirm begrenzt ist, wird nur der Kerninhalt beibehalten und überflüssige Elemente werden entfernt.
3. KonsistenzFarben und Schriftarten sind auf allen Geräten gleich, um Verwirrung bei den Besuchern zu vermeiden.
4. regelmäßige ÜberprüfungWechseln Sie nach jedem neu hinzugefügten Modul in die mobile Ansicht, um zu prüfen, ob die Anzeige in Ordnung ist.

Mit diesen Schritten wird Ihre Website auf Computern, Tablets und Mobiltelefonen professionell dargestellt. Responsive Design mag kompliziert erscheinen, aber nach ein paar Eingriffen in Elementor werden Sie feststellen, dass Sie nur ein paar wichtige Parameter für verschiedene Geräte feinabstimmen müssen, um das 90%-Anzeigeproblem zu lösen. Üben Sie mehr, testen Sie mehr, und Sie werden es bald beherrschen!