So erstellen Sie responsive WordPress-Websites (mit Themen)

Die Verwendung eines responsiven Website-Designs ist beim Erstellen von Websites nicht mehr möglich. Laienhaft ausgedrückt, sorgt ein responsives Website-Design dafür, dass Ihre Website gut aussieht, unabhängig davon, auf welchem ​​Gerät Ihre Besucher den Inhalt anzeigen und mit diesem interagieren.

Angesichts der Tatsache, dass mehr als 80% der Menschen ein Smartphone besitzen, ist es ein Muss, sicherzustellen, dass Ihre Website reaktionsfähig ist. Laut mobilen Marketingstatistiken aus dem Jahr 2016 geben 57% der Nutzer an, dass sie kein Unternehmen mit einer schlecht gestalteten mobilen Website empfehlen, und 88% der Verbraucher, die auf einem mobilen Gerät nach einem lokalen Geschäft suchen, rufen das Telefon an oder gehen dazu Geschäft innerhalb von 24 Stunden.

Wenn Sie dies berücksichtigen, ist es leicht zu verstehen, warum der Inhalt Ihrer Website auf einer Vielzahl von Geräten verfügbar sein muss. Glücklicherweise ist es dank einer Vielzahl an responsiven Themen einfach, Ihre WordPress-Website ansprechend zu gestalten.

In diesem Lernprogramm zeigen wir Ihnen, wie Sie ein responsives WordPress-Theme auswählen, ein responsives Theme für Ihre Website verwenden und Ressourcen zur Verfügung stellen, um mehr über Responsive Design und das Erstellen eines eigenen WordPress-Themes zu erfahren.

So wählen Sie ein Responsive WordPress-Theme aus

Wenn Sie ein responsives Thema für Ihre Website suchen, müssen Sie einige Punkte beachten. Je nach Branche ist es wichtig, ein Thema zu wählen, das nicht nur ein ansprechendes Design, sondern auch die notwendigen Funktionen bietet, mit denen Ihre Besucher mehr über Ihr Unternehmen erfahren und von potenziellen Kunden zu zahlenden Kunden wechseln können.

Hier sind einige wichtige Punkte, auf die Sie achten sollten, wenn Sie ein responsives WordPress-Theme für Ihre Website kaufen.  

1. Betrachten Sie die Funktionen

Wenn es um Funktionen geht, sollten Sie nach einem Thema suchen, das über Funktionen verfügt, die Ihrer Branche entsprechen. Wenn Sie beispielsweise eine Kreativagentur oder ein Designer sind, möchten Sie ein Thema, das die Möglichkeit bietet, Ihr Portfolio sowie Erfahrungsberichte früherer Kunden zu präsentieren.

Wenn Sie Produkte verkaufen, suchen Sie nach einem Thema, das sich gut in ein E-Commerce-Plugin integrieren lässt oder das Anzeigen von Preistabellen ermöglicht. Wenn Sie sich auf die Möglichkeit verlassen, Kunden von Ihrer Website aus zu buchen, suchen Sie nach einem Thema, das über ein integriertes Buchungsformular verfügt.

Glücklicherweise gibt es viele branchenspezifische WordPress-Themes, die über alle erforderlichen Funktionen verfügen und reaktionsschnell sind.

2. Suchen Sie nach Anpassungsoptionen

Sie sollten nach einem Design suchen, das flexible Anpassungsoptionen bietet. In den meisten Fällen verfügt Ihr Design über ein Designeinstellungsfenster, in dem Sie Farben und Schriftarten anpassen, Ihr Logo hochladen können und vieles mehr. Wenn Sie mit verschiedenen Layouts experimentieren möchten, wählen Sie ein Design, das in einen Seitenersteller integriert werden kann, oder bietet eine alternative Möglichkeit zum Konfigurieren verschiedener Layouts für Ihre Seiten.

3. Suchen Sie nach einem Responsive WordPress-Theme mit ansprechendem Design

Suchen Sie schließlich nach einem Thema, das ein ansprechendes Design hat, das dem Aussehen Ihrer Website ähnelt. Dadurch entfällt die Zeit, die Sie für das Modifizieren oder Neuauslegen des Layouts Ihrer Seiten benötigen, und es ist einfacher für Sie, die Seiten anzupassen.

