Ich habe ein WordPress Elementor Theme gewählt. Wie geht es weiter?

Jan 07, 2020
46
0

Diese Frage stellt sich sicherlich jeder Anfänger, der dabei ist, eine eigene Website mit WordPress umzusetzen und schließlich eine passende Vorlage bei TemplateMonster gefunden hat. Obwohl der Kaufprozess eigentlich sehr einfach und verständlich ist, wissen viele Käufer nicht genau weiter. Jetzt möchte ich dir Schritt-für-Schritt zeigen, was hier zu tun ist. In diesem Beitrag gehe ich zudem auf die Installation und Anpassungsoptionen eines WordPress Elementor Themes ein. In meinem Tutorial verwende ich das WordPress Elementor Theme Monstroid2.

 

Inhaltsverzeichnis:

  1. Theme kaufen
  2. WordPress-Dashboard auf einen Blick
  3. Seiten mit Elementor erstellen und bearbeiten

 

 

Theme kaufen

 

Ich entscheide mich also für ein mehrzweckiges WordPress Elementor Theme - Monstroid2:

templatemonster marktplatz premium wordpress vorlagen

Auf der Produktseite klicke ich auf den Button Zur Kasse!:

zur kasse fortfahren und bezahlen

Anschließend werde ich auf die Warenkorbseite weitergeleitet, wo neben meinem Theme eine Reihe an empfohlenen Anpassungsservices angezeigt werden, und zwar DSGVO-Suite, Optimierung, SEO, Grafiken und andere. Solltest du etwas davon benötigen, dann kannst du diese zum Warenkorb hinzufügen, indem du neben einer Dienstleitung ein Häckchen setzt.

 

Solltest du einen Rabattcode haben, vergiss nicht diesen einzulösen, um ein Theme mit Nachlass zu kaufen:

templatemonster services kaufen popup

Da ich einen 100% Rabattcode für Monstroid2 habe, kann ich die Bezahlung überspringen. Ansonsten sollst du deine Telefonnummer und weitere erforderliche Daten in die Felder eingeben. Dann klickst du auf Jetzt bezahlen:

geben sie hier rabattcode und telefonnummer ein

Danach siehst du die folgende Nachricht:

momentan bereiten wir Ihr Produkt vor

Warte ein bisschen, danach prüfe deinen Email-Posteingang und klicke auf “Monstroid Theme Wizard herunterladen”, um das Installationsplugin zu downloaden:

bestellungsnummer templatemonster theme wizard herunterladen

Aber Achtung! Bei Monstroid2 sowie bei vielen anderen Themes mit der Feature “One-Klick-Installation” erfolgt die Installation automatisch. Du brauchst nur den Theme Wizard und die Bestellungsnummer.

 

Schritt #0:

Um deine WordPress Vorlage zu installieren, brauchst du ein WordPress-Hosting. Ich verwende checkdomain.de, den Hosting-Plan Pro 6.0. Nachdem ich die WordPress-App auswählt hatte, erhielt ich eine E-Mail mit Daten zur Anmeldung. Die sieht so aus:

wordpress checkdomain dateien anmelden

Installation 1

Schritt #1:

Rufe das WordPress-Dashboard auf und melde dich an. Um Dashboard zuzugreifen, füge /wp-admin zur Adresse deiner Webseite hinzu.

wordpress dashboard anmelden

Schritt #2:

Jetzt sollst du das Theme Wizard hochladen. Gehe auf Plugins >> Installieren >> Plugin hochladen. Danach wähle m2-theme-wizard.zip Datei und klicke auf Jetzt installieren:

plugins hinzufügen und theme wizard installieren

 

Schritt #3:

Nach der Installation klicke auf Plugin aktivieren:

plugin installation theme wizard

 

Schritt #4:

Um das Monstroid2 Theme verwenden zu können, gib deine Bestellungsnummer ein:

install theme wordpress dashboard

Die Bestellungsnummer findest du in der E-Mail oder hier :

 

templatemonster email bestellungsnummer findenODER

bestellungsnummer im warenkorb finden

 

Gib deine Bestellungsnummer in dieses Feld ein und klicke Start install an:

Schritt #5:

Nachdem dein Theme aktiviert wurde, kannst du zwischen entweder Parent theme oder Child theme auswählen. Ich wähle das Parent theme and klicke auf Continue:

parent oder child theme installieren

Schritt #6:

Jetzt stehen dir viele Skins zur Auswahl. Ich wähle den Monstroid2-Skin und klicke auf START INSTALL:

monstroid2 skinks mehrzweckige vorlage

 

Derzeit verfügt Monstroid2 über 60+ Skins für verschiedene Anwendungsbereiche:

monstroid2 alle skinks 2019

Schritt #7:

Dann wirst du auf die Seite weitergeleitet, wo du Plugins zur Installation auswählen kannst. Gesetzte Häkchen sollen bleiben, damit alle Funktionen aktiviert sind. Klicke einfach auf Next:

monstroid2 elementor jetplugins und plugins

 

Schritt #8:

Jetzt musst du dich entscheiden, ob du Demodaten installieren willst. Demodaten stellen Beispieltexte und Bilder dar, die dir eine bessere Vorstellung davon geben, wie deine zukünftige Website aussehen kann. Wenn es um eine neue Website geht, dann wähle die erste Option aus und klicke auf Next, damit deine Website nicht komplett leer ist. 

 

Achtung! Bei bestehenden Websites wird Demo Content deine aktuellen Inhalte ersetzen.

 

Wenn du bereits eine Website hast und nur die Gestaltung ändern willst, dann wähle die letzte Option aus und überspringe Demo content installation.

monstroid2 democontent beispieltext einfügen

 

Demodaten werden installiert:

monstroid2 unterlagen posts autor media kommentare

 

Schritt #9:

Nachdem dem Demodaten Installiert wurden, sollten die Thumbnails neu generiert werden:

thumbnails für die webseiten

 

Schritt #10:

Die Installation von Monstroid2-Theme war erfolgreich:

monstroid2 wurde erfolgreich installiert

Glückwunsch!

 

monstroid2 erste blick auf eigene webseite

 

Installation 2

 

Nachdem die Bestellung bestätigt wurde, findest du das Monstroid2-Theme in deinem Kundenkonto:

bestellung wordpress theme monstroid2herunterladen

Jetzt sollst du auf den Herunterladen-Button klicken, um das Theme zu downloaden:

wordpress theme namens monstroid2 herunterladen

 

Entpacke das Archiv. Drin findest du mehrere Ordner, die Theme-Dokumentation, Dateien für die manuelle Installation und das Theme-Wizard. Wir brauchen jetzt kein Theme-Wizard und installieren ein Theme manuell. Da ich Monstroid2 schon installiert habe, verwende ich ein anderes Theme. 

 

Schritt #1:

Jetzt sollst du das Theme hochladen. Gehe auf Design >> Themes >> Hinzufügen:

 

wordpress dashboard theme wechseln

 

Schritt #2:

Wähle theme.zip Datei und klicke auf Jetzt installieren:

 

wordpress neues team hinzufügen

 

Das Theme wurde erfolgreich installiert. Klicke auf Aktivieren:

wordpress dashboard theme installation

 

Fertig!

 

wordpress dashboard theme wechseln

 

WordPress-Dashboard auf einen Blick

 

Das WordPress Dashboard deiner neu erstellen Website wird so aussehen. Verirre dich nicht! 

 

Aktualisieren wir zuerst unsere Plugins, weil es Benachrichtigungen über Updates gibt! Klicke auf Start Update:

 

wordpress monstroid2 dashboard erste blick

 

Zögere nicht, jeden Menüpunkt des Dashboards zu öffnen, um dich mit allen verfügbaren Optionen vertraut zu machen!

 

Nehmen wir einige davon näher unter die Lupe:

  • Dashboard - Deine Homepage
  • Beiträge - Artikel und Neuigkeiten
  • Media - In der Medienbibliothek befinden sich alle Bilder und Videos, die auf der Website verwendet werden. Du kannst auch einige Einstellungen ändern, um .pdf, .txt, .docx u.a. Dateien hochzuladen
  • Seiten - Alle Seiten deiner Webseite
  • Kommentare - In diesem Abschnitt entdeckst du alle “Hallo” von Spammern.
  • Design - Das ist eine der wichtigsten Sektionen. Hier kannst du dein Theme bearbeiten und anpassen, Widgets erstellen sowie ein Menü ändern
  • Plugins - Hier kannst du Plugins installieren, deaktivieren und löschen. Es gibt drei mögliche Wege, um ein Plugin zu installieren:

 

1. Klicke auf installieren und lade ein neues Plugin hoch:

 

plugins hinzufügen wordpress dashboard

 

2. Suche nach einem Plugin im WordPress-Repository über das Suchfeld:

 

plugins suchen wordpress dashboard

 

3. Verwende FTP-Verbindung und FileZilla, um die Plugins direkt in den Plugins-Ordner hochzuladen, aber wer macht das schon?

 

  • Benutzer - Hier kannst du neue Benutzer anlegen, ihnen Rollen und Zugriffe zuweisen:

 

  1. Administrator hat einen Zugriff auf alle Verwaltungsfunktionen;
  2. Redakteur kann Beiträge veröffentlichen und verwalten, einschließlich der Beiträge anderer Benutzer;
  3. Autor kann seine eigenen Beiträge veröffentlichen und verwalten;
  4. Mitarbeiter kann seine eigenen Beiträge verfassen und verwalten (aber nicht veröffentlichen);
  5. Abonnent kann nur sein Profil verwalten.

 

  • Werkzeuge - Du kannst hier Plugins von Drittanbietern installieren und einrichten;
  • Einstellungen - Auf dieser Seite lassen sich wichtige Optionen deiner Webseite einstellen.

 

