Divi Theme für WordPress – 12 überzeugende Vorteile

Divi Theme für WordPress – 12 überzeugende Vorteile

In meinen Anfängen mit WordPress habe ich das getan, was vermutlich die meisten tun, die ihre Website selbst erstellen wollen:
Ich habe mich durch die kostenlose Theme Bibliothek von WordPress getestet.
Viele Themes sahen in der Vorschau richtig genial aus, waren dann aber – auf meine mickrigen Inhalte bezogen – total öde und unspektakulär.
Bei einigen Themes habe ich mir dann die Mühe gemacht, mich etwas einzuarbeiten… doch da gingen die Probleme schon los:
  • viele der kostenlosen Themes sind nicht so gut dokumentiert
  • die Einstellungen sind entweder nicht ausreichend, um wirklich viel anzupassen, oder …
  • es sind sooo umfangreiche Einstellungsmöglichkeiten vorhanden, dass man ewig braucht, um sich zurechtzufinden
  • viele Themes brauchen einige Plugins extra, um die in der Vorschau dargestellten Inhalte überhaupt so bieten zu können

Ich möchte gar nicht bestreiten, dass es auch einige Themes gibt, mit denen man ganz gute Ergebnisse erzielen kann – das kostenlose Astra Theme zum Beispiel oder das günstige Theme Soledad.
Allerdings habe ich 2020 eins der meistgenutzten Themes weltweit – das Divi Theme von ElegantThemes – getestet und dann auch gleich verstanden, warum es so häufig genutzt wird:

Es ist einfach (und) genial!

Ich stelle dir hier in Artikel einmal meine Lieblingsfeatures vor, die das Theme bietet.

Kein anderes Theme ist so einfach zu bedienen bei gleichzeitig so einem großen Funktionsumfang

Mit dem Divi Theme kannst du total einfach direkt auf der jeweiligen Seite die Inhalte einfügen und bearbeiten (schau dir dazu gern mein Einführungsvideo an oder probier es hier in der kostenlosen Live Demo selbst aus).
Es eignet sich somit auch perfekt für alle, die ihre WordPress Website selbst erstellen möchten und sich nicht davor scheuen, sich ein kleines bisschen reinzuarbeiten.
Die Einarbeitungszeit lohnt sich auf lange Sicht gesehen extrem (und ich kann dabei auch gern unterstützen).
Wenn du deine eigene Lizenz für Divi erwirbst, hast du außerdem Support von elegantThemes – und der ist richtig klasse! Sie schalten sich sogar wenn nötig auf deine Website drauf und beheben das Problem für dich.

Inhalte in Divi einfügen über Module

Um Inhalte auf deine Website einzufügen, hast du in Divi sogenannte Module zur Verfügung. Es gibt dort zum Beispiel Texte, Bilder, Buttons, Videos, Kundenstimmen (Testimonials), Akkordeons (aufklappbare Inhalte), Sounddateien, Newsletter Anmeldung, Kontaktformulare und viele viele mehr.
Sobald du den gewünschten Inhalt an der gewünschten Stelle platziert hast, kannst du ihn weiter anpassen – genau nach deinem Geschmack und natürlich immer mit genau deinem Branding (Farben, Schriften & Co.).

Voreinstellungen – Presets

Eins der coolsten Features in Divi überhaupt sind die sogenannten Presets, also sowas wie Voreinstellungen. Damit kannst du genau festlegen, wie zum Beispiel:

  • die Abstände einzelner Bereiche standardmäßig sein sollen
  • die Schriftgrößen bestimmter Überschriften sein sollen
  • die Hintergrundbilder bestimmter Elemente sein sollen
  • die Effekte, Schatten, Größen bestimmter Bilder sein sollen

und vieles vieles mehr. Du bearbeitest also ein Element (Text, Bild, Button, …) und legst bestimmte Eigenschaften fest.

Wenn du möchtest, dass alle Elemente des gleichen Typs dieselben Eigenschaften aufweisen, musst du hier nicht kompliziert jedes einzelne Element auf jeder einzelnen Unterseite bearbeiten (das mag vielleicht beim ersten Mal noch möglich sein, aber stell dir mal vor, du möchtest 2x, 3x etwas ändern … na dann Prost Mahlzeit!).

