Divi: So verwenden Sie den "Gradient Builder", um Ihre Bilder zu verschönern

Möchten Sie Ihren Bildern mit dem Verlaufsgenerator Formen geben? Divi ?

Bildmasken werden oft verwendet, um Bildern interessante Formen hinzuzufügen. Sie lassen das Bild durch die Form hindurchsehen und verleihen der Seite ein einzigartiges Designelement.

Bei Verlaufsgenerator de Divi, müssen Sie nicht unbedingt Masken verwenden, um Formen zu erstellen. Stattdessen können Sie die verwenden Gradientenstopps und die Parameter, um sie zu erstellen!

In diesem Artikel erfahren Sie, wie Sie Ihre Bilder mit dem Gradient Builder von verschönern Divi um Ihnen dabei zu helfen, Ihren Bildern einzigartige Designs hinzuzufügen.

Lassen Sie uns beginnen.

Übersicht

Lassen Sie uns zunächst sehen, was wir in diesem Tutorial auf verschiedenen Bildschirmgrößen erstellen werden.

Erstes Beispiel – Kreisförmige Bildform

Desktop-Computer

Geben Sie Ihren Bildern mit dem Verlaufsgenerator von Divi Formen

Tablette

Telefon

Zweites Beispiel – Lineare Bildform

Büro

Tablette

Telefon

Drittes Beispiel – Elliptische Bildform

Desktop-Computer

Tablette

Telefon

Viertes Beispiel – Konische Bildform

Desktop-Computer

Tablette

Telefon

Layoutgestaltung mit Divi

Beginnen wir mit der Erstellung des Layouts, das wir in allen Beispielen verwenden werden. Dieses Layout kann als Heldenabschnitt verwendet werden.

Es enthält auf der einen Seite einen Titel und eine Beschreibung und auf der anderen das Bild. Wir werden dieses Layout und Bild dann für die Beispiele verwenden.

Passen Sie den Abschnitt an

Erstellen Sie zunächst eine neue Divi-Seite und passen Sie den Abschnitt an. Öffnen Sie die Abschnittseinstellungen und ändern Sie die couleur Hintergrund zu #f0f3fb.

Hintergrund: #f0f3fb

Dann gehen Sie auf die Registerkarte Design und ändern Sie die Abstandseinstellungen wie folgt:.

Polsterung (oben und unten): 10 %

Zeile hinzufügen

Fügen Sie dann ein hinzu Linie mit der folgenden Spaltenstruktur.

Greifen Sie auf die Linienparameter auf der Registerkarte zu Design, gehe zur Option Größe und ändern Sie die Größenparameter.

Benutzerdefinierte Bundstegbreite verwenden: JA
Maximale Breite: 1 Pixel

Einstellungen der ersten Spalte

In der Registerkarte Inhalt der Zeile, öffnen Sie die Einstellungen der ersten Spalte der Zeile, gehen Sie zur Registerkarte Design. Ändern Sie den Abstand wie folgt.

Polsterung (links und rechts): 9 % links, rechts

Parameter des ersten Textbausteins

Fügen Sie dann ein hinzu Textmodul zur linken Spalte.

wählen Unterwegs 4 für den Text von Inhalt und füge hinzu Inhalt von deinem Körper.

Text: „Willkommen bei BlogPasCher“

Gehen Sie dann zur Registerkarte Design und ändern Sie die Titeleinstellungen.

Schrift: Montserrat
Schriftdicke: fett
Stil: TT
Textfarbe: #1d4eff

Textgröße: Desktop 16px, Tablet 14px, Telefon 12px
Buchstabenabstand: 0,3 em
Zeilenhöhe: 1,6 cm

Scrollen Sie zu Abstand und ändern Sie den unteren Rand.

Rand (unten): 0px

Parameter des zweiten Textbausteins

Fügen Sie dann ein hinzu Textmodul unter dem ersten.

Stellen Sie den Texttyp auf ein "Überschrift 1" und füge hinzu Inhalt von deinem Körper.

Inhalt: „Planen Sie Ihre finanzielle Zukunft“

Wählen Sie dann die Registerkarte Design und ändern Sie die Optionen des Titels.

Schrift: Montserrat
Schriftdicke: fett
Textfarbe: #0f1154

Größe: 80 Pixel Desktop, 40 Pixel Tablet, 24 Pixel Telefon
Zeilenhöhe: 110 %

Parameter des dritten Textbausteins

Fügen Sie dann ein hinzu Textmodul unter dem zweiten.

Belassen Sie den Texttyp bei "Absatz" und fügen Sie Ihren Hauptinhalt hinzu.

Körper: Inhalt

Gehen Sie dann zur Registerkarte Technologie und ändern Sie die Texteinstellungen.

Textschriftart: Roboto
Schriftstärke: mittel
Textfarbe: #000000

