10 Schritte zur Verwendung eines neuen Divi-Layout-Pakets für Ihr nächstes Projekt

Als Teil der Divi Design Initiative von Elegant Themes verwöhnen uns Kenny und das Designteam jede Woche mit brandneuen KOSTENLOSEN Divi-Layoutpaketen. Die Layoutpakete können jeden Montag im Blogbeitrag mit dem Layoutpaket heruntergeladen werden. Viele von Ihnen haben die Layout-Pakete verwendet, um in einem sehr kleinen Bruchteil der Zeit, die Sie normalerweise benötigen würden, brandneue Websites zu erstellen.

Im heutigen Beitrag zeige ich Ihnen, wie Sie diese Layouts optimal nutzen können, indem Sie 10 wichtige Schritte anbieten, die Sie befolgen müssen, wenn Sie ein neues Divi-Layout-Paket für Ihr nächstes Projekt verwenden. Ich habe auch einige weniger bekannte Tipps hinzugefügt, um diese Layouts wie ein Profi zu handhaben.

Genießen!

Hinweis: Wie alle Schritte sollen diese in der aufgeführten Reihenfolge ausgeführt werden. Wenn Sie beispielsweise nicht zuerst Ihre Standardfarbpalette festlegen, ist sie nicht verfügbar, wenn Sie Ihre Standardakzentfarbe ändern.

10 Schritte zur Verwendung eines neuen Divi-Layout-Pakets für Ihr nächstes Projekt

Abonnieren Sie unseren Youtube-Kanal

#1 Importieren Sie zuerst die Layouts in Ihre Divi-Bibliothek

Der beste Weg, Ihrem Divi-Design neue Layouts hinzuzufügen, besteht darin, sie zuerst in die Divi-Bibliothek zu importieren. Wenn Sie dann eine neue Seite erstellen, können Sie das neue Layout aus Ihrer Bibliothek hinzufügen.

Bevor Sie die Layouts zu Ihrer Website hinzufügen, müssen Sie sicherstellen, dass das Layoutpaket aus dem Blogbeitrag heruntergeladen und die Datei entpackt wird.

Gehen Sie in Ihrem WordPress-Dashboard zu Divi > Divi-Bibliothek und klicken Sie oben links auf der Seite auf die Schaltfläche Importieren & Exportieren. Wählen Sie im angezeigten Portabilitäts-Modal die Registerkarte Import aus und klicken Sie auf Datei auswählen. Suchen Sie den entpackten Layout Pack-Ordner und wählen Sie die JSON-Datei mit „All“ im Dateinamen aus. Dadurch werden alle Layouts auf einmal in Ihre Bibliothek hochgeladen, anstatt sie einzeln ausführen zu müssen. Wenn Sie beispielsweise das Mode-Layout-Paket hochladen möchten, wählen Sie die Datei Fashion_All.json aus dem Layout-Ordner aus. Klicken Sie dann auf Divi Builder-Layouts importieren.

#2 Layouts zu neuen Seiten hinzufügen

Dieser Prozess ist ziemlich einfach. Gehen Sie in Ihrem WordPress-Dashboard zu Seiten > Neu hinzufügen. Geben Sie den Titel der Seite ein, die Sie erstellen möchten. Klicken Sie hier, um den Divi Builder zu verwenden und den Visual Builder bereitzustellen. Öffnen Sie das Einstellungsmenü am unteren Rand der Seite und klicken Sie links auf das Plus-Symbol „Aus Bibliothek laden“. Klicken Sie im angezeigten Modal "Aus Bibliothek laden" auf die Registerkarte "Aus Bibliothek hinzufügen" und wählen Sie das neue Layout aus der Liste aus, um das neue Layout zu laden.

Wiederholen Sie diesen Vorgang für jede neue Seite und fügen Sie jeder ein neues Layout hinzu.

#3 Erstelle dein Hauptmenü

Wenn es sich um eine Neuinstallation handelt, werden diese neuen Seiten in Ihrer primären Menüleiste in der oberen Kopfzeile angezeigt. Dies liegt daran, dass Sie noch kein primäres Menü erstellt haben, sodass Ihr Menü standardmäßig mit allen Seiten und Beiträgen gefüllt wird, die Sie zu Ihrer Website hinzufügen.

Um Ihr Hauptmenü zu erstellen, gehen Sie zum WordPress-Dashboard und gehen Sie wie folgt vor:

1. Navigieren Sie zu Darstellung > Menüs.
2. Wählen Sie oben auf der Seite den Link „Neues Menü erstellen“.
3. Geben Sie einen Menünamen ein.
4. Wählen Sie Ihre Menüpunkte im linken Umschalter unter Seiten aus.
5. Klicken Sie auf Zum Menü hinzufügen
6. Organisieren Sie Ihre Menüpunkte, indem Sie sie an ihren Platz ziehen.
7. Wählen Sie im Menü Einstellungen unten auf der Seite als Anzeigeort „primary menu“ aus.
8. Menü speichern

#4 Legen Sie Ihre Standardfarbpalette fest

Ich vergesse diesen Schritt oft und bereue es jedes Mal. Das Festlegen Ihrer Standardfarbpalette macht es wirklich bequem, Farben mit dem Divi-Builder zu bearbeiten. Ich kann Ihnen nicht sagen, wie oft ich zu einem anderen Modul zurückkehren muss, um einen Farbcode zu finden, einen Artikel mit Entwicklertools zu inspizieren oder meine Pipette-Browser-Erweiterung zu verwenden, finde einfach dieselbe Farbe, die ich immer wieder verwendet habe und erneut. Tu dir das nicht an!

Sie können die Standardfarbpalette festlegen, indem Sie zu Ihrem WordPress-Dashboard gehen und zu Divi > Themenoptionen navigieren. Und genau dort in der Registerkarte Allgemein finden Sie die aufgeführte Option. Fügen Sie dort die Farben hinzu, die Sie benötigen. Es ist immer eine gute Idee, die Farbe Weiß (#ffffff) und ein paar dunkle Farben (wie #333333 oder was auch immer Sie für Ihre dunkle Schriftfarbe eingestellt haben) beizubehalten, um Hintergründe und Text einfach zu gestalten.

#5 Setzen Sie Ihre globale Akzentfarbe

Sie werden wahrscheinlich ziemlich früh im Anpassungsprozess Ihrer neuen Site zum Theme Customizer gelangen. Wenn Sie dies tun, sollten Sie zuerst die globale Akzentfarbe ändern.

Um Ihre globale Akzentfarbe zu ändern, gehen Sie zum Theme Customizer und navigieren Sie zu Allgemeine Einstellungen > Layouteinstellungen und suchen Sie unten die Option Theme Accent Color.

Beachten Sie die neuen Farben, die Ihnen in der Farbpalette zur Verfügung stehen, seit Sie die Standardfarbpalette in Ihren Designoptionen aktualisiert haben.

Sobald Sie es geändert haben, speichern und veröffentlichen Sie Ihre Einstellungen und aktualisieren Sie Ihre Seite.

Die aktualisierte Themenakzentfarbe wird automatisch auf etwa 20 andere Elemente angewendet, weshalb es wichtig ist, diese zuerst zu aktualisieren.

Zu den Elementen, die automatisch aktualisiert werden, gehören:

Farbe der Körperverbindung
Widget-Kopfzeilenfarbe
Widget-Aufzählungszeichenfarbe
Fußzeile Social Icons Hover-Farbe
Standardfarbe für Symbole
Fußzeilenmenü Aktive Linkfarbe
Hintergrundfarbe des sekundären Menüs
Hintergrundfarbe für Slide-In und Fullscreen-Header-Stil
Hamburger Menüsymbol für mobile Menüfarbe
Primärmenü Aktive Linkfarbe
Farbe der Dropdown-Menüzeile
Hintergrundfarbe des sekundären Menüs
Hintergrundfarbe des sekundären Dropdown-Menüs
Hintergrundfarbe des sekundären Menüs
Aktive primäre Menülinkfarbe
Fußzeilenmenü Aktive Linkfarbe

Wenn Sie nicht sehen, dass die Änderungen an diesen Elementen sofort wirksam werden, müssen Sie die Anpassung möglicherweise speichern und beenden, die Seite aktualisieren und zur Anpassung zurückkehren.

#6 Stylen Sie Ihren Header

Sie können Ihre Kopfzeile über den Theme Customizer gestalten. Gehen Sie einfach zu Ihrem WordPress-Dashboard und navigieren Sie zu Divi > Theme Customizer > Header & Navigation.

Sie müssen Ihren Header auf jeden Fall so gestalten, dass er zu Ihren neuen Layouts passt. Zuerst würde ich mich für den gewünschten Kopfzeilenstil entscheiden (Standard, volle Breite, zentriert usw.), aber was auch immer Sie wählen, stellen Sie sicher, dass der Stil Ihrer Kopfzeile mit Ihren neuen Layouts übereinstimmt. Stellen Sie außerdem sicher, dass die Elemente in Ihrem Menü leicht zu lesen und zu navigieren sind.

Sie haben Optionen für Ihr primäres, sekundäres und festes Navigationsmenü. Nehmen Sie sich die Zeit, alles zu gestalten, was auf Ihre Website zutrifft.

Wenn Sie Ihre globale Akzentfarbe festlegen, werden einige der Kopfzeilen-Farbeinstellungen für Sie geändert. Deshalb ist es wichtig, diese Farbe zuerst einzustellen.

#7 Stylen Sie Ihre Bottom Bar

Sie können Ihre untere Leiste auch über den Theme Customizer gestalten. Gehen Sie einfach zu Ihrem WordPress-Dashboard und navigieren Sie zu Divi > Theme Customizer > Footer > Bottom Bar.

Die untere Leiste sollte nicht vernachlässigt werden. In Kombination mit der Navigationsleiste oben auf Ihrer Seite wird sie zu einer notwendigen Buchstütze, die die gesamte Seite umrahmt. Sicher, der standardmäßige schwarze Hintergrund kann auf jeder Site so ziemlich „funktionieren“, aber ich würde noch ein bisschen mehr damit experimentieren. Manchmal gebe ich der unteren Leiste gerne eine Hintergrundfarbe, die eine etwas dunklere Schattierung der Hintergrundfarbe des direkt darüber sitzenden Fußzeilenbereichs ist.

# 8 Verwenden Sie Verknüpfungen, um Designänderungen an Ihrem Seitenlayout vorzunehmen

Da Ihre Layouts über in Ihre Module integrierte Designeinstellungen verfügen, kann es etwas mühsam sein, Änderungen an Ihren Designeinstellungen auf globaler Ebene (siteweit) vorzunehmen. Aber es gibt ein paar Tricks, um den Prozess zu beschleunigen. Für den Anfang würde ich zuerst Änderungen an einem Seitenlayout vornehmen. Auf diese Weise können Sie Elemente der bearbeiteten Seite speichern, um sie zu Ihren anderen Seiten hinzuzufügen, die Designänderungen erfordern. Hier sind einige Tricks, um den Prozess der Designänderungen an einem bestimmten Layout zu beschleunigen.

Rechtsklickoptionen verwenden

Vergessen Sie nicht, dass Sie mit den Rechtsklick-Optionen Modulstile von einem Modul zum nächsten kopieren und einfügen können, solange es sich um denselben Modultyp handelt.

Stellen Sie die Standardeinstellungen wieder her, damit Sie sie mit dem Theme Customizer steuern können

Derzeit sind bestimmte Einstellungen für Module verfügbar, die vom Theme-Anpasser nicht angepasst werden können (wie zum Beispiel Box-Schatten). Im Allgemeinen ändert der Theme Customizer alles, was innerhalb eines Moduls auf die Standardeinstellung zurückgelassen wird, wenn diese Einstellung im Customizer verfügbar ist. Bei einigen Modulen kann es jedoch sinnvoll sein, bestimmte Designeinstellungen auf ihre Standardeinstellungen zurückzusetzen, damit Sie den Stil über den Theme-Anpasser steuern können.

Ein guter Anwendungsfall hierfür wären Einstellungen für Textkörper und Kopfzeilen. Wenn Sie beispielsweise ein Textmodul in Ihrem Layout mit einer benutzerdefinierten Schriftart, Textfarbe und Textgröße haben, können Sie diese Elemente nicht über die Designanpassung ändern, bis Sie sie auf ihren Standardstatus zurücksetzen.

Verwenden Sie das Suchfeld, um die Einstellungen zu finden, die Sie ändern möchten

Identifizieren Sie leicht, was auf Standard eingestellt ist

Wenn Sie nach den Optionen suchen, die Sie ändern möchten, werden Sie feststellen, dass neben einigen Optionen ein Symbol "Standard wiederherstellen" angezeigt wird. Dies bedeutet, dass die Standardeinstellung geändert wurde.

Alle Designeinstellungen mit einem Klick auf die Standardeinstellungen zurücksetzen

Für diejenigen unter Ihnen, die den visuellen Builder genauso lieben wie ich, müssen Sie diesen hilfreichen Trick wahrscheinlich noch entdecken. Wenn Sie sich im Back-End-Builder befinden, klicken Sie auf , um die Einstellungen eines Moduls zu bearbeiten, und wählen Sie dann die Registerkarte Design aus. Bemerken Sie etwas? Es ist ein kleines Symbol / Schaltfläche "Auf Standard wiederherstellen", das sich auf der Registerkarte befindet.

Wenn Sie darauf klicken, werden Sie aufgefordert, zu bestätigen, dass Sie diese Einstellungen verlieren möchten. Wenn Sie Ja auswählen, werden alle Einstellungen der Design-Registerkarte auf den Standardzustand zurückgesetzt. Dies wird natürlich in Zukunft zum Visual Builder hinzugefügt.

#9 Speichern Sie wichtige Elemente, um neue Seiten oder Beiträge zu erstellen

Manchmal müssen Sie zusätzliche Seiten oder Beiträge erstellen, die ein anderes Layout erfordern. Vielleicht möchten Sie ein allgemeineres Seitenlayout mit einer Kopfzeile, einem Inhaltsabschnitt und einem Fußzeilenabschnitt. Oder vielleicht möchten Sie eine aufwändigere Landingpage erstellen. Sie können sogar ein benutzerdefiniertes Post-Layout für Ihre Blog-Posts erstellen. Der einfachste Weg, dies zu erreichen, besteht darin, Elemente der Layouts zu verwenden, die Sie bereits haben, um neue zu erstellen. Und es ist die effizienteste Möglichkeit, Ihr Design auf der gesamten Website konsistent zu halten. Lassen Sie uns einige der grundlegenden Elemente durchgehen, die Sie in Betracht ziehen sollten, um zusätzliche Seitenlayouts zu erstellen.

Kopfzeile

Dies ist ein Kinderspiel. Jede Seite braucht einen Header. Ich würde auf jeden Fall einen Header-Abschnitt für Ihre Bibliothek speichern. Ich würde vorschlagen, eine allgemeinere Version Ihrer Kopfzeilen zu finden, damit sie zu jedem Seitentyp passt. Normalerweise ist das Layout der Kontaktseite dafür ein guter Kandidat, da es normalerweise einen zentrierten Titel, Untertitel und eine Hintergrundfarbe hat.

Abschnittsüberschriften

Es ist auch eine gute Idee, eine Version Ihrer Abschnittsüberschriften zu speichern. Auf diese Weise haben Sie, wenn Sie Ihren neuen Seiten mehr Inhalt hinzufügen, einen neuen Header im Stil und können sofort loslegen.

Inhaltsbereich

In vielen Fällen genügt dafür ein einfacher Textbaustein mit weißem Hintergrund, aber manchmal haben Ihre neuen Layouts einzigartige Inhaltsbereiche. Dies kann ein Textmodul mit Boxschatten oder mehrere auf einzigartige Weise gestaltete Klappenmodule sein. Um die Konsistenz beizubehalten, speichern Sie die benötigten Daten zur späteren Verwendung in der Bibliothek.

Tasten (sowohl hell als auch dunkel)

Sie müssen wahrscheinlich weitere Schaltflächen hinzufügen, wenn Sie neue Seiten erstellen. Es ist äußerst praktisch, eine dunkle und eine helle Version Ihrer Schaltfläche in Ihrer Bibliothek zur Verfügung zu haben. Ich schlage vor, ein Tastenmodul sowohl für dunkle als auch für helle Versionen zu speichern.

Fußzeilenbereich

Jedes Layout enthält normalerweise einen schönen Fußzeilenbereich, der sich direkt über der unteren Leiste Ihrer Seite befindet. Einige Layouts haben verschiedene Versionen dieses Fußzeilenabschnitts. Diese Abschnitte enthalten normalerweise Kontaktinformationen, E-Mail-Optionen und andere wichtige Informationen. Suchen Sie nach einem, das Sie verwenden möchten, und speichern Sie es für die zukünftige Verwendung in Ihrer Bibliothek.

Wenn Sie jetzt eine neue Seite erstellen möchten, stehen Ihnen diese Abschnitte, Zeilen und Module zur Auswahl.

#10 Globale Elemente festlegen

Global kann eine große Zeitersparnis bei zukünftigen Änderungen an Ihrer Website sein, aber es erfordert ein wenig Voraussicht. Sie müssen feststellen, welche Elemente Ihrer Layouts häufig auf Ihrer Website verwendet werden und einheitlichere Aktualisierungen erfordern. Gute Kandidaten für globale Elemente sind Fußzeilenabschnitte, Call-to-Action-Module, Schaltflächenmodule und E-Mail-Optionen, da sie über Ihre Website verteilt sein müssen, aber denselben einheitlichen Stil und Inhalt erfordern. Auf diese Weise aktualisieren Sie alle.

Abschließende Gedanken

Ich hoffe, dass Sie diese Schritte als hilfreich empfunden haben. Mein Ziel für diesen Beitrag war es, einige allgemeine Richtlinien oder Best Practices für den Import dieser Layouts bei einer Neuinstallation zum Zweck der Erstellung einer neuen Website bereitzustellen. Wenn Sie diese Schritte der Reihe nach befolgen, werden Sie keine Zeit verschwenden und haben eine gute Grundlage, auf der Sie aufbauen können.