Mit den Presets legst du nun also die Voreinstellungen fest und kannst entweder festlegen, dass nur die Elemente, denen du die Voreinstellung zuweist, die gleichen Eigenschaften übernehmen. Und zwar praktischerweise immer, wenn du diese erneut überarbeitest. ODER du legst fest, dass deine Voreinstellungen komplett für alle gleichen Elemente auf deiner Website gelten.

Kleiner Disclaimer: Das kann auch ganz schön nach hinten losgehen, denn vielleicht wolltest du den rosa Herzchen Hintergrund doch nicht für jeden einzelnen Bereich auf deiner Website einstellen – mach also am besten immer vorher ein Backup, bevor du die Presets benutzt 🙂

Mehrfach genutzte (globale) Elemente

Super praktisch und von mir häufig genutzt sind globale Elemente. Du kannst damit zum Beispiel ein Newsletter Anmeldeformular, ein Kontaktformular, eine Autorenbox und vieles mehr erstellen und an verschiedenen Stellen einbetten.

Wenn du es dann an einer der Stellen änderst, wird es gleichzeitig überall angepasst. Spart unglaublich viel Arbeit – du musst nicht händisch in jede Seite rein, um Abstände, Tippfehler, Bild- und Textänderungen mühsam vorzunehmen.

Theme Builder

Für Fortgeschrittene, die mit Divi an die Grenzen stoßen, gibt es den Theme Builder. Wie der Name schon andeutet, kannst du dir damit so richtig individuell fast alles zusammenbauen, was du dir vorstellen kannst.

Du kannst individuelle Header und Footer erstellen, die du nach Belieben auf allen oder nur auf einigen Seiten anzeigen lässt. Du kannst die Blogartikel oder auch die Shopseiten (und vieles mehr) komplett indivuduell gestalten und anordnen.

Für so viel Freiheit benötigt man bei anderen Themes Programmierkenntnisse – mit Divi geht es ziemlich intuitiv und mit dem gleichen Divi Builder, den du auch für die normalen Seiten verwendest.

Divi Builder Übersicht

Hier zeige ich dir, wie du einen individuellen Header (oberen Bereich der Website) mit Divi erstellen kannst.

Landing Pages mit Divi einstellen

Der Begriff „Landing Pages“ wird ja mittlerweile teilweise für unterschiedliche Dinge verwendet. Ursprünglich gemeint ist damit eine Unterseite deiner Website, auf der das Menü oben und alle anderen „störenden“ Elemente ausgeblendet sind. Sinn und Zweck davon ist, dass der Besucher nur eine einzige Sache auf der Seite macht – in den allermeisten Fällen sich für einen Newsletter anmeldet oder etwas kauft. Bei den meisten Themes würdest du hierfür ein extra Plugin benötigen. Bei Divi kannst du ganz easy in den Seiten-Attributen „Blank Page“ einstellen und schon ist auf der Seite das Menü oben und der Footer unten ausgeblendet.

 

Landing Page Einstellung mit Divi

(vergiss in dem Fall nicht, dass du händisch noch einen Link zur Datenschutzerklärung und zum Impressum hinzufügen musst).

Mobile Version ist komplett anpassbar

Die Website auf dem Computer hübsch zu machen, ist ja schon die erste große Herausforderung. Doch häufig sieht dann die liebevoll erstellte Seite auf dem Tablet oder Handy ganz anders aus. Teilweise sind vielleicht Schriften auf einem Hintergrund nicht zu lesen oder überdecken Gesichter, Abstände sind zu groß und vieles mehr.

Bei Divi kannst du fast jede Einstellung separat fürs Tablet und Handy anpassen. Das allein ist schonmal super praktisch! Es geht allerdings noch weiter: Du kannst auch angeben, dass z.B. auf dem Handy ein ganz anderes Bild oder ein ganz anderer Text verwendet werden soll als auf dem Computer, oder sogar ein Bereich ganz ausgeblendet werden soll auf einem bestimmten Gerät.

Das nenne ich mal reponsiv!

Divi Bibliothek

Falls du schonmal mit dem Elementor PageBuilder gearbeitet hast, kennst du es vielleicht schon:

Du kannst auch mit Divi einzelne Elemente (Buttons, Textblöcke), größere Abschnitte oder auch ganze Seiten in der Bibliothek speichern. Auf die Bibliothek hast du Zugriff von allen anderen Unterseiten deiner Website aus und kannst die dort gespeicherten Vorlagen wiederverwenden.

Super ist auch die Möglichkeit, einzelne oder alle Elemente aus der Bibliothek zu exportieren, um sie als Backup zu verwenden oder auf einer anderen Website wieder zu importieren.

Du sparst viele Plugins

Bei vielen anderen Themes brauchst du für jede kleine Funktion wieder ein extra Plugin – für ein Kontaktformular, für die Newsletteranmeldung, für eine Bildergallerie, für hübsche Testimonials und und und.

Bei Divi hast du das alles schon direkt mit dabei und sparst dir so die Installation, Einrichtung und regelmäßige Aktualisierung vieler Plugins.

 

Divi Templates – Premium Layouts / Vorlagen

Falls du weder Zeit, Fähigkeiten oder Lust hast, dir ein professionelles Webdesign selbst zu erstellen, kannst du auf viele hundert kostenlose Layoutvorlagen zurückgreifen, die du dann natürlich noch weiter anpassen kannst (und solltest).

Ständig Verbesserungen & neue Funktionen

Da das Divi Theme ständig weiterentwickelt wird, kommen auch immer wieder richtig coole neue Funktionen hinzu – wie zuletzt die Background Patterns, mit denen man die Hintergründe von Bereichen ganz vielfältig gestalten kann und z.B. zusätzlich zu einem Bild auch Muster (patterns) hinterlegen und vielfältig anpassen kann.

Außerdem wurde im letzten Jahr auch noch viel an der Performance verbessert und als nächstes wird es wohl weitere Einstellungsmöglichkeiten für Verlaufshintergründe geben (ganz den aktuellen Trends angepasst).

Erweiterbarkeit durch Pakete

Für noch mehr Anpassungsmöglichkeiten, spezielle Effekte und Zusammenarbeit mit verschiedenen Erweiterungen (z.B. dem WooCommerce Shop für einen Online Shop, dem Events Kalender für Termine) gibt es die Möglichkeit, noch weitere Plugins dazu zu holen – teils kostenlos, größtenteils sehr günstig.

ElegantThemes hat hier selbst noch eine große Auswahl, es gibt allerdings auch externe Entwickler (z.B. Pee-Aye Creative), die Divi mit coolen Funktionen noch weiter aufwerten.

Gibt es auch Nachteile?

Vielleicht fragst du dich bei so vielen Vorteilen und coolen Features, ob es beim Divi Theme auch einen Haken gibt. Natürlich ist selten alles perfekt – so auch beim Divi Theme. Was hier in Zukunft noch besser werden darf:

  • wenn du richtig viele krasse Effekte nutzt oder auf die vorgefertigten Layouts zurückgreifst und diese extrem anpasst, kann die Website langsam werden
  • ein paar kleine Bugs (Fehler) im Divi Builder nerven manchmal bei der Arbeit – tippst du z.B. den Farbcode nicht schnell genug ein, wird das Feld von Divi einfach mit einem anderen Farbcode aufgefüllt. Ahhh soo unnötig! Ab und zu funktionieren auch die Formatierungen nicht. Da hilft im Notfall nur: Speichern, Seite schließen, neu aufrufen und nochmal versuchen. Meist geht dann alles wieder.
  • bei einigen wenigen Dingen sollte man vorsichtig sein – wenn du per Drag & Drop Elemente zurechtziehst, z.B. ein Bild weiter nach rechts verschiebst, trägt der Divi Builder im Hintergrund für dich ein, dass links vom Bild ein bestimmter Abstand sein muss. Das sieht dann vielleicht am Computerbildschirm ganz cool aus, auf dem Handy ist das Bild dann aber vermutlich stark verschoben oder im schlimmsten Fall nicht mehr zu sehen.

Zum Glück gibt es allerdings den fantastischen Divi Support, der mir bisher noch bei allen Schwierigkeiten weiterhelfen konnte. Für mich überwiegen auf jeden Fall ganz klar die Vorteile – vor allem der mega Funktionsumfang und die einfache Bedienung.

