8 Techniken zum Erstellen von minimalen Websites mit Divi

Minimale Websites sind in den letzten Jahren sehr beliebt geworden. Sie ermöglichen es Ihnen, sich darauf zu konzentrieren, Ihren Besuchern ein frisches und sauberes Gefühl beim Navigieren zu geben. Der minimalistische Webdesign-Stil ist vom skandinavischen Einrichtungsstil beeinflusst. Sicher haben Sie im Internet schon Bilder von skandinavischen Wohnzimmern gesehen. Durch die Reduzierung des Mobiliars und die Verwendung meist weißer oder grauer Farben kommt Licht und Gelassenheit in den Raum. Genau das tun auch minimale Websites. Sie konzentrieren sich darauf, Ihren Besuchern ein ruhiges Gefühl zu geben, damit sie sich auf die Inhalte konzentrieren können, die Sie mitbringen, ohne überfordert zu werden.

Dies ist ein zweiter Beitrag in der Beitragsserie, in dem wir 4 verschiedene Website-Stile behandeln und wie man sie mit Divi erreicht:

1. Sauber & Abstrakt
2. Minimal
3. Eben
4. Mutig & Bunt

Lasst uns anfangen!

1. Weniger ist mehr

Das erste, was Sie bei der Erstellung einer minimalistischen Website beachten müssen, ist der Versuch, die Designelemente, die Sie auf Ihrer Website verwenden, zu reduzieren. Anstatt mehr zu verwenden, versuchen Sie, das Beste aus den wenigen Elementen herauszuholen, die Sie verwenden.

Sie werden überrascht sein, wie viel Sie aus Ihrem Design herausholen können, wenn Sie Ihre Designelemente so verfeinern, dass sie sich ergänzen. Wenn Sie weniger Elemente auf Ihrer Website verwenden, behalten Sie außerdem den Überblick und können Ihre Botschaft konsistenter und klarer vermitteln.

2. Margin und Padding sind deine besten Freunde

Minimale Websites haben normalerweise viel Whitespace. Leerzeichen auf Ihren Seiten und Beiträgen ermöglichen es den Besuchern, während ihres Besuchs auf Ihrer Website zu atmen. Sie vermitteln ein Gefühl von Gelassenheit und ermöglichen es Ihnen, sich auf die Inhalte zu konzentrieren, die Sie teilen möchten.

Der beste Weg, um Whitespace zu Ihrer Website hinzuzufügen, besteht darin, weiße und/oder hellgraue Hintergrundfarben in Kombination mit zusätzlichem Padding und/oder Rand zu verwenden. Haben Sie keine Angst, mit den verschiedenen Werten herumzuspielen, um zu sehen, welches Ergebnis daraus entsteht.

3. Verwenden Sie eine Akzentfarbe

Wenn Sie Ihre Website so minimal wie möglich halten möchten, sollten Sie auch vermeiden, zu viele verschiedene Farben zu verwenden. Gehen Sie so neutral wie möglich, indem Sie viel Weiß und Grau verwenden. Verwenden Sie dunklere Farben für Ihren geschriebenen Inhalt. Und um Ihr Design etwas ausgefallener zu gestalten, wählen Sie eine Akzentfarbe. Diese Farbe wird normalerweise die gleiche sein, die Sie in Ihrem Logo verwenden.

4. Entweder Bilder oder Illustrationen – nicht beides

Im Allgemeinen wird empfohlen, beim Erstellen Ihrer Website zwischen realen Bildern oder Illustrationen zu wählen. Die gleichzeitige Verwendung von beiden kann Ihre Website wirklich komplizieren und verschiedene Website-Stile vermischen, was Sie auf jeden Fall vermeiden möchten.

Es gibt jedoch eine Ausnahme. Sie können zum Beispiel Bilder in Kombination mit Symbolabbildungen in Ihren Blurb-Modulen verwenden. Wenn sie minimal sind und den Inhalt Ihrer Seite unterstützen, können Sie loslegen.

5. Ziehen Sie die Verwendung von Textmodulen anstelle von Schaltflächenmodulen für CTAs in Betracht

