So erstellen Sie eine Business-Website mit WordPress & Elementor

Erfahren Sie, wie Sie mit WordPress, Elementor und Astra eine Website für Ihr Unternehmen erstellen. Dies sind alles 100% kostenlose Tools, die ich persönlich benutze.


In diesem Tutorial zum Erstellen einer Website 2019 werde ich Ihnen mehr als nur das Erstellen einer Website zeigen. Außerdem werde ich Ihnen zeigen, wie Sie Ihre Website mit SEO optimieren und daraus Leads generieren.

Dieses Tutorial ist umfassend und meine längste Anleitung zum Erstellen eines Website-Tutorials. Ich hoffe du genießt es.

Dinge, die du brauchst:

  • Hosting. Ich empfehle SiteGround.
  • EIN Domainname.
  • WordPress Theme. Für dieses Tutorial verwenden wir das kostenlose Astra-Theme.
  • WordPress Page Builder. Dafür verwenden wir den kostenlosen Elementor-Seitenersteller.

Lass uns anfangen!

Schritt 1: Kaufen Sie ein Webhosting und einen Domainnamen.

Der wichtigste Teil Ihrer Unternehmenswebsite ist das Hosting. Das Hosting bestimmt, wie schnell Ihre Website geladen wird. Dies ist ein sehr wichtiger Faktor, der sich auf die Lead-Generierung und -Konvertierung auswirkt. Google bevorzugt auch schnellere Websites mit niedrigen Absprungraten, sodass eine schnellere Website Ihre Chancen auf ein Ranking bei Google erhöht.

Eine Sache, auf die ich hinweisen möchte, ist, EIG- und GoDaddy-Unternehmen so weit wie möglich zu meiden. EIG steht für Endurance International Group und kontrolliert über 60 Hosting-Unternehmen. Es entlässt seine internen Support-Mitarbeiter und fasst alles unter einem Dach zusammen. Was passiert, ist der Kundensupport, die Qualität des Hostings und die allgemeine Servicequalität.

Hier einige der bekanntesten EIG-Unternehmen:

  • Hostgator
  • BlueHost
  • iPage
  • Arvixe
  • Fette Kuh
  • HostMonster Small Orange

GoDaddy hat auch viele schlechte Bewertungen in Bezug auf Qualität und Kundenservice, und die Websites, die sie hosten, werden nur sehr langsam geladen.

Sie sollten auch “Mom and Pop” -Hosts vermeiden, da ihnen die Ressourcen fehlen, um fortschrittliche Hosting-Technologien zu verwenden, die Ihrer Website einen Vorteil verschaffen.

Sie möchten auch ein Hosting auswählen, das kostenlose SSL-Zertifikate bietet. Ohne ein SSL-Zertifikat hat Ihre Website oben das hässliche Etikett „Nicht sicher“:

nicht sicher

Wenn Sie ein Unternehmen sind, können Sie sich mit diesem Label praktisch von potenziellen Kunden verabschieden. Wenn Ihr Hosting keine kostenlosen SSL-Zertifikate bereitstellt, kann ein SSL-Zertifikat 50 bis 100 US-Dollar pro Jahr kosten pro Website.

Sie möchten auch einen Dienst, mit dem Sie ein Upgrade auf PHP7 durchführen können, wodurch Ihre Website erheblich schneller wird.

Siteground, mein bevorzugter Webhosting-Dienst

Ein Hosting-Service, den ich gefunden habe und der alle diese Kriterien erfüllt, ist SiteGround. SiteGround bietet ein kostenloses SSL-Zertifikat, ermöglicht Ihnen ein Upgrade auf PHP7, bietet qualitativ hochwertiges Hosting und einen hervorragenden Kundensupport. Es ist wirklich das Beste da draußen.

Hier sind die wichtigsten Funktionen von SiteGround:

  • Kostenloses SSL-Zertifikat
  • SCHNELLER sachkundiger Support
  • WordPress-Staging-Umgebung
  • Kostenlose Website-Migrationen
  • 30 Tage Backups

Ich habe mit ihnen einen tollen Deal gemacht, um jedem, der sich mit anmeldet, einen Rabatt von 70% zu gewähren dieser Link. Also, wenn Sie Geld für Ihr Hosting sparen möchten, Klicken Sie auf diesen Link und kaufen Sie jetzt Ihr Hosting.

So kaufen Sie Ihr Hosting bei SiteGround, Klicken Sie auf diesen Link. Sobald Sie auf ihrer Homepage landen, sehen Sie vier verschiedene Arten von Hosting:

Wählen Sie einen Siteground-Plan

Wählen Sie WordPress-Hosting und klicken Sie auf Loslegen. Sie sehen dann drei Preispläne:

Siteground WordPress Hosting Preise

Wählen Sie eine nach Ihren Bedürfnissen und Ihrem Budget. Sie können auch ihre überprüfen Vergleich jedes Hosting-Plans um entscheiden zu können, welches Ihren geschäftlichen Anforderungen entspricht.

Wenn Sie einen Plan ausgewählt haben, klicken Sie auf Plan erhalten. Sie werden dann zum nächsten Schritt weitergeleitet, bei dem Sie eine Domain auswählen. Wenn Sie bereits einen Domainnamen haben, wählen Sie “Ich habe bereits eine Domain”. Wenn Sie jedoch keine haben, wählen Sie “Registriere eine neue Domain” So können Sie eine Domain direkt in SiteGround kaufen. Dies kostet 15,95 USD pro Jahr.

Wählen Sie eine Domain

Beachten Sie, dass SiteGround Sie informiert, wenn der Domain-Name, den Sie erwerben möchten, nicht mehr verfügbar ist und Sie einen anderen auswählen müssen. Sobald Sie einen Domainnamen haben, klicken Sie auf Vorgehen.

Der nächste Schritt, um Ihren Kauf abzuschließen, ist die Angabe Ihrer genauen persönlichen Daten und Rechnungsdaten. Klicken Sie anschließend auf Zahlen Sie jetzt. Sie haben jetzt ein zuverlässiges Webhosting und einen Domainnamen.

Schritt 2: Installieren Sie WordPress.