Insgesamt kann ich dir also nur sagen: Yes, Divi ist grandios und die erste Wahl, wenn du dir nicht sicher bist, welches Theme du verwenden sollst. Falls du es trotzdem erst einmal ausprobieren möchtest, bevor du es dir für ca. 250€ kaufst, schau doch mal, ob mein Schnupperangebot was für dich ist.

Wie du ein Logo in WordPress einfügst und anpasst (mit und ohne Divi Theme)

Wie du ein Logo in WordPress einfügst und anpasst (mit und ohne Divi Theme)

Ein ganz wichtiger Teil deines Online Auftritts ist natürlich dein einzigartiges Logo. Es sorgt neben deinen Markenfarben und -schriften für den Wiedererkennungswert und gibt – im Idealfall – gleich auf den ersten Blick Preis, wer du bist und was du anbietest. Oder vermittelt ein Gefühl und eine Persönlichkeit und wirkt ansprechend auf deine Zielgruppe.
Trotzdem ist es nicht notwendig, dass du gleich beim Start deines Business schon ein perfektes Logo für viel Geld erstellen lässt. Gerade in der Findungsphase ändert sich ja auch häufig noch die Zielgruppe und die Richtung deines Business, während du dich weiterentwickelst. Es spricht also nichts dagegen, dein Logo zunächst selbst zu erstellen, z.B. in Form eines Schriftzugs.

In diesem Artikel möchte ich dir zeigen, worauf es bei deinem Logo ankommt und auf welche Weise du dein Logo auf deiner WordPress Website einbinden kannst.

Logo erstellen (lassen)

Wenn du noch kein Logo hast, kannst du es dir z.B. mit Canva selbst erstellen. Dazu legst du dir einen Account an und klickst dann bei Design erstellen auf Logo. 

Praktischerweise bietet Canva auch eine sehr große Auswahl an Vorlagen, die du dann auch weiter anpassen kannst – ersetze die Farben mit deinen Brandingfarben, nutze deine Schriftarten, füge ggf. eigene Grafikelemente oder Fotos ein – alles ist möglich. 

Falls dir das zu viel Arbeit ist oder du das Logo lieber Profis überlassen möchtest, gibt es neben richtig guten Designern (immer die erste Wahl, wenn man. essich leisten kann) Services wie z.B. designenlassen.de oder logomax.de. Hier erhältst du für einen bestimmten Betrag nach einem Briefing mehrere Logos zur Auswahl nur für dich gestaltet, kannst ggf. noch weitere Anpassungen vornehmen lassen und dir dann den Favoriten kaufen. 

 

Welches Format soll das Logo haben?

Idealerweise speicherst du dein Logo als .png Datei mit transparentem Hintergrund ab, damit es sich nahtlos in die Leiste deines Website Menüs einfügt. Ansonsten ist es natürlich auch möglich, die Hintergrundfarbe deines Menüs als Hintergrundfarbe bei deinem Logo einzustellen. Dein Logo sollte, da es auf jeder Unterseite erscheint und auch als Erstes geladen wird, eine möglichst kleine Dateigröße haben, idealerweise unter 50 KB. Die Maße sind bei WordPress von Theme zu Theme unterschiedlich und mit einem Seitenverhältnis von 4:3 oder 16:9 liegst du meist richtig. Das Querformat macht beim Logo Sinn, damit es sich vom Platz her besser in ein Website Menü einfügt und noch gut lesbar ist.

Breiter als 300 Pixel braucht dein Logo meist nicht zu sein, und eher noch schmaler, wenn es sich ohne große Platzverschwendung in die Menüleiste einfügen soll. Bedenke auch, dass ein sehr hohes Logo, wenn es in die Menüleiste am oberen Rand eingebaut wird, die Menüleiste entweder sehr hoch macht, oder sehr stark verkleinert wird und evtl. nicht so gut lesbar ist. Teste die Darstellung unbedingt auch auf Mobilgeräten – hier wird dein am Desktop gut erkennbares Logo vielleicht zu klein und unleserlich dargestellt.   

 

Wo positioniere ich das Logo?