Haben Sie schon einmal versucht, ein Textmodul anstelle eines Schaltflächenmoduls zu verwenden? Das solltest du auf jeden Fall. Obwohl Schaltflächenmodule Ihnen die meisten Optionen bieten, die Sie vom Visual Builder gewohnt sind, neigt es dazu, allen Seiten Ihrer Schaltfläche Rahmen hinzuzufügen. Mit einem Textbaustein können Sie das vermeiden. Sie können Ihre Kopie einfach anklickbar machen und einen unteren Rand hinzufügen, wie Sie im Druckbildschirm unten sehen können.

6. Teiler können beim Ausgleich von Leerzeichen helfen

Wenn Sie Ihrer Website einen modernen Touch verleihen möchten, sollten Sie auf jeden Fall versuchen, mehrere Trennwände auf Ihrer Website zu verwenden und diese so zu gestalten, dass sie mit dem Rest Ihres Layouts übereinstimmen.

Sie neigen dazu, verschiedene Gestaltungselemente miteinander zu verbinden und ein stimmiges Ergebnis zu erzielen.

7. Verwenden Sie einfache und subtile Formen

Dies ist einer meiner Favoriten. Manchmal neigen wir dazu, die Funktionen zu vernachlässigen, an die wir am meisten gewöhnt sind, wie z. B. Verlaufshintergründe. Sicher, die Verwendung eines Hintergrundbildes hat seinen Reiz, aber haben Sie jemals versucht, einen radial verlaufenden Hintergrund auf subtile Weise zu verwenden? Es ermöglicht Ihren Besuchern, sich auf Ihre Schlagzeilen zu konzentrieren und hilft Ihnen, Aktionen auszulösen.

8. Verwenden Sie subtile Animationen (wenn sie überhaupt benötigt werden)

Nicht zuletzt wird eine minimalistische Website in der Regel noch besser, wenn sie subtile Animationen verwendet. Und wenn wir subtil sagen, meinen wir wirklich subtil. Sie werden überrascht sein, wie glatt ein Effekt aussehen kann, wenn Sie nur die Animationsintensität drastisch reduzieren. Solange die Animation subtil ist, können Sie sie zu jedem Element hinzufügen und beeinträchtigt nicht die Lesbarkeit und Benutzerfreundlichkeit Ihrer Website.

Vorschau

Nachdem wir nun alle Techniken durchgegangen sind, fangen wir an, sie in die Praxis umzusetzen. Wir werden das folgende Beispiel Schritt für Schritt neu erstellen:

Beginnen wir mit der Erstellung: Fügen Sie einen neuen Standardabschnitt hinzu

Abschnittseinstellungen

Abstand

Um das obige Beispiel zu erstellen, benötigen wir insgesamt zwei Abschnitte. Beginnen wir damit, die erste Seite zu einer neuen oder vorhandenen Seite hinzuzufügen und ihr den folgenden Abstand hinzuzufügen:

• Polsterung oben und unten: 50px

Eine neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit einer Spalte hinzufügen.

Spaltenverlaufshintergrund

Öffnen Sie die Einstellungen dieser Zeile und fügen Sie den folgenden Spaltenverlaufshintergrund hinzu:

• Farbe #1: #ffffff
• Farbe #2: #effef
• Spaltenverlaufstyp: Radial
• Radiale Richtung der Spalte: Mitte
• Spaltenstartposition: 40%
• Säulenendposition: 40%

Größe

Erhöhen Sie dann die Breite der Zeile, indem Sie die folgenden Änderungen an den Größeneinstellungen vornehmen:

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

Abstand

Schließlich fügen Sie Ihrer Zeile auch den folgenden Abstand hinzu:

• Polsterung oben und unten: 0px
• Spalten oben und unten auffüllen: 250px
• Spaltenbreite links: 150 Pixel (Desktop), 20 Pixel (Tablet), 0 Pixel (Telefon)

Erstes Textmodul

Texteinstellungen

Nachdem Sie Ihre Zeileneinstellungen geändert haben, können Sie mit dem Hinzufügen der benötigten Module beginnen. Wir beginnen mit einer kurzen Beschreibung des Textmoduls mit den folgenden Texteinstellungen:

• Schriftstärke des Textes: Halbfett
• Textschriftart: Großbuchstaben
• Text Buchstabenabstand: 8px

Animation

