So erstellen Sie eine Website mit DIVI 5 (Machen Sie früh und kommen Sie voran)

Denken Sie daran zurück, als Sie das erste Mal merkten, wie schnell Sie eine schöne Website mit Divi zusammenstellen können. Es fühlte sich wie das perfekte Gleichgewicht zwischen Kreativität und Einfachheit an. Divi 4 gab allen fantastischen Designwerkzeugen und einen reibungslosen visuellen Bauunternehmer, aber wir bei eleganten Themen würden sich nicht niederlassen.

Wir haben Ihr Feedback genau zugehört und hart gearbeitet, um Divi zu verbessern. Divi 5 nimmt alles, was Sie geliebt haben, und macht es schneller, glatter und mächtiger. Es soll Ihnen dabei helfen, mit weniger Anstrengung und mehr Möglichkeiten zu schaffen und zukünftig zubereitet zu sein.

Wenn Sie sehen möchten, was neu ist oder Ihre nächste Website starten, können Sie mit diesem Leitfaden eine brandneue Website erstellen, Schritt für Schritt mit Divi 5 und unterwegs praktische Tipps zum Besten aus dem Besten geben. Lass uns gehen!

Divi 5 ist bereit, auf neuen Websites verwendet zu werden, aber nicht ganz bereit, vorhandene zu migrieren.

Was macht Divi 5 unterschiedlich?

Divi 5 stellt die größte Veränderung unseres Seitenbauers seit dem ersten Start dar. Wir haben es mit modernen Webstandards aus Grund aufgebaut. Dies ist nicht nur ein Facelifting. Wir haben völlig überlegt, wie Websites mit Divi erstellt werden sollen.

Das Web entwickelt sich weiterentwickelt, wobei das mobile Surfen wächst und die Erwartungen der Benutzer steigen. Divi hat sich immer an diese Veränderungen angepasst, und Divi 5 setzt diese Tradition fort, indem er die neuesten Standards einnimmt.

Wenn Sie Divi 5 öffnen, denken Sie vielleicht: "Das sieht frisch aus." Dann fangen Sie an, aufzubauen, und dann bemerken Sie es.

"Warten Sie, hat dieser Abschnitt gerade sofort geladen?"

Ja, das hat es getan. Und das ist nur der Anfang.

Divi 5 hält das, was in Divi 4 funktioniert hat, aber die Frustrationen, mit denen Sie wahrscheinlich gelernt haben, zu leben. Wir haben es gebaut, weil gut genug nicht mehr gut genug war, nicht für uns und sicherlich nicht für Sie. Die Websites, die Sie heute bauen, müssen mehr tun und schneller laden.

Erforschen wir die wichtigsten Highlights des aktuellen Alpha von Divi 5, womit ersetzt:

Von Shortcodes bis blockbasierte Struktur

Divi 4 hat Ihre Layouts als Shortcodes gespeichert: diese Code -Teile in quadratischen Klammern, die WordPress liest, um Ihre Seiten zu erstellen. Sie arbeiteten, waren aber nicht perfekt.

In Divi 5 haben wir wieder aufgebaut, wie Ihr Inhalt gespeichert wird. Keine Shortcodes, die sich in Ihrer Datenbank verstecken! Wir verwenden jetzt einen sauberen, blockbasierten Ansatz, der die Richtung von WordPress besser passt.

Sie werden den Unterschied spüren, wenn Sie Seiten bearbeiten. Klicken Sie auf etwas und es reagiert sofort. Es gibt keine Verzögerung, kein Warten auf Verfahren zum Verarbeiten. Ihre Änderungen passieren einfach.

Während wir fast alles unter der Motorhaube verändert haben, müssen Sie nicht neu lernen, wie man baut. Die visuelle Erfahrung bleibt vertraut. Wir haben gerade gemacht, was hinter den Kulissen passiert, viel optimierter und moderner.

Die neue Divi 5 -Schnittstelle

Divi 5 führt eine sauberere Schnittstelle ein, die den Fokus auf Ihre Designarbeiten zurückstellt. Der visuelle Builder verfügt jetzt über Seitenpaneele anstelle von schwimmenden Boxen, die früher Ihren Inhalt abdeckten. Diese Änderung wird einen massiven Unterschied in der Arbeit mit Divi machen.

Die Symbolleiste wurde neu organisiert. Häufige Aktionen sind jetzt zu Ihren Fingerspitzen, während spezielle Tools zugänglich bleiben, ohne Ihren Arbeitsbereich zu überfüllen.

Farbpflücker, Typografiesteuerungen und Abstandsanpassungen erscheinen bei Bedarf kontextuell.

Die Textbearbeitung fühlt sich in dieser Version natürlicher an. Sie können Inhalte direkt auf der Seite mit einfachen Steuerelementen formatieren, die beim Auswählen von Text angezeigt werden. Dieser direkte Ansatz beschleunigt den Schreib- und Formatierungsprozess erheblich.

Wir haben auch verbessert, wie die Einstellungen organisiert sind. Verwandte Optionen werden logisch gruppiert, wodurch Ihre Zeit durch Registerkarten und Menüs gesucht wird. Das gesamte System fühlt sich zusammenhängend und zielgerichteter an. Außerdem sind die Optionen für helle und dunkle Modus nachdenkliche Details, die lange Designsitzungen auf Ihren Augen bequemer machen.

Diese Schnittstellenverbesserungen scheinen zunächst subtil zu sein, aber nachdem Sie ein paar Seiten erstellt haben, werden Sie feststellen, wie viel schneller Sie arbeiten können, wenn sich die Werkzeuge nicht in den Weg halten.

Multi-Panel-Arbeitsbereich

Die erfrischte Divi 5 bringt eine frische Sicht, wie Sie mit Ihren Designs interagieren. Während Divi 4 uns eine intuitive Benutzeroberfläche gab, arrangiert das neue Panel-First-Layout in Divi 5 sie auf eine Weise, die sich für Designarbeiten natürlicher anfühlt.

