7 Techniken zum Erstellen von fetten und farbenfrohen Websites mit Divi

Die Verwendung eines mutigen und farbenfrohen Designstils für Ihre Website ist eine großartige Möglichkeit, Ihre Website zum Leuchten zu bringen. Es wird Ihnen helfen, Ihrer Website eine positive Atmosphäre zu verleihen, und obwohl es zu keiner Art von Website passt, passt es definitiv zu vielen von ihnen.

In diesem Beitrag zeigen wir Ihnen 7 verschiedene Divi-Techniken, wie Sie nur mit den integrierten Optionen von Divi ein mutiges und farbenfrohes Webdesign erstellen können. Zuerst gehen wir die verschiedenen Techniken durch und erstellen anschließend ein Beispiel, das der Beschreibung entspricht.

Dies ist der letzte Beitrag in der Beitragsserie, in dem wir 4 verschiedene Website-Stile behandelt haben und wie man sie mit Divi erreicht:

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

Lasst uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

1. 'Zeilen' in Abschnitte mit Spalten umwandeln

Die erste Technik, die Sie verwenden können, um ein mutiges und farbenfrohes Webdesign zu erstellen, besteht darin, Zeilen in Abschnitte umzuwandeln. Indem Sie alle Standardabstände zwischen einem Abschnitt und einer Zeile entfernen, hinterlassen Sie keinen offensichtlichen Unterschied zwischen den beiden. Dies, in Kombination mit dem Entfernen der Bundstegbreite, ermöglicht es Ihnen, zwei Säulen zusammenzudrücken.

2. Farbverläufe + Hintergrundtexturen

Die Verwendung von Verlaufshintergründen auf Ihrer Website kann atemberaubende Ergebnisse liefern. Aber was Ihnen dabei hilft, diese Farben noch mehr zu stärken, ist die Kombination mit einem strukturierten Hintergrund. Um das Gleichgewicht zu halten, verwenden Sie diese Kombination nur für eine Spalte. Halten Sie die zweite Säule sauber und leicht für einen modernen Touch.

3. Halbtransparente Verlaufsfarben + Teiler unter den Abschnitten

Nachdem Sie eine Zeile in einen Abschnitt umgewandelt haben, können Sie Ihrem Spaltenhintergrund auch Abschnittstrenner hinzufügen. Um sicherzustellen, dass die Trennlinien durchscheinen, ohne den Inhalt zu überlappen, verwenden Sie leicht transparente Verlaufsfarben für Ihre Spalte.

4. Horizontale Spaltenüberlappung von Modulen

Sie sehen oft, dass Websites vertikale Überlappungen verwenden. Horizontales Überlappen hingegen wird weniger häufig verwendet, obwohl es absolut beeindruckende Ergebnisse bringen kann. Um ein solches Ergebnis zu erzielen, ist es wichtig zu wissen, dass Elemente in der rechten Spalte einen hierarchischen Vorteil gegenüber Elementen in der linken Spalte haben. Sie können nicht dasselbe Ergebnis erzielen, wenn Sie Ihre Elemente in der linken Spalte platzieren.

5. Kopie aufteilen für perfekte Ausrichtung

Es gibt nichts Befriedigenderes, als eine perfekte Ausrichtung zu haben. Es ist eines der wichtigsten Designprinzipien, das gutes Design von schlechtem Design unterscheidet. Um sicherzustellen, dass diese Ausrichtung perfekt ist, wenn zwei Spalten überlappen, versuchen Sie, Ihre Kopie in verschiedene Textmodule aufzuteilen. Auf diese Weise können Sie eine perfekte Ausrichtung erstellen, indem Sie den negativen linken Rand speziell diesem Wort oder Satz anpassen.

6. Kombinieren Sie schwarze und halbtransparente Textfarben

Um Ihrer Website den fetten Aspekt hinzuzufügen, verwenden Sie eine große Schriftgröße für die Kopie, die Sie freigeben, zusammen mit einer extrem fetten Textschriftstärke. Und um die Kühnheit auszugleichen, können Sie zwischen einer schwarzen und einer halbtransparenten Textfarbe wechseln. Dies wird Ihnen helfen, genügend Tiefe und Abwechslung auf Ihrer Website zu schaffen.

7. Vermeiden Sie Box-Schatten oben oder unten, um Abschnitte zu vereinen

