Divi 4 – Nadin Schmidt

Google Fonts lokal speichern mit dem Divi Builder ohne ftp Zugang

Nadin — Tue, 01 Apr 2025 12:43:43 +0000

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 auf den Server hochladen solltest

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. Nachschauen, woher Schriften geladen werden, kannst du so:

Ö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 Neues Inkognito oder Privates Fenster auswählst.
Bei erscheinendem Cookie Banner klicke auf alle Cookies ablehnen.
Klilcke nun mit einem weiteren Rechtsklick auf eine beliebige Stelle der Webseite und wähle im erscheinenden Auswahlfenster Untersuchen (Google Chrome).
Nun öffnet sich am rechten oder unteren Rand ein weiteres Fenster. Suche darin den Reiter Source.
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.

Das kann dann so aussehen: Hier besteht dringend Handlungsbedarf.

So lädst du Google Fonts mit Divi auf deine Website ohne FTP Zugang

Google Fonts kannst du dir bei Google direkt herunterladen oder andere Schriften kommerziell erwerben. Schrift aufwählen, downloaden entpacken. Wähle nur die Schriftgrade aus, die du wirklich für deine Website brauchst. Meist reicht der variable font.

Installiere das Plugin Enhanced Media Library.
Installieren & aktivieren.
Suche unter Settings den Reiter MIME Types.
Gib vorne deine Font-Endung an (.ttf oder .otf oä), gib bei MIME Type was ein (zb font) und – ganz wichtig – aktiviere das Kästchen Allow Upload.
Speichern.

Jetzt gehe du auf eine beliebige deiner Webseiten,
aktiviere den Pagebuilder,
öffne ein Textmodul,
wechsel zu Design → Text → Schrift.
Klicke auf Hochladen.
Vergib einen Namen für die Schrift, wähle die Schrift als .ttf oder .otf von deinem Desktop/Ordner aus und speichern.
Plugin Enhanced Media Library löschen
Google Fonts in den Divi Optionen deaktivieren.

Jetzt kannst du die hochgeladene Schrift verwenden.

Google Fonts in Divi Websiteweit ändern

Nun müssen wir die hochgeladene Schrift noch auf der Website einsetzen. Wenn du sauber mit Presets oder nur mit der Grundeinstellung im Theme Customizer gearbeitet hast, geht das ganz schnell. Nachdem du die Schriften hochgeladen hast, wechsel in den Theme Customizer. Hinterlege hier unter Typographie deine neuen Schriften und überall sonst, wo du hier Schriften zuordnen kannst. 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 Default (also die Schrift, die du im Customizer gewählt hast). Wenn nicht, dann wäre jetzt der ideale Zeitpunkt, allen Modulen auf deiner Website Presets zuzuordnen. Mehr zu den Presets erfährst du hier: Tricks & Kniffe für DIVI Das Plugin danach bitte wieder löschen. So wie alle Plugins, die du nur vorübergehend brauchst.

Google Fonts im Divi Builder deaktivieren

Geh dazu in die Divi-Optionen und deaktiviere direkt im ersten Reiter Allgemein 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. Wird jetzt noch einen Blick in den Divi-Optionen auf den Reiter Performance, ob hier der Schalter für die Google Fonts deaktiviert ist. 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). Thats it. Du hast keine Lust, das selbst zu machen? Ich übernehm das. Hat keine meiner Lösungen funktioniert? Dann schrei(b).

Mixed Content: Google Fonts oder Bilder werden in Divi nach dem Speichern nicht mehr angezeigt?

Nadin — Tue, 01 Apr 2025 06:01:02 +0000

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 Frontend nicht anzeigt: Mixed Content beheben

So prüfst du meine Annahme:

Ö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 Neues Inkognito oder Privates Fenster auswählst.
Klilcke nun mit einem weiteren Rechtsklick auf eine beliebige Stelle der Webseite und wähle im erscheinenden Auswahlfenster Untersuchen (Google Chrome).
Nun öffnet sich am rechten oder unteren Rand ein weiteres Fenster. Suche darin den Reiter Console. Wenn dort eine Fehlermeldung mit Bezeichnung Mixed Content erscheint, gehe ich mit meiner Annahme richtig. 🙂

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. Nun zur Lösung:

So werden Fonts/Schriften in Divi auch nach dem Speichern im Frontend angezeigt

Wir müssen nun auch die unter http gespeicherten Elemente unter https speichern.

SSL-Zertifikat für alle Inhalte aktivieren

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. Installiere das Plugin Really Simple SSL & aktiviere es.

Wechel in die Plugin-Einstellungen,
stelle alles auf https um,
lösche das Plugin
und klicke https behalten.

Sicherheitshalber installierst du das Plugin, lädst die Schriften hoch und löscht das Plugin erst dann wieder. Jetzt noch den Divi-Cache unter Divi Optionen, den Cache deines Optimierungsplugins und deinen Browsercache leeren.

http Inhalte in https Inhalte umwandeln

Installiere das Plugin Better Search Replace & aktiviere es.

Rufe es unter WordPress Werkzeuge auf,
gib bei Suchen nach den alten Pfad ein (hier zB http://nadinschmidt.com/)
bei Ersetzen den neuen ( hier https://nadinschmidt.com/)
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.
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)
Lass zuerst den Testlauf laufen und schau dir an, ob überhaupt Änderungen zu machen sind
Wenn ja, dann kannst du das nochmal ohne Testlauf machen
Lösche das Plugin

Beispiel bei mir: Ersetze http://va-nadin.de/ durch https://va-nadin.de/ Eventuell musst du dich danach neu einloggen, weil sich auch der Anmeldepfad geändert hat. Das Plugin kannst du jetzt wieder löschen, alle http Einträge wurden durch https ersetzt. Jetzt noch den DIVI-Cache unter Optionen, den Cache deines Optimierungsplugins und den deines Browsers leeren. Du kannst das Plugin auch super nutzen, um nach einem Websiteumzug den alten Pfad durch den neuen zu ersetzen und alles sauber zu starten. 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. Du brauchst Hilfe? Dann schrei(b).

Bloglayout im DIVI Theme Builder erstellen – so wird bloggen easy!

Nadin — Thu, 08 Dec 2022 12:39:24 +0000

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 ich hier doch nochmal erwähnen, wieso jeder Blogbeiträge schreiben sollte. Jeder googelt. Und was wir beim googeln meist lesen sind Blogbeiträge. Sie helfen dir beim Erstkontakt mit einem Besucher auf deiner Website

mit Wissen zu überzeugen
Vertrauen aufzubauen
erhöhte Chancen über Suchmaschinen gefunden zu werden (höher als die Website allein)
häufige Fragen zu beantworten
zum Newslettereintrag oder Kauf zu animieren

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. 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. Der Blog ist eben der Kanal, den du am meisten verwenden kannst und so - im Unterschied zu Social Media und sonstigen Kanälen - mehr Besucher auf deine Website erhältst, was auch dein Ranking in Suchmaschinen positiv beeinflusst. Wie bei der Website gilt: ein Business, das allein auf Social Media aufgebaut ist, ist keins.

Wieso ein Bloglayout mit DIVI erstellen?

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. Das Layout ist alles, was über, unter oder neben dem eigentlichen Text erscheint. Sowohl das Beitragsbild, der Titel, die Seitenleiste, die Newsletteranmeldung etc. Vorteile:

Du musst nur noch deinen Text einfügen, alle anderen Elemente und der Aufbau des Beitrags werden dynamisch generiert.
Möchtest du eine Änderung vornehmen, dann machst du das einmalig im Bloglayout und nicht in jedem einzelnen Beitrag.
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.
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.

Was du vor dem Wechsel zum Bloglayout beachten solltest

Bevor du startest: du hast schon Blogartikel mit DIVI oder Gutenberg geschrieben? Dann mach unbedingt eine Sicherung aller Inhalte! 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. 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... Deine Beiträge in DIVI dürften zwar auch nach Deaktivieren des DIVI Builders für Beiträge noch vorhanden sein, plus 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. Solange du DIVI noch aktiviert hast, kopiere also deine Inhalte raus und wechsel im Beitrag zum Standardeditor. Der Inhalt ist dann weg! [ma-gdpr-youtube video="https://youtu.be/v1mhCKh-H5A?si=gN8rYjpU4gLsM-2l"]

DIVI Einstellungen vornehmen

Dann starten wir mit den Basics. Steuer die DIVI Optionen an und wechsel in den Reiter Builder. 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. Jetzt wechselst du in den Reiter Fortgeschritten 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. Nachdem du meine Favoriten-Einstellungen vorgenommen hast, können wir mit dem Bloglayout in DIVI loslegen.

Layout im DIVI Theme Builder anlegen

Wechsel jetzt unter den DIVI Optionen zum Theme Builder. Dort klickst du in ein leeres Feld, um eine neue Vorlage zu erstellen. Wähle hier Alle Beiträge aus. Speichern und dann bearbeite den Body (benutzerdefinierten Körper). Jetzt öffnet sich eine völlig leere Seite, welche du mit DIVI gestalten kannst.

Dynamische Inhalte einfügen

Dynamische Inhalte sind die, welche du später im Beitrag selbst hinterlegst und die dann an der bestimmten Stelle im Layout erscheinen. Dazu gehören:

Beitragsbild
Inhalt
Überschrift
Veröffentlichungsdatum, Kategorie, Autor

Du kannst das Layout gestalten, wie du willst. Füge an geeigneter Stelle die dynamischen Inhalte ein, die du brauchst. Für den Inhalt, also deinen tatsächlichen Blogbeitrag, wählst du das Modul Inhalt posten. Bild, Überschriften und Datum/Autor/Kategorie kannst du im jeweiligen Modul als dynamischen Inhalt auswählen. Lösche dazu im Modul den jeweiligen Inhalt und klicke auf das kleine Symbol, das erscheint. Im Textmodul verwende ich immer Post / Archivtitel (die H1), das Post Veröffentlichungsdatum und die Post Kategorie. Für das Beitragsbild wählst du ein Bildmodul, löschst das graue Vorschaubild und klickst ebenfalls auf den dynamischen Inhalt. Wähle Angezeigtes Bild. Damit deine Überschrift auch wirklich eine H1 ist, öffne das Modul, wähle die Einstellung und füge das hier ein: 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.

Seitenleiste und unteren Bereich füllen

Um eine schöne Seitenleiste zu gestalten, füge eine Zeile mit 2 Spalten ein. In die erste Spalte platziere ich das Inhalt posten-Modul. 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. Damit das gleichmäßig gut aussieht, wechsel ich in der Zeileneinstellung auf Design, Größe und aktiviere Spaltenhöhe ausgleichen. Für die einzelne (zweite) Spalte stelle ich unter Zwischenraum (in der Spalte, nicht Zeile) einen Rundum-Abstand von ca 15 px ein. Dann klebt dein Text der Seitenleiste nicht am Rand. Hier könntest du auch die Hintergrundfarbe für diese Spalte ändern. Unterhalb des Beitrags platziere ich am liebsten das Modul Beitragsnavigation, um zum nächsten Artikel springen zu können. Weitere Möglichkeiten wären die Kommentarfunktion (lasse ich gerne weg wegen Spam und Datenschutz), ein Kontaktformular (ist bei mir im Footer, der wird im fertigen Beitrag wieder angezeigt) und andere Blogartikel anzeigen zu lassen. Dazu fügst du das Modul Blog ein, setzte den Beitragszähler auf 3 und wählst unter Design -> Layout die Ansicht Gitter. Tob dich aus! 🙂 Kleiner Tipp für Seitenleisten: 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.

Archivseiten im DIVI Theme Builder erstellen

Die allgemeine Blogseite (bei mir die: nadinschmidt.com/blog/) 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 Elemente die Nummerierung angezeigt wird, so können Besucher auf die nächste Seite deiner Beiträge springen. Damit auch deine Kategorieseiten schön aussehen, musst du wieder auf den Theme-Builder zurückgreifen (hier meine Kategorieseite: nadinschmidt.com/category/best-of/) Hier wählst du eine neue Vorlage, statt alle Beiträge jetzt Alle Kategorieseiten und Alle Archivseiten. Die blanke Seite kannst du ebenfalls frei gestalten. Hübsch ist es, oben wieder ein dynamisches Textmodul einzufügen und Archivtitel als H1 anzeigen zu lassen. Füge wieder das Modul Blog ein, allerdings wählst du jetzt unter Inhalt bei enthaltene Kategorien aus Aktuelle Kategorie. So werden nur die Artikel dieser Kategorie angezeigt.

Was du zum Bloggen noch beachten darfst

Technisch steht dein Blog nun. Ich empfehle dir, den bereits erwähnten Artikel zu lesen: Blogartikel optimieren Kurzgefasst solltest du vor dem Bloggen das machen

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)
Gliedere den Inhalt in sinnvolle Überschriften mit Keywords
Schreibe den Inhalt
Lege Bild und Kategorie fest
Fülle die Metadescription aus (zB mit Yoast oder mein Favorit Rank Math)
Ergänze die Beschreibung in den verwendeten Bildern
Teile den Artikel im Newsletter oder Social Media
Melde den Artikel in der Google Search Console an und prüfe die Indexierierung und das Ranking nach 4-6 Wochen!

