Du hast Lust auf eine eigene professionelle Webseite für dein Online-Business? Hast keine Ahnung von programmieren und natürlich immer zu wenig Zeit für alles?

Na dann los, mit Hilfe dieser Anleitung erstellst du innerhalb eines Tages eine eigene Webseite. 

Hinweis: Dabei fallen Kosten für die Domain und einmalig für Software an, welche uns das Erstellen der Seite deutlich vereinfacht. Man kann natürlich immer mehr ausgeben, aber mit unter 100 Euro bist du auf jeden Fall dabei, für Sparfüchse beginnt das Ganze Paket ab 5€ im Monat für die Internetadresse und einen Platz im Internet wo du deine Seite online stellst. 

Schritt 1: Domain und Webspace registrieren

Der erste Schritt auf dem Weg zur eigenen Seite ist der Domainname. Die Domain bezeichnet dabei den Namen der Seite (z.B. www.google.com), unter dem deine Webseite später zu finden ist.

Für die Registrierung der Domain gibt es verschiedenste Anbieter. Wir bevorzugen den Anbieter www.all-inkl.com wegen des umfangreichen Supports und des guten Preis-Leistungs-Verhältnis. Außerdem gibt es keine Mindestvertragslaufzeit und kurze Kündigungsfristen. Du kannst also ohne große finanzielle Risiken alles in Ruhe ausprobieren. Ein weiterer Vorteil ist die Ein-Klick Installation verschiedenster Softwarelösungen für Webseiten. Gerade für Einsteiger also eine gute Lösung.
All-inkl

Auf der Seite des Anbieters, gilt es jetzt die eigene Wunschdomain zu überprüfen. In dem Feld “Domain-Check” lassen sich der Name der Domain und die Endung prüfen.

Domaincheck

Tipps zur Wahl eines gutes Domainnamens:

  • Fasse dich kurz: Zugegeben, das ist leichter gesagt als getan, denn je kürzer der Name, desto schwieriger ist eine Domain zu bekommen, aber lange Namen, möglicherweise mit vielen Bindestrichen sind schwerer zu merken und fehleranfälliger für Besucher.
  • Beschränke dich auf die bekanntesten Domain-Endungen .de/.com/.net/.org diese sind am weitesten verbreitet und genießen das höchste Ansehen. Vermeide Umlaute im Domainnamen, da diese zu technischen Problemen führen können.
  • Sei unkompliziert: Ein guter Domainname ist auf Anhieb zu verstehen und leicht zu merken. Wenig sinnvoll sind daher Fremdsprachen, Fachwörter und Abkürzungen.
  • Nimm dir Hilfe: Freunde oder Bekannte können eine gute Quelle für Ideen sein. Nach welchen Begriffen würden sie bei einer Suchmaschine zu einem Thema suchen. Eine andere Möglichkeit bietet das Internet. Seiten wie https://domainr.com/ geben die Möglichkeit eine Idee auszuarbeiten indem Begriffe auf verschiedene Möglichkeiten durchgespielt werden.
  • Nichts ist endgültig: Sollte dir der Name irgendwann nicht mehr gefallen, ist es möglich alle Inhalte auf eine neue Domain zu ziehen. Bei All-Inkl ist es möglich, drei verschiedene Domainnamen ohne Zusatzkosten zu registrieren. Alle Inhalte lassen sich mit einem Klick auf eine andere Domain verschieben.

Hinweis: Der Name der Domain (ohne www.) wird später auch für eine eigene, professionelle Mail-Adresse verwendet (Name@Domainname).

Der Domainname ist gefunden und steht noch zur Verfügung? Herzlichen Glückwunsch! Damit ist ein wichtiger Schritt zum erstellen der ersten eigenen Webseite geschafft. Auf zur Bestellung.

Durch einen Klick auf “Bestellung” geht es auf die Auswahl des Tarifs. Als Einsteiger ist der Privat-Tarif völlig ausreichend. Er bietet drei Domains, mehr als genug Speicherplatz und alle nötigen E-Mail-Services zu einem günstigen Preis.

Achtung: Andere Anbieter bieten Domains teilweise zu deutlich günstigeren Preisen an. Dabei fehlen jedoch grundlegende Zugaben, die auf andere Weise erworben werden müssen. Genügend Speicherplatz und E-Mail-Service sollte bei jeder Domain vorhanden sein.

Hinweis: All-Inkl bietet die Möglichkeit E-Mail-Postfächer und Weiterleitungen unter deinem Domain-Namen einzurichten. Wenn du aber Gmail als deinen E-Mail-Anbieter benutzen und deine E-Mails nicht über All-Inkl laufen lassen willst, benötigst du den Private Plus Tarif, da dieser es ermöglicht, die DNS-Einstellungen zu ändern. Mehr dazu weiter unten in der Anleitung.

In dieser Anleitung haben wir uns für eintext.com als Domainnamen entschieden und dort findest du auch die Beispielseite, die wir in dieser Anleitung erstellen.

Beim nächsten Bestellschritt wird der Name der Domain mit der entsprechenden Endung abgefragt.

Bestellung Domain

Dabei gilt es auf Tippfehler zu achten, da diese nachträglich nicht korrigiert werden können.

Die weitere Bestellung läuft wie jede gewöhnliche Bestellung ab.
Bestellung

Gib hier deine persönlichen Daten ein. Anschließend wird ein persönlicher Freischaltcode benötigt. Dieser wird dir wahlweise per Post oder per SMS zugesendet.

Außerdem wird die Zahlung geregelt (ausschließlich Lastschrift) und die Daten müssen überprüft werden.

Sind alle Daten korrekt wird zahlungspflichtig bestellt. Anschließend muss der Freischaltcode eingegeben werden. Dieser kommt je nach Auswahl sofort per SMS oder nach einigen Tagen per Post.
Daten
Wenn der Code eingegeben wurde, wird der Account freigeschaltet und die Domain wird registriert.

Account freischalten

Nachdem die Bestellung abgeschlossen ist, auch ohne Freischalten des Accounts, erhälst du eine Bestätigungsmail im angegebenen Postfach.

In dieser Mail finden sich Informationen zu der registrierten Domain, sowie Zugangsdaten die für die Einrichtung und Bearbeitung der Seite benötigt werden.

Mit diesen Zugangsdaten geht es weiter. Als nächstes schauen wir uns an, wie wir die Seite einrichten.

Schritt 2: WordPress einrichten

WordPress ist ein CMS. CMS steht für Content Management System und beschreibt ein Programm, mit dem wir unsere Seite bearbeiten, Texte und Bilder einpflegen. Du kannst also ohne Programmierkenntnisse deine Webseite bequem im Browser bearbeiten ohne das es komplizierter wird als Word und co. Über das KAS (Kunden Administrations System) von All-inkl lässt sich einfach und schnell ein CMS auswählen und installieren.

Dazu gehen wir als ersten in den Kundenbereich oben rechts auf www.all-inkl.com
Kundenlogin

Dort gibt es die Möglichkeit sich in der Membersarea und im KAS einzuloggen. In der Membersarea werden Kundendaten und Rechnungen bearbeitet, während im KAS die Website verwaltet wird.

LoginBereich

Wir loggen uns im KAS ein. Die Zugangsdaten befinden sich in der Bestätigungsmail von All-inkl.

Nach dem Einloggen landen wir auf der Startseite des KAS

KAS

Zugegeben, die Seite und die Infos sehen auf den ersten Blick sehr technisch aus, aber davon müssen wir uns nicht abschrecken lassen. Uns interessiert der Menüpunkt “Software installieren”

Software-Installation

Hier wird uns die Möglichkeit gegeben, ein CMS auszuwählen und direkt zu installieren.

Wir entscheiden uns für WordPress. Sehr einfache Bedienung und vielfältige Möglichkeiten stehen für uns im Vordergrund und genau das bietet WordPress an.

Wenn du WordPress in der Kategorie Blog ausgewählt hast, öffnet sich der Installationsassistent in dem du die Konfiguration vornehmen kannst.

Installation 1

Im Moment ist nur eine Domain in dem Account registriert, daher können wir auch nur eine auswählen.

Installation 2

Eine Datenbank ist ebenfalls noch nicht vorhanden, also legen wir eine neue an. Der Kommentar ist frei wählbar und dient der Wiedererkennung. In der Datenbank werden alle Inhalte der Website gespeichert.

Installation 3

In Schritt 4 wählen wir unsere Login-Daten aus. Der Benutzername ist frei wählbar. Als Mail-Adresse muss eine Adresse angegeben werden, auf die du jederzeit Zugriff hast, da an diese die Zugangsdaten gesendet werden. Jetzt noch die Häkchen setzen und die Installation starten.

Schritt 4

Anschließend wird die Installation automatisch ausgeführt. Nach etwa zehn Minuten ändert sich die Nachricht, dass die Installation abgeschlossen wurde. Jetzt können wir einen ersten  Blick auf unsere Seite werfen.

Schritt 3: Deine Webseite bearbeiten

Es ist getan! Die Domain ist registriert und WordPress ist eingerichtet. Damit geht es jetzt ans Eingemachte.

Wir loggen uns bei WordPress unter dem Link ein, den wir in der Mail mit den Zugangsdaten bekommen habe. Der Link setzt sich zusammen aus dem Namen der Domain plus /wp-admin also z.B. http://eintext.com/wp-admin.

Wordpress Login

Benutzername und Passwort finden wir ebenfalls in der Mail. Nachdem wir eingeloggt sind, kommen wir auf das Dashboard des Backends.

Hinweis:  Erklärung Backend – Frontend: Deine WordPress-Seite ist in zwei Bereich unterteilt, das Frontend und das Backend.Im Backend wird die Seite bearbeitet. Texte und Bilder werden eingepflegt, angepasst und angeordnet. Dieser Bereich ist passwortgeschützt. Das Frontend ist der sichtbare Bereich der Website, also der Teil den jeder sieht, wenn er auf deine Domain geht.

Beginnen wir zunächst mit dem Backend, das sollte bei dir jetzt ungefähr so aussehen:

Wordpress Dashboard

Nach dem Login landen wir auf dem Dashboard des Backends. Doch nicht nur das!

Durch einen Klick auf “Zur Website” oben links gelangen wir tatsächlich auf unsere eigene kleine Website.

Zur Website

Tadaaaaa!

Website

Zugegeben, noch kein Meisterwerk aber durch die Voreinstellungen von WordPress haben wir unsere erste kleine Website erstellt.

Willkommen bei WordPress!

Willkommen bei WordPress

WordPress gibt uns bereits einige Vorschläge, um unsere Seite anzupassen.

Unter “Website anpassen” landen wir im “Customizer”. Dort ist es möglich, Inhalte der Seite einfach zu verändern.

Hier lassen sich Bilder, Überschriften, das Menü und auch das ganze Theme wechseln. Das Theme (oft auch Template genannt)  bezeichnet eine Art Schablone, nach der die ganze Website aufgebaut ist. Farben, Position der Seiteninhalte, das Aussehen und vieles mehr sind dort vorgegeben. Standardmäßig ist “Twenty Seventeen” eingestellt, welches besonders für Blogs geeignet ist. Unter “Wechseln” findet sich eine große Auswahl weiterer Themes, die jederzeit gewechselt und dem eigenen Bedarf angepasst werden können.

Es gibt dort zahlreiche kostenlose Themes zur Auswahl. Alternativ ist es möglich Themes zu kaufen. Auf Seiten wie www.themeforest.net gibt es eine große Auswahl kostenpflichtiger Themes. Diese bieten für gewöhnlich umfangreichere und vorgefertigte Funktionen (z.B. für Shops), einen Support-Service, professionelleres Aussehen und öfter auch einen eigenen “Page-Builder” der es dir ermöglicht, das Aussehen deiner Seite bequem im Browser weiter individuell zu gestalten. Aufgrund dieser Vorteile, haben wir uns für ein kostenpflichtiges Theme namens Avada entschieden.

Avada WordPress-Theme kaufen

Avada ist das (zurecht) meistverkaufte WordPress-Theme und findet sich unter

https://themeforest.net

Die ca. 70$, die dafür fällig werden, sind sehr gut investiert. Das wird deutlich sobald klar wird, welche Möglichkeiten das Theme bietet und wie gut es zu bedienen ist.

Nicht nur bekommen wir den “Fusion Builder”, der uns die Anpassung unserer Website im Gegensatz zum WordPress-Standard erleichtert, wir können auch noch auf verschiedene Vorlagen zurückgreifen, die uns gefallen und diese einfach nach unseren Wünschen anpassen. Wie das Ganze aussieht, siehst du dann im weiteren Verlauf der Anleitung.

Der kauf erfolgt wie in jedem anderen Online-Shop und dann kann das Theme installiert werden.

Avada installieren

Nach dem Kauf-Prozess wird uns ein Download-Link angezeigt. Dort wird allerdings eine großes Paket mit über 400MB runter geladen. Dieses beinhaltet viele Anleitungen und Videos. Auf https://themeforest.net/downloads finden wir unsere gekauften Produkte und können unter “Download” auswählen “Installable WordPress file only”. Daraufhin wird eine ca. 5 MB große Datei heruntergeladen, welche direkt im Backend deiner WordPress Seite installiert werden kann.

Die sehr umfangreiche Dokumentation von Avada lohnt es sich aber auf jeden Fall später nochmal anzusehen, da es einen sehr großen Funktionsumfang bietet.

Ein weiterer Vorteil ist der sehr gute Support. Wenn du mal an einer Stelle nicht weiter kommst, kannst du dich beim Avada Support melden und dir wird schnell und professionell geholfen.

Anschließend gehen wir wieder in unser WordPress-Backend und installieren das Theme.

Theme hochladen 2

Unter Design -> Themes -> Theme hinzufügen klicken wir auf “Theme hochladen”

Theme hochladen 3

Dann wählen wir die heruntergeladene Zip-Datei aus.

Sobald die Installation abgeschlossen ist, erweitert sich unser Hauptmenü um den Eintrag Avada. Unter “Avada” kommen wir auf die Avada-Startseite mit einer (sehr nützlichen) Videoanleitung und einigen Anweisungen. Den Anweisungen entsprechend installieren wir im Reiter “Plugins” den kostenlosen Fusion Core und den Fusion Builder.

Pligins installieren

Und schon tauchen zwei neue kleine Helferlein ins unserem Hauptmenü auf.

Fusion Builder: Der Fusion Builder ersetzt den Standardbaukasten von WordPress und erweitert ihn um einige Komfort-Funktion und viele interessante Möglichkeiten.

Fusion Slider: Hierbei handelt es sich im Prinzip um ein Element der Website, das hier bearbeitet wird, die Slides. Slides bilden häufig den Einstieg in eine Website. Sie können ein Bild, ein Video, ein Text oder eine Kombination aus allem sein. Mehrere Slides in einem Slider bedeuten mehrere Elemente (z. B. Bilder oder Videos) die automatisch oder manuell auf der Website abgespielt werden. Dazu später noch mehr.

Nachdem wir Avada eingerichtet haben, wird es Zeit eine Vorlage auszuwählen.

Die Vorlagen bieten uns fertige Seiten mit Bildern, Texten, Menüs und Effekten zu verschiedenen Themen. An dieser Stelle wird deutlich, wie wir als Anfänger schnell zu einer fertigen Seite kommen. Wir nehmen einfach eine fertige Seite und passen sie nur noch unseren Wünschen an. Während wir das tun, lernen wir auch immer mehr über die Funktionen von Avada und können unsere eigenen Wünsche immer konkreter umsetzen.

Unter dem Avada-Menü wählen wir “Demos” aus. Dort finden wir zurzeit 30 Vorlagen zu verschiedensten Themen.

Demos

Für die Seite eintext.com haben wir uns für die Vorlage “Resume” entschieden.

Resume

Wie der Name schon sagt, eigentlich eine Vorlage für eine Bewerbungs-Homepage. Allerdings sind alle Elemente komplett veränderbar. Wir wählen die Vorlage deswegen, weil die Optik ansprechend und die Seite sehr einfach aufgebaut ist.

Um die Vorlage zu installieren, müssen wir erst alle alten Inhalte entfernen. Die neue Vorlage übernimmt sie sonst einfach und könnte etwas durcheinander geraten.

Wir gehen dazu im Menüpunkt “Seiten” auf “Alle Seiten” und löschen in der Übersicht alle vorhandenen Seiten. Diese werden in den Papierkorb verschoben und sind dort noch verfügbar.

Seiten löschen

Anschließend gehen wir zurück zu den Vorlagen (Avada->Demos) und klicken bei unserer gewählten Vorlage auf “Import”. Auf Wunsch ist auch ein Preview der vollständigen Vorlage möglich.

Nach dem Klick auf Import erscheint ein Menü “Import Content”. Dort wählen wir “All” aus und klicken auf Import.

Daraufhin wird der komplette Inhalt der Vorlage heruntergeladen und eingepflegt.

Unsere Seite können wir oben links anschauen:

Website anschauen

Dazu klicken wir einfach auf den Namen unserer Website.

 

So sollte unsere Vorlage jetzt aussehen:

Vorlage Resume

Sie beinhaltet einen Slider als Startelement, einige Container mit Bild und Text und ein Menü. Da wir (leider) nicht Jonny Smooth sind, passen wir die Seite nun an.

Wir beginnen mit dem Startbild. Dort sehen wir ein Bild von Jonny, eine große Überschrift, eine kleine Überschrift und einen Button.

Um diese Seite zu bearbeiten gehen wir im Backend-Menü auf “Seiten” und wählen unsere “Home – Startseite” aus.

Home Startseite

Nachdem wir auf “Bearbeiten” geklickt haben, sehen wir den “Fusion Builder” der mit dem Avada-Theme kommt.

Slides bearbeiten

Das erste Element ist ein Fusion Slider, bei dem es sich um unser Hauptbild handelt.

Fusion Slider

Der Slider ist dabei das Element, in dem die Slides angeordnet sind. Im Slider stellen wir ein, wie sich die Slides verhalten sollen. Ob sie automatisch oder manuell wechseln sollen, wie groß sie sind und einige andere Sachen. Wenn du deinen ersten Slider selbst eingerichtet hast, wirst du sehen, dass es viel einfacher ist, als es zunächst klingt.

Wir wollen aber den einzigen Slide ändern, der derzeit voreingestellt ist. Wir klicken also auf “Edit Slides”.

Slide Home

Dort wählen wir den Home Slide im Menü zum Bearbeiten aus.

Dann sehen wir den aktuellen Status und können uns daran machen, den Slide zu ändern.

Slide Details

In diesem Fall ändern wir das Hintergrundbild, unten rechts unter “Beitragsbild”, die “Heading Area”, das ist die große Überschrift, und die “Caption Area”, also die kleine Unterschrift.

Klicken wir unten rechts auf “Beitragsbild”, erscheint eine Auswahl aller bisher hochgeladenen Bilder. Oben links ist ein Button “Dateien hochladen” auf dem wir klicken um unser neues Bild hochzuladen.

Kostenlose Bilder gibt es online zum Beispiel bei www.pixabay.com. Mit Google lassen sich auch weitere, kostenlose Datenbanken finden. Wichtig ist bei Bildern im Internet immer auf die Lizenz zu achten, damit ihr nicht abgemahnt werden könnt. Public Domain Bilder könnt ihr beliebig verwenden und alternativ empfiehlt sich die Creative Commons Lizenz.

Haben wir ein Bild gefunden laden wir es hoch und wählen es dann in der Übersicht aus. Dadurch ersetzt es das alte Bild.

Dateien hochladen

Als nächstes die “Heading Area”

Heading Area

Der Text in diesem Feld sieht etwas wild aus

 

EINE EIGENE WEBSITE.<br/>SCHNELL UND EINFACH. [/fusion_text][fusion_separator bottom_margin="3%" /][fusion_text]

Wir kümmern uns aber nur um den Text, den wir ändern wollen. Durch die Ansicht der Seite, können wir sehen wie der hier eingepflegte Text dargestellt wird.

Header1

Wir ändern also nur den Text “Eine eigene Website” und “Schnell und einfach”

Das <br/> zwischen den beiden Elementen sorgt für einen Zeilenumbruch. Das kann je nach Wunsch bleiben oder verschwinden. Ihr könnt hier auch andere HTML-Elemente verwenden, jedoch für den Anfang ist das nicht notwendig.

Hinweis: Der Text in den eckigen Klammern ist ein sogenannter Shortcode, also ein Textbaustein der durch das Avada Theme später durch einen HTML-Code ersetzt wird. Für die erste Version der Webseite benötigen wir keine Shortcodes, wer sich jedoch weiter informieren möchte, findet hier eine komplette Liste der verfügbaren Shortcodes.

Dann wollen wir die Unterschrift und den Text des Buttons ändern, wo derzeit noch “LEARN MORE” steht.

Die Unterschrift findet ihr unter “Caption Area” und den Button Text könnt ihr unter “Button #1” einstellen.

Caption Area

Button

Der Button ist wieder ein Shortcode. Wenn ihr euch später intensiver mit dem Avada Theme befasst, werdet ihr diese Shortcodes lieben lernen. Ihr könnt damit beliebige Elemente wie Buttons, Tabellen, Preisvergleiche, Überschriften, Trennlinien und vieles mehr auf euren Seiten einfügen. Aber für den Anfang lassen wir alles so wie es ist und später gehen wir auf den Fusion Builder ein, der euch die Arbeit mit den Shortcodes abnimmt.

Container bearbeiten

Beim nächsten Element handelt es sich um einen Container. Diesen könnt ihr euch als eine Art Bereich auf der Webseite vorstellen, der beliebig unterteilt werden kann und in den ihr die Seiteninhalte einfügt.

Container 1

Der Container ist zweigeteilt in ⅗ und ⅖ . Links haben wir den Text mit der Überschrift und rechts das Bild.

Wir bearbeiten ein Element durch einen Klick auf den Pinsel in der oberen linken oder rechten Ecke des Elements.

Beim Text auf der linken Seite verfahren wir wie bei der Überschrift. Wir bearbeiten das Element und ändern nur den Text. Der Rest bleibt gleich.

Beim Bild auf der rechten Seite sieht man nicht auf den ersten Blick wo es sich versteckt. Es handelt sich hier um das Hintergrundbild des rechten Elementes

Bearbeiten wir also dieses Element

Hintergrundbild Container

und klicken auf den Reiter “Design”

Dort taucht schon groß und breit unser Bild auf.

Design

Klicken wir auf “edit”, können wir das Bild genau wie beim ersten Bild ändern.

Die meisten Elemente auf unserer Seite lassen sich relativ einfach im Backend finden.

Design matters backendDesign matters

Selbst mit einem ungeschulten Blick lassen sich die entsprechenden Elemente aus dem Backend den Teilen aus dem Frontend zuordnen. Das ist die Basis des Websites bauen für Anfänger. Vorlagen nutzen, Elemente erkennen und Elemente anpassen.

Alle Container, die wir nicht mehr brauchen, werden gelöscht. Für diese Website wurde die Zahl der Hauptpunkte von sieben auf vier reduziert. Die Container für “Work”, “Experience” und “Clients” wurden entfernt. Bevor sie endgültig gelöscht werden, können Container und andere Elemente auch gespeichert werden.

Save

Durch einen Klick auf die Festplatte in der Mitte, wird ein Element und seine Unterelemente gespeichert und ist später wieder abrufbar.

Menü anpassen

Einige Dinge lassen sich allerdings nicht so leicht erkennen. Zum Abschluss wollen wir das Menü anpassen.

Um das Menü anzupassen wählen wir unter “Avada” den Punkt “Theme Options” aus

Header Info

Dort finden sich unter “Header” einige allgemeinen Informationen zum Menü und unter “Menü” können wir detailliertere Änderungen vornehmen.

 

Im Bereich “Header” ändern wir bei Bedarf die Position des Menüs und können es um andere Inhalte erweitern.

Unter Punkt “Menü” können wir im Prinzip alle Einzelheiten des Menüs anpassen. Farben, Textart und -größe, Effekte, Abstände und auch das Logo. Für diese Website wurde in den Optionen nichts verändert.

Einzig und allein die Menüpunkte wurden angepasst.

Dafür gehen wir unter “Dashboard” auf “Website anpassen”

Website anpassen

Wir landen im Customizer und begeben uns in den Punkt “Menüs”

Menü anpassen

Hier finden wir alle Navigationspunkte, die im Frontend angezeigt werden. Wir entfernen alle Menüpunkte die wir nicht mehr brauchen und benennen bei Bedarf die vorhandenen um.

Wollen wir das Ziel eines Menüpunkt ändern, müssen wir die URL angeben. Aktuell verweisen die Menüpunkt auf Elemente der gleichen Seite, diese Links nennen sich “Relative Links”. Links, die auf eine andere Unterseite zielen, nennen sich “absolute Links”.

Menü Anchor

Für das Ziel eines relativen Links müssen wir den “Menu Anchor” eines Elements angeben.

Dazu wird in einem Element der Eintrag “Name of Menu Anchor” benutzt. Dieser Link muss im Menü mit einem # eingegeben werden als #design

Design Menu

Das schließt die Grundlagen der Seite ab. Natürlich bieten WordPress und Avada noch grenzenlose andere Möglichkeiten. Das Prinzip kann dabei immer wieder angewendet werden. Vorlage auswählen, Elemente kopieren und anpassen.

Weitere Elemente kopieren (Click for a Trick)

Zum Abschluss lernen wir noch einzelne Elemente aus anderen Demos zu kopieren.

Auf https://avada.theme-fusion.com/ gibt es eine riesige Auswahl verschiedener Vorlagen. Nicht nur die Demos sondern auch allerlei Elemente lassen sich hier finden.

Auswahl Vorlagen

Hier haben wir die Möglichkeit uns einzelne Elemente rauszusuchen und nachzubauen.

Zu Demonstrationszwecken suchen wir uns vom Classic Theme aus der Home Version 2 dieses Element zum Nachbauen aus:

Um dieses Element zu kopieren erstellen wir eine neue Seite unter Seiten>Erstellen

Haben wir die Seite erstellt geben wir ihr einen beliebigen Namen und klicken auf “Use Fusion Builder”

Testseite

Nun klicken wir auf “Pre-Built Page”. Dadurch erscheint die “Library” und wir können eine Vorlage und daraus eine Unterseite auswählen.

Wir wählen aus dem Dropdown-Menü Avada Classic aus und aus der folgenden Auswahl “Home Version 2”. Bei der folgenden Warnung klicken wir auf OK

Warnung

Aus der Warnung entnehmen wir, dass die Vorlage nicht vollständig übernommen wird. Theme Options und Bilder werden nicht importiert. Daher wird die Vorlage unfertig sein, aber einzelne Elemente können wir trotzdem heraus ziehen.

Schauen wir uns nun unsere Testpage an, sind dort alle Elemente der Vorlage aufgelistet. Da jedoch einige Schriftarten aus unserer Resume-Vorlage übernommen werden, ist das Ergebnis etwas wüst. Wir nehmen uns also nur die Elemente, die wir brauchen.

Um ein Element zu kopieren klicken wir beim Container oben rechts (bei einem Unterelement oben links) auf “save container” (save column)

Save

Ein Klick auf die Festplatte in der Mitte speichert das Element.

Wir müssen dem Element noch einen Namen geben und können daraufhin jederzeit darauf zugreifen. Der Name dient der Orientierung und sollte klar machen, wobei es sich bei dem Element handelt.

Für dieses Beispiel brauchen wir das Button-Element und das Modal-Element.

Der Button ist dabei auf der Seite zu sehen, während das Modal-Element aufpoppt, wenn wir auf den Button klicken.

Der Button ist dabei schnell zu erkennen:

Button Fett

Das Modal-Element ist direkt darunter:

Modal Element

Sind diese beiden Elemente gespeichert gehen wir zurück auf unsere Hauptseite. Dort wollen wir die Elemente jetzt einfügen und anpassen.

Haben wir den Mauszeiger über einem Container, gibt es unten Rechts die Möglichkeit einen neuen Container oder ein neues Column anzulegen. Wir klicken auf + Container

Neuer Container

Ein neues Fenster poppt auf und wir können einen neuen Container bauen, oder einen gespeicherten auswählen.

Insert Container

Unter “Library Containers, finden wir alle gespeicherten Container, darunter auch die beiden, die wir gerade angelegt haben (Hier Modal Button und Modal Container).

Wir wählen Modal Button aus und wiederholen den Vorgang für Modal Container, so dass beide Elemente auf unserer Seite vorhanden sind.

Der Button und das Modal-Element sind bereits verknüpft. Nur zum Verständnis:

Das Modal-Element bekommt einen Namen:

Name of Modal

und im Button Element verknüpfen wir die beiden, in dem wir den Namen des Modal-Element unter “Modal Window Anchor” eingeben.

Modal Window Anchor

Wir können beim Button noch ein wenig am Design herum schrauben, bis er gefällt. Anschließend gehts daran, das Modal zu entwerfen.

Modal bearbeiten

Wir klicken beim “Modal”-Element auf Element Settings.

Dort haben wir einige Möglichkeiten, das Feld zu verändern. Wir beschränken uns jedoch darauf die Inhalte anzupassen.

Model Heading

Unter Model Heading tragen wir unsere Überschrift ein.

 

Anschließend geht es weiter zu “Contents of Modal”

Contents of modal

Hier schlägt uns erstmal ein etwas kryptisches Textfeld entgegen. Doch keine Angst, Elemente können hier angelegt werden wie auf jeder normalen Seite.

Wir klicken auf “Fusion Builder Element Creator” und bekommen die Auswahl aller Elemente, die Avada zur Verfpügung stellt.

An dieser Stelle können allerdings keine fertigen Elemente reinkopiert werden. Stattdessen müssen wir die Elemente nachbauen.

Dazu gehen wir wieder auf unsere Testseite. Dort finden (oder addieren) wir alle unsere Wunschelemente.

Haben wir ein interessantes Element entdeckt und auf unserer Testseite platziert, können wir unter “Element Settings” den Namen des Elements und die Einstellungen nachvollziehen.

Im Modal unserer Seite ist ein “Counter Circle” und ein “Progress Bar” Element verbaut.

Counter Circles

Die Vorlage für die Kreise findet sich ebenfalls in der Home Version 2 unter den Avada Calssic Themes.

 

Die Balken sind aus dem Progress Bar Element entstanden und wurden ohne Vorlage erstellt. Die Einstellungen sind weitgehend selbsterklärend. Was nicht klar ist, kann einfach ausprobiert werden.

Progress Bar

Sobald diese Elemente fertig gestellt sind, tauchen sie im Modal im Textfeld wieder auf. Dort sehen sie auf den ersten Blick etwas verwirrend aus. Ein Blick auf die einzelnen Abschnitte im Text macht deren Bedeutung aber durchaus verständlich.

Zusammenfassung

Wir haben Schritt für Schritt eine Website aus dem Nichts aufzuziehen. Zur Übersicht hier nochmal alle Schritte zusammengefasst:

Schritt 1: Domain und Webspace registrieren:

Unter www.all-inkl.com wird der Domainname der Webspace registriert.

Schritt 2: CMS System einrichten:

Unter https://all-inkl.com/login/ loggen wir uns ein und richten das CMS WordPress ein unter “Software installieren”

Schritt 3: Avada installieren:

Unter www.themeforest.net erwerben wir das Avada-Tool und installieren es bei WordPress unter “Plugins”

Schritt 4: Demo runterladen:

Unter Avada>Demos finden wir alle Vorlagen von Avada. Wir suchen uns eine passende aus und wählen “Import”

Schritt 5: Demo anpassen:

Unter “Seiten” finden wir alle Seiten, die durch die Demo heruntergeladen wurden und können diese anpassen.

Unter Avada>Theme Options finden wir Einstellungen, die für alle Seiten gelten.

Mit diesen Infos können wir eine vollständige Webseite bauen.

Weitere Schritte

Professionelle Mail-Adresse einrichten

In unserem KAS-System (https://all-inkl.com/login) können wir problemlos eine Mail-Adresse einrichten, die unseren Domainnamen enthält.

E-Mail Postdach einrichten

Unter E-Mail>E-Mail-Postfach richten wir einfach ein Postfach mit der Wunschadresse ein. Dabei steht nach dem @ immer der Name unserer Domain.

Postfach anlegen

Dabei reicht es eine E-Mail-Adresse auszusuchen und ein Passwort einzugeben. Der Rest kann so bleiben wie er ist.

Email angelegt

Beim Klick auf “Speichern” erhalten wir die Nachricht, dass das Postfach angelegt wird. Unter E-Mail>E-Mail-Postfach finden wir unser neues Postfach.

Emails angelegt

Ein Klick auf das Symbol mit den beiden Computern bringt uns direkt in unser E-Mail-Postfach.

Die Daten könnt ihr dann aber auch nutzen um eure E-Mails über euer E-Mail-Programm oder Gmail abzurufen.

Google Analytics einbinden

Wie viele Besucher hat meine Website? Wie lang ist die durchschnittliche Verweildauer meiner Besucher? Welche Inhalte sind am erfolgreichsten? Alles Fragen, die auftauchen, wenn man ein Internetangebot zur Verfügung stellt. Antworten liefert Google Analytics, der Webanalysedienst des größten Suchmaschinenanbieters der Welt.

Dieser kann auf verschiedene Arten mit der eigenen WordPress-Website verknüpft werden. Etwa mit oder ohne Hilfe eines Plug-ins. Zunächst dazu, wie der Google-Analytics-Code eigenhändig implementiert werden kann.

Zunächst melden wir uns bei Google Analytics an unter https://analytics.google.com

Durch eine Klick auf “Anmelden” landen wir auf der Anmeldeseite und müssen allerlei Informationen angeben.

Wir füllen alle Kästchen aus und setzen alle Checkboxes.

Sind wir einmal angemeldet landen wir sofort unter “Tracking Code” in Google Analytics.

Dort finden wir ein Stück Code, das wir in WordPress einbinden können um Analytics zu implementieren

Script Analytics

Dazu gehen wir bei WordPress in den Avada Theme Options auf Advanced>Code Fields (Tracking etc.)

Advanced Code Field

In das leere Feld neben “Tracking Code” fügen wir einfach den Code von Google Analytics ein. Speichern, fertig.

Tracking Code

Bis die Daten abgerufen werden, kann es allerdings einige Stunden dauern.

Als Alternative bietet sich ein PlugIn namens NKgoogleanalytics an.

In diesem Plugin geben wir lediglich unsere Tracking-ID ein, die uns Google Analytics unter Einstellungen>Tracking-Information>Tracking-Code zur Verfügung stellt. Daraufhin wird Google Analytics ebenfalls auf unserer Seite aktiviert.

NK Google Analytics

Sobald Analytics eingerichtet ist, bietet es uns allerlei Informationen zu den Besuchern unserer Website.

Als nächstes kümmern wir uns im Rahmen gesetzlicher Vorgaben um Impressum und Datenschutz.

Rechtliches

Impressum und Datenschutz

Nach geltendem deutschen Recht muss jede Website, die nicht nur zu privatzwecken genutzt wird, ein Impressum und Hinweise zum Datenschutz enthalten.

Um hier keine Fehler zu machen, holen wir uns Hilfe vom Experten.

Auf https://www.e-recht24.de/impressum-generator.html können wir uns kostenlos einen Datenschutz- und Impressumstext erstellen lassen.

Dazu müssen wir einige Informationen angeben. Je nachdem, welche Inhalte unsere Website haben wird, müssen die entsprechenden Häkchen gesetzt werden.

Bezeichnung Impressum

Impressum

Nachdem wir alle Seiten durchgearbeitet haben, können wir uns eine E-Mail schicken lassen, mit der wir unsere E-Mail-Adresse bestätigen können. Wenn wir das getan haben, erhalten wir Impressum und Datenschutz als jeweils eigene PDF per Mail.

Seiten erstellen und einbinden

Für Datenschutz und Impressum müssen wir jeweils eine neue Seite erstellen. Diese füllen wir einfach mit dem Text aus den PDFs. Ein einfaches Textfeld genügt in diesem Fall.

Datenschutz und Impressum

Um die Links zu den Seiten einzubinden nutzen wir den Footer.

Datenschutzerklärung Seite

Unter Avada>Theme Options>Footer finden wir ganz unten den vorgegebenen Footer-Eintrag. Diesen können wir löschen und durch folgenden ersetzen:

<a href="http://eintext.com/impressum" target="_blank">Impressum</a>   |    <a href='http://eintext.com/datenschutz' target="_blank">Datenschutz</a> Impressum Datenschutz

 

Damit sind Impressum und Datenschutz nach aktuellen, gesetzlichen Regelungen gegeben und wir sind rechtlich abgesichert.

 

Cookies

Nach geltendem EU-Recht ist ein Hinweis auf die Benutzung von Cookies einzupflegen. Eine ausführliche Behandlung des Themas findest du hier.

Diesen Hinweis können wir ganz einfach über ein Plugin einblenden lassen.

Unter Plugins>Installieren suchen wir das Plugin EU Cookie Law, installieren und aktivieren es.

Cookie Law

Wir finden die Einstellungen für das Plugin unter Einstellungen>EU Cookie Law

EU Cookie Law

Dort können wir ganz oben die Funktionen aktivieren. Wenn wir keine weiteren Einstellungen vornehmen, erscheint unten Rechts auf unserer Seite der Hinweis auf die Cookies

Cookies akzeptieren

Damit ist die Einrichtung des Cookie-Plugins abgeschlossen.

In Deutschland gibt es leider sehr viele komplizierte rechtliche Bedingungen auf die man achten muss und auch wenn dies ein unbeliebtes Thema ist, solltest du dich damit auseinandersetzen. Wenn du dich hier umfassender informieren willst, findest du hier einen Kurs der mit dir alle rechtlichen Schritte ausführlich durchgeht.

Abschluss – deine eigene Webseite ist erstellt

An dieser Stelle endet die Einleitung für die erste Website. Es folgen noch weitere Anleitungen für fortgeschrittene Projekte. Dort soll es um andere, interessante Elemente gehen, aber auch um das Erstellen einer Shop-Seite. Außerdem lernen wir etwas über Suchmaschinenoptimierung.

Solltest du noch Fragen haben kannst du uns über die Webseite oder den Live-Support Chat erreichen.

Wir wünschen viel Erfolg mit der ersten, eigenen Website!