Seiten mit Elementor erstellen und bearbeiten

 

Das Monstroid2 Theme beinhaltet eine riesige Menge von vorgefertigten Seiten, die sich editieren lassen. Mit dem Elementor Page-Builder, der im WordPress Elementor Theme integriert ist,  kannst du auch eigene Seiten erstellen.

Seite erstellen

Geh zu deiner Webseite, klick auf Neu >> Seite:

wordpress elementor neue seite erstellen

 

Dann klick auf Status und Sichtbarkeit >> Sichtbarkeit >> Privat:wordpress elementor seite sichtbarkeit

 

Benenne deine zukünftige Seite und klicke Speichern an. Dann drücke auf Mit Elementor bearbeiten

 

wordpress elementor status und sichtbarkeit

 

In der Elementor-Oberfläche bemerkst du, dass der Seitenname sich an drei verschiedenen Stellen befindet:

 

wordpress seitentitel elementor bearbeiten

 

 

Seite mit Elementor bearbeiten

 

Hier änderst du Seitennamen, Sichtbarkeit, Beitragsbild u.a.:

 

wordpress elementor bilder hinzufügen

 

 

 

Es gibt auch verschiedene Seitenlayouts:

  • Canvas - Header und Footer werden entfernt, sodass Seite leer aussieht. Normalerweise wird dieses Layout für Fehlerseiten verwendet;
  • Volle Breite - dein Inhalt wird sich an die gesamte Breite einer Seite anpassen.

 

Jetzt bearbeiten wir eine Seite, die aus Sektionen und Elementen besteht. Die Sektion ist ein struktureller Teil der Seite, der mit Elementen gefüllt ist. Das Element ist ein Teil des Inhalts - ein Elementor-Widget oder eine Funktion, die du auf deiner Website verwenden kannst.

 

Klicke auf das Pluszeichen, um einen neuen Abschnitt hinzuzufügen:

 

wordpress elementor rote kreuzung

 

Zunächst soll die Anzahl von Spalten für einen Abschnitt festgelegt werden. Also ich wähle eine Spalte. Wir können später problemlos eine weitere Spalte hinzufügen (falls erforderlich):

 

wordpress elementor wähle deine struktur

 

Wir haben nun eine Sektion, die wir mit Inhalten füllen können:

 

wordpress elementor inneren abschnitt hinzufügen

 

Klicke auf dieses Symbol, um ein Element hinzuzufügen:

 

wordpress elementor rote taste

 

Du siehst die Elementliste: 

 

wordpress elementor menü entdecken

 

Da Elementor ein Drag-and-Drop Editor ist, kannst du jedes Element und jede Sektion per Mausklick bearbeiten.

 

Zunächst fügen wir ein Hintergrundbild zu dieser Sektion hinzu:

 

wordpress elementor inneren abschnitt bearbeiten

 

1. Klicke auf Abschnitt bearbeiten;

2. Öffne das Layout-Tab und stelle die folgende Werte ein:

Höhe >> Min. Höhe

• Mindesthöhe >> 500 px

wordpress elementor höhe ändern3. Öffne das Stil-Tab

A. Öffne Hintergrund und wähle Hintergrundtyp >>  Klassisch;

B. Öffne Hintergrund Überlagerung und wähle Hintergrundtyp >>  Klassisch;wordpress elementor hintergrund überlagerung

C. Zunächst wähle ein Bild;

D. Stelle die folgenden Werte schließlich ein:

  • Position >> Mitte Mitte
  • Anhang >> Fixed
  • Repeat >> No-repeat
  • Größe >> Eingepasst

 

Es sieht zwar langweilig aus, aber wir möchten die Seite attraktiv gestalten, oder?

 

wordpress elementor inneren abschnitt bearbeiten

 

Machen wir einen Heldenbereich, der aus zwei Spalten bestehen wird: die rechte Spalte hat den Seitentitel und die linke Spalte hat einen Slogan mit einem Call-to-Action. Los!

 

Texte eingeben und bearbeiten

 

  1. Ziehe Inneren Abschnitt zu deiner Sektion und lege ihn ab. Jetzt haben wir zwei Spalten:

 

wordpress elementor spalten hinzufügen

 

2. Verwende das Element Überschrift und verschiebe es auf die linke Spalte:

 

wordpress elementor überschrift eingeben

 

3. Bearbeite den Titel:

 

