So übertragen Sie einen neuen Designstil mit den Effizienzfunktionen von Divi auf eine andere Seite

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit dem Möbelgeschäft-Layout-Paket von Divi einen neuen Designstil auf eine andere Seite übertragen können. Bei all den neuen Layoutpaketen, die herauskommen, wollten Sie vielleicht den Stil einer vorhandenen Seite mit dem Stil des neuen Layoutpakets ändern. Anstatt die gesamte Seite zu ersetzen, können Sie den Designstil auch mit den Effizienzfunktionen von Divi übertragen. Eine der neuesten Optionen, die im Visual Builder enthalten sind, ist die seitenübergreifende Kopier- und Einfügefunktion. Auf diese Weise können Sie viele Änderungen im gesamten Layout vornehmen, ohne die Einstellungen eines Designelements zu berühren.

Aber natürlich ist jedes Layout einzigartig, was bedeutet, dass Sie auch einige manuelle Änderungen vornehmen müssen. Die gute Nachricht ist, dass Sie diese manuellen Einstellungen mit einem Klick auf ähnliche Elemente auf der Seite erweitern können. Dieser Beitrag wird Ihnen hoffentlich helfen, beim Übertragen eines Designstils einer bestimmten Struktur zu folgen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis.

Sich nähern

Seitenstrukturen unterscheiden sich voneinander, daher ist es schwierig, einen Designstil mit einem Klick vollständig zu übertragen. Aber mit Divi können Sie die Effizienzfunktionen nutzen, um den Prozess zu beschleunigen. Wir kombinieren die Funktion zum seitenübergreifenden Kopieren und Einfügen, die Funktion zum Erweitern von Stilen und die Funktion zum Suchen und Ersetzen, um Zeit beim Übertragen eines Designstils auf eine vorhandene Seite zu sparen, ohne die Seitenstruktur ändern zu müssen.

Teil 1: Öffnen von zwei Seiten nebeneinander

Wir beginnen damit, dass wir zwei Seiten nebeneinander öffnen. Die vorhandene Seite und die neue Seite, die den Designstil enthalten, den wir anwenden möchten. Wir nehmen die Zielseite des Möbelgeschäfts-Layout-Pakets (der Designstil, den wir auf die vorhandene Seite anwenden möchten) und die Zielseite des Hosting-Unternehmens-Layout-Pakets (die Seite, die wir ändern möchten).

Teil 2: Zurücksetzen bestimmter Abschnittseinstellungen

Im zweiten Teil geht es um das Zurücksetzen bestimmter Abschnittseinstellungen. Die Einstellungen, die Sie zurücksetzen müssen, variieren von Layout zu Layout, umfassen jedoch normalerweise die Hintergrundeinstellungen und Trennereinstellungen.

Teil 3: Verwenden der seitenübergreifenden Funktionen zum Kopieren, Einfügen und Erweitern von Stilen von Divi für den Heldenbereich

Dann können wir mit der seitenübergreifenden Copy-Paste-Funktion von Divi beginnen, Dinge zu ändern. Es ist natürlich, mit den Heldenabschnitten zu beginnen. Wir ändern jedes Designelement im Heldenbereich in den neuen Designstil, indem wir die Einstellungen des neuen Designstils kopieren und auf der vorhandenen Seite einfügen. Danach erweitern wir diese Stile auf ähnliche Elemente auf der Seite.

Teil 4: Manuelle Änderungen vornehmen (je nach Layout) & Effizienzfunktionen nutzen

Wie bereits erwähnt, ist jedes Layout einzigartig. Aus diesem Grund sind auch manuelle Änderungen an der vorhandenen Seite erforderlich. Sobald die wenigen Änderungen vorgenommen wurden, können Sie den Stil erweitern oder mithilfe von Suchen und Ersetzen auf ähnliche Elemente auf der Seite anwenden.

Teil 5: Designmerkmale hinzufügen

Zu guter Letzt können Sie der bestehenden Seite auch bestimmte Gestaltungsmerkmale hinzufügen.

Teil 1: Öffnen von zwei Seiten nebeneinander

Erstellen Sie eine neue Seite mit dem Layout mithilfe der Landing Page des Möbelgeschäfts-Layout-Pakets