Wenn Sie ein ansprechendes WordPress-Theme gefunden haben, das Sie mögen, müssen Sie es nur noch kaufen und die gezippte Datei auf Ihren Computer herunterladen. Entdecken Sie responsive WordPress-Themes zu ThemeForest oder Envato Elements: 

Erste Schritte mit Ihrer Responsive Website

Nachdem Sie Ihr Thema erstellt haben, können Sie mit der Erstellung Ihrer responsiven Website beginnen. Sie müssen einen Domainnamen und ein Hosting-Paket kaufen, in dem Sie WordPress und Ihr bevorzugtes Design installieren.

Es ist auch eine gute Idee, den Inhalt für Ihre Website vorzubereiten, sodass Sie den Inhalt einfach kopieren und einfügen können, wenn Sie ihn hochladen möchten, anstatt Zeit mit der Suche zu verbringen.

1. Ein Domänenname

Der erste Schritt ist, einen Domainnamen für Ihre Website zu kaufen. Dadurch können Ihre Besucher und Kunden Ihre Website im Internet finden. Daher ist es wichtig, einen Namen zu wählen, der für Ihr Unternehmen oder Ihre Marke steht. Versuchen Sie nach Möglichkeit, Ihren Domänennamen mit der Erweiterung .COM zu koppeln. Sie können wählen, ob Sie Ihre Website nach dem Namen Ihres Unternehmens benennen möchten, oder Sie können Ihren eigenen Namen wählen, wenn Sie ein persönliches Portfolio, ein Blog oder eine Lebenslauf-Website erstellen.

2. Ein Hosting-Plan

Nachdem Sie sich für Ihren Domainnamen entschieden haben, müssen Sie ein Hosting-Paket auswählen, damit die Benutzer auf Ihre Website zugreifen können. Beim Hosting gibt es viele Möglichkeiten, von günstigen, gemeinsam genutzten Plänen bis zu teureren, verwalteten WordPress-Hosting-Plänen.

Wenn Sie sich nicht sicher sind, wo Sie beginnen sollen, sollten Sie Envato Hosted in Betracht ziehen. Envato Hosted bietet erstklassiges verwaltetes WordPress-Hosting. Der eigentliche Vorteil ist jedoch, dass WordPress zusammen mit dem von Ihnen gewählten Thema installiert und eingerichtet werden kann und sich um die technischen Details der Einrichtung Ihrer Website kümmert.  

Der Envato Hosted-Plan beinhaltet auch:

  • Monatlich 100.000 Besuche des eingehenden Datenverkehrs, 5 GB Festplattenspeicher und 100 GB monatliche Bandbreite.
  • Tägliche Backups, Serversicherheit und Standortüberwachung sowie fortlaufender Support durch unser Team von WordPress-Experten.

3. Inhalt und Bilder

Nehmen Sie sich schließlich etwas Zeit, um den gesamten Inhalt Ihrer Website vorzubereiten. Dies umfasst normalerweise Bilder, die auf Ihren wichtigsten Seiten wie der Über, Dienstleistungen oder Arbeite mit uns Seiten. Wenn Sie über mehrere Abteilungen verfügen, ziehen Sie beispielsweise Bios und Kopfschüsse der Personen in Betracht, die die einzelnen Abteilungen verwalten, damit Ihre Besucher wissen, an wen sie sich wenden können.

Wenn Sie Ihren Inhalt im Voraus vorbereiten, können Sie ihn einfach kopieren und anstelle von Demoinhalten einfügen, die für die meisten modernen Themen verfügbar sind.

So erstellen Sie Ihre Site

Nachdem Sie jetzt alles eingerichtet haben, können Sie Ihre Website erstellen. Als erstes müssen Sie WordPress installieren. Anschließend können Sie Ihr Design und die erforderlichen Plugins installieren und mit der Einrichtung und Anpassung des Designs fortfahren.

In diesem Tutorial verwenden wir das auf Oshine reagierende WordPress-Design. Das Oshine-Thema zeichnet sich durch ein modernes und ansprechendes Design aus und kann für eine Vielzahl von Nischen verwendet werden. Es enthält mehr als 30 Demos, die mit einem einzigen Klick importiert werden können, um Ihre Website schnell einzurichten.

Oshine Theme

1. Installieren Sie WordPress

Wie bereits erwähnt, ist der erste Schritt die Installation von WordPress. Ihr Hosting-Unternehmen sendet Ihnen eine Willkommens-E-Mail mit dem Link zu Ihrem Hosting-Konto-Dashboard oder Ihrem Control Panel sowie Ihren Benutzernamen und Ihr Kennwort. Klicken Sie auf den Link und geben Sie die bereitgestellten Informationen ein.

Sobald Sie angemeldet sind, können Sie nach einem Abschnitt mit der Bezeichnung suchen WordPress installieren, Ein-Klick-Installer, Softaculous Installer, oder etwas ähnliches. Finden Sie das WordPress Symbol, klicken Sie darauf und befolgen Sie die Anweisungen.

In den meisten Fällen werden Sie mit einem Bildschirm begrüßt, auf dem Sie aufgefordert werden, den Namen und die Beschreibung Ihrer Site, Ihren gewünschten Benutzernamen und Ihr Kennwort sowie Ihre E-Mail-Adresse einzugeben. Füllen Sie die Felder mit Ihren Informationen aus und drücken Sie dann die Installieren Taste.

Nach wenigen Minuten wird WordPress installiert. Das bedeutet, dass Sie sich jetzt bei Ihrem WordPress-Dashboard anmelden können. Einfach besuchen www.yoursitename.com/wp-admin (Ersetzen Sie yoursitename.com durch Ihren tatsächlichen Domainnamen) und geben Sie den Benutzernamen und das Kennwort ein, die Sie während der Installation erstellt haben.  

2. Installieren Sie ein WordPress-Theme

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung> Themen> Neues hinzufügen. Dann klick Theme hochladen.

Installieren des Oshine-Themes.

Suchen Sie den heruntergeladenen ZIP-Ordner, der die Dateien des Themas enthält, und laden Sie ihn hoch. Wenn die Installation abgeschlossen ist, klicken Sie auf aktivieren Sie.

3. Installieren Sie die erforderlichen Plugins

Nachdem Sie das Design aktiviert haben, wird im Dashboard eine Benachrichtigung mit der Meldung angezeigt, dass bestimmte Plugins erforderlich sind, damit das Design alle Funktionen nutzen kann. Drücke den Beginnen Sie mit der Installation von Plugins Link, um direkt zum Installationsbildschirm zu gelangen.

Installieren Sie die erforderlichen Plugins.

Wählen Sie alle Plugins aus und klicken Sie auf Installieren. Danach gehe zu Plugins> Alle Plugins> Inaktiv und wählen Sie alle inaktiven Plugins aus und wählen Sie dann das aktivieren Sie Option aus dem Dropdown-Menü.

So passen Sie Ihre Site an

Der nächste Schritt beim Einrichten Ihrer Website umfasst das Importieren von Demo-Inhalten, das Ersetzen durch eigene Inhalte und das Ändern der Designeinstellungen, um Ihre Schriftarten, Farben, Ihr Logo und vieles mehr zu berücksichtigen.

1. Importieren Sie Demo-Inhalte

Der schnellste Weg zum Einrichten Ihrer Website ist die Installation des Demo-Inhalts. Dadurch wird Ihr Design wie die von Ihnen gewählte Demo aussehen. Alle Seiten wurden erstellt und eingerichtet, sodass Sie lediglich den Inhalt ersetzen müssen.

Beginnen Sie mit dem auf Oshine reagierenden WordPress-Design und navigieren Sie zum Einführen Tab. Wählen Sie die bevorzugte Demo-Version aus und wählen Sie den Inhalt aus, den Sie installieren möchten. In unserem Fall habe ich den gesamten Inhalt ausgewählt und auf die Schaltfläche geklickt Installieren Taste. Warten Sie, bis der Vorgang abgeschlossen ist, und Ihre Site ist bereit für die Anpassung. Überprüfen Sie, ob der Importvorgang erfolgreich war.

Importieren von Demo-Inhalten in Oshine.

Lassen Sie uns den Demo-Inhalt ersetzen. Gehen Sie in Ihrem WordPress-Dashboard zu Seiten und klicken Sie auf die Bearbeiten Schaltfläche auf der Seite, mit der Sie arbeiten möchten. In diesem Beispiel bearbeiten wir die Startseite.

Das auf Oshine ansprechende WordPress-Design verwendet den Tatsu Page Builder, um das Layout für alle Seiten Ihrer Website zu erstellen, was das Bearbeiten dieser Seiten sehr einfach macht. Klicken Sie einfach auf Mit Tatsu bearbeiten können Sie das Layout ändern, zusätzliche Module hinzufügen und mehr.

Tatsu Editor

Um Elemente auf Ihrer Seite zu bearbeiten, klicken Sie einfach auf den Teil der Seite, den Sie bearbeiten möchten, geben Sie Ihren eigenen Text ein und passen Sie die Einstellungen nach Ihren Wünschen an. Sie können auch zusätzliche Elemente wie Textfelder, Schaltflächen, Symbole, Videos, Bilder usw. hinzufügen.

Hinzufügen von Modulen zum Responsive WordPress-Design.

2. Passen Sie das visuelle Erscheinungsbild an

Wenn Sie mit dem Ersetzen des Inhalts fertig sind, ist es an der Zeit, das Erscheinungsbild Ihrer Website zu gestalten. Gehe zu Oshine-Optionen um mit der Anpassung Ihrer Site zu beginnen. Sie werden feststellen, dass es hier einige Optionen gibt.

Sie können Ihr eigenes Logo und Hintergrundbild hochladen, die auf Ihrer Site verwendeten Schriftarten anpassen, mobile Stile steuern, die Informationen festlegen, die in der Fußzeile und in der Kopfzeile angezeigt werden, und vieles mehr. Sie können auch die Standardeinstellungen für globale Stile anpassen, Ihre Kontaktinformationen einfügen sowie Skripts wie z. B. Google Analytics-Code nachverfolgen und die Leistung Ihrer Website optimieren, indem Sie Stylesheets und Skripts minimieren.

Wie man ein Responsive Website Theme macht und warum man es tun sollte

Die Verwendung eines vorgefertigten WordPress-Themas ist eine großartige Möglichkeit, Zeit zu sparen und sicherzustellen, dass Ihre Website schnell reagiert. Sie können Ihre Site jedoch auf die nächste Ebene bringen, indem Sie Ihr eigenes WordPress-Theme von Grund auf neu erstellen.

Dies mag entmutigend erscheinen, gibt Ihnen jedoch die ultimative Kontrolle über das Design und die Funktionen Ihrer Website. Wenn Sie wissen möchten, wie Sie Ihr eigenes responsives Thema erstellen oder mehr über responsives Website-Design erfahren möchten, finden Sie hier einige Tutorials, die Ihnen den Einstieg erleichtern.

1. Responsive Webdesign für Anfänger

Dieser Kurs führt Sie durch die Grundlagen des Responsive Design, erläutert den Mobile-First-Ansatz und die verschiedenen Layouts, die im Responsive Webdesign verwendet werden, sowie fortgeschrittenere Themen, z. B. das Sicherstellen der Reaktionsfähigkeit Ihrer Bilder und die Verwendung von Medienabfragen zur Steuerung des Layouts Website für eine Vielzahl von Geräten.

2. Erstellen eines Mobile First Responsive WordPress-Designs

Dieses Schritt-für-Schritt-Tutorial führt Sie durch den Prozess, bei dem Sie ein Einstiegsthema verwenden und es in ein reaktionsschnelles verwandeln, wobei Sie den Ansatz "Mobile-First" berücksichtigen. Sie erfahren, wie Sie Stile für mobile Geräte hinzufügen und Ihr Design für Desktop-Geräte gestalten.

3. Sieben Plugins zur Unterstützung Ihrer mobilen Benutzer

In diesem Beitrag werden Sie sieben hilfreiche WordPress-Plugins kennenlernen, die Ihre Site für mobile Geräte optimieren. Stellen Sie sicher, dass Ihre Bilder und Widgets auf Plug-Ins eingehen, die sicherstellen, dass Ihre Website auf mobilen Geräten gut aussieht, selbst wenn Ihr Thema noch nicht reagiert.

Beginnen Sie mit Ihrer Responsive Website

Das Erstellen einer responsiven Website mag abschreckend erscheinen, aber reaktionsschnelle WordPress-Themes vereinfachen diese Aufgabe selbst für Anfänger. Nutzen Sie unser Tutorial als Referenz und nutzen Sie zusätzliche Ressourcen zum responsiven Webdesign. Und wenn Sie ein responsives WordPress-Theme benötigen, sehen Sie sich unsere Sammlung hochwertiger WordPress-Themes für jede Branche an.

SaveSave