WordPress ist das Tool zum Erstellen von Websites, mit dem wir Ihre Unternehmenswebsite erstellen. Es ist völlig kostenlos, sehr einfach zu bedienen und dennoch sehr leistungsfähig. Es enthält Tausende von Plugins und Themes, mit denen Sie mit Ihrer Website machen können, was Sie wollen.

SiteGround wird mit einer Ein-Klick-WordPress-Installation geliefert, mit der WordPress schnell für Sie installiert werden kann.

Sobald Sie Ihren Hosting-Kauf abgeschlossen haben, wird ein Bildschirm mit einem Link angezeigt “Weiter zum Kundenbereich”. Klicken Sie darauf und Sie werden zu einer Seite weitergeleitet, auf der Sie Ihr neues Hosting-Konto einrichten können. Unter Richten Sie Ihre Website ein, wählen Starten Sie eine neue Website.

Sie sehen dann eine Liste der Software, die Sie installieren können. Wählen WordPress.

Installieren Sie WordPress

Um den Vorgang abzuschließen, müssen Sie die Administrator-Anmeldedaten (E-Mail-Adresse, Benutzername und Passwort) für Ihre Website angeben. Dies sind die Details, die Sie für den Zugriff auf das Backend Ihrer Website verwenden. Bewahren Sie sie daher sicher auf.

Klicken Sie anschließend auf Bestätigen > Schließen Sie das Setup ab. Und Sie haben jetzt eine live gehostete WordPress-Website.

Schritt 3: Installieren Sie das SSL-Zertifikat.

Bevor Sie etwas anderes tun, möchte ich Ihnen zunächst zeigen, wie Sie ein SSL-Zertifikat installieren, um das zuvor gezeigte Not Secure-Label zu entfernen. Unter Meine Accounts, klicken Geh zum cPanel.

gehe zu cpanel

In CPanel können Sie verschiedene Software und Tools für Ihre Website installieren. Wenn Sie ganz nach unten scrollen, sollte ein Abschnitt mit dem Namen angezeigt werden Sicherheit. Klicken Sie in diesem Abschnitt auf Verschlüsseln wir.

lässt uns verschlüsseln

Wählen Sie die Domäne aus, auf der Sie das SSL-Zertifikat installieren möchten, und wählen Sie Verschlüsseln wir SSL, und klicken Sie auf Installieren.

Jetzt ist es Zeit, sich auf Ihrer neuen Website anzumelden. Klicken Meine Accounts wieder oben und klicken Sie auf Installationen Tab. Hier sehen Sie den Domainnamen, den Sie registriert haben. Dahinter ist ein Grün Gehen Sie zum Admin-Portal Taste. Klicken Sie auf diese Schaltfläche, um zu Ihrer WordPress-Anmeldeseite zu gelangen.

Gehen Sie zum WordPress Admin Dashboard

WordPress-Anmeldeseiten folgen normalerweise den folgenden Formaten: yourdomain.com/wp-admin und yourdomain.com/wp-login. Ihre könnte anders sein. Sie müssen sich jedoch die URL Ihrer Anmeldeseite merken oder notieren, damit Sie beim nächsten Mal darauf zugreifen können, indem Sie die URL direkt in Ihre Adressleiste eingeben und sich nicht mehr bei Siteground anmelden müssen.

Die WordPress-Anmeldeseite sieht folgendermaßen aus:

WordPress-Anmeldeseite

Geben Sie hier Ihren Benutzernamen und Ihr Passwort ein, um sich zum ersten Mal auf Ihrer Website anzumelden.

Sobald Sie drinnen sind, müssen Sie WordPress als Erstes mitteilen, dass Sie über ein SSL-Zertifikat verfügen. Dies ist ganz einfach zu tun.

Gehen Sie in der linken Seitenleiste zu die Einstellungen > Allgemeines. Auf dem Bildschirm werden zwei Felder mit Ihrem Domainnamen angezeigt: WordPress-Adresse (URL) und Site-Adresse (URL). Sie müssen den Buchstaben “s” nach “http” und vor dem Doppelpunkt “:” für beide Felder eingeben.

Hinzufügen eines SSL-Zertifikats in WordPress

Wenn Sie fertig sind, klicken Sie auf Änderungen speichern. Ihre Website sollte jetzt ein Vorhängeschlosssymbol direkt neben dem Domainnamen haben:

gesicherte Website mit https

Als letztes müssen wir für das SSL-Zertifikat sicherstellen, dass Personen, die “http” in ihre Adresse eingeben, zu Ihrer “https” -URL weitergeleitet werden. Dafür brauchen wir ein Plugin.

Um ein Plugin zu installieren, gehen Sie zu Plugins > Neue hinzufügen. Suchen Sie in der Suchleiste oben rechts nach dem Plugin Wirklich einfaches SSL. Installieren und aktivieren Sie es.

installiere wirklich einfache ssl

Diese Popup-Meldung wird dann in Ihrem Dashboard angezeigt:

aktiviere wirklich einfache ssl

Klicken Sie auf das Blau Aktivieren Sie SSL! Taste. Sie werden abgemeldet und sobald Sie sich wieder angemeldet haben, ist das Really Simple SSL-Plugin voll wirksam.

Schritt 4: Installieren Sie Astra Theme und Astra Sites.

Für eine Unternehmenswebsite möchten Sie ein Thema mit einem sauberen Code und flexiblen Funktionen, um die Anpassung so einfach und schnell wie möglich zu gestalten. Es gibt viele hochwertige WordPress-Themes, aber das Thema, das wir hier verwenden werden, ist das Astra-Theme.

Astra Theme ist ein kostenloses WordPress-Theme mit ausgezeichneter Geschwindigkeit und Einfachheit. Was mir am besten gefällt, ist, dass es sich selbst basierend auf den Tools konfiguriert, die Sie benötigen, und dies erleichtert Ihnen die Arbeit. Es gibt auch eine Pro-Version, wenn Sie auf Premium-Funktionen zugreifen möchten.

Astra Thema

Hier sind die Funktionen, die ich an Astra am meisten liebe:

  • Eines der schnellsten verfügbaren Themen
  • Über 100 Starter-Sites (die meisten sind 100% kostenlos)
  • Flexible Mega-Menüfunktion
  • Leistungsstarkes Zusatzpaket
  • Umfangreiche WooCommerce-Unterstützung