Vermeide

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.
Duplicate Content - Artikel mit ähnlichen Inhalten schaden dem Ranking beider Artikel. Fasse zusammen oder setze auf No Index.
Schreibe besser als die Konkurrenz (ok, das ist kein vermeiden...)

Tools, die dir beim Bloggen helfen

Google Search Console - prüfe Keywords und aufgerufene Seiten sowie Klicks
Ubersuggest - recherchiere Keywords und prüfe das Ranking deiner Keywords und Artikel
Google Suche - ö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

Glückwunsch, du bist jetzt bereit zum Erstellen deiner Beiträge! Bei Fragen melde dich gerne.

Schnelle Hilfen für DIVI-Webdesigner

Nadin — Wed, 23 Mar 2022 15:06:06 +0000

DAS solltest du wissen, wenn du Webseiten mit Divi erstellst. Für meine DIVI Webseiten hab ich so meine Tricks & 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 brauche ich nur 2-3 Klicks, um die Webseiten meiner Kunden ein gutes Stück hübscher zu machen. Ich zähle dir hier nach und nach auf, was mir so auffällt und was dir das Leben als DIVI Webdesigner erleichtern kann!

Aufbau & Arbeitsweise von DIVI verstehen

Etwas, das für mich selbstverständlich war - für Menschen ohne gute räumliche Vorstellungskraft ist das nicht so: DIVI arbeitet mit Ebenen. Das heißt, zuerst kommt der Abschnitt, darauf/darin die Zeile und im Innersten das Modul. 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.

