So erstellen Sie eine WordPress-Website im Jahr 2021 in 6 Schritten. Ein Leitfaden von A bis Z

Bereits 2017 gab es in der Firma, in der ich arbeitete, die Möglichkeit, Webdesign zu erlernen.

Ich begann HTML, CSS und Javascript zu lernen. Ich habe es ziemlich genossen. Bis ich auf meine ersten Bugs stieß. Später bekam ich ein Nebenprojekt zugewiesen: eine tatsächliche Website. Ich war begeistert, meine Kollegen waren für mich da, als ich um Hilfe bat.

Ein paar Monate später arbeitete ich an einem Pro-Bono-WordPress-Auftrag für eine NGO.

Lassen Sie mich sagen, dass wir auf dem Reisemarkt waren und ich Marketing machte. Aber es gab diese Kultur der Befähigung der Menschen, neue Fähigkeiten zu erlernen.

Ich bin der DIY-Typ und habe festgestellt, dass die Lernkurve zum Lernen von Code viel länger ist als erwartet. Mit WordPress funktionierten die Dinge anders.

Schneller Vorlauf, im Jahr 2020 habe ich für die Colibri Makers gearbeitet, Colibri ist ein beliebter WordPress Drag & Drop Page Builder.

Mit solchen Tools ist es heute so einfach. WordPress kann es Menschen wirklich ermöglichen, in kürzester Zeit eine Website von Grund auf neu zu erstellen. Und Inspiration für Websites ist einfach … überall im Internet.

Hier sind die Schritte:

1. Wählen Sie Ihren Domainnamen
2. Website-Hosting erwerben
3. Machen Sie sich mit der WordPress-Oberfläche vertraut
4. Installieren Sie ein WordPress-Theme
5. Erstellen Sie Ihre WordPress-Website
6. Installieren Sie wichtige WordPress-Plugins

nicht genug für eine supercalifragilisticexpialidocious Website, ich habe einen Bonus für Sie am Ende des Leitfadens: UX Design Tipps und Tricks.

Aber bevor ich auf das Thema eingehe, möchte ich ein anderes Thema beleuchten. Es dauert nicht lange, versprochen.

Wie viel kostet eine WordPress-Website?

Wenn wir eine Kostenaufschlüsselung für eine WordPress-Website vornehmen möchten, sollten wir Folgendes einbeziehen:

• Kauf einer Domain: Die Preise können bei $ 15 / Jahr beginnen
• Hosting-Akquisition: Die Preise beginnen bei $ 8 / Jahr
• WordPress-Theme. Abhängig von den Anpassungsstufen und der Anzahl der Funktionen, die Sie einbeziehen möchten, können Sie mit 0 US-Dollar beginnen. Wenn Sie sich nicht mit einer einfachen Website zufrieden geben möchten, drehen sich die jährlichen WordPress-Themenpläne um 70 US-Dollar.
• WordPress-Plugins. Viele von ihnen sind kostenlos, aber wenn Sie erweiterte Optionen wünschen, müssen Sie auf einen kostenpflichtigen Plan upgraden.

Dies bedeutet, dass die grundlegendste Website bei 23 USD / Jahr beginnt. In dem Moment, in dem Sie erweiterte Themenfunktionen wünschen, steigen die Kosten auf etwa 100 USD / Jahr.

Wenn Sie Plugins aktualisieren, zahlen Sie möglicherweise etwa 200-500 USD pro Jahr.

Wenn Sie etwas Maßgeschneidertes wünschen und einen WordPress-Entwickler hinzuziehen müssen, können die Kosten im ersten Jahr über 1000 US-Dollar liegen.

Für Online-Shops können die Kosten erheblich steigen, da Sie viele Funktionen benötigen und Leistung und Sicherheit im Vordergrund stehen.

Nachdem wir dies geklärt haben, ist es an der Zeit, unserem heutigen Thema auf den Grund zu gehen: So erstellen Sie eine WordPress-Website im Jahr 2021.

Wählen Sie Ihren Domainnamen

Quelle: https://unsplash.com/photos/N1XUwR8iOf0

Wenn Sie dies noch nicht wussten, ist der Domainname Ihr Firmenname oder Produktname. Namen können sehr mächtig sein, seien Sie also nicht voreilig bei der Auswahl Ihres Domainnamens. Wenn Sie das Gefühl haben, kalte Füße zu bekommen, machen Sie sich keine Sorgen, es gibt Tools, die Ihnen helfen können.

Tipps und Tricks zur Auswahl von Website-Domainnamen

Ich habe vor einiger Zeit ein Brainstorming für eine Website-Domain für ein Unternehmen durchgeführt und festgestellt, dass „Wazz“ ziemlich interessant klang. Es ist kurz, leicht zu merken. Aber in dem Moment, als ich es gegoogelt habe, gut ….lassen Sie mich sagen, ich brach in Gelächter aus. Im britischen Slang bedeutete es „Urinieren“. Wirklich Leute, machen Sie Ihre Forschung.

Später wollte ich meine Fotografie-Website benennen. Ich analysierte „Mondschein“. Es fühlte sich so schön an, romantisch, märchenhaft … außer es war nicht. Es scheint, dass es “ illegal destillierten oder geschmuggelten Alkohol“ bedeutete.

Stellen Sie also sicher, dass Ihre Namensgebung einzigartig und einprägsam ist und keine seltsame Bedeutung in Englisch oder einer anderen gängigen Sprache (z. B. Spanisch) hat, wenn Sie international werden möchten. Wenn Sie ein lokales Unternehmen sind, können Sie dies überspringen.

Schauen wir uns nun eine kleine Checkliste für die Auswahl eines Domainnamens für Ihre WordPress-Website an:

• Erstellen Sie eine Liste relevanter Keywords für Ihr Unternehmen / Produkt. Überlegen Sie, wie sich die Benutzer nach der Verwendung des Produkts fühlen sollten. Nehmen wir an, Sie haben eine Hautproduktlinie, die auf natürlichen Inhaltsstoffen basiert. Ihre Liste enthält möglicherweise Wörter wie „Haut“, „Pflege“, „sicher“, „natürlich“, „schön“, „frisch“ usw. Verwenden Sie ein Tool wie Namelix oder Novanym, um Ideen für Domainnamen zu generieren.
• Überprüfen Sie die Bedeutung Ihres neu gefundenen Domainnamens. Ich google es immer so „{Name hier einfügen} Bedeutung“. Ich werde mit Wörterbucherklärungen enden. Als nächstes gehe ich zu Google Bilder und sehen, wie es abgestimmt wird. Vielleicht gibt es einen Sänger mit diesem Namen, einen Manga-Cartoon-Namen usw. Wenn ja, müssen Sie den Vorgang wiederholen.
• Suchen Sie auf Facebook oder LinkedIn nach dem Domainnamen, um festzustellen, ob es eine Geschäftsseite mit diesem Namen gibt.
• Überprüfen Sie, ob eine Website-Domain zum Verkauf steht. Für viele Websites ist „.com“ die beste Top-Level-Domain (TLD), gefolgt von „.org“, „.net“ oder „.io“.
• Kaufen Sie Ihren Domainnamen. Sie können dies über einen Domain-Registrar wie GoDaddy oder über Ihren Hosting-Provider tun.

Und das führt uns zu unserem nächsten Kapitel.

Website-Hosting erwerben

Jede Website, die Sie jemals besucht haben, wird auf einem Server gehostet. Dies bedeutet, dass Sie Webhosting von einem Hosting-Anbieter erwerben müssen.

Wenn wir eine WordPress-Website erstellen, können Sie aus einem Hosting-Plan auswählen WordPress.com oder ein anderer Drittanbieter-Hosting-Anbieter.

Lassen Sie mich etwas klären, bevor wir fortfahren. Es gibt wordpress.com und wordpress.org . Der Unterschied ist, dass auf WordPress.com sie können eine Website hosten und erstellen. Von WordPress.org normalerweise erwerben Sie Themes und Plugins für Ihre Website, die an anderer Stelle gehostet wird. Sie können die WordPres.com pläne hier.

Die Hypothese dieses Leitfadens lautet, dass Sie wirklich eine Marke aufbauen und die volle Kontrolle über Ihre Website haben möchten. Dies bedeutet, dass Sie zu einem Drittanbieter-Hosting-Anbieter gehen.

Es gibt drei Haupthosting-Dienste: Shared Hosting, VPS und Managed Hosting. In der ersten Situation werden Serverressourcen auf mehrere Standorte aufgeteilt. Auf lange Sicht können Leistungsprobleme auftreten, wenn diese und Ihre Websites wachsen. Möglicherweise stellen Sie fest, dass Sie einen VPS-Dienst oder einen verwalteten Hosting-Plan benötigen.

Sie müssen dies also bei der Auswahl eines Hosting-Anbieters berücksichtigen: was sind Ihre Geschäftsziele?

Wenn Sie sich für VPS-Hosting entscheiden, werden Ressourcen weiterhin gemeinsam genutzt, aber Sie erhalten eine gewisse Kontrolle über sie. Sie werden auch Verbesserungen in Bezug auf Sicherheit und Leistung feststellen.

Managed Hosting ist ein „à la carte“ Service. Sie erhalten Ihren eigenen physischen Server ganz für sich allein, und Sie werden eine Steigerung der Leistung und Sicherheit feststellen.

Auf jeden Fall können die Dinge komplizierter werden, aber ich wollte nur das große Bild des Hostings zeichnen.

Als nächstes, wenn Sie die Pläne analysieren, werfen Sie einen genaueren Blick auf:

• Preise
• Lagerung
• Unterstützung
• Leistung

Einige Hosting-Anbieter haben einige zusätzliche Funktionen gepackt, z. B. Domain-Angebot (z. B. Namecheap), Website-Builder (z. B. GoDaddy), E-Commerce-Optionen usw.

Sie haben wahrscheinlich schon einige Websites bemerkt, die „HTTP“ oder „HTTPS“ verwenden. Was ist mit denen los?

HTTP ist die Basis des modernen Webs. Es verbindet die Browser und Server und funktioniert auf Anfrage-Antwort-Basis. Das zusätzliche „s“ bedeutet nun, dass die Verbindung zur Website verschlüsselt ist und die mit der Website geteilten Daten sicher sind.

Angenommen, ein Benutzer tätigt eine Zahlung auf Ihrer Website oder meldet sich bei einem Konto an. Die Informationen, die der Benutzer eingibt, sind privat. Sicher vor Hacking. Dies geschieht durch die SSL-Technologie, die für „Secure Sockets Layer“ steht.“ Für Verbraucher signalisiert das Anzeigen von „HTTPS“ Vertrauen, da Sie ihre Daten und Privatsphäre schützen können. Dies bedeutet, dass Sie ein SSL-Zertifikat erwerben müssen.

Stellen Sie sicher, dass Ihr gewählter Plan dies ebenfalls enthält.

In dem Moment, in dem Sie Ihren Hosting-Plan erwerben und Ihre Anmeldedaten eingerichtet haben, wird WordPress selbst das einzige fehlende Element sein. Bei den meisten Hosting-Anbietern können Sie WordPress über ihr Dashboard / ihren Assistenten installieren. Es ist alles ziemlich intuitiv.

Wie melden Sie sich bei Ihrer Website an? Einfach peasy. Geben Sie einfach Ihre Website-Adresse in den Browser ein und fügen Sie „/ wp-admin“ hinzu, wie unten gezeigt.

Machen Sie sich mit der WordPress-Oberfläche vertraut

Das WordPress-Dashboard besteht aus 9 Abschnitten. Schauen wir sie uns an.

WordPress Einstellungen

In diesem Abschnitt gibt es 7 weitere Menüpunkte. Ich werde kurz die wichtigsten Dinge beschreiben, die hier getan werden müssen.

• Unter „Allgemein“ können Sie den Seitentitel, den Slogan, die URL, die Zeitzone, das Datumsformat & und die Sprache festlegen.
• Unter „Lesen“ wirst du WordPress „sagen“, welche Seite als Startseite dient und welche dein „Blog“ ist. Dies ist ein wichtiger Schritt. Sie können auch auswählen, wie viele Blogposts auf einer Seite angezeigt werden sollen oder ob Ihre Website von Google indiziert werden soll.
• Unter „Diskussion“ werden Sie die Einrichtung der Blog-Kommentare vornehmen.
• In „Medien“ können Sie die maximalen Abmessungen in Pixel festlegen, die beim Hinzufügen eines Bildes zur Medienbibliothek verwendet werden sollen.
• In „Permalinks“ legen Sie das Format Ihrer URLs fest.
• Sie können Ihre Datenschutzrichtlinien in „Datenschutz“ definieren.

Der beste Weg, sich dem Bereich „Einstellungen“ zu nähern, besteht darin, alle diese Elemente einzugeben und die fehlenden Informationen einzugeben, um sicherzustellen, dass Sie nichts Wichtiges überspringen. Die Dinge sind ziemlich einfach, also keine kalten Füße bekommen. Das gesamte Setup kann in weniger als 30 Minuten durchgeführt werden.

WordPress-Seiten und Beiträge

Was Sie wissen müssen, ist, dass Ihre Inhalte in „Seiten“ oder „Beiträge“ enthalten sind. Hier verbringen Sie 95% Ihrer Zeit.

Die „Seiten“ sind statisch. Sie können eine „Homepage“, „Services“ -Seite, „Kontakt“ -Seite haben, Sie bekommen den Punkt. Unter Beiträge können Sie Ihre neuesten Blog-Artikel haben, vielleicht Ihr Portfolio. Dies sind dynamische Seiten, da sie automatisch Ihre neuesten Website-Inhalte an der Spitze platzieren.

Wenn Sie im Dashboard „Beiträge“ auswählen, können Sie einen Beitrag erstellen, alle Beiträge visualisieren und Tags und Kategorien verwalten.

Sie können einen neuen Beitrag erstellen, wenn Sie wie oben gezeigt „Neu hinzufügen“ auswählen oder zu „Alle Beiträge“ gehen und dann „Neu hinzufügen“ auswählen.

Das gleiche funktioniert für Seiten.
Was Sie in Ihren „Alle Seiten“ oder „Alle Beiträge“ sehen, sind einige Standardseiten und Beiträge, die von Ihrem Thema bereitgestellt werden.

Wie können Sie nun einen Beitrag oder eine Seite bearbeiten?

Wenn Sie den Mauszeiger über Ihre Standardseiten und Beiträge bewegen, werden einige Optionen angezeigt: Bearbeiten, Schnellbearbeitung, Papierkorb, Ansicht. Im Screenshot oben gibt es auch „In Colibri bearbeiten“. Dies liegt daran, dass wir ein Plugin installiert haben, mit dem Sie Seiten mit dem Colibri WordPress Builder anpassen können (aber wir werden später darüber sprechen).

WordPress Medien

Alle Ihre Medien gehen hier rein: Bilder und Videos. Sie können sie per Drag & Drop verschieben oder hochladen.

Sie können auch Medien aus Ihrer Post- / Seitenebene hinzufügen. Ich werde Ihnen später mehr zum Thema zeigen.

WordPress Kommentare

Der 4. Dashboard-Abschnitt heißt „Kommentare“. Hier können Sie die Kommentare Ihrer Beiträge verwalten. Sie erhalten Tonnen von Spam-Kommentaren, die in Spam oder Papierkorb verschoben werden können. Sie können die relevanten genehmigen.

Das Menü „Erscheinungsbild“

Auf dieser Ebene können Sie:

• Suchen, installieren und aktivieren Sie ein Theme (weitere Details im folgenden Kapitel).
• Passen Sie Widgets an, um Inhaltsblöcke zu den Seitenleisten, Fußzeilen und anderen Bereichen Ihrer Website hinzuzufügen.
• Definieren Sie die Menüs Ihrer WordPress-Website.
• Fügen Sie Ihrer Site ein Hintergrundbild hinzu.
• Bearbeiten Sie den Code Ihres Themas in „Theme Editor“ (nur empfohlen, wenn Sie ein Entwickler sind).

In dem Moment, in dem Sie bestimmte Plugins aktivieren, werden möglicherweise einige neue Menüpunkte unter „Darstellung“ angezeigt. In diesem Fall sehen wir, da wir das Skyline-Thema aktiviert haben, eine Option zum Einrichten unter „SkylineWP-Einstellungen“. Jedes Thema kann mit einem eigenen Setup kommen.

“ Plugins installieren“ ist der andere zusätzliche Menüpunkt, der vom Skyline-Thema hinzugefügt wurde. Hier sehen Sie einige Plugin-Empfehlungen, die gut mit Skyline funktionieren.

Dies führt uns zu unserem nächsten Menüpunkt.

Plugins

Es gibt viele Funktionen, die nicht nur nach Themen verwaltet werden können, z. B. SEO-Optimierung, SEO-Audit, Website-Sicherheit und -Sicherung, Tabellen, Formulare, E-Commerce-Funktionen und mehr. Plugins sind hier, um das Fehlen solcher Optionen auszugleichen.

Hier ist ein kleines Tutorial zum Installieren, Aktivieren und Deaktivieren von Plugins. Es ist alles intuitiv und benutzerfreundlich.

Benutzer

Auf dieser Ebene entscheiden Sie, wer Zugriff auf Ihre Website hat. Je nach Bedarf können Sie Mitwirkenden, Gastautoren, Redakteuren und mehr Zugriff gewähren.

Werkzeuge

Unter „Werkzeuge“ haben Sie die Möglichkeit, Werkzeugdaten in und aus anderen Content-Management-Systemen (z. Bloggers).

Es gibt auch einen Abschnitt „Site Health“, in dem Sie wichtige Informationen zu Ihrer WordPress-Konfiguration und Elementen, die Ihre Aufmerksamkeit erfordern, mit einigen Ratschlägen anzeigen.

Da wir die Datenschutzbestimmungen einhalten müssen, können Sie hier personenbezogene Daten für Ihre Benutzer exportieren oder löschen.

Und damit haben wir das WordPress-Dashboard-Kapitel abgeschlossen.

Kommen wir zu interessanteren Geschäften.

So installieren Sie ein WordPress-Theme

Dazu müssen Sie zu Ihrem WordPress-Admin-Dashboard gehen, im linken Menü auf „Darstellung“ und dann auf „Themen“ klicken.

Klicken Sie anschließend auf die Schaltfläche „Neu hinzufügen“.
Es werden eine Reihe von Vorlagen angezeigt, und Sie können sie nach neuesten, vorgestellten, Beliebtheit … oder nach Funktionen filtern.

Wir sind stolz darauf, dass unsere eigenen Mesmerize- und Colibri-Themes in den Top 20 der beliebtesten WordPress-Themes aufgeführt sind.

Sobald Sie ein Thema auswählen, klicken Sie auf „Installieren“ und dann auf „Aktivieren“.

Sie können Ihr WordPress-Theme auch aktivieren, wenn Sie zurück zu Appearance->Themes gehen.

Der gesamte Installationsprozess wird auch in unserem Tutorial erklärt.

Jetzt bist du bereit zu rocken und zu rollen!

über GIPHY

Erstellen Sie Ihre WordPress-Website

In WordPress hängt Ihr Website-Design von Ihrem gewählten Thema ab. Wenn Sie etwas Zusätzliches benötigen, müssen Sie möglicherweise etwas finden, um die fehlenden Funktionen auszufüllen.

Normalerweise hat jedes WordPress-Theme 2 Designs: eines für den Blog und eines für die Seiten. Farben sind begrenzt, es gibt keine speziellen Anpassungen. Dies bedeutet, dass Plugins zu einem bestimmten Zeitpunkt nützlich sein werden.

Jetzt haben WordPress-Themes einen Theme Customizer mit grundlegenden Funktionen. Sie eignen sich gut für diejenigen, die keine benutzerdefinierten Funktionen benötigen und ihre Website sehr schnell erstellen möchten. Bei Bedarf können Sie Ihre eigenen CSS-Stile hinzufügen. Stellen Sie einfach sicher, dass Sie ein Thema auswählen, das ein Layout hat, das Ihrer eigenen Vision entspricht.

Wie können Sie ein Thema anpassen? Gehen Sie einfach zu Aussehen-> Anpassen.

Auf der linken Seite können Sie auswählen, was geändert werden soll: inhalt, Menü und mehr. Auf der rechten Seite befindet sich Ihre Website-Vorschau. Sie können den Text in Echtzeit ändern, indem Sie auf das Stiftsymbol klicken.

Auf der anderen Seite der Geschichte haben wir WordPress-Builder. Sie sind Plugins, mit denen Sie wirklich einzigartige Websites erstellen können. Sie können das Layout Ihres Themas vollständig ändern.

In unserem Fall werden wir einen solchen Builder namens Colibri als Beispiel verwenden.

Abhängig von der Version des Themas, der kostenlosen oder kostenpflichtigen, haben Sie verschiedene Elemente zum Spielen: von Kopfzeilen, bestimmten Seitenabschnitten bis hin zu kleineren Komponenten wie Handlungsaufrufen, Registerkarten, Zählern, Akkordeons und mehr.

Sie können Ihr Thema wie zuvor bearbeiten, von Aussehen-> Anpassen, oder nehmen Sie die Verknüpfung, wie unten gezeigt.

Was ändert sich? Sie erhalten Zugriff auf weitere Funktionen im Customizer.

Neben der Verwendung des Customizers gibt es in WordPress eine weitere Option zur Anpassung von Websites – den Standardeditor. Sie können über die Option „Bearbeiten“ unter jedem Beitrag und jeder Seite darauf zugreifen. Sobald Sie einen neuen Beitrag oder eine neue Seite hinzufügen, gelangen Sie direkt in den Standardeditor (es sei denn, Sie haben einen Builder aktiviert).

In unserem nächsten Kapitel erfahren Sie, wie Sie:

1. Erstellen Sie eine WordPress-Website mit einem WordPress Page Builder
2. Erstellen Sie eine WordPress-Website mit dem Standard-WordPress-Editor

A. So erstellen Sie eine WordPress-Website mit kostenlosen Website-Buildern

Mit WordPress Website Builders können Sie den WordPress Customizer auf ein ganz neues Niveau heben. Sie können alles anpassen: Kopfzeilen, Seiteninhalte, Fußzeilen, Navigationsmenüs, globales, individuelles Styling, Sie nennen es! Keine Design- oder Programmierkenntnisse erforderlich!

Es ist normalerweise ein Drag & Drop-Vorgang. Und Sie müssen sich keine Gedanken über das mobile Design machen, die Bauherren haben den Aspekt der Reaktionsfähigkeit abgedeckt.

So passen Sie die Website-Einstellungen im Customizer an

Sehen Sie sich Ihr linkes Seitenfenster an. Scrollen Sie nun nach unten zu „Allgemeine Einstellungen“.

Hier können Sie einrichten:

• Der Name Ihrer Website.
• Das gesamte Farbschema und die Typografie Ihrer Website.
• Vorlagen für Blog, Kopf- und Fußzeile: welche Hintergründe zu verwenden, Abstände, Grenzen, Schatten, etc.
• Abstand: innerhalb von Schaltflächen, Spalten usw.
• Benutzerdefiniertes CSS-Styling

So erstellen Sie Inhalte in WordPress mit Buildern

Wenn Sie eine neue Website-Seite erstellen möchten, gehen Sie wie bereits erwähnt zu „Seiten“ und wählen Sie „Neu hinzufügen“. Sie werden zum Standard-WordPress-Editor weitergeleitet, in dem Sie Ihre Seite benennen. Wählen Sie als Nächstes „Mit Colibri bearbeiten“.

Wenn Sie eine vorhandene WordPress-Seite bearbeiten möchten, klicken Sie einfach auf „In Colibri bearbeiten“.

So fügen Sie Abschnitte zu Ihren WordPress-Seiten hinzu

Jedes „+“ -Zeichen im linken Seitenbereich öffnet ein Fenster mit Blöcken und Komponenten. Sie können nach unten scrollen, bis Sie ein Design finden, das Ihnen gefällt, oder einfach eine Kategorie eingeben. Hier sind die Kategorien, die im Colibri Builder zur Verfügung stehen: Hero Accent, About, Features, Content, Call To Action, Blog, Counters, Portfolio, Photo Gallery, Testimonials, Clients, Team, Contact, F.A.Q. und Pricing.

Dies sind vordefinierte Vorlagen, die dem Farbschema Ihrer Wahl entsprechen.
Wenn Sie einen der Blöcke auswählen und auf das „+“ – Zeichen klicken, das auf dem Block angezeigt wird, wird der Block unten auf der Seite positioniert.

Sie können sie verschieben, wo immer Sie möchten, indem Sie den Abschnitt aus dem linken Seitenbereich ziehen und ablegen.

Es gibt auch eine Option für „leere“ Blöcke.

Dies bedeutet, dass Sie sie nach Belieben anpassen können. Am Ende können Sie Ihr Design sogar für die spätere Verwendung speichern.

Über das Einstellungssymbol in der oberen rechten Ecke jedes Abschnitts können Sie die Anzahl der Elemente pro Zeile anpassen, Elemente neu anordnen, neue Blöcke hinzufügen und sogar den gesamten Abschnitt löschen.

So passen Sie Abschnitte Ihrer WordPress-Seite an

Wenn Sie den Text in Ihren Abschnitten ändern möchten, können Sie dies inline tun, dh innerhalb des Abschnitts selbst, live.

Die Inline-Bearbeitung ist für Texte auf Schaltflächen nicht verfügbar. Sie werden im Bedienfeld links verwaltet.

Wenn Sie ein Bild von Ihrer Website ändern möchten, ist alles intuitiv. Wählen Sie zunächst Ihr Bild aus.

Sie können es auch im linken Bereich sehen. Klicken Sie auf das Bild. Sie sehen ein neues Fenster, in dem Sie aufgefordert werden, ein Bild hochzuladen oder eines aus der Bibliothek auszuwählen. Wenn Sie hochladen möchten, können Sie dies per Drag & Drop tun.

Nun, zurück zu dem Panel, das ich gerade erwähnt habe, hat es 3 Hauptoptionen: Layout, Stil und Erweitert. Wenn Sie einen Abschnitt aus der Website-Vorschau rechts auswählen, wird das entsprechende Bedienfeld des Abschnitts angezeigt.

Nehmen wir sie nacheinander:

• Grundriss

Hier können Sie die Breite und Höhe des Containers auf Strukturebene anpassen. . Einfach ausgedrückt ist der Container der tatsächliche Platz, den ein Block einnimmt. Innerhalb des Containers platzieren Sie den Inhalt (Text, Bilder).

Sie können auch den Abstand Ihres Inhalts anpassen und festlegen, wie nah er oben oder unten platziert wird.

Sie können auch neue Zeilen in Ihrem Block hinzufügen.

• Stil

Auf dieser Ebene können Sie den Hintergrund Ihres Blocks anpassen oder Teiler hinzufügen. Teiler sind visuelle Hinweise, die signalisieren, wann ein Website-Abschnitt endet oder beginnt.

• Fortgeschritten

Hier kommt der Spaß, Leute!

Von Typografie und Abstand bis hin zur Reaktionsfähigkeit können Sie hier auf die kleinsten Website-Details eingehen.

Sie können je nach Zustand des Elements Variationen erstellen: normal oder Hover.

Wenn Sie ein bestimmtes Element in einem Blog auswählen, z. B. eine Überschrift, wird links dasselbe Bedienfeld angezeigt.

Dies bedeutet, dass Sie Ihre Bearbeitung detaillierter gestalten können.

Apropos Überschriften und granularere Elemente, diese werden „Komponenten“ genannt. Mal sehen, wie Sie mit ihnen spielen können.

Verwendung von Komponenten in Ihrer WordPress-Site

Die Komponenten beziehen sich auf Überschriften, Schieberegler, Trennwände, Schaltflächen, Karussells, Preise und mehr. Sie können auf die gleiche Weise wie Blöcke zugegriffen werden. Sie sitzen nebeneinander und sie haben Drag & Drop-Funktionalität. Colibri bietet 40 Komponenten.

Wie bereits erwähnt, können Sie sie über das Bedienfeld links anpassen, wenn Sie zu „Layout“, „Stil“ oder „Erweitert“ gehen.

Mobile Reaktionsfähigkeit

In einer Welt mit mehreren Geräten ist es wichtig, eine vollständig ansprechende Website zu haben. Standardmäßig ist Skyline ein Mobile Responsive Theme. Dies bedeutet, dass sich seine Abschnitte an verschiedene Geräte anpassen. Wenn Sie eine Vorschau anzeigen möchten, wie Ihre WordPress-Site auf Tablets oder Mobilgeräten aussieht, können Sie dies tun, wenn Sie mit den Steuerelementen unten links spielen.

Sie können auch bestimmte Funktionen auf Mobilgeräten ausblenden, z. B. in den Optionen „Erweitert“.

So erstellen Sie ein Menü im WordPress Customizer

Angenommen, Sie haben Ihre Seiten entworfen und müssen sie einem Menü hinzufügen. Im Panel auf der rechten Seite haben Sie alle Ihre Abschnitte, von oben nach unten geordnet, wie auf Ihrer Website. Die Fußzeile ist Ihr letzter Abschnitt. Darunter sehen Sie einige zusätzliche Funktionen.

Hier können Sie Ihr Menü erstellen.

Nachdem Sie „Neues Menü erstellen“ ausgewählt haben, können Sie Ihr Menü benennen und eine Platzierung dafür auswählen (Kopfzeile, Fußzeile, Seiten usw.).

Wenn Sie „Weiter“ auswählen, können Sie Ihre Seiten über die Option „Elemente hinzufügen“ zum Menü hinzufügen. Einfacher geht’s nicht.

So arbeiten Sie mit WordPress-Widgets

Ich habe bereits erwähnt, dass Widgets Inhaltsblöcke sind, die Sie den Seitenleisten, Fußzeilen und anderen Bereichen Ihrer Website hinzufügen können.

Wenn Sie ein WordPress Builder-Plugin verwenden, verwenden Sie Widgets nur für Ihre WordPress-Seitenleisten, da Sie Fußzeilenlayouts vordefiniert haben.

Normalerweise werden Seitenleisten von Blogseiten verwendet. Jedes Thema verfügt über verschiedene Widgets-Optionen, von Suchleisten über aktuelle Beiträge und Kommentare, soziale Widgets bis hin zu Bildern und Videos. Instagram-Widget Angenommen, Sie möchten Ihr Instagram-Profil in einer Seitenleiste anzeigen, dafür gibt es ein Instagram-WordPress-Widget.

Eines meiner Lieblings-Widgets ist dasjenige, das benutzerdefinierte HTML-Bearbeitung ermöglicht. Ich finde es wirklich mächtig.

Nachdem dies gesagt ist, sind Sie irgendwie fertig. Herzlichen Glückwunsch, Ihre WordPress-Site ist einsatzbereit!

Lassen Sie uns nun die andere Methode zum Erstellen von Websites in WordPress überprüfen.

B. So erstellen Sie eine WordPress-Website mit dem Standard-WordPress-Editor (Gutenberg)

Ich werde das sehr schnell machen. Dieser Editor ist noch neu in WordPress (es ist der Standard-Wordpress-Editor seit Dezember 2018), aber es entwickelt sich kontinuierlich dank Community-Beitrag.

Der klassische WordPress-Editor sah so aus:

Jetzt haben wir:

Nun, was Sie wissen müssen, ist, dass nicht jedes Thema mit diesem neuen Editor kompatibel ist. Sie müssen einen Gutenberg-ready finden.

Layout-Design mit dem Standard-WordPress-Editor ist begrenzt. Es basiert auch auf Blöcken. Wie Sie wahrscheinlich im vorherigen Kapitel herausgefunden haben, können Blöcke so ziemlich alles sein: Überschriften, Bilder, Schaltflächen, Videos usw.

Warum ich nicht auf dem Thema bestehe: Wenn Sie nach Gutenberg-Bewertungen suchen, sind die neuesten 1-Sterne-Bewertungen. Es ist keine gute Erfahrung. Auch wenn es seit dem Start bereits 2 Jahre her ist und viele Updates in der Mitte, steckt dies noch in den Kinderschuhen. WordPress verlässt sich jetzt auf die Community, um neue Blöcke zu erstellen, damit sich das Bearbeitungserlebnis weiterentwickeln kann.

Im Moment verhält sich das Tool wie ein Texteditor mit geringem Stromverbrauch auf der Styling-Seite.

Es gibt Tools wie Kadence, die Ihnen helfen können, aber wir sind noch nicht da.

Installieren Sie wichtige WordPress-Plugins

Das WordPress-Ökosystem besteht aus Themen und Plugins

Es gibt Tausende von WordPress-Plugins, die die Funktionalität erweitern oder Ihrer Website neue Funktionen hinzufügen können.

Dies ist ein sehr kurzes Tutorial zur Installation eines Plugins.

Unsere Plugin-Empfehlungen

Kommen wir nun zu einem anderen Thema: Page Speed.

Sowohl Ihre Besucher als auch Google legen großen Wert auf die Geschwindigkeit Ihrer Website.

Warum Google?

Geschwindigkeit ist ein wichtiger Faktor, der beim organischen Ranking berücksichtigt wird, dh hier:

Warum ist die Geschwindigkeit der Website schlecht für die Nutzer und letztendlich für Sie?
Nun, wenn Sie ihnen eine schlechte Erfahrung anbieten, werden sie sich möglicherweise nicht mit Ihrem Angebot befassen oder nicht einmal in absehbarer Zeit wiederkommen.

Laut einer Google-Studie aus dem Jahr 2018 verlassen 53% der mobilen Nutzer eine Website, deren Laden länger als 3 Sekunden dauert (Holy Moly!).

Und schau dir das an!

Wie beeinflusst das Laden der Seite die mobilen Besucher (Hinweis: Bounce bedeutet Verlassen der Website)?
.
Wie können Sie das beheben und die Leistung Ihrer Website insgesamt verbessern, damit Sie nicht sowohl von Ihren Nutzern als auch von Google einen Daumen nach unten erhalten?

Ich habe 2 entspannte Lösungen ausgewählt (es gibt noch viel mehr, aber ziemlich technisch).

● Bilder optimieren
Ihre Website-Bilder sollten nicht in ihrer Originalgröße hochgeladen werden. Versuchen Sie auch, PNGs anstelle von JPEGs zu verwenden (sie haben weniger Farben).
Smush ist unser bevorzugtes WordPress-Plugin für die Bildkomprimierung. Sie werden keinen sichtbaren Qualitätsverlust feststellen und Ihre Seitengeschwindigkeit wird optimiert.

● Caching
Einfach ausgedrückt, Cache bietet temporären Speicher für Inhalte, auf die später zugegriffen werden kann. Ihre Website wird anders geladen, wenn Sie zum ersten Mal oder zum 5. Mal vom selben Besucher aufgerufen wird.

Warum ist das so?
Wenn Sie mit Browser-Caching zu tun haben, speichert Ihr Browser eine Kopie von Dateien von einer Website auf dem Gerät des Benutzers
(Festplatte, Mobiltelefon). Wenn eine Website zwischengespeichert wird, muss der Browser nur neue oder aktualisierte Teile einer Seite laden und muss keine neue Serveranforderung initiieren. Das gleiche passiert, wenn Sie auf die Schaltfläche „Zurück“ klicken, zeigt Ihr Browser die Seite aus dem Cache an. Dies ist
auch super hilfreich bei einer langsamen Internetverbindung, die Seiten werden schnell geladen.

Möchten Sie mehr darüber erfahren, wie Caching funktioniert? Lesen Sie hier weiter.

Die Tools, die wir hier empfehlen, sind:
➔ W3 Total Cache (W3TC) verbessert die SEO- und Benutzererfahrung Ihrer Website, indem die Website-Leistung gesteigert und die Ladezeiten verkürzt werden.
➔ Kolibri. Dies hat auch einige zusätzliche Funktionen, die wir lieben, wie die Komprimierung von Javascript, HTML & CSS-Dateien.

Wie können Sie nun überprüfen, wie schnell Ihre Website geladen wird?
Google hat genau das Tool, um Ihnen dabei zu helfen, und bietet auch einige Ideen zur Behebung.

Bonus: Tipps und Tricks zum UX-Design

Denken Sie daran, dass ich mit den WordPress-Seitenerstellern „Der Himmel ist die Grenze“ gesagt habe?

Nun … es gibt immer ein „aber“. Wenn Sie eine Website entwerfen, sollten Sie immer Ihre
Zielgruppe oder die Käuferpersönlichkeiten (wie die Vermarkter gerne sagen) im Auge behalten. Sie müssen ihnen eine großartige Erfahrung auf Ihrer Website bieten, dafür steht UX (User Experience).

Dafür gibt es bestimmte Regeln, die Sie befolgen sollten, um eine reibungslose Benutzererfahrung zu gewährleisten.

Die Bedürfnisse der Benutzer erfüllen
Benutzer einer Website möchten nicht zu viel nachdenken. Sie benötigen nützliche Informationen, die leicht überflogen und verstanden werden können. Sie brauchen keine Erfahrung, die aus vielen Klicks oder viel hin und her besteht.

Menschen suchen nach sofortiger Befriedigung: Sie finden schnell und einfach, was sie brauchen. Wenn dies auf Ihrer Website nicht geschieht, suchen sie nach einer anderen.

Visuelle Hierarchie

Nicht alle Website-Teile werden gleich behandelt, einige sind wichtiger als andere (Formulare, Schaltflächen, Überschrift, Wertversprechen usw.).

Wo möchten Sie, dass Ihr Benutzer landet? Wo soll er klicken?

Verwenden Sie visuelle Hinweise, um ihm zu helfen, das zu erreichen, was Sie wollen. Alle Elemente auf den Seiten sollten sich als Reiseleiter verhalten.

Forscher haben herausgefunden, dass Benutzer, die von links nach rechts lesen, Websites in einem Z-förmigen Muster scannen.

Dies bedeutet, dass Sie Ihre wichtigsten Informationen dorthin richten sollten.

Einfache Navigation

Sie sollten die Navigationsleiste einfach halten, gehen Sie nicht auf zu viele Optionen ein. Möglicherweise haben Sie eine paradoxe Auswahlsituation, wenn Benutzer von den Möglichkeiten überwältigt werden.

Seiten sollten intern mit anderen relevanten Seiten verknüpft sein, damit die Navigation reibungslos verläuft und der Benutzer nicht mehrmals auf „Zurück“ klicken sollte, um zu vorherigen Seiten zu gelangen.

Nutzen Sie den Leerraum. Mit Leerzeichen können Informationen in verdaulichen Inhaltsbereichen organisiert werden. Dadurch fühlen sich Benutzer wohler und werden nicht von Datenmengen überfordert.

Gleiches Farbschema (Konsistenz)

Vermeiden Sie superdunkle oder superintensive Farben auf Ihrer Website. Sie könnten Benutzer wegschicken. Sie können stärkere Farben verwenden, um wichtige Aspekte Ihrer Website hervorzuheben.

Verwenden Sie Farben, die gleichmäßig ausbalanciert sind. Hier sind einige Inspirationen.

Und noch etwas, bevor wir zum nächsten UX-Designprinzip übergehen. Farben haben Bedeutungen auf der ganzen Welt, sie sind mit verschiedenen Emotionen verbunden. Diese Infografik wird ein Licht auf das Thema werfen.

Verwenden Sie effektives Schreiben

Verwenden Sie keine übertriebene und Clickbait-Kopie. Schreiben Sie mit gesundem Menschenverstand, in einer natürlichen Sprache, verwenden Sie keinen Jargon (nicht jeder kennt bestimmte technische Wörter).

Verwenden Sie max. 3 Schriften in maximal 3 Punktgrößen – maximal 18 Wörter oder 50-80 Zeichen pro Textzeile, wie das Smashing Magazine empfiehlt.

Social Proof verwenden

Warum sollte ich Ihnen, Ihrem Unternehmen oder Ihren Produkten vertrauen?
Wir Menschen sind soziale Wesen. Wir leben in Gemeinschaften, wir haben Freunde und Familie. Sie können unsere Influencer sein. Wir kümmern uns sehr um ihre Meinung.
.
Lassen Sie mich einige Beispiele für Sie auflisten:
● Bewertungen und Bewertungen

● Erfahrungsberichte

● Nein. von Kunden („Sie sind in guter Gesellschaft“).

● Kundenlogos

● Fallstudien, die durch Ergebnisse gestützt werden

● Pressemitteilungen und Auszeichnungen

Wenn Sie sich über die neuesten designtrends, die Kreativen an der Küste haben eine wunderbare Infografik zu diesem Thema erstellt.

Schlussfolgerungen

Wir können es einen Wrap nennen, findest du nicht?

Wir wollten den kurzen Weg gehen, um Sie nicht mit Informationen zu überfordern. Aber am Ende steckt der Teufel im Detail. Wir haben dir gerade den Helikopterblick gegeben.

Die Sache ist, dass Sie Ihre Website in weniger als 2 Stunden zum Laufen bringen können. Je mehr Funktionen, Seiten und Inhalte Sie hinzufügen möchten, desto länger dauert es. Und vernachlässigen Sie niemals die neuesten Webdesign-Trends.

Eine letzte Sache, wenn Sie der DIY-Typ sind, müssen Sie auf jeden Fall unseren Colibri Builder ausprobieren!

Hier ist ein Video zum Erstellen einer WordPress-Website-Seite mit unzähligen Funktionen.

Wenn Ihnen dieser Artikel gefallen hat und Sie mehr darüber erfahren möchten, wie Sie eine WordPress-Website entwerfen, abonnieren Sie unseren Youtube-Kanal und folgen Sie uns auf Twitter und Facebook!