Um Astra zu installieren, gehen Sie zu Aussehen > Thema > Neue hinzufügen. Suchen Sie nach Astra, klicken Sie auf Installieren, und aktivieren Sie.

astra installieren

Eine weitere großartige Sache bei Astra ist die Tatsache, dass es ein Plugin namens gibt Astra Starter Sites. Dieses Plugin verfügt über eine Bibliothek vorgefertigter kostenloser und Premium-Vorlagen, die Sie mit nur wenigen Klicks auf Ihrer eigenen Website verwenden können. Wir verwenden eine Astra-Site-Vorlage, um die Erstellungszeit unserer Website zu halbieren.

Nach der Installation von Astra wird folgende Meldung in Ihrem Dashboard angezeigt:

Beginnen Sie mit der Astra-Site

Klicken Loslegen. Dadurch werden Astra Starter Sites für Sie installiert. Sie können Astra Sites auch unter installieren Plugins > Neue hinzufügen. Suchen nach Astra Sites und installieren und aktivieren Sie es. Um auf Astra Sites zuzugreifen, gehen Sie zu Auftritte >Astra Starter Sites.

Auswählen Ihres Page Builder

Nach der Installation von Astra Sites werden Sie gefragt, welchen Seitenersteller Sie bevorzugen: Gutenberg, Elementor, Beaver Builder oder Brizy. In diesem Tutorial werde ich Elementor verwenden.

Elementor ist ein WordPress-Seitenersteller, der die Seitenerstellung auf ein neues Niveau gebracht hat. Es verfügt über umfangreiche Funktionen, ist jedoch sehr einfach zu bedienen und zu beherrschen. Die kostenlose Version reicht aus, um eine anständige Webseite zu erstellen. Wenn Sie jedoch erweiterte Funktionen wie das Hinzufügen von Kontaktformularen, Schiebereglern, Preistabellen und mehr wünschen, können Sie auf die Pro-Version aktualisieren.

Auswählen Ihres Astra-Site-Themas

Sobald Sie Ihren Seitenersteller ausgewählt haben, werden Sie zur Bibliothek der Astra Sites-Vorlagen weitergeleitet. Es gibt unzählige elegante, professionell aussehende Vorlagen – sowohl kostenlos als auch Premium -, aus denen Sie auswählen können. Die Vorlagen sind in die folgenden Kategorien unterteilt: Blog, Business, E-Commerce, Kostenlos und Andere. Da Sie eine Unternehmenswebsite erstellen, ist es am besten, in der zu stöbern Geschäft Sektion.

Nehmen Sie sich Zeit für die Auswahl der Vorlage, die Ihrer Meinung nach am besten zu Ihrer Marke passt. Diese Vorlagen können mit dem von Ihnen ausgewählten Seitenersteller vollständig bearbeitet werden. Dies bedeutet, dass Sie Text, Bilder, Layout, Schaltflächen und im Grunde alles auf der Seite einfach ändern können.

Für dieses Tutorial werde ich das verwenden Buchhalter Vorlage, weil es erstaunlich und augenschonend aussieht.

Um ein Thema zu installieren, müssen Sie nur darauf klicken, um zur Vorschau zu gelangen. Wenn Ihnen das gefällt, was Sie sehen, klicken Sie auf Thema importieren Klicken Sie auf die Schaltfläche und stellen Sie sicher, dass alle Kontrollkästchen aktiviert sind.

Boxen Astra Sites Thema

Wenn Sie es bemerken, gibt es eine Box mit der Aufschrift “Installation erfordert Plugins”. Wenn Sie dieses Kontrollkästchen aktivieren, werden alle erforderlichen Plugins installiert, damit das Thema genau so aussieht, wie es ist. Für dieses Thema wurden WPForms Lite, ein Plugin, mit dem Sie einfache Kontaktformulare erstellen können, und Elementor, den von mir verwendeten Seitenersteller, installiert. Sie können auf das kleine Fragezeichen daneben klicken, um zu sehen, welche Plugins installiert werden.

WPForms ist ein Plugin, mit dem Sie durch effektive Formulare qualitativ hochwertige Leads für Ihr Unternehmen erhalten können. Sie können meine WPForms-Rezension lesen, um mehr darüber zu erfahren. Wenn Sie ein anderes Formular-Plugin verwenden möchten, können Sie WPForms in einfach deaktivieren / löschen Plugins > Installierte Plugins und installieren Sie Ihren bevorzugten Form Builder.

Installieren des Astra-Site-Themas

Das Importieren des Themas kann eine Weile dauern. Schließen Sie Ihren Browser nicht und klicken Sie nicht auf “Aktualisieren”. Warten Sie ab und wenn es fertig ist, sehen Sie ein Blau Site anzeigen Taste. Klicken Sie auf diese Schaltfläche, um zu Ihrer Website zu gelangen, die jetzt das gerade importierte Thema enthält.

Schritt 5. Designelemente auswählen.

Ihre Website sieht jetzt umwerfend aus, aber Sie möchten sie zu Ihrer eigenen machen. Dazu benötigen Sie ein eigenes Farbschema, eine eigene Typografie und ein eigenes Logo.

Beginnen wir mit Ihrer Farbpalette. Wenn Sie bereits Ihre Markenfarbe haben, wird dies einfacher.

Farbpalette auswählen

Eine Website hat normalerweise 2-3 Farben: Primär-, Akzent- und Pop-Farbe. Das Primärfarbe ist die dominierende Farbe Ihrer Website und höchstwahrscheinlich Ihre Markenfarbe. Dies ist die Farbe, mit der sich die Leute an Ihre Marke erinnern sollen.

Bei der Auswahl Ihrer Primärfarbe müssen Sie die Farbpsychologie untersuchen oder untersuchen, wie Farben die Wahrnehmung oder das Verhalten von Menschen beeinflussen. Bestimmte Farben lassen Menschen etwas fühlen, z. Rot macht sie besorgt, daher müssen Sie diese Dinge bei der Auswahl Ihrer Primärfarbe berücksichtigen.

