WordPress Website Erstellen -2025- Tutorial in 20 EINFACHEN Schritten | (Deutsch|German)

Eine Webseite mit Wordpress erstellen - Anfänger Anleitung

Überblick: In dieser Anleitung zeigt Tim in 20 einfachen Schritten, wie man eine Webseite mit Wordpress erstellt. Er erklärt, wie man sich eine Domain und Hosting besorgt, Wordpress installiert und die Seite gestaltet.

Schritt 1: Domain und Hosting besorgen

• Um eine eigene Webseite zu erstellen, die live im Internet verfügbar ist, benötigt man drei Dinge: Eine Domain (der Name der Webseite), Webhosting (um die Seite live im Internet betrachten zu können) und Wordpress (die Plattform zum Erstellen der Seite).

• Um eine Domain und Hosting zu besorgen, kann man den Begleitartikel öffnen oder webseitenmachen.de/anfangen besuchen.

• Eine Domain kostet ca. 15€ pro Jahr und Webhosting wird zu einem Preis von ca. 4-15€ pro Monat beworben.

Schritt 2: Wordpress installieren

• Nachdem man sich eine Domain und Hosting besorgt hat, kann man Wordpress mit einem Klick installieren.

• Es gibt zwei Versionen von Wordpress: Die kostenlose Open Source Version von Wordpress.ORG (mit der man die Seite nach eigenen Wünschen gestalten kann) und die eingeschränkte Lite-Version von Wordpress.COM.

Schritt 3: Grundeinstellungen vornehmen

• Nach der Installation von Wordpress macht Tim ein paar Grundeinstellungen für die Website.

• Die Website wird mobil optimiert sein.

Schritt 4: Homepage hinzufügen und designen

• Nach den Grundeinstellungen fügt Tim die Homepage hinzu.

• Die Homepage wird mit dem Pagebuilder Elementor gestaltet, der das Erstellen von Websites super einfach macht.

• Mit Elementor kann man Texte, Kontaktformulare, Videohintergründe, Slideshows, Karten und Animationen hinzufügen.

Schritt 5: Tipps und Tricks für Anfänger

• Tim teilt seine Erfahrungen als Anfänger und gibt Tipps und Tricks für das Erstellen einer Webseite mit Wordpress.

Schritt-für-Schritt-Anleitung zur Erstellung einer Website

Überblick: In diesem Video wird eine Schritt-für-Schritt-Anleitung zur Erstellung einer Website gegeben. Es werden die Themen Domain-Verfügbarkeit, Hosting und Sicherheit behandelt.

Verfügbarkeit der Domain prüfen

• Überprüfen Sie die Verfügbarkeit Ihrer Wunschdomain.

• Wenn Ihre Wunschdomain nicht verfügbar ist, fügen Sie einen Bindestrich oder eine Zahl hinzu oder ändern Sie das Ende der Domainextension (z.B. von .de zu .com).

• Dieser Schritt kann später durchgeführt werden.

Hosting und Domain einrichten

• Beim Webhosting bezahlen Sie für die Nutzung eines Teils des Servers einer Firma, um Ihre Webseite darauf zu hosten.

• Die Geschwindigkeit des Hosters ist wichtig, da langsame Server dazu führen können, dass Besucher abspringen und Google Ihre Seite niedriger bewertet.

• Achten Sie auf SSL-Zertifikate für Ihre Domain und auf eine gute Uptime (Server-Ausfallzeiten).

• Wordpress sollte auf beiden Ebenen gesichert werden: auf der Website-Ebene und auf der Server-Ebene.

• Siteground wird als Hoster empfohlen.

Kundensupport bei Siteground

• Siteground bietet schnelle Server, hohe Uptime und guten Kundensupport.

• Der Kundensupport ist über den Chat erreichbar und antwortet innerhalb weniger Minuten.

• Rezensionen können helfen, einen passenden Hoster zu finden.

Fazit

Dieses Video gibt eine grundlegende Anleitung zur Erstellung einer Website. Es werden wichtige Schritte wie die Überprüfung der Domain-Verfügbarkeit, die Wahl des Hosters und die Sicherheit behandelt. Siteground wird als empfohlener Hoster genannt.

Siteground Webhosting

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man Siteground als Webhosting-Provider nutzen kann. Der Sprecher erklärt die verschiedenen Pläne und gibt Tipps zur Auswahl des richtigen Plans.

Siteground-Pläne

• Es gibt drei verschiedene Pläne: GoGeek, Grow Big und Startup.