Textgröße: 18px (Desktop und Tablet), 14px (Telefon)
Zeilenhöhe: 180 %

Scrollen Sie schließlich nach unten zu Abstand und legen Sie den unteren Rand fest. Schließen Sie die Moduleinstellungen.

Rand (unten): 0px

Bildmoduleinstellungen

Fügen Sie nun ein hinzu Bildmodul zur rechten Spalte.

Erstens Dummy-Image entfernen indem Sie auf den Papierkorb oder das Reset-Symbol über dem Bild klicken.

Scrollen Sie dann nach unten Backboden Wählen Sie die Registerkarte Bild und fügen Sie Ihr Bild hinzu. Belassen Sie alle Bildeinstellungen auf ihren Standardwerten. Das Bild zeigt zunächst nicht viel. Wir werden das regeln, wenn wir gehen.

Wählen Sie dann die Registerkarte Design und scrolle zu Abstand.

Rand (Desktop): -10 % (oben), -30 % (links), 10 % (rechts)
Polsterung (oben und unten): 300px

Rand (Tablet/Telefon): 0 % (oben), 0 % (links und rechts)

Polsterung (Telefon): 150 Pixel (oben und unten)

Beispiele für Bilder, die mit Divis Gradient Builder geformt wurden

Erstes Beispiel – Kreisform

Unser erstes Beispiel gibt dem Bild eine kreisförmige Form mit einem Loch in der Mitte.

Öffnen Sie die Einstellungen des Bildmoduls und scrollen Sie nach unten zu Hintergrund . Wähle aus Registerkarte "Hintergrundverlauf". und setze 6 Gradientenstopps:

Erster Halt: 0 %, #f0f3fb
Zweitens: 45 %, #f0f3fb
Dritter (über dem zweiten): 45 %, rgba (41,196,169,0)
Viertens: 69 %, rgba (250,255,214,0)
Fünfter (über dem vierten): 69 %, #f0f3fb
Sechstens: 100 %, #f0f3fb

Typ: Rund
Position: Mitte
Einheit: Prozent
Quadratische Steigung über Hintergrundbild: JA

Zweites Beispiel – Lineare Form

Hier ist eine Vorschau des zweiten Bildformbeispiels. Dieses Beispiel platziert diagonale Linien über das Bild.

Öffnen Sie die Einstellungen, scrollen Sie nach unten zu Hintergrund und wählen Sie dieRegisterkarte "Hintergrundverlauf".. Fügen Sie vier Gradientenstopps hinzu:

Erster Halt: 0 %, #f0f3fb
Zweitens: 5 %, #f0f3fb
Dritter (über dem zweiten): 5 %, rgba (175,175,175,0)
Viertens: 13 %, rgba (41,196,169,0)

Typ: Linear
Lenkung: 150 Grad
Farbverlauf wiederholen: JA
Steigungseinheit: Prozent
Quadratische Steigung über Hintergrundbild: JA

Drittes Beispiel – Elliptische Form

Dies ist unser drittes Bildformbeispiel. Dies verwendet eine elliptische Form.

Öffnen Sie die Einstellungen des Bildmoduls und scrollen Sie nach unten zu Hintergrund . Registerkarte auswählen Hintergrundverlauf und erstellen Sie vier Gradientenstopps:

Erster Halt: 0 %, #f0f3fb
Zweitens: 9 %, #f0f3fb
Dritter (über dem zweiten): 9 %, rgba (175,175,175,0)
Viertens: 21 %, rgba (41,196,169,0)

Typ: Ellipsenförmig
Verlaufsposition: Oben links
Farbverlauf wiederholen: JA
Steigungseinheit: Prozent
Quadratische Steigung über dem Hintergrundbild: JA

Viertes Beispiel – Konische Form

Unser viertes Beispiel verwendet "Konisch" um eine einzelne Bildform zu erstellen.

Öffnen Sie die Bildmoduleinstellungen, scrollen Sie nach unten zu Hintergrund und wählen Sie die Registerkarte Hintergrundbild. Dieser hat 5 Gradientenstopps:

Erster Halt: 23 %, #f0f3fb
Zweitens: 35 %, #f0f3fb
Dritter (über dem zweiten): 35 %, rgba (41,196,169,0)
Viertens: 65 %, rgba (250,255,214,0)
Fünfter (über dem vierten): 65 %, #f0f3fb

Typ: Konisch
Verlaufsrichtung: 180 Grad
Verlaufsposition: Unten
Einheit: Prozent
Quadratische Steigung über Hintergrundbild: JA

Endergebnisse

Alle Layouts liefen gut. Bildformen fallen auf und Bilder sind immer leicht verständlich. Alle von ihnen sind reaktionsschnell, sodass sie auf jedem Gerät gut aussehen.