Das Akzentfarbe wird normalerweise verwendet, um bestimmte Elemente wie Überschriften oder Post-Titel hervorzuheben.

Schließlich die Pop Farbe Im Gegensatz zu den anderen Farben werden wichtige Elemente der Website hervorgehoben, z. B. Handlungsaufforderungstasten oder Formulare zur Lead-Generierung.

Es gibt zwei Werkzeuge, die ich gerne bei der Auswahl einer Farbpalette verwende. Der erste ist Coolors.co, Eine Website, auf der Sie verschiedene Farbpaletten durchsuchen können, um Ideen oder Inspirationen zu erhalten. Wenn Sie etwas sehen, das Ihnen gefällt, können Sie den Hex-Code schnell kopieren, um ihn in WordPress zu verwenden.

Wenn Sie klicken Erkunden Auf der Überschrift sehen Sie diese riesige Sammlung von Paletten:

Farbpaletten für Kühler

Wenn Sie eine Palette sehen, die Ihnen gefällt, bewegen Sie die Maus darüber und klicken Sie auf Aussicht, und Sie werden zu einem neuen Fenster weitergeleitet, in dem Sie die Hex-Codes jeder Farbe sehen.

Hex-Codes von Farbpaletten

Diese Hex-Codes sind genau das, was Sie benötigen, um diese Farben auf Ihrer Website zu verwenden. Später werde ich Ihnen zeigen, wie Sie diese Hex-Codes im WordPress-Backend verwenden.

Ein weiteres cooles Tool ist Colorzilla. Dies ist eine Google Chrome-Erweiterung, mit der Sie den Hex-Code jeder Farbe, die Sie auf einer Website sehen, erhalten, indem Sie einfach darauf klicken.

Wenn Sie die Colorzilla-Erweiterung erhalten möchten, Klicke hier. Dann klick Zu Chrome hinzufügen.

colorzilla

Sie sehen dann dieses Symbol in Ihrer Symbolleiste:

Colorzilla-Symbol

Wenn Sie nun den Hex-Code einer Farbe kennen möchten, die Sie auf einer Website gesehen haben, klicken Sie einfach auf dieses Symbol und dann auf die Farbe, die Sie kopieren möchten. Der Hex-Code wird dann automatisch kopiert. Sie können diesen Hex-Code in bestimmten Bereichen in WordPress einfügen.

Typografie anpassen

Sie möchten auch Ihre eigene Typografie verwenden, die Ihrer Markenidentität entspricht und Ihre Website hervorhebt. Websites haben normalerweise 2-3 Schriftarten. Genau wie bei Farben haben Sie eine primäre Schriftart Das sind Schriftarten für Überschriften oder Menü. Sie brauchen auch eine Körperschrift für Absätze von Texten und auch ein zusätzliches “Pop-Schriftart”, Um einige Texte hervorzuheben.

Wie bei Farben benötigen Sie eine Typografie, die Ihrer Marke treu bleibt, für die Augen angenehm aussieht und die richtige Botschaft über Ihre Marke aussendet.

Eines meiner Lieblingswerkzeuge bei der Auswahl der Typografie ist Fontpair.co. Dies ist eine Website, die Ihnen zeigt, wie zwei verschiedene Schriftarten zusammen aussehen.

fontpair.co

Wenn Sie etwas sehen, das Ihnen gefällt, notieren Sie sich, wie es heißt, damit Sie es in WordPress suchen und auf Ihrer Website verwenden können.

Ich verwende auch gerne WhatFont, eine Google Chrome-Erweiterung, die Ihnen sagt, welche Schriftart auf einer Website verwendet wird, indem Sie einfach mit der Maus darüber fahren.

So installieren Sie WhatFont, Klicke hier dann klick Zu Chrome hinzufügen. Dann sehen Sie dieses Symbol in Ihrer Symbolleiste:

was auch immer

Um den Namen einer Schriftart zu erfahren, klicken Sie auf dieses Symbol und bewegen Sie den Mauszeiger über den Text. WhatFont teilt Ihnen den Namen dieser Schriftart mit. Wenn Sie darauf klicken, werden auch Schriftgröße, Farbe, Familie, Stil, Gewicht und mehr angezeigt.

mit whatfont

Ein Logo bekommen

Schließlich benötigt Ihr Unternehmen ein schönes Logo, das darauf hinweist, worum es bei Ihrer Marke geht. Sie können hier drei verschiedene Routen wählen. Sie können Ihr Logo mit einem kostenlosen Tool namens erstellen Canva, Ein beliebtes Design-Tool, das das Entwerfen auch für Anfänger sehr einfach macht.

Sie werden überrascht sein, wie viele Logo-Vorlagen Canva hat, und alle sehen fantastisch aus. Sie können diese Vorlagen ändern, um sie zu Ihren eigenen zu machen.

Sie sollten jedoch wissen, dass Sie ein Upgrade auf Pro durchführen müssen, wenn Sie das Logo mit einem transparenten Hintergrund exportieren möchten. Es gibt jedoch eine einmonatige kostenlose Testversion. Sie können also ein Upgrade auf Pro durchführen, Ihr transparentes Logo exportieren und abbrechen, bevor die Testversion endet.

canva logos

Sie können auch einen Logo-Designer beauftragen, dies für Sie zu tun. Sie können Websites wie Fiverr.com oder 99design ausprobieren, aber Sie müssen vorsichtig sein, wenn Sie einen Künstler anhand seines Stils, seiner Erfolgsbilanz, seiner Bewertungen, Bewertungen und mehr auswählen.

Der dritte Weg und wahrscheinlich eine gute Idee, wenn Sie ein starkes Markenlogo wünschen, ist die Einstellung eines Designstrategen / -beraters. Menschen wie diese sind Profis, die sich die Zeit nehmen, um zu verstehen, worum es bei Ihrer Marke geht, wohin Ihr Unternehmen geht und was Ihre Grundwerte sind, damit sie dies in das Logo integrieren können.

Schritt 6. Passen Sie Ihre Website an.