• Im Start-up Plan kann man eine Website hosten, im Grow Big Plan so viele Websites hosten wie man möchte.

• Der Hauptunterschied zwischen den beiden Plänen ist, dass der Grow Big Plan etwas schneller ist.

• Auf der Seite "Vergleichen Sie unsere Wordpress Pläne" können die genauen Details eingesehen werden.

Registrierung eines neuen Accounts

• Nachdem ein passender Plan ausgewählt wurde, kann eine Domain eingegeben werden.

• Wenn die gewünschte Domain nicht verfügbar ist, können alternative Optionen in Betracht gezogen werden.

• Die Kontoinformationen müssen eingegeben werden, um sich später bei Siteground einzuloggen.

• Es müssen auch Kundeninformationen angegeben werden, einschließlich Land und Adresse.

• Die Zahlungsinformationen können entweder mit Kreditkarte oder Paypal ausgefüllt werden.

Bestätigung und E-Mail-Empfang

• Nachdem alle Informationen ausgefüllt wurden, kann das AGB bestätigt und auf "Jetzt Zahlen" geklickt werden.

• Eine E-Mail mit Anweisungen wird an den Benutzer gesendet, um den Prozess abzuschließen.

Einrichten einer Seite in Siteground

Abschnittsübersicht: In diesem Abschnitt wird beschrieben, wie man eine Seite in Siteground einrichtet und ein SSL-Zertifikat installiert.

Einrichten der Seite in Siteground

• Eine neue Website kann unter "Websites" erstellt werden.

• Unter "neue Website" wählt man die bestehende Domain aus.

• Die Option "Überspringen und leere Seite erstellen" kann gewählt werden.

• Nachdem die Seite intern erstellt wurde, kann sie unter "Websites" verwaltet werden.

Installation eines SSL-Zertifikats

• Um eine Verbindung sicher zu machen, muss ein SSL-Zertifikat installiert werden.

• Unter "Sicherheit" und dann "SSL Manager" kann das Zertifikat installiert werden.

• Wenn das Zertifikat nicht automatisch installiert wurde, kann es manuell unter "installieren" für die entsprechende Domain ausgewählt werden.

• Let's Encrypt ist ein kostenloser Service, der verwendet werden kann.

• Es kann einige Stunden dauern, bis das Zertifikat aktiv ist. Wenn es Probleme gibt, sollte der Support von Siteground kontaktiert werden.

Erzwingen von HTTPS und Installation von Wordpress

Abschnittsübersicht: In diesem Abschnitt wird beschrieben, wie man HTTPS erzwingt und Wordpress installiert.

Erzwingen von HTTPS

• Nachdem das SSL-Zertifikat aktiv ist, kann HTTPS erzwungen werden.

Installation von Wordpress

• Unter "Wordpress Installieren & Verwalten" kann Wordpress ausgewählt werden.

• Die Installationseinstellungen können angepasst werden, einschließlich der Domain, Sprache und Installationspfad.

• Admin-Daten müssen eingegeben werden, um sich später in die Seite einzuloggen.

• Es ist wichtig, ein sicheres Passwort zu wählen.

• Nachdem alle Einstellungen vorgenommen wurden, kann Wordpress installiert werden.

Öffnen des Wordpress Dashboards

Abschnittsübersicht: In diesem Abschnitt wird beschrieben, wie man das Wordpress Dashboard öffnet.

Öffnen des Wordpress Dashboards

• Das Wordpress Dashboard kann unter "deinedomain.de/wp-admin" geöffnet werden.

• Mit den Admin-Nutzerdaten, die während der Installation eingerichtet wurden, kann man sich anmelden.

Checkboxen und Admin Bar entfernen

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man die Checkboxen und die Admin Bar in Wordpress entfernt.

Checkboxen wegnehmen

• Entferne die Checkboxen.

• Gehe auf ''Ansicht anpassen‘‘.

Admin Bar entfernen

• Die ''Admin Bar'' benötigen wir auch kaum.

• Eigentlich nur, um uns unsere Webseite anzuschauen. Das können wir tun, indem wir hier über dieses Haus fahren und dann auf ‘’Zur Webseite’’ klicken.

• Ich öffne das mal in einem neuen Tab.

Grundlegende Einstellungen in Wordpress

Abschnittsübersicht: In diesem Abschnitt werden grundlegende Einstellungen in Wordpress vorgenommen.

Einstellungen bearbeiten

• Hier Links bearbeiten wir hauptsächlich unsere Seite.