Hover- & Mobiloptimierung mit wenigen Klicks für DIVI Webdesigner

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. So kannst du für jede einzelne, noch so kleine Einstellung eine separate Einstellung für Mobil und Tablet hinterlegen und tolle Hovereffekte machen. Du willst zB, dass ein Bild beim drüberhovern dunkler, heller oder farbig wird? Dann machst du das mit der Hover-Einstellung von DIVI. Du willst, dass Mobil ein anderes Bild angezeigt wird als am Desktop? Oder dass die Trennlinie mobil kleiner ist als am Desktop?

[ma-gdpr-youtube video="https://www.youtube.com/watch?v=lic9QCVzMCY"]

So gehts: Ö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. 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. Diese Einstellmöglichkeit findest du bei so gut wie allem: Texte, Farben, Größen, Abstände. Einfach mal mutig ins Leere klicken!

Presets als DIVI-Webdesigner richtig verwenden

DIVI bietet dir die geniale Möglichkeit, für jedes Modul das Standard-Preset anzupassen und weitere Presets zu erstellen. Im Theme Customizer nimmst du die absoluten Basiseinstellungen vor. Schriftgröße, Farbe, Links, Button,... 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. Dass du das Preset global bearbeitest, erkennst du übrigens daran, dass das Modulfenster nicht mehr lila, sondern grau ist. 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. Mach das mit den Presets sauber und ordentlich, dann kannst du mit wenigen Klicks deine ganze Website bearbeiten. Ein Beispiel: du hast zwei unterschiedliche Buttons. Das Standardpreset enthält einen roten Button, das Preset Buttons blau 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. 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.

DIVI Bibliothek sinnvoll nutzen

Wenn du deine DIVI-Website erstellst, willst du bestimmte Bereiche immer wieder verwenden, ohne sie dauernd neu aufbauen zu müssen. 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. 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. 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. 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.

Module in DIVI für die Mobilansicht ausblenden

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. Dazu gehst du einfach im Abschnitt/Zeile/Modul auf Erweitert → Sichtbarkeit und setze deine Auswahl.

Classic Editor statt Gutenberg für Beiträge in DIVI aktivieren

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. 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. Wechsel in die DIVI-Optionen, geh zum Reiter Builder und Fortgeschritten. Jetzt kannst du einfach den klassischen Editor aktivieren.

DIVI Builder für Beiträge deaktivieren

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.

Mit 3 Klicks sofort die Mobilansicht verbessern

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!

Geh im visuellen Builder in eine beliebige Zeile (grün).
Öffne das Preset und bearbeite das Standardpreset. Das Modul wird nun grau. Weiter oben in diesem Artikel habe ich die Presets erklärt.
Wechsel in den Reiter Design und öffne Größe.
Jetzt stellst du die Breite für Tablet und Mobil auf ein paar % weniger. So, dass es dir gefällt. Speichern.
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.
Alternativ: Statt der Größe gibst du bei Zwischenraum einen Abstand von 1% oder 10 px rechts und links an.

Wenn es nicht funktioniert hat, dann hast du bereits in manchen Zeilen vorher den Abstand manuell angepasst. Manuelle Einstellungen werden wichtiger gestuft als globale.

Trick 17 für responsive DIVI Layouts

Verzichte auf feste Höhen! Arbeite mit Zwischenräumen (vor allem mit dem Innenabstand/padding). Du kannst auch statt px einfach Prozentzahlen eintragen. So bleiben deine Designs responsive und passen sich perfekt an jedes Gerät an. 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).

DIVI Infomodule linksbündig anzeigen lassen

Standardmäßig sind die Infomodule mittig platziert. Wenn du versucht hast, das über den Text mittig zu stellen, bist du sicher verzweifelt. So gehts ganz einfach: Öffne das Informationsmodul, wechsel in den Reiter Design, dann zu Größe und setze den Inhalt auf 100%. Voilá.

Eigenen Footer in DIVI erstellen

Nerven dich die Footer und Widgets? Dann erstelle einen eigenen Footer! So mach ich das immer. Du kannst dafür die Einstellungen für den Footer im Customizer ganz auslassen. 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.

[ma-gdpr-youtube video="https://www.youtube.com/watch?v=P9BJLhszFlo"]

Header in Divi ausblenden

Du kannst den Header (also die Menüleiste) in Divi komplett für alle Seiten ausblenden oder nur für deine jeweilige.

Ganz ausblenden: wechsel dazu im Backend auf Divi -> Theme Builder. Dort, wo Globale Kopfzeile hinzufügen 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.
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". 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.

[ma-gdpr-youtube video="https://www.youtube.com/watch?v=Ms8Kgo6bxks"]

Du kommst an die Bearbeitungsleiste eines Moduls in DIVI nicht ran?

Manchmal sind Elemente so dicht, dass die Wekzeugleiste des DIVI-Builders nicht lang genug da ist, bis du klicken kannst. Dann mach einfach einen Doppelklick in das Modul/die Zeile/den Abschnitt. 🙂 Schon öffnen sich die Einstellungen. Alternativ: Klick unten in der mitte die Leiste auf. Dann geh zum vorletzten Symbol ganz links. 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. Was bereitet dir bei DIVI Kopfschmerzen? Sag es mir und ich nehme es mit auf!

DIVI zeigt (Blog-) Module nicht an? So behebst du Caching-Probleme

Nadin — Thu, 03 Feb 2022 22:19:10 +0000

Du änderst was an deiner DIVI Website und merkst plötzlich, dass einige Seiten ganz anders aussehen? Blogmodule sind verschwunden, Kontaktformulare ziehen sich zusammen... 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 und dann gibt das leider auch mal Probleme in der Darstellung. Wichtig: bevor du startest, mach ein Backup! Wie das geht, erfährst du hier. Die folgenden Schritte kannst du auch in anderer Reihenfolge durchgehen, so machen sie halt am meisten Sinn.

1. DIVI-Cache leeren - Module korrekt anzeigen lassen

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. How to: Geh im WordPress-Backend in der linken Menüleiste auf DIVI → Theme-Optionen → Builder → Fortgeschritten und klickst da auf Klar... die Übersetzung von clear. Öffne die Website jetzt in einem anderen Browser oder im Inkognito Modus und schau, wie sie aussieht. Immernoch nicht gut? Dann weiter.

2. Browser-Cache leeren - Anzeigefehler bei dir beheben

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. How to: Geh dazu in die Einstellungen deines Browsers und schau nach Cache, Browserdaten oder Cookies. Bei Chrome sind die hier: 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.

3. Cache von Performance-Plugins - zeigt definitiv jedes Modul in DIVI wieder an!

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. 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. 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.

Wie du vermeiden kannst, dass Module in DIVI falsch angezeigt werden

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. 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. Beachte, dass sich ein dauerhaftes Abschalten auf deine Ladezeiten auswirkt. Auf welche Fehler triffst du öfter mit DIVI?

10 Gründe für das WordPress-Theme Divi

Nadin — Wed, 01 Dec 2021 09:59:32 +0000

Divi ist ein beliebtes WordPress-Theme der Spitzenklasse! Seit März 2021 baue ich Webseiten mit Divi und war schockverliebt! Beim Starten war ich noch unsicher – Divi oder Elementor... ich hab beides getestet. Doch das WordPress-Theme DIVI von Elegant Themes war für mich logischer und nutzerfreundlicher aufgebaut. Vor allem, nachdem ich mich reingefuchst hab, ein paar Webseiten standen und ich die Tricks und Kniffe drauf hatte, wie alles noch schneller und einfacher geht.

WordPress-Theme Divi: Mein favorite Visual Builder

Ich hab mich deswegen dafür entschieden:

die vielen Möglichkeiten
die intuitive Bedienung
einfach Umsetzung moderner Webseiten
vieles direkt integriert ohne Zusatzplugins

DIVI zählt unter den WordPress-Themes zu den Visual Buildern. Das heißt, dass du die Website komplett auf der Ansichtsfläche - dem Frontend - erstellen kannst, ähnlich wie bei einem Baukasten-System, nur viel flexibler! Die Ära des WordPress-Backend-Rumgeschwurschtel ist längst beendet. Keiner will mehr diese 90er Websites. Die Zeit der Visual Builder ist da und ganz vorne dabei sind Thrive, Elementor und Divi. Jedes Jahr schießen neue wie Pilze aus dem Boden, von denen jedes sicher seine Vorteile mit sich bringt. Ich hab mich dazu entschlossen, mich ganz Divi zu verschreiben und alles rauszuholen, was geht - und das ist eine ganze Menge! Was macht Divi aus? I'll show you.

1. Divi ist ein WordPress-Theme, nicht nur ein Plugin

Du hast bei Divi die Wahl: ein komplettes WordPress-Theme oder ein Plugin, das dir den visuellen Aufbau mit einem anderen Theme ermöglicht. Den Unterschied zwischen Theme und Plugin hab ich hier in einem umfangreichen Artikel zusammengefasst. Die Variante Theme mit Divi Plugin empfehle ich nicht. Wozu auch?! Es gibt ein komplettes Theme, das bereits alles enthält. Das kommt schon mit viel Datensalat an. Ein anderes Theme + das Plugin gibt noch mehr Datensalat. Also nutz das Theme.

2. Aufbau auf dem WordPress-Frontend

Ich hatte es eben schon angesprochen. Du baust mit Divi direkt auf der Live-Seite. Bei WordPress war es lange so, dass im Hintergrund gearbeitet wurde und um das Ergebnis zu sehen, musstest du aktualisieren und die Seite anschauen. Du hast also ins Blaue platziert und das ganz schön unflexibel. Das ist dank Visual Buildern nicht mehr der Fall.

3. Intuitiver Website-Aufbau mit Divi-Theme

