<?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/"
	>

<channel>
	<title>Best of | Nadin Schmidt</title>
	<atom:link href="https://nadinschmidt.com/category/best-of/feed/" rel="self" type="application/rss+xml" />
	<link>https://nadinschmidt.com</link>
	<description>Webseiten &#38; Newsletter</description>
	<lastBuildDate>Tue, 01 Apr 2025 13:23:36 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://nadinschmidt.com/wp-content/uploads/2024/05/cropped-Fav-32x32.webp</url>
	<title>Best of | Nadin Schmidt</title>
	<link>https://nadinschmidt.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Google Fonts lokal speichern mit dem Divi Builder ohne ftp Zugang</title>
		<link>https://nadinschmidt.com/google-fonts-lokal-speichern/</link>
					<comments>https://nadinschmidt.com/google-fonts-lokal-speichern/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Tue, 01 Apr 2025 12:43:43 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[DIVI]]></category>
		<category><![CDATA[WordPress & Website]]></category>
		<guid isPermaLink="false">https://nadinschmidt.com/?p=249727</guid>

					<description><![CDATA[Du möchtest deine Google Fonts oder andere Schriftarbeiten bei Divi hochladen, erhältst aber immer eine Fehlermeldung? Das liegt daran, dass der Upload aus Sicherheitsgründen gesperrt ist. Diese Sperre müssen wir zuerst umgehen. Du brauchst dazu keine Logindaten für den FTP Server, das geht auch vom WordPress Backend aus. Wieso du deine Google Fonts mit Divi [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Du möchtest deine Google Fonts oder andere Schriftarbeiten bei Divi hochladen, erhältst aber immer eine Fehlermeldung?</p>
<p>Das liegt daran, dass der Upload aus Sicherheitsgründen gesperrt ist. Diese Sperre müssen wir zuerst umgehen.</p>
<p>Du brauchst dazu keine Logindaten für den FTP Server, das geht auch vom WordPress Backend aus.</p>
<h2>Wieso du deine Google Fonts mit Divi auf den Server hochladen solltest</h2>
<p>Lädst du deine Schriften auf den Server, werden sie von dort abgerufen, statt von externen (Drittanbietern) wie Google. Damit bist du datenschutzrechtlich auf der sichereren Seite und ich würde das immer diveren Pluginlösunge bevorzugen.</p>
<p>Nachschauen, woher Schriften geladen werden, kannst du so:</p>
<ul>
<li>Öffne eine betroffene Webseite im Inkognito-Modus eines Browsers (idealerweie Google Chrome). Den Inkognito oder privat-Modus findest du, wenn du das Browsericon mit einem Rechtsklick anklickst und <em>Neues Inkognito</em> oder <em>Privates Fenster</em> auswählst.</li>
<li>Bei erscheinendem Cookie Banner klicke auf <em>alle Cookies ablehnen.</em></li>
<li>Klilcke nun mit einem weiteren Rechtsklick auf eine beliebige Stelle der Webseite und wähle im erscheinenden Auswahlfenster <em>Untersuchen</em> (Google Chrome)<em>.</em></li>
<li>Nun öffnet sich am rechten oder unteren Rand ein weiteres Fenster. Suche darin den Reiter<em> Source</em>.</li>
<li>Findest du dort Quellen, die irgendwas mit gstatic, googlefonts oder ähnliches im Namen haben, werden die fonts extern geladen. Im Inkognito Modus sollte (bei abgelehnten Cookies) ausschießlich der Ordner der besuchten Website erscheinen.</li>
</ul>
<p>Das kann dann so aussehen:</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242954" src="https://nadinschmidt.com/wp-content/uploads/2022/01/Google-Fonts-Reference.png" alt="Google Fonts Reference" width="258" height="118" srcset="https://nadinschmidt.com/wp-content/uploads/2022/01/Google-Fonts-Reference.png 346w, https://nadinschmidt.com/wp-content/uploads/2022/01/Google-Fonts-Reference-300x137.png 300w" sizes="(max-width: 258px) 100vw, 258px" /></p>
<p>Hier besteht dringend Handlungsbedarf.</p>
<h2>So lädst du Google Fonts mit Divi auf deine Website ohne FTP Zugang</h2>
<p>Google Fonts kannst du dir bei <a href="https://fonts.google.com/" target="_blank" rel="noopener">Google </a>direkt herunterladen oder andere Schriften kommerziell erwerben. Schrift aufwählen, downloaden entpacken.</p>
<p>Wähle nur die Schriftgrade aus, die du wirklich für deine Website brauchst. Meist reicht der <em>variable font.</em></p>
<ul>
<li>Installiere das Plugin  <a href="https://de.wordpress.org/plugins/enhanced-media-library/" target="_blank" rel="noopener">Enhanced Media Library</a>.</li>
<li>Installieren &amp; aktivieren.</li>
<li>Suche unter Settings den Reiter <em>MIME Types. </em></li>
<li>Gib vorne deine Font-Endung an (.ttf oder .otf oä), gib bei <em>MIME Type </em>was ein (zb font) und – ganz wichtig – aktiviere das Kästchen<em> Allow Upload.</em></li>
<li>Speichern.</li>
</ul>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242957" src="https://nadinschmidt.com/wp-content/uploads/2022/01/ENhanced-Media-Library.jpg" alt="ENhanced Media Library einrichten" width="828" height="348" /></p>
<p>&nbsp;</p>
<ul>
<li>Jetzt gehe du auf eine beliebige deiner Webseiten,</li>
<li>aktiviere den Pagebuilder,</li>
<li>öffne ein Textmodul,</li>
<li>wechsel zu Design → Text → Schrift.</li>
<li>Klicke auf <em>Hochladen</em>.</li>
<li>Vergib einen Namen für die Schrift, wähle die Schrift als .ttf oder .otf von deinem Desktop/Ordner aus und speichern.</li>
<li>Plugin Enhanced Media Library löschen</li>
<li>Google Fonts in den Divi Optionen deaktivieren.</li>
</ul>
<p>Jetzt kannst du die hochgeladene Schrift verwenden.</p>
<h3>Google Fonts in Divi Websiteweit ändern</h3>
<p>Nun müssen wir die hochgeladene Schrift noch auf der Website einsetzen.</p>
<p>Wenn du sauber mit Presets oder nur mit der Grundeinstellung im Theme Customizer gearbeitet hast, geht das ganz schnell.</p>
<p>Nachdem du die Schriften hochgeladen hast, wechsel in den Theme Customizer.</p>
<p>Hinterlege hier unter Typographie deine neuen Schriften und überall sonst, wo du hier Schriften zuordnen kannst.</p>
<p>Dann wechsel wieder auf eine deiner Seiten, öffne ein Textmodul und bearbeite die Presets. Wie gesagt, wenn alle deine Textmodule mit Presets erstellt wurden, kannst du einfach hier die neue Schrift im Preset hinterlegen und das wars. Wenn du gar nicht mit Modulen, sondern nur mit den Einstellungen im Customizer gearbeitet hast, dann brauchst du diesen Schritt nicht. Dann steht in all deinen Modulen als Schrift <em>Default</em> (also die Schrift, die du im Customizer gewählt hast).</p>
<p>Wenn nicht, dann wäre jetzt der ideale Zeitpunkt, allen Modulen auf deiner Website Presets zuzuordnen. Mehr zu den Presets erfährst du hier: <a href="https://nadinschmidt.com/tricks-divi/">Tricks &amp; Kniffe für DIVI</a></p>
<p><strong>Das Plugin danach bitte wieder löschen. So wie alle Plugins, die du nur vorübergehend brauchst.</strong></p>
<h3>Google Fonts im Divi Builder deaktivieren</h3>
<p>Geh dazu in die Divi-Optionen und deaktiviere direkt im ersten Reiter <em>Allgemein</em> die beiden Schalter für die Google Fonts. Wenn du jetzt deine Website anschaust, wirst du merken, ob du sauber gearbeitet hast. Denn alles, was noch von Google geladen wurde, ist jetzt weg.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245658 " src="https://nadinschmidt.com/wp-content/uploads/2022/11/Google-Fonts-DIVI.png" alt="" width="687" height="102" /></p>
<p>Wird jetzt noch einen Blick in den Divi-Optionen auf den Reiter <em>Performance</em>, ob hier der Schalter für die Google Fonts deaktiviert ist.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245657 " src="https://nadinschmidt.com/wp-content/uploads/2022/11/Google-Fonts-deaktivieren.png" alt="" width="716" height="63" /></p>
<p>Es werden immernoch Schriften geladen? Dann such mal nach Plugins oder Formularen, die von externen Anbietern Google Fonts auf deiner Website laden. Dann wirst du sie dort noch deaktivieren müssen (zB Recaptcha oder Codeschnipsel in Newsletter-Formularen).</p>
<p>Thats it.</p>
<div class="et_pb_section et_pb_section_1 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_0 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_0">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_1 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_0  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_1  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_0_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_0 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<p><strong>Du hast keine Lust, das selbst zu machen? Ich übernehm das.</strong></p>
<p>Hat keine meiner Lösungen funktioniert? Dann schrei(b).</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/google-fonts-lokal-speichern/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Mixed Content: Google Fonts oder Bilder werden in Divi nach dem Speichern nicht mehr angezeigt?</title>
		<link>https://nadinschmidt.com/schrift-divi-wird-nicht-angezeigt/</link>
					<comments>https://nadinschmidt.com/schrift-divi-wird-nicht-angezeigt/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Tue, 01 Apr 2025 06:01:02 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[DIVI]]></category>
		<category><![CDATA[WordPress & Website]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=242948</guid>

					<description><![CDATA[Du hast Bilder oder Schriften lokal auf deiner Website oder in deinem Blog mit dem Divi Builder hochgeladen und nach dem Speichern wird im Front-End nichts oder eine Standardschrift angezeigt? Dann hast du höchstwahrscheinlich keine saubere Weiterleitung auf https eingerichtet (Stichwort SSL-Zeritifikat). Wir sprechen hier auch vom Mixed Content. Schriften oder Bilder werden im Divi [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Du hast Bilder oder Schriften lokal auf deiner Website oder in deinem Blog mit dem Divi Builder hochgeladen und nach dem Speichern wird im Front-End nichts oder eine Standardschrift angezeigt?</p>
<p>Dann hast du höchstwahrscheinlich keine saubere Weiterleitung auf https eingerichtet (Stichwort SSL-Zeritifikat). Wir sprechen hier auch vom Mixed Content.</p>
<h2>Schriften oder Bilder werden im Divi Frontend nicht anzeigt: Mixed Content beheben</h2>
<p>So prüfst du meine Annahme:</p>
<ul>
<li>Öffne eine betroffene Webseite deiner Website im Inkognito-Modus eines Browsers (idealerweie Google Chrome). Den Inkognito oder privat-Modus findest du, wenn du das Browsericon mit einem Rechtsklick anklickst und <em>Neues Inkognito</em> oder <em>Privates Fenster</em> auswählst.</li>
<li>Klilcke nun mit einem weiteren Rechtsklick auf eine beliebige Stelle der Webseite und wähle im erscheinenden Auswahlfenster <em>Untersuchen</em> (Google Chrome)<em>.</em></li>
<li>Nun öffnet sich am rechten oder unteren Rand ein weiteres Fenster. Suche darin den Reiter <em>Console</em>. Wenn dort eine Fehlermeldung mit Bezeichnung <em>Mixed Content</em> erscheint, gehe ich mit meiner Annahme richtig. 🙂</li>
</ul>
<p>Der Fehler schleicht sich gerne ein, wenn das SSL-Zertifikat erst nach der WordPress Installation eingerichtet wurde. Darum sollte das immer zuerst geschehen, damit alle Inhalte unter dem https Pfad hochgeladen und gespeichert werden.</p>
<p>Nun zur Lösung:</p>
<div class="et_pb_section et_pb_section_3 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_1 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_2  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_1">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_3 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_2  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_3  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_1_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_1 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>So werden Fonts/Schriften in Divi auch nach dem Speichern im Frontend angezeigt</h2>
<p>Wir müssen nun auch die unter http gespeicherten Elemente unter https speichern.</p>
<h3>SSL-Zertifikat für alle Inhalte aktivieren</h3>
<p>Diesen Schritt brauchst du nur, wenn du kein generelles SSL Zertifikat über deinen Hostinganbieter eingerichtet hast. Hast du das schon getan, aber vorab bereits WordPress installiert, kannst du das überspringen.</p>
<p>Installiere das Plugin <a href="https://wordpress.org/plugins/really-simple-ssl/" target="_blank" rel="noopener">Really Simple SSL</a> &amp; aktiviere es.</p>
<ul>
<li>Wechel in die Plugin-Einstellungen,</li>
<li>stelle alles auf https um,</li>
<li>lösche das Plugin</li>
<li>und klicke <em>https behalten</em>.</li>
</ul>
<p>Sicherheitshalber installierst du das Plugin, lädst die Schriften hoch und löscht das Plugin erst dann wieder.</p>
<p>Jetzt noch den Divi-Cache unter Divi Optionen, den Cache deines Optimierungsplugins und deinen Browsercache leeren.</p>
<h3>http Inhalte in https Inhalte umwandeln</h3>
<p>Installiere das Plugin <a href="https://de.wordpress.org/plugins/better-search-replace/" target="_blank" rel="noopener">Better Search Replace</a> &amp; aktiviere es.</p>
<ul>
<li>Rufe es unter WordPress <em>Werkzeuge</em> auf,</li>
<li>gib bei Suchen nach den alten Pfad ein (hier zB http://nadinschmidt.com/)</li>
<li>bei Ersetzen den neuen ( hier https://nadinschmidt.com/)</li>
<li>ACHTUNG: überdenke genau, was du hier eingibst. Denn es werden alle entsprechenden Felder in der Datenbank verändert. Die Angabe sollte also möglichst präzise sein.</li>
<li>Markiere alle Tabellen (die ganzen Einträge da in dem kleinen Fenster in der Mitte. Markiere das oberste, halte Shift gedrückt und markiere das unterste)</li>
<li>Lass zuerst den Testlauf laufen und schau dir an, ob überhaupt Änderungen zu machen sind</li>
<li>Wenn ja, dann kannst du das nochmal ohne Testlauf machen</li>
<li>Lösche das Plugin</li>
</ul>
<p>Beispiel bei mir: Ersetze <em>http://va-nadin.de/</em> durch <em>https://va-nadin.de/</em></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242952" src="https://nadinschmidt.com/wp-content/uploads/2022/01/Better-Search-Replace.jpg" alt="Plugin Better search replace einstellen" width="643" height="554" /></p>
<p>&nbsp;</p>
<p>Eventuell musst du dich danach neu einloggen, weil sich auch der Anmeldepfad geändert hat.</p>
<p>Das Plugin kannst du jetzt wieder löschen, alle http Einträge wurden durch https ersetzt.</p>
<p><strong>Jetzt noch den DIVI-Cache unter Optionen, den Cache deines Optimierungsplugins und den deines Browsers leeren.</strong></p>
<p>Du kannst das Plugin auch super nutzen, um nach einem Websiteumzug den alten Pfad durch den neuen zu ersetzen und alles sauber zu starten.</p>
<p>In 99% der Fälle werden deine im Divi Builder hochgeladenen Bilder und Schriften jetzt auch nach dem Speichern und Beenden des Visual Builders im Frontend angezeigt.</p>
<p>Du brauchst Hilfe? Dann schrei(b).</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/schrift-divi-wird-nicht-angezeigt/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Bildgrößen &#8211; Bilder für den Websiteupload bearbeiten</title>
		<link>https://nadinschmidt.com/tipps-zu-richtigen-bildgroessen-fuer-deine-website/</link>
					<comments>https://nadinschmidt.com/tipps-zu-richtigen-bildgroessen-fuer-deine-website/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Wed, 24 Jul 2024 13:37:42 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[WordPress & Website]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=242672</guid>

					<description><![CDATA[Korrekt bearbeitete Bilder und Bildgrößen sind wichtig für die Ladezeit und Darstellung auf deiner Website. Die Bildgröße nachträglich anzupassen, kostet Zeit, Nerven und Geld. Nein, ein Plugin zur Optimierung übernimmt das nicht. Das ist nur der Feinschliff. Zusammengefasst optimierst du deine Bilder vor dem Upload auf deiner Website wie folgt: Sie sollten in der Abmessung [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Korrekt bearbeitete Bilder und Bildgrößen sind wichtig für die Ladezeit und Darstellung auf deiner Website. Die Bildgröße nachträglich anzupassen, kostet Zeit, Nerven und Geld.</p>
<p>Nein, ein Plugin zur Optimierung übernimmt das nicht. Das ist nur der Feinschliff.</p>
<p>Zusammengefasst optimierst du deine Bilder vor dem Upload auf deiner Website wie folgt:</p>
<ul>
<li>Sie sollten in der Abmessung der dargestellten Größe entsprechen. Wenn du z. B. ein Bild in voller Breite einsetzen möchtest, genügt meist die Auflösung HD, welche 1920 px in der Breite entspricht. Ein Bild, welches auf dem halben Inhalt platziert wird, entspricht 960 px Breite etc.</li>
<li>Die Dateigröße sollte unter 200 KB liegen.</li>
</ul>
<p>Wie das im Detail funktioniert, schauen wir uns jetzt an.</p>
<div class="et_pb_section et_pb_section_5 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_2 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_4  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_2">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_5 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_4  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_5  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_2_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_2 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Zwei Messgrößen für Bildgrößen auf deiner Website: Abmessungen und Dateigröße</h2>
<p>Wir sprechen einmal von den Abmessungen in Pixeln und von der „Schwere“, also Größe in KB oder MB.</p>
<h3>Die optimale Dateigröße deiner Websitebilder</h3>
<p>Bilder in top Auflösung haben locker 12–18 <strong>MB</strong>. Das Bild ist gestochen scharf, würde aber eine Ewigkeit zum Laden brauchen. Wir wollen Schnelligkeit!</p>
<p>Das heißt: Bilder für Webseiten auf maximal 150 <strong>KB</strong> verkleinern. Ja richtig, KB.</p>
<p>Wie wir das schaffen? Indem wir zuerst die Abmessungen auf die benötigste Größe reduzieren und dann das ideale Dateiformat wählen. Dazu gleich mehr.</p>
<h3>Die idealen Abmessungen deiner Websitebilder</h3>
<p>Die Abmessung von Bildern werden in Pixeln angegeben und sorgen für die Schärfe des Bildes. Je mehr einzelne Pixelchen je Millimeter nebeneinander liegen, umso gestochen schärfer das Bild. Leider ist es dann auch schwerer (KB, MB), da mehr Pixel auch mehr Gewicht haben.</p>
<p>Da die Bilder auf deiner Website aber immer in etwa dieselbe Darstellungsgröße haben (deine Website wird meist mit einer festen Inhaltsbreite angelegt, irgendwas zwischen 1080 und 1640px, schau dir mal in Divi die Breite deiner Zeilen in den Einstellungen an) brauchst du hier keine gigantischen Abmessungen. Ausnahme: Vollbreite Bilder brauchen eine Breite ab 1920 px (HD, hier platzieren wir das Bild in der Sektion, welche sich – im Gegensatz zur Zeile – in der Größe an den Bildschirm anpasst).</p>
<p>Wollen wir eine Darstellung in 4k, braucht es entsprechend größere Abmessungen. Aus Erfahrung kann ich hier sagen: Je besser die Qualität der Bilder, umso weiter können wir die Abmessungen reduzieren. Kompromisse zu Lasten der Ladezeit gehen wir hier ein für z. B. Fotografenwebsites, wo die Qualität der Bilder entsprechend wirken soll.</p>
<p><strong>Kleiner Vergleich:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-242677" src="https://nadinschmidt.com/wp-content/uploads/2021/12/Vergleich-Abmessungen-Bild.jpg" alt="" width="800" height="500" srcset="https://nadinschmidt.com/wp-content/uploads/2021/12/Vergleich-Abmessungen-Bild.jpg 800w, https://nadinschmidt.com/wp-content/uploads/2021/12/Vergleich-Abmessungen-Bild-480x300.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></p>
<p>Links siehst du ein scharfes Bild in größer Abmessung und hoher Dateigröße, rechts runtergerechnet, hier als Extrembeispiel zur Verdeutlichung.</p>
<h2>Bilder vor dem Upload auf deine Website bearbeiten</h2>
<p>Ich zeige dir die gängigen Wege:</p>
<h3>Affinity Photo oder Adobe Photshop</h3>
<p>Mit gängigen Fotobearbeitungstools kannst du natürlich noch viel mehr Bearbeiten.</p>
<p>Öffne das Bild im jeweiligen Programm und klicke dann direkt wieder auf exportieren. Im Exportmodus kannst du deine gewünschten Abmessungen angeben und siehst die neue Dateigröße. Ist diese noch zu hoch, senke ich bei JPG die Qualität. Speichern, fertig.</p>
<p><strong>Hier kannst du übrigens auch als WebP exportieren</strong> und sparst dir so hinterher ein Bildoptimierungsplugin! WebP ist ein Bildformat, das ideal für Browser ist und enorm kleine Dateigrößen ermöglicht. Wenn möglich, verwende das.</p>
<p>Sollte die Qualität des Bildes zu stark gelitten haben, erhöhe deine Abmessungen.</p>
<p>Affinity gibt es übrigens zum Einmalpreis für knapp 50-60€. Vorteil bei beiden Tools: Du kannst mehrere Bilder als Stapel verarbeiten. Damit gehts schneller.</p>
<h3>Bilder mit Canva für deine Website optimieren</h3>
<p>Dazu legst du in Canva ein neues Design in benutzerdefiniertes Größe an (mehr zu den Größen weiter unten) und ziehst dein Foto rein. Also zB legst du dir Formate in 600&#215;400 px an und platzierst darin dein Bild als Hintergrund. So hast du schon die richtige Abmessung. Speichere jetzt als jpeg und schau, ob die Dateigröße 150 kb überschreitet. Mit dem Pro-Account kannst du die Größe auch nachträglich anpassen.</p>
<p>Ich nutze das nicht so gerne, weil Bilder nach Canve meist etwas unschärfer werden, vor allem Bilder mit Schrift darauf (was du aus SEO-Gründen sowieso nicht machen solltest). Das Titelbild dieses Beitrags wurde so erstellt.</p>
<h3>Die Dateigröße zusätzlich minimieren mit tinypng</h3>
<p>Egal, womit ich die Bilder bearbeitet habe, vor dem Upload auf die Website lasse ich sie einmal von tinypng optimieren. Das ist eine Cloudlösung. Lade dazu das Bild kurz bei <a href="https://tinypng.com/" target="_blank" rel="noopener">tinypng</a> hoch und du kannst es nochmal enorm verkleinert wieder herunterladen.</p>
<p>Funktioniert auch mit webp Formaten. Vorher sollten die Bilder IMMER zuerst in einem anderen Tool beschnitten worden sein. Tinypng ist nur der extra Schliff und für manche Bilder zuviel des Guten. Wird dein Bild zu unscharf, lass es weg.</p>
<h2>Wann welches Dateiformat verwenden?</h2>
<p>PNG ausschließlich für scharfe Bilder mit transparentem Hintergrund, z. B. Logos, freigestellte Bilder. Nachteil: Hohe Dateigröße.<br />
(Logos und ähnliches laden wir übrigens NIEMALS mit weißem Hintergrund hoch. Das sieht im Dark Modus nämlich ziemlich besch***en aus.)</p>
<p>JPG für jegliche Art von Bildern. Dateigröße niedriger als png.</p>
<p>WebP kann alles davon, nutzen wir aber nur für Websites. Nachteil: teilweise leidet die Qualität zu sehr, je nach Ausgangsbild.</p>
<p>Brauchst du keinen transparenten Hintergrund und kannst kein WebP auswählen, dann wähle möglichst JPG und lasse WebP über Plugins wie WP Optimize oder Imagify ausliefern.</p>
<h2>Wähle die richtige Abmessung für deine Websitebilder</h2>
<p>Fast jedes Theme und sogar WordPress hat feste Größen für Bilder. Am Ende solltest du dich aber für die Abmessung entscheiden, die auf möglichst vielen Geräten gut aussieht.</p>
<p>Optimierst du eher für mobil, dann achte auch hier auf separate Mobilbilder in Breiten von ca 500px.</p>
<p>Ansonsten probier die möglichst kleinsten Abmessungen aus und schau, ob dein Bild qualitativ gut aussieht.</p>
<p>Orientiere dich zuerst an der Breite und stimme dann die Höhe darauf ab, denn im Webdesign haben wir Luft nach oben und unten, aber nicht beliebig nach rechts und links (wir wollen ja nicht nach links und rechts scrollen&#8230;)</p>
<h3>Verwende für die gleiche Darstellung immer dieselbe Bildgröße auf deiner Website</h3>
<p>Wenn du zum Beispiel 3 Spalten hast, dann achte darauf, dass jedes Bild darin dieselben Abmessungen hat.</p>
<p>Verwende auch für deine Beitragsbilder immer dieselbe Größe.</p>
<p>Bilder mit voller Breite sollten mindestens (meist ausreichend) 1920 px breit sein. Bei Hintergrundbildern mit Überlagerung darf es auch mal weniger sein.</p>
<p>Wenn du Parallaxen einsetzt, denk daran, das Bild in der Höhe nicht zu sehr zu beschränken. Hier brauchst du mindestens das doppelte an Spiel nach oben und unten als die tatsächlich angezeigte Höhe.</p>
<h3>Meine verwendeten Bildgrößen</h3>
<p>Hier findest du grafisch Richtwerte, an welchen du dich orientieren kannst. Die Höhe musst du selbst anpassen, je nachdem, wie du dein Bild dargestellt haben willst.</p>
<p>Es kommt immer darauf an, ob du dein Bild als Hintergrund einsetzt, als Bildmodul, als Beitragsbild und ob du Breite und Höhe manuell festlegst (vom Festlegen der Höhe rate ich ab, da die Responsive Anpassung verloren geht!). Es muss nach dem Einsetzen eben gut aussehen und das auf jedem Gerät. Darum orientiere ICH mich nicht an den Divi-Größen. Wenn du das erstmal probieren willst, dann findest du hier die <a href="https://divi.world/bildgroesse-divi-theme" target="_blank" rel="noopener">DIVI-Größen</a>.</p>
<h4>Übersicht über meine Bildgrößen</h4>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-242675" src="https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroesse-volle-Breite.jpg" alt="" width="800" height="500" srcset="https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroesse-volle-Breite.jpg 800w, https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroesse-volle-Breite-480x300.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-242674" src="https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroesse-2-Spalten.jpg" alt="" width="800" height="500" srcset="https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroesse-2-Spalten.jpg 800w, https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroesse-2-Spalten-480x300.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-242676" src="https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroessen-3-4-Spalten.jpg" alt="" width="800" height="500" srcset="https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroessen-3-4-Spalten.jpg 800w, https://nadinschmidt.com/wp-content/uploads/2021/12/Bildgroessen-3-4-Spalten-480x300.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" /></p>
<p>&nbsp;</p>
<h2>Plugins, um deine Websitebilder zu optimieren</h2>
<h3>Bildoptimierungs-Plugins</h3>
<p>Obwohl ich Bilder vor dem Upload bearbeite, gebe ich zusätzlich den Feinschliff durch ein Plugin. Plugins wie WP-Optimize, ShortPixel oder Imagify geben den Bildern nochmal den Kick, optimieren die Dateigröße und liefern da, wo es möglich ist, in Webformaten aus. Das unterstützt zusätzlich die Ladezeit, ist aber kein Ersatz für die richtige Vorarbeit!</p>
<p>Auf CDN solltest du aufgrund des Datenschutzes verzichten. Dabei werden Bilder auf einem externen Server platziert und dort abgerufen.</p>
<h3>Websitebilder in der Mediathek austauschen</h3>
<p>Mit <em>Enable Media Replace</em> kannst du Bilder direkt in der Mediathek austauschen. Das hat bisher bei mir gut funktioniert. Aktiviere das Plugin, geh in die Mediathek, klicke auf ein Bild und suche den Button <em>Bild ersetzen</em>.</p>
<p>Dann lädst du einfach das verkleinerte Bild hoch und es wird ausgetauscht.</p>
<p>Tipp: probier das erstmal mit einer Webseite und warte einen Tag, ob alles so geklappt hat. Das kann manchmal kurz dauern. Dann kannst du den Rest machen.</p>
<div class="et_pb_section et_pb_section_7 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_3 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_6  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_3">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_7 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_6  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_7  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_3_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_3 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Weitere Tipps für gute Fotos für die Website</h2>
<h3>Quer- oder Hochformat für Websitefotos?</h3>
<p>Wir neigen alle dazu, bei Fotoshootings vor allem Hochformat-Bilder zu machen. Querformat lässt sich auf Webseiten aber viel öfter und besser einsetzen. Am besten, wenn du rechts oder links platziert bist, sodass sich in der anderen Hälfte Text unterbringen lässt.</p>
<h3>Ausleuchtung &amp; Farben der Websitebilder</h3>
<p>Achte beim Shooting auf eine gute Ausleuchtung und passende Farben. Auf deiner Website soll die Farbe Rot überwiegen? Dann werden sich Bilder auf grünen Wiesen schlecht unterbringen lassen. Die Farben sollten gut ausgeleuchtet, stark und gesättigt sein.</p>
<h3>Stimmung &amp; Thema deine Websitefotos</h3>
<p>Fang in den Fotos bereits die Stimmung ein, die auf deiner Website übermittelt werden soll. Möglichst Themennah. Schön, dass du Bilder am Strand hast. Häng sie ins Wohnzimmer, aber pack sie nicht auf deine Website, wenn du Autos verkaufst. Ausnahme: du willst auf der über mich Seite Stimmung vermitteln.</p>
<h3>Blickrichtung auf deinen Websitefotos</h3>
<p>Schau deine Websitebesucher an. Wähle Fotos mit Blickrichtung zum Text, also nach innen.</p>
<div class="et_pb_section et_pb_section_9 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_4 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_8  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_4">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_9 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_8  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_9  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_4_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_4 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Last but not least</h2>
<p>Bildgrößen direkt vor Upload anzupassen, ist echt easy. Vor allem wenns mal im Kopf drin ist, passiert das fast schon automatisch.</p>
<p><strong>Ganz wichtig auch:</strong> Bilder, die du hochlädst und dann doch nicht verwendest, direkt wieder aus der Mediathek zu löschen! So vermüllt sie nicht und du behältst den Überblick. Bei sehr vielen Bildern bietet sich auch ein Plugin wie Real Media Library an, um die Mediathek zu sortieren.</p>
<p>Viel Spaß und wenn du Hilfe brauchst <a href="mailto:mail@nadinschmidt.com">schrei(b)</a>!</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/tipps-zu-richtigen-bildgroessen-fuer-deine-website/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Bloglayout im DIVI Theme Builder erstellen &#8211; so wird bloggen easy!</title>
		<link>https://nadinschmidt.com/bloglayout-divi-erstellen/</link>
					<comments>https://nadinschmidt.com/bloglayout-divi-erstellen/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Thu, 08 Dec 2022 12:39:24 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[DIVI]]></category>
		<guid isPermaLink="false">https://nadinschmidt.com/?p=245859</guid>

					<description><![CDATA[Was bringt dir ein Bloglayout und wie kannst du das ganz einfach mit DIVI im Theme Builder erstellen? In diesem Beitrag schauen wir uns die technischen Aspekte an. Wenn du wissen willst, wie du Step by Step beim bloggen vorgehst, habe ich dir unten noch einen Artikel verlinkt. Wozu solltest du Blogartikel schreiben? Eins möchte [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Was bringt dir ein Bloglayout und wie kannst du das ganz einfach mit DIVI im Theme Builder erstellen?</p>
<p>In diesem Beitrag schauen wir uns die technischen Aspekte an. Wenn du wissen willst, wie du Step by Step beim bloggen vorgehst, habe ich dir unten noch einen Artikel verlinkt.</p>
<h2>Wozu solltest du Blogartikel schreiben?</h2>
<p>Eins möchte ich hier doch nochmal erwähnen, wieso jeder Blogbeiträge schreiben sollte.</p>
<p>Jeder googelt. Und was wir beim googeln meist lesen sind Blogbeiträge.</p>
<p>Sie helfen dir beim Erstkontakt mit einem Besucher auf deiner Website</p>
<ul>
<li>mit Wissen zu überzeugen</li>
<li>Vertrauen aufzubauen</li>
<li>erhöhte Chancen über Suchmaschinen gefunden zu werden (höher als die Website allein)</li>
<li>häufige Fragen zu beantworten</li>
<li>zum Newslettereintrag oder Kauf zu animieren</li>
</ul>
<p>Darum empfehle ich JEDEM zumindest 3-4 GUTE Blogartikel zu schreiben. Solche, die auf einer gründlichen Keywordrecherche aufbauen und ein vorzeigbares Ranking vorweisen. Dazu ist es eben wichtig, Blogartikel richtig zu schreiben.</p>
<p>Du kannst auch Cross-Posting machen, also zB aus einer Podcastfolge einen Blogbeitrag erstellen oder aus einem Youtubevideo und die dazugehörigen Folgen auch noch einbinden.</p>
<p>Der Blog ist eben der Kanal, den du am meisten verwenden kannst und so &#8211; im Unterschied zu Social Media und sonstigen Kanälen &#8211; mehr Besucher auf deine Website erhältst, was auch dein Ranking in Suchmaschinen positiv beeinflusst.</p>
<p>Wie bei der Website gilt: ein Business, das allein auf Social Media aufgebaut ist, ist keins.</p>
<div class="et_pb_section et_pb_section_11 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_5 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_10  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_5">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_11 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_10  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_11  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_5_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_5 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Wieso ein Bloglayout mit DIVI erstellen?</h2>
<p>Weil allein das schreiben schon viel Zeit kosten kann, sollte alles, was um den Beitrag rum erscheint, so einfach wie möglich sein und den Blog zum konvertieren bringen! Dafür ist das Bloglayout ideal.</p>
<p>Das Layout ist alles, was über, unter oder neben dem eigentlichen Text erscheint. Sowohl das Beitragsbild, der Titel, die Seitenleiste, die Newsletteranmeldung etc.</p>
<p><strong>Vorteile:</strong></p>
<ol>
<li>Du musst nur noch deinen Text einfügen, alle anderen Elemente und der Aufbau des Beitrags werden dynamisch generiert.</li>
<li>Möchtest du eine Änderung vornehmen, dann machst du das einmalig im Bloglayout und nicht in jedem einzelnen Beitrag.</li>
<li>Deine Beiträge bleiben auch nach Wechsel des Themes erhalten! Sie sind so nämlich in WordPress erstellt, nicht in DIVI. Lediglich die Optik wird von DIVI generiert.</li>
<li>Und weil wir keine 80er-Webseiten und Blogs mehr sehen wollen, sollte der Blog eben auch zeitgemäß aussehen. Wir sind doch alle genervt von hässlich formatierten Texten mit 100 schlecht eingesetzten Anzeigeblöcken.</li>
</ol>
<h2>Was du vor dem Wechsel zum Bloglayout beachten solltest</h2>
<p><strong>Bevor du startest: du hast schon Blogartikel mit DIVI oder Gutenberg geschrieben? Dann mach unbedingt eine Sicherung aller Inhalte! </strong></p>
<p><strong>Der gewaltige Unterschied zum bloggen mit DIVI ist, dass wir nur noch das Layout mit DIVI im Theme Builder aufbauen! Die Beiträge selbst erstellen wir anschließend im Classic Editor (alternativ Gutenberg, bitte testen!), also in WordPress selbst.</strong></p>
<p><strong>Ich empfehle sogar, das folgende zuerst gründlich auf einer Test-Umgebung zu probieren. Das geht zB mit dem Plugin WP-Staging. Nicht, dass eventuell doch Beiträge gelöscht werden, die Technik halt&#8230;</strong></p>
<p>Deine Beiträge in DIVI dürften zwar auch nach Deaktivieren des <em>DIVI Builders für Beiträge</em> noch vorhanden sein, <strong>plus</strong> das erstellte Layout drumrum. Ich empfehle dir trotzdem, die Beiträge rauszukopieren, zum Standardeditor zu wechseln und sie dort einzufügen. Also im exakt selben Beitrag, denn so bleibt der Permalink erhalten.</p>
<p>Solange du DIVI noch aktiviert hast, kopiere also deine Inhalte raus und wechsel im Beitrag zum Standardeditor. Der Inhalt ist dann weg!</p>
<p>[ma-gdpr-youtube video=&#8220;https://youtu.be/v1mhCKh-H5A?si=gN8rYjpU4gLsM-2l&#8220;]</p>
<p>&nbsp;</p>
<h2>DIVI Einstellungen vornehmen</h2>
<p>Dann starten wir mit den Basics.</p>
<p>Steuer die<em> DIVI Optionen</em> an und wechsel in den Reiter <em>Builder</em>. Dort deaktivierst du den DIVI Builder für Beiträge. So kommen wir gar nicht mehr erst in Versuchung, den DIVI Builder bei der Beitragerstellung zu aktivieren.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244805 size-large" src="https://nadinschmidt.com/wp-content/uploads/2022/07/DIVI-Classic-Editor-Beitraege-1024x335.png" alt="" width="1024" height="335" srcset="https://nadinschmidt.com/wp-content/uploads/2022/07/DIVI-Classic-Editor-Beitraege-980x320.png 980w, https://nadinschmidt.com/wp-content/uploads/2022/07/DIVI-Classic-Editor-Beitraege-480x157.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw" /></p>
<p>&nbsp;</p>
<p>Jetzt wechselst du in den Reiter <em>Fortgeschritten</em> und aktivierst den Classic Editor. Der ersetzt quasi den Gutenberg. Nach meinem Test könntest du wohl auch mit Gutenberg schreiben, ich finde den Classic Editor aber viel angenehmer und übersichtlicher zum bloggen. Wenn du bei Gutenberg bleiben möchtest, teste das bitte auf einer Staging-Seite.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244186 size-large" src="https://nadinschmidt.com/wp-content/uploads/2022/05/DIVI-Classic-Editor-1024x525.jpg" alt="" width="1024" height="525" srcset="https://nadinschmidt.com/wp-content/uploads/2022/05/DIVI-Classic-Editor-980x502.jpg 980w, https://nadinschmidt.com/wp-content/uploads/2022/05/DIVI-Classic-Editor-480x246.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw" /></p>
<p>Nachdem du meine Favoriten-Einstellungen vorgenommen hast, können wir mit dem Bloglayout in DIVI loslegen.</p>
<h2>Layout im DIVI Theme Builder anlegen</h2>
<p>Wechsel jetzt unter den <em>DIVI Optionen</em> zum <em>Theme Builder</em>. Dort klickst du in ein <strong>leeres</strong> Feld, um eine <strong>neue Vorlage</strong> zu erstellen.</p>
<p>Wähle hier <em>Alle Beiträge</em> aus.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245873 size-large" src="https://nadinschmidt.com/wp-content/uploads/2022/12/Theme-Builder-Beitraege-1024x560.png" alt="" width="1024" height="560" srcset="https://nadinschmidt.com/wp-content/uploads/2022/12/Theme-Builder-Beitraege-980x536.png 980w, https://nadinschmidt.com/wp-content/uploads/2022/12/Theme-Builder-Beitraege-480x262.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw" /></p>
<p>Speichern und dann bearbeite den <em>Body (benutzerdefinierten Körper)</em>.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245871 " src="https://nadinschmidt.com/wp-content/uploads/2022/12/DIVI-Beitraege-Body.png" alt="" width="480" height="294" /></p>
<p>Jetzt öffnet sich eine völlig leere Seite, welche du mit DIVI gestalten kannst.</p>
<h2>Dynamische Inhalte einfügen</h2>
<p>Dynamische Inhalte sind die, welche du später im Beitrag selbst hinterlegst und die dann an der bestimmten Stelle im Layout erscheinen.</p>
<p>Dazu gehören:</p>
<ul>
<li>Beitragsbild</li>
<li>Inhalt</li>
<li>Überschrift</li>
<li>Veröffentlichungsdatum, Kategorie, Autor</li>
</ul>
<p>Du kannst das Layout gestalten, wie du willst. Füge an geeigneter Stelle die dynamischen Inhalte ein, die du brauchst.</p>
<p><strong>Für den Inhalt, also deinen tatsächlichen Blogbeitrag, wählst du das Modul <em>Inhalt posten</em>.</strong></p>
<p>Bild, Überschriften und Datum/Autor/Kategorie kannst du im jeweiligen Modul als dynamischen Inhalt auswählen.</p>
<p>Lösche dazu im Modul den jeweiligen Inhalt und klicke auf das kleine Symbol, das erscheint.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245874 size-large" src="https://nadinschmidt.com/wp-content/uploads/2022/12/Dynamische-Inhalte-DIVI-1024x408.png" alt="" width="1024" height="408" srcset="https://nadinschmidt.com/wp-content/uploads/2022/12/Dynamische-Inhalte-DIVI-980x391.png 980w, https://nadinschmidt.com/wp-content/uploads/2022/12/Dynamische-Inhalte-DIVI-480x191.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw" /></p>
<p>Im Textmodul verwende ich immer <em>Post / Archivtitel</em> (die H1), das <em>Post Veröffentlichungsdatum</em> und die <em>Post Kategorie</em>.</p>
<p>Für das Beitragsbild wählst du ein Bildmodul, löschst das graue Vorschaubild und klickst ebenfalls auf den dynamischen Inhalt. Wähle <em>Angezeigtes Bild</em>.</p>
<p>Damit deine Überschrift auch wirklich eine H1 ist, öffne das Modul, wähle die Einstellung und füge das hier ein:</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245877 size-large" src="https://nadinschmidt.com/wp-content/uploads/2022/12/Dynamischer-Text-DIVI-1-1024x421.png" alt="" width="1024" height="421" srcset="https://nadinschmidt.com/wp-content/uploads/2022/12/Dynamischer-Text-DIVI-1-980x403.png 980w, https://nadinschmidt.com/wp-content/uploads/2022/12/Dynamischer-Text-DIVI-1-480x197.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw" /></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245876 " src="https://nadinschmidt.com/wp-content/uploads/2022/12/H1-formatieren-Blog-DIVI.png" alt="" width="633" height="316" /></p>
<p>Die H1 wird automatisch aus deinem Beitragstitel in der einzelnen Zeile im Classic Editor generiert. Im Text verwende bitte nur noch die H2, H3 usw.</p>
<h2>Seitenleiste und unteren Bereich füllen</h2>
<p>Um eine schöne Seitenleiste zu gestalten, füge eine Zeile mit 2 Spalten ein.</p>
<p>In die erste Spalte platziere ich das <em>Inhalt posten-</em>Modul.</p>
<p>Die zweite Spalte kannst du frei gestalten. Zum Beispiel farbig hinterlegen, weitere Kategorien oder top Beiträge hinterlegen, ein Infotext über dich, eine Newsletteranmeldung, Affiliatelinks usw.</p>
<p>Damit das gleichmäßig gut aussieht, wechsel ich in der <em>Zeileneinstellung</em> auf <em>Design</em>, <em>Größe</em> und aktiviere <em>Spaltenhöhe ausgleichen</em>.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245879 " src="https://nadinschmidt.com/wp-content/uploads/2022/12/Spaltenhoehe-ausgleichen-DIVI.png" alt="" width="374" height="446" /></p>
<p>Für die einzelne (zweite) Spalte stelle ich unter <em>Zwischenraum</em> (in der Spalte, nicht Zeile) einen Rundum-Abstand von ca 15 px ein. Dann klebt dein Text der Seitenleiste nicht am Rand.</p>
<p>Hier könntest du auch die Hintergrundfarbe für diese Spalte ändern.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245878 " src="https://nadinschmidt.com/wp-content/uploads/2022/12/Einzelne-Spalte-in-DIVI-formatieren.png" alt="" width="447" height="422" /></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245880 " src="https://nadinschmidt.com/wp-content/uploads/2022/12/Zwischenraum-Spalte-DIVI.png" alt="" width="641" height="299" /></p>
<p>Unterhalb des Beitrags platziere ich am liebsten das Modul Beitragsnavigation, um zum nächsten Artikel springen zu können.</p>
<p>Weitere Möglichkeiten wären die <strong>Kommentarfunktion</strong> (lasse ich gerne weg wegen Spam und Datenschutz), ein <strong>Kontaktformular</strong> (ist bei mir im Footer, der wird im fertigen Beitrag wieder angezeigt) und <strong>andere</strong> <strong>Blogartikel</strong> anzeigen zu lassen.</p>
<p>Dazu fügst du das Modul <em>Blog</em> ein, setzte den Beitragszähler auf 3 und wählst unter <em>Design -&gt; Layout</em> die Ansicht <em>Gitter</em>.</p>
<p>Tob dich aus! 🙂</p>
<p><strong>Kleiner Tipp für Seitenleisten:</strong></p>
<p>Ich verwende meine Seitenleiste sowohl auf der Blogseite, den Archivseiten und den Beiträgen. Damit ich Änderungen nicht 3 mal machen muss, sind alle Elemente der Seitenleiste als globale Elemente in der Bibliothek gespeichert. So ändern sich alle, wenn ich eine Änderung vornehme.</p>
<div class="et_pb_section et_pb_section_13 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_6 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_12  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_6">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_13 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_12  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_13  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_6_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_6 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Archivseiten im DIVI Theme Builder erstellen</h2>
<p>Die allgemeine Blogseite (bei mir die: <a href="https://nadinschmidt.com/blog/">nadinschmidt.com/blog/) </a>gestaltest du als ganz normale Seite (nicht Beitrag oder Theme Builder) und fügst auch hier das Modul Blog ein. Hier genügt es, nur die Ansicht optisch anzupassen. Achte darauf, dass unter <em>Elemente</em> die <em>Nummerierung</em> angezeigt wird, so können Besucher auf die nächste Seite deiner Beiträge springen.</p>
<p>Damit auch deine Kategorieseiten schön aussehen, musst du wieder auf den Theme-Builder zurückgreifen (hier meine Kategorieseite: <a href="https://nadinschmidt.com/category/best-of/">nadinschmidt.com/category/best-of/</a>)</p>
<p>Hier wählst du eine <em>neue Vorlage</em>, statt alle Beiträge jetzt <em>Alle Kategorieseiten</em> und <em>Alle Archivseiten.</em></p>
<p>Die blanke Seite kannst du ebenfalls frei gestalten. Hübsch ist es, oben wieder ein dynamisches Textmodul einzufügen und <em>Archivtitel</em> als H1 anzeigen zu lassen.</p>
<p>Füge wieder das <em>Modul Blog</em> ein, allerdings wählst du jetzt unter <em>Inhalt</em> bei <em>enthaltene Kategorien</em> aus <em>Aktuelle Kategorie</em>. So werden nur die Artikel dieser Kategorie angezeigt.</p>
<h2>Was du zum Bloggen noch beachten darfst</h2>
<p>Technisch steht dein Blog nun. Ich empfehle dir, den bereits erwähnten Artikel zu lesen: <a href="https://nadinschmidt.com/blogartikel-fuer-seo-optimieren/">Blogartikel optimieren</a></p>
<p><strong>Kurzgefasst solltest du vor dem Bloggen das machen</strong></p>
<ol>
<li>Recherchiere dein Keyword (merke: du schreibst dann zwar optimiert für dieses Keyword, aber Google sucht sich selbst relevante Keywords zusammen und entscheidet, ob dein Beitrag auch bei anderen Suchanfragen erscheint)</li>
<li>Gliedere den Inhalt in sinnvolle Überschriften mit Keywords</li>
<li>Schreibe den Inhalt</li>
<li>Lege Bild und Kategorie fest</li>
<li>Fülle die Metadescription aus (zB mit Yoast oder mein Favorit Rank Math)</li>
<li>Ergänze die Beschreibung in den verwendeten Bildern</li>
<li>Teile den Artikel im Newsletter oder Social Media</li>
<li>Melde den Artikel in der Google Search Console an und prüfe die Indexierierung und das Ranking nach 4-6 Wochen!</li>
</ol>
<p><strong>Vermeide</strong></p>
<ul>
<li>Ohne Keyword zu schreiben, außer du setzt den Artikel auf No Index (wird nicht in Suchmaschinen gelistet) oder willst ihn nur verwenden, um ihn auf häufige Fragen verschicken zu können.</li>
<li>Duplicate Content &#8211; Artikel mit ähnlichen Inhalten schaden dem Ranking beider Artikel. Fasse zusammen oder setze auf No Index.</li>
<li>Schreibe besser als die Konkurrenz (ok, das ist kein vermeiden&#8230;)</li>
</ul>
<p><strong>Tools, die dir beim Bloggen helfen</strong></p>
<ul>
<li>Google Search Console &#8211; prüfe Keywords und aufgerufene Seiten sowie Klicks</li>
<li>Ubersuggest &#8211; recherchiere Keywords und prüfe das Ranking deiner Keywords und Artikel</li>
<li>Google Suche &#8211; öffne Google und tippe in die Leiste site:domain (in meinem Fall site:nadinschmidt.com). So erkennst du, welche deiner Artikel überhaupt bei Google gelistet sind und um welche du dich noch in der Search Console kümmern solltest</li>
</ul>
<p>&nbsp;</p>
<p><strong>Glückwunsch, du bist jetzt bereit zum Erstellen deiner Beiträge!</strong></p>
<p>Bei Fragen melde dich gerne.</p>
<div class="et_pb_section et_pb_section_15 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_7 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_14  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_7">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_15 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_14  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_15  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_7_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_7 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/bloglayout-divi-erstellen/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Schnelle Hilfen für DIVI-Webdesigner</title>
		<link>https://nadinschmidt.com/tricks-divi/</link>
					<comments>https://nadinschmidt.com/tricks-divi/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Wed, 23 Mar 2022 15:06:06 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[DIVI]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=243791</guid>

					<description><![CDATA[DAS solltest du wissen, wenn du Webseiten mit Divi erstellst. Für meine DIVI Webseiten hab ich so meine Tricks &#38; Kniffe, die ich täglich anwende. Manche davon sind auf den ersten Blick nicht direkt erkennbar. Seit März 2021 gibt es kaum Tage, an denen ich nicht die blau/grün/grauen DIVI-Linien einer Website vor mir sehe. Manchmal [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>DAS solltest du wissen, wenn du Webseiten mit Divi erstellst.</p>
<p>Für meine DIVI Webseiten hab ich so meine Tricks &amp; Kniffe, die ich täglich anwende. Manche davon sind auf den ersten Blick nicht direkt erkennbar.</p>
<p>Seit März 2021 gibt es kaum Tage, an denen ich nicht die blau/grün/grauen DIVI-Linien einer Website vor mir sehe. Manchmal brauche ich nur 2-3 Klicks, um die Webseiten meiner Kunden ein gutes Stück hübscher zu machen.</p>
<p>Ich zähle dir hier nach und nach auf, was mir so auffällt und was dir das Leben als DIVI Webdesigner erleichtern kann!</p>
<div class="et_pb_section et_pb_section_17 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_8 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_16  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_8">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_17 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_16  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_17  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_8_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_8 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Aufbau &amp; Arbeitsweise von DIVI verstehen</h2>
<p>Etwas, das für mich selbstverständlich war &#8211; für Menschen ohne gute räumliche Vorstellungskraft ist das nicht so:</p>
<p>DIVI arbeitet mit Ebenen. Das heißt, zuerst kommt der Abschnitt, darauf/darin die Zeile und im Innersten das Modul.</p>
<p>Im Abschnitt können natürlich mehrere Zeilen nebeneinander und darin wiederum mehrere Module enthalten sein. Dank dieser Ebenen hast du extrem viele Möglichkeiten, mit Hintergründen, Farben und Bildern zu arbeiten, um Effekte zu erzeugen.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244383 " src="https://nadinschmidt.com/wp-content/uploads/2022/05/Ebenen-DIVI.jpg" alt="" width="638" height="478" srcset="https://nadinschmidt.com/wp-content/uploads/2022/05/Ebenen-DIVI.jpg 638w, https://nadinschmidt.com/wp-content/uploads/2022/05/Ebenen-DIVI-480x360.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 638px, 100vw" /></p>
<h2>Hover- &amp; Mobiloptimierung mit wenigen Klicks für DIVI Webdesigner</h2>
<p>Du kannst so gut wie ALLES in DIVI an Hover und Mobil anpassen. Das blöde dabei: die Funktion ist erstmal versteckt. Erst, wenn du darauf achtest, findest du sie.</p>
<p>So kannst du für jede einzelne, noch so kleine Einstellung eine separate Einstellung für Mobil und Tablet hinterlegen und tolle Hovereffekte machen.</p>
<p>Du willst zB, dass ein Bild beim drüberhovern dunkler, heller oder farbig wird? Dann machst du das mit der Hover-Einstellung von DIVI.</p>
<p>Du willst, dass Mobil ein anderes Bild angezeigt wird als am Desktop? Oder dass die Trennlinie mobil kleiner ist als am Desktop?</p>
<p class="p1">[ma-gdpr-youtube video=&#8220;https://www.youtube.com/watch?v=lic9QCVzMCY&#8220;]</p>
<p><strong>So gehts:</strong></p>
<p>Öffne die Einstellungen eines Moduls/Zeile/Abschnitts und hovere mit der Maus über den weißen, freien Bereich rechts von der Überschrift. Manchmal musst du auch einfach ins weiße klicken. Dann tauchen die Symbole auf, du kannst auf das kleine Handy für Mobileinstellung und auf den Mauszeiger für Hovereffekte klicken und den Inhalt/Design darunter anpassen.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243796 " src="https://nadinschmidt.com/wp-content/uploads/2022/03/DIVI-Hover-und-Mobil.png" alt="Hover und Mobiloptimierung deiner DIVI Website" width="615" height="636" /></p>
<p>Vorsicht: beachte, dass diese Einstellung jetzt geöffnet ist und du sie wieder deaktivieren musst (wieder draufklicken), wenn du eine allgemeine Einstellung vornehmen willst. Ansonsten werden alle Änderungen nur für das ausgewählte Gerät oder den Hover vorgenommen.</p>
<p>Diese Einstellmöglichkeit findest du bei so gut wie allem: Texte, Farben, Größen, Abstände. Einfach mal mutig ins Leere klicken!</p>
<div class="et_pb_section et_pb_section_19 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_9 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_18  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_9">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_19 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_18  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_19  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_9_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_9 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Presets als DIVI-Webdesigner richtig verwenden</h2>
<p>DIVI bietet dir die geniale Möglichkeit, für jedes Modul das Standard-Preset anzupassen und weitere Presets zu erstellen.</p>
<p>Im Theme Customizer nimmst du die absoluten Basiseinstellungen vor. Schriftgröße, Farbe, Links, Button,&#8230;</p>
<p>In den Presets kannst du jedes Modul nochmal ganz explizit designen und dieses Design überall wieder abrufen. Entweder änderst du dafür das Standard-Preset oder du legst aus deinem aktuellen Design ein neues Preset an, wenn du das Standard-Preset nicht überschreiben möchtest.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243820 " src="https://nadinschmidt.com/wp-content/uploads/2022/03/Presets-DIVI.jpg" alt="Presets DIVI" width="606" height="518" /></p>
<p>Dass du das Preset global bearbeitest, erkennst du übrigens daran, dass das Modulfenster nicht mehr lila, sondern grau ist.</p>
<p>Wenn du dann ein neues Modul verwendest, erscheint es entweder direkt im geänderten Standard-Preset oder du wählst einfach das passende Preset aus.</p>
<p>Mach das mit den Presets sauber und ordentlich, dann kannst du mit wenigen Klicks deine ganze Website bearbeiten.</p>
<p>Ein Beispiel: du hast zwei unterschiedliche Buttons. Das Standardpreset enthält einen roten Button, das Preset <em>Buttons blau</em> einen blauen. Wenn du jetzt den blauen Button auf deiner gesamten Website in einen grünen verwandeln möchtest, gehst du in die Preseteinstellungen und änderst sie hier ab (das Modulfenster ist grau). Schon sind alle blauen Buttons grün.</p>
<p>Solltest du ein Preset ändern und im Modul zeigt sich keine Änderung, dann klick einmal auf die 3 Punkte rechts oben im Modul und setze die Modul-Stiles zurück.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-245748 " src="https://nadinschmidt.com/wp-content/uploads/2022/11/DIVI-Modul-Styles.png" alt="" width="488" height="492" srcset="https://nadinschmidt.com/wp-content/uploads/2022/11/DIVI-Modul-Styles.png 488w, https://nadinschmidt.com/wp-content/uploads/2022/11/DIVI-Modul-Styles-480x484.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 488px, 100vw" /></p>
<h2>DIVI Bibliothek sinnvoll nutzen</h2>
<p>Wenn du deine DIVI-Website erstellst, willst du bestimmte Bereiche immer wieder verwenden, ohne sie dauernd neu aufbauen zu müssen.</p>
<p>In der DIVI Bibliothek kannst du ganze Abschnitte, Zeilen und Module speichern. Das macht Sinn, wenn du bestimmte Elemente auf mehreren Seiten einfügen willst, zum Beispiel Kontaktformulare.</p>
<p>Wenn du den Haken bei „als globales Element speichern“ setzt, kannst du das Element auf mehreren Seiten einsetzen und Änderungen werden auf allen Seiten umgesetzt. Beispiel: du hast auf jeder Seite ein Kontaktformular als globales Element. Nun fügst du den Datenschutzhinweis hinzu. Dieser wird dann in jedes globale Kontaktformular eingefügt.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243823 " src="https://nadinschmidt.com/wp-content/uploads/2022/03/DIVI-Bibliothek-globales-Element.jpg" alt="DIVI Bibliothek globales Element" width="522" height="458" /></p>
<p>Globale Elemente erkennst du an einem knallgrünen Rahmen. Beachte: wenn du einen ganzen Abschnitt als globales Element deklariert hast und ein Modul entfernst, wird es auch in der Bibliothek aus dem Abschnitt entfernt.</p>
<p>Ein Element aus der Bibliothek fügst du ein, indem du auf das Plus drückst und dann auf den Reiter DIVI Bibliothek wechselst. Du musst dazu natürlich entsprechend im Abschnitt, der Zeile oder im Modul sein, d.h. du kannst bei einer Modulauswahl keinen Abschnitt aus der Bibliothek laden.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243822 " src="https://nadinschmidt.com/wp-content/uploads/2022/03/DIVI-Bibliothek.jpg" alt="DIVI Bibliothek" width="457" height="371" /></p>
<h2>Module in DIVI für die Mobilansicht ausblenden</h2>
<p>Du kannst mit wenigen Klicks die Darstellung für Mobil und Tablet anders gestalten. Blende zum Beispiel unwichtige Elemente in der Mobilansicht ganz aus oder erstelle sie neu und blende das entsprechende für Desktop/Mobil aus.</p>
<p>Dazu gehst du einfach im Abschnitt/Zeile/Modul auf <em>Erweitert</em> → Sichtbarkeit und setze deine Auswahl.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243873" src="https://nadinschmidt.com/wp-content/uploads/2022/03/Elemente-mobil-ausblenden-1024x821.png" alt="" width="641" height="514" /></p>
<h2>Classic Editor statt Gutenberg für Beiträge in DIVI aktivieren</h2>
<p>Du findest den Classic Editor viel besser für deine Beiträge als den Gutenberg-Editor? Dafür brauchst du bei DIVI kein extra Plugin.</p>
<p>Es hat übrigens einen guten Grund, wieso du Beiträge im Classic Editor schreiben solltest. Wenn du das Theme wechselst, dann sind alle deine Beiträge noch vorhanden. Wenn du sie im DIVI Builder erstellst, werden sie beim Themewechsel gelöscht. Seiten nachzubauen geht ja ziemlich fix, aber Beiträge können sich über die Jahre ja ansammeln.</p>
<p>Wechsel in die <em>DIVI-Optione</em>n, geh zum Reiter <em>Builder</em> und <em>Fortgeschritten</em>.</p>
<p>Jetzt kannst du einfach den klassischen Editor aktivieren.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244186 " src="https://nadinschmidt.com/wp-content/uploads/2022/05/DIVI-Classic-Editor.jpg" alt="" width="684" height="351" /></p>
<h2>DIVI Builder für Beiträge deaktivieren</h2>
<p>Damit du gar nicht erst in Versuchung kommst, bei deinen Beiträgen auf den DIVI Builder zu klicken, kannst du ihn unter den DIVI Theme Optionen deaktivieren.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244805 " src="https://nadinschmidt.com/wp-content/uploads/2022/07/DIVI-Classic-Editor-Beitraege.png" alt="" width="673" height="220" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Mit 3 Klicks sofort die Mobilansicht verbessern</h2>
<p>Wenn du deine DIVI Website erstellt hast und sie dann mobil anschaust, wirst du folgendes feststellen: Am Desktop sieht alles toll aus, aber Mobile klebt der Text am Bildschirmrand? Ich persönlich mag das überhaupt nicht und hab lieber einen kleinen Abstand zwischen Rand und Modul. Das geht ganz fix mit wenigen Klicks für die ganze Website!</p>
<ol>
<li>Geh im visuellen Builder in eine beliebige Zeile (grün).</li>
<li>Öffne das Preset und bearbeite das Standardpreset. Das Modul wird nun grau. Weiter oben in diesem Artikel habe ich die Presets erklärt.</li>
<li>Wechsel in den Reiter <em>Design</em> und öffne <em>Größe.</em></li>
<li>Jetzt stellst du die Breite für Tablet und Mobil auf ein paar % weniger. So, dass es dir gefällt. Speichern.</li>
<li>Die Zeilen werden nun auf der ganzen Website in der mobilen Ansicht etwas eingerückt und du hast einen gleichmäßigen Rand. Da, wo du das nicht haben möchtest, gehst du einfach in die normalen Einstellungen der Zeile und stellst es auf 100% zurück.</li>
<li>Alternativ: Statt der <em>Größe</em> gibst du bei <em>Zwischenraum</em> einen Abstand von 1% oder 10 px rechts und links an.</li>
</ol>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244188 " src="https://nadinschmidt.com/wp-content/uploads/2022/05/DIVI-mobiler-Abstand-zum-Rand.jpg" alt="" width="590" height="610" /></p>
<p>Wenn es nicht funktioniert hat, dann hast du bereits in manchen Zeilen vorher den Abstand manuell angepasst. Manuelle Einstellungen werden wichtiger gestuft als globale.</p>
<h2>Trick 17 für responsive DIVI Layouts</h2>
<p>Verzichte auf feste Höhen!</p>
<p>Arbeite mit Zwischenräumen (vor allem mit dem Innenabstand/padding). Du kannst auch statt px einfach Prozentzahlen eintragen.</p>
<p>So bleiben deine Designs responsive und passen sich perfekt an jedes Gerät an.</p>
<p>Statt Höhen arbeite lieber mit der Breite, ebenfalls meist in Prozent. Feste Höhen solltest du sparsam einsetzen, zB für Bilder, die immer exakt gleich aussehen sollen. Dann darauf achten, dass die Breite auf jedem Handy gut aussieht (und die können bis zu 300px schmal sein).</p>
<h2>DIVI Infomodule linksbündig anzeigen lassen</h2>
<p>Standardmäßig sind die Infomodule mittig platziert. Wenn du versucht hast, das über den Text mittig zu stellen, bist du sicher verzweifelt.</p>
<p>So gehts ganz einfach:</p>
<p>Öffne das Informationsmodul, wechsel in den Reiter <em>Design</em>, dann zu <em>Größe</em> und setze den <em>Inhalt</em> auf 100%. Voilá.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244515 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/DIVI-Informationsmodul-linksbuendig.png" alt="" width="736" height="475" /></p>
<h2>Eigenen Footer in DIVI erstellen</h2>
<p>Nerven dich die Footer und Widgets? Dann erstelle einen eigenen Footer! So mach ich das immer.</p>
<p>Du kannst dafür die Einstellungen für den Footer im Customizer ganz auslassen.</p>
<p>Stattdessen wechselst du in den Theme Builder und klickst in der Standardvorlage auf die eigene Fußzeile. Jetzt kannst du eine eigene Fußzeile erstellen und sie ganz frei, wie jede andere Seite auch, designen.</p>
<p class="p1">[ma-gdpr-youtube video=&#8220;https://www.youtube.com/watch?v=P9BJLhszFlo&#8220;]</p>
<h2>Header in Divi ausblenden</h2>
<p>Du kannst den Header (also die Menüleiste) in Divi komplett für alle Seiten ausblenden oder nur für deine jeweilige.</p>
<ol>
<li>Ganz ausblenden: wechsel dazu im Backend auf Divi -&gt; Theme Builder. Dort, wo G<em>lobale Kopfzeile hinzufügen</em> steht, kannst du auf das Auge klicken und so die Menüleiste Websiteweit ausblenden. Du kannst das natürlich auch für jede Seite einzeln über den Theme Builder machen. Speichern nicht vergessen.</li>
<li>Um eine Landingpage zu erstellen, also nur auf einzelnen Seiten den Header und den Footer auszublenden, wechselst du auf die Seite im Backend. Klicke auf Seite bearbeiten und suche nach der Einstellung „Seiten-Attribute&#8220;. Wechsel hier von Standard-Template zu Blankpage. Speichern. Da jetzt auch der Footer auf dieser Seite ausgeblendet wurde, denk daran, den Link zu Impressum und Datenschutz einzufügen.</li>
</ol>
<p>[ma-gdpr-youtube video=&#8220;https://www.youtube.com/watch?v=Ms8Kgo6bxks&#8220;]</p>
<h2>Du kommst an die Bearbeitungsleiste eines Moduls in DIVI nicht ran?</h2>
<p>Manchmal sind Elemente so dicht, dass die Wekzeugleiste des DIVI-Builders nicht lang genug da ist, bis du klicken kannst.</p>
<p>Dann mach einfach einen Doppelklick in das Modul/die Zeile/den Abschnitt. 🙂</p>
<p>Schon öffnen sich die Einstellungen.</p>
<p><strong>Alternativ: </strong></p>
<p>Klick unten in der mitte die Leiste auf. Dann geh zum vorletzten Symbol ganz links.</p>
<p>Jetzt siehst du alle Module und kannst hier in die Einstellung gehen. Z.B. den Außenabstand ändern, um wieder besser an das Modul zu kommen.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244806 " src="https://nadinschmidt.com/wp-content/uploads/2022/07/DIVI-Visual-Builder.jpg" alt="" width="795" height="358" /></p>
<p>&nbsp;</p>
<p>Was bereitet dir bei DIVI Kopfschmerzen? Sag es mir und ich nehme es mit auf!</p>
<div class="et_pb_section et_pb_section_21 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_10 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_20  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_10">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_21 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_20  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_21  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_10_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_10 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/tricks-divi/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>DIVI zeigt (Blog-) Module nicht an? So behebst du Caching-Probleme</title>
		<link>https://nadinschmidt.com/darstellungsfehler-in-divi-beheben/</link>
					<comments>https://nadinschmidt.com/darstellungsfehler-in-divi-beheben/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Thu, 03 Feb 2022 22:19:10 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[DIVI]]></category>
		<category><![CDATA[WordPress & Website]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=243244</guid>

					<description><![CDATA[Du änderst was an deiner DIVI Website und merkst plötzlich, dass einige Seiten ganz anders aussehen? Blogmodule sind verschwunden, Kontaktformulare ziehen sich zusammen&#8230; Ruhe bewahren. Das sind leidige Caching-Probleme, die sich ganz einfach beheben lassen. Caching soll die Ladezeiten deiner Website verbessern, indem Code gebündelt vorgespeichert wird (grob gesagt). Da kann schon mal was schiefgehen [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Du änderst was an deiner DIVI Website und merkst plötzlich, dass einige Seiten ganz anders aussehen? Blogmodule sind verschwunden, Kontaktformulare ziehen sich zusammen&#8230; Ruhe bewahren. Das sind leidige Caching-Probleme, die sich ganz einfach beheben lassen.</p>
<p>Caching soll die Ladezeiten deiner Website verbessern, indem Code gebündelt vorgespeichert wird (grob gesagt). Da kann schon mal was schiefgehen und dann gibt das leider auch mal Probleme in der Darstellung.</p>
<p><strong>Wichtig: bevor du startest, mach ein Backup! Wie das geht, erfährst du <a href="https://nadinschmidt.com/backup-fuer-deine-wordpress-website/">hier</a>.</strong></p>
<p>Die folgenden Schritte kannst du auch in anderer Reihenfolge durchgehen, so machen sie halt am meisten Sinn.</p>
<div class="et_pb_section et_pb_section_23 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_11 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_22  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_11">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_23 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_22  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_23  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_11_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_11 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>1. DIVI-Cache leeren &#8211; Module korrekt anzeigen lassen</h2>
<p>Zuerst leerst du den Cache bei DIVI direkt. Das solltest du möglichst immer machen, wenn du größere Änderungen an deiner Website vorgenommen hast. Von diesem Cache wissen die wenigsten, dabei ist das der Wichtigste.</p>
<p>How to: Geh im WordPress-Backend in der linken Menüleiste auf DIVI → Theme-Optionen → Builder → Fortgeschritten</p>
<p>und klickst da auf <em>Klar.</em>.. die Übersetzung von <em>clear</em>.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243247" src="https://nadinschmidt.com/wp-content/uploads/2022/02/DIVI-Cache-leeren.png" alt="" width="647" height="237" /></p>
<p>Öffne die Website jetzt in einem anderen Browser oder im Inkognito Modus und schau, wie sie aussieht. Immernoch nicht gut? Dann weiter.</p>
<h2>2. Browser-Cache leeren &#8211; Anzeigefehler bei dir beheben</h2>
<p>Es kann sein, dass nur dein Browser das Darstellungs-Problem aufweist. Denn wenn deine Website im Inkognito-Modus, mit einem anderen Browser wie z. B. Safari, Firefox oder Chrome gut aussieht, nur bei deinem aktuellen nicht, dann liegt es am Browser-Cache.</p>
<p>How to: Geh dazu in die Einstellungen deines Browsers und schau nach Cache, Browserdaten oder Cookies.</p>
<p>Bei Chrome sind die hier:</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243250" src="https://nadinschmidt.com/wp-content/uploads/2022/02/Google-Chrome-Einstellungen.png" alt="" width="457" height="439" /></p>
<p>Dann findest du sie unter Browserdaten und löschst einfach mal soviel du magst (theoretisch reichen die letzten 1–2 h. Der Cache kann aber durchaus ab und an mal geleert werden). Pass auf, du wirst jetzt auch aus deinem WordPress abgemeldet. Allgemein wirst du von allen Logins abgemeldet, denn das sind eben Cookies.</p>
<p>&nbsp;</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243249" src="https://nadinschmidt.com/wp-content/uploads/2022/02/Chrome-Cookies-loeschen.png" alt="" width="751" height="247" /></p>
<h2>3. Cache von Performance-Plugins &#8211; zeigt definitiv jedes Modul in DIVI wieder an!</h2>
<p>Gerade wenn du Plugins wie WP Rocket nutzt, wirst du sehr häufig Darstellungsprobleme in DIVI haben. Das minimiert zwar super, aber manchmal halt zu viel.</p>
<p>Such die Einstellungen deines Plugins (manchmal sind die auch unter Werkzeuge oder Einstellungen im WordPress-Menü) und suche nach einer Möglichkeit, wie du den Cache (auch CSS-Cache) leeren kannst.</p>
<p>Bei WP Rocket ist das der zweite Punkt unter Dashboard (in den Plugin-Einstellungen). Bei vielen Plugins kannst du den Cache auch direkt oben in der Schnellzugriffleiste in WordPress leeren. Einfach mal die Augen offen halten, wenn du eingeloggt bist.</p>
<div class="et_pb_section et_pb_section_25 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_12 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_24  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_12">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_25 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_24  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_25  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_12_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_12 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Wie du vermeiden kannst, dass Module in DIVI falsch angezeigt werden</h2>
<p>DIVI hat seit dem Performance-Update 2021 einen zusätzlichen Optionen-Punkt. Dort findest du die Einstellungen zur Optimierung der Ladezeit. Die sind super und machen DIVI um viele Ecken schneller (was nicht so einfach ist), können dir aber auch die Darstellung zerschießen.</p>
<p>Wenn du häufiger Probleme hast und große Änderungen an deiner Website vornehmen willst, dann schalte Dynamic und Critical CSS mal ab. Zumindest so lange, bis du durch bist. Aktiviere es dann wieder, leere den Cache wie oben beschrieben und fertig.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-243251" src="https://nadinschmidt.com/wp-content/uploads/2022/02/DIVI-Performance-Optionen.png" alt="DIVI Performance Optionen" width="577" height="503" /></p>
<p>Beachte, dass sich ein dauerhaftes Abschalten auf deine Ladezeiten auswirkt.</p>
<p>Auf welche Fehler triffst du öfter mit DIVI?</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/darstellungsfehler-in-divi-beheben/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Bloggen für SEO-Muffel &#8211; In 6 Steps deinen Blog für SEO optimieren</title>
		<link>https://nadinschmidt.com/blogartikel-fuer-seo-optimieren/</link>
					<comments>https://nadinschmidt.com/blogartikel-fuer-seo-optimieren/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Tue, 11 Jan 2022 13:37:17 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[SEO]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=242863</guid>

					<description><![CDATA[Blogartikel schreiben, einen Blog starten, Beiträge, Beiträge, Beiträge und dann noch SEO optimiert! Wozu? Um online besser gefunden zu werden! An jeder Ecke hörst du das, auch von mir. Macht auch Sinn, denn in deinen Webseiten bist du stark begrenzt, was SEO angeht. Dort fokussierst du dich auf Design und deine Leistung, während du mit [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Blogartikel schreiben, einen Blog starten, Beiträge, Beiträge, Beiträge und dann noch SEO optimiert! Wozu?</p>
<p>Um online besser gefunden zu werden!</p>
<p>An jeder Ecke hörst du das, auch von mir. Macht auch Sinn, denn in deinen Webseiten bist du stark begrenzt, was SEO angeht. Dort fokussierst du dich auf Design und deine Leistung, während du mit deinem Blog die Möglichkeit hast, so über Themen zu schreiben, dass du beim googeln auch gefunden wirst.</p>
<p><em>Kurzer Exkurs für alle, die neu dazukommen:</em></p>
<p>SEO ist die Suchmaschinenoptimierung. Damit beeinflussen wir Google durch Inhalt und technische Details, ob unser Beitrag/Seite bei einer Google-Suche als Ergebnis gezeigt werden soll und vor allem WO, also auf welcher Ergebnis-Seite.</p>
<h2>Wozu ein Blog? Und wozu SEO?!</h2>
<p>Ich habs eben schon kurz angerissen. Content ist King und je mehr von dir im Internet rumschwirrt, desto höher die Chance, gefunden zu werden. Wenn du Online-Unternehmer bist und gefunden werden willst, ohne lästige Akquise, dann starte einen Blog! Einen guten, hilfreichen selbstverständlich.</p>
<p>Der lässt sich super easy in deine WordPress-Website integrieren, kann ganz toll mit DIVI gestaltet werden und dann musst du dich einfach nur wenigstens 2-4 mal im Monat auf den Hosenboden setzen und einen Artikel schreiben! Der muss nicht immer super lang sein, hauptsache du schreibst.</p>
<p>Teile dein Wissen, deine Meinung, schaffe Vertrauen und vor allem &#8211; nutze SEO! Du kannst zu jedem Teilbereich einen Artikel schreiben, der bei Google gefunden werden kann und so deine Kunden zu dir bringt.</p>
<p>Viele Kunden haben noch kein Problem-, geschweige denn Lösungsbewusstsein. Das heißt, Kundin A hat vielleicht dauernd Magenschmerzen, weiß aber noch nicht, dass du als der Heilpraktiker um die Ecke dabei helfen kannst.</p>
<p>Sie googelt nach „chronische Magenschmerzen“ und stößt auf deinen Artikel. Von einem Termin bei dir ist sie noch weit weg, sie will erstmal schauen, welche Informationen sie dazu findet. Dein Artikel hilft genau da! Sie versucht deine Tipps, es tritt Besserung ein und du hast ihr Vertrauen gewonnen. Beim nächsten Problemt steigt die Chance, dass sie dich direkt aufsuchen wird und in Kontakt mit dir tritt.</p>
<p>Doch damit diese Magenschmerzkundin deinen Artikel überhaupt finden kann brauchst du SEO! Denn Google muss wissen, um was es in deinem Artikel geht, um ihn jemandem zeigen zu können. Deine Kunden wiederum müssen deine Artikel gerne lesen, damit Google sie gerne anzeigt. Thats it.</p>
<div class="et_pb_section et_pb_section_27 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_13 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_26  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_13">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_27 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_26  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_27  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_13_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_13 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Deine Blogartikel für SEO optimieren</h2>
<p>Weißt du, wie oft ich angefragt werde, bereits vorhandene Beiträge für SEO zu optimieren? Oft. Dabei ist das gar nicht so schnell mal gemacht und macht auch einfach wenig Sinn. Geschweige denn Spaß.</p>
<p>Es ist super wichtig und DIE Möglichkeit, in den Suchergebnissen auf Seite 1 zu gelangen, wenn du super Blogartikel schreibst. Dabei gibt es aber einiges zu beachten, was sich erstmal kompliziert anhört. Ist es aber nicht. Eigentlich ist SEO-bloggen ganz einfach.</p>
<h3>Die unterschiedlichen Stufen der SEO-Beiträge</h3>
<p>Du kannst ganz deep gehen und dich wirklich intensiv damit befassen oder wir halten es so praktikabel wie möglich.</p>
<p>Deep wäre das Bloggen vor allem für Google. Damit schreibst du in erster Linie nicht Artikel für Menschen, sondern recherchierst ganz genau, wonach gesucht wird, wieviele Kokurrenz-Beiträge es gibt, gibst deinem Artikel eine klare Struktur und beachtest Wortwiederholungen/-anzahl. Damit steigst du im Ranking, Google findet dich toll und Menschen kommen auch auf deine Beiträge. Nur Spaß macht das nicht so ganz, weil du weniger für Menschen schreibst.</p>
<p>Wir machen das zwar im Folgenden auch ein bisschen, aber gemäßigt. Denn wir sind ja hier in der Situation, dass wir SEO sowieso doof finden, also wollen wir es so praktikabel und leicht umsetzbar wie möglich.</p>
<h2>Finger weg von Beitrag schreiben und danach für SEO optimieren (lassen)</h2>
<p>Ein paar Dinge musst du direkt von vorneherein beachten. Ich weiß noch, dass ich mich anfangs auch dagegen gewehrt habe. Irgendwas in mir wollte nicht nach Keywords schreiben. Dann hab ich meine ersten Beiträge geschrieben und dachte mir: „So, jetzt hast du so viel Arbeit reingesteckt und keiner liest sie!&#8220; Also hab ich sie nachbearbeitet, was echt ne Schweinearbeit ist.</p>
<p>Schauen wir uns doch lieber an, wie du deine Beiträge gleich für SEO optimiert verfassen kannst. Mach keine Wissenschaft draus, aber halte dich an einige wenige, einfache Regeln!</p>
<h3>Step 1: Brainstorme dein grobes Thema</h3>
<p>Mach dir Gedanken, worüber du schreiben möchtest. Überlege dir, was Kunden dich oft fragen oder auf welche Probleme du häufig stößt (bei mir z.B. das Thema Websiteinhalte und SEO!).</p>
<p>Notiere dir deine Ideen. Ich nutze dafür Apple Notizen und Post-its. Sobald mir etwas einfällt, schreibe ich es auf und wenn ich Zeit habe, wird ein Beitrag daraus.</p>
<h3>Step 2: Recherchiere ein passendes Keyword</h3>
<p>Jetzt gehst du her und rufst ein Keyword-Tool auf. Ich nutze dafür <a href="https://app.neilpatel.com/en/ubersuggest/keyword_ideas?keyword=seo%20blogartikel&amp;mode=keyword&amp;locId=2276&amp;lang=de" target="_blank" rel="noopener">Ubersuggest</a>.</p>
<p>Überlege dir, welche Worte in Zusammenhang zu deinem Thema stehen. Für diesen Beitrag wollte ich das Thema SEO und Blogartikel erklären. Also habe ich bei Ubersuggest genau diese Worte eingegeben, in verschiedenen Varianten.</p>
<p>SEO Blogartikel, Beiträge SEO optimieren, Blog SEO,&#8230; Alles was dir einfällt, alles wonach gesucht werden könnte, wenn jemand einen optimierten Blogartikel schreiben möchte.</p>
<h4>Ubersuggest auswerten</h4>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242867" src="https://nadinschmidt.com/wp-content/uploads/2022/01/SEO-Blogartikel.jpg" alt="SEO optimierte Blogartikel schreiben" width="695" height="386" /></p>
<p>Ich hatte mich als Keywords für eine Mischung aus <em>SEO Blogartikel</em> und <em>Blogbeiträge SEO optimieren</em> entschieden.</p>
<p>Du siehst hier einmal, nach welchem Keyword ich gesucht habe und welche ähnlichen Keywords (Keyphrases) es gibt.</p>
<p>Der Begriff <strong>Volume</strong> sagt dir, wie oft pro Monat dieser Satz in die Google-Suchleiste eingetippt wurde.</p>
<p>Unter <strong>Search Results</strong> siehst du, welche Ergebnisse dazu angezeigt werden (deine Konkurrenzartikel).</p>
<p>Die <strong>SEO-Difficulty</strong> gibt an, wie schwer es für dich wird, dazu einen Artikel zu schreiben, der auf Seite 1 platziert wird. Je niedriger und grüner der Wert, desto einfacher.</p>
<p><strong>Achtung</strong>: Ein grüner Wert bringt dir nichts, wenn keiner danach sucht!</p>
<p>Du kannst hier austesten und bisschen spielen. Je höher die Volume und je niedriger die SEO-Difficulty, desto besser für dich.</p>
<p><em>CPC</em> (=Cost per Click) und <em>Paid Difficulty</em> lassen wir außen vor. Beide Begriffe sind relevant, sobald du Google Ads schalten möchtest.</p>
<h2>Schreibe jetzt deinen SEO-optimierten Blogbeitrag</h2>
<p>Wenn du loslegst, behalte folgende Regeln im Hinterkopf:</p>
<ol>
<li>Baue direkt in die H1 (1. Überschrift, die schreibst du in WordPress direkt in die Beitragszeile, die über dem eigentlichen Text steht) deine Keywords ein. Bei mir: <em>Bloggen für SEO-Muffel &#8211; In 6 Steps deinen Blog für SEO optimieren.</em></li>
<li>Starte den Artikel mit einem Einleitungssatz, der das Keyword und Thema sofort aufgreift.</li>
<li>Gliedere deinen Text in Abschnitte und verwende hierarschisch die Headlines 2-4. Wiederhole in den Headlines deine Keywords!</li>
<li>Verwende auch in deinem Fließtext ab und an dein Keyword, schließlich dreht sich der Text darum</li>
</ol>
<div class="et_pb_section et_pb_section_29 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_14 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_28  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_14">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_29 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_28  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_29  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_14_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_14 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h3>Step 3: Die Headlines deines SEO-optimierten Blogartikel</h3>
<p>Schreib keine Headlines nach Lust und Laune, um was hervorzuheben, sondern um deinem Artikel eine Struktur zu geben.</p>
<p>Wenn du etwas betonen möchtest, dann mach das zwischendurch mit einer Fettung oder einem Zitat, aber in die Überschrift gehört das nicht!</p>
<p>In deine Headlines müssen Keywords und knappe Aussagen, die widerspiegeln, worum sich dein Artikel dreht. In WordPress wählst du für die Headlines die Formatierungen H1-H4 (oder 6) und baust Keywords ein.</p>
<h4>Verwende Headlines, die hierarchisch aufeinander aufbauen</h4>
<p><strong>Deine H1 ist die Beitragsüberschrift:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242886" src="https://nadinschmidt.com/wp-content/uploads/2022/01/Headline-1-Beitragsueberschrift.png" alt="Headline 1 - Beitragsüberschrift" width="716" height="105" /></p>
<p><strong>Hier siehst du die Headlines:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242888" src="https://nadinschmidt.com/wp-content/uploads/2022/01/Headlines.png" alt="Headlines Blog" width="357" height="374" /></p>
<p>Davon verwendest du im eigentlichen Beitrag nur noch die Überschriften 2-6, während dein Fließtext &#8222;Absatz&#8220; ist. Die Überschriften und Absätze sollen logisch aufeinander aufbauen.</p>
<p><strong>Ich zeige dir das mal an am Beispiel dieses Beitrags:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242890" src="https://nadinschmidt.com/wp-content/uploads/2022/01/Ueberschriftenhierarchie.png" alt="Überschriftenhierarchie Blogbeitrag SEO" width="621" height="507" /></p>
<p>Was du hier siehst, ist das Inhaltsverzeichnis, dass sich automatisch aus meinen Überschriften 2-4 bildet. Ich nutze dafür das Plugin <em>Easy Table of Contents</em>. Die Überschriften bauen sinnvoll aufeinander auf und geben an, worum es im Absatz darunter geht. Google liebt das und deine Leser können sich daran orientieren. So ein Inhaltsverzeichnis ist immer super, gerade für lange Beiträge.</p>
<h3>Step 4: Pass deinen Permalink an dein SEO-Keyword an</h3>
<p>Vergiss nicht, den Permalink zu kürzen. Mach ihn so kurz und aussagekräftig wie möglich, baue im Optimalfall auch Keywords ein.</p>
<p>Wenn du bereits vorhandene Permalinks ändern möchtest, vergiss nicht den alten Link auf den neuen umzuleiten (z.B. mit Rankmath oder dem Plugin <em>Redirection</em>).</p>
<h3>Step 5: Füge ein passendes Bild zu deinem Blogbeitrag hinzu</h3>
<p>Vergiss dabei nicht, in der Mediathek die Alternative Bildbeschreibung auszufüllen und Keywords einzubauen. Du kannst dich dazu meist an deinem Beitragstitel orientieren.</p>
<h3>Step 6: Fülle SEO-Titel und Metabeschreibung für deinen neuen Beitrag aus</h3>
<p>Sicher arbeitest du mit einem Plugin wie Yoast oder Rank Math.</p>
<p>Unter jedem Beitrag kannst du einfach Titel und Beschreibung ausfüllen.</p>
<p>SEO-Titel und Metabeschreibung sind die kleinen Textchen, die bei Google als Vorschau im Suchergebnis angezeigt werden.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-242874" src="https://nadinschmidt.com/wp-content/uploads/2022/01/SEO-Titel-und-Metabeschreibung.png" alt="Beispiel SEO-Titel und Metabeschreibung für optimierte Blogbeiträge" width="712" height="223" /></p>
<p>Auch hier gilt natürlich: Keywords einbauen! Du kannst dich für den SEO-Titel wieder an deinem Beitragstitel orientieren, deine Keywords müssen enthalten sein.</p>
<p>Die Metabeschreibung geht sogar noch ein Stückchen weiter: hier kannst du weitere Keywords oder andere Varianten einbauen, die so in deinem Beitragstext nicht vorkommen. Schließe die Metabeschreibung mit einer Handlungsaufforderung (CTA) wie „Lies hier mehr“ oder ähnlichem ab.</p>
<h4>Das Keyword bei Yoast und Rank Math richtig nutzen</h4>
<p>Dein gewähltes SEO-Plugin bietet dir neben Metabeschreibung, SEO-Titel und anderen Funktionen auch die Möglichkeit, deinen Artikel/Seite auf ein spezielles Keyword zu untersuchen. Du kannst diese Hilfestellung annehmen, wenn du auf ein ganz bestimmtes Keyword optimieren möchtest und dir die Vorschläge des Plugins dabei helfen.</p>
<p>Eines meiner Keywords für diesen Beitrag war ja unter anderem SEO. Wenn ich das in die Keyword-Zeile eingebe, hat das keine Auswirkung darauf, nach welchem Keyword Google den Beitrag untersuchen wird. Die Zeile und Hilfe gilt allein mir. Du gibst das Keyword ein und Yoast spuckt dir aus, was du noch verbessern könntest, damit du für dieses Keyword rankst. Wie Google das schlussendlich werten möchte liegt eben noch an weiteren Faktoren.</p>
<p>Wähle das Keyword also sinnvoll. Wenn mein Keyword hier <em>SEO</em> war und das Wort <em>Blogbeitrag</em> aber öfter vorkommt, wird Google sich eher daran orientieren.</p>
<p>Beachte aber, dass Google nicht dumm ist. Google ist eine hochintelligente Software mit vielen, komplexen Algorithmen. Es wertet super gut aus, was in einem Beitrag geschrieben ist und ob das dem Suchenden weiterhelfen könnte. Wenn du ein Keywords 100x in deinem Text stehen hast, der Text aber murks ist, dann merkt Google das.</p>
<p>Merke dir: schreibe für Menschen und behalte Google im Hinterkopf.</p>
<h2>Erstelle dir eine Mind Map für deine suchmaschinienoptimierten Blogartikel</h2>
<p>Halte in einer Mindmap fest, zu welchem Überbegriff du Artikel schreibst. Ordne darunter die verschiedenen Unterthemen an.</p>
<p>Wozu? Achte darauf, nicht mehrere Artikel auf dasselbe Keywords zu optimieren. Verpasse lieber einem wirklich guten Artikel den Feinschliff und bring ihn dazu, gut zu ranken, sonst konkurrieren deine Artikel gegenseitig.</p>
<div class="et_pb_section et_pb_section_31 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_15 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_30  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_15">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_31 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_30  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_31  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_15_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_15 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Optimierte Blogartikel auswerten</h2>
<p>Du kannst nicht prüfen, ob deine Blogartikel gut ankommen, wenn du nicht auswertest. Lege dir dazu ein <a href="https://analytics.google.com/analytics/web/provision/#/provision" target="_blank" rel="noopener">Google Analytics</a> und <a href="https://search.google.com/search-console/about" target="_blank" rel="noopener">Search Console</a> Konto an, verbinde Google Analytics mit deiner Website (Tracking-Code unbedingt DSGVO-konform über ein Cookie-Plugin wie <a href="https://a.paddle.com/v2/click/30363/136624?link=1589" target="_blank" rel="noopener">Borlabs</a>* einfügen!) und schon siehst du jeden Tag, welche deiner Beiträge aufgerufen werden und wie oft.</p>
<p>In der Search Console siehst du auch noch, nach welchen Begriffen gesucht wurde, bevor deine Artikel als Ergebnisse angezeigt wurden (die sogenannten Impressionen). Das sind noch keine Klicks, aber du kannst auf diese Begriffe eingehen und deine Artikel weiter verbessern.</p>
<p>Außerdem kannst du in der Search Console deine Beiträge auch einreichen und indexieren lassen, sonst kann das schonmal ein paar Wochen dauern, bis Google da von selbst drauf stößt.</p>
<h2>Was du machen kannst, wenn dir mal kein Thema zum Bloggen einfällt?</h2>
<p>Suche nach Keywords. Gib einfach mal was aus deinem Bereich ein und schau dir die Zahlen an. Du wirst sofort genug Themen haben, über die du gerne schreiben magst!</p>
<p>Es lohnt sich. Was bei mir aus reiner Information anfing, bringt mir jetzt wenige Monate später regelmäßig Besucher und Anfragen auf die Website. Meine aktive Kundenakquise beträgt quasi 0. Das wollen wir doch alle so, oder nicht?</p>
<h3>Du hast keine Lust auf Keywords und SEO-bloggen?</h3>
<p>Sorry, aber dann gibts auch kein Jammern mehr. Ich mags auch nicht so sehr, einfach drauflosschreiben finde ich viel besser. Der Gedanke, dass meine Texte aber für die Katz sind, wenn sie keiner findet, hat mich zum Umdenken bewogen. Nach 2–3 SEO-Texten lief es dann wie von selbst.</p>
<p>Wie du inhaltlich zum Beitrag schreiben beachten solltest habe ich dir <a href="https://nadinschmidt.com/perfekten-post-schreiben/">hier</a> zusammengefasst.</p>
<p>Wenn du Fragen hast, dann schrei(b)!</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/blogartikel-fuer-seo-optimieren/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>6 sinnvolle WordPress-Plugins (v.a. in Kombi mit Divi)</title>
		<link>https://nadinschmidt.com/must-have-wordpress-plugins/</link>
					<comments>https://nadinschmidt.com/must-have-wordpress-plugins/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Tue, 02 Nov 2021 15:17:24 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[WordPress & Website]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=241926</guid>

					<description><![CDATA[Welche Plugins brauchst du auf deiner WordPress Website unbedingt? Ich bin ein Fan davon, so wenige Plugins (max. 8-12) wie möglich zu verwenden, gerade wenn du Divi verwendest. Denn Divi deckt von Haus aus vieles ab. Ein paar unverzichtbare Plugins für deine WordPress-Website stelle ich dir hier vor: Sinnvolle Plugins für WordPress Es gibt nichts, [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Welche Plugins brauchst du auf deiner WordPress Website unbedingt?</p>
<p>Ich bin ein Fan davon, so wenige Plugins (max. 8-12) wie möglich zu verwenden, gerade wenn du Divi verwendest. Denn Divi deckt von Haus aus vieles ab.</p>
<p>Ein paar unverzichtbare Plugins für deine WordPress-Website stelle ich dir hier vor:</p>
<h2>Sinnvolle Plugins für WordPress</h2>
<p>Es gibt nichts, wofür es kein Plugin gibt. Plugins sind wunderbare Erweiterungen, die dein WordPress in eine riesige Spielwiese verwandeln.</p>
<p>Ein paar davon sind Essentiell, wenn es um Sicherheit, Sicherung und die User Experience geht.</p>
<h2>1. Plugin zur Sicherung deiner Website</h2>
<h3>UpdraftPlus Backups</h3>
<p>Bevor du deine Website aktualisierst oder Änderungen vornimmst, solltest du eine Websitesicherung vornehmen. Auch, damit du ein Backup hast, falls deine Website gehackt wird.</p>
<p>Ich nutze dafür Updraft Plus. Das kannst du einfach über das WordPress Plugin-Verzeichnis installieren.</p>
<p>Damit kannst du automatische, regelmäßige Sicherungen einstellen und die Daten auf einem externen Medium speichern lassen.</p>
<h4>So richtest du Updraft korrekt ein:</h4>
<p>Das findest du in diesem <a href="https://nadinschmidt.com/backup-fuer-deine-wordpress-website/"><strong>Beitrag</strong></a>, der sich nur um Updraft dreht.</p>
<div class="et_pb_section et_pb_section_33 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_16 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_32  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_16">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_33 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_32  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_33  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_16_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_16 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>2. Plugin zur Sicherheit deiner Website</h2>
<h3>NinjaFirewall</h3>
<p>Um dein WordPress effektiv vor fremden Zugängen zu schützen, empfehle ich die Ninja Firewall. Diese bekommst du ebenfalls über das WordPress Plugin-Verzeichnis.</p>
<p>Die Ninjafirewall ist mein absoluter Favorit. Die Anleitung für die Basis-Einrichtung erhältst du <a href="https://magos-securitas.com/downloads/" target="_blank" rel="noopener">hier</a>. Wichtig: mindestens Basis-Einrichtung abschließen!</p>
<h2>3. Plugins zur SEO-Unterstützung</h2>
<h3>Yoast oder Rank Math SEO</h3>
<p>Beide Plugins helfen dir dabei, einen SEO-Titel und eine Metabeschreibung auszufüllen, die bei den Suchmaschinen-Ergebnissen gezeigt werden.</p>
<p>Zudem können sie beim Texte optimieren unterstützen, für Weiterleitungen und Breadcrumbs und einige weitere Einstellungen genutzt werden.</p>
<h2>4. Plugin als Cookie-Consent Tool</h2>
<h3>Borlabs Cookie</h3>
<p>Damit kannst du easy und rechtskonform (vorausgesetzt korrekt eingerichtet) Drittanbieter Tools einbinden. Achte unbedingt auf die korrekte Einrichtung. Anleitungen findest du bei Borlabs oder du lässt es einen Profi übernehmen.</p>
<h2>5. Plugins zur Performance-Optimierung</h2>
<h3>Autoptimize, WP Optimize und WP Rocket</h3>
<p>Du liebst schnelle Websites, Google liebt sie und deine Besucher auch. Ein gutes Plugins optimiert deine Bilder, bündelt unnötigen Code und erstellt einen Cache, um deine Website schneller auszuliefern.</p>
<h2>6. Plugins für Anti-Spam</h2>
<h3>Antispam Bee &amp; WP Armour</h3>
<p>Wenn du eine Kommentarfunktion in deinem Blog anbietest, sollte Antispam Bee nicht fehlen.</p>
<p>Wenn du Kontaktformulare verwendest, installiere WP Armour. So hast du Ruhe vor Eric Jones.</p>
<h2>Weitere Plugins, die ich gerne nutze</h2>
<h3>Easy Table of Contents</h3>
<p>Damit kannst du automatisch ein Inhaltsverzeichnis für deine Blogbeiträge erstellen lassen, so wie in diesem hier.</p>
<h3>Real Media Library</h3>
<p>Damit kannst du deine Medien in Ordnern sortieren. Super, wenn du viele Bilder und Webseiten hast.</p>
<h3>Matomo</h3>
<p>Damit tracke ich Besucherzahlen datenschutzkonform.</p>
<h3>Yoast Duplicate</h3>
<p>Ideal um Seiten und Beiträge mit einem Klick zu duplizieren.</p>
<h2>Temporäre Plugins, die wieder gelöscht werden</h2>
<h3>Enhanced Media Library</h3>
<p>Damit können Schriften in Divi auf den Server geladen werden. Dies ist nämlich in Divi deativiert. Mit diesem Plugins kann ich weitere Dateiformate hinzufügen und hochladen.</p>
<h3>CMP coming soon</h3>
<p>Ideal für den Wartungsmodus, solange sich eine Website im Aufbau befindet.</p>
<h3>Enable Media Replace</h3>
<p>Mit diesem Plugin kannst du direkt in der Mediathek ein altes gegen ein neues Bild austauschen. Es wird automatisch dort platziert, wo sich das alte Bild befand.</p>
<div class="et_pb_section et_pb_section_35 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_17 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_34  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_17">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_35 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_34  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_35  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_17_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_17 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>Auf diese Plugins kanst du dank Divi verzichten</h2>
<p>Achte darauf, möglichst wenige Plugins zu verwenden. Mit 10 Plugins solltest du gut hinkommen. Das ist besser für die Ladezeit und die Sicherheit.</p>
<ul>
<li>Divi selbst hat bereits einen <strong>Cache</strong>. Wenn dir dieser nicht ausreicht, deaktiviere ihn und nutze ein Plugin. Divi Optionen unter „Builder“ „Fortgeschritten“</li>
<li>Du brauchst kein zusätzliches Plugin für Head und Footer Code. Für beides findest du Raum in den Optionen unter „Integrationen&#8220;.</li>
<li>Google Fonts kannst du in den Optionen deaktivieren und die Fonts manuell auf den Server laden.</li>
<li>Header und Footer kannst du über den Theme Builder selbst herstellen.</li>
<li>Divi hat ein Slidermodul integriert. Ebenso wie Buttons etc.</li>
<li>Ebenso kannst du in Divi den <strong>Classic Editor</strong> aktivieren und brauchst dazu kein Plugin. Divi Optionen unter „Builder“ „Fortgeschritten“</li>
<li>Auch kannst du jederzeit <strong>Seiten kopieren.</strong> Das sind ein paar Klicks mehr als mit einem Plugin, aber wenn du diese Funktion nicht oft brauchst, reicht es völlig. Wähle dazu ein Premade Layout und dann eine von dir erstellte Seite aus.</li>
</ul>
<p>Sooo viel Spaß! Wenn du Hilfe brauchst, <a href="https://nadinschmidt.com/kontakt/"><strong>schrei(b)</strong></a>!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/must-have-wordpress-plugins/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>In 3 Minuten ein automatisches WordPress-Backup mit Updraft einrichten</title>
		<link>https://nadinschmidt.com/backup-fuer-deine-wordpress-website/</link>
					<comments>https://nadinschmidt.com/backup-fuer-deine-wordpress-website/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Sat, 25 Sep 2021 19:20:53 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[WordPress & Website]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=241170</guid>

					<description><![CDATA[Ein Backup ist eine Sicherung der kompletten Website. Alle Inhalte werden gesichert, um eine Website jederzeit wieder herzustellen. Denn es kann immer passieren, dass ein Update schief geht oder Inhalte gelöscht werden. Mit einem Backup kann alles wieder eingespielt werden. Mit dieser Anleitung hast du innerhalb von 3 MInuten ein automatisches Backup eingerichtet! UpdraftPlus für [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Ein Backup ist eine Sicherung der kompletten Website. Alle Inhalte werden gesichert, um eine Website jederzeit wieder herzustellen.</p>
<p>Denn es kann immer passieren, dass ein Update schief geht oder Inhalte gelöscht werden. Mit einem Backup kann alles wieder eingespielt werden.</p>
<p>Mit dieser Anleitung hast du innerhalb von 3 MInuten ein automatisches Backup eingerichtet!</p>
<div class="et_pb_section et_pb_section_37 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_18 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_36  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_18">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_37 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_36  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_37  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_18_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_18 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>UpdraftPlus für ein automatisches Website-Backup</h2>
<p>Updraft ist easy peasy einzurichten und du musst dich danach gar nicht mehr darum kümmern. Deine Website wird in regelmäßigen Abständen gesichert. Ich nutze Updraft auch, um Webseiten umzuziehen.</p>
<h3>So richtest du ein Website Backup mit Updraft ein</h3>
<p><strong>Videoanleitung:</strong><br />
[ma-gdpr-youtube video=&#8220;https://www.youtube.com/watch?v=h0SQZMkESx8&#8243;]</p>
<p>&nbsp;</p>
<p><strong>Step by Step Anleitung:</strong></p>
<p>Gehe dazu in deinem WordPress Backend auf Plugins → Plugins installieren</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244428 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-1.png" alt="" width="749" height="476" /></p>
<p>Suche nach UpdraftPlus und installiere „UpdraftPlus WordPress Backup Plugin“.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244427 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-2.png" alt="" width="696" height="123" /></p>
<p>Aktiviere das Plugin.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244426 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-3.png" alt="" width="592" height="426" /></p>
<h4>Einrichten deines Backups</h4>
<p>Nach dem Aktivieren musst du das Plugin noch konfigurieren.</p>
<p>Gehe auf den Reiter Einstellungen und wähle jeweils bei Datei-Sicherungsplan und Datenbank-Sicherungsplan „wöchentlich“ und 5 Versionen. So hast du 5 Wochen Zeit, um eine Änderung zu bemerken.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244425 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-4.png" alt="" width="818" height="517" /></p>
<p>Reiter Einstellungen</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244424 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-5.png" alt="" width="827" height="530" /></p>
<p>Suche auch aus, wo dein Backup gespeichert werden soll. Nicht zu empfehlen ist dein Server. Denn die Daten dort verschwinden sind sie ganz weg.</p>
<p>Wähle stattdessen einen Cloudspeicher wie Google Drive oder Dropbox.</p>
<p><strong>Außerdem möchtest du alles sichern, also setze bei <em>Dateien zur Sicherung hinzufügen</em> alle Haken, die du setzen kannst – Plugins, Themes, Uploads… Das ist in etwa in der Mitte.</strong></p>
<p><strong>Scrolle ganz runter und speichere</strong>. Du wirst jetzt noch zur Verifizierung deines Cloud-Speichers weitergeleitet. Bestätige das, gibt deine Daten ein und schon steht die Verbindung. Dein Backup wird ab sofort auf dem gewählten Cloudspeicher gespeichert.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244423 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-6.png" alt="" width="784" height="277" /></p>
<p>Folge einmal dem Prozess und verbinde deinen Cloudspeicher.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244422 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-7.png" alt="" width="813" height="393" /></p>
<h4>Das richtige Sicherungsintervall in Updraftplus wählen</h4>
<p>Ich rate von einer täglichen Sicherung ab, da du nicht jeden Tag Änderungen an deiner Website machst.</p>
<p>Wenn du das Intervall auf 14 tägig stellst und die letzten 4 Versionen behalten werden, hast du 8 Wochen Zeit, die Änderung zu bemerken.</p>
<p>Wenn du täglich sichern würdest und nur 5 Sicherungen behältst, dann musst du innerhalb von 5 Tagen merken, dass deine Website weg ist. Nachvollziehbar?</p>
<p>Wenn du alle Sicherungen behältst, müllst du deinen Speicher zu. Es ist einfach unnötig.</p>
<p>Also, wähle ein Intervall und die Anzahl Sicherungen, von denen du sicher bist, dass du merkst, wenn etwas mit deiner Website nicht stimmt.</p>
<p>Unter <em>Sicherung</em> siehst du auch alle gemachten Sicherungen und ob sie erfolgreich waren.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-244421 " src="https://nadinschmidt.com/wp-content/uploads/2022/06/Updraft-einrichten-8.png" alt="" width="690" height="400" /></p>
<h4>Du kannst jederzeit manuell sichern</h4>
<p>Wenn du eine Änderung an deiner Website vornehmen willst, oder nach einer großen Änderung, kannst du unter Sicherung/Wiederherstellen auch „Jetzt sichern“ anklicken und deine Website wird sofort gesichert.</p>
<p>Dort kannst du auch die letzten Sicherungen wiederherstellen lassen. Wenn du das machst, wird deine aktuelle Website mit der ausgewählten Version überschrieben.</p>
<div class="et_pb_section et_pb_section_39 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_19 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_38  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_19">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_39 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_38  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_39  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_19_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_19 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h3>Du willst Premium?</h3>
<p>Dir gefällt UpdraftPlus so sehr, dass du die kostenpflichtige Variante wählst?</p>
<p>Damit hast du mehr Möglichkeiten. Du kannst dein Backup z.B. bei Updraft sichern lassen oder Websiten migrieren. Das heißt, du ziehst eine Website von einer Domain zur anderen um – zum Beispiel bei einem Domainumzug oder wenn du für Kunden arbeitest, so wie ich das mache.</p>
<p>Wenn du Premium willst, nutze gerne diesen <a href="https://updraftplus.com/?afref=2134" target="_blank" rel="noopener">Link</a>*.</p>
<p>Übrigens: es ist gar nicht so selten, dass Websites gehackt werden. Oder mal kurz falsch geklickt wird und alles verschwindet. Es ist doch fürs ruhige Gefühl schöner, wenn alles safe ist oder nicht?</p>
<p>Fragen? Schrei(b)!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/backup-fuer-deine-wordpress-website/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Host bis Plugin &#8211;  alles was du über WordPress-Webseiten wissen musst</title>
		<link>https://nadinschmidt.com/website-mit-wordpress-erstellen/</link>
					<comments>https://nadinschmidt.com/website-mit-wordpress-erstellen/#respond</comments>
		
		<dc:creator><![CDATA[Nadin]]></dc:creator>
		<pubDate>Sun, 25 Apr 2021 20:14:02 +0000</pubDate>
				<category><![CDATA[Best of]]></category>
		<category><![CDATA[WordPress & Website]]></category>
		<guid isPermaLink="false">https://va-nadin.de/?p=239573</guid>

					<description><![CDATA[Dir fehlt eine komplette Übersicht über WordPress? Dann machen wir WordPress-Webseiten verständlich! Grundsätzlich: eine Website an sich zu erstellen, ist nicht so schwer. Es macht sogar Spaß. Aber Website ist eben ein bisschen mehr, als ein paar Bilder und Text. Es ist auch Host, Domain, Plugins und DSGVO. Noch mehr Fragezeichen? Lass sie uns durch [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Dir fehlt eine komplette Übersicht über WordPress? Dann machen wir WordPress-Webseiten verständlich!</p>
<p>Grundsätzlich: eine Website an sich zu erstellen, ist nicht so schwer. Es macht sogar Spaß. Aber Website ist eben ein bisschen mehr, als ein paar Bilder und Text. Es ist auch Host, Domain, Plugins und DSGVO. Noch mehr Fragezeichen? Lass sie uns durch ein &#8222;Ahaaaaa!&#8220; ersetzen.</p>
<p>Was es erschwert, eine Website zu erstellen, ist das Hintergrund- und Drumherumwissen. Das kann einem Laien schon den letzten Nerv kosten! Genauso ging es mir zu Anfang. Ich hatte zwar schon WordPress-Seiten bearbeitet, aber ich hatte keinen blassen Schimmer was ein Host ist. Oder wie ich an eine Domain gelange und wozu ich welches Plugin brauche. Ich hatte nur den festen Vorsatz, eine eigene Website zu erstellen und schlug mich durch den Dschungel.</p>
<p>Hier deine ultimative Zusammenfassung zu WordPress-Webseiten.</p>
<div class="et_pb_section et_pb_section_41 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_20 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_40  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_20">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_41 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_40  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_41  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_20_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_20 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h2>WordPress vs. Baukasten</h2>
<p>Wieso eine Website mit WordPress erstellen? Das ist doch kompliziert?!</p>
<p>Es gibt sehr viele Baukasten-Anbieter für Websites. Sie alle haben den Vorteil, dass du ein Gesamtpaket kaufst. Du musst dich um den ganzen Rest kaum noch kümmern und erstellst einfach den Inhalt deiner Seite. Sie haben aber auch Nachteile&#8230;</p>
<p>Ganz ehrlich: ich hab mich mit Baukästen nicht lange beschäftigt, aber Baukästen gelangen schnell an Grenzen. So einfach wie sie zu nutzen sind, so beschränkt sind sie auch. Sie wurden für Verbraucher entwickelt, die sich nicht tiefer mit dem Thema eigene Website erstellen befassen möchte. Ebenso muss hier nicht tief in die Tasche gegriffen werden, sich von einem Profi die Website erstellen zu lassen und sind selbsterklärend. Sie erfüllen als All Inklusive Paket für Einsteiger ihren Zweck.</p>
<p>Baukästen beinhalten alles Wichtige, sind dafür wenig flexibel und werden schnell teuer. Wie ein fertig eingerichtetes Appartement, ausgestattet mit dem Nötigsten.</p>
<p>WordPress ist wie eine Wohnung, die hell und lichtdurchflutet all deinen Ideen und Möglichkeiten Platz bietet. Es bietet die Basis und wartet darauf, von dir eingerichtet zu werden. Schauen wir uns WordPress genauer an.</p>
<h2>WordPress-Website erstellen: Host und Domain</h2>
<h3>Die Auswahl des Hosts, um deine Website zu erstellen</h3>
<p>Bevor du mit dem Erstellen einer WordPress-Website startest, benötigst du einen Platz, wo deine Website wohnen darf. Sozusagen das Grundstück, der sogenannte Host. Hierbei handelt es sich um Server, die verteilt auf der Erde stehen und von einem Hoster verwaltet werden. Dieser stellt Speicherplatz zur Verfügung und passt auf die Daten auf. Je weniger Platz deine Domain teilen muss und je besser die Server betreut werden, umso schneller die Website. Es lohnt sich, sich gut zu informieren, welcher Host für deine Website geeignet ist.</p>
<p>Ich selbst bin beim Hoster <a href="https://all-inkl.com/PA78DBAA7CE43D5" target="_blank" rel="noopener">ALL-INKL</a>*, da hier die Ladezeiten wirklich super sind. Das Anlegen und die Verwaltung sind übersichtlich und einfach gestaltet. Die Preise und der Support sind spitze und die Server stehen in Deutschland, was im Rahmen der DSGVO ziemlich wichtig ist. Es gibt natürlich noch jede Menge anderer Top Hoster. Vergleiche Preise, schau was enthalten ist (Stichwort SSL-Zertifikat, DNS-Einstellungen und evlt. Mailpostfach) und lies dir am Besten ein paar Bewertungen durch. Gängige Hoster sind auch Ionos, Strato, Bluehost, Raidboxes und viele weitere, wobei ich von Massenhostern immer abrate.</p>
<p>*hierbei handelt es sich um einen Affiliate-Link: wenn du hierüber buchst erhalte ich eine kleine Provision. Du bezahlst dafür nicht mehr.</p>
<h3>Die Domain für deine Website</h3>
<p>Die Domain ist die Webadresse bzw. der URL-Link, über welchen die Homepage (Startseite) deiner Website gefunden wird. Es ist die Straße und Hausnummer deines Internetauftritts. In meinem Fall ist es <a href="https://nadinschmidt.com">nadinschmidt.com</a>. Jede Unterseite entspricht einem Raum in deiner Wohnung, der sich mit einem eigenen Wort an deine Domain anschließt (der Permalink). Zum Beispiel: <a href="https://nadinschmidt.com/kontakt/">nadinschmidt.com/kontakt</a>.</p>
<p>Nach der Anmeldung beim Host erhältst du sämtliche Zugangsdaten und kannst dort auch eine Domain erwerben. Eine Domain könntest du auch separat vorab erwerben. Zum Beispiel, wenn du dir bereits eine reserviert hast, weil du diesen Namen unbedingt haben wolltest. Beim Erwerb einer Domain wird auch überprüft, ob diese bereits vergeben ist. Recherchiere auch in deinem Interesse, ob es vielleicht bereits ähnliche Domains gibt. Denn sonst könntest du leicht mit einem Mitbewerber verwechselt werden und dir entgehen wichtige Kunden. Beachte auch, dass manche Endungen (z.B. .com) nach Registrierung 90 Tage gesperrt sind und du solange nicht einfach den Host wechseln kannst.</p>
<h3>Installation von WordPress</h3>
<p>Nach dem Kauf der Domain kannst du WordPress installieren. Das dauert meist nicht lang und es sind nur ein paar Klicks, die meisten bieten eine 1 Klick Installation an. Bei der Installation von WordPress vergibst du auch deine Zugangsdaten. Achte bei der Wahl des Benutzers, keinen leicht zu erratenden Namen zu nehmen, um es Hackerangriffen schwerer zu machen. Auch der eigene Name oder die Bezeichnung Admin sind nicht zu empfehlen.</p>
<h3>SSL-Zertifikat</h3>
<p>Ich empfehle sofort das SSL-Zertifikat zu aktivieren. Dieses macht aus dem http ein https und überträgt Daten verschlüsselt.</p>
<h2>WordPress-Website erstellen: Aufbau</h2>
<p>Sobald du WordPress installiert hast, kommst du über deine URL auf deine Website. Du siehst eine WordPress-Seite mit Standard Theme.</p>
<p>Über deine Domain und den Zusatz /wp-admin gelangst du zum Login in das <strong>Backend</strong> deiner Seite.</p>
<p>Dort ist das typische WordPress-Dashboard zu sehen. Das sieht auf den ersten Blick sehr verwirrend aus und hat überhaupt nichts mit einer Website, wie du sie erwartest, zu tun.</p>
<p>WordPress wurde ursprünglich für Blogs erstellt. Darauf ist es auch heute noch optimiert. Es wurde über die Jahre so ausgebaut, dass sich damit auch eine Website erstellen lässt. Mithilfe von Themes, Buildern und Plugins sind die Möglichkeiten fast unendlich! Mit Programmierkenntnissen sind sie es. Die brauchen wir dank Pagebuildern nicht mehr zwingend.</p>
<p>Es ist heute noch so beliebt, weil es kostenlos ist und immer weiter ausgebaut wird.</p>
<p>Aber: allein mit der Installation von WordPress kommen wir noch nicht sehr weit. Wir benötigen noch ein paar Feinheiten, Schränke und Regale für unsere Wohnung.</p>
<h3>WordPress Frontend und Backend</h3>
<p>Das <strong>Frontend</strong> ist kurz gesagt das, was der Website-Besucher, sieht. Also so, wie du deine URL eingibst und deine Startseite erscheint.</p>
<p>&nbsp;</p>
<p>Das <strong>Backend</strong> dagegen besteht aus unterschiedlichen Menüs und Unterpunkten. Hierüber werden alle Einstellungen vorgenommen und neue Seiten für die Website erstellt.</p>
<p>&nbsp;</p>
<div id="attachment_239587" style="width: 305px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-239587" class="wp-image-239587" src="https://nadinschmidt.com/wp-content/uploads/2021/04/Wordpress-Uebersicht-672x1024.png" alt="" width="295" height="449" /><p id="caption-attachment-239587" class="wp-caption-text">WordPress Backend</p></div>
<p>&nbsp;</p>
<p>Gehen wir die wichtigsten Backend-Bereiche im Schnelldurchlauf von oben nach unten durch:</p>
<ul>
<li><strong>Startseite</strong>: hier siehst du grundsätzliche Informationen zu deinem WordPress und vorhandene Aktualisierungen.</li>
<li><strong>Beiträge</strong>: das ist der eigentliche Kern von WordPress. Beiträge sind Blog-Beiträge wie dieser hier. Also fast alles, was du im Internet zu lesen bekommst, wenn du nach etwas recherchierst. Alles wird in Beiträgen verpackt und als Information bereit gestellt. Beiträge werden meist auf einer Blog-Seite und in Kategorien zusammen gefasst.</li>
<li><strong>Projekte</strong> sind ähnlich wie Beiträge, werden aber chronologisch absteigend angezeigt.</li>
<li>Die <strong>Medien</strong> enthalten alle Bilder und Dateien, welche du in WordPress an irgendeiner Stelle einfügst. Bilder müssen auf die richtige Größe angepasst und mit kleiner Dateigröße hochgeladen werden. Anschließend wird noch die Beschreibung ausgefüllt, um auch über die Bildersuche Besucher auf die Seite zu locken. Jetzt wird das Bild noch manuell in den Beitrag oder die Seite eingefügt.</li>
<li>Die <strong>Seiten</strong> sind das, womit eine <em>Website</em> aufgebaut wird. Es werden unterschiedliche Seiten, zum Beispiel für die Homepage, Kontakt, Blog oder Leistungen angelegt und zu einem Menü verbunden.</li>
<li>Über das <strong>Design</strong> können Themes installiert oder das Menü angepasst werden.</li>
<li><strong>Plug-Ins</strong> dienen dazu, die Seite um wichtige Einzelteile zu erweitern, ähnlich wie Deko. Dazu komme ich ganz unten nochmal.</li>
</ul>
<p>Über Benutzer und Einstellungen sind weitere Feinheiten für die WordPress-Seite vorzunehmen. Das lassen wir jetzt mal außen vor&#8230;</p>
<h3>WordPress Themes</h3>
<p>Eine WordPress-Seite kommt standardmäßig schon mit einem Theme daher. Das Theme bestimmt das Aussehen der fertigen Seite. Es zeigt uns wo sich unser Menü befindet und wie die Seite aufgebaut ist. Wir können es im Rahmen der gegebenen Möglichkeiten anpassen und so die Seite herrichten, wie sie uns gefällt. Es gibt sehr viele unterschiedliche Themes, entweder direkt in WordPress in der Rubrik Design, oder man erwirbt ein Theme und lädt es in WordPress hoch.</p>
<h3>WordPress Page-Builder</h3>
<p>Ein visueller Builder hilft beim Aufbau der Website. Damit können wir live auf der Seite Inhalte erstellen, statt umständlich im Backend.</p>
<p>Zwei beliebte Page Builder im Vergleich:</p>
<h4>PageBuilder Elementor Plugin vs. Divi von Elegant Themes</h4>
<p>Beides sind beliebte, visuelle Builder. Mit beiden lässt sich fast alles auf einer Seite machen, so dass du auf viele zusätzliche PlugIns verzichten kannst.</p>
<p>DIVI und Elementor kannst du grundsätzlich zum ausprobieren kostenlos nutzen. Um bei Elementor auf den vollen Umfang zugreifen zu können benötigst du die Pro-Version, welche jährlich abgerechnet wird.</p>
<p>DIVI kommt gleich als volles Paket an. Du benötigst aber eine Lifetime-Lizenz, damit es weiter aktualisiert wird.</p>
<p>Während <a href="https://elementor.com/" target="_blank" rel="noopener">Elementor</a> ein Plugin ist und ein Theme als Grundlage braucht, um dieses anzupassen, ist <a href="https://www.elegantthemes.com/gallery/divi/" target="_blank" rel="noopener">DIVI</a> beides in einem. Es ist sowohl Theme als auch Builder. Jedoch gibt es auch bei DIVI die Möglichkeit, nur das Plug-In zusammen mit einem anderen Theme zu verwenden.</p>
<p>Es gibt beim Aufbau mit WordPress kaum Grenzen und es ist vergleichsweise günstig. Jedes Theme und jeder Builder hat seine Vor- und Nachteile. Elementor und DIVI sind sehr Anwenderfreundlich und bieten sich gerade für visuelle Menschen wie mich an.</p>
<h3>WordPress Plugins</h3>
<p>Plugins sind Erweiterungen für WordPress, um Lücken zu schließen. Da Webseiten sehr unterschiedlich sind, macht es Sinn, Plugins einzeln hinzuzufügen um auf die gewünschten Funktionen zugreifen zu können. Sie sind Fenster, Türen, Schlösser und Vorhänge deiner Wohnung. Für alles gibt es ein zusätzliches Plugin, das eine wichtige Sicherheits-Funktion erfüllt oder nur einen nette Spielerei ist. Zum Schluss werde ich nochmal alle unentbehrlichen Plugins auflisten und kurz erklären.</p>
<h2>Beachte das, bevor du eine WordPress Website erstellst</h2>
<h3>Zielgruppe und Zweck</h3>
<p>Zuerst musst du dir über folgendes im Klaren sein: Was ist deine Zielgruppe und welches Ziel verfolgt die Website?</p>
<p>Eine Website dient als eine Art Visitenkarte, Repräsentations- und Informationsportal.</p>
<p>Sie vereint Persönlichkeit und Message und soll deine gewünschte Zielgruppe ansprechen.</p>
<p>Das Ziel der Website kann sich ebenfalls unterscheiden: sollen damit Kunden generiert werden, um Umsätze zu steigern? Oder dient sie der Informationsverteilung und als passive Einnahmequelle durch einen gut gefüllten Blog?</p>
<p>Die Website eines Fotografen besticht nicht durch Text, sondern durch Bilder. Während dagegen die Seite einer Beratungsagentur bereits durch Informationstexte auf die Arbeit verweist.</p>
<h3>Branding &#8211; Farben und Schriften für deine Website</h3>
<p>Falls dein Brandin steht, ist dieser Schritt hinfällig.</p>
<p>Bevor eine Website erstellt wird, sollten Schriften und Farben klar sein. Branding spiegelt zum einen deine Persönlichkeit, soll deine Zielgruppe ansprechen und dich von anderen unterscheidbar machen. Eine Mischung aus einer kräftigeren, dunklen Farben und helleren Pastelltönen bietet sich bei Websiten meist gut an. Möglich ist auch eine Website, welche vorherrschend weiß mit einigen wenigen dunklen Akzenten ist. Hier entscheidet der eigene Geschmack, das Produkt und die Zielgruppe.</p>
<p>Hilfreich beim Finden der eigenen Farben kann ein Moodboard sein. Hierzu werden Bilder aussgesucht, die die eigene Stimmung und Person, sowie Zielgruppe gut widerspiegeln. Damit lassen sich leicht die passenden Farben finden. Um die Töne zu verfeinern und abzustimmen kann ich <a href="https://coolors.co/" target="_blank" rel="noopener">Coolors</a> empfehlen. Hier können Fotos hochgeladen und unterschiedliche Schattierungen nebeneinder gelegt werden. Alternativ gibt es auch wahnsinnig viel Inspiration bei <a href="https://www.pinterest.de/NikaRelax/farbkombinationen/" target="_blank" rel="noopener">Pinterest</a>. Mit Tools wie ColorSlurp kann übrigens jede beliebige Farbe am Bildschirm bestimmt werden, so dass du die Farbwerte hast, um diese selbst einzusetzen.</p>
<p>Zu Empfehlen ist auch ein Branddesigner, welche die Schriften und Farben heraussucht und aufeinander abstimmt.</p>
<p>Genauso verhält es sich auch mit den Schriften. Kombiniere maximal 2-3 Schriften, wobei die ausgefallenere davon nur sparsam eingesetzt wird. Etwas für Überschriften oder Zitate.</p>
<h2>Aufbau einer Website mit WordPress</h2>
<p>Auf das Herzstück gehe ich nur kurz ein. Denn: es sollte klar sein, dass beim Aufbau einzelne Seiten erstellt und diese dann mit Inhalten gefüllt werden. Das Internet ist voll von Möglichkeiten, dir zu zeigen, wie das geht und mit jedem Theme / für jede Zielgruppe ist es etwas anders. Worum es mir in diesem Beitrag geht, ist, dir zu verdeutlichen, was du alles vor dem Erstellen einer Website mit WordPress benötigst und wie die Zusammenhänge sind. Es ist auch vollkommen davon abhängig, welcher Builder benutzt wird oder wie die Seite am Ende aussehen soll. Hol dir hier also am besten eine kleine Anleitung direkt zu deinem verwendeten Builder oder buche ein Coaching für DIVI bei mir.</p>
<div class="et_pb_section et_pb_section_43 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_21 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_42  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_21">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="400" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp" alt="" title="Mockup COaches" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Mockup-COaches-480x384.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-248468" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_2_3 et_pb_column_43 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_42  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Budgetfreundliche Starterwebseiten</p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_43  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p>Schau dir die fertigen WordPress-Webseiten für Business Starter an!</p></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_21_wrapper  et_pb_module ">
				<a class="et_pb_button et_pb_button_21 et_pb_bg_layout_light" href="https://nadinschmidt.com/fertige-website/" target="_blank">Layouts anschauen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
<h3>WordPress Website erstellen in Kurz:</h3>
<ol>
<li>Kaufe dein Hosting-Paket mit kostenlosem SSL, genug Speicher und schnellen Servern. Bitte keine billig-Massen-Anbieter. Installiere auf deiner Domain WordPress.</li>
<li>Aktiviere das SSL Zertifikat. Damit erhältst du ein &#8222;s&#8220; zum http deiner URL. Also https. Das ist wichtig, es gleich zu machen, da alle deine Bilder über die alte URL in deiner Mediathek gespeichert werden und nach Aktivieren des SLL Zertifikats nicht zugeordnet werden können.</li>
<li>Wenn es dir wichtig ist, dass deine Seite während des Aufbaus nicht gefunden wird (das macht absolut Sinn, denn sonst laden deine unvollständigen oder geänderten Seiten und Links bereits im Netz!), aktiviere ein Plugin wie Coming Soon Page, damit wird deine Seite im Wartungsmodus angezeigt. Du kannst auch die Google-Indexierung deaktivieren, damit dich Suchmaschinen nicht finden. Beides sollte nach Fertigstellung selbstverständlich entfernt werden.</li>
<li>Überlege dir, welche einzelnen Seiten du haben möchtest.</li>
<li>Skizziere vorab, wie diese aussehen sollen.</li>
<li>Bitte benutze keine vorgefertigten Layouts aus der DIVI Bibliothek. Diese sind zwar super schön und erleichtern dir erstmal das Design, sind aber schwierig in der Responsive-Anpassung und enthalten gerade für Starter viel zu viel Schnickschnack, der schwierig in der Anpassung ist. Abschauen ist erlaubt.</li>
<li>Lege dir EINE Seite an und optimiere diese in der Formatierung. Passe alle Abstände, Schriftgrößen, Überschriften, Buttons etc. in der Desktop, Tablet und Mobilansicht an. Schau, dass auch Mobil alles tip top aussieht. Arbeite am besten mit den Presets in DIVI und vergebe für unterschiedliche Textpassagen verschiedene Formatierungen.</li>
<li>Jetzt kannst du diese Seite immer duplizieren und hast schon eine 1A formatierte Website. Du sparst dir die komplette Formatierung hinterher.</li>
<li>Lege deine Seiten grob an und verfeinere Sie dann nach und nach, wenn du dir sicher bist, welche Elemente auf welche Seite sollen.</li>
<li>Überlege dir vorab, welches Keyword du auf deiner Seite hervorheben möchtest. Keywords sind Teil der Suchmaschinenoptimierung (SEO). Deine Texte sollten sich daran orientieren, damit deine Seite besser über Google gefunden wird. Übertreib aber nicht (Stichwort Keyword-Stuffing), deine Texte sollen sich gut anhören. Dazu am Besten direkt ein SEO Plugin installieren.</li>
<li>Lade Bilder erst hoch, wenn du die Größe reduziert (max. 300 kB)  und die <a href="https://nadinschmidt.com/tipps-zu-richtigen-bildgroessen-fuer-deine-website/">Pixelgröße</a> angepasst hast. Passe den Dateinamen sinnvoll an deine Seite an und fülle die leeren Textfelder in der Mediathek aus. Auch über Bilder kann deine Seite gefunden werden.</li>
<li>Platziere Buttons und Kontaktformulare, aber nehme die Verlinkungen erst ganz zum Schluss vor, wenn du alle Seiten fertig gestellt hast. Dann natürlich nicht vergessen.</li>
<li>Wenn alle deine Seiten fertiggestellt sind, prüfe alle Links und Buttons auf Funktion.</li>
<li>Installiere Plugins, vor allem für die Sicherung.</li>
</ol>
<h3>Mobile Optimierung &#8211; Responsive-Anpassung deiner Website</h3>
<p>Achte zuletzt darauf, deine Seiten für die Mobilansicht anzupassen. 80% der Website-Besucher betrachten diese auf dem Smartphone. Das ist zwar schade, wenn man sich extra viel Mühe für die schöne Darstellung des eigenen Auftritts gegeben hat, ist aber nun mal so. Auch für die Suchmaschinenoptimierung gilt mobil first. Mit DIVI funktioniert das ganz einfach und es lassen sich auch einzelne Elemente für die jeweilige Ansicht ausblenden, wenn sie nicht unbedingt gebraucht werden.</p>
<p>Kommen wir noch zu den Plugins.</p>
<h2>WordPress Website erstellen: Plugins</h2>
<p>Hierbei handelt es sich um Empfehlungen von Plugins, welche ich entweder selbst benutze oder welche sich großer Beliebtheit erfreuen.</p>
<p>Hier noch meine Auswahl an Must-have Plugins: <a href="https://nadinschmidt.com/must-have-wordpress-plugins/">Must have wordpress plugins</a></p>
<p>Bedenke bei der Auswahl deiner Plugins, dass zu viele Plugins deine Seite langsam machen. Eine Seite sollte nicht länger als 2 Sekunden zum Laden brauchen, ab 4 Sekunden ist sie deutlich zu langsam. Besucher springen ab und sie fällt im Google-Ranking. Ebenso ist ein Plugin ein Tor nach außen, also eine potentielle Gefahrenquelle für Hackerangriffe. Beschränke dich also auf so wenige wie möglich.</p>
<h3>Wichige Plugins</h3>
<ul>
<li><strong>Cookie</strong> <strong>Plugin mit Opt-In Funktion:</strong> Laut DSGVO darf eine Website erst zusätzliche Cookies setzen, wenn der Besucher diesen zugestimmt hat. Demnach reicht ein einfaches Banner nicht mehr aus, wenn du nicht-essentielle Cookies setzt, sondern es muss aktiv in die Nutzung eingewilligt werden. Analysetools und ähnliches laufen somit auch nicht mehr direkt über die Website, sondern werden in das Cookie-Plugin eingebunden. Ein Beispiel dafür ist das beliebte <a href="https://a.paddle.com/v2/click/30363/136624?link=1589" target="_blank" rel="noopener">Borlabs-Cookie</a>* oder Real Cookie Banner. Übrigens: wer ausschließlich essentielle Cookies setzt, braucht auch keinen Banner.</li>
<li><strong>Backup:</strong> Hierbei handelt es sich um ein Sicherung der gesamten Website. Du kannst einstellen, wie oft die gesamten Daten gesichert werden sollen. Durch das Backup lässt sich die Seite jederzeit neu bespielen oder umziehen. Wichtig ist hierbei, das Plugin so einzustellen, dass die Daten nicht auf deinem Server sondern irgendwo extern gespeichert werden. Etwa auf deinem PC oder in einem Cloud-Speicher. Ich habe dir dazu eine <a href="https://nadinschmidt.com/backup-fuer-deine-wordpress-website/">Anleitung</a> mit meinem Lieblingstool <a href="https://updraftplus.com/?afref=2134" target="_blank" rel="noopener">UpdraftPlus*</a> geschrieben.</li>
<li><strong>Firewall</strong>: um deine Seite vor Angriffe zu schützen benötigst du eine Firewall. Zum Beispiel die NinjaFirewall.</li>
<li><strong>Antispam-Bee</strong>: blockiert Spam, solltest du eine Kommentarfunktion haben.</li>
<li><strong>Autoptimize</strong>, WP Performance Score Booster, WP Optimizer oder WP Rocket, um Bilder, CSS, HTML und Javascript zu minimieren. Beschleunigt die Website.</li>
<li>Yoast SEO oder <strong>Rank Math</strong>: diese Plugins unterstützen dich dabei, deine Seite für die Suchmaschinen zu optimieren. Du legst Keywords für deine Seite fest und das Plugin unterstützt dich dabei, das Keyword richtig einzusetzen. SEO ist nötig, um über Suchmaschinen wie Google überhaupt gefunden zu werden. Gerade mit Rank Math deckst du hier schon einen guten Bereich ab, den du nach und nach erweitern kannst (zB Google Search Console, Keywordoptimierte Blogartikel etc).</li>
</ul>
<h3>Schnickschnack-Plugins</h3>
<ul>
<li>Shariff Wrapper: DSGVO-konformes teilen deiner Beiträge in Social Media.</li>
<li>Imagify: verkleinert Bilder. Trotzdem sollten Bilder bereits vor dem Upload optimiert werden.</li>
<li>Enhanced Media Library: um Schriftarten auf den Server zu laden (wichtig für die DSGVO!).</li>
<li>Broken Link Checker: prüft alle Links der Seite auf Funktionalität.</li>
<li>Slider-Revolution: für schöne Slider, falls dein Builder das nicht kann (DIVI kann das!).</li>
<li>Duplicate Pages: damit lassen sich erstellte Seiten einfach duplizieren und du musst sie nicht jedes mal von 0 neu aufbauen (kann DIVI auch).</li>
<li>Enable Media Replace: Bilder einfach über die Mediathek austauschen. Das neu hochgeladene Bild wird überall dort eingesetzt, wo das alte platziert war.</li>
<li>Better Search Replace: Worte in der gesamten Datenbank austauschen</li>
<li>Easy Table of Contents: um so ein schickes Inhaltsverzeichnis wie das oben zu erstellen.</li>
<li>Smash Balloon: deinen Instagram-Feed auf der Website anzeigen lassen.</li>
</ul>
<h3>Datenschutz-Hinweis</h3>
<p>Google Analytics: ist kein Plugin, muss aber über ein Plugin wie <a href="https://a.paddle.com/v2/click/30363/136624?link=1589" target="_blank" rel="noopener">Borlabs Cookie</a> eingebunden werden. Wenn du dir deine Websiteanalyse gar nicht erst anschaust, dann verzichte drauf.</p>
<p>Facebook-Pixel: auch kein Plugin, muss aber auch über ein Plugin wie Borlabs Cookie eingebunden werden.</p>
<p>Google Fonts: Auch kein Plugin, aber laut DSGVO dürfen keine Google Fonts auf der Website verwendet werden. Diese laden bei jedem Besucher neu und stellen so eine Verbindung zu Google her, über welche Daten des Besuchers übertragen werden. Abhilfe schafft hier Schriften manuell auf den Server zu laden. Wie das geht, erfährst du bei <a href="https://nicolewerner.com/divi-schriftart-hochladen/" target="_blank" rel="noopener">Nicole</a>.</p>
<h2>DSGVO, Datenschutz und Impressum</h2>
<p>Zuletzt braucht deine Website noch eine Datenschutzerklärung, ein Impressum und du musst ein Verarbeitungsverzeichnis anlegen. Beides kannst du dir zum Beispiel bei <a href="https://www.e-recht24.de/" target="_blank" rel="noopener">e-recht24.de</a> oder (noch besser) <a href="https://datenschutz-generator.de/" target="_blank" rel="noopener">Dr. Schwenke</a> generieren lassen. Beachte, dass deine Angaben korrekt und vollständig sein müssen. In deiner Datenschutzerklärung muss alles enthalten sein, was auf deiner Website eingebunden wurde. Also auch Kontaktformulare, Cookies, Kalenderapps, Google Analytics, Whatsapp-Nummer&#8230; Alles eben.</p>
<p>Ich möchte ausdrücklich darauf hinweisen, dass es sich hierbei nur um einen Hinweis, keine Beratung handelt. Ich übernehme keine Haftung. Jeder Webseiteninhaber haftet selbst für seine Website. Für eine wirklich rechtskonforme Absicherung solltest du dir eine Datenschutzerklärung von einem Rechtsanwalt erstellen lassen.</p>
<p>Übrigens: sobald du Facebook und Instagram für dein Business verwendest, benötigst du hier auch eine Datenschutzerklärung und ein Impressum.</p>
<p>Fragen? Schrei(b)!</p>
<div class="et_pb_section et_pb_section_45 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_with_border et_pb_row et_pb_row_22 et_pb_equal_columns">
				<div class="et_pb_column et_pb_column_2_5 et_pb_column_44  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_22">
				
				
				
				
				<span class="et_pb_image_wrap "><img loading="lazy" decoding="async" width="500" height="384" src="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp" alt="" title="Business Bundle" srcset="https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle.webp 500w, https://nadinschmidt.com/wp-content/uploads/2024/05/Business-Bundle-480x369.webp 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw" class="wp-image-249023" /></span>
			</div>
			</div><div class="et_pb_column et_pb_column_3_5 et_pb_column_45 align-center  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_44  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>Onlinebusiness-Bundle zum Sofortdownload</strong></p></div>
			</div><div class="et_pb_module et_pb_text et_pb_text_45  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><ul>
<li>Onlinemarketing-Fahrplan</li>
<li>E-Mail-Marketing-Guide</li>
<li>DIY Website-Check</li>
</ul></div>
			</div><div class="et_pb_button_module_wrapper et_pb_button_22_wrapper  et_pb_module ">
				<a id="overlay_unique_id_248822" class="et_pb_button et_pb_button_22 et_pb_bg_layout_light" href="https://nadinschmidt.com/newsletter/">Bundle runterladen</a>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>
]]></content:encoded>
					
					<wfw:commentRss>https://nadinschmidt.com/website-mit-wordpress-erstellen/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