• Hier können wir Beiträge verwalten, Medien einfügen, Seiten verwalten, Kommentare lesen, das Design anpassen, Plugins installieren,

Benutzer verwalten oder auch Einstellungen machen.

Titel der Webseite und Untertitel ändern

• Wenn wir mal die Seite öffnen, sehen wir,dass hier oben im Tab. ‘’My Wordpress’’ steht. Dort hast du den Webseiten Titel und Untertitel.

• Die kann ich jetzt also anpassen. Bei Titel der Webseite kann ich z.B. irgendeinen Unternehmensnamen einfügen.

• In dem Fall füge ich jetzt mal Webseiten Bauen ein. Und der Untertitel könnte z.B. dein Slogan sein.

• Du kannst ihn auch komplett raus löschen. Dann steht da nichts. So wie jetzt.

• Ich schreibe jetzt mal ‘’Lerne Webseiten zu erstellen’’.

Permalinks

• Und zwar unter Permalinks.

• Beitragsname auswählen, damit die Kontaktseite unter webseitenbauen.com/kontakt verfügbar ist.

• Andere Optionen sind unübersichtlicher und nicht so gut für Suchmaschinenoptimierung.

Erste Seite erstellen und zur Homepage machen

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man eine erste Seite in Wordpress erstellt und diese zur Homepage macht.

Eine neue Seite erstellen

• Hier im Dashboard, links über Seiten fahren und dann auf erstellen klicken.

• Der Seite einen Titel geben, z.B. Home.

• Auf veröffentlichen gehen und nochmal auf veröffentlichen.

Die Homepage einrichten

• Über Einstellungen fahren und auf Lesen klicken.

• Bei deine Homepage zeigt wähle ich ‘’eine Statische Seite’’.

• Unter Homepage wähle ich Home.

• Auf ‘’Änderungen Speichern’’ gehen.

Das richtige Theme installieren

Abschnittsübersicht: In diesem Abschnitt wird erklärt, warum das Theme wichtig ist und wie man das richtige Theme in Wordpress installiert.

Was ist ein Theme?

• Ein Theme gibt dir vor, was du an deiner Seite gestalten kannst.

• Zum Beispiel, was für eine Art von Menü du hier oben haben kannst, was für Farben du verwenden kannst oder was für Inhalte du verwenden kannst.

Das richtige Theme installieren

• Das Theme ist wichtig, da die Seite ohne das richtige Theme nicht besonders gut aussieht.

• Ein gutes Theme gibt dir viele Möglichkeiten zur Gestaltung deiner Webseite.

• Es gibt kostenlose und kostenpflichtige Themes in Wordpress.

Installation von WordPress und Theme

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man WordPress installiert und das richtige Theme auswählt.

Das richtige Theme auswählen

• Es gibt viele Themes zur Auswahl, einige sind kostenlos, andere kostenpflichtig.

• Empfohlen wird das OceanWP-Theme, da es viele Anpassungsmöglichkeiten bietet.

• Um das OceanWP-Theme zu installieren, geht man auf "Design", dann auf "Themes" und sucht nach "OceanWP".

Die Installation des Themes

• Nach der Suche nach dem OceanWP-Theme kann man es installieren und aktivieren.

• Nach der Aktivierung sieht die Seite anders aus als vorher.

Installation von Plugins

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man die richtigen Plugins für die Website auswählt und installiert.

Was sind Plugins?

• Plugins sind ähnlich wie Apps auf einem Smartphone. Sie erweitern die Funktionalität einer Website.

• Es gibt tausende von Plugins zur Auswahl.

Die Installation der benötigten Plugins

• Für dieses Tutorial werden drei Plugins benötigt: Elementor, Ocean Extra und Envato Elements.

• Diese können über den Menüpunkt "Plugins" gesucht und installiert werden.

Aktivierung der benötigten Plugins

• Nach der Installation müssen die benötigten Plugins aktiviert werden.

Vorbereitung der Homepage mit Ocean Extra

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man die Homepage mit dem Plugin Ocean Extra vorbereitet.

Die Struktur einer Webseite

• Eine Webseite besteht aus einem Header, einem Body und einem Footer.

• Der Header enthält normalerweise ein Logo oder Seitentitel und eine Navigation.

• Der Body enthält alle Informationen, die auf der Seite dargestellt werden sollen.

• Der Footer enthält Kontaktinformationen, Anfahrtsbeschreibungen und einen Copyright-Bereich.

Verwendung von Elementor

• Mit dem Plugin Elementor kann man Seiten einfach per Drag-and-Drop erstellen.

