So erstellen Sie schöne Bildränder mit den neuen Optionen von Divi

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie auf der nächsten Website, die Sie erstellen, schöne Bildrahmen erstellen. Der Zweck dieses Beitrags besteht darin, zu demonstrieren, wie Sie schöne Ergebnisse erzielen können, die zu den von Ihnen verwendeten Bildern (und auch zum Rest Ihrer Website) passen.

Mit den neuen Divi-Optionen ist es einfacher denn je, beeindruckende Ergebnisse zu erzielen. Sie müssen nur einige Änderungen vornehmen, die wir Ihnen zeigen, und Sie sind bereit, Ihr Webdesign auf die nächste Stufe zu heben. Alle 8 Beispiele, die wir mit Ihnen teilen, verwenden nichts anderes als die integrierten Optionen, die der Divi Builder und das Image-Modul bieten.

Vorgeschmack

Werfen wir einen Blick auf die Ergebnisse, die Sie von diesem Beitrag erwarten können:

So erstellen Sie schöne Bildränder mit den neuen Optionen von Divi

Abonnieren Sie unseren Youtube-Kanal

Hintergrund mit Farbverlauf

Die erste Möglichkeit, um schöne Bildränder zu erzielen, besteht darin, nur einen Hintergrund mit Farbverlauf zu verwenden. Durch Experimentieren mit den verschiedenen Verlaufshintergrundeinstellungen können Sie einfache, aber elegante Ergebnisse erzielen. Wir zeigen Ihnen drei Beispiele für Bildränder, die ausschließlich aus einem Hintergrund mit Farbverlauf bestehen.

Standard

Das erste Beispiel, das wir behandeln werden, ist das einfachste und bescheidenste von allen; ein Standardverlaufsbildrahmen. Als Ergebnis zeigen wir Ihnen, wie create so aussieht:

Registerkarte Inhalt

Beginnen Sie mit der Auswahl eines Hintergrunds mit Farbverlauf auf der Registerkarte Inhalt. Für dieses Beispiel haben wir die folgenden Einstellungen verwendet:

• Erste Farbe: #081e8c
• Zweite Farbe: #764f9b
• Verlaufstyp: Linear
• Verlaufsrichtung: 269deg
• Startposition: 40%
• Endposition: 60%

Registerkarte „Design“

Das nächste und letzte, was Sie tun müssen, ist, dem Bild etwas Auffüllen hinzuzufügen. So einfach ist das. Gehen Sie zur Registerkarte Design und fügen Sie oben, unten, rechts und links '10px' hinzu.

Seiten

Als nächstes haben wir einen Bildrand, der nur auf der linken und rechten Seite des Bildes angezeigt wird. Die Verwendung dieser Art von Bildrahmen verleiht dem Bild eine schöne zusätzliche Note, ohne zu viel Fokus auf den Rahmen selbst zu legen.

Registerkarte Inhalt

Um diese Art von Bildrahmen zu erzielen, fügen Sie Ihrem Bild zunächst den folgenden Verlaufshintergrund hinzu:

• Erste Farbe: rgba(255,255,255,0)
• Zweite Farbe: #0a8da8
• Verlaufstyp: Linear
• Verlaufsrichtung: 166deg
• Startposition: 29%
• Endposition: 52%

Registerkarte „Design“

Auf der Registerkarte „Design“ benötigen Sie lediglich „10px“ Padding für die rechte und linke Seite.

Eine Ecke

Im weiteren Verlauf können Sie auch Eckhintergründe für die Bilder auf Ihrer Website erstellen. Diese Art von Rahmen eignet sich hervorragend, wenn Sie eine Farbe hervorheben möchten, die im Bild verwendet wird.

Registerkarte Inhalt

Verwenden Sie für das dritte Bildbeispiel den folgenden Verlaufshintergrund:

• Erste Farbe: rgba(58,8,1,0,58)
• Zweite Farbe: rgba(41,196,169,0)
• Verlaufsrichtung: 152deg
• Startposition: 34%
• Endposition: 28%

Registerkarte „Design“

Fügen Sie dann auch '20px' zu jedem der Polster hinzu.

Bildrahmen & Hintergrund mit Farbverlauf

Eine andere Möglichkeit besteht darin, einen Verlaufshintergrund mit einem Bildrahmen zu kombinieren. Auch dies kann zu beeindruckenden Ergebnissen führen, wie Sie in den nächsten vier Beispielen sehen werden.

Subtiler Farbverlauf

Die erste Kombination aus Farbverlaufshintergrund und Bildrahmen ist einfach, aber schön. Durch die Verwendung der gleichen Farben für den Verlaufshintergrund und den Rand fühlt sich der Bildrand irgendwie an, als würde er mit Farbe gefüllt.

Registerkarte Inhalt

Beginnen Sie mit dem Hinzufügen der folgenden Verlaufshintergrundeinstellungen zu Ihrem Bild:

• Erste Farbe: rgba(255,255,255,0)
• Zweite Farbe: #777777
• Verlaufstyp: Linear
• Verlaufsrichtung: 180deg
• Startposition: 65%
• Endposition: 78%

Registerkarte „Design“

Wechseln Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen in der Unterkategorie Rahmen:

• Rand verwenden: Ja
• Randfarbe: #777777
• Rahmenbreite: 3px
• Rahmenstil: Solid

Schließlich fügen Sie allen Padding-Optionen eine Auffüllung von '7px' hinzu.

Geformt

Als nächstes haben wir ein Beispiel, das großartig ist, um die Aufmerksamkeit der Besucher auf sich zu ziehen. Das Bild selbst enthält in diesem Fall meist hellere Farben, was einen schönen Ausgleich mit dem dunkleren Rand schafft.

Registerkarte Inhalt

Die Hintergrundeinstellungen für den Farbverlauf, die Sie für diesen Bildrahmen benötigen, sind die folgenden:

• Erste Farbe: rgba(53,0,188,0.1)
• Zweite Farbe: #680061
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 80%
• Endposition: 80%

Registerkarte „Design“

Gehen Sie zur Registerkarte Design und verwenden Sie den folgenden Rahmen:

• Rand verwenden: Ja
• Rahmenfarbe: #9a00bc
• Randbreite: 1px
• Rahmenstil: Solid

Scrollen Sie nach unten und fügen Sie dem Bild die folgende Auffüllung hinzu:

• Oben: 7 Pixel
• Rechts: 5 Pixel
• Unten: 7px
• Links: 5 Pixel

Doppelter Rand

Die Verwendung eines doppelten Rahmens in Kombination mit einem Hintergrund mit Farbverlauf kann ebenfalls beeindruckende Ergebnisse liefern. Schau mal:

Registerkarte Inhalt

Die Hintergrundfarbe des Farbverlaufs, die wir in diesem Beispiel verwendet haben, ist die folgende:

• Erste Farbe: rgba(224,43,32,0.61)
• Zweite Farbe: rgba(12,113,195,0,87)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 71%
• Endposition: 93%

Registerkarte „Design“

Verwenden Sie im weiteren Verlauf die folgenden Einstellungen für die Unterkategorie Rand:

• Rand verwenden: Ja
• Rahmenfarbe: #f4f4f4 (entsprechend der Hintergrundfarbe Ihres Abschnitts)
• Rahmenbreite: 8px
• Rahmenstil: Doppel

Und fügen Sie '10px' zum oberen, unteren, rechten und linken Abstand des Bildes hinzu.

Dreiecksecken

Im weiteren Verlauf können Sie auch einige kleine Ecken in Ihrem Rahmen erstellen, indem Sie die Verlaufshintergrundoption in Kombination mit einem gestrichelten Rahmen verwenden.

Registerkarte Inhalt

Um den oben gezeigten Bildrahmen zu erreichen, verwenden Sie die folgenden Einstellungen für den Verlaufshintergrund:

• Erste Farbe: rgba(163,103,6,0)
• Zweite Farbe: #e09900
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 97%
• Endposition: 97%

Registerkarte „Design“

Auf der Registerkarte Design benötigen wir außerdem die folgenden Rahmeneinstellungen:

• Rand verwenden: Ja
• Rahmenfarbe: #e09900
• Randbreite: 2px
• Rahmenstil: Gestrichelt

Schließlich benötigen wir eine Auffüllung von '8px' für die obere, untere, linke und rechte Auffüllung.

Muster & Hintergrund mit Farbverlauf

Die letzte Möglichkeit, die wir ins Rampenlicht stellen möchten, ist die gleichzeitige Verwendung eines Musters und eines Hintergrunds mit Farbverlauf. Auf diese Weise können Sie mit dem Aussehen und der Haptik Ihrer Bilder herumspielen.

Spielerisch

Dieser Rahmen enthält einen Verlaufshintergrund aus zwei Farben, die auch im Bild selbst verwendet werden. Durch das Hinzufügen eines Hintergrundmusters verleiht das Bild Ihrer Website etwas mehr Atmosphäre.

Registerkarte Inhalt

Für das letzte Beispiel verwenden wir die folgenden Verlaufshintergrundeinstellungen:

• Erste Farbe: rgba (4,49,96,0.51)
• Zweite Farbe: rgba(119,74,15,0.51)
• Verlaufstyp: Linear
• Verlaufsrichtung: 180deg
• Startposition: 0%
• Endposition: 100%

Registerkarte „Design“

Als nächstes fügen wir auch einen Musterhintergrund hinzu. Das Muster, das wir in diesem Beispiel verwendet haben, stammt von Toptal. Sie können ihre Muster für alle möglichen Zwecke verwenden, stellen Sie nur sicher, dass Sie sie in Ihrem Code angeben, wie in den FAQ erwähnt. Nachdem Sie den Musterhintergrund hinzugefügt haben, verwenden Sie auch die folgenden Einstellungen:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Multiplizieren

Das letzte, was Sie tun müssen, ist, einen Abstand von '12px' zum oberen, unteren, rechten und linken Abstand Ihres Bildes hinzuzufügen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen verschiedene Möglichkeiten gezeigt, um schöne Bildränder zu erstellen. Diese Optionen geben Ihnen eine Perspektive auf die Dinge, die Sie mit den neuen Divi-Optionen tun können, ohne zusätzliches CSS zu verwenden. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von Mr Aesthetics / shutterstock.com