Wenn du das Prinzip von Divi einmal verstanden hast, ist der Aufbau sehr intuitiv. Es gehört ein gewisses Brückendenken und visuelle Vorstellbarkeit dazu, dann gehts ab! DIVI teilt alles in 3 Ebenen: Abschnitte, Zeilen und Module. Jede Ebene liegt in der anderen und damit sind die Möglichkeiten wirklich der Wahnsinn. Hintergrundbild, Bild auf dem Hintergrund, Schrift und Buttons oben drauf... Das alles noch verschieben und so platzieren, wie dus haben willst - I love it! Zugegeben, bisschen Fingerspitzengefühl und Verständnis brauchts schon. Einfach hinsetzen und loslegen, funktioniert dann doch nicht. Dazu hab ich hier einen Beitrag erstellt, in dem ich alle meine Kniffe verrate. x Möglichkeiten für eine Änderung Um an dein Ziel zu kommen, hast du viele unterschiedliche Möglichkeiten. Du kannst z.B. ein Bild als eigenes Modul einfügen, du kannst es aber auch als Hintergrundbild in jedes Modul, jede Zeile und jeden Abschnitt platzieren. Durch diese unterschiedlichen Varianten für jedes Element hast du viel Gestaltungsspielraum.

4. Presets & Divi-Bibiliothek

Eine Lieblingsfunktion von mir sind die Presets und die Bibliothek im Divi-Theme. Beide erlauben dir, etwas zu speichern und an anderer Stelle wiederzuverwenden. Die Presets in jedem Modul und jeder Zeile nutze ich, um Formatierungen auf der ganzen Website zu vereinheitlichen. Presets für Texte, Buttons & Bilder. In der Bibliothek speichere ich ganze Abschnitte oder Zeilen, zum Beispiel ein Kontaktformular, dass ich auf mehrern Seiten genau so nutzen möchte. Wenn ich es als globales Element speichere, muss ich eine Änderung nur noch an einem Formular machen und die anderen werden direkt mit angepasst. Genau so funktionieren auch die Presets. Schlau eingesetzt heißt es: stundenlange Änderungen auf der Website adé!

5. Dank dem WordPress-Theme Divi brauchst du kaum zusätzliche Plugins

Divi kommt schon in der Basisversion sehr umfangreich an. Du brauchst kaum zusätzliche Plugins. Buttons, Icons, Kontaktformulare, Classic Editor aktivieren – das kann Divi schon. Für mich immer ganz schlimm, wenn ich Websites sehe, die von jemandem gebaut wurden, der die Möglichkeiten bei Divi nicht kennt und die Seite mit unnötigen Plugins zuklatscht. Ich hab momentan 8. Sicherheit, Firewall, SEO. Sowas. Hier hab ich dir aufgelistet, welche Plugins Divi sinnvoll ergänzen.

6. Responsive Anpassung mit DIvi

Divi ist schon richtig klasse, was die Optimierung für Mobil und Tablet angeht. Du kannst jedes einzelne Textfitzelchen, egal ob Farbe, Größe oder Abstand, für Mobil optimieren! Kannst ausblenden, was nicht angezeigt werden soll, die Größen ändern, uuuund so weiter. Mein Trick: jedes neue Modul und Zeile für mobil anpassen und dann nur noch kopieren.

7. WordPress (Blog) Layout mit Divi ändern

Der Divi Builder erlaubt, ganze Layouts anzulegen. Das heißt: Du erstellst ein Layout für deine Blogbeiträge, Archivseiten, Footer oder Menü und das wird automatisch auf den entsprechenden Seiten übernommen. So hab ich Header und Footer im Theme Builder gestaltet. Meine Blogbeiträge schreibe ich im Classic Editor von WordPress und das Layout wird automatisch übernommen. Hier spielen WordPress und Divi Theme Hand in Hand.

8. Viele Erweiterungen und Layouts von Divi

Das Divi Theme selbst kommt schon sehr umfangreich an. Das tolle ist aber, dass es für jeden Schnickschnack noch ein Plugin von Elegent Themes gibt. Es gibt wirklich kaum Grenzen. Wenn im Standardtheme was fehlt, das du unbedingt haben möchtest, dann gibt es dazu ganz sicher ein Plugin für Divi oder ein kleines Codeschnipselchen, um das anzupassen. Außerdem bietet die Divi Bibliothek wahnsinnig viele Layouts. Die sind super, wenn mal die Ideen fehlen. Nur aufpassen: in der responsive-Anpassung sind sie die reinste Katastrophe und brauchen viel Zeit und Arbeit zur Anpassung. Lieber einzelne Abschnitte abgucken und nachbauen. Eigenes CSS Und um die Möglichkeiten wirklich grenzenlos zu machen, hat Divi noch die Möglichkeit, eigenes CSS zu verwenden. Mit diesem Code können bestimmte Dinge nochmal angepasst werden, wenn die Einstellung in Divi nicht vorhanden ist.