Du kannst dein Logo bei vielen (nicht allen!) Themes an verschiedenen Positionen anzeigen lassen.

Beim Divi Theme sind die möglichen Positionen zum Beispiel: links neben dem Menü (so ist es bei den meisten Websites),  mittig über dem Menü, mittig im Menü, oder auch in einem vertikalen Menü an der linken oder rechten Seite. Um das Ganze mal grafisch zu verdeutlichen:

 

Logo links (Bei den meisten Websites zu finden): 

Logo links

mittig über dem Menü:

Logo zentriert über Menü

Logo zentriert im Menü:

Logo zentriert im Menü

Vertikales Menü mit zentriertem Logo:

Vertikales Menü mit zentriertem Logo

Jede Position hat ihre Vor- und Nachteile:
Ein zentriertes Logo über dem Menü kommt z.B. sehr gut zur Geltung, macht allerdings die Menüleiste auch recht hoch, sodass ein Teil des wichtigen oberen Platzes deiner Website, wo du normalerweise ein Titelbild und deinen Vorstelltext zeigst, „verschenkt“ wird.

Für ein Logo in der Mitte des Menüs macht es Sinn, dass du auf beiden Seiten gleich viele Menüpunkte hast, damit es symmetrisch bleibt. Außerdem wird das Menü dadurch ein wenig zerrissen und der Besucher hat es etwas schwerer, alle Punkte auf einen Blick zu erfassen.

Ein Logo links vom Menü ist der Standard, und gerade beim Menü solltest du keine großen Experimente wagen, da sich hier Besucher einfach nur schnell zurechtfinden wollen. Allerdings kann dein Logo an der Stelle etwas mehr untergehen, und der Fokus wird stärker auf die Menüpunkte als auf das Logo gelenkt – was aber auch gut sein kann.

Ein vertikales Menü mit Logo lenkt die Aufmerksamkeit auf sich und passt zum Trend, dass mehr und mehr Besucher deine Website mit einem mobilen Gerät besuchen (auf dem das Menü aber nochmal anders dargestellt wird, dazu später). Gerade wenn du mehr als 5, 6 Hauptmenüeinträge unterbringen willst, kann das vertikale Menü eine gute Lösung sein. Allerdings wird auch hier viel Platz von deiner Website verschenkt, wenn sich das Menü nicht automatisch einklappt.

 

Verlinkung beim Logo

Bei den meisten Websites wirst du auf die Startseite geleitet, wenn du auf das Logo klickst. Sofern du einen Link bei deinem Theme angeben kannst, solltest du diese Konvention auf jeden Fall beibehalten.

Dein Website-Workbook für mehr Klarheit

Du willst eine professionelle Website erstellen mit der du die richtigen Kunden anziehst und überzeugst?

 

Wo kann ich ein Logo einfügen, ersetzen und anpassen?

Wie du dein Logo einfügen und anpassen kannst, hängt von deinem WordPress Theme ab. Ich werde hier auf einige gängige Themes eingehen:

Logo hochladen in kostenlosen WordPress Themes (Beispiele Astra, OceanWP, Twenty Twenty-One)

Bei den meisten kostenlosen WordPress Themes kannst du das Logo über den Theme Customizer hochladen. Ich beziehe mich hier als Beispiel (aus zig Tausend) nur auf die drei kostenlosen Themes Astra, OceanWP und das von WordPress automatisch mitinstallierte Theme Twenty Twenty-One. Bei den meisten anderen Themes ist es jedoch an ähnlicher Stelle zu finden und zu tauschen.

Den Theme Customizer kannst du über zwei verschiedene Wege erreichen, wenn du dich als Administrator im WordPress Dashboard eingeloggt hast:

1.) Im Dashboard unter Design -> Customizer.

2.) Wenn du schon im Dashboard auf der Design -> Themes Seite bist mit Klick auf den Customizer Button beim aktuell aktivierten Theme:

 

Customizer auswählen in OceanWP

 

Bei vielen Themes ist das Logo direkt im Theme Customizer unter dem ersten Punkt Website-Informationen zu finden:

Logo auswählen im Customizer