Erstellung der Homepage mit Elementor

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man die Homepage mit dem Plugin Elementor erstellt.

Verwendung von Vorlagen

• Mit Envato Elements hat man Zugriff auf viele Vorlagen für verschiedene Arten von Webseiten.

• Diese können als Ausgangspunkt für die eigene Website verwendet werden.

Erstellung des Headers

• Der Header kann mit Hilfe von Elementor gestaltet werden.

Erstellung des Footers

• Auch der Footer kann mit Hilfe von Elementor gestaltet werden.

Erstellung des Body

• Der Body wird ebenfalls mit Hilfe von Elementor erstellt.

Vorbereitung der Homepage mit Ocean Extra

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man die Homepage mit Ocean Extra vorbereitet und weitere Seiten hinzufügt.

Aufräumen der Seite

• Die Seite "Home" auswählen und auf "mit Elementor bearbeiten" klicken.

• Bei Content Layout 100% full width wählen und aktualisieren.

• Bei Header Display Top Bar auf Disable stellen und aktualisieren.

• Bei Title Display Page Title auf Disable stellen und aktualisieren.

• Bei Footer Display Footer Widgets Area und Display Copyright Area auf Disable stellen und aktualisieren.

Hinzufügen weiterer Seiten

• Über "Seiten" eine neue Seite erstellen (z.B. Kontaktseite).

• Veröffentlichen und Ocean Extra-Einstellungen machen: Content Layout 100% full width, Header Display Top Bar auf Disable, Title Display Page Title auf Disable, Footer Display Footer Widgets Area und Display Copyright Area auf Disable.

• Seite aktualisieren.

Zusammenfassung

In diesem Abschnitt wurde gezeigt, wie man die Homepage mit Ocean Extra vorbereitet sowie weitere Seiten hinzufügt. Dabei wurden verschiedene Einstellungen vorgenommen, um die Seiten zu optimieren.

Elementor Tutorial: Wie man eine Seite erstellt

Abschnittsübersicht: In diesem Abschnitt erklärt der Sprecher, wie man eine Seite in Elementor aufbaut. Er zeigt, dass eine Elementor-Seite aus Containern und Widgets besteht und wie man diese verwendet.

Aufbau einer Elementor-Seite

• Eine Elementor-Seite besteht aus Containern und Widgets. Container dienen dazu, die Seite in verschiedene Bereiche aufzuteilen.

• Widgets sind die Inhalte der Seite und können Überschriften, Bilder oder Google Maps enthalten.

• Container können weitere Container enthalten, um die Seite besser zu strukturieren.

• Durch das Einbetten von Containern in andere Container kann man verschiedene Einstellungen für die jeweiligen Container machen.

Textbearbeitung mit Elementor

• Um einen Container hinzuzufügen, klickt man auf das pinke Plus-Symbol und wählt den gewünschten Container-Typ aus.

• Innerhalb des Containers kann man dann Text einfügen oder weitere Widgets hinzufügen.

• Es ist auch möglich, vorgefertigte Vorlagen zu verwenden oder eigene Designs zu erstellen.

Verwendung von Vorlagen

• Der Sprecher zeigt, wie man eine vorgefertigte Vorlage importiert und in seine eigene Seite einfügt.

• Man kann auch eigene Vorlagen erstellen und diese für zukünftige Projekte speichern.

Responsiver Modus

• Elementor bietet auch einen responsiven Modus, der es ermöglicht, die Seite auf verschiedenen Geräten zu testen.

• Man kann zwischen Desktop-, Tablet- und Mobilansicht wechseln und sicherstellen, dass die Seite auf allen Geräten gut aussieht.

Zusammenfassung

• Eine Elementor-Seite besteht aus Containern und Widgets, die verwendet werden können, um eine Seite in verschiedene Bereiche aufzuteilen und Inhalte hinzuzufügen.

• Es ist möglich, vorgefertigte Vorlagen zu verwenden oder eigene Designs zu erstellen.

• Der responsiver Modus ermöglicht es einem, die Seite auf verschiedenen Geräten zu testen.

Widgets und Texte einfügen

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man Widgets in einen Container einfügt und wie man Texte bearbeitet.

Ein Widget in einen Container einfügen

• Um ein Widget in einen Container einzufügen, klickt man auf das gewünschte Widget und zieht es über den Container. Sobald der blaue Balken erscheint, kann man das Widget loslassen.

• Um ein bereits eingefügtes Widget zu bearbeiten, gibt es mehrere Optionen: Man kann auf das Stiftsymbol klicken, einen Rechtsklick machen und "Widget bearbeiten" auswählen oder einfach auf das Widget klicken.