Sie können ganz einfach zwei Abschnitte auf Ihrer Seite vereinen, indem Sie mit den Boxschattenoptionen herumspielen. Das Wichtigste zuerst, verwenden Sie einen sehr subtilen Kastenschatten. Das bedeutet, dass Sie eine ausreichende Unschärfestärke, eine negative Streustärke und eine sehr helle Schattenfarbe verwenden. Sobald Sie Ihren subtilen Kastenschatten erstellt haben, spielen Sie mit der vertikalen Position. Stellen Sie für den ersten Abschnitt auf Ihrer Seite sicher, dass Sie die vertikale Position verschieben, bis der Kastenschatten am unteren Rand Ihres Abschnitts nicht mehr erscheint. Gleiches gilt für den letzten Abschnitt, aber stellen Sie sicher, dass er nicht oben angezeigt wird.

Vorschau

Nachdem wir nun all die verschiedenen Techniken durchgegangen sind, ist es an der Zeit, die Dinge in die Praxis umzusetzen. Wir werden das folgende Design neu erstellen:

Beginnen wir mit der Erstellung: Fügen Sie den Standardabschnitt 1 hinzu

Abschnittseinstellungen

Oberteiler

Fügen Sie eine neue Seite mit einem Standardabschnitt hinzu und öffnen Sie sofort die Abschnittseinstellungen. Das erste, was wir brauchen, ist ein oberer Teiler:

• Teilerstil: In Liste suchen
• Teilerfarbe: rgba(0,0,0,0.13)
• Teilerhöhe: 900px
• Teiler Flip: Vertikal
• Teileranordnung: Inhalt unter dem Abschnitt

Unterteiler

Fahren Sie fort, indem Sie auch einen ähnlichen unteren Teiler hinzufügen.

• Teilerstil: In Liste suchen
• Teilerfarbe: rgba(0,0,0,0.13)
• Teilerhöhe: 900px
• Teileranordnung: Inhalt unter dem Abschnitt

Abstand

Geben Sie als Nächstes dem Abschnitt etwas Spielraum und entfernen Sie den Standardabstand.

• Oberer und unterer Rand: 50px
• Linker und rechter Rand: 50px
• Polsterung oben und unten: 0px
• Linke und rechte Polsterung: 0px

Abgerundete Ecken

Öffnen Sie dann die Randeinstellungen und fügen Sie einige abgerundete Ecken hinzu.

• Oben links: 20 Pixel
• Oben rechts: 20px

Box Schatten

Wir verwenden einen subtilen Kastenschatten oben in unserem Abschnitt, indem wir die folgenden Anpassungen vornehmen:

• Vertikale Position des Boxschattens: -23px
• Stärke der Box-Schattenunschärfe: 37px
• Stärke der Box-Schattenausbreitung: -29px
• Schattenfarbe: rgba(0,0,0,0.22)
• Position des Boxschattens: Äußerer Schatten

Neue Zeile hinzufügen

Spaltenstruktur

Wir sind noch nicht damit fertig, die Abschnittseinstellungen zu ändern, sondern können fortfahren, indem wir eine Zeile mit zwei Spalten hinzufügen.

Spalte 1 Hintergrund mit Farbverlauf

Ohne noch Module hinzuzufügen, öffnen wir die Zeileneinstellungen. Das erste, was wir dort tun müssen, ist, unserer ersten Spalte einen Verlaufshintergrund hinzuzufügen.

• Farbe 1: rgba(255,191,0,0,76)
• Farbe 2: rgba(153,0,255,0,87)

Spalte 1 Textur-Hintergrundbild

Wir kombinieren diesen Farbverlaufshintergrund mit einem strukturierten Hintergrund. Das Bild, das ich verwende, ist Teil von Divis Meetup Layout Pack. Speichern Sie das folgende Bild auf Ihrem Desktop, indem Sie mit der rechten Maustaste darauf klicken und es speichern (es ist eine PNG-Datei mit weißen Texturen, Sie können es nicht sehen, bis Sie es auf Ihrem Computer öffnen und / oder auf Ihrer Website verwenden ):

Nachdem Sie das Bild in Ihre Medienbibliothek hochgeladen haben, stellen Sie sicher, dass Sie auch als Hintergrundbildgröße für Spalte 1 „Anpassen“ auswählen.

Spalte 2 Hintergrundfarbe

Als nächstes geben Sie Ihrer zweiten Spalte die Hintergrundfarbe '#F7F7F7'.