Wir fügen diesem Layout auch sehr subtile Animationen hinzu, beginnend mit diesem Textmodul. Öffnen Sie die Animationseinstellungen und fügen Sie die folgende Animation hinzu:

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsintensität: 5%

Zweites Textmodul

H1-Texteinstellungen

Fahren Sie direkt unter dem vorherigen Textmodul fort und fügen Sie ein H1-Textmodul hinzu, das die folgenden H2-Texteinstellungen enthält:

• Überschrift Schriftart: Georgia
• Überschrift Textfarbe: #666666
• Überschriftstextgröße: 78px (Desktop), 50px (Tablet), 40px (Telefon)
• Abstand der Überschriftsbuchstaben: 3px

Abstand

Wir werden den Raum um dieses Modul herum erstellen, indem wir die folgenden Abstandseinstellungen verwenden:

• Oberer und unterer Rand: 100px
• Linker Rand: 100px (Desktop & Tablet), 20px (Telefon)
• Linke Polsterung: 40px

Grenze

Wir benötigen auch einen linken Rand, also fahren Sie fort und fügen Sie einen linken Rand mit den folgenden Einstellungen hinzu:

• Breite des linken Rands: 6px
• Farbe des linken Rands: #d67787

Schaltflächentextmodul

Link hinzufügen

Anstelle eines Schaltflächenmoduls verwenden wir ein Textmodul, dem wir einen Link hinzufügen. Fügen Sie Ihren CTA und den Link im Feld Inhalt hinzu.

Linktext-Einstellungen

Wenden Sie dann die folgenden Linktexteinstellungen auf Ihr Textmodul an:

• Link-Schriftstärke: Halbfett
• Link-Schriftart: Kursiv und Großbuchstaben
• Linktextausrichtung: Links
• Linktextfarbe: #666666
• Link-Buchstaben-Abstand: 8px

Größe

Da wir später einen unteren Rahmen verwenden werden, reduzieren wir auch die Breite dieses Textmoduls:

• Breite: 46%
• Modulausrichtung: Links

Abstand

Und um sicherzustellen, dass der untere Rand nicht zu nah an unserem Text liegt, fügen wir auch '10px' untere Auffüllung hinzu.

• Untere Polsterung: 10px

Grenze

Jetzt können wir mit dem Hinzufügen eines unteren Rands mit den folgenden Einstellungen fortfahren:

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #666666

Animation

Wir fügen auch eine subtile Animation hinzu:

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsverzögerung: 100ms
• Animationsintensität: 5%

Trennmodul hinzufügen

Sichtweite

Das letzte Modul, das wir in dieser Zeile benötigen, ist ein Teilermodul. Stellen Sie sicher, dass Sie die Option 'Teiler anzeigen' aktiviert lassen.

Farbe

Wir verwenden für diesen Teiler dieselbe Farbe wie für den linken Rand des Titeltextmoduls: '#d67787'.

Größe

Öffnen Sie als nächstes die Größeneinstellungen und ändern Sie das Teilergewicht in '2px'.

Abstand

Wir schieben das Teilermodul mit den folgenden Abstandseinstellungen nach rechts:

• Linker Rand: 200px
• Rechter Rand: -100px

Animation

Zu guter Letzt werden wir die folgende Animation einschließen:

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 150ms
• Animationsintensität: 5%

Fügen Sie einen zweiten Standardabschnitt hinzu

Abschnittseinstellungen

Abstand

Wir sind mit dem ersten Abschnitt fertig, also können wir jetzt fortfahren und einen neuen Abschnitt direkt unter dem vorherigen hinzufügen. Öffnen Sie die Abschnittseinstellungen und fügen Sie folgenden Rand hinzu:

• Oberer und unterer Rand: 80px

Eine neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie dann die Zeileneinstellungen und erhöhen Sie die Breite Ihrer Zeile mit den folgenden Einstellungen:

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

Abstand

Wir müssen auch einige Spalten in Spalte 2 hinzufügen:

• Spalte 2 linker Abstand: 100px (Desktop), 0px (Tablet & Telefon)

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Wir können jetzt damit beginnen, Module zu unseren beiden Spalten hinzuzufügen. Fügen Sie zunächst ein Bildmodul zu Ihrer ersten Spalte hinzu und laden Sie ein Bild Ihrer Wahl hoch.