Einen Text bearbeiten

• Um den Inhalt eines Textes zu ändern, muss man ihn anklicken und den neuen Text eingeben.

• Um einen Link hinzuzufügen, kopiert man die URL des Links (z.B. von YouTube), fügt sie im Linkfeld ein und wählt "https://" aus. Alternativ kann man auch eine bereits erstellte Seite als Linkziel auswählen.

• Die Farbe des Textes kann durch Klicken auf das Farbfeld geändert werden. Es gibt auch vorgegebene Farben wie primäre oder sekundäre Farben.

• Elementor bietet globale Einstellungen an, um Änderungen an allen gleichartigen Elementen vorzunehmen.

Farbauswahl für die Website

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man die Farben für die Website auswählt.

Farbauswahl

• Es wird empfohlen, nicht mehr als drei oder vier verschiedene Farben auf der Website zu verwenden.

• Die Farbe des Textes kann durch Klicken auf das Farbfeld geändert werden. Man kann den Balken nach links oder rechts ziehen, um eine andere Farbe zu wählen. Der Text kann auch transparenter gemacht werden.

• Wenn man bereits weiß, welche Farben man verwenden möchte, kann man den Hex Code einfügen.

• Elementor bietet globale Einstellungen an, um Änderungen an allen gleichartigen Elementen vorzunehmen.

Globale Einstellungen

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man die globalen Einstellungen in Elementor verwendet. Es wird erklärt, wie man Farben und Schriftarten für die gesamte Website einrichtet.

Primäre Farbe ändern

• Die primäre Farbe kann geändert werden, indem man auf das Burger-Symbol klickt > Website-Einstellungen > Globale Farben.

• Eine Änderung der primären Farbe wirkt sich automatisch auf alle Bereiche aus, in denen sie verwendet wird.

• Es wird empfohlen, vor dem Start der Arbeit an der echten Seite den Artikel zu Farben auf der 'Anfangen'-Seite zu lesen und ein Farbschema auszuwählen.

• Neue Farben können hinzugefügt werden, indem man auf "Farbe Hinzufügen" klickt.

Typografie bearbeiten

• Unter "Stil" kann zwischen normal und kursiv gewählt werden.

• Die globale Schriftart kann unter Burger-Symbol > Website-Einstellungen > Globale Schriftart eingerichtet werden.

• Es wird empfohlen, die Schriftfamilie und Größe in den globalen Einstellungen einzurichten.

Vorteile von globalen Einstellungen

• Globale Einstellungen sparen Zeit bei der Anpassung von Widgets und anderen Elementen auf der Website.

• Nachdem Änderungen vorgenommen wurden, sollte man immer speichern.

Bearbeiten von Überschriften und Texten

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man Überschriften und Texte in Elementor bearbeitet.

Ändern der Schattenfarbe und des Inhalts einer Überschrift

• Die Farbe des Schattens kann geändert werden.

• Der Inhalt, Stil und erweiterte Einstellungen können für normale Texte bearbeitet werden.

• Der normale Text kann verändert, fett oder kursiv gemacht werden. Es können auch Aufzählungslisten erstellt oder Links eingefügt werden.

• Die Ausrichtung, Farbe und Typografie des normalen Textes kann im Stil bearbeitet werden.

Rückgängig machen von Änderungen

• Änderungen können rückgängig gemacht werden, indem man auf das Verlauf-Symbol klickt oder in die Revisionen geht.

Bearbeiten von Buttons

• Ein Button kann eingefügt werden und dann mit Inhalt, Stil und erweiterten Einstellungen bearbeitet werden.

Button-Design in Webflow

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man Buttons in Webflow gestaltet und welche Optionen zur Verfügung stehen.

Link-Optionen

• Ein Button wird genutzt, um eine Aktion auszulösen, z.B. das Öffnen einer anderen Seite.

• Der Link des Buttons kann zu einer beliebigen URL führen oder auch zu einem bestimmten Bereich auf der eigenen Webseite (Anchor Link).

• Es ist möglich, bereits erstellte Seiten als Ziel des Links auszuwählen.

Gestaltungsoptionen

Größe und Ausrichtung

• Die Größe des Buttons kann angepasst werden.

• Es gibt verschiedene Optionen für die Ausrichtung im Container.

Icon und Text

• Es können Icons aus einer Bibliothek hinzugefügt werden.

• Die Positionierung des Icons relativ zum Text kann gewählt werden.

Typografie