Größe

Wir werden unsere Reihe in einen Abschnitt "verwandeln", indem wir die gesamte Breite des Abschnitts einnehmen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Zusammen mit der Zeile, die die gesamte Breite des Abschnitts einnimmt, müssen wir auch die obere und untere Polsterung unseres Abschnitts entfernen.

• Polsterung oben und unten: 0px

Trennmodul zu Spalte 1 hinzufügen

Teiler ausblenden

Beginnen wir mit dem Hinzufügen der Module! Das erste, was wir brauchen, ist ein Divider-Modul in der ersten Spalte. Wir verwenden dieses Modul nur, um den Platz zu schaffen, den wir in der ersten Spalte benötigen. Wir wollen nicht, dass es auftaucht. Stellen Sie nach dem Hinzufügen des Moduls sicher, dass Sie die Option "Teiler anzeigen" deaktivieren.

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen und fügen Sie dem Teiler den folgenden benutzerdefinierten Abstand hinzu:

• Obere Polsterung: 200px (Desktop & Tablet), 150px (Telefon)
• Untere Polsterung: 200px (Desktop & Tablet), 150px (Telefon)

Textmodul Nr. 1 zu Spalte 2 hinzufügen

Kopie hinzufügen

Wir können nun zur zweiten Spalte übergehen. Hier werden wir unsere drei verschiedenen Textmodule fallen lassen und sie überlappen beide Spalten. Wenn Sie möchten, dass ein Modul zwei oder mehr Spalten überlappt, müssen Sie es immer in der rechten Spalte platzieren. So funktioniert die hierarchische Struktur. Fügen Sie Ihr erstes Textmodul hinzu und fügen Sie eine Kopie hinzu.

Texteinstellungen

Öffnen Sie als nächstes die Texteinstellungen und übernehmen Sie die folgenden Änderungen:

• Schriftstärke des Textes: Ultra Bold
• Textschriftart: Großbuchstaben
• Textfarbe: #000000
• Textgröße: 250px (Desktop), 200px (Tablet), 100px (Telefon)
• Textzeilenhöhe: 0,75em

Abstand

Wir brauchen auch etwas Marge. Der von uns verwendete negative linke Rand entspricht der von uns ausgewählten Kopie. Wenn Sie möchten, dass dies auch mit anderem Text funktioniert, müssen Sie mit diesem Wert herumspielen. Ändern Sie es, bis Sie sehen, dass der Anfang eines Zeichens am Übergang der Spalten ausgerichtet ist.

• Oberer Rand: 200 Pixel (Desktop), -250 Pixel (Tablet), -120 Pixel (Telefon)
• Linker Rand: -279px (Desktop), 5% (Tablet und Telefon)

Textmodul zweimal klonen

Klon Nr. 1

Text ändern

Wir haben unser erstes Textmodul erstellt und um uns etwas Zeit zu sparen, werden wir es zweimal klonen und einige Änderungen vornehmen. Das erste, was Sie am zweiten Textmodul ändern müssen, ist die Kopie.

Abstand ändern

Die hier verwendete Kopie ist anders, das heißt, wir müssen den linken Rand ändern. Beachten Sie, dass wir auch Dezimalzahlen verwenden, um das Textmodul perfekt auszurichten. Entfernen Sie auch den oberen Rand.

• Linker Rand: -360,7 Pixel (Desktop), 5 % (Tablet und Telefon)

Klon #2

Text ändern

Ändern Sie auch die Kopie Ihres dritten Textmoduls.

Textfarbe ändern

Und um das Design noch besser hervorzuheben, ändern wir die Textfarbe dieses Moduls in 'rgba(0,0,0,0.19)'.

Abstand ändern

Wir entfernen den oberen Rand für dieses Modul und fügen stattdessen einen unteren Rand hinzu. Der negative linke Rand ist ebenfalls anders.

• Unterer Rand: 200px
• Linker Rand: -410px (Desktop), 5% (Tablet und Telefon)

Standardabschnitt 2 hinzufügen

Abschnittseinstellungen

Abstand

Wir sind mit dem ersten Abschnitt fertig, es ist Zeit, zum nächsten überzugehen! Nachdem Sie einen neuen Standardabschnitt hinzugefügt haben, öffnen Sie die Abstandseinstellungen und nehmen Sie die folgenden Änderungen vor:

• Oberer und unterer Rand: 50px
• Linker und rechter Rand: 50px
• Polsterung oben und unten: 0px
• Linke und rechte Polsterung: 0px

Abgerundete Ecken

Fahren Sie fort, indem Sie einige abgerundete Ecken unten hinzufügen:

• Unten links: 20px
• Unten rechts: 20px

Box Schatten

Fügen Sie auch am unteren Rand des Abschnitts einen Box-Schatten hinzu.

• Vertikale Position des Kastenschattens: 47px
• Stärke der Box-Schattenunschärfe: 37px
• Stärke der Box-Schattenausbreitung: -29px
• Schattenfarbe: rgba(0,0,0,0.22)
• Position des Boxschattens: Äußerer Schatten

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie als Nächstes Ihrem neuen Abschnitt eine Zeile mit drei Spalten hinzu.

Größe

Wir "verwandeln" diese Zeile ebenfalls in einen Abschnitt:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Und wir entfernen die standardmäßige obere und untere Auffüllung.

• Polsterung oben und unten: 0px

Fügen Sie Blurb-Modul Nr. 1 zu Spalte 1 hinzu

Symbol auswählen

Insgesamt benötigen wir drei Blurb-Module. Eine für jede Spalte. Wir fangen damit an, einen in der ersten Spalte hinzuzufügen, und nachdem wir fertig sind, klonen wir ihn und platzieren ihn in den verbleibenden Spalten. Dies hilft uns, Zeit zu sparen. Nachdem Sie den Inhalt zu Ihrem Blurb-Modul hinzugefügt haben, wählen Sie in den Bild- und Symboleinstellungen ein gewünschtes Symbol aus.

Hintergrund mit Farbverlauf

Wir werden es so aussehen lassen, als ob das Symbol die Oberseite des Blurb-Moduls überlappt, indem wir einen Verlaufshintergrund dafür verwenden:

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #A21DF9
• Startposition: 20%
• Endposition: 20%

Textur-Hintergrundbild

Wir kombinieren den Verlaufshintergrund mit demselben strukturierten Hintergrund, den wir im vorherigen Abschnitt verwendet haben.

Symboleinstellungen

Ändern Sie als nächstes die Symboleinstellungen:

• Symbolfarbe: #000000
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 85px

Texteinstellungen

Fahren Sie fort, indem Sie die Texteinstellung ändern.

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Dann verwenden wir die folgenden Einstellungen, um unseren Klappentitel zu gestalten:

• Schriftstärke des Titels: Ultra Bold
• Textschriftart: Großbuchstaben
• Titeltextgröße: 46px

Textkörpereinstellungen

Und folgende Einstellungen für den Fließtext:

• Schriftgewicht des Körpers: Leicht
• Körpertextgröße: 18px

Abstand

Zu guter Letzt werden wir unserem Blurb-Modul etwas Luft zum Atmen geben, indem wir benutzerdefinierte Polster hinzufügen:

• Obere Polsterung: 50px
• Untere Polsterung: 100px
• Linke und rechte Polsterung: 50px

Blurb-Modul zweimal klonen und in verbleibende Spalten platzieren

Klon Nr. 1

Icon ändern

Wenn Sie mit dem Ändern des Blurb-Moduls fertig sind, klonen Sie es zweimal. Platzieren Sie anschließend die Duplikate in den verbleibenden Spalten. Öffnen Sie dann das Blurb-Modul in Ihrer zweiten Spalte und ändern Sie das verwendete Symbol.

Hintergrund mit Farbverlauf ändern

Fahren Sie fort, indem Sie die zweite Hintergrundfarbe des Farbverlaufs in '#D47A9A' ändern.

Klon #2

Icon ändern

Machen Sie dasselbe für das Blurb-Modul in der letzten Spalte.

Hintergrund mit Farbverlauf ändern

Für dieses Modul verwenden wir stattdessen '#F3BF3E' als zweite Verlaufshintergrundfarbe.

Vorschau

Wenn Sie jeden der obigen Schritte befolgt haben, sollten Sie auf verschiedenen Bildschirmgrößen das folgende Ergebnis erzielt haben:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie auffällige und farbenfrohe Websites erstellen, die nur die integrierten Optionen von Divi verwenden. Zuerst haben wir einige Divi-Techniken durchgespielt, die Sie angehen können, und danach haben wir ein passendes Beispiel von Grund auf neu erstellt. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!