Manchmal funktioniert ein Design, das auf Mobilgeräten gut aussieht, auf Desktop-Computern nicht genauso gut. Beispielsweise möchten Sie vielleicht … Farbverlaufshintergrund auf Mobilgeräten um eine stärkere visuelle Wirkung zu erzielen und gleichzeitig ein einfacher Hintergrund auf Desktop und Tablet.
In GemPages können Sie dies erreichen, indem Sie einen Abschnitt oder ein Element duplizieren und steuern. Einstellungen für die GerätesichtbarkeitDiese Anleitung erklärt, wie man eine/n anwendet Farbverlaufshintergrund nur auf Mobilgeräten in GemPages unter Beibehaltung des ursprünglichen Designs für größere Bildschirme.
Was ist ein Farbverlaufshintergrund?
A Farbverlauf-Hintergrund Ein Farbverlauf ist ein Hintergrundstil, bei dem zwei oder mehr Farben sanft ineinander übergehen. Anstelle einer einzelnen Volltonfarbe erzeugt er einen Übergangseffekt zwischen den Farben.
Farbverlaufhintergründe werden häufig verwendet, um:
- Erstellen Sie visuell ansprechendere Abschnitte
- Heben Sie wichtige Inhalte wie Hero-Banner oder Werbeaktionen hervor.
- Verbesserung des visuellen Kontrasts auf kleineren Bildschirmen
Wann sollte man einen nur für Mobilgeräte geeigneten Farbverlauf als Hintergrund verwenden?
Es gibt viele Design-Szenarien, in denen die Anwendung eines Farbverlaufs nur auf Mobilgeräten die Benutzererfahrung verbessern kann.
Beispielsweise:
- Making Mobile Hero-Bereiche optisch ansprechender
- Verbesserung Textlesbarkeit auf kleinen Bildschirmen
- Bessere Werbebereiche für mobile Endgeräte
- Abgleichen Kampagnendesigns, optimiert für mobile Nutzer
Da mobile Bildschirme kleiner sind, können Farbverläufe dazu beitragen, die Aufmerksamkeit zu lenken und die visuelle Hierarchie zu verbessern, ohne das Layout zu überladen.
So wenden Sie einen Farbverlauf als Hintergrund nur auf Mobilgeräten an
Führen Sie die folgenden Schritte aus, um einen Farbverlaufshintergrund anzuzeigen. nur auf mobilen Geräten wobei der ursprüngliche Hintergrund auf Desktop- und Tablet-Computern erhalten bleibt.
Schritt 1: Abschnitt oder Element duplizieren
Suchen Sie zuerst die Abschnitt oder Element dort, wo Sie den Farbverlauf als Hintergrund anwenden möchten.
Duplizieren Sie anschließend diesen Abschnitt oder dieses Element.
Nach dem Duplizieren liegen nun zwei Versionen vor:
- Das Originalfassung (für Desktop- und Tablet-Computer)
- Das Duplikatversion (für Mobilgeräte)
Beide Versionen sehen auf den ersten Blick identisch aus.
Schritt 2: Fügen Sie den Farbverlauf als Hintergrund hinzu.
Konfigurieren Sie anschließend die duplizierte Version so, dass sie einen Farbverlauf als Hintergrund verwendet.
- Wähle aus doppelter Abschnitt oder Element.
- Öffnen Sie den Microsoft Store auf Ihrem Windows-PC Einstellungen Panel.
- Navigieren Hintergrund.
- Auswählen Farbe → Farbverlauf.
- Passen Sie die Farbverläufe und deren Richtung Ihren Designvorlieben an.
Eine detailliertere Anleitung zur Verwendung von Farbverlaufhintergründen finden Sie in diesem Artikel: Einen Hintergrund mit Farbverlauf hinzufügen.
In diesem Stadium haben Sie nun Folgendes:
- Eine Version mit der Originalhintergrund
- Eine Version mit einem Farbverlauf-Hintergrund
Schritt 3: Gerätesichtbarkeit konfigurieren
Jetzt müssen Sie die Kontrolle übernehmen. welche Version auf welchem Gerät angezeigt wird.
Originalbereich (Desktop + Tablet)
Wähle aus Originalabschnittdann konfigurieren Sie es Anzeigeeinstellungen Es erscheint also nur auf größeren Bildschirmen.
Sichtbarkeit aktivieren für:
- Desktop
- Tablette
Sichtbarkeit deaktivieren für:
- Mobil
Duplizierter Abschnitt (nur mobil)
Als nächstes wählen Sie die duplizierter Abschnitt mit dem Farbverlaufshintergrund.
Stellen Sie die Anzeigeeinstellungen wie folgt ein:
Sichtbarkeit aktivieren für:
- Mobil
Sichtbarkeit deaktivieren für:
- Desktop
- Tablette
Dadurch wird sichergestellt, dass die Farbverlaufsversion nur auf Mobilgeräten angezeigt wird.
Schritt 4: Seite speichern und veröffentlichen
Nach Abschluss der Konfiguration:
- Klicken Sie auf Gespeichert.
- Veröffentlichen oder aktualisieren Sie Ihre Seite.
Ihre Seite wird nun Folgendes anzeigen:
- Das Originalhintergrund auf Desktop- und Tablet-Computern
- Das Farbverlauf-Hintergrund nur auf Mobilgeräten
Weitere Designanpassungen, die Sie mit dieser Methode vornehmen können
Diese gerätespezifische Duplizierungsmethode kann auch für andere Designanpassungen nützlich sein, wie zum Beispiel:
- Verwendung unterschiedlicher Hintergrundbilder für Mobilgeräte
- Anpassung von Abständen und Layoutstrukturen
- Vereinfachte mobile Abschnitte anzeigen
- Erstellung von mobilspezifischen Kampagnendesigns
Wichtiger Hinweis
Dieser Ansatz funktioniert folgendermaßen: Abschnitte oder Elemente duplizierenDadurch erhöht sich die Anzahl der Elemente auf der Seite. Aus diesem Grund empfehlen wir die Anwendung dieser Methode. nur wenn nötigZu häufige Duplikation kann die Pflege und Verwaltung von Seiten erschweren. Versuchen Sie nach Möglichkeit Folgendes zu verwenden responsive Einstellungen Zuerst, bevor du doppelte Abschnitte erstellst.
Vielen Dank für Ihre Kommentare