Die Einstellungen docken jetzt ordentlich an den Seiten Ihres Bildschirms an und geben Ihnen eine ungehinderte Ansicht Ihrer Seite. Sie können sehen, dass Änderungen in Echtzeit stattfinden, ohne die Panels zu schließen oder zu bewegen. Diese klare Sichtweise erleichtert die Präzision viel einfacher, wenn der Abstand oder die Ausrichtung des Feinabstimmungsabstands.

Mit dem neuen Multi-Panel-Setup können Sie Ihre Werkzeuge ausbreiten, aber dennoch in Reichweite sind.

Sie können Ihre Texteinstellungen auf einer Seite öffnen, während Sie den Abstand auf der anderen Seite optimieren. Sie müssen eine Sache nicht schließen, um an einem anderen zu arbeiten.

Breadcrumbs helfen Ihnen, schnell zwischen Elementen zu navigieren. Klicken Sie hier, um von einer Schaltfläche zu der übergeordneten Zeile oder dem übergeordneten Abschnitt zu springen. Dies spart unzählige Klicks, wenn Sie sich tief in die Bearbeitung komplexer Layouts befinden.

Einige Designer bevorzugen Einstellungen rechts und andere links. Sie müssen sich nicht mit der Option zufrieden geben, die Sie nicht bevorzugen. Mit DIVI 5 können Sie wählen, was sich am bequemsten anfühlt. Sie können sie auch in Registerkarten stapeln, was beim Jonglieren vieler Elemente hilft.

Dies scheint nicht bedeutend zu sein, aber es könnte bequem sein, wenn komplexe Layouts wie Header erstellt werden, bei denen Sie zwischen den Logoeinstellungen, dem Menüstyling und den Schaltflächeneigenschaften wechseln müssen.

Wir haben die Panels als Teil Ihres Arbeitsbereichs entworfen, nicht als Unterbrechungen. Mit der Benutzeroberfläche von Divi 5 können Sie sich darauf konzentrieren, wo es hingehört: auf Ihre Webdesign -Leinwand.

Übergang von festen Zeilen zu verschachtelten Zeilen

In Divi 4, wenn Sie versuchen, etwas Komplexes zu bauen, schlagen Sie plötzlich mit der Abschnittsreihe-Säulenstruktur Wände und müssen entweder auf Spezialabschnitte oder benutzerdefinierte CSS angewiesen. Divi 5 behebt diesen Kopfschmerz mit verschachtelten Zeilen. Es mag einfach klingen, aber diese Änderung eröffnet das, was Sie erstellen können, ohne die Problemumgehungen zusammenzuhacken.

Jetzt können Sie in jede Zeile klicken und dort eine neue Zeilenstruktur hinzufügen - keine Spezialabschnitte oder ein benutzerdefiniertes CSS erforderlich, um Ihre Inhalte logisch zu gruppieren.

Dieses verschachtelte Reihensystem ist erst der Beginn unserer verbesserten Layout -Engine. Wir arbeiten an Flexbox -Steuerelementen und neuen Zeilenvorlagen, die Spezialabschnitte veraltet machen. In Kürze wird die Flexbox -Implementierung reaktionsschnelle Designs noch einfacher gestalten und Ihnen eine bessere Kontrolle über die Ausrichtung und Verbreitung von Inhalten über Bildschirme geben.

Andere bemerkenswerte Merkmale

Abgesehen von den wichtigsten strukturellen Veränderungen verfügt Divi 5 über neue Funktionen, die die Website der Website reibungsloser und intuitiver machen. Schauen wir uns einige herausragende Ergänzungen im aktuellen Alpha an, die Ihre Arbeit ändern:

• Designvariablen zentralisieren Ihre Styling-Auswahl und führen Sie ortsweite Änderungen zum Kinderspiel vor. Definieren Sie einmal Farben, Schriftarten, Größen, Bilder und andere Elemente und wenden Sie sie auf Ihrer Website an. Müssen Sie Ihre Markenfarben aktualisieren? Ändern Sie die Variable und jede Instanzaktualisierungen automatisch.
• Durch die Bearbeitung eines Klicks wird die Interaktion mit Ihren Inhalten mühelos. Klicken Sie einfach auf ein beliebiges Modul, um es zu bearbeiten. Keine Jagd mehr nach winzigen Zahnradsymbolen oder Einstellungsknöpfen. Diese kleine Änderung spart unzählige Klicks während Ihres Arbeitstages.
• Mit Canvas Scaling können Sie sehen, wie Ihr Design in verschiedenen Bildschirmgrößen aussieht, ohne die Ansichten zu wechseln. Ziehen Sie die Canvas -Kante, um die Größe zu ändern, und beobachten Sie, wie Ihr Layout in Echtzeit angepasst wird - perfekt für das Überprüfen von Responsive Verhalten ohne konstantes Registerkartenschalter.
• Die Unterstützung für fortgeschrittene Einheiten eröffnet neue Möglichkeiten für präzise, ​​reaktionsschnelle Designs. Verwenden Sie CSS -Funktionen wie calc (), clamp () und min ()/max () direkt in den Einstellungsfeldern von Divi, um Flüssigkeitslayouts zu erstellen, die sich perfekt an eine beliebige Bildschirmgröße anpassen.
• Leistungsverbesserung durch Vermeiden von Laden unnötiger Skripte und Module
• Anpassbare Haltepunkte erweitern sich von nur drei (Desktop, Tablet, Mobile) auf sieben einstellbare Optionen. Diese fein abgestimmte Kontrolle hilft Ihnen, perfekte Layouts für alles zu erstellen, von kleinen Telefonen bis zu Ultrawide-Monitoren.

Erstellen einer Website mit Divi 5: Ein Schritt-für-Schritt-Leitfaden

Kommen wir nun zum Fleisch dieses Leitfadens: Eine praktische Exemplar, die Sie von der leeren Leinwand bis zur fertigen Website mit den leistungsstarken Funktionen von Divi 5 führt. Wir werden jede Phase des Prozesses in überschaubare Schritte zerlegen, die aufeinander aufbauen

