Divi Webdesign

Im Beitrag Divi Webdesign berichte ich euch, wie ich bei Cybercroft Media mit dem Divi Theme, dem Divi Builder und WordPress arbeite.

Am Anfang steht WordPress

Als freie und kostenlose CMS Software (Content Management System) ist für die meisten meiner Kunden die erste Wahl. Mit WordPress lässt sich die Seite später leicht weiterentwickeln und mit Inhalten ergänzen. Während viele Webstudios eher die Seiten einzeln programmieren und designen setze ich eben auf Flexibilität. Sicher sind programmierte Webseiten meist schlanker (=schneller), aber eben auch meist viel teurer. Mein typischer Kunde achtet sehr auf die Kosten und will seine Seite später selbsttätig ergänzen können.

WordPress ist somit als Open Source System eine gute Wahl.

  • WordPress
  • Plug-Ins
  • Divi Theme vs Builder
  • Wie setze ich Divi ein
  • Vorteile von Divi

Plug-ins

In der Basis ist WordPress bereits ein umfangreiches Tool. Ich ergänze es mit einfach zu installierenden Plug-ins um den Funktionsumfang den Kundenwünschen entsprechend zu erweitern. Auch hier bietet die WordPress Plug-in Bibliothek eine sehr große Auswahl an kostenlosen, aber auch Premium Angeboten.

Somit lässt sich mit WordPress an sich schon eine moderne Webseite mit vielen Funktionen online stellen. Es werden für WordPress auch viele Themes angeboten. Diese lassen sich meist auch gut anpassen, und modifizieren. Nach meiner Erfahrung kommen diese aber immer seltener zum Einsatz, da die Kundenwünsche sehr individuell sind. Man möchte ja nun auch für den Kunden eine individuelle und einzigartige Webseite entwerfen. Mit dem Divi Theme und dem Divi Builder ist genau dies möglich.

WordPress Divi Cybercroft Media

Hier die wichtigsten Plug-in’s

Must have Plug-in’s
  • Cache Tool Autoptimize (Geschwindigkeitsoptimierung)
  • DSGVO Plug-Ins (Datenschutz) Borlabs
  • Broken Link Checker
  • Yoast SEO
Zusätzliche Plug-in’s
  • WooCommerce (Shop Plug-in)
  • EDD Easy digital Downloads (Shop Plug-in)
  • Erident Custom Login
  • Thumbnail Admin
Ergänzungen
  • Google Site Kit (Analytics)
  • Social Media Plug-ins

Divi Webdesign im Detail

Der Divi Theme inklusive Builder

Basierend auf WordPress nutze ich seit 2018 den Divi Theme, beziehungsweise den Divi Builder. Der Entwickler Elegant Themes bietet einen klassischen Theme an, der bereits viele individuelle Modifikationen ermöglicht und gleichzeitig den Page Builder enthält. Damit lässt sich also eine komplette Webseite individuell entwerfen und gestalten. Divi selbst bietet zudem auch eine Vielzahl an Layouts und Templates an. Diese können sie ganz einfach über ihren Divi Builder einspielen. Ein Kleine Vorschau zur Layout Galerie findest du hier.

Der Divi Builder als Plug-in

Den Divi Builder, das Plug-In selbst, können Sie für verschiedene Themen verwenden. Wenn man beispielsweise ein anderes Theme oder Template nutzt, kannst du den Divi Builder-Plug-In auf dem eigenen Theme selbst installieren und so auch für das Erstellen und Designen deiner Webseiten Inhalte nutzen. Hierfür bietet euch Elegant Themes eine Kostprobe an. Hier könnt ihr den Divi Theme Builder direkt ausprobieren.

Divi webdesign Builder

Der Einsatz von Divi bei Cybercroft Media

Für die meisten Webprojekte setze ich also den Divi Theme ein. Hierfür wird von mir zusätzlich ein Child Theme angelegt, in dem ich zusätzlichen CSS Code und andere Funktionen anlege. Den Design und Gestaltungsprozess erledige ich dann mit dem Divi Page Builder. Auf Wunsch können meine Kunden diesen ebenfalls nutzen und so selbsttätig Ihre Webseite erweitern und gestalten.

 

Webdesign Prozess

Step by Step
  • WordPress installieren (per FTP auf dem mein Eigenen oder dem Kundenserver)
  • Plug-Ins installieren
  • Divi Theme mit Builder installieren
  • Design Prozess mit dem Divi Builder beginnen
Webdesign-Divi-01

Vom Entwurf zur fertigen Webseite

Mit meinen Kunden bespreche ich natürlich im Vorfeld die Wünsche. Neben den benötigten Funktionen, werden auch die Farbgestaltung und die Struktur der Webseite festgelegt. Manchmal gibt es eine Skizze, oder eine Webseite als Vorlage oder Inspiration. Hieraus erstelle ich einen ersten Entwurf, damit man eine Idee von Haptik und des „look and feel“ der Webseite bekommt.

Mit dem Divi Builder lassen sich neben der rein grafischen und inhaltlichen Gestaltung natürlich auch der Menü und Footer Bereich gestalten. Animationen und Effekte gehören bei einem modernem Webprojekt natürlich auch dazu. Farben und Schriften aus einem bereits vorhandenen Firmenlogo binde ich ebenfalls ein. Für eine Darstellung habe ich hier in den Referenzen einige meiner Projekte als Webdesign Fall Studien angelegt. Hier können sie nachverfolgen wie die Webseiten entstehen und realisiert werden. Das Einbinden von Google Fonts sind mit dem Divi Theme ebenso möglich, wie das sogenannte „Responsive design“. Denn sehr viele Internetseiten werden heutzutage auf Mobiltelefonen  abgerufen und betrachtet. Je nach Zielgruppe deiner Webseite ist hier also auch ein besonderes Augenmerk darauf zu legen. Deine Webseite sollte nämlich nicht nur auf dem PC Bildschirm eine gute Figur machen, sondern auch auf wesentliche kleineren Bildschirmen und modernem Mobiltelefonen gut aussehen und vor allem auch gut funktionieren.

Webdesign-Divi-02

Warum Divi für den Kunden von Vorteil ist

Ein Großteil meiner Auftraggeber möchte seine Webseite später selbst pflegen oder auch später selbst erweitern. Hier kommen natürlich der leicht zu lernende Umgang mit dem Divi Builder zum tragen. Eigene Seiten mit neuen Inhalten hinzuzufügen ist kinderleicht. Hierfür biete ich natürlich ein Live Tutorial an und jeder Kunde erhält von mir in einem kurzen Workshop als Einweisung in die Handhabung, Wartung und Pflege seiner Webseite. Für Kunden die technisch nicht so versiert sind oder schlicht weg keine Zeit haben, übernehme ich natürlich auch diese Ausgaben.

Zur Weiterentwicklung nutze ich selbst die Video Plattform Youtube. Hier geben viele Webdesigner Tips und Tutorials zum Thema Divi und der kreativen Nutzung. Ich empfehle den Youtube MAK. Seine Videos sind englischsprachig, aber top aktuell, sympatisch und verständlich.

Webseiten die ich mit dem Divi Theme ausliefere erhalten natürlich einen Divi Lizenzschlüssel und erhalten so automatisch alle Updates die von Elegant Themes veröffentlicht werden. So erhält man nicht nur alle sicherheitsrelevanten Updates, sondern auch Zugriff auf die neuesten Features von Divi.

Video Empfehlung

YouTube

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

Video laden