• Die Schriftart und -größe sowie der Schriftschnitt können angepasst werden.

Farben und Effekte

• Unterschiedliche Farben für Normalzustand und Hover-Zustand können eingestellt werden.

• Ein Rahmen mit Farbe und Breite kann hinzugefügt werden.

• Verschiedene Animationseffekte bei Mausberührung sind verfügbar.

Buttons und Container

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man mit Buttons und Containern arbeitet. Es wird gezeigt, wie man einen Button erstellt und dessen Stil anpasst. Außerdem wird erklärt, wie man den Stil eines Buttons auf andere Buttons überträgt. Schließlich werden die Einstellungen für Container erläutert.

Erstellen von Buttons

• Ein Box-Schatten kann hinzugefügt werden, um dem Button mehr Tiefe zu verleihen.

• Das Padding kann angepasst werden, um den Abstand zwischen Text und Rand des Buttons zu ändern.

• Der Stil eines Buttons kann auf andere Buttons kopiert werden.

Arbeiten mit Containern

• Container dienen dazu, die Struktur der Seite aufzubauen.

• Die Mindesthöhe eines Containers kann eingestellt werden.

• Weitere Einstellungen für Container sind in den Bereichen Layout, Stil und Erweitert verfügbar.

Einstellungen für Container und Elemente

Abschnittsübersicht: In diesem Abschnitt werden die Einstellungen für Container und Elemente erläutert.

Anpassung der Höhe und Breite des Containers

• Verwendung von VH, um die Höhe des Containers an den Gerätebildschirm anzupassen.

• Möglichkeit, zwischen Boxed und voller Breite zu wählen. Boxed bedeutet, dass die Inhalte innerhalb des Containers begrenzt sind.

Positionierung von Elementen im Container

• Ausrichtung von Widgets in einer Spalte oder Reihe.

• Align Items bestimmt die vertikale Ausrichtung der Inhalte, während Justify Content die horizontale Ausrichtung bestimmt.

• Abstand zwischen den Inhalten kann angepasst werden.

• Möglichkeit zur individuellen Anpassung der Position einzelner Inhalte mit "Align Self".

Kombination von Containern und Elementen

• Beispiel: Erstellung eines inneren Containers, um zwei Buttons nebeneinander zu platzieren.

Container Einstellungen

Abschnitt Überblick: In diesem Abschnitt geht es darum, wie man Container in Elementor bearbeitet und welche Einstellungen dabei zur Verfügung stehen.

Erstellen von Buttons in einem Container

• Klicke auf das Stift-Symbol und ziehe den Button nach unten.

• Wenn der blaue Balken im inneren Container angezeigt wird, kann der Button fallen gelassen werden.

• Wiederhole diesen Vorgang für den zweiten Button.

• Verwende den Navigator, um Widgets oder Container zu ordnen.

Zentrieren von Buttons in einem Container

• Bearbeite den Container und wähle bei Justify "Mitte" aus.

• Dadurch werden die beiden Buttons zentriert.

Bilder und Hintergründe

Abschnitt Überblick: In diesem Abschnitt geht es darum, wie man Hintergrundbilder und -videos in Elementor einfügt.

Erstellen eines Abschnitts mit Hintergrundbild

• Klicke auf die 6 Punkte des Containers und wähle bei Mindesthöhe "VH" aus.

• Wähle eine Höhe von 100 aus.

• Gehe zu "Elemente" und wähle bei Align Items "Mitte" aus.

• Wähle bei Justify auch "Mitte" aus.

Anpassung des Hintergrunds eines Containers

• Klicke auf die 6 Punkte des Containers, um ihn zu bearbeiten.

• Wähle unter Stil den Hintergrundtyp (Klassisch, Verlauf, Video oder Slideshow) aus.

• Wähle eine Hintergrundfarbe oder einen Verlauf aus.

• Füge ein Video als Hintergrund ein und wähle Start- und Endzeit sowie Mobiltelefonoptionen aus.

Fazit

Abschnitt Überblick: In diesem Abschnitt gibt es einige Tipps und Empfehlungen für die Verwendung von Videohintergründen in Elementor.

Verwendung von Videohintergründen

• Es wird empfohlen, keine Videohintergründe zu verwenden, da sie häufig lange Ladezeiten verursachen und die Seite langsamer machen.

• Wenn Sie sich dennoch dafür entscheiden, stellen Sie sicher, dass Sie ein cooles Video haben.

Hintergrundbild und Hintergrundüberlagerungen

