7 Divi UX Best Practices, die Sie im Hinterkopf behalten sollten

Ich denke, wir sind uns alle einig, dass Divi sehr vielseitig ist. Es gibt so viele Möglichkeiten, jede Website, die Sie erstellen, anzupassen und zu personalisieren. Wenn Sie Ihre Arbeitsproduktivität steigern möchten, ist dies möglicherweise der ideale Posten für Sie. Wir werden 7 Best Practices für Divi UX behandeln, mit denen Sie möglicherweise vertraut sind oder nicht. Die 7 Tipps, die ich teilen werde, sind einige, die ich persönlich viel verwende und von denen ich bei der täglichen Arbeit mit Divi profitiere.

Lasst uns anfangen!

1. Verwenden von Mikroanimationen

Die erste Best Practice von Divi UX, die Sie sich merken sollten, ist die Verwendung von Mikroanimationen anstelle von übermäßigen. Früher gab es eine Zeit, in der eine Website umso „angepasster“ oder „fortschrittlicher“ erschien, je mehr Animationen eine Website hatte. Diese Zeiten sind jedoch vorbei. Abgesehen davon, dass sie wirklich schick aussehen, tragen übermäßige Animationen nicht zur allgemeinen Benutzererfahrung bei, die die Leute auf Ihrer Website haben. Tatsächlich können sie Besucher oft von dem ablenken, was wirklich wichtig ist. Die Entscheidung für Mikroanimationen ist stattdessen der richtige Weg. Mit den Animationsoptionen von Divi können Sie die Geschwindigkeit und Intensität jeder hinzugefügten Animation anpassen. Der Schlüssel zum Erstellen von Mikroanimationen liegt in der Verwendung einer geringen Animationsintensität mit einer etwas längeren Animationsdauer.

Gehen Sie zum Design-Tab eines Design-Elements

Öffnen Sie ein beliebiges Designelement Ihrer Wahl und gehen Sie zum Reiter Erweitert. Dort finden Sie die Animationsoptionen.

Verwenden Sie kleine Mengen an Animationsintensität

Sie können einen beliebigen Animationstyp auswählen und die Animationsintensität verringern. Je tiefer Sie gehen, desto subtiler wird die Animation. Durch Erhöhen der Animationsdauer stellen Sie sicher, dass die Animation nicht unbemerkt bleibt.

2. Reaktionsfähigkeit manuell optimieren

Einer der größten Vorteile von Divi ist die Tatsache, dass es einfach ist, jedes Layout, das Sie erstellen, responsive zu gestalten. Tatsächlich erledigt Divi bereits die meiste Arbeit für Sie. Alles, was Sie erstellen, reagiert von dem Moment an, in dem Sie es hinzufügen. Ab diesem Zeitpunkt müssen Sie nur noch manuell Änderungen an den Designelementen vornehmen. Dazu gehört beispielsweise das Ändern der Textgröße der von Ihnen freigegebenen Kopie entsprechend der Bildschirmgröße.

Zeilen und Spalten verfügen jetzt über einen vordefinierten Randwert, der sich je nach Bildschirmgröße ändert. Aber Sie müssen nicht unbedingt mit diesen Standardwerten arbeiten. Ich habe zum Beispiel festgestellt, dass viele beliebte Websites bei kleineren Bildschirmgrößen weniger linken und rechten Rand verwenden. Auf diese Weise können Sie mehr Inhalte horizontal einfügen, was bedeutet, dass weniger vertikales Scrollen erforderlich ist.

Der standardmäßige linke und rechte Rand, der bei kleineren Bildschirmgrößen verwendet wird, beträgt 40px. Um die gesamte Breite kleinerer Bildschirmgrößen zu nutzen, empfehle ich, diesen Wert durch 25px zu ersetzen.

Gehen wir den Prozess Schritt für Schritt durch.

Zeilengröße ändern

Als erstes müssen Sie den gesamten Abstand zwischen Abschnitten, Zeilen und Modulen entfernen, indem Sie die folgenden Optionen in den Größeneinstellungen der Zeile aktivieren:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abschnitt oder Zeilenauffüllung hinzufügen

Nun wollen wir noch genügend Platz zwischen dem Abschnitt und der Reihe haben. Sie können auswählen, ob Sie der Zeile oder dem Abschnitt, an dem Sie gerade arbeiten, benutzerdefinierten Abstand links und rechts hinzufügen möchten. Das Hinzufügen zur Zeile wirkt sich nicht auf andere Zeilen im Abschnitt aus. Andererseits stellt die Anwendung auf Abschnitte sicher, dass diese Ränder im gesamten Abschnitt gleich bleiben, egal wie viele Zeilen Sie hinzufügen.