wordpres elementor ist ganz einfach

 

4. Wechsele zum Stil Tab:

  • Bearbeite Textfarbe. Ich verwende #191337
  • Typografie - Schriftfamilie >> Montserrat
  • Größe >> 45 px
  • Schriftschnitt >> 900
  • Umwandlung >> Versalien
  • Zeilenhöhe >> 1.5
  • Ergebnis:

 

wordpress elementor typografie text bearbeiten

 

Bearbeiten wir jetzt die rechte Spalte. Mit einem Klick mit der rechten Maustaste gelangst du an weitere Optionen:

 

wordpress elementor rechtsklick optionen

 

Ich kann dieses Element duplizieren, auf die rechte Spalte ziehen und den Stil bearbeiten:

 

  • Größe >> 25 px
  • Schriftschnitt >> Normal
  • Umwandlung >> Vorgabe
  • Zeilenhöhe >> 1.5
  • Ergebnis:

 

wordpress elementor kleinen text hinzufügen

 

Beide Elemente sind vertikal ausgerichtet. Wie können wir das ändern? 

 

wordpress elementor überschrift zentrieren

 

wordpress elementor overflow mitte

 

Button hizufügen

 

 

Fügen wir eine Taste hinzu! Klicke dazu auf den Button und platziere ihn unter dem Text:

 

wordpress elementor text erfolgreich zentriert

 

Bearbeiten wir jetzt die Taste!

 

1.Klick auf die Taste

2.Bearbeite den Text. Öffne dazu Inhalt Tab:

  • Text >> Klicke auf mich!
  • Ausrichtung >> Center
  • Größe >> Klein

 

3.Geh zum Stil Tab:

A. Typografie:

  • Schriftfamilie >> Montserrat
  • Größe >> 20
  • Umwandlung >> Versalien

B. Normal:

  • Textfarbe >> #FFFFFF
  • Hintergrundfarbe >> #F96364
  • Rahmentyp >> Durchgezogen 
  • Breite >> 1-1-1-1
  • Farbe >> #F96364
  • Eckenradius >> 50-50-50-50

C. Hover:

  • Textfarbe >> #F96364
  • Hintergrundfarbe >> #FFFFFF
  • Animation bei Mausberührung >> Pop
  • Rahmentyp >> Durchgezogen
  • Farbe >> #F96364

D. Klicke auf das Erweitert Tab:

  • Margin >> 50-0-0-0

E. Ergebnis:

 

wordpress elementor auf button klicken

 

Responsive gestalten

 

Da viele Benutzer deine Website über Handys und Tablets aufrufen werden, muss man sie für Mobilgeräte optimieren. Glücklicherweise ist das kein Problem für unser WordPress Elementor Theme! Klicke auf den Responsive Modus:

 

wordpress elementor responsiver modes wechseln

 

Fangen wir mit dem Tablet-Modus an:

 

wordpress elementor tablet modus

 

Wie du bemerken kannst, sieht die Seite auf einem Tablet nicht so gut aus. Deshalb reduzieren wir die Größe des Texts:

  • die linke Spalte: Ausrichtung >> Center, Größe >> 30 px 
  • die rechte Spalte: Ausrichtung >> Center, Größe >> 20 px

 

wordpress elementor die größe des texts ändern

 

wordpress elementor handy modus

 

Dies war ein grundlegender Satz von Anpassungsoptionen, die du kennen musst. 

 

Mehr Skins und Plugins

 

Bei Mostroid2 kannst du einen blauen Button - Magic Button - sehen. 

 

wordpress elementor magic button mosntroid2 skins

 

Der gibt dir den Zugriff auf die Galerie mit unzähligen Sektionen, Seiten und Skins dieses Themes. Wirf mal einen Blick auf diese Sammlung!

 

wordpress elementor monstroid2 skins

 

Du kannst auch alle Theme-Elemente einzigartig gestalten! Geh zum Dashboard und klicke auf Monstroid2:

 

monstroid2 wordpress dashboard menü

 

Hier gibt es 60+ Skins für deine Website!

 

monstroid2 skinks theme wechseln

 

Vergiss nicht über die Sammlung von JetPlugins:

 

wordpress monstroid2 jetplugins library

 

Das wars. Wir haben zusammen das WordPress Elementor Theme gekauft und deine erste Elementor-Seite erstellt. Ich bedanke mich für deine Aufmerksamkeit und hoffe, dass diese Anleitung hilfreich für dich war! Elementor ist wirklich ganz einfach!

NI
nikolajjaeger
6
v Beschweren

Recommend this post to others!

Erscheint dir dieser Beitrag interessant? Das könnte dir auch gefallen:

Become the first to comment

Zuletzt Aktualisiert : Jan 08, 2020

Beitragsbewertung