Abschnittsübersicht: In diesem Abschnitt zeigt der Sprecher, wie man ein Hintergrundbild hinzufügt und bearbeitet. Er erklärt auch, wie man eine Hintergrundüberlagerung einfügt.

Hinzufügen eines Hintergrundbildes

• Klicke auf "Dateien auswählen", um ein Bild von deinem PC auszuwählen.

• Achte darauf, dass das Bild nicht zu groß ist (ca. 500 KB für große Bilder).

• Wähle "Cover" für die Größe des Bildes.

Bearbeiten des Hintergrundbildes

• Vermeide Auto-, Eingepasst- oder Individuell-Einstellungen für die Größe des Bildes.

• Wähle "Fixed" oder "Scroll" für den Anhang.

• Füge eine Hintergrundüberlagerung hinzu, um den Kontrast zwischen dem Text und dem hellen Hintergrund zu erhöhen.

• Passe die Deckkraft der Überlagerung an.

Bearbeiten von inneren Containern

• Du kannst auch die Hintergründe von inneren Containern bearbeiten.

Zusammenfassung

In diesem Abschnitt hat der Sprecher gezeigt, wie man ein passendes Hintergrundbild auswählt und es bearbeitet. Er hat auch erklärt, wie man eine Überlagerung hinzufügt, um den Kontrast zwischen dem Text und dem Hintergrund zu erhöhen.

Bilder und Hintergründe

Abschnittsübersicht: In diesem Abschnitt geht es darum, wie man Bilder und Hintergründe in einem Container einfügt und anpasst.

Anpassung von Bildern

• Es ist möglich, die Größe des Bildes anzupassen.

• Die Deckkraft und CSS Filter braucht man nicht unbedingt.

• Der Eckenradius kann verändert werden, um die Kanten abzurunden.

• Der Innenabstand bestimmt den Abstand zwischen dem Bild und der Containerumrandung. Der Außenabstand verschiebt das Bild nach oben, rechts, links oder unten.

Anpassung von Hintergründen

• Man kann den Abstand auch ins Negative setzen.

• Sowohl der Außenabstand als auch der Innenabstand können bei Containern bearbeitet werden.

• Diese Einstellungen können genutzt werden, um Widgets näher aneinander zu packen oder in der mobilen Version mehr Platz zum Rand der Seite zu schaffen.

Bewegungseffekte

• Es gibt verschiedene Eingangsanimationen für Bilder.

• Die Animationsdauer und Verzögerung können festgelegt werden.

Weitere Anpassungen

Abschnittübersicht: Hier geht es darum, wie man weitere Anpassungen vornehmen kann.

Breitenanpassungen

• Die Breite der Container kann angepasst werden.

• Man kann auch mit den boxed und volle Breite Einstellungen experimentieren.

Verlinkung von Buttons

• Der Bereich, zu dem es scrollen soll, muss definiert werden.

• Durch die Vergabe einer CSS ID kann man definieren, wo gescrollt werden soll.

Elementor Tutorial: Seite Responsive machen

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man eine Webseite responsive macht und für mobile Geräte optimiert.

Container anpassen

• Die meisten Besucher kommen von mobilen Geräten, daher muss die Seite auch auf diesen Geräten gut aussehen.

• Im responsiven Modus kann man sehen, wie die Seite auf verschiedenen Geräten aussieht und Anpassungen vornehmen.

• Einstellungen mit dem Mobile Icon daneben ändern nur die mobile Version der Seite. Andere Einstellungen ändern das Design auf allen Geräten.

• Wenn bestimmte Bereiche nicht gut für mobile Geräte angepasst werden können, kann man separate Versionen für jedes Gerät erstellen.

Widgets anpassen

• Widgets können auch im responsiven Modus angepasst werden. Man sollte jedoch darauf achten, dass Änderungen mit dem Mobile Icon daneben nur die mobile Version betreffen.

• Es gibt noch weitere Einstellungen im Responsiven Modus, um die Seite anzupassen. Falls Probleme auftreten, gibt es ein Tutorial zur Hilfe.

Fazit

• Mit den gezeigten Schritten sollte es möglich sein, eine Webseite responsive zu machen und für mobile Geräte zu optimieren.

Elementor Tutorial: Vorlagen und Blöcke verwenden

Abschnittsübersicht: In diesem Abschnitt des Tutorials geht es darum, wie man mit Vorlagen und Blöcken in Elementor arbeitet. Der Sprecher erklärt, dass das Arbeiten mit Vorlagen und Blöcken sehr zeitsparend ist und professionelle Ergebnisse liefert.