Sobald Sie eine Farbpalette, Schriftarten und ein Logo für Ihre Website haben, können Sie diese jetzt auf Ihrer Website verwenden. Wenn Sie sich im WordPress-Backend-Dashboard befinden, gehen Sie zu Aussehen > Anpassen um den Theme Customizer zu öffnen.

Thema anpassen

Sie können auch hierher gehen, wenn Sie sich im Frontend Ihrer Website befinden. Am oberen Rand Ihres Bildschirms sollte sich ein schwarzer Balken befinden, der nur für diejenigen sichtbar ist, die auf Ihrer Website angemeldet sind. Klicken Anpassen um den Theme Customizer zu öffnen.

Theme-Frontend anpassen

Sobald Sie sich im Design-Customizer befinden, können Sie Ihr Logo hinzufügen, Farben ändern, das Site-Layout ändern und vieles mehr.

Theme Customizer

In der linken Seitenleiste sehen Sie verschiedene Optionen zum Ändern Ihrer Website. Jedes Thema verfügt über unterschiedliche Anpassungsoptionen. Wenn Sie also ein anderes Thema verwenden, unterscheidet sich das, was Sie hier sehen, möglicherweise ein wenig von meinem. Alle Änderungen, die Sie hier vornehmen, werden in Echtzeit auf Ihrer Website angezeigt.

Um die Farben Ihrer Website zu ändern, gehen Sie in diesem Thema zu Farben & Hintergrund. Sie haben die Möglichkeit, die Grundfarben, den Breadcrumb, die Kopf- und Fußzeile zu ändern.

Farbhintergrund-Editor

Die Grundfarben sind die Themenfarbe, Linkfarbe, Textfarbe und Linkhoverfarbe Ihrer Website. Klicken Sie auf, um die Grundfarben zu ändern Grundfarben. Im Inneren sehen Sie Schaltflächen mit der Aufschrift Wähle Farbe. Klicken Sie auf diese Schaltflächen, um eine bestimmte Farbe zu ändern.

Klicken Sie beispielsweise auf, um die Themenfarbe zu ändern Wähle Farbe daneben. Sie sehen dann zwei Möglichkeiten, eine Farbe auszuwählen. Zunächst können Sie einen Hex-Code in eine Box einfügen. Wenn Sie sich daran erinnern, worüber wir im vorherigen Schritt in Bezug auf Hex-Codes gesprochen haben, können Sie diese Felder in Felder wie diese eingeben.

Wenn Sie also eine Farbe in Coolors.co oder an einer anderen Stelle gefunden haben, können Sie den Hex-Code hier einfügen. Sie können eine Farbe auch in einem integrierten Farbauswahlwerkzeug auswählen.

Grundfarben-Editor

Als nächstes ändern Sie Ihre Typografie. Kehren Sie zum Customizer zurück, indem Sie auf den Zurückpfeil oben in der Seitenleiste klicken und auf klicken Typografie. Sie können die Basis-, Breadcrumb-, Inhalts- und Blog-Typografie ändern.

Typografie

Um Ihr Logo hochzuladen, gehen Sie zu Layout > Header > Site-Identität. Klicken Sie im Bereich Logo auf Logo ändern Schaltfläche und laden Sie Ihr Logo hoch.

Logo ändern

Mit Astra können Sie auch ein anderes Logo für Netzhaut- oder hochauflösende Geräte sowie für mobile Geräte verwenden. Sie können auch die Breite des Logos anpassen. Wenn Sie nach unten scrollen, können Sie auch Ihren Site-Titel ändern, einen Site-Slogan sowie ein Site-Symbol oder ein Favicon hinzufügen.

Ich schlage vor, dass Sie den Theme Customizer erkunden, um die verschiedenen Dinge zu sehen, die Sie hier tun können. Mit Astra Theme können Sie das Layout Ihrer Kopf- und Fußzeile ändern, die Struktur von Blog-Posts ändern, die Breite Ihrer Website ändern und vieles mehr.

Vergessen Sie nach dem Anpassen nicht, auf zu klicken Veröffentlichen Damit Ihre Änderungen auf Ihrer Website live geschaltet werden.

Schritt 7. Anpassen Ihrer Website mit Elementor.

Nachdem die Farben, die Typografie und das Logo Ihrer Website festgelegt wurden, ist es an der Zeit, in Elementor einzusteigen und das Erscheinungsbild der Website vollständig zu ändern, damit sie zu Ihrer Marke passt. Wir werden die Bilder, Texte, Schaltflächen, das Layout und vieles mehr ändern.

Es gibt zwei Möglichkeiten, eine Seite mit Elementor zu bearbeiten. Wenn Sie sich im Backend befinden, gehen Sie zunächst zu Seiten und Sie sollten eine Liste aller Seiten Ihrer Website sehen. Dies schließt die Seiten ein, die Astra Site automatisch erstellt hat. Seiten, die mit einem bestimmten Seitenersteller (z. B. Elementor) erstellt wurden, werden als solche gekennzeichnet:

Seiten

Bewegen Sie die Maus über die Seite, die Sie mit Elementor bearbeiten möchten, und klicken Sie auf Mit Elementor bearbeiten.

Bearbeiten mit Element oder Backend

Das bringt dich in Elementor.

Wenn Sie sich im Frontend Ihrer Website befinden, können Sie Elementor aufrufen, indem Sie auf die Seite gehen, die Sie bearbeiten möchten, und auf klicken Mit Elementor bearbeiten auf dem schwarzen Balken oben:

Bearbeiten mit Elementor Frontend

Die Elementor-Oberfläche ist einfach zu verstehen und gewöhnungsbedürftig, da sie dem Theme-Customizer ziemlich ähnlich ist. Der Großteil des Bildschirms zeigt die Seite, die Sie bearbeiten, während sich links eine Seitenleiste mit den Steuerelementen und Optionen befindet.

Elementor

Wenn Sie es bemerkt haben, ist der Header in Elementor nicht sichtbar. Der Grund dafür ist, dass die kostenlose Version von Elementor keine Kopf- und Fußzeilen bearbeiten kann. Diese Funktion steht nur Elementor Pro zur Verfügung.