Abstand

Wir erhöhen die Breite des Bildmoduls, indem wir einen negativen rechten Rand hinzufügen:

• Rechter Rand: -100px

Box Schatten

Wir verwenden auch den folgenden Kastenschatten, um ein zusätzliches Designelement auf der Seite zu erstellen:

• Horizontale Position des Kastenschattens: 100px
• Vertikale Position des Kastenschattens: 100px
• Stärke der Box-Schattenausbreitung: -14px
• Schattenfarbe: #effef

Schaltflächentextmodul klonen und unter Bildmodul platzieren

Schaltflächentextmodul suchen und klonen

Wir werden alle drei Textmodule des ersten Abschnitts wiederverwenden, beginnend mit der Schaltfläche Textmodul. Machen Sie weiter und klonen Sie es.

Unter Bild platzieren

Platzieren Sie es dann direkt unter dem Bildmodul in der ersten Spalte.

Erstes Textmodul im ersten Abschnitt klonen und in Spalte 2 platzieren

Textmodul suchen und klonen

Das nächste Textmodul, das wir brauchen, ist das erste in unserem Abschnitt. Gehen Sie voran und klonen Sie auch dieses.

In Spalte 2 platzieren

Anstatt es in der ersten Spalte zu platzieren, legen Sie es in der zweiten ab.

Titeltextmodul klonen und in Spalte 2 platzieren

Textmodul suchen und klonen

Schließlich werden wir auch den Titel Textmodul wiederverwenden.

In Spalte 2 platzieren

Nachdem Sie es geklont haben, platzieren Sie es in der zweiten Spalte Ihrer neuen Zeile.

Inhalt in H2 ändern

Ändern Sie den Inhalt Ihrer Inhaltsbox in H2.

H2-Texteinstellungen

Fügen Sie dann die folgenden Einstellungen zu Ihren H2-Texteinstellungen hinzu:

• Überschrift 2 Schriftart: Georgia
• Überschrift 2 Textfarbe: #666666
• Überschrift 2 Textgröße: 58px
• Überschrift 2 Buchstabenabstand: 3px

Beschreibungstextmodul hinzufügen

Texteinstellungen

Unter dem Titel-Textmodul fügen wir ein Beschreibungs-Textmodul mit den folgenden Texteinstellungen hinzu:

• Schriftstärke des Textes: Leicht
• Text Buchstabenabstand: 1px

Größe

Fahren Sie fort und ändern Sie die Größe dieses Textmoduls:

• Breite: 70%
• Modulausrichtung: Rechts

Trennmodul #1 hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Teilermodul. Stellen Sie sicher, dass die Option Teiler anzeigen aktiviert ist.

Farbe

Ändern Sie die Farbe Ihres Teilers in '#666666'.

Abstand

Fügen Sie als nächstes etwas Abstand hinzu:

• Oberer Rand: 100px
• Linker Rand: 400px (Desktop), 300px (Tablet), 200px (Telefon)
• Rechter Rand: -100px

Animation

Und natürlich werden wir auch eine subtile Animation verwenden:

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsintensität: 5%

Trennmodul 2 hinzufügen

Sichtweite

Zu guter Letzt werden wir ein weiteres Divider-Modul hinzufügen. Stellen Sie erneut sicher, dass die Option Teiler anzeigen aktiviert ist.

Farbe

Ändern Sie die Farbe Ihres Teilers in '#d67787'.

Größe

Verwenden Sie '2px' für das Teilergewicht.

Abstand

Und fügen Sie die folgenden Abstandseinstellungen hinzu:

• Linker Rand: 200px (Desktop & Tablet), 150px (Telefon)
• Rechter Rand: -100px

Animation

Fügen Sie zum Abschluss eine subtile Animation zu Ihrem Teiler hinzu:

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 100ms
• Animationsintensität: 5%

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen einige großartige Divi-Techniken zum Erstellen minimaler Websites gezeigt. Dies ist der zweite Beitrag der Serie, wie Sie mit Ihrer Kreativität und einigen der besten integrierten Optionen von Divi schöne Designstile verwirklichen können. In den nächsten Beiträgen werden wir Techniken teilen, wie Sie atemberaubendere Designstile erzielen können. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie unten einen Kommentarbereich!