Divi Layouts AI: Der vollständige Leitfaden

Bevor die Revolution der künstlichen Intelligenz (KI) begann, erforderte die Erstellung einer Webseite Programmierkenntnisse oder die Einstellung eines teuren Entwicklers. Für einige war dies aufgrund mangelnder Erfahrung oder fehlendem Budget normalerweise unerreichbar. Das hat sich dank der neuen Technologie geändert, die es Ihnen ermöglicht, ganze Webseiten mit einer Texteingabeaufforderung zu erstellen.

Dieser Beitrag dient als Divi Layouts AI-Leitfaden, der Ihnen die Besonderheiten dieses aufregenden neuen Produkts zeigt. Wir erklären, was es macht, wie es funktioniert und wie man ganz einfach wunderschöne Webseiten erstellt.

Lass uns eintauchen.

Was ist Divi Layouts AI?

Divi Layouts AI ist ein neues Produkt, das wir eingeführt haben und das zusammen mit unserem Flaggschiff-WordPress-Theme Divi funktioniert. Die Kraft von Divi und Divi AI zusammen macht es zu einem der besten KI-Website-Builder, die derzeit auf dem Markt sind. Es kann ganze Seiten erstellen, Ihnen helfen, vorhandene Texte zu verfeinern, Bilder zu generieren und Code hinzuzufügen – alles mit einer Textaufforderung. Divi Layouts AI kann auch Seiten erstellen, die auf Ihr Branding abgestimmt sind, indem es Ihnen die Bereitstellung von Farben und Schriftarten ermöglicht. Auf diese Weise sieht jede von Ihnen generierte Seite jedes Mal einheitlich aus.

Holen Sie sich Divi AI

Wie funktioniert Divi Layouts AI?

Divi Layouts AI ist direkt in das Framework von Divi integriert und arbeitet nahtlos mit dem Visual Builder zusammen. Dank seines tiefen Verständnisses der Divi-Codebasis kann es von Ihrer Website lernen. Es versteht, wie jede Codezeile und jedes Designmodul funktioniert, und erleichtert so die Erstellung schöner Layouts. Divi Layouts AI fungiert als Designer, Entwickler und Fotograf in einem.

Sie geben eine einfache Textaufforderung ein, die den von Ihnen benötigten Seitentyp beschreibt, und Divi Layouts AI erstellt eine komplette Webseite, einschließlich Text und Bildern, komplett mit den Designmodulen von Divi. Es überspringt die anfängliche Phase der Planung und Erstellung einer Webseitenstruktur und verschafft Ihnen einen Vorsprung beim Designprozess.

Erstellen einer vollständigen Webseite mit Divi Layouts AI

Um mit Divi Layouts AI zu beginnen, müssen Sie zusammen mit Divi AI eine Elegant Themes-Mitgliedschaft erwerben. Wenn Sie bereits Mitglied sind, können Sie den Anmeldevorgang für das Abonnement überspringen und Divi AI separat erwerben. Es ist für 17,04 $ pro Monat (bei monatlicher Zahlung) oder 153 $ pro Jahr erhältlich.

In diesem Divi Layouts AI-Leitfaden führen wir Sie durch die Schritte, die zum Erstellen einer Webseite mit KI erforderlich sind, von der ersten Erstellung der Seite bis zur Verfeinerung der Ausgabe.

Schritt 1: Kauf von Divi Layouts AI

Gehen Sie zunächst zur Hauptwebsite von Elegant Themes und navigieren Sie zur Divi AI-Seite. Sie können sich für Divi + Divi AI anmelden oder sich für Divi AI als eigenständiges Produkt entscheiden (wenn Sie Divi bereits verwenden). Klicken Sie auf „ JETZT ANMELDEN!“ Klicken Sie auf die Schaltfläche, um fortzufahren.

Für diesen Beitrag gehen wir davon aus, dass Sie bereits Mitglied bei Elegant Themes sind. Wenn Sie auf die Schaltfläche „Anmelden“ klicken, werden Sie aufgefordert, sich bei Ihrem Elegant Themes-Konto anzumelden.