In der linken Seitenleiste finden Sie die Elemente die Sie Ihrer Seite hinzufügen können. Wie Sie sehen können, können Sie eine Überschrift, ein Bild, ein Video, eine Schaltfläche, einen Teiler und mehr hinzufügen. Sie können diese Elemente hinzufügen, indem Sie sie in den gewünschten Bereich ziehen und dort ablegen.

Elementor ermöglicht auch die Inline-Textbearbeitung, sodass Sie den Text im Inhaltsbereich selbst ändern können. Hier sind einige der Dinge, die Sie mit Texten in Elementor tun können:

Bearbeiten von Text in Elementor

Wie Sie sehen können, können Sie den Text direkt im Inhaltsbereich bearbeiten oder löschen, was die Arbeit erheblich vereinfacht. In der Seitenleiste finden Sie weitere Anpassungsoptionen wie das Ändern von Größe, Farbe, Gewicht, Typografiefamilie und Schatten. Sie können auch Animationen wie einfaches Überblenden, Zoomen, Bouncen und mehr hinzufügen.

Sie möchten auch Ihre eigenen Bilder verwenden, um diese Website vollständig zu Ihrer eigenen zu machen. Sie können ein Bild einfach ersetzen oder entfernen, wenn Sie dies möchten. Um ein Bild anzupassen, klicken Sie einfach darauf und die Optionen werden in der linken Seitenleiste angezeigt. Sie können ein neues Bild hochladen, seine Größe ändern, einen Rahmen oder Schatten hinzufügen, eine Animation hinzufügen und vieles mehr.

Bild in Elementor bearbeiten

Für meine Website möchte ich dieses Bild vollständig entfernen und nur ein anderes Hintergrundbild verwenden. Um ein Bild zu löschen, bewegen Sie die Maus darüber und klicken Sie mit der rechten Maustaste auf blaues Stiftsymbol in der oberen rechten Ecke. Ein Popup-Menü wird angezeigt. Klicken Löschen um das Bild zu entfernen.

Löschen eines Bildes in elementor

Um die Überschrift anzupassen, bewegen Sie die Maus darüber und klicken Sie auf das gepunktete Symbol oben:

Überschrift in Elementor anpassen

Die Anpassungsoptionen für die Überschrift werden dann in der linken Seitenleiste angezeigt. Klicken Sie auf, um das Hintergrundbild Ihrer Überschrift zu ändern Stil und geh zu Hintergrund. Hier können Sie einen neuen Hintergrund hochladen.

Anpassen der Überschrift

Wie Sie sehen können, habe ich nach dem Hochladen des Bildes die Hintergrundüberlagerung angepasst, um sicherzustellen, dass das Bild klar sichtbar ist. Ich habe das getan, indem ich zu gegangen bin Hintergrundüberlagerung und Anpassen der Deckkraft.

Ich habe auch die Farbe des Textes angepasst, um sicherzustellen, dass er sichtbar ist, und die Breite des Textes so angepasst, dass er sich nicht mit dem Bild überschneidet. Ich habe das getan, indem ich zu gegangen bin Erweitert > Benutzerdefinierte Positionierung und auswählen Benutzerdefiniert für die Breite.

Mit Elementor ist es so einfach, eine beeindruckende Webseite zu erstellen. Es stehen einfach so viele Optionen zur Verfügung, dass es nur darum geht, jeden Winkel zu erkunden. Sie können es in Ihrem eigenen Tempo erkunden. Wenn Sie etwas nicht verstehen, können Sie mich über den Kommentarbereich unten erreichen oder sogar nach dem umfassenden Elementor suchen Wissensbasis.

Ich habe auch ein Elementor-Tutorial, in dem ich Ihnen zeige, wie Sie schnell mit Elementor beginnen können. Sie können es sehen Hier.

Schritt 8. Sichern Sie Ihre Website.

Es ist auch wichtig, dass eine Unternehmenswebsite so sicher wie möglich vor möglichen Hacking- und Identitätsdiebstahlprogrammen ist. Tatsache ist, dass einige von Ihnen aufgrund schwacher Passwörter, Plugin-Schwachstellen und veralteter Software möglicherweise anfällig für Cyberangriffe sind. Diese Dinge hinterlassen ein Loch in Ihrer Website, und Sie müssen einen Weg finden, diese Löcher zu blockieren.

Das beste WordPress-Plugin, das ich bisher gefunden habe, ist iThemes Security. Die kostenlose Version dieses Plugins bietet Ihnen bereits starke Sicherheitsfunktionen und Sie können es mit nur einem Klick aktivieren.

Um iThemes Security zu installieren, gehen Sie zu Plugins > Neue hinzufügen dann suchen nach iThemes Sicherheit.

ithemes installieren

Sobald es aktiviert ist, wird in der Seitenleiste eine neue Option mit dem Namen angezeigt Sicherheit. Gehe zu Sicherheit > die Einstellungen und Sie sollten eine Nachricht über die verschiedenen Funktionen sehen, die iThemes für Sie tun kann.

sichere Site-Elemente

Das Aktivieren all dieser Funktionen erfordert nur einen Klick auf das Blau Sichere Site Taste. Sobald Sie auf diese Schaltfläche klicken, wird folgende Meldung angezeigt:

Aktivieren Sie den Brute-Force-Schutz des Netzwerks

Der Network Brute Force Protection ist eine Funktion, bei der Benutzern, die versucht haben, in andere Websites einzudringen, die Mitglieder dieses Netzwerks sind, automatisch der Zugriff auf Ihre Websites untersagt wird. Dies ist eine ziemlich gute Funktion, die nur iThemes bietet. Um dies zu aktivieren, geben Sie einfach Ihre E-Mail-Adresse an und klicken Sie auf Aktivieren Sie den Network Brute Force-Schutz.

Mit nur wenigen Klicks ist Ihre Website jetzt sicher. Mit diesem Plugin können Sie noch viel mehr tun. Wenn Sie mehr darüber erfahren möchten, können Sie sich mein Tutorial zur Überprüfung und Einrichtung von iThemes Security ansehen Hier.

Schritt 9. Sichern Sie Ihre Website.

Sie müssen auch Ihre Website sichern, um sich vor dem möglichen unglücklichen Ereignis des Verlusts Ihrer Daten zu schützen. Dafür werden wir verwenden UpdraftPlus Backup.