1. Installieren von Divi 5

Divi 5 zu bekommen, dauert nur ein paar Schritte. Laden Sie die neueste Alpha -Version von Ihrem Mitgliederbereich herunter, laden Sie sie über den Themenbereich in WordPress hoch und aktivieren Sie sie wie Sie es normalerweise tun würden.

2. Anpassen Ihres Arbeitsbereichs

Das erste, was Sie beim Öffnen des visuellen Bauers von Divi 5 bemerken werden, ist, wie sauber und übersichtlich es sich anfühlt. Schwimmende Panels blockieren Ihre Sicht nicht wie zuvor. Stattdessen finden Sie ein nachdenklicheres Layout mit Dockablagen, die sich nicht in den Weg halten. Nehmen Sie sich ein paar Minuten Zeit, um Ihren Arbeitsbereich so einzurichten, wie Sie ihn mögen.

Sie können basierend auf Ihrer Präferenz oder Ihrer Arbeitszeit zwischen hellem und dunklem Modus wechseln.

Erstellen eines Arbeitsbereichs, der für Sie funktioniert

Divi 5 bietet mehr als nur die Umschüttung von Panels. Sie können verwandte Panels in Registerkarten gruppieren, wodurch der Arbeitsbereich auch bei der Umstellung komplexer Einstellungen organisiert ist.

Öffnen Sie zwei verschiedene Einstellungen und ziehen Sie eine auf den anderen. Sie werden zu einem Layout von Registerkarten kombinieren, sodass Sie mit einem Klick zwischen ihnen wechseln können.

Wenn Sie ein klassisches Setup bevorzugen, können Sie dennoch überall auf Ihrem Bildschirm Panels schweben. Ziehen Sie ein Panel von den Rändern weg, um es zu lösen und überall dort zu platzieren.

Für größere Projekte kann der Röntgenmodus aus der linken Symbolleiste hilfreich sein. Es beschreibt jedes Element mit einem subtilen Rand und erleichtert es, zu erkennen, wo Abschnitte und Module beginnen und enden. Mit diesem visuellen Leitfaden können Sie bei der Arbeit mit detaillierten Layouts orientiert bleiben.

Beschleunigen Sie Ihren Workflow

Tastaturverknüpfungen können Ihren Entwurfsprozess in Divi 5 dramatisch beschleunigen. Drücken Sie die Option (?), Um auf das Hilfsmenü zuzugreifen, in dem Sie eine vollständige Liste von Verknüpfungen finden. Wenn Sie nur wenige Schlüsselkombinationen lernen, können Sie Stunden mit größeren Projekten abstellen.

Beim Bearbeiten verschachtelter Elemente (wie eine Taste in einer Reihe in einer Reihe) zeigen Brotkrumen Ihre genaue Position in der Hierarchie. Klicken Sie auf einen Teil des Breadcrumb Trail, um direkt zu den Einstellungen dieses Elements zu springen, ohne die Schichten zu jagen.

Klicken Sie in der linken Symbolleiste auf das Symbol "Layers Panel", um sie zu nutzen. Es gibt Ihnen eine Ansicht Ihrer gesamten Seitenstruktur als verschachtelte Liste und erleichtert es viel einfacher, bestimmte Elemente bei der Arbeit mit komplexen Layouts auszuwählen.

2. Einrichten dynamischer Variablen

Entwerfen Sie Variablen in Divi 5 Ändern Sie, wie Sie die visuellen Elemente Ihrer Website verwalten. Sie bieten Ihnen einen zentralen Ort, um das Design Ihrer Website zu kontrollieren und die Aktualisierung zu vereinfachen. Stellen Sie sich sie als Verknüpfungen vor, die Sie auf Ihrer Website verwenden können.

Öffnen Sie den Visual Builder und suchen Sie nach dem Symbol Variable Manager in der linken Seitenleiste, um die Verwendung von Designvariablen zu verwenden. Wenn Sie darauf klicken, werden Optionen zum Erstellen verschiedener Variablenarten angezeigt: Farben, Schriftarten, Zahlen, Bilder, Text und Links.

Globalfarben aufstellen

Stellen Sie zunächst einige Farbvariablen ein. Klicken Sie auf die Registerkarte "Farben", fügen Sie Ihre Farben hinzu und nennen Sie sie etwas Denkwürdiges wie "Brand Blue" oder "Primärfarbe". Klicken Sie auf Speichern und Sie haben Ihre erste Variable erstellt.

Tun Sie dasselbe für Ihre sekundären Farben, Hintergrundtöne und Textfarben. Wenn Sie alle Ihre Markenfarben als Variablen speichern, müssen Sie sich nie wieder an Hex -Codes erinnern.

Erstellen von Schrift- und Zahlenvariablen

Lassen Sie uns als nächstes Ihr Typografiesystem einrichten. Erstellen Sie unter der Registerkarte Schriftarten Variablen für Ihre Kopf- und Körperschriften. Dies hält Ihren Text über die gesamte Website konsistent.

Überlegen Sie sich bei Zahlenvariablen über häufige Messungen wie:

• Standardpolsterung (möglicherweise 30px für Abschnitte)
• Grenzradius (wenn Sie abgerundete Ecken wollen)
• Maximale Breiten für Inhaltsbehälter
• Schriftgrößen

Das Erstellen dieser Variablen dauert ein paar Minuten im Voraus, spart jedoch Stunden. Wenn Kunden Änderungen wünschen, müssen Sie nicht auf jeder Seite jagen und jedes Element anpassen. Aktualisieren Sie einfach die Variable einmal.

Sie sollten auch Textvariablen für Inhalte erstellen, die sich später ändern können, z. B. Ihre Telefonnummer, Ihre Geschäftszeiten oder den Slogan des Unternehmens.

Erstellen Sie Linkvariablen mit URLs, die Sie in Ihrer gesamten Website wiederverwenden können. Dies eignet sich perfekt zum Umgang mit häufig verwendeten Links wie Social -Media -Profilen, Affiliate -URLs oder einer Schaltfläche „In Kontakt“.