Mit dem Navigator arbeiten

• Der Navigator bietet eine Übersicht über die gesamte Seite.

• Mit dem Navigator können Elemente verschoben werden.

• Inhalte im Navigator können gelöscht werden.

Arbeiten mit Vorlagen und Blöcken

• Das Arbeiten mit Templates spart Zeit und liefert professionelle Ergebnisse.

• Templates sind vorgefertigte Layouts von professionellen Designern, die in die eigene Seite importiert werden können.

• Es gibt verschiedene Arten von Blöcken wie Über uns Sektionen oder Kontaktbereiche.

• Importierte Templates können einfach bearbeitet werden.

• Envato Elements hat seine bisherigen Templates nicht für das Container Modell aktualisiert.

• Wenn ein altes Template importiert wird, muss es zum Container Modell konvertiert werden.

• Bei Problemen kann das Video "Typische Fehler in der Konvertierung" helfen.

Zusammenfassung

In diesem Abschnitt des Tutorials wurde erklärt, wie man mit dem Navigator arbeitet sowie wie man Zeit sparen kann und professionelle Ergebnisse liefert, indem man mit Vorlagen und Blöcken arbeitet. Der Sprecher betont die Wichtigkeit von Templates und gibt Tipps zur Konvertierung von alten Templates.

Mit Vorlagen und Blöcken arbeiten

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man mit Vorlagen und Blöcken in Elementor arbeitet.

Bearbeiten von Inhalten

• Klicken Sie auf den Block, um den Inhalt zu bearbeiten.

• Passen Sie den Stil an Ihre Bedürfnisse an.

• Ändern Sie das Hintergrundbild oder fügen Sie Widgets hinzu.

• Löschen Sie unerwünschte Inhalte oder setzen Sie die Seite zurück.

Verwendung von Templates

• Gehen Sie zu "Templates" und wählen Sie ein Template aus.

• Fügen Sie das Template ein und passen es an Ihre Bedürfnisse an.

• Verwenden Sie den Navigator, um komplexe Strukturen zu erstellen.

Importieren von ganzen Seiten

• Gehen Sie zu Envato Elements und wählen ein Template-Pack aus.

• Vorschau anzeigen lassen und bei Gefallen installieren.

• Konvertieren der Seite für eine einfache Anpassung.

Verwendung von Widgets

• Ziehen Sie neue Widgets in die Seite, um sie auszuprobieren.

• Suchen Sie im Internet nach Anleitungen für spezielle Widgets.

Erstellen einer Navigation und eines Headers

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man eine Navigation erstellt und einen Header mit dem Customizer designen kann.

Erstellen einer Navigation

• Wählen Sie "Navigation hinzufügen".

• Fügen sie die gewünschten Seiten hinzu.

• Passen Sie das Design an.

Designen des Headers

• Verwenden Sie den Customizer, um den Header zu designen.

• Alternativ können Sie Elementor verwenden, um den Header zu bauen und zu designen.

Erstellen eines Footers

Abschnittsübersicht: In diesem Abschnitt wird gezeigt, wie man einen Footer mit Elementor und einem extra Plugin bauen und einstellen kann.

Erstellen eines Footers

• Verwenden Sie Elementor und ein extra Plugin, um den Footer zu bauen und einzustellen.

• Alternativ können Sie auch den Customizer verwenden, um den Footer zu designen.

Fazit

Abschnittsübersicht: Zusammenfassung der wichtigsten Punkte aus dem Tutorial.

• Nutzen Sie Vorlagen oder Blöcke, um Zeit zu sparen.

• Importieren Sie ganze Seiten für eine schnelle Anpassung.

• Verwenden Sie Widgets zur Verbesserung Ihrer Seite.

• Erstellen Sie eine Navigation und passen sie das Design an.

• Designen Sie Ihren Header mit dem Customizer oder Elementor.

• Erstellen Sie einen Footer mit Elementor oder dem Customizer.

Zusammenfassung

Überblick: In diesem Abschnitt erklärt der Sprecher, wie man ihm Feedback geben und ihn unterstützen kann.

• Der Sprecher liest jeden Kommentar und antwortet auf jeden.

• Wenn das Video gefallen hat, kann man dem Sprecher gerne einen Daumen hoch geben, da dies dem Youtube Algorithmus hilft.

• Wenn man noch mehr Videos sehen möchte, kann man den Kanal abonnieren.

• Der Sprecher bedankt sich für das Zuschauen und wünscht viel Spaß beim Bauen der eigenen Seite.