Bei Ocean WP findest du das Logo im Customizer unter Header -> Logo.
Du kannst dort neben dem Standard Logo auch zusätzlich ein Retina Logo in doppelter Größe hochladen, extra für Retina Displays mit ganz hoher Auflösung.

Beim Astra Theme kannst du das Logo entweder auch im Theme Customizer bearbeiten, unter Header Builder -> Logo. Oder du öffnest im Dashboard unter Design -> die Astra Optionen und klickst neben dem Header Builder auf Logo hochladen (was dich eigentlich auch nur zurück zum Theme Customizer befördert):

 

Astra Theme Optionen

Logo hochladen und anpassen mit dem kostenpflichtigen Divi Theme

Wenn du das Divi Theme nutzt und dein Logo einbauen möchtest, kannst du im WordPress Dashboard unter Divi -> Theme-Optionen gleich an erster Stelle dein Logo hochladen.

divi logo hochladen

Weitere Anpassungen kannst du dann wieder über den Theme Customizer vornehmen. Bei Header & Navigation lässt sich bei Headerformat die Position des Logos festlegen und bei Primäre Menüleiste die Größe des Menüs und des Logos:

divi logo settings 1

Einstellungen unter Headerformat

divi logo settings 2

Einstellungen unter Primäre Menüleiste

Logo individuell anpassen mit dem Divi Theme Builder

Wem die Standard Positionen nicht ausreichen, der kann sich die Logo-Menüleiste komplett selber bauen. Hierzu kann man unter Divi -> Theme Builder eine Globale Kopfzeile hinzufügen und diese so gestalten, wie man auch sonst die Unterseiten mit dem Divi Builder gestaltet. 

Dies kann z.B. nützlich sein, wenn du noch weitere Elemente in deine Headerleiste einfügen möchtest (Social Icons, weitere Bilder, Text), oder wenn du spezielle Anpassungen für Mobilgeräte vornehmen möchtest. 

divi globale kopfzeile hinzufügen
YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Logo hochladen in anderen kostenpflichtigen Themes (Beispiele Bridge und soledad)

Bridge

Das Bridge Theme ist eins der meistgekauften Themes auf Themeforest – einer großen Plattform für WordPress Themes und Website Templates. Nach der Installation des Themes und eines zugehörigen Bridge Plugins findest du zahlreiche Logo Bearbeitungsmöglichkeiten im Dashboard unter Qode Options -> Logo:

 

Soledad

Bei vielen kostenpflichtigen Themes wie z.B. soledad, einem hübschen Blog Theme, findest du die Logo Einstellungen im Theme Customizer. Die Einstellungen sind teilweise so umfangreich, dass man hier entweder ausprobieren muss, was die Einstellung genau macht, oder sich durch die Dokumentation lesen sollte:

 

Du siehst schon: Viele Wege führen nach Rom und da sich die Logo Bearbeitung je nach Theme stark unterscheiden kann, schau im Zweifelsfall in der Dokumentation des jeweiligen Themes nach. Meist wirst du aber direkt im Theme Customizer fündig werden.

 

WordPress Logo (Favicon) ersetzen

Falls du statt dem Logo im Menü das standardmäßig eingestellte WordPress Logo (Favicon genannt) oben neben deiner Website im Browser ersetzen möchtest kannst du dies ebenfalls über den Theme Customizer tun.

Klick dazu im WordPress Backend auf Design -> Customizer und wähle dort unter „Allgemeine Einstellungen“ den Punkt „Website Identität“ (je nach Theme ist das ggf. woanders zu finden – beim Astra Theme z.B. unter „Site Identity“). Hier kannst du das „Website Icon“ ersetzen – durch ein anderes, quadratisches Icon (mind. 512×512 Pixel).

Schreib mir doch gern in den Kommentaren, ob dir dieser Beitrag geholfen hat und wie du dein Logo eingebunden hast! Hast du dir dein Logo selbst erstellt, oder es erstellen lassen?

Wie funktioniert der Divi Builder? Eine kurze Einführung

Wie funktioniert der Divi Builder? Eine kurze Einführung

Schau dir in meinem kurzen Video an, wie du mit dem DIVI Builder in WordPress ganz einfach neue Elemente – Texte, Bilder, Videos & Co. – in deine Website einfügen kannst. 

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden