Feed Validator Results: http://wpconsultant.de/feed/

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 1, column 38: Use of unknown namespace: http://webfeeds.org/rss/1.0 [help]

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
                                      ^

line 50, column 0: description should not contain style tag [help]
line 289, column 0: Invalid HTML: Named entity expected. Got none. (2 occurrences) [help]
```
					<description><![CDATA[<p><img width="1920" height="1080" src="https://w ...
```
line 357, column 0: description should not contain meta tag (10 occurrences) [help]
line 357, column 0: description should not contain iframe tag (3 occurrences) [help]
line 520, column 0: style attribute contains potentially dangerous content: background-image: url(https://wpconsultant.de/wp-content/uploads/2019/09/Elementor-Pro.png); [help]

Source: http://wpconsultant.de/feed/

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
xmlns:webfeeds="http://webfeeds.org/rss/1.0">
<channel>
<title>WP Consultant</title>
<atom:link href="https://wpconsultant.de/feed/" rel="self" type="application/rss+xml" />
<link>https://wpconsultant.de</link>
<description>Online Business, WordPress & SEO</description>
<lastBuildDate>Mon, 04 Mar 2024 14:03:31 +0000</lastBuildDate>
<language>de-DE</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=6.5.2</generator>
<image>
<url>https://wpconsultant.de/wp-content/uploads/2021/03/cropped-wpc-favicon-32x32.png</url>
<title>WP Consultant</title>
<link>https://wpconsultant.de</link>
<width>32</width>
<height>32</height>
</image>
<webfeeds:cover image="https://wpconsultant.de/wp-content/uploads/2016/08/wpc-logo.png" /><webfeeds:logo>https://wpconsultant.de/wp-content/uploads/2016/08/wpc-logo-1.png</webfeeds:logo><webfeeds:accentColor>d75c37</webfeeds:accentColor>
<webfeeds:related layout="card" target="browser"/>
<webfeeds:analytics id="UA-63461383-2" engine="GoogleAnalytics"/> <item>
<title>WordPress Website mit Elementor und AI erstellen (ChatGPT & Midjourney)</title>
<link>https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/</link>
<comments>https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/#respond</comments>
<dc:creator><![CDATA[Danijel]]></dc:creator>
<pubDate>Fri, 24 Nov 2023 11:29:26 +0000</pubDate>
<category><![CDATA[Beitrag des Monats]]></category>
<category><![CDATA[Elementor Tipps]]></category>
<category><![CDATA[WordPress Plugins]]></category>
<category><![CDATA[ai]]></category>
<category><![CDATA[chatgpt]]></category>
<category><![CDATA[elementor]]></category>
<category><![CDATA[elementor ai]]></category>
<category><![CDATA[midjourney]]></category>
<category><![CDATA[wordpress ai]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=7212</guid>
<description><![CDATA[<p><img width="1920" height="1080" src="https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="WordPress Website mit AI und Elementor erstellen 2024" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen.jpeg 1920w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-300x169.jpeg 300w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1024x576.jpeg 1024w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-768x432.jpeg 768w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1536x864.jpeg 1536w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1320x743.jpeg 1320w" sizes="(max-width: 1920px) 100vw, 1920px" /></p>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.
<h2>Erstellung einer WordPress-Website mit Elementor und AI Support (ChatGPT und Midjourney)</h2>
<h2>Teil 1: WordPress Installation und Setup</h2>
Im ersten Teil geht es darum, die WordPress Software bei dem Hosting Anbieter deines Vertrauens zu installieren und richtig aufzusetzen.
<h3>Schritt 1: Domain und Hosting-Registrierung</h3>
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 <a href="https://links.wpconsultant.de/alfahosting" target="_blank" rel="noopener">Alfahosting</a>* oder für eine Top-Performance und einen herausragenden WordPress-Support <a href="https://links.webgeckos.com/hostpress" target="_blank" rel="noopener">HostPress</a>*.
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.
<h3>Schritt 2: Installation von WordPress auf dem Hosting-Server</h3>
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.
Automatische WordPress Installation bei Alfahosting:
https://www.youtube.com/watch?v=sUCNYK6OP1o
Automatische WordPress Installation bei HostPress:
https://www.youtube.com/watch?v=Cyox4zaELb4
Alternativ kannst du <a href="https://www.youtube.com/watch?v=mDePOXVPoWA" target="_blank" rel="noopener">WordPress auch manuell installieren</a>. 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 <a href="https://links.webgeckos.com/hostpress" target="_blank" rel="noopener">HostPress Installation</a>* ganz einfach mit Anklicken von Checkboxen einstellen (siehe Video und den folgenden Screenshot).
<figure><a href="https://links.webgeckos.com/hostpress" target="_blank" rel="sponsored noopener">
<img src="https://wpconsultant.de/wp-content/uploads/2017/02/website-sicherheit-mit-hostpress-1024x819.png" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2017/02/website-sicherheit-mit-hostpress-1024x819.png 1024w, https://wpconsultant.de/wp-content/uploads/2017/02/website-sicherheit-mit-hostpress-300x240.png 300w, https://wpconsultant.de/wp-content/uploads/2017/02/website-sicherheit-mit-hostpress-768x614.png 768w, https://wpconsultant.de/wp-content/uploads/2017/02/website-sicherheit-mit-hostpress-600x480.png 600w, https://wpconsultant.de/wp-content/uploads/2017/02/website-sicherheit-mit-hostpress-1536x1228.png 1536w, https://wpconsultant.de/wp-content/uploads/2017/02/website-sicherheit-mit-hostpress.png 1920w" alt="Website Sicherheit - Sicherheitsmaßnahmen bequem und einfach anwenden bei HostPress" width="1024" height="819" /> </a><figcaption>Website Sicherheit - Sicherheitsmaßnahmen bequem und einfach anwenden bei HostPress</figcaption></figure>
<style>.elementor-5350 .elementor-element.elementor-element-64aba5d{margin-top:0px;margin-bottom:0px;}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__content{min-height:100px;text-align:left;background-color:#eaeaea;}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__bg-wrapper{min-width:33%;min-height:0px;}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__button{color:#ffffff;border-color:#ffffff;font-size:15px;font-weight:600;text-transform:uppercase;line-height:1.8em;letter-spacing:1.3px;background-color:#d75c37;border-width:0px;border-radius:0px;}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta:hover .elementor-cta__content{background-color:rgba(234,234,234,0.8);}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__button:hover{color:#ffffff;background-color:#37363B;}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-ribbon-inner{background-color:#D75C37;margin-top:50px;transform:translateY(-50%) translateX(-50%) translateX(50px) rotate(-45deg);font-size:16px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta .elementor-cta__bg, .elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-5350 .elementor-element.elementor-element-3ad210a > .elementor-widget-container{padding:0px 0px 0px 0px;border-style:solid;border-width:5px 5px 5px 5px;border-color:#EAEAEA;}.elementor-5350 .elementor-element.elementor-element-045e206:not(.elementor-motion-effects-element-type-background), .elementor-5350 .elementor-element.elementor-element-045e206 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EAEAEA;}.elementor-5350 .elementor-element.elementor-element-045e206{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-20px;margin-bottom:0px;}.elementor-5350 .elementor-element.elementor-element-045e206 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5350 .elementor-element.elementor-element-6309e0b.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-5350 .elementor-element.elementor-element-6309e0b > .elementor-element-populated{border-style:solid;border-width:2px 0px 0px 0px;border-color:#FFFFFF;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-5350 .elementor-element.elementor-element-6309e0b > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5350 .elementor-element.elementor-element-e288570 .jet-listing-dynamic-field__content{font-size:16px;text-align:left;}.elementor-5350 .elementor-element.elementor-element-e288570 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-5350 .elementor-element.elementor-element-e288570 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-5350 .elementor-element.elementor-element-e288570 .jet-listing-dynamic-field{justify-content:center;}.elementor-5350 .elementor-element.elementor-element-e18e04c.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-5350 .elementor-element.elementor-element-e18e04c > .elementor-element-populated{border-style:solid;border-width:2px 2px 0px 2px;border-color:#FFFFFF;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-5350 .elementor-element.elementor-element-e18e04c > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5350 .elementor-element.elementor-element-99d7193 .jet-listing-dynamic-field__content{font-size:16px;text-align:left;}.elementor-5350 .elementor-element.elementor-element-99d7193 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-5350 .elementor-element.elementor-element-99d7193 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-5350 .elementor-element.elementor-element-99d7193 .jet-listing-dynamic-field{justify-content:center;}.elementor-5350 .elementor-element.elementor-element-997b05c.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-5350 .elementor-element.elementor-element-997b05c > .elementor-element-populated{border-style:solid;border-width:2px 2px 0px 2px;border-color:#FFFFFF;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-5350 .elementor-element.elementor-element-997b05c > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5350 .elementor-element.elementor-element-55b2b2a .jet-listing-dynamic-field__content{font-size:16px;text-align:left;}.elementor-5350 .elementor-element.elementor-element-55b2b2a .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-5350 .elementor-element.elementor-element-55b2b2a .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-5350 .elementor-element.elementor-element-55b2b2a .jet-listing-dynamic-field{justify-content:center;}.elementor-5350 .elementor-element.elementor-element-5d798b2.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-5350 .elementor-element.elementor-element-5d798b2 > .elementor-element-populated{border-style:solid;border-width:2px 0px 0px 0px;border-color:#FFFFFF;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-5350 .elementor-element.elementor-element-5d798b2 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5350 .elementor-element.elementor-element-3f16066 .jet-listing-dynamic-field__content{font-size:16px;text-align:left;}.elementor-5350 .elementor-element.elementor-element-3f16066 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-5350 .elementor-element.elementor-element-3f16066 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-5350 .elementor-element.elementor-element-3f16066 .jet-listing-dynamic-field{justify-content:center;}@media(max-width:1024px) and (min-width:768px){.elementor-5350 .elementor-element.elementor-element-6309e0b{width:100%;}.elementor-5350 .elementor-element.elementor-element-e18e04c{width:100%;}.elementor-5350 .elementor-element.elementor-element-997b05c{width:100%;}.elementor-5350 .elementor-element.elementor-element-5d798b2{width:100%;}}@media(max-width:1024px){.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__bg-wrapper{min-height:430px;}}@media(max-width:767px){.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__content{text-align:center;padding:25px 13px 25px 13px;}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__bg-wrapper{min-height:220px;}.elementor-5350 .elementor-element.elementor-element-3ad210a .elementor-cta__button{line-height:1.9em;}.elementor-5350 .elementor-element.elementor-element-e18e04c > .elementor-element-populated{border-width:2px 0px 0px 0px;}.elementor-5350 .elementor-element.elementor-element-997b05c > .elementor-element-populated{border-width:2px 0px 0px 0px;}}</style>
<section data-id="64aba5d" data-element_type="section"><a>
Zum Angebot* </a><section data-id="045e206" data-element_type="section" data-settings="{"background_background":"classic"}">Aktion: WPC Aktion
Code: 25-WPC
Gültig ab: 2022-08-01
Gültig bis: 2022-12-31</section></section>
<h3>Schritt 3: Die ersten WordPress Schritte nach der Installation</h3>
Nach der Installation von WordPress gibt es einige wichtige Schritte, die du unternehmen solltest, um deine Website startklar zu machen:
<strong>1. Anmeldung:</strong> Melde dich in deinem WordPress-Dashboard an, indem du <strong>/wp-admin</strong> an die URL (Domain) deiner Website anhängst. Verwende dazu die Anmeldeinformationen, die du bei der Installation von WordPress erstellt hast.
<strong>2. Seitentitel anpassen</strong> - Unter <strong>Einstellungen > Allgemein</strong> 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.
<strong>3. Permalinks einstellen</strong> - Apropos SEO. Einen weiteren Google-Vorteil bekommst du, wenn deine Unterseiten unter kurzen und beschreibenden URLs erreichbar sind. Wähle dazu unter <strong>Einstellungen > Permalinks</strong> die Option „Beitragsname“ aus. Diese Auswahl solltest du vornehmen, auch wenn du eine Website ohne Blog betreibst.
<strong>4. Startseite festlegen</strong> - Nach der Installation zeigt WordPress als Startseite die letzten Beiträge an. Wenn du das nicht möchtest, kannst du unter <strong>Einstellungen > Lesen</strong> "eine statische Seite (unten auswählen)" anklicken und aus dem Drop-Down Menü eine Startseite auswählen. Dazu musst du zuerst unter <strong>Seiten > Erstellen</strong> 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.
<strong>5. Dummy Inhalte löschen</strong> - 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.
<strong>6. Automatisches Backup einstellen</strong> - 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 <a href="https://wpconsultant.de/website-backup-erstellen-mit-updraftplus/" target="_blank" rel="noopener">ein automatisches Backup einrichten kannst</a>.
<strong>7. Automatische Bildoptimierung einstellen</strong> - Die Bildoptimierung kannst du natürlich auch <a href="https://wpconsultant.de/bildoptimierung-fuer-wordpress-websites-am-besten-ohne-plugin/" target="_blank" rel="noopener">manuell vor dem Upload durchführen</a>. 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 <a href="https://wpconsultant.de/wordpress-bilder-komprimieren/" target="_blank" rel="noopener">die automatische Bildoptimierung einstellen kannst</a>.
<h3><strong>Schritt 4: Installation und Aktivierung der wichtigsten WordPress Plugins</strong></h3>
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 <a href="https://wpconsultant.de/kostenlose-plugins-fuer-jede-wordpress-website/" target="_blank" rel="noopener">Artikel über die wichtigsten WordPress Plugins </a>verfasst. Im Jahr 2023 hat sich gar nicht so viel verändert, wenn es um die wichtigsten Erweiterungen in WordPress geht.
<strong>Das sind die kostenlosen Must-Have WordPress Plugins für 2023:</strong>
<ul>
<li>Sicherheit (Beispiel-Plugin: <a href="https://wordpress.org/plugins/all-in-one-wp-security-and-firewall/" target="_blank" rel="noopener">All in One WP Security</a>)</li>
<li>Backup (Beispiel-Plugin: <a href="https://wordpress.org/plugins/updraftplus/" target="_blank" rel="noopener">UpdraftPlus WordPress Backup Plugin</a>)</li>
<li>Spam Vermeidung (Beispiel-Plugin: <a href="https://wordpress.org/plugins/antispam-bee/" target="_blank" rel="noopener">Antispam Bee</a> nicht Akismet wegen Datenschutz!)</li>
<li>Kontaktformular (Beispiel-Plugin: <a href="https://wordpress.org/plugins/wpforms-lite/" target="_blank" rel="noopener">WP Forms</a>)</li>
<li>Suchmaschinenoptimierung (Beispiel-Plugin: <a href="https://wordpress.org/plugins/seo-by-rank-math/" target="_blank" rel="noopener">Rank Math SEO</a>)</li>
<li>Bildoptimierung: (Beispiel-Plugin: <a href="https://wordpress.org/plugins/shortpixel-image-optimiser/" target="_blank" rel="noopener">ShortPixel Image Optimizer</a>)</li>
</ul>
<strong>Wie sieht es mit dem Bereich Performance aus?</strong>
Ein weiterer Bereich, der ebenfalls in WordPress optimiert werden kann, ist die Performance. Hier habe ich die Erfahrung gemacht, dass das <a href="https://links.wpconsultant.de/wp-rocket" target="_blank" rel="noopener">Plugin WP Rocket</a>* 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. <a href="https://wordpress.org/plugins/wp-fastest-cache/" target="_blank" rel="noopener">WP Fastest Cache</a>, 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:
<ul>
<li><a href="https://links.wpconsultant.de/wp-optimierung" target="_blank" rel="sponsored noopener">
WordPress Performance Optimierung Tipps, Tricks & Tools (WPC Gastbeitrag bei HostPress)
</a></li>
</ul>
<strong>Warum gehört Elementor nicht zu den Must-Have Plugins?</strong>
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 <a href="https://links.wpconsultant.de/cwicly" target="_blank" rel="noopener">Cwicly</a>*, <a href="https://links.wpconsultant.de/stackable" target="_blank" rel="noopener">Stackable</a>* oder <a href="https://links.wpconsultant.de/bricks" target="_blank" rel="noopener">Bricks</a> sehe ich persönlich als die größten Elementor Konkurrenten an. Selbst Divi mit der komplett überarbeiteten 4.0 Version und dem <a href="https://links.wpconsultant.de/divi-ai" target="_blank" rel="noopener">Divi AI Modul</a>* 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.
<h2>Teil 2: Elementor Installation und Setup</h2>
Das folgende Video zeigt die Anleitung für die Elementor Installation sowohl für die kostenlose als auch für die Premium Variante:
<h3>Schritt 1: Elementor Installation</h3>
https://www.youtube.com/watch?v=GsB_VZ5OzOU
<h3>Schritt 2: Das perfekte Elementor Setup</h3>
Nach der Installation und Aktivierung des Elementor Plugins empfehle ich dir die folgenden Schritte:
<strong>Inhaltsbreite einstellen</strong>
Die Einstellung zu der Inhaltsbreite befindet sich im geöffneten Elementor Editor hinter dem Hamburgermenü <strong>Website-Einstellungen > Layout</strong>. 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.
<strong>Inhaltstypen festlegen</strong>
Unter <strong>Elementor > Einstellungen > Generell</strong> 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 <strong>Beiträge</strong> und <strong>Seiten</strong> aktiviert.
<strong>Google Fonts deaktivieren</strong>
Wenn wir schon bei den Elementor Einstellungen sind, können wir ab Elementor Version 3.10 unter dem Reiter <strong>Erweitert</strong> 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 <strong>Elementor > Custom Fonts</strong> (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 <a href="https://www.youtube.com/watch?v=-V3m8W9on0I" target="_blank" rel="noopener">Google Fonts & Elementor</a>.
<strong>Flexbox Container aktivieren</strong>
Zum Zeitpunkt der Veröffentlichung befand sich das Flexbox-Feature unter <strong>Elementor > Einstellungen > Experimente</strong> noch in der Beta-Phase. Stelle sicher, dass du die Flexbox auf deiner neuen Website aktiviert hast, um die modernste CSS Technologie zu nutzen.
<strong>Globalen Farben und Schriften definieren</strong>
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 <a href="https://www.youtube.com/watch?v=9FWLsw_SfTU" target="_blank" rel="noopener">Elementor Globale Farben und Schriften richtig einstellen</a>.
<h3>Schritt 3: Das optimale WordPress Theme für Elementor</h3>
Welches WordPress Theme ist der ideale Begleiter für den Elementor Page Builder?
<strong>Meine Empfehlung:</strong> Verwende das <a href="https://wordpress.org/themes/hello-elementor/" target="_blank" rel="noopener">Hello Elementor Theme</a>, wenn du die PRO Version von Elementor hast. In meinem Beitrag "<a href="https://wpconsultant.de/astra-vs-hello-welches-theme-verwenden-elementor-theme-builder/" target="_blank" rel="noopener">Astra vs. Hello</a>" 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 <a href="https://wordpress.org/themes/blocksy/" target="_blank" rel="noopener">Blocksy</a> wählen. Außerdem bietet Blocksy ziemlich <a href="https://links.wpconsultant.de/blocksy-starter-sites" target="_blank" rel="noopener">coole Starter Templates</a>* an, was uns zu dem nächsten Schritt führt.
<h3>Schritt 4: Auswahl des passenden Elementor Templates</h3>
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 <i>schnelle</i> Website-Erstellung. Um Zeit zu sparen, möchten wir deshalb eine vorgefertigte Elementor Vorlage verwenden.
Anhand der folgenden <strong>Merkmale</strong> kannst du die <strong>Qualität eines Elementor Templates</strong> überprüfen:
<ul>
<li>Es verwendet Flexbox Container und nicht Spalten und Abschnitte</li>
<li>Es steht eine Demo Seite zur Verfügung</li>
<li>Es ist komplett responsive (teste die Demo-Seite auf verschiedenen Bildschirmgrößen)</li>
<li><strong>Für Elementor PRO User</strong>: Idealerweise handelt es sich um ein <b>Elementor Template Kit</b>, welches auch Theme Builder Seiten beinhaltet und nicht nur eine Vorlage für eine einzelne Seite</li>
<li>Es müssen nicht viele weitere Drittanbieter-Plugins installiert werden</li>
</ul>
Hier sind ein paar <strong>gute Quellen für hochwertige und professionelle Elementor Templates:</strong>
<ul>
<li><a href="https://links.wpconsultant.de/astra-templates" target="_blank" rel="noopener">Astra</a>*</li>
<li><a href="https://links.wpconsultant.de/kadence-starter-templates" target="_blank" rel="noopener">Kadence</a>*</li>
<li><a href="https://links.wpconsultant.de/blocksy-starter-sites" target="_blank" rel="noopener">Blocksy</a>*</li>
<li><a href="https://links.wpconsultant.de/neve" target="_blank" rel="noopener">Neve</a>*</li>
<li><a href="https://links.wpconsultant.de/oceanwp-pro" target="_blank" rel="noopener">OceanWP</a>*</li>
</ul>
Auch zu den <a href="https://www.youtube.com/watch?v=ybmu3PRYy38&t=490s" target="_blank" rel="noopener">Elementor Starter Templates</a> gibt es ein passendes YouTube Video.
<h2>Teil 3: AI-unterstützte Inhaltserstellung in WordPress und Elementor</h2>
<h3>Schritt 1: Die richtigen AI-Tools auswählen</h3>
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:
<ul>
<li>Website-Texte (z. B. ChatGPT)</li>
<li>Blog-Beiträge (z. B. ChatGPT)</li>
<li>SEO Titel und SEO Beschreibungen (z. B. ChatGPT)</li>
<li>Quellcode wie CSS oder Javascript (z. B. ChatGPT)</li>
<li>Hintergrund (z. B. Midjourney)</li>
<li>Bilder und Grafiken (z. B. Midjourney)</li>
<li>Logo (z. B. Midjourney)</li>
<li>Formulare (Plugins oder Elementor PRO)</li>
</ul>
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.
<h4>Warum nicht gleich Elementor AI verwenden?</h4>
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 <a href="https://links.wpconsultant.de/divi-ai" target="_blank" rel="noopener">Divi AI</a>* 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.
<h3>Schritt 2: Website-Texte mit ChatGPT erstellen</h3>
Um ChatGPT nutzen zu können, muss man sich zuerst bei <a href="https://auth0.openai.com/u/signup/identifier?state=hKFo2SBINVRjeUpLdUNRX3dUSnY0OEVZMDBNNDBsWnZ5c2ZXeqFur3VuaXZlcnNhbC1sb2dpbqN0aWTZIGJXR25sUWZ1MUNpcjU2ZDk5N3diR3UyTzRDX00yMkhro2NpZNkgVGRKSWNiZTE2V29USHROOTVueXl3aDVFNHlPbzZJdEc" target="_blank" rel="noopener">OpenAI</a> 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.
<strong>Hier ein Beispiel für einen ChatGPT Prompt für den Website-Text:</strong>
<figure><img src="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-prompt-website-text-erstellen-1024x530.png" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-prompt-website-text-erstellen-1024x530.png 1024w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-prompt-website-text-erstellen-300x155.png 300w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-prompt-website-text-erstellen-768x397.png 768w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-prompt-website-text-erstellen-1536x795.png 1536w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-prompt-website-text-erstellen-1320x683.png 1320w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-prompt-website-text-erstellen.png 1712w" alt="Website Texte erstellen mit ChatGPT - Website Prompt" width="1024" height="530" /><figcaption>Website Texte erstellen mit ChatGPT - Website Prompt</figcaption></figure>
Die Antwort von ChatGPT:
<figure><img src="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-website-text-erstellen-1024x576.jpeg" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-website-text-erstellen-1024x576.jpeg 1024w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-website-text-erstellen-300x169.jpeg 300w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-website-text-erstellen-768x432.jpeg 768w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-website-text-erstellen-1536x864.jpeg 1536w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-website-text-erstellen-1320x743.jpeg 1320w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-website-text-erstellen.jpeg 1920w" alt="Strukturierte Antwort von ChatGPT für einen Website Text" width="1024" height="576" /><figcaption>Strukturierte Antwort von ChatGPT für einen Website Text</figcaption></figure>
Nun möchten wir gerne eine andere Zielgruppe ansprechen und passen den Schreibstil und die Tonart durch ChatGPT an:
<figure><img src="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-update-prompt-andere-zielgruppe-1024x138.png" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-update-prompt-andere-zielgruppe-1024x138.png 1024w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-update-prompt-andere-zielgruppe-300x40.png 300w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-update-prompt-andere-zielgruppe-768x103.png 768w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-update-prompt-andere-zielgruppe-1536x207.png 1536w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-update-prompt-andere-zielgruppe-1320x178.png 1320w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-update-prompt-andere-zielgruppe.png 1678w" alt="Prompt Update - Anpassung Tonart, Schreibstil, Zielgruppe" width="1024" height="138" /><figcaption>Prompt Update - Anpassung Tonart, Schreibstil, Zielgruppe</figcaption></figure>
Und das Ergebnis von ChatGPT:
<figure><img src="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-gleicher-text-andere-zielgruppe-1024x448.jpeg" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-gleicher-text-andere-zielgruppe-1024x448.jpeg 1024w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-gleicher-text-andere-zielgruppe-300x131.jpeg 300w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-gleicher-text-andere-zielgruppe-768x336.jpeg 768w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-gleicher-text-andere-zielgruppe-1536x672.jpeg 1536w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-gleicher-text-andere-zielgruppe-1320x578.jpeg 1320w, https://wpconsultant.de/wp-content/uploads/2023/03/chatgpt-gleicher-text-andere-zielgruppe.jpeg 1920w" alt="Website Text von ChatGPT für eine andere Zielgruppe" width="1024" height="448" /><figcaption>Website Text von ChatGPT für eine andere Zielgruppe</figcaption></figure>
Dieses Beispiel zeigt auch sehr gut, wie stark der Output von der genauen Spezifizierung der Eingabe abhängig ist.
<h3>Schritt 3: ChatGPT Texte anpassen</h3>
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.
<h3>Schritt 4: Plagiatsprüfung (Plagiarism Check)</h3>
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. <a href="https://plagiarismdetector.net/de" target="_blank" rel="noopener">plagiarismdetector.net/de</a> oder <a href="https://www.duplichecker.com/de" target="_blank" rel="noopener">duplichecker.com/de</a>.
Übrigens, dieser Artikel wird bald auch als ein längeres YouTube Video erscheinen. Das solltest du dir nicht entgehen lassen :-)
<h3>Schritt 5: AI Bilder mit Midjourney erstellen</h3>
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.
<img src="https://wpconsultant.de/wp-content/uploads/2023/11/midjourney-ui-upscale-versions-861x1024.png" sizes="(max-width: 861px) 100vw, 861px" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/midjourney-ui-upscale-versions-861x1024.png 861w, https://wpconsultant.de/wp-content/uploads/2023/11/midjourney-ui-upscale-versions-252x300.png 252w, https://wpconsultant.de/wp-content/uploads/2023/11/midjourney-ui-upscale-versions-768x913.png 768w, https://wpconsultant.de/wp-content/uploads/2023/11/midjourney-ui-upscale-versions.png 1102w" alt="Midjourney User Interface erklärt Upscale und Versionen" width="861" height="1024" />
<h4>Midjourney UI:</h4>
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:
<ul>
<li>Hintergrundbilder</li>
<li>Bilder, Icons und Grafiken</li>
<li>Logos</li>
</ul>
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.
<img src="https://wpconsultant.de/wp-content/uploads/2023/11/webdesing-landing-page-created-by-midjourney-prompt-683x1024.png" sizes="(max-width: 683px) 100vw, 683px" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/webdesing-landing-page-created-by-midjourney-prompt-683x1024.png 683w, https://wpconsultant.de/wp-content/uploads/2023/11/webdesing-landing-page-created-by-midjourney-prompt-200x300.png 200w, https://wpconsultant.de/wp-content/uploads/2023/11/webdesing-landing-page-created-by-midjourney-prompt-768x1152.png 768w, https://wpconsultant.de/wp-content/uploads/2023/11/webdesing-landing-page-created-by-midjourney-prompt-1024x1536.png 1024w, https://wpconsultant.de/wp-content/uploads/2023/11/webdesing-landing-page-created-by-midjourney-prompt.png 1280w" alt="Webdesign Landing Page created by Midjourney Prompt" width="683" height="1024" />
<h4>Der entsprechende Prompt:</h4>
/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
<strong>Extra-Tipp:</strong> Verwende das Midjourney Design, um deine persönliche Farbpalette zu erstellen, die du gleich unter <a href="https://www.youtube.com/watch?v=9FWLsw_SfTU" target="_blank" rel="noopener">Elementor globale Farben</a> hinterlegen kannst.
Ähnlich kannst du auch die restlichen Website Elemente mit Midjourney erstellen:
<h4>Website Icons:</h4>
<img src="https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney-1024x1024.png" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney-1024x1024.png 1024w, https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney-300x300.png 300w, https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney-150x150.png 150w, https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney-768x768.png 768w, https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney-1536x1536.png 1536w, https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney-1320x1320.png 1320w, https://wpconsultant.de/wp-content/uploads/2023/11/create-icons-for-website-with-midjourney.png 2048w" alt="Icons für eine Website mit Midjourney erstellen" width="1024" height="1024" />
<h4>Stockfotos:</h4>
<img src="https://wpconsultant.de/wp-content/uploads/2023/11/create-stock-photos-with-midjourney-1024x1024.png" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/create-stock-photos-with-midjourney-1024x1024.png 1024w, https://wpconsultant.de/wp-content/uploads/2023/11/create-stock-photos-with-midjourney-300x300.png 300w, https://wpconsultant.de/wp-content/uploads/2023/11/create-stock-photos-with-midjourney-150x150.png 150w, https://wpconsultant.de/wp-content/uploads/2023/11/create-stock-photos-with-midjourney-768x768.png 768w, https://wpconsultant.de/wp-content/uploads/2023/11/create-stock-photos-with-midjourney.png 1280w" alt="Stockfotos für eine Website mit Midjourney erstellen" width="1024" height="1024" />
<h4>Logos:</h4>
<img src="https://wpconsultant.de/wp-content/uploads/2023/11/create-logos-with-midjourney.png" sizes="(max-width: 1024px) 100vw, 1024px" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/create-logos-with-midjourney.png 1024w, https://wpconsultant.de/wp-content/uploads/2023/11/create-logos-with-midjourney-300x300.png 300w, https://wpconsultant.de/wp-content/uploads/2023/11/create-logos-with-midjourney-150x150.png 150w, https://wpconsultant.de/wp-content/uploads/2023/11/create-logos-with-midjourney-768x768.png 768w" alt="Logos mit Midjourney erstellen" width="1024" height="1024" />
In meinem <a href="https://www.amazon.de/dp/B0C9S8B2BQ" target="_blank" rel="noopener">Midjourney Buch</a> findest du dafür viele hilfreiche und getestete Prompts sowie meinen persönlichen Favoriten für alle Website Betreiber - den Website Builder Prompt.
<h3>Schritt 6: AI Bilder bearbeiten</h3>
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 <a href="https://www.photopea.com/" target="_blank" rel="noopener">photopea.com</a>. 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 <a href="https://www.remove.bg/de" target="_blank" rel="noopener">remove.bg</a>.
<h2>Teil 4: AI Inhalte in das Elementor Template einfügen</h2>
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 <a href="https://wpconsultant.de/coming-soon-seite-mit-newsletter-integration/" target="_blank" rel="noopener">Coming Soon Seite</a> 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.
<h2>Fazit</h2>
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.
<strong>Ausblick auf zukünftige Entwicklungen:</strong>
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.
<p><a href="https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Elementor Globale Farben und Schriften richtig einstellen</title>
<link>https://wpconsultant.de/elementor-globale-farben-schriften-einstellen/</link>
<comments>https://wpconsultant.de/elementor-globale-farben-schriften-einstellen/#respond</comments>
<dc:creator><![CDATA[Danijel]]></dc:creator>
<pubDate>Sat, 04 Feb 2023 11:39:51 +0000</pubDate>
<category><![CDATA[Elementor Tipps]]></category>
<category><![CDATA[astra]]></category>
<category><![CDATA[blocksy]]></category>
<category><![CDATA[elementor]]></category>
<category><![CDATA[neve]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=7159</guid>
<description><![CDATA[<p><img width="1920" height="1080" src="https://wpconsultant.de/wp-content/uploads/2023/01/elementor-globale-farben-und-schriften.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Elementor Globale Farben und Schriften richtig einstellen - Theme Stil" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2023/01/elementor-globale-farben-und-schriften.jpeg 1920w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-globale-farben-und-schriften-300x169.jpeg 300w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-globale-farben-und-schriften-1024x576.jpeg 1024w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-globale-farben-und-schriften-768x432.jpeg 768w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-globale-farben-und-schriften-1536x864.jpeg 1536w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-globale-farben-und-schriften-1320x743.jpeg 1320w" sizes="(max-width: 1920px) 100vw, 1920px" /></p>Die globalen Farben und Schriftarten richtig einzustellen, ist keine einfache Angelegenheit für uns Elementor User. Viele moderne Themes haben eigene globale Settings, die nicht immer optimal mit den Elementor Einstellungen zusammenpassen. Dieser Beitrag hilft dir, die globalen Styles bei Elementor so einzustellen, dass du das Design deiner Elementor Seite von einer zentralen Stelle aus steuern kannst.
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<h2><span itemprop="name">Video: Elementor Globale Farben & Schriften richtig einstellen - 2023 Tutorial</span></h2>
<meta itemprop="duration" content="PT32M55S" /><meta itemprop="uploadDate" content="2023-02-02T15:31:27Z"/><meta itemprop="thumbnailURL" content="https://i.ytimg.com/vi/9FWLsw_SfTU/hqdefault.jpg" /><meta itemprop="interactionCount" content="27" /><meta itemprop="embedURL" content="https://youtube.googleapis.com/v/9FWLsw_SfTU" />
<div id="schema-videoobject" class="video-container"><iframe width="100%" height="480" src="https://www.youtube.com/embed/9FWLsw_SfTU?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
<span itemprop="description">Elementor globale Standard-Einstellungen vs. Theme Stil vs. Global Styles vom WordPress Theme - Fällt es dir auch schwer, die globalen Farben und Schriften auf deiner Elementor Seite richtig einzustellen?</span>
</div>
<h2>Elementor Design System (Globale Farben und Schriftarten) einstellen</h2>
<figure id="attachment_7171" aria-describedby="caption-attachment-7171" style="width: 826px" class="wp-caption alignnone"><img class="wp-image-7171 size-full" src="https://wpconsultant.de/wp-content/uploads/2023/02/elementor-design-system.png" alt="Elementor Design System - Einstellungen für die globalen Farben und Schriftarten" width="826" height="402" /><figcaption id="caption-attachment-7171" class="wp-caption-text">Elementor Design System - Einstellungen für die globalen Farben und Schriftarten</figcaption></figure>
Im Elementor Design System kannst du die Farben und Schriftarten für die gesamte Website festlegen. Vorausgesetzt, du erstellst alle deine Unterseiten mit Elementor. Diese globalen Einstellungen beziehen sich auf CSS Klassen. Mehrere CSS Klassen verwenden das gleiche Styling wie z. B. das Überschriften-Widget und die Überschrift des Icon-Box Widgets.
<div class="vorsicht"><h4>Design System bezieht sich nur auf Elementor Seiten!</h4><p>Es ist wichtig zu wissen, dass die globalen Farben und Schriften, die im Design System eingestellt werden, sich nur auf mit Elementor erstellte Seiten beziehen! Es gibt aber auch Themes, deren Einstellungen die globalen Einstellungen von Elementor überschreiben (siehe unten Beispiele).</p></div>
<h2>Elementor Theme Stil einstellen</h2>
<figure id="attachment_7170" aria-describedby="caption-attachment-7170" style="width: 838px" class="wp-caption alignnone"><img class="size-full wp-image-7170" src="https://wpconsultant.de/wp-content/uploads/2023/02/elementor-theme-stil.png" alt="Elementor Theme Stil Einstellungen" width="838" height="386" /><figcaption id="caption-attachment-7170" class="wp-caption-text">Elementor Theme Stil Einstellungen</figcaption></figure>
Um den Theme Stil von Elementor zu benutzen, müssen zuerst die Standardfarben und Standardschriftarten unter <strong>Elementor > Einstellungen</strong> deaktiviert werden.
<h3>Wann soll ich Elementor Theme Stil verwenden?</h3>
Den Theme Stil von Elementor verwendest du am besten mit dem Hello Elementor Theme. Andere WordPress Themes verwenden in der Regel eigene Stylings, die den Theme Stil überschreiben. Bei der Verwendung von anderen Themes gilt der Theme Stil nur als "Fallback", d. h. die Theme Stil Einstellungen werden nur sichtbar, wenn keine andere Settings definiert wurden.
<h2>Theme Stil vs. Design System (Globale Farben & Schriftarten)</h2>
Wie bereits erwähnt beziehen sich die globalen Farben und Schriften auf CSS Klassen. Im Gegensatz dazu, bezieht sich der Theme Stil auf HTML-Tags wie body, h1, h2, h3 etc. Gemäß der Reihenfolge der CSS Anweisungen (<a href="https://wpconsultant.de/wordpress-theme-anpassen-2-eigenes-css-browser-entwicklertools/" target="_blank" rel="noopener">CSS Specificity</a>) beschreiben die HTML-Tags den untersten Layer und können deshalb leicht durch andere CSS Anweisungen überschrieben werden. Deshalb definiert auch der Theme Stil die Default-Einstellungen, die nur zum Einsatz kommen, wenn sonst keine Styles (durch Themes und Plugins) festgelegt wurden.
Ein weiterer Unterschied ist, das sich das Design System nur auf Elementor erstellte Seiten bezieht, während sich der Theme Stil auf alle Seiten (auch nicht Elementor Seitn) auswirkt. Diese Aussage gilt jedoch nur für das Hello Theme.
<h2>Elementor Globale Einstellungen vs. WordPress Theme Einstellungen</h2>
Die meisten modernen WordPress Themes heutzutage haben eigene globale Einstellungen. Allerdings gibt es Unterschiede, wie die Themes die globale Stylings umsetzen. Während Themes wie Astra, Blocksy oder Kadence die globalen Farben und Schriften bereits schon bei der Aktivierung des Themes definiert haben, sind die globalen Settings bei Neve und GeneratePress noch nicht gesetzt. Diese vordefinierten Einstellungen überschreiben die globalen Elementor Theme Stil.
Beispiele für WordPress Themes und Elementor Globale Einstellungen:
<h3>Elementor Globale Einstellungen & Hello Theme</h3>
Hier auf dem WPC Blog findest du einen <a href="https://wpconsultant.de/astra-vs-hello-welches-theme-verwenden-elementor-theme-builder/" target="_blank" rel="noopener">Vergleich zwischen dem Astra und dem Hello Theme</a> bei dem Astra ziemlich gut abschneidet. Aus der Sicht der globalen Einstellungen hat natürlich das Hello Theme in Verbindung mit Elementor ganz klar die Nase vorne.
Hier gibt es keine Konflikte mit irgendwelchen Theme Settings. Du kannst wählen, ob du lieber das Design System oder den Theme Stil verwenden möchtest (oder die globalen Einstellungen des Design Systems innerhalb des Theme Stils). Ich würde dir den Theme Stil empfehlen, weil du auch mit dem Hello Theme deine <a href="https://wpconsultant.de/elementor-vs-gutenberg/" target="_blank" rel="noopener">Beiträge mit dem Standard WordPress Editor (Gutenberg) schreiben</a> solltest. Auf diese Weise würde sich der Theme Stil auch auf die HTML Tags des Beitragsinhalts auswirken.
<h3>Elementor Globale Einstellungen & moderne Themes wie Astra, Blocksy, Neve etc.</h3>
<strong>Variante 1:</strong>
Solltest du eines der beliebten WordPress Themes wie Astra, Blocksy, Neve, Kadence etc. mit Elementor verwenden, gibt es eine Aussage, die immer zutrifft: Deaktiviere die Elementor Standardfarben und die Standardschriftarten, verwende die globalen Einstellungen des WordPress Themes im Customizer und optional kannst du diese WordPress Theme Customizer Einstellungen auch im Elementor Theme Stil hinterlegen (als Fallback).
Bei diesem Setup musst du allerdings wissen, welche Theme Einstellungen sich auf welche Website Elemente beziehen. Weiterführende Informationen zu den globalen Einstellungen der beliebten Themes findest du hier:
<ul>
<li><a href="https://wpastra.com/docs/style-with-global-settings/?bsf=679" target="_blank" rel="noopener">Astra Globale Einstellungen</a>*</li>
<li><a href="https://r.freemius.com/5115/2976052/https://creativethemes.com/blocksy/docs/general-options/colors/" target="_blank" rel="noopener">Blocksy Globale Einstellungen</a>*</li>
<li><a href="https://shareasale.com/r.cfm?b=1479552&u=2341856&m=55096&urllink=&afftrack=" target="_blank" rel="noopener">Neve Globale Einstellungen</a>*</li>
</ul>
<strong>Variante 2:</strong>
Es gibt aber auch Themes wie z. B. Neve oder <a href="https://generatepress.com/premium/?ref=2061" target="_blank" rel="noopener">GeneratePress</a>*, die zwar globale Einstellungen anbieten, die aber nicht direkt nach der Installation aktiviert sind. Damit lassen sich auch die globalen Farben und Schriftarten von Elementor Design System verwenden, zumindest für die Elementor Seiten.
Ich hoffe, dieser Artikel hilft dir, die globalen Einstellungen auf deiner WordPress und Elementor Seite richtig einzustellen. Denke daran dir auch das Video zu diesem Thema anzusehen. Falls du fragen hast, hinterlasse bitte unten einen Kommentar.
<p><a href="https://wpconsultant.de/elementor-globale-farben-schriften-einstellen/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/elementor-globale-farben-schriften-einstellen/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Elementor und Google Fonts – DSGVO konform einbinden</title>
<link>https://wpconsultant.de/elementor-google-fonts-dsgvo-konform/</link>
<comments>https://wpconsultant.de/elementor-google-fonts-dsgvo-konform/#respond</comments>
<dc:creator><![CDATA[Danijel]]></dc:creator>
<pubDate>Sun, 15 Jan 2023 15:12:58 +0000</pubDate>
<category><![CDATA[Elementor Tipps]]></category>
<category><![CDATA[dsgvo]]></category>
<category><![CDATA[elementor]]></category>
<category><![CDATA[google fonts]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=7123</guid>
<description><![CDATA[<p><img width="1280" height="626" src="https://wpconsultant.de/wp-content/uploads/2023/01/elementor-google-fonts-dsgvo-konform.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Google Fonts DSGVO konform in Elementor einbinden" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2023/01/elementor-google-fonts-dsgvo-konform.png 1280w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-google-fonts-dsgvo-konform-300x147.png 300w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-google-fonts-dsgvo-konform-1024x501.png 1024w, https://wpconsultant.de/wp-content/uploads/2023/01/elementor-google-fonts-dsgvo-konform-768x376.png 768w" sizes="(max-width: 1280px) 100vw, 1280px" /></p>Seit dem <a href="https://dejure.org/dienste/vernetzung/rechtsprechung?Text=3%20O%2017493/20" target="_blank" rel="noopener">LG München Urteil vom 20.01.2022</a> haben meine beiden Video Tutorials zum Thema "Elementor und Google Fonts" in den letzten Monaten viele neue Zuschauer gewonnen. In diesem Artikel fasse ich das Thema nochmal zusammen und gebe dir ein, zwei zusätzliche Tipps, die du bei der Integration der Google Schriften im Elementor beachten solltest. Selbstverständlich findest du in diesem Beitrag auch die beliebten Video Tutorials.
<em>Disclaimer: Alle Informationen in diesem Beitrag sind wie immer nach bestem Gewissen recherchiert und beruhen auf meinen persönlichen Erfahrungen. Dieser Artikel sowie sonstige Inhalte auf dieser Website stellen keine Rechtsberatung dar und können den Rat eines Anwalts nicht ersetzen.</em>
<h2>Google Schriftarten DSGVO-konform in Elementor einsetzen in 2 Schritten</h2>
Damit du die Google Schriftarten datenschutz-konform im Elementor einsetzen kannst, sind zwei Schritte erforderlich. Bevor wir uns jedoch die beiden Schritte ansehen, werfen wir einen Blick darauf, ob dir WordPress Plugins helfen können, die Datenschutz-Anforderungen bzgl. den Google Schriftarten zu erfüllen.
<h3>WordPress Plugins: Google Fonts DSGVO konform einsetzen</h3>
Es gibt verschiedene WordPress Plugins, die du versuchen kannst zu verwenden, um die Google Schriften datenschutz-konform auf deiner WordPress und Elementor Seite einzusetzen. Warum die Plugin-Methode nur selten zum Erfolg führt, erkläre ich in dem ersten Teil der Video Tutorial-Reihe. Wenn du dennoch ein Plugin ausprobieren möchtest, würde ich dir das Plugin <a href="https://wordpress.org/plugins/local-google-fonts/" target="_blank" rel="noopener">Local Google Fonts</a> empfehlen.
Auch wenn die Plugin-Methode funktioniert, du fügst wieder ein zusätzliches Plugin zu deiner Seite, welches du gerade als Elementor User nicht benötigst. Deshalb sehen wir uns nun die Variante ohne ein WordPress Plugin an.
<div>
<h3>Schritt 1: Verbindungen zum Google Server trennen</h3>
<meta itemprop="duration" content="PT10M5S" /><meta itemprop="uploadDate" content="2020-06-01T06:00:00Z"/><meta itemprop="thumbnailURL" content="https://i.ytimg.com/vi/-V3m8W9on0I/hqdefault.jpg" /><meta itemprop="interactionCount" content="4281" /><meta itemprop="embedURL" content="https://youtube.googleapis.com/v/-V3m8W9on0I" />
<div id="schema-videoobject" class="video-container"><iframe src="https://www.youtube.com/embed/-V3m8W9on0I?rel=0&controls=0&showinfo=0" width="100%" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
Google Fonts & Elementor Teil 1 - Im 1. Teil des 2-teiligen Elementor Tutorials erfährst du, wie du die Verbindungen zum Google Server trennen und damit sicherstellen kannst, dass keine Daten an den Google Server übertragen werden.
</div>
<strong>Verbindungen zum Google Server überprüfen</strong>
Wie du überprüfen kannst, welche Verbindungen deine Website zu Google und anderen Servern aufbaut?
Dafür kannst du die Entwicklertools deines Lieblings-Browsers verwenden. Keine Angst, das ist nicht nur etwas für die Techies :-) Rufe deine Website auf, klicke die rechte Maustaste und wähle <strong>Untersuchen</strong>, <strong>Inspect</strong>, <strong>Inspect Element</strong> oder Ähnliches (abhängig vom Browser), um die Entwicklertools aufzurufen. Gehe dann zu dem Tab <strong>Network</strong> und klicke auf <strong>Fonts</strong>. Nach einem Refresh der Seite siehst du in der Spalte <strong>Domain</strong> zu welchen Server die Verbindungen aufgebaut werden.
Hier siehst du einen Screenshot aus Google Chrome:
<figure id="attachment_7136" aria-describedby="caption-attachment-7136" style="width: 1440px" class="wp-caption alignnone"><img class="size-full wp-image-7136" src="https://wpconsultant.de/wp-content/uploads/2023/01/google-server-verbindungen-ueberpruefen.png" alt="Google Server Verbindungen überprüfen mit den Browser-Entwickler Tools (hier an Bsp. von Google Chrome)" width="1440" height="679" /><figcaption id="caption-attachment-7136" class="wp-caption-text">Google Server Verbindungen überprüfen mit den Browser-Entwickler Tools (hier an Bsp. von Google Chrome)</figcaption></figure>
Alternativ kannst du auch auf den Reiter <strong>Sources</strong> gehen. Dort funktioniert es auch ohne die Seite neu zu laden. Außerdem gibt es auch Online Tools wie z. B. der <a href="https://sicher3.de/google-fonts-checker/" target="_blank" rel="noopener">Google Fonts Checker</a>, die überprüfen, ob deine Webseite Google Fonts verwendet. Wichtig zu wissen, es wird immer nur die eingegebene Unterseite geprüft. Soweit ich weiß, gibt es keine kostenlosen Tools, die <strong>alle</strong> <strong>Unterseiten</strong> deiner Website überprüfen. Falls du ein derartiges Tool kennst, hinterlasse bitte unten einen Kommentar.
<div class="wpc-tipp"><h4>WPC Tipp: YouTube Videos laden auch Google Fonts</h4><p>Wenn du auf deiner Website Inhalte wie Google Maps oder YouTube Videos einbindest und diese nicht durch ein Consent Plugin wie z. B. <a href="https://links.wpconsultant.de/borlabs" rel="noopener" target="_blank">Borlabs Cookie</a>* ohne die Einwilligung des Besuchers beim Ladevorgang ausschließt, werden ebenfalls Google Fonts geladen. Das passiert auch, wenn du den „Privacy Mode“ beim Elementor Video Widget aktivierst.</p></div>
 
<strong>Google Fonts in Elementor deaktivieren</strong>
Um die Verbindungen zu trennen und damit die Google Fonts, die über die API geladen werden, zu deaktivieren, kannst du als Elementor User einen Code Schnippet verwenden. Dieser Code Schnipsel wird in die functions.php Datei des <a href="https://wpconsultant.de/wordpress-child-theme-erstellen/" target="_blank" rel="noopener">Child Themes</a> eingefügt:
<pre class="EnlighterJSRAW" data-enlighter-language="php">add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );</pre>
Dieser Code-Schnipsel funktioniert jedoch nur für Webseiten, die mit Elementor erstellt wurden. Falls du alle deine Unterseiten mit dem beliebtesten WordPress Page Builder aufgebaut hast, ist dieses Snippet eine gute Möglichkeit, nicht versehentlich wieder Google Fonts zu verwenden (beispielsweise wenn du vorgefertigte Elementor Templates importierst).
<div class="vorsicht"><h4>Vorsicht beim Importieren von Elementor Templates!</h4><p>Solltest du vorgefertigte Elementor Vorlagen verwenden, kontrolliere immer die Einstellungen der Schriftfamilie. Denn bei vielen Templates sind bestimmte Google Fonts bereits voreingestellt. Ohne den oberen Code-Schnipsel würde deine Seite wieder die Verbindung zum Google Server aufbauen.</p></div>
Sollte dein Webauftritt auch das Design des Themes verwenden (nicht Elementor Seiten), stelle sicher, dass du im Customizer keine Google Fonts ausgewählt hast.
<div>
<h3>Schritt 2: Google Fonts selbst hosten</h3>
<meta itemprop="duration" content="PT6M48S" /><meta itemprop="uploadDate" content="2020-06-01T06:00:04Z"/><meta itemprop="thumbnailURL" content="https://i.ytimg.com/vi/GFjC9IGBrzM/hqdefault.jpg" /><meta itemprop="interactionCount" content="2761" /><meta itemprop="embedURL" content="https://youtube.googleapis.com/v/GFjC9IGBrzM" />
<div id="schema-videoobject" class="video-container"><iframe src="https://www.youtube.com/embed/GFjC9IGBrzM?rel=0&controls=0&showinfo=0" width="100%" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
Google Fonts & Elementor - Im 2. Teil erfährst du, wie du die Google Schriftarten mit Hilfe von Elementor Pro selbst hosten und damit datenschutz-konform einbinden kannst.
</div>
<strong>Google Schriftarten herunterladen</strong>
Zu allererst solltest du die Google Fonts, die du auf deiner Website verwenden möchtest <a href="https://fonts.google.com/" target="_blank" rel="noopener">bei Google herunterladen</a>. Du kannst dafür auch die Seite <a href="https://gwfh.mranftl.com/fonts" target="_blank" rel="noopener">gwfh.mranftl.com</a> verwenden:
<figure id="attachment_7135" aria-describedby="caption-attachment-7135" style="width: 1280px" class="wp-caption alignnone"><img class="wp-image-7135 size-full" src="https://wpconsultant.de/wp-content/uploads/2023/01/google-fonts-helper.png" alt="Google Webfonts Helper - lade Google Fonts herunter, um sie selbst zu hosten" width="1280" height="770" /><figcaption id="caption-attachment-7135" class="wp-caption-text">Google Webfonts Helper - lade Google Fonts herunter, um sie selbst zu hosten</figcaption></figure>
<strong>Heruntergeladene Google Fonts auf die eigene Website hochladen</strong>
Sobald du deine favorisierten Google Schriften lokal auf deinem Rechner gespeichert hast, kannst du sie unter <strong>Elementor > Benutzerdefinierte Schriftarten</strong> hochladen. Als letzten Schritt musst du nur noch die hochgeladenen Schriften für deine Elementor Designs verwenden. Am besten definierst du damit die globalen Einstellungen im Elementor Editor unter <strong>Website Einstellungen > Design-System</strong> bzw. unter <strong>Website-Einstellungen > Theme-Stil</strong>.
<h2>Fazit: Mit Aufwand verbunden aber mit Anleitung machbar</h2>
Wie du sehen kannst, ist ein gewisser Aufwand erforderlich, um die Verbindungen zum Google Server zu trennen und die Google Fonts DSGVO konform einzusetzen. Darüber hinaus gibt es noch weitere Stolperfallen, die zu berücksichtigen sind wie z. B. die Verwendung von Elementor Templates oder der Einsatz von eingebetteten Inhalten wie YouTube Videos. Ich hoffe jedoch, dass dir diese Anleitung hilft, den Datenschutz-Anforderungen gerecht zu werden und Abmahnungen zu vermeiden.
<p><a href="https://wpconsultant.de/elementor-google-fonts-dsgvo-konform/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/elementor-google-fonts-dsgvo-konform/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Online Marketing Automatisierung mit smarten Online Tools</title>
<link>https://wpconsultant.de/online-marketing-automatisierung/</link>
<comments>https://wpconsultant.de/online-marketing-automatisierung/#respond</comments>
<dc:creator><![CDATA[Oliver Pfeil]]></dc:creator>
<pubDate>Mon, 14 Nov 2022 14:18:42 +0000</pubDate>
<category><![CDATA[Online Marketing]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=6724</guid>
<description><![CDATA[<p><img width="1760" height="880" src="https://wpconsultant.de/wp-content/uploads/2022/11/online-marketing-automatisierung.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Online Marketing Automatisierung mit smarten Online Tools" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2022/11/online-marketing-automatisierung.png 1760w, https://wpconsultant.de/wp-content/uploads/2022/11/online-marketing-automatisierung-300x150.png 300w, https://wpconsultant.de/wp-content/uploads/2022/11/online-marketing-automatisierung-1024x512.png 1024w, https://wpconsultant.de/wp-content/uploads/2022/11/online-marketing-automatisierung-768x384.png 768w, https://wpconsultant.de/wp-content/uploads/2022/11/online-marketing-automatisierung-1536x768.png 1536w, https://wpconsultant.de/wp-content/uploads/2022/11/online-marketing-automatisierung-1320x660.png 1320w" sizes="(max-width: 1760px) 100vw, 1760px" /></p>Eine eigene Website ist ein wichtiges Fundament, das dir viele Marketing-Möglichkeiten bietet. Im Vergleich zu Offline-Marketingaktionen kannst du bei Online-Marketing viele Prozesse automatisieren und dadurch deutlich smarter und erfolgreicher gestalten.
Und genau um dieses Thema geht es in diesem Artikel: Automatisierung von klugen Online-Marketing Strategien.
Es gibt mittlerweile viele Tools auf dem Markt, mit denen du Prozesse automatisieren kannst. Dadurch reduzierst du die Fehlerquote und sparst Zeit und Ressourcen. Die gewonnene Zeit verschafft dir Freiraum für andere Dinge und gibt dir die Möglichkeit, gewisse Marketingprozesse zu skalieren und dadurch Wachstum zu erzeugen.
<h2>5 konkrete Beispiele für Marketing Automatisierung</h2>
Für dich habe ich 5 konkrete Beispiele vorbereitet. Dabei handelt es sich um beliebte und strategisch kluge Online-Marketing Strategien, bei denen du den Prozess entweder teilweise oder sogar vollständig automatisieren kannst.
<h3>Automatisierte Terminvergabe</h3>
Termine zu vereinbaren, kann nervend und zeitaufwendig sein. Natürlich für beide Seiten. Es geht aber auch viel einfacher und der große Vorteil dabei ist, dass du mehr Termine und dadurch mehr Leads (also potentielle Kunden) gewinnen wirst. Dazu gibt es natürlich verschiedene Online-Tools, die du dafür nutzen kannst. Ich möchte dir diese Marketing-Automatisierung-Strategie anhand des <a href="https://calendly.com/" target="_blank" rel="noopener">Tools Calendly</a> zeigen.
<figure id="attachment_6732" aria-describedby="caption-attachment-6732" style="width: 1920px" class="wp-caption alignnone"><a href="https://calendly.com/" target="_blank" rel="noopener"><img class="wp-image-6732 size-full" src="https://wpconsultant.de/wp-content/uploads/2022/11/calendly-automatisierte-terminvergabe.png" alt="Mit dem Tool Calendly kannst du die Terminvergabe vollständig automatisieren" width="1920" height="997" /></a><figcaption id="caption-attachment-6732" class="wp-caption-text">Mit dem Tool Calendly kannst du die Terminvergabe vollständig automatisieren</figcaption></figure>
Mit Calendly können deine Website-Besucher, Interessenten und Kunden einen Termin in deinem Kalender buchen. Du legst dazu vorher fest, zu welchen Tagen und welchen Uhrzeiten du gebucht werden kannst. Den Kalender kannst du entweder per iFrame direkt auf deiner Website einbinden oder per Button von deiner Website auf die Kalender-URL verlinken.
Außerdem kannst du Calendly mit deinem persönlichen Kalender verbinden. Es wird also nie ein verfügbarer Termin angezeigt, an dem du schon einen anderen Termin in deinem Kalender stehen hast.
Diese Vorgehensweise spart dir Zeit und ist auch für dein Gegenüber sehr praktisch, da sich dein Gegenüber den für sich passendsten Termin auswählen kann. Zusätzlich kannst du festlegen, wie der Termin stattfinden soll. Das kann natürlich ein persönliches Treffen sein, ein Anruf per Telefon oder per Online-Konferenz.
Du kannst beispielsweise Zoom und auch Google Meet mit Calendly verbinden. Sobald eine Person einen Termin gebucht hat, bekommt sie die Bestätigung und den direkten Link für den Zoom-Raum.
Das ist praktisch und du kannst deine Terminvergabe dadurch vollständig automatisieren.
<h3>E-Mail Marketing</h3>
Die wohl effektivste Online-Marketing-Strategie ist E-Mail Marketing. Mit E-Mail Marketing kannst du deine Interessenten und Kunden automatisiert mit wertvollen E-Mails versorgen. Die Betonung liegt hierbei auf “wertvoll”. Denn mit einem klugen System wie beispielsweise KlickTipp werden E-Mails automatisch in Abhängigkeit von der Eintragung in den Newsletter oder Produktkaufs versendet. Der Empfänger bekommt also immer zum für ihn passendsten Zeitpunkt seine Nachrichten.
Auch für dich ist automatisiertes E-Mail Marketing ein großer Vorteil. Einmal eingerichtet, werden deine E-Mails automatisiert versendet.
<ul>
<li>Zu Beginn einer E-Mail-Serie kannst du Vertrauen aufbauen, indem du wertvolle Tipps & Tricks versendest.</li>
<li>Im weiteren Verlauf kannst du auf deine Produkte, Dienstleistungen und Lösungen hinweisen.</li>
</ul>
<h3>Einfache Verkaufstools statt komplizierten Online-Shop</h3>
Du möchtest auf deiner Website Produkte verkaufen? Für ein sehr umfangreiches Produktportfolio macht natürlich ein Online-Shop durchaus Sinn.
Wenn du allerdings nur wenige gezielte Produkte wie beispielsweise Coachings oder Online-Kurse verkaufst, ist ein spezieller Zahlungsanbieter wie beispielsweise <a href="https://www.oliverpfeil.de/online-tools/digistore24" target="_blank" rel="noopener">Digistore24</a> die bessere Wahl.
Damit sparst du dir ein kompliziertes Shop-System und profitierst stattdessen von einem Online-Tool, das so ziemlich alle Prozesse für dich übernimmt.
<figure id="attachment_6731" aria-describedby="caption-attachment-6731" style="width: 1440px" class="wp-caption alignnone"><img class="wp-image-6731 size-full" src="https://wpconsultant.de/wp-content/uploads/2022/11/digistore24-verkauf-automatisieren-affiliate-programm.png" alt="Digistore24 ermöglicht ein einfaches Verkaufen der eigenen Produkte mit vielen automatisierten Marketing-Tools" width="1440" height="665" /><figcaption id="caption-attachment-6731" class="wp-caption-text">Digistore24 ermöglicht ein einfaches Verkaufen der eigenen Produkte mit vielen automatisierten Marketing-Tools</figcaption></figure>
Deine einzige Aufgabe besteht darin, das Produkt beim Zahlungsanbieter zu erstellen und alle Details zu hinterlegen. Du wählst aus, welche Zahlungsmöglichkeiten der Kunde haben soll und bindest anschließend den Link zum Bestellformular auf deiner Website ein.
Der Zahlungsanbieter übernimmt dabei das Erstellen der Rechnung, das Versenden der Zugangsdaten und bietet gleichzeitig viele wertvolle Marketing-Tools. Bei dem gerade genannten Anbieter Digistore24 kannst du sogar ein eigenes Affiliateprogramm integrieren, Gutscheincodes verwenden und profitierst von vielen weiteren ähnlichen Möglichkeiten.
<h3>Memberbereich</h3>
Immer mehr Webseitenbetreiber erstellen Online-Kurse und bieten ihren Kunden damit eine einfache Möglichkeit, sich weiterzubilden. Die Videos des Kurses werden in der Regel über einen internen Mitgliederbereich (Memberbereich) zur Verfügung gestellt.
Der Kunde bekommt dazu nach dem Kauf oder der kostenlosen Registrierung eine E-Mail mit seinen persönlichen Zugangsdaten. Mit diesen kann er sich im Mitgliederbereich einloggen und hat anschließend Zugriff auf die Videos.
Du als Produktanbieter kannst die Videos je nach Bedarf austauschen, aktualisieren und auch neue hinzufügen. Dein Kunde kann dank des Mitgliederbereichs immer auf die neuesten Videos zugreifen.
<strong>Dazu noch ein spezieller Tipp:</strong> Wenn du (wie im letzten Beispiel genannt) Digistore24 als Zahlungsanbieter verwendest, kannst du diesen mit deinem Mitgliederbereich-Tool (beispielsweise Coachy) verbinden. Nach dem Kauf über Digistore24 bekommt der Kunde automatisch Zugangsdaten für den Mitgliederbereich.
<figure id="attachment_6733" aria-describedby="caption-attachment-6733" style="width: 1920px" class="wp-caption alignnone"><a href="https://links.wpconsultant.de/coachy" target="_blank" rel="noopener"><img class="wp-image-6733 size-full" src="https://wpconsultant.de/wp-content/uploads/2022/11/coachy-mitgliederbereich-online-kurse-automatisierung.png" alt="" width="1920" height="994" /></a><figcaption id="caption-attachment-6733" class="wp-caption-text">Eigene Online Kurse verkaufen inklusive automatisierter Aufnahme der Mitglieder in den <a href="https://links.wpconsultant.de/coachy" target="_blank" rel="noopener">Memberbereich mit Coachy</a>*</figcaption></figure>
Einmal eingerichtet, funktioniert also auch diese Marketing-Strategie per Autopilot. Auch für den Kunden ist das ein Vorteil, da er sofort nach dem Kauf den Zugang zu seinem Produkt erhält.
<h3>Wichtige News per Knopfdruck in dein Postfach</h3>
Google Alerts ist ein sehr spannendes und gleichzeitig kostenloses Tool von Google. Damit kannst du automatisiert das Internet auf bestimmte Keywords (Suchbegriffe) überwachen.
<strong>Konkret bedeutet das folgendes:</strong>
Du hinterlegst in Google Alerts ein Keyword. Anschließend definierst du, wie oft du News zu diesem Keyword bekommen solltest (beispielsweise täglich oder wöchentlich). Diese News werden dir bequem per E-Mail in dein GMail-Postfach gesendet.
Google informiert dich daraufhin im von dir gewünschten Zeitintervall automatisch, wenn es neue indexierte Seiten und Suchergebnisse zu diesem Keyword gibt. Du musst also nicht manuell nach diesem Keyword suchen und dann mühsam prüfen, was es dazu Neues gibt.
Eine gute Möglichkeit besteht darin, die eigene Firma oder auch die Konkurrenz zu überwachen. Immer wenn es einen neuen Inhalt im Internet dazu gibt, wirst du von Google automatisch informiert.
<h2>Fazit</h2>
Das waren jetzt 5 ganz unterschiedliche Beispiele für Online-Marketing-Automatisierung. Dies zeigt deutlich, wie viele Möglichkeiten es gibt. Vielleicht bist du beim Lesen selbst auf die ein oder andere Idee gekommen, was du in Zukunft automatisieren kannst. Ich wünsche dir viel Spaß beim Optimieren und Verbessern deiner Prozesse.
<strong>Meine Empfehlung:</strong> Nehme dir einmal ein paar Stunden Zeit und schreibe alles auf, was du automatisieren könntest.
<p><a href="https://wpconsultant.de/online-marketing-automatisierung/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/online-marketing-automatisierung/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>10 Elementor Pro Funktionen kostenlos umsetzen</title>
<link>https://wpconsultant.de/elementor-pro-funktionen-kostenlos/</link>
<comments>https://wpconsultant.de/elementor-pro-funktionen-kostenlos/#comments</comments>
<dc:creator><![CDATA[Danijel]]></dc:creator>
<pubDate>Wed, 17 Aug 2022 18:42:19 +0000</pubDate>
<category><![CDATA[Elementor Tipps]]></category>
<category><![CDATA[WordPress Plugins]]></category>
<category><![CDATA[elementor]]></category>
<category><![CDATA[elementor addons]]></category>
<category><![CDATA[elementor templates]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=6548</guid>
<description><![CDATA[<p><img width="1280" height="626" src="https://wpconsultant.de/wp-content/uploads/2022/08/elementor-pro-funktionen-kostenlos.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Elementor Pro Funktionen kostenlos umsetzen" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2022/08/elementor-pro-funktionen-kostenlos.png 1280w, https://wpconsultant.de/wp-content/uploads/2022/08/elementor-pro-funktionen-kostenlos-300x147.png 300w, https://wpconsultant.de/wp-content/uploads/2022/08/elementor-pro-funktionen-kostenlos-1024x501.png 1024w, https://wpconsultant.de/wp-content/uploads/2022/08/elementor-pro-funktionen-kostenlos-768x376.png 768w" sizes="(max-width: 1280px) 100vw, 1280px" /></p>Denkst du darüber nach, dir die Elementor Pro Version zu kaufen? Dann warte bitte noch ein wenig, zumindest bis du diesen Artikel gelesen hast. Es gibt gute Gründe für die Pro Version des beliebtesten WordPress Page Builders aber es gibt auch Funktionen und bestimmte Voraussetzungen, die eine Anschaffung der Premium Version nicht rechtfertigen. Der folgende Beitrag zeigt dir 7 Elementor Funktionalitäten, die du auch kostenlos realisieren kannst.
Falls du die Seitenerstellung mit dem WordPress Editor bevorzugst, was aus Performance-Sicht sicherlich eine gute Idee ist, findest du im Beitrag auch kostenlose Gutenberg Alternativen.
<h2>Elementor Pro Funktionen, die kostenlos umgesetzt werden können</h2>
Die folgenden Funktionen in der Elementor Pro Version können auch mit kostenlosen Elementor Addons umgesetzt werden:
<h3>Beiträge / Posts</h3>
Möchtest du die letzten Blog Beiträge auf einer Unterseite anzeigen oder deine Blog-Seite umstylen? Die Posts kannst du als Elementor User auch beispielsweise mit den kostenlosen Addons <a href="https://wordpress.org/plugins/essential-addons-for-elementor-lite/" target="_blank" rel="noopener">Essential Addons</a>, <a href="https://wordpress.org/plugins/happy-elementor-addons/" target="_blank" rel="noopener">Happy Addons</a> oder <a href="https://wordpress.org/plugins/premium-addons-for-elementor/" target="_blank" rel="noopener">Premium Addons</a> anzeigen. Die kostenlosen Optionen sind teilweise sogar besser als das Posts Widget der Elementor Pro Version. Denn während bei der Elementor Pro Option sich die Custom Post Types nur mit einer <a href="https://developers.elementor.com/docs/hooks/custom-query-filter/" target="_blank" rel="noopener">Custom Query filtern</a> lassen, ist das bereits in der kostenlosen Version von Premium Addons im Elementor Editor möglich.
<figure id="attachment_6553" aria-describedby="caption-attachment-6553" style="width: 1440px" class="wp-caption alignnone"><img class="size-full wp-image-6553" src="https://wpconsultant.de/wp-content/uploads/2022/08/elementor-widget-posts-kostenlos-premium-addons.png" alt="Elementor Posts Widget kostenlos mit Premium Addons" width="1440" height="1047" /><figcaption id="caption-attachment-6553" class="wp-caption-text">Elementor Posts Widget kostenlos mit <a href="https://premiumaddons.com/blog-widget-for-elementor-page-builder/?ref=113" target="_blank" rel="noopener">Premium Addons*</a> inklusive Custom Post Types</figcaption></figure>
Einen <a href="https://el-mentor.com/elementor-widgets/posts-widget/" target="_blank" rel="noopener">Vergleich zwischen verschiedenen Elementor Posts Widgets</a> der einzelnen Addons Anbietern kannst du dir gerne auf unserem englischen Elementor Blog <a href="https://el-mentor.com/elementor-widgets/posts-widget/" target="_blank" rel="noopener">el-mentor.com</a> ansehen.
Mit den Plugins <a href="https://de.wordpress.org/plugins/ultimate-post/" target="_blank" rel="noopener">PostX- Gutenberg Post Grid Blocks</a> und <a href="https://wordpress.org/plugins/ultimate-addons-for-gutenberg/" target="_blank" rel="noopener">Spectra - WordPress Gutenberg Blocks</a> lässt sich diese Funktion auch komplett ohne Elementor und nur mit dem WordPress Editor Gutenberg kostenlos umsetzen.
<h3>Lottie Animationen</h3>
Das Lottie Animation Widget fügt attraktive Animationen zu deiner Elementor Seite hinzu. Auch hier ist das Plugin Premium Addons (<a href="https://premiumaddons.com/elementor-lottie-animations-widget/?ref=113" target="_blank" rel="noopener">Lottie Demo von Premium Addons</a>*) die Top-Adresse für alle, die die eigene Website kostenlos animieren möchten. Eine weitere kostenlose Elementor Pro Alternative sind die Plugins <a href="https://wordpress.org/plugins/stratum/" target="_blank" rel="noopener">Stratum - Elementor Widgets</a> und <a href="https://wordpress.org/plugins/elementskit-lite/" target="_blank" rel="noopener">ElementsKit Elementor Addons</a>.
Mit diesen Addons kannst du die Lottie Animation kostenlos in deine Elementor Designs einbinden. Allerdings können bestimmte Funktionen innerhalb des Widgets nur mit der Pro Version freigeschaltet werden. So ermöglicht die kostenlose Version des Plugins Stratum z. B. nicht, einen Loop oder das Design beim Scrollen zu animieren. Dafür wird die Pro Version des Plugins benötigt.
<figure id="attachment_6560" aria-describedby="caption-attachment-6560" style="width: 2320px" class="wp-caption alignnone"><img class="size-full wp-image-6560" src="https://wpconsultant.de/wp-content/uploads/2022/08/elementor-lottie-animation-kostenlos-mit-stratum.png" alt="Elementor Lottie Animation kostenlos mit Stratum Elementor Widgets" width="2320" height="1744" /><figcaption id="caption-attachment-6560" class="wp-caption-text">Elementor Lottie Animation kostenlos umsetzen - Demo auf der <a href="https://stratum.getmotopress.com/lottie-animations/?aff=588" target="_blank" rel="noopener">Stratum Elementor Widgets Seite</a>*</figcaption></figure>
Im Gutenberg Editor können die Lottie Animationen ebenfalls kostenlos mit dem Plugin <a href="https://wordpress.org/plugins/ultimate-addons-for-gutenberg/" target="_blank" rel="noopener">Spectra von Brainstorm Force</a> oder auch mit den <a href="https://wordpress.org/plugins/kadence-blocks/" target="_blank" rel="noopener">Kadence Blocks</a> hinzugefügt werden.
<h3>Image Hotspots und Flip Box</h3>
Warum ich die beiden Funktionen zusammengefasst habe? Na, weil man mit dem <a href="https://elementor.com/blog/create-responsive-image-hotspots/" target="_blank" rel="noopener">Flip Box Widget auch die Image Hotspots erstellen</a> kann. Obwohl Elementor dieses Tutorial herausgebracht hat, bevor sie die Bilder Hotspots in ihren Widget-Umfang aufgenommen haben, macht diese Methode auch heute noch durchaus Sinn. Die Flip Box Funktion bietet mehr Freiraum sowohl bei der Gestaltung als auch beim Responsive Design.
Bei meiner Recherche sind mir drei Plugins aufgefallen, die die Hotspots Funktion kostenlos anbieten: PowerPack for Elementor, HT Mega und das bereits vorgestellt Stratum Elementor Widgets.
Stratum bietet auch die Flip Box kostenlos an. Weitere kostenlose Alternativen für die animierte Box sind: Essential Addons, <a href="https://wordpress.org/plugins/jetwidgets-for-elementor/" target="_blank" rel="noopener">JetWidgets</a>, <a href="https://wordpress.org/plugins/bdthemes-element-pack-lite/" target="_blank" rel="noopener">Element Pack</a> und <a href="https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/" target="_blank" rel="noopener">The Plus Addons</a>.
<h3>Karussell und Slideshow</h3>
Bilder Karusselle und Slideshows gehören auch noch im Jahr 2022 zu beliebten Website-Elementen. Das muss aber noch kein Argument für Elementor Pro sein. Beliebte kostenlose Ausweichmöglichkeiten sind hier Premium Addons und Happy Addons.
<figure id="attachment_6576" aria-describedby="caption-attachment-6576" style="width: 1560px" class="wp-caption alignnone"><img class="size-full wp-image-6576" src="https://wpconsultant.de/wp-content/uploads/2022/08/elementor-slider-slideshow-kostenlos-premium-addons.png" alt="Elementor Slideshow kostenlos mit Premium Addons" width="1560" height="1093" /><figcaption id="caption-attachment-6576" class="wp-caption-text">Elementor Slideshow kostenlos mit Premium Addons (<a href="https://premiumaddons.com/carousel-widget-for-elementor-page-builder/?ref=113" target="_blank" rel="noopener">Slider Demo Premium Addons</a>*)</figcaption></figure>
Mit den Happy Addons kannst du sogar einen <a href="https://demo.happyaddons.com/elementor-slider-widget-demo/?ref=71" target="_blank" rel="noopener">vertikalen Slider kostenlos in Elementor</a>* realisieren.
<h3>Starter Templates</h3>
Wenn man sich heute die Elementor Template Bibliothek ansieht, erscheinen dort fast nur noch Pro Templates. Gefühlt würde ich sagen, dass noch vor 1-2 Jahren viel mehr kostenlose Vorlagen zur Verfügung standen. Aber auch bei den Website-Vorlagen gibt es genügend kostenlose Alternativen. Das Problem mit den kostenlosen Templates ist, dass man sich damit nicht wirklich von anderen Websites und damit auch nicht von den eigener Konkurrenz absetzen kann.
Hier meine Top 3 der kostenlosen und Premium Elementor und Gutenberg Templates (in dieser Reihenfolge):
<ul>
<li><a href="https://wordpress.org/plugins/astra-sites/" target="_blank" rel="noopener">Astra Starter Sites</a> (Demo: <a href="https://wpastra.com/starter-templates/?page-builder=elementor/?bsf=679" target="_blank" rel="noopener">Astra Starter Templates</a>*)</li>
<li><a href="https://wordpress.org/plugins/elementskit-lite/" target="_blank" rel="noopener">ElementsKit Elementor Addons</a> (Demo: <a href="https://wpmet.com/plugin/elementskit/all-layouts/?rui=312" target="_blank" rel="noopener">ElementsKit Template Library</a>*)</li>
<li><a href="https://wordpress.org/plugins/kadence-starter-templates/" target="_blank" rel="noopener">Starter Templates by Kadence WP</a> (Demo: <a href="https://www.kadencewp.com/kadence-theme/starter-templates/?ref=743" target="_blank" rel="noopener">Kadence Starter Templates</a>*)</li>
</ul>
Ein weiteres beliebtes Plugin für die Starter Sites ist <a href="https://wordpress.org/plugins/envato-elements/" target="_blank" rel="noopener">Envato Elements</a>, aber ich persönlich bin kein großer Fan von Envato und dem dazugehörenden Themeforest.
<h4>Elementor Template Cloud</h4>
Es gibt noch zwei Plugins, die ich beim Thema Elementor Templates gerne erwähnen möchte und das sind <a href="https://wordpress.org/plugins/wunderwp/" target="_blank" rel="noopener">WunderWP</a> und <a href="https://wordpress.org/plugins/templately/" target="_blank" rel="noopener">Templately</a>. Um auf die kostenlosen Templates dieser Anbieter zugreifen zu können, benötigt man einen Account. Jedoch kann man mit dem eigenen Konto die selbst-erstellten Templates in der Cloud speichern und auf mehreren Websites verwenden.
Wenn du mehr über die Vorlagen in Elementor erfahren möchtest, empfehle ich dir meinen Beitrag über <a href="https://wpconsultant.de/elementor-templates/" target="_blank" rel="noopener">Elementor Templates Pro & kostenlos</a>.
<h2>Elementor Pro Funktionen, die nicht oder kaum kostenlos umgesetzt werden können</h2>
Es gibt aber auch Premium Funktionen, die durchaus einen Kauf der Elementor Pro Version rechtfertigen. Dazu gehören vor allem die folgenden vier Features. Falls du einen Weg kennst wie diese Elementor Funktionen kostenlos umgesetzt werden könne, lass es uns bitte unten in den Kommertaren wissen.
<h3>WooCommerce</h3>
Bis auf das Product Grid Widget von Essential Addons und Premium Addons sowie einige E-Commerce Widgets von HT Mega bin ich bei meiner Recherche auf keine kostenlose WooCommerce Elementor Widgets gestoßen. Ich finde, dass es durchaus in Ordnung ist, denn mit einem Online-Shop verdient man in der Regel auch mehr als mit einer normalen Website, was auch die etwas höheren Investitionen bei den Elementor Addons rechtfertigt.
Zwei Premium Anbieter möchte ich an dieser Stelle hervorheben, die deinen WordPress Online Shop auf das nächste Level heben könnten. Zum einen hat Astra Pro erst vor Kurzem mit der <a href="https://wpastra.com/updates/astra-3-9/?bsf=679" target="_blank" rel="noopener">Version 3.9 ein "WooCommerce Facelift"</a>* bekommen, die in der WordPress Welt seinesgleichen sucht. Und zum anderen gibt es von Crocoblock das <a href="https://crocoblock.com/plugins/jetwoobuilder/?ref=359" target="_blank" rel="noopener">WooCommerce Plugin JetWooBuilder</a>*, welches im Zusammenspiel mit JetReviews, JetCompareWishlist und JetEngine keine Shop-Wünsche offen lässt.
<h3>Theme Builder</h3>
Die kostenlose Alternative zum Elementor Theme Builder ist natürlich das kostenlose WordPress Theme. Einige Themes wie z. B. Kadence, Astra oder Neve, haben bereits schon einen Header und Footer Builder eingebaut. Doch sobald man die theme-spezifischen Seiten wie Blog-Einzelansicht (Single Post), Archivseite, 404 Seite, Suchergebnisseite etc. anpassen möchte, ist man ohne Programmierkenntnisse auf die Theme Builder Funktion angewiesen. Diese wird, soweit ich das herausfinden konnte, nur von HT Mega und in einem sehr eingeschränkten Umfang kostenlos angeboten.
Premium Elementor Addons, die auch einen Theme Builder im Funktionsumfang enthalten sind, <a href="https://crocoblock.com/plugins/jetthemecore/?ref=359" target="_blank" rel="noopener">Crocoblock</a>* und <a href="https://www.dynamic.ooo/integrations/elementor-free/?ref=178" target="_blank" rel="noopener">Dynamic.ooo</a>* (Dynamic Tag Templates). Ich erwähne es nicht nur, weil ich ein Affiliate Partner dieser Addons bin, sondern auch weil ich beide Plugins absolut empfehlen kann und sie eine Lifetime Lizenz anbieten, was bei Elementor Pro nicht der Fall ist.
<h3>Dynamic Content</h3>
Auch beim dynamischen Content sehe ich zurzeit keine kostenlosen Elementor Pro Alternativen auf dem Markt. Die beiden Plugins Crocoblock und Dynamic.ooo sind auch meine Top-Empfehlung, wenn es um die dynamischen Inhalte in WordPress und Elementor geht. Das Elementor und Gutenberg Addon <a href="https://crocoblock.com/plugins/jetengine-wp/?ref=359" target="_blank" rel="noopener">JetEngine von Crocoblock</a>* ist mein absolutes Lieblings-Addon, mit dem sich Website-Content halb-automatisch veröffentlich lässt. Was meine ich damit?
Das Setup der Website ist mit JetEngine und dem Theme Builder so ausgelegt, dass man nur eine Seite im Backend ausfüllen muss, um mit diesen Daten verschiedene Seiten im Frontend (Einzelansicht, Archivseite, Startseite, Deal-Seite etc.) zu befüllen.
<h3>Motion Effects</h3>
Ein weiteres Elementor Pro Feature, welches zumindest nach meinem Kenntnisstand nicht kostenlos von anderen Addons-Anbieter angeboten wird, sind die Bewegungseffekte (Motion Effects). Wenn die Scrolling Effekte in deinem Web-Projekt nicht fehlen dürfen, dann ist Elementor Pro eine gute Wahl.
Aber wie gesagt, falls du eine kostenlose Lösung kennst, hinterlasse bitte unten einen Kommentar.
<h2>Premium Funktionen kostenlos umsetzen, die nicht in Elementor Pro erhalten sind</h2>
Auf el-mentor.com findest du eine <a href="https://el-mentor.com/find-elementor-addons/" target="_blank" rel="noopener">Elementor Addons Suche</a>. Diese Suchfunktion hilft dir, für viele Elementor Widgets die passenden Premium und kostenlosen Addons Anbieter zu finden.
<figure id="attachment_6562" aria-describedby="caption-attachment-6562" style="width: 1560px" class="wp-caption alignnone"><img class="size-full wp-image-6562" src="https://wpconsultant.de/wp-content/uploads/2022/08/elementor-addons-suchen-finden-anhand-widgets.png" alt="Elementor Addons Suche - Finde Elementor Addons anhand Widgets auf el-mentor.com" width="1560" height="1124" /><figcaption id="caption-attachment-6562" class="wp-caption-text">Elementor Addons Suche - Finde Elementor Addons anhand Widgets auf <a href="https://el-mentor.com/find-elementor-addons/" target="_blank" rel="noopener">el-mentor.com</a></figcaption></figure>
<strong>Beliebte Premium Elementor Funktionen, die es auch kostenlos gibt, sind z. B.:</strong>
<ul>
<li>Instagram (Feed) - Instagram Widget Demo von Stratum</li>
<li>Tabellen - <a href="https://essential-addons.com/elementor/table/?via=706" target="_blank" rel="noopener">Tabellen Widget Demo von Essential Addons</a>*</li>
<li>Image Separator oder Image Scroll - <a href="https://premiumaddons.com/elementor-image-scroll-widget/?ref=113" target="_blank" rel="noopener">Image Scroll Widget Demo von Premium Addons</a>*</li>
<li>Mega Menu - Mega Menu Demo von <a href="https://premiumaddons.com/elementor-mega-menu-widget/?ref=113" target="_blank" rel="noopener">Premium Addons</a>* und <a href="https://wpmet.com/plugin/elementskit/megamenu/?rui=312" target="_blank" rel="noopener">ElementsKit</a>*</li>
</ul>
<h2>Achtung! Nicht zu viele Addons verwenden</h2>
Die Gefahr besteht natürlich, dass man, um Geld für Elementor Pro zu sparen, viel zu viele kostenlose Elementor Addons installiert. Im Hinblick auf den Wartungsaufwand sowie auf die Stabilität und die Performance der Seite tut man sich damit keinen Gefallen. Bevor du also mehr als zwei kostenlose Elementor Addons zu deiner WordPress Seite hinzufügst, um die oberen Funktionen umzusetzen, empfehle ich dir doch lieber, zu Elementor Pro zu greifen.
<div data-elementor-type="section" data-elementor-id="3896" class="elementor elementor-3896" data-elementor-post-type="elementor_library">
<section class="elementor-section elementor-top-section elementor-element elementor-element-1be0f340 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="1be0f340" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-162f2804" data-id="162f2804" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-45b1b339 elementor-cta--layout-image-left elementor-cta--valign-middle elementor-cta--mobile-layout-image-above elementor-cta--skin-classic elementor-animated-content elementor-bg-transform elementor-bg-transform-zoom-in elementor-widget elementor-widget-call-to-action" data-id="45b1b339" data-element_type="widget" data-widget_type="call-to-action.default">
<div class="elementor-widget-container">
<div class="elementor-cta">
<div class="elementor-cta__bg-wrapper">
<div class="elementor-cta__bg elementor-bg" style="background-image: url(https://wpconsultant.de/wp-content/uploads/2019/09/Elementor-Pro.png);" role="img" aria-label="Elementor-Pro"></div>
<div class="elementor-cta__bg-overlay"></div>
</div>
<div class="elementor-cta__content">
<div class="elementor-cta__title elementor-cta__content-item elementor-content-item">
Interesse an Elementor PRO? </div>
<div class="elementor-cta__description elementor-cta__content-item elementor-content-item">
Wenn du mich und meine Arbeit unterstützen möchtest, würde ich mich sehr freuen, wenn du die PRO Version über den folgenden Affiliate Partner Link kaufen würdest. Ich danke dir für deine Unterstützung! </div>
<div class="elementor-cta__button-wrapper elementor-cta__content-item elementor-content-item ">
<a class="elementor-cta__button elementor-button elementor-size-md" href="https://links.wpconsultant.de/elementor-pro-new" target="_blank" rel="sponsored">
Zu Elementor Pro </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Elementor Pro kann dir nämlich auch helfen, bis zu 20 WordPress Plugins von deiner Website zu entfernen. Damit machst du deine Seite schlank und reduziert auch den Pflegeaufwand. Die verbesserte Ladezeit wird dir bestenfalls auch ein paar Pluspunkte bei Google & Co. einbringen.
<div data-elementor-type="section" data-elementor-id="5957" class="elementor elementor-5957" data-elementor-post-type="elementor_library">
<section class="elementor-section elementor-top-section elementor-element elementor-element-06fd331 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="06fd331" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f327787" data-id="f327787" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-afc7901 elementor-widget elementor-widget-jet-listing-grid" data-id="afc7901" data-element_type="widget" data-settings="{"columns":"1"}" data-widget_type="jet-listing-grid.default">
<div class="elementor-widget-container">
<div class="jet-listing-grid jet-listing"><div class="jet-listing-grid__items grid-col-desk-1 grid-col-tablet-1 grid-col-mobile-1 jet-listing-grid--4984" data-queried-id="7212|WP_Post" data-nav="{"enabled":false,"type":null,"more_el":null,"query":[],"widget_settings":{"lisitng_id":4984,"posts_num":1,"columns":1,"columns_tablet":1,"columns_mobile":1,"is_archive_template":"","post_status":["publish"],"use_random_posts_num":"","max_posts_num":9,"not_found_message":"No data was found","is_masonry":false,"equal_columns_height":"","use_load_more":"","load_more_id":"","load_more_type":"click","load_more_offset":{"unit":"px","size":0,"sizes":[]},"use_custom_post_types":"","custom_post_types":[],"hide_widget_if":"","carousel_enabled":"","slides_to_scroll":"1","arrows":"true","arrow_icon":"fa fa-angle-left","dots":"","autoplay":"true","pause_on_hover":"true","autoplay_speed":5000,"infinite":"true","center_mode":"","effect":"slide","speed":500,"inject_alternative_items":"","injection_items":[],"scroll_slider_enabled":"","scroll_slider_on":["desktop","tablet","mobile"],"custom_query":false,"custom_query_id":"","_element_id":""}}" data-page="1" data-pages="93" data-listing-source="posts" data-listing-id="4984" data-query-id=""><div class="jet-listing-grid__item jet-listing-dynamic-post-7212" data-post-id="7212" > <div data-elementor-type="jet-listing-items" data-elementor-id="4984" class="elementor elementor-4984" data-elementor-post-type="jet-engine">
<section class="elementor-section elementor-top-section elementor-element elementor-element-352906d elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="352906d" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-83f5603" data-id="83f5603" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-19e607b elementor-widget elementor-widget-jet-listing-dynamic-image" data-id="19e607b" data-element_type="widget" data-widget_type="jet-listing-dynamic-image.default">
<div class="elementor-widget-container">
<div class="jet-listing jet-listing-dynamic-image"><a href="https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/" class="jet-listing-dynamic-image__link"><img width="1920" height="1080" src="https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen.jpeg" class="jet-listing-dynamic-image__img attachment-full size-full wp-post-image" alt="WordPress Website mit AI und Elementor erstellen 2024" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen.jpeg 1920w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-300x169.jpeg 300w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1024x576.jpeg 1024w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-768x432.jpeg 768w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1536x864.jpeg 1536w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1320x743.jpeg 1320w" sizes="(max-width: 1920px) 100vw, 1920px" loading="eager" /></a></div> </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-5c4cba7" data-id="5c4cba7" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-6dd48fc elementor-widget elementor-widget-jet-listing-dynamic-field" data-id="6dd48fc" data-element_type="widget" data-widget_type="jet-listing-dynamic-field.default">
<div class="elementor-widget-container">
<div class="jet-listing jet-listing-dynamic-field display-inline"><div class="jet-listing-dynamic-field__inline-wrap"><h4 class="jet-listing-dynamic-field__content">WordPress Website mit Elementor und AI erstellen (ChatGPT & Midjourney)</h4></div></div> </div>
</div>
<div class="elementor-element elementor-element-9ee4dc6 elementor-widget elementor-widget-button" data-id="9ee4dc6" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-lg" href="https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Zum Beitrag</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div></div></div> </div>
</div>
</div>
</div>
</div>
</section>
</div>
<p><a href="https://wpconsultant.de/elementor-pro-funktionen-kostenlos/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/elementor-pro-funktionen-kostenlos/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>7 SEO Tipps für Elementor User</title>
<link>https://wpconsultant.de/elementor-seo-tipps/</link>
<comments>https://wpconsultant.de/elementor-seo-tipps/#respond</comments>
<dc:creator><![CDATA[Danijel]]></dc:creator>
<pubDate>Wed, 15 Dec 2021 19:35:40 +0000</pubDate>
<category><![CDATA[Website SEO]]></category>
<category><![CDATA[elementor]]></category>
<category><![CDATA[seo tipps]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=6270</guid>
<description><![CDATA[<p><img width="1280" height="626" src="https://wpconsultant.de/wp-content/uploads/2021/12/elementor-seo-tipps.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Elementor SEO Tipps" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2021/12/elementor-seo-tipps.png 1280w, https://wpconsultant.de/wp-content/uploads/2021/12/elementor-seo-tipps-300x147.png 300w, https://wpconsultant.de/wp-content/uploads/2021/12/elementor-seo-tipps-1024x501.png 1024w, https://wpconsultant.de/wp-content/uploads/2021/12/elementor-seo-tipps-768x376.png 768w" sizes="(max-width: 1280px) 100vw, 1280px" /></p>Elementor SEO? Klingt nach einem Begriff, der extra für die Suchmaschinen kreiert wurde. Denn was hat Elementor bitte schön mit Suchmaschinenoptimierung zu tun? Natürlich ist Elementor kein SEO-Plugin und dennoch gibt es einige Punkte bei der Erstellung von Elementor-Seiten zu beachten.
Doch bevor wir zu den SEO Tipps im Umgang mit dem führenden WordPress Page Builder kommen, lasst uns vorher noch zwei wichtige Fragen zum Thema Elementor & SEO beantworten:
<h2>Ist Elementor SEO freundlich?</h2>
Die kurze Antwort lautet: Jein.
Auf der einen Seite kannst du mit Elementor sehr schöne Webseiten erstellen und erreichst auch als Anfänger ein ansprechendes Design. Dieses tolle Design führt idealerweise dazu, dass sich deine Besucher länger mit deiner Website beschäftigen, was zu einer längeren Verweildauer und evtl. auch zu einer geringeren Absprungrate führt. Diese positiven Signale belohnt Google mit besserem Ranking auf den Suchergebnisseiten (SERPs).
Auf der anderen Seite fügt Elementor, genau wie andere Page Builder Plugins, sehr viel "unnötigen" Code zu deiner Website hinzu, was i. d. R. zu einer längeren Ladezeit und einer schlechteren Performance führt. Da die Performance auch ein Ranking-Faktor bei Google ist, kann es dadurch zu schlechteren Positionierung in den SERPs kommen. Hilfreiche Tipps zur Elementor Performance Optimierung findest du am Ende dieses Artikels.
<h2>Welches SEO Plugin soll ich mit Elementor verwenden?</h2>
Dieser Beitrag zeigt dir SEO Tipps, die du beim Arbeiten mit Elementor beachten solltest. Das bedeutet jedoch nicht, dass du darüber hinaus kein zusätzliches SEO Plugin benötigst. Als Elementor User empfehle ich dir entweder <a href="https://wordpress.org/plugins/wordpress-seo/" target="_blank" rel="noopener">Yoast SEO</a> oder <a href="https://wordpress.org/plugins/search/rank+math/" target="_blank" rel="noopener">Rank Math</a>, da beide Plugins eine Integration mit Elementor vorweisen können. Du kannst damit im Elementor Editor den Titel, die Keywords und die Meta Beschreibung anpassen, ohne dass du zwischen dem Elementor Editor und dem WordPress Editor hin und her wechseln musst.
Falls du zufällig Google Analytics verwendest, wäre vielleicht <a href="https://links.wpconsultant.de/rank-math" target="_blank" rel="noopener">Rank Math Pro</a>* etwas für dich. Damit kannst du nämlich den Google Tracking Code (GATC) datenschutz-konform auf deiner Seite einbinden, ohne dass du dafür eine Einwilligung von deinen Besuchern einholen musst.
<div>
<h2>Video Tutorial: 7 Elementor SEO Tipps</h2>
 
<div id="schema-videoobject" class="video-container"><iframe src="https://www.youtube.com/embed/_gjoR5hXk5w?rel=0&controls=0&showinfo=0" width="100%" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
► Elementor SEO Einstellungen und Widgets, die dir helfen, positive Signale an Google zu senden, um dadurch das Ranking deiner Website zu verbessern!
</div>
<h2>Elementor SEO Tipps</h2>
Unabhängig davon, welches SEO Plugin du verwendest, solltest du die folgenden Punkte beachten, damit du dir keine SEO-Nachteile einhandelst.
<h3>SEO Tipp Nr. 1 - Richtige Überschriften-Struktur</h3>
Eine große Fehlerquelle, nicht nur bei Elementor Usern, ist die (nicht) richtige Verwendung der Überschriften h1 bis h6 in einer Dokumenten-/Webseiten-Struktur. Bei deiner Überschriften-Struktur solltest du auf folgendes achten:
<ul>
<li>Nicht die H1-Überschrift vergessen und am besten nur eine pro Seite verwenden (das ist die wichtigste Überschrift, um das Haupt-Keyword für diese Seite zu platzieren)</li>
<li>Keine Überschriften-Ebenen überspringen</li>
<li>Nicht zu viele H2-Überschriften auf einer Seite verwenden</li>
</ul>
Für alle <strong>Elementor Anwender</strong> lauern die <strong>SEO Fehlerquellen</strong> vor allem bei:
<ul>
<li>Verwendung von vorgefertigten Templates</li>
<li>Einfügen von fertigen Abschnitt-Vorlagen in eine bestehende Seite</li>
<li>Verwendung von globalen Widgets (am besten ohne Hx-Überschriften verwenden)</li>
</ul>
Der folgende Headline-Check wurde an einem Template von Elementor Pro (Beauty Salon - Home) durchgeführt:
<figure id="attachment_6355" aria-describedby="caption-attachment-6355" style="width: 1930px" class="wp-caption alignnone"><img class="size-full wp-image-6355" src="https://wpconsultant.de/wp-content/uploads/2021/12/vorsicht-bei-verwendung-von-elementor-templates-falsche-headline-struktur.png" alt="Vorsicht bei Verwendung von Elementor Templates - Immer auf die richtige Überschriften-Struktur überprüfen" width="1930" height="1268" /><figcaption id="caption-attachment-6355" class="wp-caption-text">Vorsicht bei Verwendung von Elementor Templates - Immer die Überschriften-Struktur überprüfen!</figcaption></figure>
<div class="wpc-tipp"><h4>WPC Tipp: Wie du die Überschriften-Struktur einfach überprüfen kannst?</h4><p>Nachdem du deine Webseite fertiggestellt hast, kannst du die Überschriften-Hierarchie mit der kostenlosen <a href="https://chrispederick.com/work/web-developer/" target="_blank" rel="noopener">Browser-Erweiterung "Webdeveloper" von Chris Pederick</a> überprüfen.</p></div>
<h3>SEO Tipp Nr. 2 - Richtige Kennzeichnung der Links in WordPress & Elementor</h3>
Es gibt verschiedene Möglichkeiten, die Links auf deiner Website zu kennzeichnen.
<strong>Interne Links</strong>
Bei den internen Links auf einer Website gibt es eigentlich nicht viel zu beachten. Aus meiner Sicht wäre es empfehlenswert, auch die internen Links in einem neuen Tab aufgehen zu lassen. Auf diese Weise könnten deine Website Besucher zu der ursprünglichen Seite zurückkehren und ihre Lektüre/Recherche fortsetzen. Denn du weißt ja, je länger deine Besucher auf deiner Seite verweilen, desto positiver wirkt sich das auf das Suchmaschinen-Ranking deiner Website aus.
<strong>Externe Links</strong>
Bei den externen Links solltest du dir die Frage stellen, ob du der verlinkten Zielseite "ein wenig Liebe" schenken möchtest. Falls das nicht der Fall ist, wäre es besser, die externen Links als <strong>nofollow</strong> zu markieren. Der nofollow-HTML Tag sagt den Suchmaschinen, dass sie dem externen Link nicht folgen sollen.
<strong>Affiliate Links</strong>
Verwendest du Affiliate Links auf deiner Website? Dann solltest du zusätzlich zu dem nofollow-Attribut das Attribut <strong>rel="sponsored"</strong> verwenden. Was zunächst nach einer freundlichen Bitte von Google aussieht...
<blockquote>Wir bitten Websiteinhaber, die an Affiliate-Programmen teilnehmen, diese Links mit rel="sponsored" zu kennzeichnen, unabhängig davon, ob sie manuell oder dynamisch erstellt wurden.</blockquote>
...heißt es im weiteren Verlauf des <a href="https://developers.google.com/search/blog/2021/07/link-tagging-and-link-spam-update" target="_blank" rel="noopener">Google Blog-Artikels</a>:
<blockquote>Im Rahmen unserer kontinuierlichen Bestrebungen, das Ranking für produktbezogene Suchanfragen zu verbessern und qualitativ hochwertige Inhalte zu belohnen, können wir <strong>manuelle Maßnahmen ergreifen</strong>, <strong>wenn</strong> wir feststellen, dass <strong>Websites Affiliate-Links nicht angemessen markieren</strong>.</blockquote>
Das klingt für mich dann doch nach mehr als nur eine Bitte, denn es besteht das Risiko, dass die nicht richtige Kennzeichnung der Links zu Ranking-Nachteilen führen könnte.
<strong>Nofollow und sponsored Links in Elementor einstellen</strong>
Während in Elementor die Option für die nofollow Links mit einem der letzten Updates integriert wurde, fehlt von der Checkbox für die sponsored Links (und auch für die User Generated Content - ugc Links) immer noch jede Spur. Für deine Affiliate Links in Elementor kannst du dennoch das sponsored Attribut richtig setzen. Verwende dafür einfach das Attribut <strong>rel|sponsored</strong> wie im folgenden Screenshot zu sehen ist:
<figure id="attachment_6352" aria-describedby="caption-attachment-6352" style="width: 1718px" class="wp-caption alignnone"><img class="size-full wp-image-6352" src="https://wpconsultant.de/wp-content/uploads/2021/12/elementor-custom-link-attribute-definieren.png" alt="Elementor Custom Link Attribute - Link mit sponsored Attribut markieren in Elementor" width="1718" height="1228" /><figcaption id="caption-attachment-6352" class="wp-caption-text">Elementor Custom Link Attribute - Link mit sponsored Attribut kennzeichnen in Elementor</figcaption></figure>
Und für den Fall, dass du das oben angesprochene SEO Plugin Rank Math verwendest, kannst du die Link Attribute nofollow und sponsored sehr einfach setzen, denn das Plugin fügt die notwendigen Checkboxen beim Bearbeiten der Links hinzu:
<figure id="attachment_6415" aria-describedby="caption-attachment-6415" style="width: 2728px" class="wp-caption alignnone"><img class="size-full wp-image-6415" src="https://wpconsultant.de/wp-content/uploads/2021/12/link-attribute-sponsored-nofollow-mit-rank-math.png" alt="nofollow und sponsored Link Attribute einfach setzen mit dem SEO Plugin Rank Math" width="2728" height="1308" /><figcaption id="caption-attachment-6415" class="wp-caption-text">nofollow und sponsored Link Attribute einfach setzen mit dem SEO Plugin Rank Math</figcaption></figure>
Das gleiche gilt übrigens auch für das Elementor Widget <strong>Text Editor</strong>. Mit dem Plugin Rank Math werden dir die nofollow und sponsored Attribute im Elementor Editor beim Text Editor Widget angezeigt. Leider fehlt diese Funktion bei Yoast SEO. Ein kleiner Vorteil also, der für die Rank Math Elementor Integration spricht.
<h3>SEO Tipp Nr. 3 - Elementor Widgets für bessere User Experience</h3>
<strong>Was versteht man unter User Experience im Webdesign und was ist der Unterschied zu User Engagement?</strong>
User Experience oder kurz UX (auf Deutsch Nutzererfahrung oder Nutzererlebnis) bezeichnet das Gesamterlebnis eines Anwenders im Bezug auf eine Website. Damit eine Website eine tolle Nutzererfahrung bietet, muss sie nützlich (hochwertiger Content), benutzerfreundlich (Usability) und ästhetisch ansprechend (tolles Design) sein. Wenn diese Bedingungen erfüllt sind, hat das meistens ein hohes User Engagement zur Folge, was allgemein zu einer positiven Nutzererfahrung führt.
<strong>Man kann also sagen:</strong>
<ul>
<li>Je höher der Nutzen, den die Seite dem Anwender bietet,</li>
<li>Je einfacher die Seite von dem Anwender bedient werden kann,</li>
<li>Je ansprechender das Design ist und</li>
<li>Je stärker die Interaktion des Anwenders mit der Seite ist</li>
</ul>
<strong>...desto positiver ist auch die Nutzererfahrung.</strong>
Den Nutzen kannst du durch hochwertigen Content bzw. mit dem bestmöglichen Match zwischen deinem Content und dem <strong>User Intent</strong> (Absicht des Suchenden) bereitstellen. Beim erstklassigen Design und der Benutzerfreundlichkeit deiner Website kann dir Elementor helfen.
Hast du z. B. auf deiner Website viele Inhalte, die nicht alle in die Haupt-Navigation im Header passen? Denke auch an die 7 +/-2 Regel, die besagt, dass dein Hauptmenü mind. 5 und max. 9 Elemente beinhalten sollte. Dann könnte eine zusätzliche Navigation auf den Unterseiten den Besuchern eine bessere Orientierung bieten und dazu führen, dass die Nutzererfahrung verbessert wird, sie damit länger auf deiner Seite verweilen und weitere Seiten besuchen. Elementor bietet dir dafür folgende Möglichkeiten:
<strong>Table of Contents Widget</strong>
Rechts in der Seitenleiste (in der Desktop-Ansicht) siehst du das Inhaltsverzeichnis dieses Artikels. Du kannst direkt zu dem Absatz springen, der dich interessiert oder zurückspringen, wenn du nochmal etwas nachlesen möchtest.
Das Elementor Widget <a href="https://trk.elementor.com/widget-table-of-content" target="_blank" rel="noopener">Table of Contents</a>* kannst du aber auch für normale Seiten verwenden (nicht nur für Beiträge), um deinen Besuchern eine bessere Benutzer-Erfahrung zu bieten.
<strong>One Pager Menu</strong>
Ein One Pager Menü sorgt ebenfalls für eine bessere User-Erfahrung und bringt im besten Fall Ranking-Vorteile mit sich, weil sich die "time on site" verlängert. Du kannst so eine Navigation für einen One Pager in Elementor einfach umsetzen, indem du dem jeweiligen Abschnitt unter <strong>Erweitert > CSS ID</strong> eine ID (ohne das #-Zeichen) und dem Element, welches angeklickt wird die gleiche ID (mit dem #-Zeichen) vergibst.
<figure id="attachment_6363" aria-describedby="caption-attachment-6363" style="width: 1280px" class="wp-caption alignnone"><img class="size-full wp-image-6363" src="https://wpconsultant.de/wp-content/uploads/2021/12/one-pager-menu-navigation-bessere-usability.png" alt="One Pager Menü für bessere Navigation und eine positive User Experience" width="1280" height="780" /><figcaption id="caption-attachment-6363" class="wp-caption-text">Es muss nicht immer entweder/oder sein. Zusätzlich zum Hauptmenü kann ein One Pager Menü zu einer besseren Navigation und einer positiven User Experience führen</figcaption></figure>
<strong>Zusatz-Tipp zum One Pager Menu: Nicht das Elementor Widget Menu Anchor verwenden</strong>
Im Sinne der Performance solltest du bei einem One Pager Menü nicht das <strong>Widget Menu Anchor</strong> verwenden. In diesem Video erkläre ich, warum das keine gute Idee ist: <a href="https://www.youtube.com/watch?v=Ifdqi6HhTT4&t=1200s" target="_blank" rel="noopener">Warum du das Elementor Widget Menu Anchor besser NICHT verwenden solltest</a>. Weitere Performance Tipps zu Elementor findest du weiter unten.
<strong>Breadcrumbs</strong>
Die Brotkrümmel-Navigation (Breadcrumbs) ist ein beliebtes Mittel im Webdesign und hilft den Besuchern besser durch die Website-Inhalte zu navigieren. Außerdem helfen die Breadcrumbs durch den Einsatz von strukturierten Daten auch den Suchmaschinen deinen Web-Content besser zu indexieren. Du erreichst damit also nicht nur eine bessere User Experience (UX) sondern auch SEO-Vorteile, wenn z. B. deine Brotkrümmel-Navigation in den Suchergebnissen erscheint und diese zu einer höheren Klickrate führt.
<a href="https://trk.elementor.com/breadcrumbs" target="_blank" rel="noopener">Das Breadcrumbs Widget</a>* ist ein Teil von Elementor Pro und ermöglicht dir, eine einfach Integration des Brotkrümmel-Menüs auf deiner Website. Allerdings funktioniert das Widget nur mit den beiden zuvor erwähnten SEO-Plugins, Yoast SEO und Rank Math, die eine Elementor-Integration anbieten. Solltest du SEOPress verwenden, kannst du mit dem Elementor Addon <a href="https://powerpackelements.com/elementor-widgets/breadcrumbs/ref/180/" target="_blank" rel="noopener">PowerPack Pro die Breadcrumbs</a>* über die beliebte Elementor Oberfläche bearbeiten. PowerPack Pro funktioniert ebenfalls mit Rank Math und Yoast SEO, für den Fall, dass du dieses Addon bereits besitzt aber kein Elementor Pro User bist.
<figure id="attachment_6364" aria-describedby="caption-attachment-6364" style="width: 1644px" class="wp-caption alignnone"><img class="size-full wp-image-6364" src="https://wpconsultant.de/wp-content/uploads/2021/12/elementor-seo-tipp-breadcrumbs-bessere-user-experience.png" alt="Breadcrumbs in Elementor mit Rank Math Integration für bessere User Experience" width="1644" height="1006" /><figcaption id="caption-attachment-6364" class="wp-caption-text">Breadcrumbs in Elementor mit der Rank Math Integration für bessere User Experience</figcaption></figure>
Das Engagement der User ist zwar ein Teil der gesamten User Experience, genauso kann sich aber eine angenehme Nutzererfahrung positiv auf die Engagement-Rate auswirken. Welche Elementor Tools dir bei User Engagement helfen, erfährst du im nächsten SEO Tipp.
<h3>SEO Tipp Nr. 4 - Elementor Widgets für mehr User Engagement</h3>
Wie du der folgenden <a href="https://www.uptimiser.com.hk/seo-google-ranking-factors/" target="_blank" rel="noopener">Grafik von Uptimiser</a> entnehmen kannst, ist das User Engagement gemeinsam mit dem Content das wichtigste Ranking Signal für Google:
<figure id="attachment_6317" aria-describedby="caption-attachment-6317" style="width: 1556px" class="wp-caption alignnone"><img class="wp-image-6317 size-full" src="https://wpconsultant.de/wp-content/uploads/2021/12/google-ranking-signale.png" alt="Ranking Signale von Google" width="1556" height="888" /><figcaption id="caption-attachment-6317" class="wp-caption-text">Die wichtigsten Ranking Signale für Google (Quelle: <a href="https://www.uptimiser.com.hk/seo-google-ranking-factors/" target="_blank" rel="noopener">Uptimiser</a>)</figcaption></figure>
Zum Glück bietet Elementor einige Features, um das User Engagement zu steigern:
<strong>Progress Tracker Widget</strong>
Das <strong>Widget Progress Tracker</strong> ist noch ganz frisch (mit der Version 3.5 eingeführt) und schon auf dem WPC Blog implementiert. :-) Es zeigt deinen Besuchern den Fortschritt an, wie weit sie bereits auf einer Seite heruntergescrollt sind und ermutigt sie die Seite bzw. den Artikel bis zum Ende zu lesen.
Falls du gerne das Engagement deiner User mit weiteren Elementor Widgets erhöhen möchtest, empfehle ich dir unsere Partner-Seite <a href="https://el-mentor.com" target="_blank" rel="noopener">el-mentor.com</a>. Dort kannst du mit dem <a href="https://el-mentor.com/find-elementor-widgets/" target="_blank" rel="noopener">Elementor Widget Finder</a> die Elementor Funktionen nach Kategorien, Inhaltsformaten und Website Typen filtern. Wähle einfach bei der Kategorie "Engagement" aus und schon werden dir alle Widgets angezeigt, die dir helfen, das User Engagement auf deiner Seite zu erhöhen:
<figure id="attachment_6347" aria-describedby="caption-attachment-6347" style="width: 2942px" class="wp-caption alignnone"><a href="https://el-mentor.com/find-elementor-widgets/"><img class="size-full wp-image-6347" src="https://wpconsultant.de/wp-content/uploads/2021/12/elementor-widgets-for-user-engagement-widget-finder.png" alt="Finde Elementor Widgets für mehr User Engagement mit dem Widget Finder von el-mentor.com" width="2942" height="2250" /></a><figcaption id="caption-attachment-6347" class="wp-caption-text">Finde Elementor Widgets für mehr User Engagement mit dem Widget Finder von el-mentor.com</figcaption></figure>
Übrigens, auf el-mentor.com findest du auch heraus, welche Elementor Addons Premium Widgets wie z. B. den <a href="https://el-mentor.com/elementor-widgets/progress-tracker/" target="_blank" rel="noopener">Progress Tracker</a> kostenlos anbieten.
<h3>SEO Tipp Nr. 5 - 404 Seite optimieren mit Elementor</h3>
Die Optimierung der 404 Fehlerseite wird bei der Erstellung einer Website oft vernachlässigt. <a href="https://links.wpconsultant.de/elementor-pro-new" target="_blank" rel="noopener">Elementor Pro</a>* bietet zahlreiche 404 Design-Vorlagen an, die mit tollem Design, einer Suchfunktion und den Links zu den wichtigsten Seiten dafür sorgen, dass die Besucher ihre Reise auf der Website fortsetzen.
<figure id="attachment_6293" aria-describedby="caption-attachment-6293" style="width: 1280px" class="wp-caption alignnone"><img class="wp-image-6293 size-full" src="https://wpconsultant.de/wp-content/uploads/2021/12/elementor-seo-tipp-404-seite-erstellen-und-absprungrate-reduzieren.png" alt="Elementor SEO Tipp - 404 Seite erstellen und Absprungrate reduzieren" width="1280" height="746" /><figcaption id="caption-attachment-6293" class="wp-caption-text">Elementor SEO Tipp - 404 Seite erstellen und Absprungrate reduzieren</figcaption></figure>
<strong>Zusatz-Tipp:</strong> Benutze das <strong>Widget Posts</strong> (Beiträge), um die neuesten oder die beliebtesten Beiträge auf der 404 Seite anzuzeigen. Überlege dir, welche weiteren Elemente dazu führen könnten, die Besucher auf deiner Website zu halten. Ich z. B. habe auf meiner 404 Seite neben den beliebtesten Beiträgen (sortiert nach Anzahl der Kommentare) auch meinen <a href="https://wpconsultant.de/wordpress-quiz-teste-dein-wordpress-wissen/" target="_blank" rel="noopener">WordPress Quiz</a> verlinkt. Als Beispiel kannst du gerne diese nicht existierende URL <em>wpconsultant.de/abc</em> in die Browserzeile eingeben und dir die 404-Seite von WPC ansehen. ;-)
<h3>SEO Tipp Nr. 6 - Mobile Optimierung in Elementor</h3>
Es gibt drei verschiedene Möglichkeiten, die mobile Optimierung einer Website umzusetzen: <strong>Responsive Design</strong>, <strong>Dynamische Bereitstellung (engl. Dynamic Serving)</strong> oder <strong>zwei unterschiedliche URLs</strong>. <a href="https://developers.google.com/search/mobile-sites/mobile-seo" target="_blank" rel="noopener">Google selbst empfiehlt das Responsive Design</a>, wobei die anderen beiden Formen der mobilen Optimierung offiziell keine Ranking-Nachteile mit sich bringen. Allerdings ist bei den beiden letzteren Varianten die Wahrscheinlichkeit höher, Fehler zu begehen. Während bei der Lösung mit der separaten URL das Risiko von Duplicated Content besteht, kann es beim Dynamic Serving zu einer falschen Detektion des User Agents kommen. Beide Fälle könnten indirekt negative Auswirkungen auf die Positionierung in den Suchergebnissen haben.
<strong>Zusatz-Tipp:</strong> Wichtig für alle 3 Arten der mobilen Optimierung! Stelle sicher, dass sowohl der Googlebot als auch der Googlebot-Mobile Zugang zu allen "Assets" (CSS, JS, Bilder) deiner Seite hat.
<strong>Responsive Webdesign mit Elementor</strong>
Beim Responsive Webdesign liefert der Server unabhängig vom verwendeten Endgerät immer den gleichen HTML-Code aus. Seit der Elementor Version 3.4 kannst du zusätzlich zu den beiden Breakpoints <strong>tablet</strong> und <strong>mobile</strong> unter <strong>Elementor > Einstellungen > Experiments</strong> optional noch 4 weitere Breakpoints hinzufügen. Diese Funktion befindet sich derzeit noch in Beta, deswegen ist es ratsam, sie nur auf neuen Websites und Test-Seiten auszuprobieren.
<strong>Dynamische Bereitstellung mit Elementor</strong>
Bei der dynamischen Bereitstellung sendet der Server unter derselben URL unterschiedlichen HTML- und CSS-Code. Den HTML-Output für verschiedene Bildschirmgrößen kannst du als Elementor User einfach über die Einstellung <strong>Erweitert > Responsiv</strong> beeinflussen.
<figure id="attachment_6367" aria-describedby="caption-attachment-6367" style="width: 2172px" class="wp-caption alignnone"><img class="size-full wp-image-6367" src="https://wpconsultant.de/wp-content/uploads/2021/12/elementor-responsive-design-dynamic-serving.png" alt="Elementor Responsive Design & Dynamic Serving" width="2172" height="1216" /><figcaption id="caption-attachment-6367" class="wp-caption-text">Responsive Design & Dynamic Serving in Elementor</figcaption></figure>
Mit diesem <a href="https://search.google.com/test/mobile-friendly" target="_blank" rel="noopener">Google Tool</a> kannst du deine Seite auf die mobile Optimierung testen.
<h3>SEO Tipp Nr. 7 - Elementor Performance Optimierung</h3>
Die Websitegeschwindigkeit ist schon seit <a href="https://developers.google.com/search/blog/2010/04/using-site-speed-in-web-search-ranking" target="_blank" rel="noopener">2010 ein Ranking-Faktor</a> bei Google. Seit Juli 2018 kam die <a href="https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search" target="_blank" rel="noopener">Seitengeschwindigkeit für die mobile Suche als Ranking-Faktor</a> hinzu. Und spätestens mit dem "Page Experience" Update von Google Ende 2020, bei dem auch die Page Speed eine wichtige Rolle spielt, wurde klar wie wichtig kurze Ladezeiten einer Website für den SEO Erfolg sind. Wie anfangs erwähnt, macht die Anwendung eines Page Builders von Haus aus deine Seite langsamer. Das bedeutet jedoch nicht, dass du den Verlust der Ladezeit einfach so hinnehmen musst.
<strong>Hier sind ein paar Elementor Performance Optimierungs-Tipps:</strong>
<ul>
<li><strong>Keine leeren Spalten</strong> als Abstand benutzen, sondern lieber Margin oder Padding verwenden</li>
<li>Nicht das <strong>Widget</strong> <strong>Abstand</strong> verwenden, sondern lieber die horizontale und vertikale Positionierung der Spalten verwenden</li>
<li>Nutze <strong>Positionierung Inline oder Individuell</strong> anstatt unnötige Spalten oder innere Abschnitte (weniger Wrapper-Elemente)</li>
<li>Aktiviere <strong>Optimierte DOM Ausgabe </strong>unter <strong>Elementor > Einstellungen > Experimets</strong> (bei älternen Websites mit Vorsicht verwenden und vorher ein Backup erstellen)</li>
<li>Die Performance und die Stabilität deiner Website erhöhen und diese <a href="https://wpconsultant.de/20-wordpress-plugins-mit-elementor-ersetzen/" target="_blank" rel="noopener">20 WordPress Plugins mit Elementor ersetzen</a></li>
</ul>
Hier ist ein gutes Video Tutorial über <a href="https://www.youtube.com/watch?v=vBAKGupM0co" target="_blank" rel="noopener">Layout Optimization Best Practices</a> in Elementor.
Auf einen weiteren Performance Tipp bin ich bereits in meinem Artikel <a href="https://wpconsultant.de/elementor-vs-gutenberg/" target="_blank" rel="noopener">Elementor vs. Gutenberg - Beiträge lieber NICHT mit Elementor erstellen</a> eingegangen und habe darauf hingewiesen, warum es besser wäre, den Inhalt der Beiträge mit dem Standard WordPress Editor zu schreiben.
<div data-elementor-type="section" data-elementor-id="5957" class="elementor elementor-5957" data-elementor-post-type="elementor_library">
<section class="elementor-section elementor-top-section elementor-element elementor-element-06fd331 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="06fd331" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f327787" data-id="f327787" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-afc7901 elementor-widget elementor-widget-jet-listing-grid" data-id="afc7901" data-element_type="widget" data-settings="{"columns":"1"}" data-widget_type="jet-listing-grid.default">
<div class="elementor-widget-container">
<div class="jet-listing-grid jet-listing"><div class="jet-listing-grid__items grid-col-desk-1 grid-col-tablet-1 grid-col-mobile-1 jet-listing-grid--4984" data-queried-id="7212|WP_Post" data-nav="{"enabled":false,"type":null,"more_el":null,"query":[],"widget_settings":{"lisitng_id":4984,"posts_num":1,"columns":1,"columns_tablet":1,"columns_mobile":1,"is_archive_template":"","post_status":["publish"],"use_random_posts_num":"","max_posts_num":9,"not_found_message":"No data was found","is_masonry":false,"equal_columns_height":"","use_load_more":"","load_more_id":"","load_more_type":"click","load_more_offset":{"unit":"px","size":0,"sizes":[]},"use_custom_post_types":"","custom_post_types":[],"hide_widget_if":"","carousel_enabled":"","slides_to_scroll":"1","arrows":"true","arrow_icon":"fa fa-angle-left","dots":"","autoplay":"true","pause_on_hover":"true","autoplay_speed":5000,"infinite":"true","center_mode":"","effect":"slide","speed":500,"inject_alternative_items":"","injection_items":[],"scroll_slider_enabled":"","scroll_slider_on":["desktop","tablet","mobile"],"custom_query":false,"custom_query_id":"","_element_id":""}}" data-page="1" data-pages="93" data-listing-source="posts" data-listing-id="4984" data-query-id=""><div class="jet-listing-grid__item jet-listing-dynamic-post-7212" data-post-id="7212" > <div data-elementor-type="jet-listing-items" data-elementor-id="4984" class="elementor elementor-4984" data-elementor-post-type="jet-engine">
<section class="elementor-section elementor-top-section elementor-element elementor-element-352906d elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="352906d" data-element_type="section" data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-83f5603" data-id="83f5603" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-19e607b elementor-widget elementor-widget-jet-listing-dynamic-image" data-id="19e607b" data-element_type="widget" data-widget_type="jet-listing-dynamic-image.default">
<div class="elementor-widget-container">
<div class="jet-listing jet-listing-dynamic-image"><a href="https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/" class="jet-listing-dynamic-image__link"><img width="1920" height="1080" src="https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen.jpeg" class="jet-listing-dynamic-image__img attachment-full size-full wp-post-image" alt="WordPress Website mit AI und Elementor erstellen 2024" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen.jpeg 1920w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-300x169.jpeg 300w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1024x576.jpeg 1024w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-768x432.jpeg 768w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1536x864.jpeg 1536w, https://wpconsultant.de/wp-content/uploads/2023/11/Wordpress-Website-mit-AI-und-Elementor-erstellen-1320x743.jpeg 1320w" sizes="(max-width: 1920px) 100vw, 1920px" loading="eager" /></a></div> </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-5c4cba7" data-id="5c4cba7" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-6dd48fc elementor-widget elementor-widget-jet-listing-dynamic-field" data-id="6dd48fc" data-element_type="widget" data-widget_type="jet-listing-dynamic-field.default">
<div class="elementor-widget-container">
<div class="jet-listing jet-listing-dynamic-field display-inline"><div class="jet-listing-dynamic-field__inline-wrap"><h4 class="jet-listing-dynamic-field__content">WordPress Website mit Elementor und AI erstellen (ChatGPT & Midjourney)</h4></div></div> </div>
</div>
<div class="elementor-element elementor-element-9ee4dc6 elementor-widget elementor-widget-button" data-id="9ee4dc6" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-lg" href="https://wpconsultant.de/wordpress-website-erstellen-elementor-ai/">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Zum Beitrag</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div></div></div> </div>
</div>
</div>
</div>
</div>
</section>
</div>
<h2>Fazit</h2>
Ich hoffe, diese SEO Tipps für Elementor helfen dir, auch über die Verwendung eines WordPress SEO Plugins hinaus, deine Website für die Suchmaschinen zu optimieren und ein paar typische SEO Fehler zu vermeiden. Generell solltest du dir immer die Frage stellen, mit welchen (Elementor) Funktionen und Features du die Besucher deiner Seite möglichst lange "beschäftigen" und zu einer Interaktion animieren kannst.
Überlege dir außerdem, an welchen Stellen du das Design / den Aufbau deiner Seite schlanker gestalten kannst. Auf diese Weise erhältst du eine schnelle Website mit hohem Engagement. Wenn du dann noch qualitativ hochwertigen Content lieferst, sind die vordersten Plätze in den Suchergebnissen für deine Website reserviert. ;-)
<p><a href="https://wpconsultant.de/elementor-seo-tipps/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/elementor-seo-tipps/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Website Backup mit Elementor erstellen</title>
<link>https://wpconsultant.de/website-backup-mit-elementor/</link>
<comments>https://wpconsultant.de/website-backup-mit-elementor/#respond</comments>
<dc:creator><![CDATA[Danijel]]></dc:creator>
<pubDate>Sat, 20 Nov 2021 22:03:36 +0000</pubDate>
<category><![CDATA[Elementor Tipps]]></category>
<category><![CDATA[backup]]></category>
<category><![CDATA[elementor]]></category>
<category><![CDATA[elementor templates]]></category>
<category><![CDATA[managed wordpress hosting]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=5175</guid>
<description><![CDATA[<p><img width="1280" height="626" src="https://wpconsultant.de/wp-content/uploads/2021/11/elementor-als-backup-plugin-migration.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Elementor als Backup Plugin und für Migration" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2021/11/elementor-als-backup-plugin-migration.png 1280w, https://wpconsultant.de/wp-content/uploads/2021/11/elementor-als-backup-plugin-migration-300x147.png 300w, https://wpconsultant.de/wp-content/uploads/2021/11/elementor-als-backup-plugin-migration-1024x501.png 1024w, https://wpconsultant.de/wp-content/uploads/2021/11/elementor-als-backup-plugin-migration-768x376.png 768w, https://wpconsultant.de/wp-content/uploads/2021/11/elementor-als-backup-plugin-migration-600x293.png 600w" sizes="(max-width: 1280px) 100vw, 1280px" /></p>Eignet sich Elementor dafür, ein Backup von der eigenen Website zu erstellen? Diese Frage habe ich mir gestellt als ich den Artikel <a href="https://wpconsultant.de/20-wordpress-plugins-mit-elementor-ersetzen/" target="_blank" rel="noopener">20 Plugins, die Elementor ersetzen kann</a> geschrieben habe. In diesem Beitrag werden wir versuchen, diese Frage zu beantworten.
<h2>Kann man mit Elementor ein Website Backup erstellen?</h2>
Nehmen wir mal an, du hast eine kleine WordPress Website mit wenigen Unterseiten und du hast die kompletten Inhalte mit Elementor und Elementor Pro erstellt. Nun erstellst du von jeder Seite/Beitrag ein Template und lädst die kompletten Templates in einer zip-Datei auf deine Festplatte/deinen Computer herunter. Den Footer und Header hast du ebenfalls mit Elementor Pro erstellt. Diese Website-Elemente sind bereits als Template vorhanden und deshalb in der zip-Datei enthalten. Dasselbe gilt für Single Post Templates, falls du diese Art von Templates für deine Beiträge oder Custom Post Types verwenden hast. Damit hast du ein Backup von dem gesamten Inhalt deiner Website erstellt und lokal gespeichert.
<div class="vorsicht"><h4>Vorsicht! Das Backup ist nicht komplett!</h4><p>In deinem Backup fehlen die folgenden Dateien und Einstellungen:
<ul>
<li>Alle WordPress Dateien</li>
<li>Die Theme Einstellungen (z. B. im Customizer)</li>
<li>Menüs und Website-Einstellungen wie Logo / Name, Permalinks etc.</li>
<li>Alle Plugins</p></div></li>
</ul>
Das bedeutet, dass im Notfall, sollte deine Seite gehackt worden sein oder, aus welchen Grund auch immer, nicht mehr funktionieren, du die WordPress Software und die Plugins neu installieren und die Menüs neu erstellen musst. Das gleiche Vorgehen kannst du wählen, wenn du deine Website auf einen anderen Server / zu einem anderen Hoster umziehen möchtest. Dein Backup in Form der zip-Datei kannst du anschließend verwenden, um auf einer anderen WordPress Seite die gleichen Inhalte zu importieren oder einen bestimmten alten Stand deiner Website wiederherzustellen.
<div class="wpc-tipp"><h4>WPC Tipp: </h4><p>Solltest du die Elementor Inhalte auf einer anderen WordPress Website verwenden wollen, achte bitte darauf, dass du vorher alle erforderlichen Plugins installiert und aktiviert hast. Auch alle <a href="https://wpconsultant.de/besten-elementor-widgets-addons-kostenlos/" target="_blank" rel="noopener noreferrer">Elementor Addons</a>, die du für die Erstellung der Inhalte, verwendet hattest. Ansonsten werden die entsprechenden Abschnitte nicht richtig importiert.</p></div>
<h2>Kann Elementor Backup- und Migrations-Plugins ersetzen?</h2>
Die kurze Antwort ist: Nur bedingt.
Ein Backup mit Elementor zu erstellen, ist auf jeden Fall besser als gar keine Backups von deiner Seite anzulegen. Denn wie bereits erwähnt, sicherst du damit die kompletten Inhalte deiner Website. Ein vollständiger Ersatz für die WordPress Backup- und Migrations-Plugins ist Elementor jedoch nicht. Zum einen kann Elementor nicht alle Dateien sichern und zum anderen verfügen die WordPress Backup-Plugins wie <a href="https://de.wordpress.org/plugins/updraftplus/" target="_blank" rel="noopener">UpdraftPlus</a>, <a href="https://wordpress.org/plugins/duplicator/" target="_blank" rel="noopener">Duplicator</a> oder <a href="https://wordpress.org/plugins/backwpup/" target="_blank" rel="noopener">BackWPUp</a> über mächtige Werkzeuge wie z. B. automatischen Sicherungsplan, Remote Speicherungsort(e) u.v.m.
Auch der Umzug einer Website fällt z. B. mit dem Plugin BackWPUp viel einfacher aus, weil man hier nur eine einzige zip-Datei auf dem neuen Server hochladen und entpacken muss, ohne die WordPress Software und die Plugins neu zu installieren.
<h3>Elementor vs. UpdraftPlus</h3>
Die folgende Tabelle zeigt nochmal die Unterschiede zwischen Elementor als Backup-Plugin und einem vollwertigen Backup-Plugin wie z. B. UpdraftPlus:
<table>
<tbody>
<tr>
<td style="width: 377px;"><strong>Elementor</strong></td>
<td style="width: 377px;"><strong>UpdraftPlus</strong></td>
</tr>
<tr>
<td style="width: 377px;">Backup nur von Elementor Seiten/Elementen</td>
<td style="width: 377px;">Komplettes Backup inkl. WordPress Dateien, Plugins etc.</td>
</tr>
<tr>
<td style="width: 377px;">Nur manuelle Backups</td>
<td style="width: 377px;">Automatische Backups nach einem definierten Sicherungsplan</td>
</tr>
<tr>
<td style="width: 377px;">Manuelle Sicherung auf den gewünschten Speicherort</td>
<td style="width: 377px;">Automatische Sicherung auf den gewünschten (Remote-)Speicherort</td>
</tr>
<tr>
<td style="width: 377px;">Die Backups vor den Updates können leicht vergessen werden</td>
<td style="width: 377px;">Automatische Backups immer vor den Updates durchführen (<a href="https://updraftplus.com/?afref=193" target="_blank" rel="noopener">Pro Version</a>*)</td>
</tr>
<tr>
<td style="width: 377px;">Manuelle Backups nach jeder Änderung wiederholen</td>
<td style="width: 377px;">Inkrementelle Backups (es werden nur die Änderungen seit dem letzten Backup gesichert)</td>
</tr>
</tbody>
</table>
<h2>WordPress Backups vom Hosting Anbieter</h2>
Bei der Beantwortung der Frage, ob die Elementor Backups ausreichend sind und man sich die Backup-Plugins evtl. sparen kann, lohnt sich auch ein Blick auf den eigenen Hosting Anbieter. Viele Hoster erstellen ebenfalls Backups von den Websites ihrer Kunden auf die man im Notfall zurückgreifen kann. Bei Billiganbietern werden solche Backups seltener erstellt und beinhalten möglicherweise nicht die komplette Konfiguration der Website. Hat man sich stattdessen für einen guten Hosting Anbieter entschieden, könnten diese Backups im Zusammenspiel mit gelegentlichen Elementor Backups durchaus ausreichend sein.
Folgender Screenshot zeigt das Beispiel des <a href="https://www.hostpress.de/?aff=36" target="_blank" rel="noopener">Managed WordPress Hoster HostPress</a>* bei dem man mit Hilfe des Backup-Managers die Backups planen und ausgewählte Objekte wiederherstellen kann. Auch inkrementelle tägliche Backups sind möglich!
<figure id="attachment_6153" aria-describedby="caption-attachment-6153" style="width: 2560px" class="wp-caption alignnone"><img class="size-full wp-image-6153" src="https://wpconsultant.de/wp-content/uploads/2021/11/elementor-backups-ausreichend-bei-gutem-hosting-anbieter.png" alt="Elementor Backups ausreichend bei gutem Hosting Anbieter wie z. B. HostPress" width="2560" height="771" /><figcaption id="caption-attachment-6153" class="wp-caption-text">Bei einem starken Hosting Anbieter wie z. B. HostPress können Elementor Backups ausreichend sein</figcaption></figure>
<h3>Managed WordPress Hosting von Elementor</h3>
Mit dem neuen Feature <strong>HOSTED ELEMENTOR WEBSITE</strong> bietet Elementor die Möglichkeit, ein <a href="https://elementor.com/features/hosting/?ref=1569" target="_blank" rel="noopener">Elementor Paket inklusive Hosting</a>* abzuschließen. Ein zusätzlicher Hosting Anbieter ist damit nicht mehr erforderlich (außer vielleicht um sich eine Domain zu registrieren). Hier bietet Elementor u. a. auch eine Export-Funkionalität an, um im Falle eines Umzugs die komplette WordPress Seite inklusive Elementor-Inhalte auf einem anderen Hosting Server umzuziehen. Ich gehe davon aus, dass deshalb in dem Elementor Hosting Paket auch entsprechende Backup-Möglichkeiten verfügbar sind. Ich habe jedoch das Feature noch nicht getestet. Falls du mit dem Hosting von Elementor Erfahrungen hast, wäre es schön, wenn du diese in den Kommentaren unten teilen könntest.
<h2>Fazit</h2>
Elementor kann zwar <a href="https://wpconsultant.de/20-wordpress-plugins-mit-elementor-ersetzen/" target="_blank" rel="noopener">sehr viele WordPress Plugins ersetzen</a>, aber die Backup-Plugins haben auch weiterhin ihre Daseinsberechtigung, denn sie bieten weiterführende Funktionen, die die Backup-Erstellung extrem vereinfachen. Doch wenn du einen starken Hosting Partner hast, der für dich regelmäßig und vollständige Backups erstellt, könnten reine Elementor Backups für den extremen Notfall ausreichen und du könntest auf Backup- und Migrations-Plugins verzichten. Denn du weißt ja, je weniger Plugins auf deine WordPress Seite installiert sind, desto besser!
<p><a href="https://wpconsultant.de/website-backup-mit-elementor/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/website-backup-mit-elementor/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Scroll to Top Button in Elementor erstellen (Free & Pro)</title>
<link>https://wpconsultant.de/scroll-to-top-button-elementor-free-pro/</link>
<comments>https://wpconsultant.de/scroll-to-top-button-elementor-free-pro/#comments</comments>
<dc:creator><![CDATA[Danijel]]></dc:creator>
<pubDate>Fri, 30 Jul 2021 20:04:33 +0000</pubDate>
<category><![CDATA[Elementor Tipps]]></category>
<category><![CDATA[Website Performance]]></category>
<category><![CDATA[elementor]]></category>
<guid isPermaLink="false">https://wpconsultant.de/?p=6089</guid>
<description><![CDATA[<p><img width="1280" height="626" src="https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-elementor.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Scroll to Top in Elementor erstellen" decoding="async" srcset="https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-elementor.png 1280w, https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-elementor-300x147.png 300w, https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-elementor-1024x501.png 1024w, https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-elementor-768x376.png 768w, https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-elementor-600x293.png 600w" sizes="(max-width: 1280px) 100vw, 1280px" /></p>Der Scroll to Top Button gehört zur den beliebten Elementen auf einer modernen Website. Zusätzlich erhöht er die Usability, da die Besucher durch einen Klick schnell wieder an den Seitenanfang gelangen, ohne lange nach oben scrollen zu müssen. In diesem Beitrag erfährst du, wie du den Back to Top Button einfach in der kostenlosen und der Pro Version von Elementor implementieren kannst.
<h2>Scroll to Top in den Theme Optionen</h2>
Bevor du anfängst den Scroll to Top Button in Elementor zu integrieren, solltest du einen Blick auf die Einstellungen deines Themes werfen. Bei den meisten modernen Themes befinden sich die Einstellungsoptionen im Customizer. Die Themes <a href="https://wordpress.org/themes/kadence/" target="_blank" rel="noopener">Kadence</a> und <a href="https://wordpress.org/themes/oceanwp/" target="_blank" rel="noopener">OceanWP</a> bieten z. B. die Scroll to Top Funktion bereits in der kostenlosen Version an. Bei den ebenso beliebten WordPress Themes <a href="https://wordpress.org/themes/astra/" target="_blank" rel="noopener">Astra</a> und <a href="https://wordpress.org/themes/neve/" target="_blank" rel="noopener">Neve</a> kann die Back to Top Funktionalität über den integrierten Footer Builder realisiert werden, wenn auch nicht so elegant wie mit OceanWP und Kadence.
<strong>Scroll to Top bei Kadence und OceanWP im Video ansehen:</strong>
<a href="https://www.youtube.com/watch?v=Ifdqi6HhTT4&t=134s" target="_blank" rel="noopener">Link zum Video Tutorial Scroll to Top bei Kadence und OceanWP</a>
<div class="wpc-tipp"><h4>WPC Tipp: Bitte kein Plugin für Scroll to Top verwenden</h4><p>Als WordPress User tendiert man schnell dazu für jede noch so kleine Funktion ein Plugin zu verwenden. Je mehr Plugins auf deiner WordPress Seite installiert sind, desto höher ist der Wartungsaufwand und das Sicherheitsrisiko. Hier auf dem Blog findest du einen Beitrag, wie du <a href="https://wpconsultant.de/20-wordpress-plugins-mit-elementor-ersetzen/" target="_blank" rel="noopener">20 Plugins durch Elementor ersetzen</a> kannst. Mit Scroll to Top sind es jetzt schon 21 :-).</p></div>
<h2>Back to Top in Elementor umsetzen</h2>
Am einfachsten ist es sicherlich, wenn du ein <a href="https://elementor.com/pricing/?ref=1569" target="_blank" rel="noopener">Elementor Pro</a>* User bist. Dann musst du lediglich das Scroll to Top Icon (nicht Button :-)) in den Elementor Footer integrieren und die Fußzeile für die gesamte Website aktivieren. Wenn du nur die kostenlose Version von Elementor verwendest, kannst du das Icon auch zu deinem letzten Abschnitt hinzufügen und diesen dann per Copy und Paste oder über Seiten-Templates auf allen Unterseiten kopieren. Das funktioniert jedoch nur, wenn du alle Unterseiten mit Elementor erstellst.
Du kannst jedoch auch ohne die Pro Version das Back to Top Icon in deinem Footer integrieren. Dafür stehen dir kostenlose Elementor Addons zur Verfügung wie z. B. der <a href="https://wordpress.org/plugins/header-footer-elementor/" target="_blank" rel="noopener">Elementor Header & Footer Builder</a> von Brainstorm Force oder andere Premium Addons wie <a href="https://wpastra.com/?bsf=679" target="_blank" rel="noopener">Astra Pro</a>*, <a href="https://wpmet.com/plugin/elementskit/pricing/?rui=312&campaign=WPC" target="_blank" rel="noopener">ElementsKit Pro</a>* oder <a href="https://crocoblock.com/plugins/jetthemecore/?ref=359" target="_blank" rel="noopener">JetThemeCore</a>* von Crocoblock.
<a href="https://www.youtube.com/watch?v=Ifdqi6HhTT4&t=573s" target="_blank" rel="noopener">Link zum Video Tutorial Scroll To Top in Elementor Free</a>
Doch welches Elementor Widget solltest du nun für die "Nach oben"-Funktion verwenden? Das Widget Icon oder das Widget Button?
<h2>Tipps zur Umsetzung eines Scroll to Top Buttons</h2>
Unabhängig davon, ob du die kostenlose oder die Pro Version von Elementor verwendest, um einen Scroll to Top Button zu integrieren, habe ich die folgenden Empfehlungen für dich:
<h3>Icon Widget anstatt Button Widget verwenden</h3>
Um den nach oben Button zu realisieren, kannst du theoretisch entweder das Button Widget (ohne Text) oder das Icon Widget verwenden. Warum es besser ist, das Icon Widget zu nehmen, zeigen die folgenden zwei Screenshots:
<strong>HTML-Struktur des Icon Widgets:</strong>
<figure id="attachment_6092" aria-describedby="caption-attachment-6092" style="width: 2696px" class="wp-caption alignnone"><img class="wp-image-6092 size-full" src="https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-button-icon-widget-DOM-structure.png" alt="Besser ein Icon Widget für Scroll to Top verwenden - schlankere DOM Struktur" width="2696" height="220" /><figcaption id="caption-attachment-6092" class="wp-caption-text">Besser ein Icon Widget für Scroll to Top verwenden - schlankere DOM Struktur</figcaption></figure>
<strong>HTML-Struktur des Button Widgets:</strong>
<figure id="attachment_6093" aria-describedby="caption-attachment-6093" style="width: 2446px" class="wp-caption alignnone"><img class="size-full wp-image-6093" src="https://wpconsultant.de/wp-content/uploads/2021/07/scroll-to-top-button-button-widget-DOM-structure.png" alt="Das Button Widget besser nicht für Scroll to Top verwenden" width="2446" height="278" /><figcaption id="caption-attachment-6093" class="wp-caption-text">Das Button Widget besser nicht für Scroll to Top verwenden - Enthält im Gegensatz zum Icon Widget 2 unnötige HTML-Elemente</figcaption></figure>
Der Screenshot-Vergleich zeigt eine flachere HTML-Struktur für das Icon Widget (5 zu 7 HTML-Elemente). Gerade wenn man keinen Text verwenden möchte, ist das Icon Widget die bessere Wahl für ein Scroll to Top "Button".
Das gilt übrigens nicht nur für den Scroll to Top Button. Immer wenn du ein Icon verwenden möchtest und du keinen Text benötigst, solltest du im Sinne einer schlankeren DOM Struktur lieber ein Icon Widget verwenden.
<strong>DOM Struktur Vergleich zwischen Icon und Button im Video ansehen:</strong>
<a href="https://www.youtube.com/watch?v=Ifdqi6HhTT4&t=636s" target="_blank" rel="noopener">Link zum Video Tutorial Icon vs. Button</a>
<h3>Das Menu Anchor Widget lieber NICHT verwenden</h3>
Viele Elementor User nutzen das Menu Anchor Widget um von einem Bereich zu einem anderen Bereich auf der gleichen Seite zu verlinken. Damit lassen sich nicht nur Back to Top Buttons verknüpfen, sondern auch ein klassisches One Pager Menü, indem man zu den unterschiedlichen Abschnitten auf der Seite verlinkt.
Der folgende Screenshot zeigt jedoch eine unnötig aufgeblähte DOM Struktur bei der Verwendung von Menu Anchor Widgets:
<figure id="attachment_6101" aria-describedby="caption-attachment-6101" style="width: 3420px" class="wp-caption alignnone"><img class="size-full wp-image-6101" src="https://wpconsultant.de/wp-content/uploads/2021/07/DOM-struktur-elementor-widget-menu-anchor-nicht-verwenden.png" alt="Im Sinne einer guten Performance und einer schlangen Website-Architektur solltest du das Menu Anchor Widget lieber nicht verwenden" width="3420" height="704" /><figcaption id="caption-attachment-6101" class="wp-caption-text">Im Sinne einer guten Performance und einer schlanken Website-Architektur solltest du das Menu Anchor Widget lieber nicht verwenden</figcaption></figure>
Wie du dem oberen Screenshot entnehmen kannst, fügt ein einziges Menu Anchor Widget, da es oft in einem eigenen Abschnitt verwendet wird, <strong>9 HTML Ebenen!</strong> zu deiner DOM Struktur hinzu. Besser wäre es dem Abschnitt, zu dem du verlinken möchtest, unter Advanced > CSS ID eine ID zu geben und direkt darauf zu verlinken.
<strong>Menu Anchor Widget im Video ansehen:</strong>
<a href="https://www.youtube.com/watch?v=Ifdqi6HhTT4&t=1200s" target="_blank" rel="noopener">Link zum Video Tutorial Menu Anchor</a>
<h2>Fazit</h2>
Wie so oft in Elementor führen mehrere Wege zu einem funktionierenden Scroll to Top Button. Wie du aber sehen konntest gibt es selbst bei so einer kleinen Funktion einiges zu beachten. Gerade wenn es mehrere Möglichkeiten gibt, ist es wichtig zu hinterfragen, welche aus verschiedenen Gesichtspunkten (Design, Performance etc.) die beste Methode ist. Für mich ist es die Integration in dem Footer, welcher auf der ganzen Website aktiviert ist. Dabei spielt es keine Rolle, ob die Implementierung über das Theme, Elementor Pro oder ein kostenloses Elementor Addon erfolgt.
<p><a href="https://wpconsultant.de/scroll-to-top-button-elementor-free-pro/" rel="nofollow">Quelle</a></p>]]></description>
<wfw:commentRss>https://wpconsultant.de/scroll-to-top-button-elementor-free-pro/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
</channel>
</rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//wpconsultant.de/feed/"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://validator.w3.org/feed/check.cgi?url=http%3A//wpconsultant.de/feed/

Feed Validation Service

Congratulations!

Recommendations

Source: http://wpconsultant.de/feed/