9. Dauerhafte Aktualisierungen für das Divi WordPress-Theme

Elegent Themes möchte mit seinem Divi Spitzenreiter sein und gibt sich dafür viel Mühe. Das Theme wird ständig überarbeitet, erweitert und aktualisiert. So kam im Sommer 2021 das Geschwindigkeitsupdate raus, das von vielen lang erhofft war. Denn einen Nachteil hat Divi: Durch die vielen enthaltenen Möglichkeiten ist es etwas bloaded. Dank dem neuen Booster-Update wird der Code schön gebündelt und die Ladezeit hat sich enorm verbessert. Bald erhalten wir Divi 5, welches uns komprimierten Code und schnellere Ladezeiten verspricht.

10. Preis für das Divi WordPress-Theme

Yes, natürlich. Der Preis. Der ist Spitzenklasse! Im Vergleich zu seinen Mitbewerbern ist Divi da ganz vorne. Die Lifetime-Lizenz gibt es bereits für ca. 220 €, ganz oft auch im Sale für weniger. Grundsätzlich kannst du Divi gratis verwenden, dann wird es aber nicht mehr aktualisiert. Das ist natürlich nix, allein schon wegen der Sicherheit der Website. Mit der Lifetime Lizenz wirst du mit Updates versorgt und kannst so viele Websites bauen, wie du willst. Das ist grandios! Wie Elegant Themes dann Geld verdient? Durch zubuchbare Abos und Plugins. Hoffen wir, dass das System so bleibt.

Abschließendes Fazit zu meiner Divi-Liebe

Moderne Websites Wichtiger Punkt. Mit Visual Buildern kriegst du moderne, zeitgemäße Websites hin. Der Unterschied ist erkennbar. Du bist damit um so vieles flexibler. Keiner will mehr Text mit Bild. Jeder will fancy und aussagekräftig, Persönlichkeit. & Specialeffects. Übergabe an Kunden Selbst meine Kunden lieben Divi. Für absolute WordPress-Neulinge ist das zwar erschlagend, aber mit etwas Willen kann man sich schnell reinfuchsen. Wenn ich dann erkläre, wie sie ihre Seite bearbeiten können (nämlich komplett über die Ansichtsseite, ohne das Backend berühren zu müssen) und dazu am einfachsten bereits vorhandene Module kopieren und ändern sollen, dann sind sie glücklich. Dann müssen sie nämlich nicht mehr für kleine Textänderungen oder ein neues Bild den Profi holen und fühlen sich nicht mehr machtlos! Die meisten wollen dann gleich noch wissen, wie sie ganze Seiten kopieren und ins Menü platzieren können! Dafür hab ich auch meine Tutorials auf YouTube erstellt, um schnell mal nachschauen zu können. Coaching & Kurse Mittlerweile ist meine Liebe und Wissen zu Divi so groß, dass ich für Divi-Coachings und Kurse angefragt werde. Ich hab ein halbes Jahr fröhlich vor mich hingebaut, viele Fragen beantwortet, da kamen die ersten Anfragen für Coachings rein. Also zeige ich dir auch, wie du wundervolle Websites erstellen kannst! So gut und toll Divi ist, empfehle ich tatsächlich jedem, vorab ein Coaching oder einen Kurs zu machen. Das spart hinterher wirklich viel Zeit und Nerven, um wieder alles glattzubügeln. Ich habe oft Kunden, die erst Wochenlang selbst probiert haben und es dann doch an mich abgeben. Ganz ehrlich? Das macht auch mir keinen Spaß. Fehler suchen und durchwurschteln statt von Anfang an richtig machen ist nicht so meine Lieblingsbeschäftigung. Also, viel Spaß mit Divi! Und wenn du Fragen hast, schrei(b)!