Laden Sie 9 KOSTENLOSE geformte Bild-Overlays für Divi . herunter

Die Art und Weise, wie Sie Bilder auf Ihrer Website anzeigen, kann das Gesamtdesign, das Sie erstellen, wirklich verändern. Mit den integrierten Optionen von Divi können Sie bereits verschiedene Designeinstellungen anwenden, die Ihnen helfen, Bilder auf atemberaubende Weise anzuzeigen, denken Sie beispielsweise an Rahmen und Kastenschatten. Wenn Sie Ihren Bildern jedoch eine einzigartigere Form verleihen möchten, hilft Ihnen dieser Beitrag. Wir werden 9 KOSTENLOS geformte Bild-Overlays teilen, die Sie herunterladen und auf jeder von Ihnen erstellten Website verwenden können. Nachdem Sie diese geformten Bild-Overlays geteilt haben, zeigen wir Ihnen auch, wie Sie sie beim Erstellen einer Website mit Divi nutzen können. Wir hoffen, dass dieses Tutorial Sie dazu inspirieren wird, auch Ihre eigenen geformten Bildüberlagerungen zu erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir uns mit dem Tutorial und dem Download befassen, werfen wir einen kurzen Blick auf das Ergebnis, das Sie bei verschiedenen Bildschirmgrößen erwarten können.

Desktop

Telefon

Laden Sie die geformten Bild-Overlays KOSTENLOS herunter

Um die geformten Bild-Overlays in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag und Freitag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Sich nähern

• Die geformten Bild-Overlays, die Sie im Download-Ordner finden, sind einsatzbereit, wenn Sie sie mit einer weißen Reihen- und/oder Abschnittshintergrundfarbe kombinieren
• Wenn Sie die geformten Bildüberlagerungen an eine andere Hintergrundfarbe anpassen möchten, müssen Sie die geformten Bildüberlagerungen in einer anderen Farbe exportieren, indem Sie die Illustrator-Datei verwenden, die im obigen Download enthalten ist
• Wir zeigen Ihnen im ersten Teil des Tutorials, wie Sie die Farbe der geformten Bildüberlagerung ändern (mit Adobe Illustrator).
• Dann gehen wir zu Divi und laden eine der geformten Bildüberlagerungen in ein Bildmodul hoch
• Wir fügen dem Bildmodul auch ein Hintergrundbild und einen Verlaufshintergrund hinzu, die durch die geformte Bildüberlagerung angezeigt werden

Ändern von geformten Bildüberlagerungen in die Hintergrundfarbe des Abschnitts mit Adobe Illustrator

Öffnen Sie die Illustrator-Datei im Download-Ordner

Wie im Abschnitt "Ansatz" dieses Beitrags erwähnt, können Sie, wenn Sie die bildförmigen Überlagerungen auf weißem Hintergrund verwenden möchten, einfach die PNG-Dateien verwenden, die Sie im Download-Ordner finden. Wenn Sie jedoch die geformten Bildüberlagerungen auf einer anderen Zeilen- und/oder Abschnittshintergrundfarbe verwenden möchten, müssen Sie die Farbe manuell mithilfe der Adobe Illustrator-Datei ändern, die ebenfalls im Download-Ordner enthalten ist. Das Ändern der Farbe nimmt wenig bis keine Zeit in Anspruch und ermöglicht es Ihnen, die geformten Bildüberlagerungen auf buchstäblich jeder von Ihnen erstellten Website zu verwenden. Gehen wir also die Schritte durch. Zunächst müssen Sie die Adobe Illustrator-Datei öffnen.

Bildform-Overlay Ihrer Wahl auswählen

Sobald Sie die Datei geöffnet haben, finden Sie 9 verschiedene Zeichenflächen mit den geformten Bildüberlagerungen, die Sie für jeden Zweck verwenden können. Wählen Sie diejenige aus, die Sie bearbeiten möchten.

Ändern Sie die Farbe, um der Hintergrundfarbe des Abschnitts zu entsprechen

Fahren Sie fort, indem Sie die Farbe der Form in dieselbe Hintergrundfarbe ändern, die Sie für Ihre Zeile und/oder Ihren Abschnitt verwenden möchten.

Zeichenfläche auswählen