Sobald Sie angemeldet sind, werden Sie zurDivi AI -Anmeldeseite weitergeleitet, wo Sie zusätzliche Dienste wie Divi Cloud, Divi VIP oder Divi Teams hinzufügen können.Wenn Sie ohne weitere Einkäufe fortfahren möchten, klicken Sie auf NEIN DANKE, WEITER ZUR KASSE .

Schließen Sie Ihren Kauf ab, indem Sie Ihre Kreditkarteninformationen eingeben. Wenn Sie eine Karte hinterlegt haben, klicken Sie einfach auf die Schaltfläche DIVI AI KAUFEN .

Sobald Sie Ihren Kauf getätigt haben, können Sie Ihre Divi AI-Abonnementinformationen anzeigen, indem Sie auf Konto > Abonnements klicken. Sie benötigen einen API-Schlüssel, um Divi AI in Ihrer WordPress-Installation verwenden zu können. Es ist eine gute Idee, für jede Divi-Installation einen eindeutigen Schlüssel zu generieren. Klicken Sie dazu auf die Registerkarte „Konto“ und navigieren Sie zu „Benutzername und API-Schlüssel“ .

Wenn die Seite aktualisiert wird, scrollen Sie nach unten und klicken Sie auf die Schaltfläche „Neuen API-Schlüssel generieren“ (1). Sobald Sie den Schlüssel generiert haben, ist es hilfreich, ihm eine Bezeichnung zu geben (2). Diese Vorgehensweise ist besonders nützlich, wenn Sie mehrere Divi-Websites erstellen möchten.

Klicken Sie auf den Schlüssel, um ihn zu kopieren. Sie müssen Divi AI im Bedienfeld „Divi Theme-Optionen“ aktivieren. Gehen Sie zu Ihrer WordPress-Installation, melden Sie sich an und navigieren Sie zu Divi > Theme-Optionen > Updates .

Geben Sie Ihren Benutzernamen und den API-Schlüssel ein, den Sie kopiert haben, und klicken Sie auf die Schaltfläche „Änderungen speichern“, um ihn zu speichern.

Schritt 2: Erstellen Sie eine neue Seite

Nachdem Sie nun einen API-Schlüssel hinzugefügt haben, können Sie mit Divi AI eine Webseite erstellen. Fügen Sie zunächst eine neue Seite zu Ihrer WordPress-Website hinzu. Navigieren Sie zu Seiten > Neue Seite hinzufügen .

Wenn die Seite aktualisiert wird, geben Sie Ihrer Seite einen Titel (1) und klicken Sie auf die Schaltfläche „Divi Builder verwenden“ (2).

Sie haben drei Optionen zur Auswahl. Sie können eine Seite von Grund auf erstellen, ein vorgefertigtes Layout auswählen oder mit KI erstellen. Wählen Sie „Mit KI erstellen“ und klicken Sie auf „Layout generieren“ .

Schritt 3: Bereitstellung von Informationen für Divi Layouts AI zum Generieren einer Webseite

In diesem Abschnitt unseres Divi Layouts AI-Leitfadens führen wir Sie durch die Benutzeroberfläche. Beim ersten Laden der Seite wird ein Dialogfeld angezeigt. Hier beschreiben Sie den Typ der Seite, die Sie erstellen möchten (1). Obwohl optional, ist es eine gute Idee, Divi Layouts AI so viel Kontext wie möglich bereitzustellen. Sie können Ihr Leitbild und Ihr Wertversprechen eingeben oder einfach eine kurze Beschreibung darüber schreiben, wofür Ihre Website gedacht ist (2). Sie können auch Schriftarten und Farben festlegen, die zum Branding Ihres Unternehmens passen (3).

Wenn Sie Divi Layouts AI anweisen, eine Seite zu erstellen, beginnen Sie mit der Beschreibung Ihres Produkts oder Ihrer Dienstleistung und Ihrer Zielgruppe. Dadurch erhält Divi eine bessere Vorstellung davon, was generiert werden soll. Sie können es sogar damit beauftragen, überzeugende Schlagzeilen zu erstellen, die SEO-optimiert sind. Außerdem sollten Sie bedenken, dass Sie Ihren idealen Kunden erwähnen, alle Schlüsselelemente beschreiben, die Sie einbeziehen möchten, und alle spezifischen Stile erwähnen, die Ihnen gefallen.