Um dieses Plugin zu installieren, gehen Sie zu Plugins > Neue hinzufügen und suchen nach UpdraftPlus Backup. Installieren und aktivieren Sie es.

installupupplus installieren

Sobald es aktiviert ist, wird eine neue Option unter erstellt die Einstellungen namens UpdraftPlus-Backups. Klicken Sie darauf, um die Konfiguration Ihrer Sicherungseinstellungen zu starten.

updraftplus-Backups in den Einstellungen

Sobald Sie drinnen sind, klicken Sie auf die Einstellungen. Hier richten wir es so ein, dass regelmäßig automatische Backups außerhalb des Standorts durchgeführt werden. Für die Zeitplan für die Dateisicherung, Ich empfehle es einzustellen wöchentlich und behalten eines Backup. Dateien ändern sich nicht oft, das ist also gut genug.

Wie für die Zeitplan für die Datenbanksicherung, da sich dies häufig ändert, setzen Sie es auf Täglich und 7 Backups behalten.

Scrollen Sie nach dem Festlegen der Zeitpläne nach unten und drücken Sie Änderungen speichern. Scrollen Sie dann erneut nach oben, um auszuwählen, wo Sie Ihre Backups speichern möchten. Normalerweise empfehle ich Dropbox, weil es sehr einfach zu bedienen ist, aber Sie können alles und so viele verwenden, wie Sie möchten.

Einrichten von Updraftplus-Sicherungen

Klicken Sie auf Ihren bevorzugten Remotespeicher und dann auf Änderungen speichern nochmal. Sie sehen dann diese Nachricht:

Remote-Speicherauthentifizierung

Sie müssen auf diesen Link klicken, um UpdraftPlus-Sicherungen zum Speichern von Sicherungen in Ihrem ausgewählten Speicher zu autorisieren. In diesem Beispiel führt mich das Klicken auf diesen Link zur Dropbox-Anmeldeseite, da ich Dropbox ausgewählt habe. Sobald ich mich anmelde, wird folgende Meldung angezeigt:

Vervollständigen Sie die Setup-Upgrades

Ich muss nur klicken Komplette Einrichtung, und ich werde mit dieser Bestätigungsmeldung oben zum UpdraftsPlus-Backend in WordPress zurückgeführt:

Authentifizierung abgeschlossen Updraftplus

Wenn ich ein Backup erstellen wollte, muss ich nur auf das Blau klicken Jetzt sichern Taste. UpdraftPlus erstellt auch Backups gemäß dem zuvor erstellten Zeitplan und überträgt diese in DropBox.

Wenn Sie ein Backup wiederherstellen möchten, klicken Sie einfach auf Bestehende Backups und klicken Sie auf Wiederherstellen.

Schritt 10. Optimieren Sie Ihre Website.

Wir sind beim letzten Schritt angelangt. In diesem Schritt erfahren Sie, wie Sie Ihre Website für Suchmaschinen wie Google optimieren können. Ich bin sicher, die meisten von Ihnen haben bereits von SEO oder Suchmaschinenoptimierung gehört. Kurz gesagt, es ist die Praxis, sicherzustellen, dass Ihre Website auf die richtige Weise optimiert wird, damit Suchmaschinen Ihre Seiten leichter finden und auf den Ergebnisseiten anzeigen können.

SEO hat einen Aspekt namens On-Page-SEO, Dies sind Praktiken, die Sie direkt in WordPress auf Ihrer Website implementieren können, um Suchmaschinen klar zu vermitteln, worum es bei Ihrer Website und Ihren Inhalten geht.

Dies sind einige bewährte SEO-Methoden auf der Seite, die Sie implementieren müssen:

  • Schreiben Sie einen Metatitel und eine Meta-Beschreibung für jede Seite und jeden Beitrag.
  • Fügen Sie Schlüsselwörter oder Schlüsselphrasen hinzu und verwenden Sie sie im gesamten Inhalt.
  • Fügen Sie ALT TXT für jedes Bild auf Ihrer Seite / Ihrem Beitrag hinzu.

Wenn Sie mit diesen Dingen nicht vertraut sind, ist das in Ordnung. Sie sind ziemlich einfach zu lernen. Der Metatitel ist der Titel, der in den Google-Ergebnissen angezeigt wird, und die Metabeschreibung ist die Kurzbeschreibung unter dem Titel. Hier ein Beispiel:

Beispiel für ein Google-Suchergebnis

Das Schlüsselwort ist das, was Benutzer in die Suchmaschine eingeben, um nach etwas zu suchen. Der Metatitel ist der Titel des Ergebnisses, und die Metabeschreibung ist die folgende Kurzbeschreibung. Dies sind wichtige Details, da sie Google mitteilen, worum es auf der Seite geht und dass sie für den Schlüsselbegriff “Salon New York” relevant sind..

Dies ist eine kurze Liste von On-Page-SEO-Techniken, da Sie hier buchstäblich so viel tun. Aber jetzt werden wir uns auf diese konzentrieren.

Um diese Dinge zu tun, benötigen wir ein Plugin. Eines der besten On-Page-SEO-WordPress-Plugins ist Yoast SEO. Das werden wir in diesem Tutorial verwenden. Um dieses Plugin zu installieren, gehen Sie einfach zu Plugins > Neue hinzufügen und suchen nach Yoast SEO. Klicken Jetzt installieren und aktivieren Sie.

installiere yoast seo

Wenn Sie jetzt zu einer Seite oder einem Beitrag gehen, wird dieses neue Feld unter dem Editorbereich angezeigt:

Yoast SEO Box

Hier können Sie Ihren Metatitel, Ihre Metabeschreibung und Ihre Schlüsselwörter hinzufügen. Um ein Schlüsselwort hinzuzufügen, geben Sie es in das Feld unten ein Fokus-Schlüsselwort:

Fügen Sie ein Schlüsselwort hinzu

Klicken Sie auf, um einen Metatitel und eine Beschreibung hinzuzufügen Snippet bearbeiten Taste.

Snippet bearbeiten

Unter SEO-Titel sollten Sie Ihren Metatitel hinzufügen. Es wird empfohlen, hier Ihre Fokus-Schlüsselphrase anzugeben. Im Feld Meta-Beschreibung sollten Sie eine klare Vorstellung davon geben, worum es auf der Seite geht, und hier auch die Schlüsselphrase einfügen.

Wenn Sie etwas in das Feld SEO-Titel und Meta-Beschreibung eingeben, wird darunter ein orangefarbener Fortschrittsbalken angezeigt. Dies bedeutet, dass der Text immer noch zu kurz ist. Sobald es grün wird, bedeutet dies, dass die Länge Ihres Textes genau richtig ist. Wenn es rot wird, ist es zu lang und Sie sollten es kürzen. Lange Titel und Beschreibungen werden in den Ergebnissen abgeschnitten, daher ist es besser, im grünen Bereich zu bleiben.

Eine andere Sache, die Sie tun möchten, ist sicherzustellen, dass Ihre Sitemap aktiviert ist und tatsächlich funktioniert. Gehen Sie dazu zu Yoast SEO > Allgemeines > Eigenschaften. Scrollen Sie nach unten, bis Sie sehen XML-Sitemaps. Stellen Sie sicher, dass dies aktiviert ist, und klicken Sie dann auf das Blau Fragezeichen-Symbol. Sie sehen dann einen Link, der sagt Siehe die XML-Sitemap. Klicken Sie darauf, um Ihre Sitemap anzuzeigen.

Sitemaps aktivieren

Für viele von Ihnen führt dies möglicherweise zu einer 404-Seite. Aber ärgere dich nicht. Das Update ist ganz einfach. Alles was Sie tun müssen, ist zu gehen die Einstellungen > Permalinks. Wählen Anschriftname und getroffen Änderungen speichern.

Postname Permalink

Wenn Sie nun erneut versuchen, auf die XML-Sitemap zuzugreifen, wird Folgendes angezeigt:

XML-Sitemap

Einpacken

Und das schließt dieses Tutorial zum Erstellen einer Business-Website mit WordPress ab. Ich möchte Ihnen gerne auf die Schultern tippen, weil Sie so viel getan und so viel erreicht haben, indem Sie diesem Tutorial gefolgt sind. Wenn Sie Fragen haben, lassen Sie diese einfach unten im Kommentarbereich fallen und ich helfe Ihnen gerne weiter.

SiteGround

SiteGround ist ein sehr empfehlenswerter Webhost im Internet, da er sich an WordPress-Benutzer richtet und dennoch erschwingliche Preise bietet. Sie sind bekannt für ihre schnelle Leistung und ebenso schnelle Unterstützung.

Wichtige SiteGround-Funktionen:

  • Kostenloses SSL-Zertifikat
  • SCHNELLER sachkundiger Support
  • WordPress Staging-Umgebung
  • Kostenlose Website-Migrationen
  • Tägliche Backups

SiteGround ist eine gute Wahl für Ihre Webhosting-Anforderungen. Sie bedienen WordPress-Websites und bieten weniger Ressourcen als ihre Konkurrenten, aber eine höhere Zuverlässigkeit.

Überprüfen Sie SiteGround

Astra-Thema

Astra ist ein kostenloses WordPress-Theme, das sich auf Geschwindigkeit konzentriert. Optional können Sie die Pro-Version für 59 US-Dollar erwerben, die einige zusätzliche Einstellungen und Optionen enthält.

Hauptmerkmale des Astra-Themas:

  • Nicht das Thema Fasten, aber es ist kein Slouch
  • Viele kostenlose Demo-Sites
  • Flexible Mega-Menüfunktion
  • Benutzerdefinierte Layoutoptionen
  • WooCommerce-Unterstützung
  • LearnDash-Support

Astra Theme ist eine faire Wahl für jedes WordPress-Webdesign-Projekt. Ich nehme an, die größte Frage ist, ob Sie heutzutage überhaupt ein Thema kaufen müssen, da Seitenersteller genau die gleichen Dinge tun, für die Sie ein Thema benötigen würden. Zum Beispiel hat Elementor das kostenlose Hello-Design, mit dem Ihr Seitenersteller die ganze Arbeit erledigen kann.

Es gibt noch einige gute Gründe, ein Pro-Thema zu kaufen, aber für die meisten Menschen ist ein kostenloses Thema höchstwahrscheinlich in Ordnung.

Ich denke jedoch, dass Astra Theme nicht mit den aktuellen Trends Schritt gehalten hat und ich empfehle es nicht mehr.

Es gibt viel bessere moderne Themen, die integrierte Header- und Footer-Builder bieten, anstatt auf 3 Layouts beschränkt zu sein, sowie flexiblere Seiten- und Post-Layouts.

Schauen Sie sich das Astra-Thema an

Elementor

Elementor ist ein WordPress-Seitenersteller, der das WordPress-Webdesign im Sturm erobert hat. Es verfügt über die tiefsten Funktionen, ist jedoch sehr einfach zu bedienen und zu beherrschen. Elementor ist der umfassendste kostenlose Seitenersteller. Es gibt auch ein Pro-Add-On, um zusätzliche Entwicklerfunktionen hinzuzufügen.

Hauptmerkmale des Elements:

  • Live-Front-End-Seiteneditor
  • Funktionen zur Website-Personalisierung
  • Vorlagen- und Blockbibliothek
  • Umfangreiche mobile Reaktionsoptionen
  • Leistungsstärkster Popup Builder
  • PRO Erstellen Sie benutzerdefinierte Kopf- / Fußzeilen
  • PRO Post Type Layouts erstellen

Elementor ist der derzeit stärkste verfügbare Seitenersteller. Sie veröffentlichen ständig neue Funktionen, die den aktuellen Designtrends entsprechen. Dies bedeutet, dass Sie Ihre Website relevant halten können.

Elementor Pro ist ein unglaublicher Wert, wenn man alle zusätzlichen Module und Leistungsmerkmale berücksichtigt, die es enthält.

Wenn ich heute ein neues Website-Projekt starten würde, wäre Elementor der Seitenersteller, den ich auswählen würde. Ich halte es für ein Muss, einen WordPress-Seitenersteller zu haben, dessen Verwendung eine Freude ist.

Check Out Elementor

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map