Webdesign zum selber machen? Ja, das geht!

Um was geht es hier überhaupt?

Webdesign ist das Thema über das wir hier heute sprechen wollen. Aber bevor wir beginnen, sollte dir klar sein, dass dieser Artikel möglicherweise deine Sichtweise gegenüber Webdesign und den damit verbundenen Aufwendungen und Kosten, in ein etwas anderes Licht rücken könnte. Dir sollte aber auch klar sein, dass wir hier über eine fortgeschrittene Methode zum designen einer Website sprechen. Für die Umsetzung solltest du Grundkenntnisse zur Installation von WordPress mitbringen oder zumindest den Willen besitzen, dir diese anzueignen.

Sollte dir das zu aufwändig sein biete ich dir auch die Möglichkeit, in einer persönlichen Schulung, diese Fähigkeiten zu erlernen. Gerne kannst du bei uns aber auch eine fertige Installation oder eine komplette Website mit der vorgestellten Methode erwerben.

Wenn du über diese Fähigkeiten schon verfügst oder bereit bist dir diese anzueignen, heißt das für dich, dass wenn du zusätzlich etwas Zeit und Ehrgeiz investierst, es dir möglich sein sollte, dein Webdesign einfach selbst umzusetzen und es dabei auf eine solide und zukunftsorientierte Plattform zu stellen.

Vorwort

Bevor wir nun aber mit diesem Beitrag starten, möchte ich dich darüber informieren, dass ich diverse Links in diesem Beitrag mit einen * gekennzeichnet habe oder aber über Banner auf andere Webseiten verweise. Bei diesen gekennzeichneten Links* oder Bannern handelt es sich um sogenannte „Affiliate“ Links zu meinen Partnerseiten. Keine Sorge, das ist nichts schlimmes. Für jeden Kauf, der über diese Links „getrackt“ wird, bekomme ich eine kleine Provision. Diese Provision hilft mir dabei, diesen Blog für dich weiterhin kostenfrei zu betreiben. Für dich hat das keinerlei Auswirkungen.

Einführung

Wie setz du nun dein eigenes Webdesign um?

Bevor wir nun zum Punkt kommen, möchte ich dir noch sagen, dass ich dieses Webprojekt ebenfalls mit der vorgestellten Methode aufgebaut habe. Es handelt sich dabei um einen Selbstversuch in welchen ich versucht habe, die Möglichkeiten welche dieses Methode bietet, aufzuzeigen.

Das Beste daran ist aber, dass ich dir durch meine gesammelten Erfahrungen diese Methode uneingeschränkt weiterempfehlen kann. Ich hoffe es ist dir klar, dass es eine se­mi­pro­fes­si­o­nelle Methode eine Website zu erstellen, nicht gratis geben kann. Du hast aber den Vorteil, dass du durch meinen Selbstversuch definitiv nicht die oft zitierte Katze im Sack kaufst.

Ich habe für die Umsetzung dieser Website das kostenpflichtige Divi-Theme von Elegant Themes* genutzt. Es handelt sich bei diesem Theme um ein kostenpflichtiges Theme (Yearly Access oder Lifetime Access) welches exklusiv für das bekannt und kostenfreie CMS System WordPress verfügbar ist.

Ich habe mittlerweile schon einige Themes für WordPress (und Typo3) ausprobiert. Das Divi-Theme* ist aber mitunter eines der Themes, welches sich am individuellsten anpassen lässt und die meisten Möglichkeiten zur Umsetzung des gewünschten Webdesign bietet, ohne dabei vertiefende HTML und CSS Kenntnisse besitzen zu müssen. Natürlich ist nicht alles Gold was glänzt. Individualität bedeutet nicht nur, unzählige Möglichkeiten Einstellungen vornehmen zu können, es macht dieses Theme auch ressourcenmäßig etwas hungriger als andere. Das ist aber ein relativ kleiner Preis für das, was du dafür geboten bekommst und wie individuell du damit Arbeiten kannst.

