Wir schreiben das Jahr 2023! Ein Jahr, das die Website-Erstellung für immer verändern wird. WordPress und Elementor sind zwei alte Bekannte, die bereits seit einigen Jahren eine wichtige Rolle im Webdesign spielen. WordPress als das beliebteste Content Management System (CMS), das auf jeder dritten Website im Internet zum Einsatz kommt. Und Elementor als der benutzerfreundliche Drag-and-Drop Editor und die Nr. 1 unter den WordPress Page Buildern.
Doch seit Anfang 2023 gibt es noch einen weiteren wichtigen Player, der eine ausgezeichnete Unterstützung für die Website-Erstellung mit WordPress und Elementor bietet, und das ist die generative künstlichen Intelligenz (KI oder engl. AI). In diesem Artikel gebe ich dir hilfreiche Tipps, wie du eine WordPress-Website mit Elementor und AI-Support erstellen kannst und welche Vorteile dies mit sich bringt.
Erstellung einer WordPress-Website mit Elementor und AI Support (ChatGPT und Midjourney)
Teil 1: WordPress Installation und Setup
Im ersten Teil geht es darum, die WordPress Software bei dem Hosting Anbieter deines Vertrauens zu installieren und richtig aufzusetzen.
Schritt 1: Domain und Hosting-Registrierung
Bevor du mit der Erstellung deiner WordPress-Website beginnen kannst, benötigst du eine Domain und ein Hosting-Paket. Die Domain ist die Webadresse, unter der deine Website zu erreichen sein wird (z. B. www.meine-domain.de), während das Hosting-Paket der Speicherplatz auf einem Server ist, auf dem deine Website gehostet wird.
Es gibt viele Anbieter von Domains und Hosting-Paketen, die oft auch als Paket angeboten werden. Ich empfehle dir an dieser Stelle entweder Alfahosting* oder für eine Top-Performance und einen herausragenden WordPress-Support HostPress*.
Meiner Erfahrung nach sind die etwas bekannteren Hosting-Anbieter wie z. B. Strato, Host Europe oder 1&1 Ionos nur für sehr einfache Websites mit vorwiegend statischem Content (ähnlich einer Web-Visitenkarte) zu empfehlen. Bevor du eine Entscheidung triffst, solltest du dir gut überlegen, welche Anforderungen deine Website hat.
Ein weiterer wichtiger Faktor ist die Verfügbarkeit des Kunden-Supports. Wenn du Anfänger bist, kann es sehr hilfreich sein, einen Support zur Hand zu haben, der dir bei technischen Fragen und Problemen helfen kann. Die beiden zuvor genannten Hosting Anbieter Alfahosting und HostPress haben einen hervorragenden Kunden-Support. HostPress kann dir sogar bei vielen WordPress-bedingten Fehlermeldungen weiterhelfen, was du bei den Standard-Hostern in der Regel nicht erwarten kannst.
Schritt 2: Installation von WordPress auf dem Hosting-Server
Sobald du deine Domain und dein Hosting-Paket registriert hast, erhältst du Zugriff auf ein sogenanntes Control Panel (C-Panel) oder eine Admin-Oberfläche. Dort kannst du in der Regel WordPress mit nur wenigen Klicks installieren. Wie das genau funktioniert, hängt stark von deinem Anbieter ab und wird in der Regel in einer Anleitung erklärt.
Im Folgenden findest du eine Anleitung für die automatische WordPress Installation bei Alfahosting und HostPress.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Alternativ kannst du WordPress auch manuell installieren. Diese Methode ist etwas umständlicher, klappt aber mit jedem Hosting-Anbieter und du kannst gleich bei der Installation wichtige Sicherheitseinstellungen vornehmen. Diese und viele weitere Sicherheitsmaßnahmen kannst du übrigens auch bei der HostPress Installation* ganz einfach mit Anklicken von Checkboxen einstellen (siehe Video und den folgenden Screenshot).
Schritt 3: Die ersten WordPress Schritte nach der Installation
Nach der Installation von WordPress gibt es einige wichtige Schritte, die du unternehmen solltest, um deine Website startklar zu machen:
1. Anmeldung: Melde dich in deinem WordPress-Dashboard an, indem du /wp-admin an die URL (Domain) deiner Website anhängst. Verwende dazu die Anmeldeinformationen, die du bei der Installation von WordPress erstellt hast.
2. Seitentitel anpassen – Unter Einstellungen > Allgemein kannst du den Titel und den Untertitel deiner Seite anpassen. Diese Einstellung ist auch für SEO relevant, da deine Seite nun für dieses Thema im Internet gefunden werden kann.
3. Permalinks einstellen – Apropos SEO. Einen weiteren Google-Vorteil bekommst du, wenn deine Unterseiten unter kurzen und beschreibenden URLs erreichbar sind. Wähle dazu unter Einstellungen > Permalinks die Option „Beitragsname“ aus. Diese Auswahl solltest du vornehmen, auch wenn du eine Website ohne Blog betreibst.
4. Startseite festlegen – Nach der Installation zeigt WordPress als Startseite die letzten Beiträge an. Wenn du das nicht möchtest, kannst du unter Einstellungen > Lesen „eine statische Seite (unten auswählen)“ anklicken und aus dem Drop-Down Menü eine Startseite auswählen. Dazu musst du zuerst unter Seiten > Erstellen eine neue Seite anlegen, z. B. mit dem Titel „Home“ oder „Startseite“. Gebe nur den Titel ein und klicke auf Veröffentlichen, um den Inhalt werden wir uns später kümmern.
5. Dummy Inhalte löschen – Um neuen Nutzern den Einstieg zu erleichtern, beinhaltet die WordPress Website bereits eine Beispielseite, einen Beispielbeitrag und einen Kommentar. Darüber hinaus findest du zwei vorinstallierte Plugins (Akismet und Hello Dolly) und in der Regel drei verschiedene Twenty-irgendwas Themes. Ich empfehle dir, das letzte Twenty-Theme (aktuell das 2023) zu behalten, für den Fall, dass es mit dem Theme deiner Wahl mal Probleme gibt. Die übrigen Themes sowie die beiden Plugins kannst du löschen. Die Beispielinhalte kannst du ebenfalls entfernen, sobald du eigene Inhalte erstellt hast.
6. Automatisches Backup einstellen – Regelmäßige Backups deiner Online-Präsenz sind ein wichtiger Erfolgsfaktor im Online Business. Deshalb solltest du von Anfang an ein automatisches Backup deiner kompletten Website einrichten und dich benachrichtigen lassen, falls das Backup einmal nicht funktioniert hat, damit du die Sicherung manuell nachholen kannst. Hier findest du eine Anleitung, wie du ein automatisches Backup einrichten kannst.
7. Automatische Bildoptimierung einstellen – Die Bildoptimierung kannst du natürlich auch manuell vor dem Upload durchführen. Die Plugin-Methode hat jedoch zwei entscheidende Vorteile: Die Bildoptimierung passiert automatisch und es werden alle Formate der Bilder optimiert und nicht nur das hochgeladene. In diesem Beitrag erfährst du mehr darüber, wie du die automatische Bildoptimierung einstellen kannst.
Schritt 4: Installation und Aktivierung der wichtigsten WordPress Plugins
Fragt man 10 WordPress Experten, welche Plugins auf jeder WordPress Seite unbedingt installiert werden müssen, bekommt man wahrscheinlich 10 unterschiedliche Antworten. Deswegen konzentriere ich mich auf die Bereiche, die meiner Meinung nach auf jeden Fall in WordPress ergänzt werden sollen und nenne dazu jeweils das aus meiner Sicht beste Plugin dieser Kategorie. Bereits 2016 hab ich einen Artikel über die wichtigsten WordPress Plugins verfasst. Im Jahr 2023 hat sich gar nicht so viel verändert, wenn es um die wichtigsten Erweiterungen in WordPress geht.
Das sind die kostenlosen Must-Have WordPress Plugins für 2023:
- Sicherheit (Beispiel-Plugin: All in One WP Security)
- Backup (Beispiel-Plugin: UpdraftPlus WordPress Backup Plugin)
- Spam Vermeidung (Beispiel-Plugin: Antispam Bee nicht Akismet wegen Datenschutz!)
- Kontaktformular (Beispiel-Plugin: WP Forms)
- Suchmaschinenoptimierung (Beispiel-Plugin: Rank Math SEO)
- Bildoptimierung: (Beispiel-Plugin: ShortPixel Image Optimizer)
Wie sieht es mit dem Bereich Performance aus?
Ein weiterer Bereich, der ebenfalls in WordPress optimiert werden kann, ist die Performance. Hier habe ich die Erfahrung gemacht, dass das Plugin WP Rocket* den Job besser erledigt als die kostenlosen Alternativen. Deshalb ist WP Rocket das einzige Premium Plugin, dass ich dir für jede WordPress Website empfehlen kann. Besondern dann, wenn du einen Page Builder wie Elementor, Divi, Beaver Builder oder Ähnliche verwendest.
Es gibt kostenlose Alternativen zu WP Rocket, wie z. B. WP Fastest Cache, falls du für ein Performance Plugin kein Geld ausgeben möchtest. Ich persönlich denke aber, man sollte bei einer WordPress Website an anderen Stellen sparen und nicht bei der Performance.
Falls du mehr darüber erfahren möchtest, wie du die WordPress Performance verbessern kannst, schau dir doch gerne mal meinen Gastbeitrag auf dem HostPress Blog an:
Warum gehört Elementor nicht zu den Must-Have Plugins?
Meiner Meinung nach muss Elementor nicht auf jeder neuen WordPress Seite installiert werden, denn es gibt mittlerweile durchaus beinahe gleichwertige Alternativen. Die Gutenberg Erweiterungen wie Kadence Blocks, GeneratePress Blocks und Spectra aber auch Gutenberg Page Builder wie Cwicly*, Stackable* oder Bricks sehe ich persönlich als die größten Elementor Konkurrenten an. Selbst Divi mit der komplett überarbeiteten 4.0 Version und dem Divi AI Modul* ist sicherlich auch (wieder) eine gute Elementor Alternative. Dennoch ist Elementor auch im Jahr 2023 immer noch der führende WordPress Page Builder mit der größten Community und der größten Anzahl an Drittanbieter-Addons und ja, wir installieren auch die kostenlose Version von Elementor.
Jetzt Elementor Pro holen und mit ein paar Klicks wunderschöne Websites erstellen!
Teil 2: Elementor Installation und Setup
Das folgende Video zeigt die Anleitung für die Elementor Installation sowohl für die kostenlose als auch für die Premium Variante:
Schritt 1: Elementor Installation
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Schritt 2: Das perfekte Elementor Setup
Nach der Installation und Aktivierung des Elementor Plugins empfehle ich dir die folgenden Schritte:
Inhaltsbreite einstellen
Die Einstellung zu der Inhaltsbreite befindet sich im geöffneten Elementor Editor hinter dem Hamburgermenü Website-Einstellungen > Layout. Die Inhaltsbreite ist bei Elementor standardmäßig bei 1140 px eingestellt. Da jedoch der Trend zu immer größeren Desktop-Bildschirmen geht, würde ich dir empfehlen, die Inhaltsbreite zu erhöhen. Eine konkrete Empfehlung wären 1280 px. Warum gerade diese Zahl? Die Bilder auf deiner Website sollten nicht kleiner sein als 320 px, denn sonst werden sie nicht bei der Google Bilder-Suche angezeigt. Bei einem vierspaltigen Layout ergibt sich somit eine Inhaltsbreite von 1280 px. Trotz dieser Einstellung lässt sich ein Design über die volle Breite individuell einstellen.
Inhaltstypen festlegen
Unter Elementor > Einstellungen > Generell kannst du einstellen, für welche Inhaltstypen (Custom Post Types) du den Page Builder verwenden möchtest. Bei der Elementor Installation wird der Page Builder automatisch für Beiträge und Seiten aktiviert.
Google Fonts deaktivieren
Wenn wir schon bei den Elementor Einstellungen sind, können wir ab Elementor Version 3.10 unter dem Reiter Erweitert die Google Fonts deaktivieren, um die DSGVO-Anforderung diesbezüglich zu erfüllen. Du kannst übrigens die Google Fonts weiterhin verwenden. Diese kannst du über Elementor > Custom Fonts (Individuelle Schriften) oder, falls du kein Elementor PRO User bist, über ein vergleichbares WordPress Plugin hochladen. Wie das geht, zeige ich in meinem YouTube Video über Google Fonts & Elementor.
Flexbox Container aktivieren
Zum Zeitpunkt der Veröffentlichung befand sich das Flexbox-Feature unter Elementor > Einstellungen > Experimente noch in der Beta-Phase. Stelle sicher, dass du die Flexbox auf deiner neuen Website aktiviert hast, um die modernste CSS Technologie zu nutzen.
Globalen Farben und Schriften definieren
Die globalen Farben und Schriftarten richtig einzustellen, ist keine einfache Angelegenheit für uns Elementor User. Viele moderne WordPress Themes haben eigene globale Settings, die nicht immer optimal mit den Elementor Einstellungen zusammenpassen. Worauf du genau achten solltest, wie sich der Theme Stil und das Design System auf die einzelnen Website Elemente auswirken und wo die Unterschiede zu dem globalen Einstellungen der Themes liegen, erkläre ich in meinem YouTube Video Elementor Globale Farben und Schriften richtig einstellen.
Schritt 3: Das optimale WordPress Theme für Elementor
Welches WordPress Theme ist der ideale Begleiter für den Elementor Page Builder?
Meine Empfehlung: Verwende das Hello Elementor Theme, wenn du die PRO Version von Elementor hast. In meinem Beitrag „Astra vs. Hello“ habe ich zwar gezeigt, dass selbst bei Elementor PRO die Themes wie Astra, OceanWP, Neve, GeneratePress etc. eine bessere Wahl sein könnten als Hello. Mittlerweile haben aber alle diese Themes globale Einstellungen bekommen und diese harmonieren nicht so gut mit den globalen Styling-Optionen von Elementor. Deshalb meine Empfehlung: Nutze Hello mit Elementor PRO.
Die Themes wie Astra, OceanWP, Neve, GeneratePress oder Blocksy kannst du gerne verwenden, wenn du nur die kostenlose Elementor Version verwendest. Der Funktionsumfang dieser Themes ist vergleichbar. Aufgrund der Tatsache, dass es möglich ist, kostenlos einen transparenten Sticky Header zu erstellen, würde ich aber Blocksy wählen. Außerdem bietet Blocksy ziemlich coole Starter Templates* an, was uns zu dem nächsten Schritt führt.
Schritt 4: Auswahl des passenden Elementor Templates
Nicht nur die Suche nach dem passenden WordPress Theme, sondern auch die Auswahl eines geeigneten Elementor Templates kann mühsam und zeitaufwendig sein. Natürlich kannst du deine Elementor Seite auch von Null auf aufbauen aber in diesem Artikel geht es hauptsächlich um die schnelle Website-Erstellung. Um Zeit zu sparen, möchten wir deshalb eine vorgefertigte Elementor Vorlage verwenden.
Anhand der folgenden Merkmale kannst du die Qualität eines Elementor Templates überprüfen:
- Es verwendet Flexbox Container und nicht Spalten und Abschnitte
- Es steht eine Demo Seite zur Verfügung
- Es ist komplett responsive (teste die Demo-Seite auf verschiedenen Bildschirmgrößen)
- Für Elementor PRO User: Idealerweise handelt es sich um ein Elementor Template Kit, welches auch Theme Builder Seiten beinhaltet und nicht nur eine Vorlage für eine einzelne Seite
- Es müssen nicht viele weitere Drittanbieter-Plugins installiert werden
Hier sind ein paar gute Quellen für hochwertige und professionelle Elementor Templates:
Auch zu den Elementor Starter Templates gibt es ein passendes YouTube Video.
Teil 3: AI-unterstützte Inhaltserstellung in WordPress und Elementor
Schritt 1: Die richtigen AI-Tools auswählen
Nun kommen wir zu dem Fun-Part der WordPress Website-Erstellung und dem Teil, der sich im Jahr 2023 deutlich von den Jahren zuvor unterscheidet. Wir müssen nämlich nicht mehr die Website-Inhalte von einem Copy-Writer oder Grafik-Designer erstellen lassen, uns den Kopf zerbrechen über die besten Textformulierungen oder verschiedene Stockfotos Plattformen durchforsten, um passende Bilder für unsere Website zu finden. Wir können einfach einen der vielen AI-Tools spezifische Fragen stellen und erhalten im Handumdrehen die passenden Inhalte für unsere Website. Sehen wir uns mal an, aus welchen Inhalten typischerweise so eine Website besteht und wo genau uns die künstliche Intelligenz dabei unterstützen kann:
- Website-Texte (z. B. ChatGPT)
- Blog-Beiträge (z. B. ChatGPT)
- SEO Titel und SEO Beschreibungen (z. B. ChatGPT)
- Quellcode wie CSS oder Javascript (z. B. ChatGPT)
- Hintergrund (z. B. Midjourney)
- Bilder und Grafiken (z. B. Midjourney)
- Logo (z. B. Midjourney)
- Formulare (Plugins oder Elementor PRO)
Bis auf Formulare können fast alle Website-Elemente mit den AI-Tools erstellt werden. Und selbst die Formulare für die Kontaktaufnahme werden nach und nach durch Chatbots ersetzt, hinter denen auch wieder die AI steckt.
Wie du sehen kannst gibt es hauptsächlich zwei AI-Tools, die ich dir für deine Website empfehlen kann: ChatGPT war in der letzten Zeit in den Medien sehr präsent und hat mit der sehr akkuraten Beantwortung der User-Fragen für viel Aufsehen gesorgt. Etwas unbekannter aber fast noch cooler ist das Tool Midjourney für die KI-unterstütze Erstellung von Bildern. Während ChatGPT derzeit noch kostenlos genutzt werden, kann man mit Midjourney kostenlos nur ca. 25 Bilder erstellen, wobei der Midjourney Server für die kostenlosen User sehr oft nicht erreichbar ist.
Es gibt auch andere kostenlose AI-Tools für die Bilderstellung, doch von den vielen Image Generators, die ich ausprobiert habe, gefällt mir Midjourney am besten. Eine Midjourney-Alternative, die ähnlich starke Design-Ergebnisse liefert ist Leonardo.ai, welches besonders bei Usern beliebt ist, die kostenlose AI-Bilderstellung bevorzugen. Wenn du jedoch deine Bilder kommerziell verwenden möchtest, wirst du sowieso um einen Premium Plan nicht herumkommen und das betrifft sowohl Midjourney als auch Leonardo.
Warum nicht gleich Elementor AI verwenden?
Vielleicht stellst du dir gerade die Frage, warum soll ich überhaupt nach geeigneten AI Tools suchen, wenn doch Elementor mit der Version 3.13 die AI Funktion eingeführt hat? Das ist eine gute Frage. Du kannst natürlich gerne die AI Funktion von Elementor ausprobieren. Die Testversion (aktuell in der Beta-Phase) steht sowohl Usern der kostenlosen Elementor Version also auch Pro Usern zur Verfügung.
Wenn du mit der Qualität zufrieden bist, spricht auch nichts dagegen, das Ergebnis gleich für deinen Webauftritt zu verwenden. Ich habe jedoch die Erfahrung gemacht, dass ChatGPT und Midjourney zurzeit (noch) qualitativ bessere Resultate liefern als Elementor AI. Kann jedoch durchaus sein, dass sich das mit kommenden Elementor Updates noch ändern wird.
Außerdem würde ich mir wünschen, dass Elementor die Technologie hinter ihrem AI Modul offener kommuniziert, wie es beispielsweise Elegant Themes bei Divi AI macht. Die Divi AI* nutzt die ChatGPT 3.5 API Schnittstelle und Stable Diffusion für die Bilder. Bei Elementor AI konnte ich diese Information nicht herausfinden. Auch bei den Elementor AI Bildern fehlen mir ein paar Detailangaben. Es heisst zwar man darf die generierten Bilder auf der eigenen Website verwenden, doch darf ich die Bilder auch auf einer Kundenseite verwenden? Darf ich die Bilder auch an Kunden verkaufen? Und wie lange dauert es eigentlich bis die Test-Credits aufgebraucht sind und man sich für eine Premium AI-Paket entscheiden muss?
Ich habe die Fragen an Elementor Support gestellt, warte jedoch noch auf eine Antwort. Falls du eine Antwort auf die offenen Fragen hast, würde ich mich freuen, wenn du unter dem Beitrag einen Kommentar hinterlässt.
Schritt 2: Website-Texte mit ChatGPT erstellen
Um ChatGPT nutzen zu können, muss man sich zuerst bei OpenAI anmelden.
Sobald man den Zugang zu dem berühmtesten Chat des Jahres 2023 erhalten hat, gibt man bei ChatGPT eine Eingabeaufforderung (sog. Prompt) ein, um die Inhalte für die Website (Text) zu erhalten. Je genauer du deinen Prompt formulierst, desto spezifischer wird die Antwort sein. Teile deshalb unbedingt ChatGPT das Thema deiner Website, die Zielgruppe und das Ziel deiner Website mit.
Hier ein Beispiel für einen ChatGPT Prompt für den Website-Text:
Die Antwort von ChatGPT:
Nun möchten wir gerne eine andere Zielgruppe ansprechen und passen den Schreibstil und die Tonart durch ChatGPT an:
Und das Ergebnis von ChatGPT:
Dieses Beispiel zeigt auch sehr gut, wie stark der Output von der genauen Spezifizierung der Eingabe abhängig ist.
Schritt 3: ChatGPT Texte anpassen
Obwohl die Antwort-Qualität von ChatGPT sehr hoch ist, würde ich dir empfehlen, die Textbausteine zu überarbeiten. Nutze dafür dein eigenes Know-How und Erfahrungen oder kombiniere notfalls mehrere ChatGPT Antworten sinnvoll miteinander. Das Ziel ist es, den Text möglichst unique zu machen, bevor es dann mit dem nächsten Schritt weitergeht.
Schritt 4: Plagiatsprüfung (Plagiarism Check)
In der Regel liefert ChatGPT Antworten, die ziemlich unique sind. Trotzdem kann es nicht schaden, die AI Ergebnisse einem Plagiarism Check zu unterziehen, um mögliche Plagiate zu vermeiden. Im Internet gibt es viele kostenlose Tools, um eine Plagiatsprüfung durchzuführen, wie z. B. plagiarismdetector.net/de oder duplichecker.com/de.
Übrigens, dieser Artikel wird bald auch als ein längeres YouTube Video erscheinen. Das solltest du dir nicht entgehen lassen 🙂
YouTube Kanal von WPC abonnieren und keine Tutorials mehr verpassen!
Schritt 5: AI Bilder mit Midjourney erstellen
Midjourney war im Jahr 2023 mein absolutes Lieblings-AI-Tool. Es macht einfach so viel Spaß, die unterschiedlichsten Prompts auszuprobieren und gespannt das Ergebnis abzuwarten, welches bei Midjourney ziemlich oft überraschend positiv ausfällt. Nach über 1.000 getesteten Prompts habe ich auch meinen eigenen Midjourney Guide erstellt. Falls du Interesse daran hast, du findest ihn auf Amazon entweder als Kindle- oder als Taschenbuch-Version.
Um Midjourney nutzen zu können, benötigt man einen Discord Account. Auch bei diesem Tool werden mittels eines /imagine Prompts eine Eingabeaufforderung an den Midjourney Bot gesendet und man bekommt innerhalb von wenigen Sekunden 4 Bildvorschläge zurück. Auch hier ist die Qualität der Ausgabe sehr stark an die Qualität der Eingabe gekoppelt.
Midjourney UI:
Ist kein passendes Bild dabei, klickt man einfach auf Refresh (Button rechts neben U4) oder gibt den Prompt (wenn gewünscht leicht angepasst) nochmal ein. Hat man ein Bild gefunden, kann man es entweder aufskalieren (upscale U1-U4) oder sich weitere Optionen davon erstellen lassen (V1-V4)
Wie oben bereits erwähnt, kann man Midjourney verwenden, um verschiedene Website Elemente zu erstellen. Hier nochmal zur Wiederholung:
- Hintergrundbilder
- Bilder, Icons und Grafiken
- Logos
Das KI Tool eignet sich aber auch prima dafür, sich Inspirationen zu holen. Dafür empfehle ich dir, einen Aspect Ratio von 2:3 (Parameter: —-ar 2:3) zu verwenden, also ein vertikales Design. Damit erhältst du ein Webdesign für eine (fast) komplette Einzelseite und kannst z. B. das Hero Bild übernehmen und die restlichen Abschnitte relativ einfach mit Elementor nachbauen.
Der entsprechende Prompt:
/imagine a visually stunning landing page for a coffee shop website, minimalistic and clean design, yet highly detailed, creative composition, extreme clarity and attention to detail, perfectly balanced UI and UX for optimal user engagement, smooth and bright colors to enhance the overall aesthetic appeal —-ar 2:3 —-v 5.1
Extra-Tipp: Verwende das Midjourney Design, um deine persönliche Farbpalette zu erstellen, die du gleich unter Elementor globale Farben hinterlegen kannst.
Ähnlich kannst du auch die restlichen Website Elemente mit Midjourney erstellen:
Website Icons:
Stockfotos:
Logos:
In meinem Midjourney Buch findest du dafür viele hilfreiche und getestete Prompts sowie meinen persönlichen Favoriten für alle Website Betreiber – den Website Builder Prompt.
Schritt 6: AI Bilder bearbeiten
Leider sind die AI Image Generatoren noch nicht soweit, dass man die Designs 1:1 auf der eigenen Website übernehmen kann. Eine Nachbearbeitung der Bilder ist in vielen Fällen noch notwendig. Sei es um den seltsamen Text, den die KI generiert, zu löschen oder einfach nur um den Hintergrund zu entfernen. Ich verwende für die Bildbearbeitung gerne die kostenlose Photoshop Alternative photopea.com. Die Bearbeitung der Bilder erfolgt direkt im Browser, ohne ein zusätzliches Programm installieren zu müssen. Ein weiteres hilfreiches Tool, um den Hintergrund der Bilder einfach zu entfernen ist remove.bg.
Teil 4: AI Inhalte in das Elementor Template einfügen
Wir haben die WordPress Seite aufgesetzt und die wichtigsten Plugins installiert. Die AI hat uns geholfen, die erforderlichen Inhalte für unsere Website zu erstellen. Wir haben die AI Inhalte gemäß unseren Anforderungen nachbearbeitet und sind nun bereit, die Inhalte in unser ausgewähltes Elementor Template einzufügen. Falls dieser gesamte Prozess länger dauert, empfiehlt es sich eine Coming Soon Seite einzurichten. Sobald du die Inhalte in die Elementor Vorlage integriert hast, kannst du die Coming Soon Seite deaktivieren und schon kann deine Website live gehen.
Fazit
Die Erstellung einer Website mit Elementor und AI-Unterstützung kann eine großartige Möglichkeit sein, eine Website schnell und einfach zu erstellen, die auch modern und ansprechend aussieht. Mit Elementor als visuellem Drag-and-Drop-Builder können selbst unerfahrene Benutzer eine Website erstellen, ohne dass sie Code schreiben müssen. Mit der zusätzlichen Unterstützung von AI kann die Erstellung von Inhalten und die Verbesserung der Benutzererfahrung noch schneller und einfacher gestaltet werden.
Ausblick auf zukünftige Entwicklungen:
Die Verwendung von künstlicher Intelligenz (AI) in der Website-Erstellung wird voraussichtlich in den kommenden Jahren weiter zunehmen. Immer mehr WordPress Plugins werden die AI-Technologie in ihre Erweiterungen integrieren und es somit den Usern noch einfacher machen, die AI in ihren Workflow einzubauen. Neue Technologien wie Natural Language Processing (NLP) und Machine Learning (ML) werden es noch einfacher machen, Inhalte automatisch zu erstellen und personalisierte Empfehlungen auf der Website zu geben. Auch die Integration von Chatbots und virtuellen Assistenten wird immer beliebter werden, um die Nutzererfahrung zu verbessern. Es wird spannend sein zu sehen, welche neuen Entwicklungen in der Zukunft auf uns zukommen werden.