Nachdem wir nun den Ansatzteil dieses Beitrags durchgegangen sind, fangen wir an, Divi zu verwenden! Fügen Sie über die Landingpage des Möbelgeschäfts-Layout-Pakets eine neue Seite hinzu.

Erstellen Sie eine neue Seite mit der Landing Page des Hosting-Unternehmens-Layout-Pakets

Erstellen Sie eine weitere Seite mit der Landingpage des Hosting Company Layout Packs. Wir werden den Designstil dieses Layouts durch das Landingpage-Design des Möbelgeschäfts-Layout-Pakets ersetzen.

Teil 2: Zurücksetzen bestimmter Abschnittseinstellungen

Abschnittsspezifische Einstellungen der Zielseite des Hosting-Unternehmens zurücksetzen

Heldenbereich öffnen

Sobald Sie beide Layouts in der Nähe haben, fahren Sie fort, indem Sie die Einstellungen für den Heldenbereich der Zielseite des Hosting-Unternehmens öffnen.

Abschnittshintergrund zurücksetzen und auf alle Abschnitte erweitern

Gehen Sie zu den Hintergrundeinstellungen und setzen Sie die Optionen zurück, indem Sie mit der rechten Maustaste klicken und auf Hintergrund zurücksetzen klicken. Anschließend können Sie diese Hintergrundstile auf alle Abschnitte auf der Seite erweitern, um sicherzustellen, dass kein Abschnitt auf Ihrer Seite Hintergrundelemente enthält.

Teiler zurücksetzen und auf alle Abschnitte erweitern

Machen Sie dasselbe für die Abschnittstrenner, um sicherzustellen, dass alle Abschnittstrenner auf der Seite verschwunden sind.

Teil 3: Verwenden der seitenübergreifenden Funktionen zum Kopieren, Einfügen und Erweitern von Stilen von Divi für den Heldenbereich

Seitenübergreifendes Kopieren und Einfügen von Hero-Abschnittselementen

Abschnittseinstellungen

Es ist an der Zeit, die seitenübergreifende Copy-Paste-Option zu verwenden! Wir werden jedes Designelement im Heldenbereich ändern. Beginnen Sie damit, die Stile der Helden-Sektion auf der Landingpage des Möbelhauses zu kopieren. Gehen Sie dann zurück zur Landingpage des Hosting-Unternehmens und fügen Sie die kopierten Abschnittsstile ein.

Zeileneinstellungen

Machen Sie dasselbe für die Reihe.

Titeltextmodul

Kopieren Sie auch die Modulstile des Titels Textmodul und lassen Sie sie auf den Titel der Landingpage des Hosting-Unternehmens anwenden.

Fließtextmodul

Öffnen Sie als nächstes die Beschreibung Textmodul und kopieren Sie die Textstile. Sobald Sie dies getan haben, lassen Sie sie auf der Seite des Hosting-Unternehmens für das Textmodul gelten.

Stile erweitern

Nachdem Sie die neuen Textstile angewendet haben, können Sie diese Stile auf alle Module auf der Seite erweitern.

Ändern Sie die Ausrichtung des hinteren Textes in die Mitte, wo dies erforderlich ist

Sie werden feststellen, dass die linke Textausrichtung auf alle Designelemente auf der gesamten Seite angewendet wird. Sie können dies beibehalten oder die Textausrichtung manuell ändern.

Tasteneinstellungen

Das letzte Modul im Heldenabschnitt, auf das Sie neue Modulstile anwenden müssen, ist das Schaltflächenmodul.

Stile für Schaltflächeneinstellungen erweitern

Anstatt die gesamten Schaltflächenmodul-Stile zu erweitern, erweitern wir die spezifischen Schaltflächeneinstellungen.

Stile für Abstände erweitern

Zusammen mit den Abstandseinstellungen.

Stile für Box Shadow erweitern

Und auch die Schatteneinstellungen der Box.

Verbleibende Elemente einmal kopieren und einfügen + Stil erweitern

Teiler

Wir müssen auch die Stile des Trennmoduls kopieren und einfügen und sie auf die Trennlinien auf der Zielseite des Hosting-Unternehmens anwenden.

Stile erweitern

Erweitern Sie die Stile dieses Moduls erneut über die gesamte Seite.

Teil 4: Manuelle Änderungen vornehmen (je nach Layout) & Effizienzfunktionen nutzen

Layoutspezifische Änderungen

Titelschriftart suchen und ersetzen