Fügen Sie ebenfalls Bildvariablen für häufig verwendete Bilder hinzu, wie z. B. Logos.

Verwenden von Variablen mit fortgeschrittenen Einheiten

Divi 5 wird noch leistungsfähiger, wenn Sie Designvariablen mit fortgeschrittenen CSS -Einheiten kombinieren. Erstellen Sie eine Zahlenvariable mit CSS -Funktionen wie Clamp () für reaktionsschnelle Typografie, die zwischen den Bildschirmgrößen skaliert werden.

Erstellen Sie beispielsweise eine Variable der Überschriftengrößen mit: Clamp (36px, 5VW, 72px).

Dies setzt Ihren Text mindestens 36px auf kleinen Bildschirmen, skaliert flüssig auf mittleren Bildschirmen und Kappen bei 72px auf großen Bildschirmen. Wenden Sie dies auf Ihre Überschriftenmodule für Text an, die unabhängig vom Gerät immer proportional aussehen.

Das Kombinieren von Variablen und fortgeschrittenen Einheiten beseitigt einen Großteil der mühsamen Arbeiten des reaktionsschnellen Designs. Ihr Text und Ihr Abstand passen automatisch an, ohne mehrere Haltepunkte manuell festzulegen.

3.. Bauen Sie Seiten und Vorlagen mit Divi

Nachdem Sie Ihren Arbeitsbereich angepasst und Ihre Designvariablen erstellt haben, ist es an der Zeit, Ihre erste Seite mit Divi 5 zu erstellen. Der visuelle Builder bietet Ihnen verschiedene Möglichkeiten, Inhalte zu erstellen.

Option 1: Erstellen Sie Ihre Website mit Divi AI

Mit Divi Quick Sites + Divi AI können Sie sofort eine funktionierende Website mit mehreren Seiten, Themen-Builder-Layouts, universellen Designeinstellungen, einer fertigen Navigationsleiste und optimierten WordPress-Konfigurationen erstellen, indem eine grundlegende Textaufforderung bereitgestellt wird.

Wenn Sie eine Website mit Divi AI erstellen, gehen Sie zu Ihrem WordPress -Dashboard und klicken Sie im Menü auf das Divi -Symbol. Suchen Sie nach dem Feld Divi Quick Sites und drücken Sie die Schaltfläche „Eine neue Site generieren“.

Wählen Sie die Option „Ihre Website mit KI generieren“ aus und geben Sie detaillierte Informationen zu Ihrem Unternehmen an. Je mehr Einzelheiten Sie zu Ihren Diensten, Ihrem Stil und Ihrem Publikum enthalten, desto bessere Ergebnisse erhalten Sie. Denken Sie daran, dass Sie ein Divi -AI -Abonnement benötigen, um diese Funktion zu verwenden.

Wenn Sie Produkte verkaufen müssen, überprüfen Sie die Option WooCommerce installieren während des Setups. DIVI erstellt Ihre Store -Seiten automatisch mit allen erforderlichen Komponenten.

Für Bilder können Sie die Option Divi Quick Sites auswählen, um auf die Sammlung von Unsplash zuzugreifen, Divi basierend auf Ihrer Geschäftsbeschreibung benutzerdefinierte Bilder zu erstellen, oder wählen Sie „Platzhalter verwenden“, wenn Sie planen, Ihre eigenen Fotos später hinzuzufügen.

Sie werden dann Farben und Schriftarten anpassen. Sie können entweder Ihre Markenfarben und -Typografie manuell auswählen, wenn Sie spezifische Anforderungen haben, oder lassen Sie Divi ergänzende Kombinationen.

Ersetzen Sie nach dem Erstellen von Divi Ihre Seite alle festen Farbwerte durch Ihre Entwurfsvariablen. Dies verbindet Ihre AI-generierten Abschnitte direkt an Ihr Designsystem. Wenn Ihr Kunde später ein dunkleres Blau möchte, müssen Sie es nur einmal aktualisieren.

Wenn Sie sich nicht mit Markenfarben entschieden haben und Divi für Sie wählen lassen und das Ergebnis mögen, stellen Sie diese Farben in Designvariablen um. Erstellen Sie außerdem globale Optionsprodukte aus diesen Farben. Auf diese Weise bleiben Ihre Seiten flexibel und kohärent und stimmen immer zum visuellen Stil Ihrer Website.

Sobald Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf die Schaltfläche „Generieren und Veröffentlichen“ und warten Sie einige Minuten, während Divi seine Magie bewirkt. Ihre neue Homepage erscheint bereit, Besucher auf Ihrer Website willkommen zu heißen.

Hinzufügen neuer Abschnitte zu Ihren Seiten mit AI

Verwenden Sie die Schaltfläche „Abschnitt mit KI generieren“, um einen neuen Abschnitt schnell zu generieren. Sie können beschreiben, was Sie für die Divi -KI benötigen, und er erzeugt einen Abschnitt für Sie.

Verfeinerung von AI-generierten Abschnitten

Sobald Divi Ihren Inhalt erstellt hat, können Sie sie problemlos an Ihre Anforderungen anpassen. Jeder Teil Ihrer Website bleibt durch die üblichen Divi -Tools vollständig anpassbar. Ändern Sie den Text, tauschen Sie Bilder aus, passen Sie den Abstand an und verwenden Sie die Farben Ihrer Marke mit Designvariablen.

Diese Layouts bieten Ihnen einen starken Ausgangspunkt nach den aktuellen Webdesignstandards. Anstatt mit einer leeren Seite zu beginnen, arbeiten Sie aus einer gut gebauten Vorlage, die nur Ihre eindeutige Eingabe benötigt. Dies spart Zeit und Mühe für Designentscheidungen, während Sie die volle Kontrolle über das Erscheinungsbild behalten können.

Mit den verbesserten Bearbeitungsmerkmalen von Divi 5 und der Kraft der KI wird das Erstellen einer Website schneller und einfacher. Sie erhalten schnell qualitativ hochwertige Ergebnisse und haben dennoch die Freiheit, alles anzupassen, was es ideal für die Einführung professioneller Websites in kürzerer Zeit macht.

Option 2: Erstellen Sie Ihre Website über vorgefertigte Layouts

Um einer der über 2000+ fertigen Designs zu Ihrer Seite hinzuzufügen, drücken Sie die Blue Plus-Taste in der oberen linken Ecke Ihres Bildschirms und wählen Sie „Vorbereitete Layout“. In einem Fenster werden alle Ihre Optionen angezeigt.

Wählen Sie ein Designpaket, das Ihnen gefällt. Um etwas schnelleres zu finden, verwenden Sie die Filter oder geben Sie das ein, was Sie im Suchfeld benötigen. Klicken Sie auf ein beliebiges Paket, das Ihr Auge auffängt, und wählen Sie dann aus, welchen Seitenstil Sie möchten. Sie können nach links scrollen, um das vollständige Design zu sehen, bevor Sie sich entscheiden.

Wenn Sie "das One" gefunden haben, klicken Sie auf "Verwenden Sie dieses Layout". Möglicherweise sehen Sie eine Nachricht, in der nach dem Import von Farbschemata gefragt wird. Deaktivieren Sie dies einfach, wenn Sie es nicht wollen.

Der einzige Nachteil? Sie müssen dies für jede von Ihnen erstellte Seite wiederholen. Aber es gibt einen besseren Weg. Mit Divi Quick -Websites (keine KI benötigt) können Sie dies erheblich beschleunigen. Das Beste daran ist, dass jeder Divi -Benutzer auf Schnellseiten und alle Starter -Designs zugreifen kann, ohne zusätzliche für ein KI -Abonnement zu zahlen.

Wenn Sie sich unsere Starter -Site -Sammlung ansehen, ist Ihre Zeit wert. Jedes enthält einzigartige Fotos und Kunstwerke, die Sie an anderer Stelle nicht sehen werden.

Gehen Sie einfach zu Divi, klicken Sie auf die Registerkarte Quick Sites, klicken Sie auf "Generieren Sie eine neue Site" und wählen Sie diesmal "Verwenden Sie vorgefertigte Starter-Site". Durchsuchen Sie die Designs, bis Sie einen entdecken, der zu Ihrer Vision passt. Fügen Sie Ihre Informationen hinzu, wählen Sie Ihre Farben und Schriftarten aus und lassen Sie das System seine Magie bearbeiten.

Nachdem ein Layout angewendet wurde…

Nachdem Sie ein vorgefertigtes Layout angewendet oder importiert haben, wenn Sie Ihre Markenfarben nicht ausgewählt und nur die Standardfarben und Schriftarten verwendet haben, die mit dem Layout geliefert werden, gehen Sie das Design durch und ersetzen Sie alle festen Farbcodes durch Ihre Designvariablen und Option Group -Voreinstellungen.

Wenn Sie die Farben und Schriftarten ausgewählt haben, aber die Voreinstellungen noch nicht erstellt haben, verwandeln Sie diese Farben auch in Designvariablen. Erstellen Sie außerdem Optionsgruppenvoreinstellungen aus diesen Farben.

Dies stellt sicher, dass alle Inhalte aus dem Layout Ihren voreingestellten Stilen folgen, sodass Elemente wie Schaltflächen auf jeder Seite konsistent bleiben. Ebenso erhalten Sie den Komfort von vorgefertigten Designs, die leicht aufrechterhalten und mit der visuellen Sprache Ihrer Marke ausgerichtet sind.

Sie haben in Minuten eine fertige Website bereit. Alles passt perfekt zusammen: Farben, Schriftarten, das gesamte Paket. Nachdem es abgelaufen ist, können Sie alles, was Sie wollen, anpassen, genau wie bei jeder Divi -Website.

Option 3: Erstellen Sie Ihre Website von Grund auf neu

Wenn Sie eine neue Seite öffnen, sehen Sie eine saubere Leinwand mit einem Standardabschnitt hinzu. Wie Divi 4 klicken Sie auf die Schaltfläche Grün (+), um eine neue Zeile hinzuzufügen und von Grund auf neu zu bauen.

Genau wie Divi 4 gibt es eine Sammlung von fertigen Modulen mit Divi 5.

Die verschachtelten Zeilen sind für komplexe Layouts von unschätzbarem Wert. Benötigen Sie einen Drei-Reihen-Abschnitt innerhalb einer Zeile eines Zwei-Reihen-Layouts? Kein Problem. Klicken Sie in Ihre Zeile, fügen Sie eine Zeile hinzu und wählen Sie Ihre Zeilenstruktur. Divi 5 behandelt dieses Nist, ohne einen Schweiß zu brechen, und bietet Ihnen praktisch grenzenlose Layoutmöglichkeiten.

Mal sehen, wie dies für ein Blog -Layout funktionieren könnte. Beginnen Sie mit einem Standard-Zwei-Reihen-Setup: Wide Content-Bereich und einer engeren Seitenleiste. Lassen Sie in der Hauptzeile Ihr Blog -Modul fallen.

Benötigen Sie vorgestellte Beiträge in einem Raster über den regulären Beiträgen? Nisten Sie einfach eine weitere Zeile unten mit einer einzelnen Zeile mit E-Mail-Opt-In und dann einer Drei-Reihen-Struktur für Informationsboxen. Die gleiche Struktur hätte in Divi 4 einen benutzerdefinierten Code benötigt.

Für Ihre Seitenleiste möchten Sie möglicherweise verschiedene Widgets mit unterschiedlichem Hintergrund. Bei verschachtelten Zeilen erhält jedes Seitenleistenelement eine eigene Zeile mit benutzerdefiniertem Styling. Promotionen in einem Blick, Autoreinführung in einem anderen und, ein Testimonial in der dritten, alle ordentlich in der Seitenleiste enthalten.

Diese neue strukturelle Freiheit verändert die Art und Weise, wie Sie sich Layouts vollständig nähern. Produktausstellung mit abwechselnden Text-/Bildzeilen, dann ein Abschnitt mit drei Reihen mit Full-Width-Testimonials? Alles in einem Flüssigkeitsbehälter ohne gegen den Bauunternehmer zu kämpfen.

Erstellen Sie Optionsgruppenvoreinstellungen

Sobald Sie Ihre erste Seite stylen, ist es unerlässlich, diese Styling -Auswahlmöglichkeiten auf jeder Seite Ihrer Website zu duplizieren. Dies könnte jedoch sehr zeitaufwändig und vor allem ärgerlich sein. Divi 5 führt die Option Gruppenvoreinstellungen ein, um Ihren Entwurfsprozess zu beschleunigen. Sie funktionieren wie wiederverwendbare Ausschnitte, die Sie überall auf Ihrer Website bewerben können. Schauen wir uns an, wie Sie sie einrichten und verwenden können.

Klicken Sie zunächst auf ein beliebiges Modul, das Sie Ihrer Seite hinzugefügt haben. Wenn Sie sich im Einstellungsfeld befinden, sehen Sie sich die Entwurfsoptionen an. Dinge wie Grenzen, Typografie oder Schatten. Bewegen Sie sich in der Nähe der oberen rechten Ecke dieser Einstellungsblöcke, und Sie werden sehen, dass ein kleines voreingestellter Symbol angezeigt wird.

Klicken Sie auf das voreingestellte Symbol und wählen Sie "Neues Voreinsatz aus aktuellen Stilen". Geben Sie ihm einen Namen, der Ihnen Sinn macht. So etwas wie „Round Corners“ für eine Grenzvoreinstellung oder eine „große Überschrift“ für das Textstyling.

Das Panel ändert die Farbe und zeigt, dass Sie jetzt an einem voreingestellten Voreinsatz arbeiten, nicht nur an dem aktuellen Element. Dies hilft Ihnen, den Überblick zu behalten, was Sie tun. Wenn dies ein Stil ist, den Sie häufig verwenden, aktivieren Sie das Feld "AS -Standard", damit neue Elemente es automatisch verwenden.

Wenn Sie speichern, haben Sie Ihre erste Option Gruppengruppe Preset erstellt! Die Schönheit ist, dass Sie genau das gleiche Styling auf jedes Element anwenden können, das diese Optionsgruppe verwendet: Textmodule, Bilder, Schaltflächen oder sogar vollständige Abschnitte.

Kombinieren Sie die Optionsgruppenvoreinstellungen mit Konstruktionsvariablen

Hier wird Divi 5 wirklich mächtig. Verwenden Sie beim Erstellen von Voreinstellungen nicht nur statische Farben oder Größen - verwenden Sie stattdessen Ihre Designvariablen.

Sagen Sie, Sie machen ein Knopf vorein. Anstatt eine bestimmte Farbe auszuwählen, klicken Sie im Farbwähler auf das Symbol der Variablen und wählen Sie Ihre Variable „Brand Blue“ aus. Jetzt verwendet Ihr Voreinsatz immer Ihre Markenfarbe. Wenn Sie diese Farbe später ändern, werden alle Schaltflächen mit diesem Voreinsatz automatisch aktualisiert.

Gleiches gilt für jeden variablen Typ, den Sie erstellt haben. Benötigen Sie einen anderen Abstand? Nehmen Sie einfach Ihre gespeicherten Abstandsnummern. Schriftarten anwenden? Ihre Typografievariablen warten genau dort. Ihre Website bleibt konsistent.

Aktualisieren Sie bei Bedarf die Variable einmal einmal und aktualisiert jede Instanz selbst, ohne dass der Kopfschmerz jedes Element auf Jagd auf Jagd macht, wenn der Kunde „dieses Blau etwas dunkler ist“.

Mit DIVI 5 können Sie auch fortgeschrittene Einheiten in ein beliebiges Feld einschließen. Möchten Sie einen Abschnitt, der nie breiter als 1200 Pixel ist, aber auf dem Handy schrumpft? Geben Sie "min (1200px, 90%) in der Breite. Erledigt. Der Behälter bleibt bei 90% Breite, bis er 1200 PX überschreitet und dann nicht mehr wächst. Es ist kein benutzerdefiniertes CSS erforderlich. Diese fortschrittlichen Einheiten können auch auf dynamische Variablen angewendet werden.

Gebäudelement -Voreinstellungen

Nach dem Einrichten der Option Gruppenvoreinstellungen möchten Sie Elementvoreinstellungen erstellen, um vollständig gestaltete Module, Zeilen oder Abschnitte zu speichern. Stellen Sie sich diese als vollständige Designpakete vor, die Sie auf Ihrer Website wiederverwenden können.

Klicken Sie zum Erstellen eines Moduls vollständig ein Modul und klicken Sie, wenn es perfekt aussieht, auf das voreingestellte Symbol im Header des Moduls (nicht in einer bestimmten Optionsgruppe). Wählen Sie "Neues Voreinsatz aus aktuellen Stilen", geben Sie ihm einen Namen wie "Feature Card" oder "Team Bio" und speichern Sie.

Klicken Sie beim Hinzufügen neuer Module einfach auf die voreingestellte Dropdown -Liste im Modulheader, um Ihr gespeichertes Design sofort anzuwenden. Alle Einstellungen werden in einem Klick angewendet.

Erstellen Sie andere Seiten basierend auf Ihrem Designsystem (Variablen und Voreinstellungen)

Sobald Sie Ihr Designsystem mit Variablen und Voreinstellungen eingerichtet haben, wird das Erstellen zusätzlicher Seiten viel effizienter. Mit Divi 5 sind Ihre Fundamente vorhanden. Jetzt können Sie Ihre Website erweitern und gleichzeitig eine perfekte Konsistenz beibehalten.

Erstellen Sie zunächst eine neue Seite und aktivieren Sie den visuellen Bauunternehmer. Wenn Sie dieser frischen Seite Module hinzufügen, werden Sie sofort feststellen, wie Ihr voreingestellter System die Dinge beschleunigt. Anstatt Elemente von Grund auf neu zu stylen, wenden Sie einfach Ihre gespeicherten Elementvoreinstellungen an.

Klicken Sie beispielsweise beim Hinzufügen eines neuen Textmoduls auf die voreingestellte Dropdown im Modulheader und wählen Sie Ihr „Körpertext“ vorein. Das gesamte Styling, einschließlich Schriftart, Größen und Farben, wird sofort angewendet. Gleiches gilt für Schaltflächen, Bilder, Testimonials oder ein anderes Element, für das Sie Voreinstellungen erstellt haben.

Bauen Sie Ihre Vorlagen auf

Mit Divis Theme Builder können Sie jede Ecke und Ecke Ihrer Website erstellen und anpassen. Header, Fußzeilen, Postvorlagen, benutzerdefinierte Post -Typ -Vorlagen, Laden Sie Seiten, Sie nennen es.

Greifen Sie auf Divi's Theme Builder zu, indem Sie durch Ihr WordPress -Dashboard navigieren: Divi → Theme Builder. Oben finden Sie Ihre Standardvorlage - diese Vorlage verwaltet das Gesamtsehen Ihrer gesamten Website. Klicken Sie auf den Abschnitt Global Header hinzufügen und wählen Sie "Global Header Build", um Ihren Arbeitsbereich zu öffnen. Ebenso können Sie wählen, dass Sie globale Fußzeile hinzufügen, um Ihre Website -Fußzeilen zu entwerfen.

Mit verschachtelten Reihen, Headern und Fußzeilen wird das Gebäude viel einfacher. Benötigen Sie diesen schicken Header mit verschiedenen Zeilenlayouts in jedem Abschnitt? Fügen Sie eine Reihe in eine andere Reihe hinzu, wählen Sie Ihr Zeilenlayout und bauen Sie weiter.

Erstellen Sie benutzerdefinierte Inhaltstypvorlagen

Über Header und Fußzeilen hinaus können Sie spezielle Vorlagen für verschiedene Inhaltstypen mit dem Theme Builder entwerfen.

Wie sich die Blog -Beiträge von Teammitgliedsprofilen oder Produktseiten unterscheiden, verdient jeder ein eigenes optimiertes Layout.

Erstellen Sie eine Vorlage für Blog -Beiträge mit ordnungsgemäßem Abstand für Lesbarkeit, Bildplatzierung und Autoreninformationen. Produktseiten benötigen möglicherweise Galerie -Layouts und Preistische.

Das Schöne an diesem System ist, dass diese Vorlagen, sobald sie ihren jeweiligen Inhaltstypen zugeordnet sind, automatisch angewendet werden. Wenn Sie beispielsweise einen neuen Blog -Beitrag hinzufügen, wird die Vorlage sofort behandelt. Dies beseitigt sich wiederholende Arbeit und hält alles visuell verbunden.

Nutzen Sie beim Erstellen dieser Vorlagen Ihre Optionsgruppenvoreinstellungen und Designvariablen. Die früheren Typografieeinstellungen, die Sie zuvor eingerichtet haben, stellen sicher, dass Überschriften und Körpertext konsistent bleiben. Ihre Farbvariablen behalten die Markenidentität über alle Vorlagentypen hinweg.

Verwenden Sie Divi AI für das Vorlagendesign

Divi AI schneidet die Zeitaufbauzeit der Vorlage von Stunden bis Minuten ab. Wählen Sie im Theme Builder, was Sie brauchen - eine Header, eine Fußzeile, ein Blog -Layout oder eine Produktseite.

Drücken Sie die Blue + -Knopf im visuellen Builder und wählen Sie "Abschnitt mit AI generieren".

Ihre Beschreibung ist am wichtigsten. Seien Sie genau, was Sie brauchen:

• Header: Reinigen Sie den Header mit dem links ausgerichteten Logo, dem horizontalen Navigationsmenü (zu Hause, über, Blog, Shop) und einer klaren Kontaktknopf rechts. Reaktionsschnell mit einem Hamburger -Symbol für Mobilgeräte.
• Fußzeile: Drei-Spalten-Fußzeile: Unternehmensinformationen und soziale Symbole, nützliche Links und Kontaktdaten (Adresse, Telefon, E-Mail). Löschen von Abschnitt Überschriften, einfaches Layout.
• Blog -Vorlage: Einzelpostlayout mit einem großen Bild, dem Posttitel, dem Datum, dem Inhaltsbereich und einer rechten Seitenleiste mit den letzten Beiträgen und Kategorien.
• Shop -Seite: Produktanzeige mit Bildgalerie, Produktname, Preis, Beschreibung, Mengenauswahl und eine prominente Schaltfläche Kauf. Verwandte Produkte unten gezeigt.

Je mehr Details, desto merrier die Ergebnisse. Nachdem Divi Ihre Vorlage erstellt hat, nehmen Sie sich eine Minute Zeit, um alle hartcodierten Werte durch Ihre Option Group-Voreinstellungen für Elemente wie Schaltflächen, Textblöcke und Grenzen zu ersetzen. Dies integriert AI-generierte Inhalte in Ihr voreingestellter System, sodass Ihre Schaltflächen auf allen Seiten identisch aussehen, ob manuell oder mit KI.

Diese Methode bietet Ihnen vorgefertigte Vorlagen, die sich individuell gebaut fühlen, während Sie alles an die visuelle Sprache Ihrer Website gebunden halten. Wenn sich Designänderungen später ergeben, aktualisieren Ihre KI-gebauten Abschnitte direkt zusammen mit allem anderen.

Sparen Sie Zeit mit erweiterten Vorlagenfunktionen

Vorlagen werden noch leistungsfähiger, wenn Sie eine bedingte Logik hinzufügen. Möchten Sie verschiedene Header für Ihre Shopseiten im Vergleich zu Ihrem Blog? Stellen Sie die Anzeigebedingungen fest, die Vorlagen basierend auf Seitenkategorien oder URL -Mustern anwenden.

Denken Sie daran, Vorlagen mit Ihrem voreingestellten System Hand in Hand zu machen, um ein umfassendes Design-Framework zu erstellen, das die Website der Website schneller, konsistenter und letztendlich professioneller macht.

4. Mastering Responsive Design

Das reaktionsschnelle Design von Divi 5 führt zu erheblichen Verbesserungen gegenüber früheren Versionen. Das neue System bietet zusätzliche Kontrolle darüber, wie sich Ihre Website an verschiedene Bildschirmgrößen anpasst.

Divi 5 führt ein fortschrittliches Haltepunktsystem ein, das eine beispiellose Kontrolle über die Reaktionsfähigkeit der Website bietet. Die sieben anpassbaren Haltepunkte ermöglichen ein präzises Design -Targeting auf verschiedenen Geräten:

• Telefon: <767px deckt die meisten Smartphone -Bildschirmgrößen ab
• Telefon breit: <860px deckt die meisten Telefonbildschirme im Landschaftsmodus ab
• Tablet: <980px ist gut für die meisten Tablet -Bildschirme im Porträtmodus
• Tablet breit: <1024px ist Standard für die Landschaftsansicht in den meisten iPads und Samsung -Tablets.
• Breitwagen: > 1280px ist eine gute Breite für die meisten kleineren Laptops
• Ultrawid: > 1440px deckt größere Desktop -Bildschirme ab

Diese Haltepunkte sind akribisch entwickelt, um die vielfältige Landschaft moderner Geräte anzugehen. Mit diesem Ansatz können Designer Websites erstellen, die perfekt aussehen, unabhängig davon, ob sie auf einem kompakten Smartphone oder einem expansiven ultra-weiten Monitor angezeigt werden. Jeder Haltepunkt ist nicht nur ein technischer Schwellenwert. Es ist eine Gelegenheit, ein maßgeschneidertes Benutzererlebnis zu erstellen.

Wenn Sie benötigen, können Sie die Haltepunkte nach Ihren Anforderungen anpassen.

5. Holen Sie sich, setzen Sie, starten Sie!

Ihre Divi 5 -Website ist erstellt, optimiert und bereit, Besucher zu begeistern. Gehen wir durch die letzten Schritte, um Ihre Website mit Zuversicht live zu bringen.

Führen Sie eine kurze Vorschau -Tour durch Ihre Website über verschiedene Geräte durch. Die Reaktionsfunktionen von Divi 5 haben bereits den größten Teil des schweren Hebens erledigt. Dies sollte also nur bestätigen, dass alles großartig aussieht. Dank der anpassbaren Haltepunkte passt Ihr Design nahtlos von Telefonen an ultra-weite Monitore an.

Überprüfen Sie Ihre interaktiven Elemente. Klicken Sie durch Navigationslinks, senden Sie Testnachrichten über Kontaktformulare und probieren Sie alle von Ihnen hinzugefügten Fachfunktionen aus. Die saubere Codestruktur von Divi 5 hilft sicherzustellen, dass diese Elemente zuverlässig funktionieren.

Endgültige Polierberührungen

Überprüfen Sie Ihren Inhalt mit frischen Augen. Suchen Sie nach Tippfehler oder unangenehmen Phrasierung, die während des Build -Prozesses möglicherweise übersehen wurden. In diesem Stadium sollte der Fokus auf kleinen Verfeinerungen und nicht auf wesentlichen Veränderungen liegen. Bei Bedarf ist Divi AI vollständig in Divi 5 integriert und kann jederzeit verwendet werden, um den Text oder die Bilder zu generieren, zu ändern oder zu verbessern.

Divi gibt Ihnen die Möglichkeit, Pixel-perfekte Designs zu erstellen. Nehmen Sie sich also einen Moment Zeit, um den Zusammenhalt Ihrer Website vor dem Start zu schätzen. Durch die konsistente Verwendung Ihrer Entwurfsvariablen und Modulvoreinstellungen sollte ein poliertes, einheitliches Erscheinungsbild erzeugt werden.

Nach dem Start bietet Divi 5 weiterhin Vorteile. Die Geschwindigkeitsverbesserungen aus dem modernen Framework helfen bei der Sichtbarkeit von Suchmaschinen, und die Benutzer werden die schnellen Ladezeiten und die reibungslosen Interaktionen zu schätzen wissen.

Beobachten Sie, welche Seiten den größten Verkehr und Engagement erhalten. Verwenden Sie diese Erkenntnisse, um Ihr Design zu verfeinern oder beliebte Inhaltsabschnitte zu erweitern. Die flexible Struktur von Divi 5 macht diese Anpassungen einfach.

Die Kombination Ihrer Kreativität mit dem leistungsstarken Framework von Divi 5 erzeugt eine visuell beeindruckende Website, die auf modernen Webstandards basiert. Ihre Website ist bereit, den Besuchern großartige Erlebnisse zu bieten und gleichzeitig eine flexible Grundlage für zukünftiges Wachstum zu bieten.

Erstellen Sie schnellere, bessere Websites mit Divi 5

Divi 5 markiert ein neues Kapitel für Website -Ersteller. Das umgebaute System hält das, was funktioniert hat, während er das repariert, was nicht. Sie werden den Unterschied vom ersten Tag an bemerken: schnelleres Laden, glattere Bearbeitung und Designfreiheit, die zuvor einfach unerreichbar war.

Ihre nächste Website sieht nicht einfach besser aus, sondern Sie werden es genießen, sie zu bauen. Das liefert Divi 5: Websites, die für Sie und Ihre Besucher arbeiten, ohne Kopfschmerzen.

Bereit, es zu versuchen? Laden Sie noch heute das öffentliche Alpha herunter und sehen Sie, was Ihr nächstes Projekt sein könnte.

Divi 5 ist bereit, auf neuen Website -Builds verwendet zu werden. Warten Sie auf die vollständige Veröffentlichung, bevor Sie vorhandene Websites migrieren.