Um Ihnen die Arbeit zu erleichtern, finden Sie hier eine kurze Liste mit Tipps, die Sie befolgen sollten, um die perfekte Eingabeaufforderung zu erstellen:

• Klarheit ist der Schlüssel: Seien Sie klar und prägnant, wenn Sie Ihre Aufforderung verfassen. Je spezifischer Sie sind, desto besser kann Divi Layouts AI den von Ihnen gewünschten Look verstehen.
• Geben Sie Kontext an: Erwägen Sie, Informationen in das optionale Feld „Erzählen Sie Divi AI von Ihrer Website“ aufzunehmen. Geben Sie möglichst viele Hintergrundinformationen zu Ihrem Produkt oder Ihrer Dienstleistung und Ihrer Zielgruppe an.
• Verwenden Sie Schlüsselwörter: Fügen Sie relevante Schlüsselwörter ein, die Ihr Unternehmen oder Ihre Dienstleistung beschreiben. Dies hilft Divi AI nicht nur beim Schreiben von Inhalten, sondern stellt auch sicher, dass Ihre Seite für SEO optimiert ist.
• Verfeinern und neu generieren: Eines der besten Dinge an Divi AI ist, dass Sie so viele Layouts generieren können, wie Sie möchten. Wenn Ihr erster Versuch nicht Ihren Wünschen entspricht, versuchen Sie es erneut! Die Möglichkeiten sind endlos.

Schritt 4: Verwenden Sie Divi Layouts AI zum Erstellen Ihrer Seite

Nachdem Sie nun verstanden haben, was Divi Layouts AI ist und was es kann, besteht der nächste Schritt darin, mit dem Seitenerstellungsprozess zu beginnen. Für dieses Tutorial bitten wir Divi, ein Layout für ein Geschäft mit Haustierleckereien zu erstellen. Geben Sie im ersten Feld den folgenden Text ein: Erstellen Sie eine Landingpage für ein Spezialgeschäft für Haustierleckerlis. Das Unternehmen heißt Critter Cravings und konzentriert sich auf rein natürliche Inhaltsstoffe.

Wir fügen dem Feld „Erzählen Sie Divi AI von Ihrer Website“ ein Leitbild hinzu, um Divi AI möglichst viele Informationen zu geben. Geben Sie den folgenden Text ein:

Unser Unternehmen, Critter Cravings, ist ein Unternehmen für rein natürliche Haustierleckereien, das dafür bekannt ist, köstliche Backwaren für Ihren pelzigen Freund herzustellen. Wir stellen jede Leckerei sorgfältig von Hand her und stellen sicher, dass nur die besten, gesunden Zutaten in unsere Rezepte gelangen. Von knusprigen Keksen bis hin zu Kauköstlichkeiten – bei jedem Bissen wird Ihr bester Freund mit Sicherheit bellen oder miauen.

Unsere Leckerlis sind frei von künstlichen Zusatz-, Konservierungs- und Füllstoffen, was sie zu einer gesunden Wahl für Haustiere aller Formen und Größen macht. Wir bei Critter Cravings glauben, dass jedes Haustier ein wenig Verwöhnung verdient, und wir sind stolz darauf, Leckereien anzubieten, denen Besitzer vertrauen können und die Haustiere lieben werden.

Unter „Schriftarten und Farben anpassen“ können Sie die Schriftarten und Farben angeben, die Sie auf Ihrer Webseite verwenden möchten. Wir wählen Lato als Schriftart für die Überschrift (1) und Open Sans als Schriftart für den Hauptteil (2). Wählen Sie für Farben „Benutzerdefiniert“ aus der Dropdown-Liste (3) aus. Verwenden Sie #000000 für die Schriftarten für Überschrift und Text und wählen Sie #F3764D und #6baaae für die Primär- und Sekundärfarben (4). Klicken Sie abschließend auf „Layout generieren“ , um Ihre Webseite zu erstellen (5).

Divi AI erstellt das Drahtmodell, wenn Sie auf „Generieren“ klicken, wendet Ihre Schriftarten und Farben an und generiert Text und Bilder.

Schritt 5: Feinabstimmung und Anpassung

Der nächste Schritt in unserem Divi Layouts AI-Leitfaden zeigt Ihnen, wie Sie Ihr Layout verfeinern. Divi AI leistet hervorragende Arbeit bei der Erstellung schöner Seiten, aber manchmal möchten Sie vielleicht Änderungen vornehmen.

Generieren von Bildern mit Divi AI

Beginnen wir mit der Regenerierung eines Bildes für unseren Heldenbereich. Bewegen Sie den Mauszeiger über das Heldenbild und klicken Sie auf das graue Einstellungssymbol, um die Einstellungen des Bildmoduls aufzurufen.

Bewegen Sie bei aktivem Popup des Moduls den Mauszeiger über die Bildvorschau und klicken Sie auf die Schaltfläche „AI“ .

Dadurch werden mehrere Optionen angezeigt: Mit KI generieren, mit KI bearbeiten (wo Sie Ihr Bild ändern, erweitern und füllen, hochskalieren oder verbessern können), ein Bild generieren und ersetzen, den Bildstil ändern oder Ihr Bild hochskalieren. Wählen wir „ Generieren und Ersetzen“ aus.

Divi AI generiert automatisch 4 neue Bilder für den Helden basierend auf dem Original. Sie können jedoch auch ein neues Bild erstellen, um eine neue Eingabeaufforderung hinzuzufügen, die Bildgröße anzugeben und vieles mehr. Sie können aus 12 Stilen wählen, darunter Foto, 3D-Rendering, Zeichnung und andere.

Für diesen Divi Layouts AI-Leitfaden wählen wir „Foto“ als Stil (1), fügen eine kurze Beschreibung hinzu (2), wählen das Querformat (3) und klicken auf „Generieren“ (4). Für die Aufforderung haben wir ein Foto eines liebevollen und treuen Hundes verwendet, dessen Augen vor Vorfreude strahlen, während er jeden Bissen eines saftigen, gebackenen Leckerbissens genießt, der auf der Zunge zergeht . Sie können so detailliert sein, wie Sie möchten, bis zu 200 Zeichen. Wenn Sie Schwierigkeiten haben, eine Eingabeaufforderung zu finden, lesen Sie unseren Beitrag über die besten KI-Eingabeaufforderungsgeneratoren, um Ihnen bei der Ideenfindung zu helfen.

Sobald Divi AI 4 Bilder generiert hat, können wir auf eines klicken und „Dieses Bild verwenden“ (1) auswählen, um es in das Modul einzufügen. Sie können auch vier weitere erstellen (2), das Bild ändern, indem Sie weitere wie das ausgewählte erstellen (3), oder eine neue Beschreibung eingeben (4), um von vorne zu beginnen.

Text mit Divi AI verfeinern

Eine weitere großartige Funktion von Divi AI ist die Fähigkeit, Text zu verfeinern. Klicken Sie zunächst im Textmodul direkt unter der Überschrift im Heldenbereich auf das graue Einstellungssymbol .

Klicken Sie im Textmodul auf die Schaltfläche „KI“ , um die KI-Optionen aufzurufen.

Daraufhin werden eine Reihe von Optionen zum Bearbeiten des vorhandenen Textes angezeigt. Zu den Optionen gehören Schreiben mit KI, Verbessern mit KI, Schreiben und Ersetzen sowie weitere Optionen zum Bearbeiten Ihres Textes mit Divi AI.

Wählen wir für diesen Divi Layouts AI-Leitfaden „Verbessern mit KI“ aus. Es erscheint ein Dialogfeld, in dem Sie den Inhaltstyp auswählen können (1), worüber Sie schreiben (2) und ob Divi AI zusätzlichen Kontext aus dem Inhalt der Seite anwenden soll (3). Sie können auch auf die AI-Schaltfläche (4) klicken, damit Divi AI eine Eingabeaufforderung für Sie generiert.

Unabhängig davon, welche Art von Inhalten Sie generieren möchten, Divi AI kann damit umgehen.

Generieren von Code mit Divi AI

Ein weiterer großer Vorteil von Divi AI ist die Fähigkeit, Code zu generieren. Es trainiert ausschließlich auf der Codebasis von Divi und unterscheidet sich dadurch von anderen großen Sprachmodellen. Dies macht Divi und Divi AI zu leistungsstarken Werkzeugen für alle Arten von Benutzern, vom Anfänger bis zum erfahrenen Entwickler. Sie können Divi AI auch verwenden, um eine Code-Snippet-Bibliothek zu erstellen, bei vorhandenem Code zu helfen und alle Arten von Effekten hinzuzufügen, einschließlich Textanimationen. Wenn Sie beispielsweise der Hauptüberschrift unserer Seite einen Schreibmaschineneffekt hinzufügen möchten, kann Divi AI problemlos damit umgehen.

Um Divi AI zum Codieren zu verwenden, öffnen Sie einfach die Einstellungen eines Moduls, navigieren Sie zur Registerkarte „Erweitert“ (1), öffnen Sie das Dropdown-Menü „Benutzerdefiniertes CSS“ (2) und klicken Sie auf die Schaltfläche „AI “ (3).

Wenn das Dialogfeld angezeigt wird, geben Sie einfach den Effekt ein, den Sie erstellen möchten (1), und klicken Sie auf die Schaltfläche „Code generieren“ (2). In unserem Beispiel verwenden wir die Aufforderung „Geben Sie der Überschrift einen Schreibmaschineneffekt“ .

Divi AI generiert und wendet Code mit Selektoren an und fügt ihn dem Freiform-CSS-Feld hinzu. Klicken Sie auf die Schaltfläche „Diesen Code verwenden“, um den Code zu implementieren.

Schritt 6: Speichern Ihrer Webseite

Sobald Sie ein Layout erstellt und an Ihre Bedürfnisse angepasst haben, besteht der letzte Schritt in unserem Divi Layouts AI-Leitfaden darin, die Seite zu speichern. Zum Glück macht Divi diesen Teil einfach. Bewegen Sie den Mauszeiger bei aktivem Visual Builder über das violette Auslassungspunkte-Menü unten in der Mitte Ihres Bildschirms.

Sie können die Seite als Entwurf speichern oder über die entsprechende Schaltfläche unten rechts auf Ihrem Bildschirm veröffentlichen.

Hier ist ein letzter Blick auf unser Layout, nachdem wir das Layout erstellt und einige Änderungen vorgenommen haben:

Divi Layouts AI-Beispiele

Bevor wir zum Abschluss kommen, haben wir ein paar Layouts und Textaufforderungen eingefügt, um Ihnen die ultimative Leistungsfähigkeit von Divi AI zu zeigen.

Eingabeaufforderung: Erstellen Sie eine Landingpage mit Schneemobilverleih, Paketen und Erlebnissen. Verwenden Sie farbenfrohe Schneemobile, Bergkulissen und flauschigen weißen Schnee

Eingabeaufforderung: Erstellen Sie eine Kontaktseite für ein Hochdruckreinigungsunternehmen. Fügen Sie eine Karte, einen Heldenabschnitt mit einem Hintergrundbild sowie drei Telefon-, E-Mail- und Adresskurztexte hinzu.

Eingabeaufforderung: Erstellen Sie eine Shop-Seite für eine Gärtnerei. Fügen Sie einen Servicebereich, ein Kontaktformular, einen Bereich mit vorgestellten Produkten und Preisen sowie einen optisch ansprechenden Heldenbereich mit einem lebendigen Hintergrundbild hinzu. Fügen Sie einen Klappentext für die kostenlose Lieferung, bevorstehende Verkaufsveranstaltungen und einen für die Pflanze des Monats bei.

Eingabeaufforderung: Erstellen Sie eine About-Seite für ein IT-Dienstleistungsunternehmen. Fügen Sie einen Abschnitt mit einer Beschreibung ihrer Dienstleistungen, ein Wertversprechen, ein Leitbild und ein Kontaktformular hinzu. Fügen Sie außerdem eine Newsletter-Anmeldung in die Fußzeile ein. Fügen Sie einen großen Heldenbereich mit einem Hintergrundbild und einer Überschrift mit dem Schlüsselwort „Cybersicherheit“ hinzu.

Eingabeaufforderung: Erstellen Sie eine Landingpage für ein Fitnessstudio in der Nachbarschaft. Fügen Sie dem Helden ein Angebot für neue Mitglieder sowie ein Bild von Fitnessgeräten hinzu. Fügen Sie außerdem einen Abschnitt „Über uns“ hinzu, listen Sie jeden Dienst auf und fügen Sie ein Newsletter-Anmeldeformular bei.

Eingabeaufforderung: Erstellen Sie eine Menüseite für ein Burgerlokal. Fügen Sie köstliche Essensbilder, eine Speisekarte, einen Online-Bestellbereich und eine Fußzeile mit einer Newsletter-Anmeldung hinzu

Eingabeaufforderung: Erstellen Sie eine Seite mit Online-Lernkursen. Präsentieren Sie 6 Kurse für Grafikdesign, Webdesign, Webentwicklung, App-Entwicklung, Prototyping und UX/UI. Präsentieren Sie außerdem die Preise für jede Klasse, einen Helden mit Hintergrundbild und ein Anmeldeformular für registrierte Benutzer.

Eingabeaufforderung: Erstellen Sie eine Zielseite für ein Autoreparaturunternehmen. Machen Sie das Thema dunkel, mit roten Akzenten. Fügen Sie einen Heldenbereich mit einem schwarz-weißen Hintergrundbild eines Autos, eine übergroße Überschrift mit dem Schlüsselwort „Autoreparatur“ und eine Bildergalerie hinzu. Fügen Sie außerdem einen Abschnitt „Services“, einen Abschnitt „Was wir tun“ und einen Abschnitt „Call-to-Action“ hinzu.

Was sind die Vorteile der Verwendung von Divi Layouts AI?

Wie wir in unserem Divi Layouts AI-Leitfaden gezeigt haben, ist das Erstellen von Webseiten mit künstlicher Intelligenz einfach, schnell und intuitiv. Es hilft Anfängern und erfahrenen Designern, Layouts schneller zu erstellen, als es normalerweise nötig wäre, ein Layout von Grund auf zu entwerfen. Es ist auch eine großartige Möglichkeit, die Kreativität anzuregen, da Divi AI Bilder, Text und Code generieren kann, was Ihnen einen guten Ausgangspunkt bietet. Ein weiterer Vorteil von Divi AI besteht darin, dass Sie unbegrenzt viele Fotos, Texte, Codes und Layouts ohne Nutzungsbeschränkungen generieren können. Divi AI ist außerdem der perfekte Begleiter für jede Divi-Website, da es Divi bis ins Innerste versteht. Letztendlich ist Divi AI ein unglaublicher kreativer Assistent, der den Prozess der Layouterstellung rationalisieren und Ihnen wertvolle Zeit und Mühe sparen kann.

Divi Layouts AI wird die Art und Weise, wie Sie Divi verwenden, revolutionieren

Divi ist das beliebteste und funktionsreichste WordPress-Theme auf dem Markt. Egal, ob Sie Webseiten von Grund auf neu entwerfen oder ein vorgefertigtes Layout verwenden möchten, Divi bietet die Tools dafür. Mit der Einführung von Divi Layouts AI können Sie vollständige Webseiten mit nur einer Textaufforderung erstellen. Der gesamte Prozess von der Erstellung einer neuen Seite bis zur Veröffentlichung ist unglaublich rationalisiert, sodass Sie in wenigen Minuten schöne, effektive Landingpages erstellen können. Mit Divi + Divi AI können Sie den Front-End-Visual Builder ohne Code verwenden, um in wenigen Minuten Bilder, Text, Code und vollständige Layouts zu generieren, sodass Sie sich auf andere Aspekte Ihres Unternehmens konzentrieren können. Mit Divi sind Ihrer Kreativität keine Grenzen gesetzt.

Holen Sie sich Divi AI

Häufig gestellte Fragen