Sobald die Farbe geändert wurde, können Sie die gesamte Zeichenfläche auswählen, die die geformte Bildüberlagerung enthält.

PNG-förmige Bildüberlagerung für das Web speichern

Und speichern Sie es als PNG-Bilddatei für das Web, indem Sie auf Datei> Exportieren> Für Web speichern klicken .

Beginnen wir mit dem Erstellen!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Zeit, zu Divi zu wechseln und das Ergebnis zu erstellen! Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene und fügen Sie einen neuen regulären Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Bildmodul zu Spalte 1 hinzufügen

Geformte Bildüberlagerung hochladen

Das einzige Modul, das wir in Spalte 1 benötigen, ist ein Image-Modul. Hier wird die ganze Magie passieren. Wir beginnen mit dem Hochladen des geformten Bild-Overlays. Sie werden feststellen, dass ein Teil des Bildes vollständig transparent ist. Dadurch können das Hintergrundbild und der Hintergrund mit Farbverlauf in den nächsten Schritten durchscheinen.

Hintergrund mit Farbverlauf

Fahren Sie fort und fügen Sie als nächstes einen Farbverlaufshintergrund Ihrer Wahl hinzu.

• Farbe 1: #aa2bff
• Farbe 2: #09f7eb

Hintergrundbild

Und laden Sie ein PNG-Hintergrundbild hoch oder nur ein normales, wenn Sie nicht möchten, dass der Hintergrund mit Farbverlauf durchscheint. Sie können die von uns verwendeten Illustrationen auch herunterladen, indem Sie den folgenden Beitrag aufrufen, den wir zum Ändern eines Verlaufshintergrunds beim Schweben erstellt haben.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Unten Mitte
• Hintergrundbild wiederholen: Keine Wiederholung

Größe

Ein weiterer wichtiger Schritt, damit dieses Tutorial funktioniert, ist die Aktivierung der Option „Vollbreite erzwingen“ in den Größeneinstellungen des Bildmoduls. Dadurch wird sichergestellt, dass der Verlaufshintergrund und das Hintergrundbild nur durch den transparenten Bereich der geformten Bildüberlagerung sichtbar sind.

• Volle Breite erzwingen: Ja

Titeltextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Kommen wir zur zweiten Spalte. Hier benötigen wir als erstes Modul ein Titel-Textmodul. Fügen Sie einen Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie dann zu den Überschriftentexteinstellungen und nehmen Sie einige Änderungen vor.

• Überschrift 2 Schriftart: Antic Didone
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textgröße: 45px
• Überschrift 2 Buchstabenabstand: -2px

Abstand

Fügen Sie auch einen benutzerdefinierten oberen Rand hinzu.

• Oberer Rand: 100px

Beschreibungstextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das zweite Modul, das wir benötigen, ist ein Beschreibungstextmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

Texteinstellungen

Gehen Sie dann zu den Texteinstellungen und ändern Sie die Textausrichtung des Moduls.

• Textausrichtung: Begründen

Größe

Ändern Sie auch die Breite in den Größeneinstellungen.

• Breite: 63 %

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir brauchen, ist ein Button-Modul. Geben Sie einen Inhalt Ihrer Wahl ein.

Tasteneinstellungen

Fahren Sie fort, indem Sie zu den Schaltflächeneinstellungen gehen und das Aussehen der Schaltfläche ändern.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 17px
• Schaltflächentextfarbe: #ffffff
• Verlaufsfarbe 1: #aa2bff
• Verlaufsfarbe 2: #09f7eb
• Verlaufsrichtung: 111deg

• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px
• Tastenabstand der Buchstaben: -2px
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Fügen Sie der Schaltfläche auch eine zusätzliche benutzerdefinierte Auffüllung hinzu.

• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Box Schatten

Vervollständigen Sie das Design zu guter Letzt, indem Sie dem Knopf einen subtilen Schleifenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 50px
• Stärke der Box-Schattenausbreitung: -5px

Vorschau

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

Desktop

Telefon

Abschließende Gedanken

In diesem Beitrag haben wir 9 KOSTENLOSE geformte Bild-Overlays für Divi geteilt, die Sie für jede Art von Website verwenden können, die Sie erstellen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert hat, Ihre eigenen einzigartig geformten Bildüberlagerungen zu erstellen, die Sie ständig wiederverwenden können. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!