Zeit, einige manuelle Änderungen vorzunehmen! Als erstes passen wir die Schriftart an. Öffnen Sie ein Textmodul auf der Seite und suchen Sie die Rubik-Schriftart, die überall auf der Seite verwendet wird. Klicken Sie dann auf Suchen & Ersetzen und ersetzen Sie die Schriftart durch Montserrat.

Schriftstärke des Titels suchen und ersetzen

Machen Sie dasselbe für die Schriftstärke. Anstatt Mittel zu verwenden, wählen Sie Licht.

Abgerundete Ecken suchen und ersetzen

Wir entfernen auch die Ränder der abgerundeten Ecken auf der gesamten Seite, indem wir Suchen und Ersetzen verwenden und '0px' auf jede der Ecken der Seite anwenden.

CTA-Hintergrundeinstellungen zurücksetzen & Stil im Abschnitt erweitern

Fahren Sie fort, indem Sie die Call-to-Action-Module auf der Seite suchen und die Hintergrundeinstellungen des ersten Moduls zurücksetzen. Erweitern Sie diese Stile dann auf alle Calls-to-Action im Abschnitt.

CTA-Hintergrundfarbe im Abschnitt suchen und ersetzen

Sobald Sie dies tun, wird die Standardhintergrundfarbe angezeigt. Suchen und ersetzen Sie diese Farbe und ändern Sie sie im gesamten Abschnitt in "#1a2545".

CTA-Textfarbe im Abschnitt suchen und ersetzen

Ersetzen Sie auch im gesamten Abschnitt die Textfarbe durch 'Light'.

Schaltflächeneinstellungen der Preistabelle ändern

Rufen Sie dann die Preistabellen auf der Seite auf und ändern Sie die Schaltflächeneinstellungen:

• Schaltflächenhintergrundfarbe: #ef6f49
• Breite des Tastenrahmens: 8px
• Farbe des Knopfrahmens: #ef6f49
• Schaltflächenrandradius: 0px
• Abstand der Tastenbuchstaben: 2px (Standard), 1px (Hover)
• Button-Schriftart: Montserrat
• Schriftstärke: Halbfett
• Schriftstil: Großbuchstaben
• Tastenausrichtung: Links

Stile für Preistabellen und CTA-Module erweitern

Erweitern Sie die neue Schaltflächeneinstellung auf alle Preistabellen und Call-to-Action-Module auf der gesamten Seite.

Teil 5: Designmerkmale hinzufügen

Abschnitt Hintergrundfarbe #1

Im letzten Teil dieses Tutorials werden wir einige Designmerkmale manuell hinzufügen. Dies umfasst unter anderem Hintergrundeinstellungen. Öffnen Sie den im Druckbildschirm unten markierten Abschnitt und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #f7f3ec

Abschnitt Hintergrundfarbe #2

Machen Sie dasselbe für den Abschnitt unten.

• Hintergrundfarbe: #f7f3ec

Abschnitt Hintergrund mit Farbverlauf # 1

Suchen Sie dann den Abschnitt im Druckbildschirm unten und fügen Sie einen Hintergrund mit Farbverlauf hinzu.

• Farbe 1: #ffffff
• Farbe 2: #1a2545
• Verlaufsrichtung: 90deg
• Startposition: 55%
• Endposition: 55%

Abschnitt Hintergrund mit Farbverlauf #2

Verwenden Sie einen anderen Verlaufshintergrund für den folgenden Abschnitt:

• Farbe 1: rgba(210,218,228,0.38)
• Farbe 2: #ffffff
• Verlaufsrichtung: 90deg
• Startposition: 45%
• Endposition: 45%

Abschnitt Hintergrund mit Farbverlauf #3

Zu guter Letzt fügen Sie auch dem letzten Abschnitt auf der Seite einen Hintergrund mit linearem Farbverlauf hinzu.

• Farbe 1: #ffffff
• Farbe 2: #f7f3ec
• Startposition: 40%
• Endposition: 40%

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie den Designstil eines Layouts mit den Effizienzfunktionen von Divi übertragen können. Dieses Tutorial nutzt die neue seitenübergreifende Copy-Paste-Funktion, die Teil des neuen Visual Builder ist. Dieses Tutorial ist Teil unserer laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas mehr in Ihre Design-Toolbox zu bringen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie unten einen Kommentarbereich!