Ein weitere Vorteil ist es zum Beispiel, dass du das Divi-Theme*, nachdem du dir eine Lizenz gekauft hast, auf unzähligen Websites einsetzten kannst, ohne das dabei weitere Kosten anfallen. Das macht es sogar für Agenturen und selbstständige Webdesigner interessant. Denn sie bekommen nicht nur ein Theme welches sich nahezu grenzenlos an die Bedürfnisse der Kunden anpassen lässt, nein, sie können es auch noch ohne weitere Kosten für Ihre Kunden einsetzen. Auch die Erstellung der Website geht mit Divi* deutlich schneller als mit den herkömmlichen Methoden. Somit ist es durchaus möglich, dass auch du, sofern du eine Agentur beauftragst, deine zukünftige Website mit dem Divi-Theme* realisiert bekommst.

Sehen wir uns kurz an, wie auch du zum Webdesigner werden kannst

Elegant Themes* hat eine Theme entwickelt, welches über einen eigenen visuellen Website Builder in WordPress verfügt. Dieser Builder macht es dir möglich, deine zukünftige Website so zu individualisieren und zu designen, wie du es nicht für möglich gehalten hättest. Sobald du alle Installationen abgeschlossen hast und dich im Visuellen Builder von Divi befindest, kann es auch schon los gehen.

Hier ein Beispiel, wie individuell und einfach du dein eigenes Webdesign umsetzen kannst

Wie bereits weiter oben erwähnt, basiert meine komplette Website auf dem Divi-Theme*. Aus diesem Grund kann ich als Beispiel einen Block von meiner ehemaligen Startseite heranziehen.

Ich werde dir hier die groben Schritte zeigen, wie dieser Block entstanden ist und hoffe dir damit einen kleinen Einblick in die Möglichkeiten von Divi* zu geben.

Aber nun genug, sehen wir uns einmal genauer an wie dieser Block entstanden ist und welche Schritte dafür notwendig waren.

Hintergrund erstellen

Das Divi-Theme* arbeitet mit Abschnitten. Bereits bei der Erstellung eines Abschnittes zeigt sich, wie vielfältig diese Theme ist. Du kannst an dieser Stelle bereits aus drei verschiedenen Rubriken (Regulär, Spezial und volle Breite) wählen.

Um eine Ansicht wie oben zu erstellen, benötigen wir zuerst einen Regulären Abschnitt. Diesen kannst du einfach, wenn der Divi-Duilder aktiviert ist, durch das Klicken auf das Blaue + Symbol, erstellen.

Wie bei WordPress üblich, lautet auch hier das Motto, „you get what you see“.

In diesem neuen Abschnitt legen wir nun direkt den Hintergrund für den kompletten Block fest.

Ein kleiner Tipp an dieser Stelle: Achte bei der Verwendung von Bilder immer auf die Lizenz. Es gibt im Internet verschiedene Plattformen, wo du Bilder gratis herunterladen oder auch kaufen kannst und diese in weiterer Folge für dein Projekt nutzen kannst.

Ich habe mich in meinen Abschnitt für ein Bild bestehend aus einem grünen Netz entschieden. Du brauchst dein gewünschtes Bild nur downloaden. Eine Bearbeitung ist nicht notwendig!

It´s Magic, it´s Webdesign

Damit kommen wir auch schon zu den unglaublichen Möglichkeiten welche dir das Divi-Theme* bietet. Das untere Bild verdeutlicht ziemlich gut, die nahezu grenzenlosen Einstellmöglichkeiten eines einzigen Abschnitts:

Um eine Ansicht wie in unserem Beispielblock von meiner ehemaligen Startseite zu bekommen, musst du das Hintergrundbild nicht erst bearbeiten. Mit den Einstellungen vom Divi-Theme* ist das auch ohne Bildbearbeitung möglich. Sehen wir uns einmal genauer an, wie ich den Hintergrund für diesen Block erstellt habe.

Als Erstes habe ich das Hintergrundbild in den Einstellungen des Abschnittes eingefügt und den Prallaxen-Effekt aktiviert.

Danach habe ich die Übergänge hin zu den anderen Abschnitten, für oben und unten, festgelegt. Diese Übergänge können nicht nur individuell gestaltet werden, nein, man kann auch zusätzlich die Einstellungen individuell für verschiedene Plattformen (Desktop, Tablet, Smartphone) vornehmen. Damit ist es zum Beispiel möglich, dass die Höhen der Übergänge auf dem Desktop anders dargestellt werden, wie auf dem Smartphone.

Aber nicht nur das. Du kannst auf den unterschiedlichen Plattformen auch unterschiedliche Übergänge wählen. So kann der Übergang am Desktop zum Beispiel rund sein, während er am Tablet die Form einer Wolke hat und am Smartphone abgeschrägt ist oder vielleicht gar nicht vorhanden ist.

Das ist nicht einfach nur smart, das ist Divi* und Divi* ist ziemlich nice!

Spaß bei Seite, ich denke du merkst ziemlich gut, wie individuell du mit dem Divi-Theme* arbeiten kannst.

Aber gehen wir einen Schritt weiter, schließlich möchte ich dir hier nur grob beschreiben, wie ich diesen Block erstellt habe.

Sofern wir jetzt keine weiteren Einstellungen mehr treffen möchten (Animationen, etc…), haben wir bereits das Hintergrunddesign für diesen Abschnitt festgelegt. Durch einen Klick auf das grüne + können nun weitere Zeilen, im bevorzugten Raster, für diesen Abschnitt einfügen.

An dieser Stelle wieder ein kurzer Tipp: Du kannst selbstverständlich alle individuell erstellten Blöcke in deiner eigenen Bibliothek abspeichern und immer wieder verwenden. Das erspart dir eine Menge Arbeit bei der Erstellung deiner neuen Website.

Zeilen einfügen

Um den Hintergrund nun für Inhalte nutzen zu können, müssen wir uns für ein Zeilenraster entscheiden. In jeder grünen Box können später verschiedene Inhaltsblöcke eingefügt werden.

Um das Design von meiner ehemaligen Startseite zu erreichen, habe ich mich an dieser Stelle zuerst für eine Zeile bestehend aus einem dreier Raster entschieden und darunter noch drei weitere Zeilen ohne Raster eingefügt.

Ich denke aber, du siehst auch an dieser Stelle wieder, wie individuell und einfach du dein Webdesign mit dem Divi-Theme* umsetzen kannst.

Blöcke einfügen und individualisieren

Da ich nun das Raster im neuen Abschnitt mithilfe der gewünschten Zeilen festgelegt habe, habe ich damit begonnen meinen Inhaltsblock zu erstellen.

Auch hier gibt es wieder unzählige vorgefertigte Bausteine die du für dein Webdesign verwenden kannst. Im Bild siehst du wieder einen kleinen Ausschnitt der Möglichkeiten, die dir das Divi-Theme* bietet.

Ich habe an dieser Stelle das Textmodul genommen und damit Boxen designt. Deiner Kreativität werden aber auch hier bestimmt keine Grenzen gesetzt werden. Egal, ob du nun eine Rakete über den Bildschirm fliegen lassen möchtest, ein Video einbinden willst oder vielleicht doch einen Onlineshop über WooCommerce erstellen willst. Mit dem Divi-Theme* ist das alles möglich. Und ja, du hast richtig gelesen, selbst für WooCommerce gibt es ein eigenes Plugin für das Divi-Theme*.

Um das Design meiner Boxen zu bekommen, habe ich folgende Einstellungen getroffen:

Ich habe oben bereits schon einmal erwähnt das du auch mehrere Inhaltblöcke in eine Zeile packen kannst. Direkt unter meiner grünen TextBox habe ich zum Beispiel einen Button platziert, welcher direkt auf die gewünschte Unterseite verweist.

Durch die duplizieren Funktion habe ich allen Zellen in dieser Reihe das gleiche Design geben. So hatte ich quasi auf Knopfdruck drei gleiche Boxen mit dem selben Design und musste nur noch die Überschrift und den Text anpassen.

Sagte ich eigentlich schon, dass das ziemlich nice ist?

Animiere dein Webdesign

Selbstverständlich kannst du für jedes Modul nicht nur die Positionen individuell und für alle Gerätegrößen abstimmen und festlegen, du kannst auch noch jede beliebige Animation oder jeden beliebigen Effekt hinzufügen.

Ich hoffe das du damit einen kleinen Eindruck bekommen hast, wie mächtig das Divi-Theme* ist und wie individuell du damit deine neue Website, oder die Website für deine Kunden, designen kannst.

Vielleicht ist dir auch aufgefallen, dass ich für die Umsetzung dieses Blocks keine einzige Zeile programmieren musste.

Als fortgeschrittener Nutzer mit HTML und CSS Kenntnissen, kannst du natürlich noch weit über die Möglichkeiten des Divi-Theme* hinausgehen. Aber hey, warum die Arbeit machen, wenn doch wer bereits die Arbeit für dich gemacht hat? 🙂

Was du als angehender Webdesigner für dein Geld bekommst

• Eines der aus meiner Sicht mächtigsten Frameworks, welche du aktuell für Geld kaufen kannst und welches regelmäßig Updates erhält.
• Beim Kauf einer Lizenz bekommst du gleich 4 Module:
  • Divi*
  • Extra*
  • Bloom*
  • Monarch*
• Du kannst mit dem Kauf einer Lizenz unzählig viele Websites gestalten und damit selbst zum Webdesigner werden.
• Dir werden Layouts Packs zur Verfügung gestellt, welche du für deine Projekte nutzen und anpassen kannst. Du musst also nicht von Null starten.
• Es gibt zahlreiche Erweiterungen welche du über den Marktplatz von Elegant Themes* downloaden oder Kaufen kannst. In den meisten fällen musst du nichts neues erfinden.

Was du zum Webdesign sonst noch benötigst

Neben deiner Divi* Lizenz benötigst du selbstverständlich noch eine Domain, einen Webspace und eine funktionierende WordPress Installation.

Über das Thema Domain und Webspace habe ich bereits einen anderen Artikel mit meiner Empfehlung verfasst. Hier hast du unter anderem auch die Möglichkeit, WordPress mit nur einen Klick zu installieren.

Wenn du das alles beisammen hast, wird es Zeit sich mit Divi* zu beschäftigen und wunderbare Webdesigns zu erstellen. Solltest du Hilfe oder eine Einschulung benötigen, sind wir gerne für dich da.

Was wir für dich tun können

Wir lassen dich nicht im Regen stehen. Aus diesem Grund bieten wir dir zu diesem Thema verschiedene Dienstleistungen an:

• Um mit dem Divi-Theme* wunderbare Webdesigns zu zaubern, wirst du jede Menge Zeit benötigen.
  • Wir setzten aber gerne dein Webdesign für dich um. So kannst du dich in Ruhe weiter auf dein Business konzentrieren und dennoch die Individualität vom Divi-Theme* genießen und deine zukünftigen Änderungen einfach selbst durchführen.
• Wir übernehmen für dich die Grundinstallation für WordPress mitsamt dem Divi-Theme*. So kannst du gleich mit deinem eigenen Design losstarten.
• Selbstverständlich kannst du den Umgang mit dem Divi-Theme* selbst erlernen. Wenn du aber Zeit und damit das Geld sparen möchtest, kannst du dir auch bei uns eine Schulung buchen in der du alles wichtige vermittelt bekommst und individuelle Fragen stellen kannst.
• Elegant Themes* bietet zwar einen sehr guten Support, dieser ist aber ausschließlich in Englisch verfügbar. Aus diesem Grund bieten wir dir auch gerne individuellen Support für das Divi-Theme*.

Schlusswort zum Webdesign

Hoffentlich hast du einen kleinen Eindruck darüber gewonnen, wie mächtig das Divi-Theme* ist und wie auch du damit zum Webdesigner werden kannst. Selbstverständlich würde es noch unzählige weitere Punkte geben welche erwähnenswert wären. Ich glaube aber, dass das an dieser Stelle den Rahmen sprengen würde.

Je nach Rückmeldung werde ich vielleicht weitere Einblicke in dieses Thema geben. Solltest du spezielle Fragen zum Divi-Theme* haben oder unsere Hilfe benötigen, sind wir selbstverständlich für dich da.

Bitte vergiss nicht, um eine Website online zu stellen, solltest du dich vorab mit dem Thema DSVGO auseinandersetzen. Eine DSVGO konforme Umsetzung ist zwingend notwendig um keine teuren Abmahnungen zu erhalten. Gerne helfen wir dir auch bei diesem Thema weiter.

Und vergiss nicht, Divi* ist nicht einfach nur smart, sondern auch ganz schön nice. Und wir finden natürlich, dass smart ganz schön nice ist.