• Linke Polsterung: 23vw (Desktop), 30px (Tablet), 25px (Telefon)
• Rechte Polsterung: 23vw (Desktop), 30px (Tablet), 25px (Telefon)

Spaltenauffüllung hinzufügen

Auch der Abstand zwischen Säulen und Modulen ist wichtig. Sie können diese Werte an unterschiedliche Bildschirmgrößen anpassen.

• Spalte 1 rechte Polsterung: 1vw (Desktop), 0vw (Tablet & Telefon)
• Spalte 2 linke Polsterung: 1vw (Desktop), 0vw (Tablet & Telefon)
• Spalte 2 Rechte Polsterung: 1vw (Desktop), 0vw (Tablet & Telefon)
• Spalte 3 linke Polsterung: 1vw (Desktop), 0vw (Tablet & Telefon)

Textgrößen verringern

Möchten Sie die horizontale Breite, die Sie bei kleineren Bildschirmgrößen erhalten, zu 100% nutzen? Obwohl 13px für die Fließtextgröße aus der Perspektive eines Laptops klein erscheinen mögen, ist es normalerweise mehr als genug für ein mobiles Gerät. Versuchen Sie, einen Textkörper von 13px auf Ihrem Mobiltelefon in Kombination mit den obigen Schritten anzuzeigen, und Sie werden sehen, wovon ich rede!

3. Verwenden von Viewport-Einheiten anstelle von Pixeln

Dies ist auch eines der Dinge, die wir im vorherigen Schritt getan haben. Um sicherzustellen, dass Ihre Website auf allen Desktop-Bildschirmgrößen responsive bleibt, wird empfohlen, Darstellungseinheiten anstelle von Pixeln zu verwenden. Dadurch wird sichergestellt, dass Ihre Website auch auf 27-Zoll-Desktop-Monitoren großartig und genau so aussieht, wie Sie sie entworfen haben.

Kleinere Bildschirmgrößen unterscheiden sich hingegen nicht so stark wie ein 15-Zoll- und ein 27-Zoll-Desktop-Bildschirm. Es kann hilfreich sein, Viewport-Einheiten zu verwenden, wenn vertikale Überlappungen erstellt werden, aber das Festhalten an Pixeln für den linken und rechten Abstand/Rand schadet nicht.

4. Stil für die Textausrichtung erweitern

Eines der Dinge, die die Leute auf Ihrer Website schnell bemerken werden, auch unbewusst, ist, wie konsistent Sie in Ihrem Design sind. Dies umfasst unter anderem die Textausrichtung, die Sie auf Ihren Seiten verwenden. Eine der Best Practices für UX von Divi besteht darin, ein Design durch Überprüfung der Textausrichtung fertigzustellen. Sie können sicher verschiedene Textausrichtungen innerhalb einer Seite kombinieren, wenn sie gut durchdacht und ausgespielt sind. Schwieriger wird es jedoch, wenn Sie verschiedene Textausrichtungen in einem bestimmten Abschnitt kombinieren. Das beste Szenario; Sie behalten eine Textausrichtung auf Ihrer gesamten Seite bei. Wenn Sie jedoch mehr experimentieren möchten, versuchen Sie, mindestens eine Art von Textausrichtung pro Abschnitt beizubehalten. Sie können dies tun, indem Sie sich einfach alle verschiedenen Designelemente ansehen oder eine der Effizienzfunktionen von Divi verwenden, die die Arbeit für Sie erledigt.

In nur wenigen Schritten können Sie sicherstellen, dass Sie auf der gesamten Seite oder im gesamten Abschnitt dieselbe Textausrichtung und -konsistenz verwenden.

Gehen wir diese Schritte durch.

Öffnen Sie ein beliebiges Modul, das Text enthält

Öffnen Sie ein beliebiges Modul auf Ihrer Seite, das Text enthält, und gehen Sie zu den Texteinstellungen.

Rechtsklick-Textausrichtungsoption

Klicken Sie mit der rechten Maustaste auf die Option Textausrichtung, die Sie in den Texteinstellungen finden, und wählen Sie die Option "Stile erweitern".

Erweitern Sie die Textausrichtung Ihrer Wahl auf den gesamten Abschnitt oder die ganze Seite

Je nachdem, wie einheitlich die Textausrichtung auf Ihrer Seite sein soll, können Sie nun die gewünschte Textausrichtung auf das gesamte Layout oder einen bestimmten Abschnitt ausdehnen.

5. Zwischen Visual Builder und Wireframe-Modus hin- und herschalten

Eines der großartigen Dinge an Divis Visual Builder ist, dass Sie nicht einmal wählen müssen, ob Sie etwas im Backend oder Frontend bearbeiten möchten. Der Wechsel zwischen beiden dauert buchstäblich weniger als eine Sekunde. Ich bin der Meinung, dass Sie die beste Produktivität und Übersicht erhalten, wenn Sie beides kombinieren. Besonders wenn Sie mit mehreren Überlappungen in Ihrem Layout zu tun haben, können Sie durch den Wechsel in den Drahtmodellmodus schnell Änderungen vornehmen. Wenn Sie ein bestimmtes Designelement an eine andere Stelle auf der Seite ziehen und ablegen möchten, können Sie es einfacher machen, indem Sie in den Drahtmodellmodus wechseln und dieses bestimmte Element ziehen, ohne endlos scrollen zu müssen.

Und wussten Sie, dass Sie das Modal eines Designelements öffnen und zwischen Visual Builder und Wireframe-Modus wechseln können, während das Modal geöffnet bleibt? Auf diese Weise können Sie Änderungen im Backend Ihres Designs vornehmen und Ihre neuen Designeinstellungen jederzeit anwenden.

6. Layout direkt auf der Seite importieren/exportieren

Inzwischen haben wir uns alle an die vorgefertigten Layouts, die gespeicherten Layouts und die Divi-Bibliothek im Allgemeinen gewöhnt. Angenommen, Sie arbeiten an einer bestimmten Seite auf einem lokalen Host und möchten sie anschließend auf eine Live-Website hochladen, ohne sich um die folgenden Umstände kümmern zu müssen:

• Speichern des Layouts in Ihrer Divi-Bibliothek
• Gehen Sie zu Ihrer Divi-Bibliothek und exportieren Sie die JSON-Datei
• Gehen Sie zur Divi-Bibliothek Ihrer Live-Website
• Hochladen der JSON-Datei
• Gehen Sie zur Seite Ihrer Live-Website
• Hochladen der JSON-Datei aus Ihren gespeicherten Layouts

Dann können Sie einfach die Import-/Exportoption verwenden, die sich direkt auf Ihrer Seite befindet. Auf diese Weise können Sie eine JSON-Datei erstellen, ohne überhaupt auf die Divi-Bibliothek zugreifen zu müssen.

Auf die gleiche Weise, wie Sie das Layout exportiert haben, können Sie das Layout in Ihre neue Seite importieren. Beachten Sie jedoch, dass Sie das Layout nach Auswahl dieses Ansatzes nicht mehr in Ihre Divi-Bibliothek auf Ihrer Live-Website importieren können. Nur direkt auf eine Seite.

7. Regelmäßige Verwendung der Option 'Herauszoomen', um die Perspektive beizubehalten

Dies ist wahrscheinlich eine meiner Lieblingsfunktionen von Divi UX. Ich bin sicher, wir haben das alles schon einmal gemacht; Öffnen Sie einen neuen regulären Tab oder ein Inkognito-Fenster, um das Ergebnis einer von uns erstellten Seite anzuzeigen. Und dann wurde ein Druckbildschirm der gesamten Seite mit einer Chrome-Erweiterung oder einem Firefox-Add-On erstellt. All dies, um Ihnen einen neuen Blick auf das Layout zu geben, an dem Sie arbeiten, und zu sehen, ob alles in die allgemeine Seitenstruktur passt.

Obwohl ich immer noch empfehle, dies gelegentlich zu tun, müssen Sie es nicht innerhalb kurzer Zeit mehrmals tun. Verwenden Sie stattdessen die Verkleinerungsoption, die sich direkt in Ihrem Visual Builder befindet. Dies gibt Ihnen nicht nur die gewünschte Perspektive, sondern hilft Ihnen auch, schnelle Änderungen vorzunehmen, ohne die Seite jemals verlassen zu müssen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen 7 verschiedene Best Practices für Divi gezeigt, die Ihnen helfen, die Produktivität beim Erstellen von Websites mit Divi zu steigern. Diese Tipps werden Ihnen bei der Erstellung jeder Art von Website sicherlich nützlich sein! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Ausgewähltes Bild von aurielaki / shutterstock.com