WordPress Website 2022 erstellen Schritt für Schritt (Design Edition mit Elementor Pro)

#wordpress erstellen –>

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video


WordPress Website 2022 erstellen Schritt für Schritt. Und hier kommt die Design Edition von Malte Helmhold. Wir erstellen eine Website mit Elementor. Schritt für Schritt. Wir fangen bei 0 an (WordPress installieren) und hören erst auf, wenn du weißt, wie man eine Website 100 %ig für das Mobiltelefon anpasst.

In diesem 3 Stunden Seminar kannst du mir über die Schulter schauen, wie wir nicht nur Elementor-Kits importieren, sondern wie wir diese sogar noch optimieren. Wir optimieren diese Kits zur weiteren Verwendung. Um dann z. B. eigene Zeilen zu erstellen oder neue zu importieren und in maximaler Geschwindigkeit an das bestehende Design anzupassen.

Ich setze in meiner neuen “WordPress Reihe” auf Specials! Hier findest du weitere Videos aus dieser Reihe:

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

Elementor Kits:
https://elementor.com/library/

Das Restaurant-Kit, das wir nutzen:
https://templatekit.tokokoo.com/lezzatos/?storefront=envato-elements
Aus diesem Kit importieren wir eine Zeile (Öffnungszeiten)
https://elements.envato.com/de/fotro-food-restaurant-elementor-template-kit-Z73C4B4
Und aus diesem Kit importieren wir die Promo-Zeile:
https://elements.envato.com/de/resta-restaurant-elementor-template-kit-KNE3L6B

Envato Template Kits (Tipp: 7 Tage kostenlos)
https://elements.envato.com/de/template-kits

Raidboxes:
https://www.websitepiloten.de/raidboxes (Affiliate-Link)

Elementor:
https://www.websitepiloten.de/elementor (Affiliate-Link)

Borlabs:
https://www.websitepiloten.de/borlabs (Affiliate-Link)

Timestamps:

00:00 Malte zeigt, was in diesem Video gebaut wird

05:26 Malte stellt Envato Template Kits vor:
https://elements.envato.com/de/template-kits
(7 Tage kostenlos, kannst das Kit herunterladen und sofort kündigen!)

10:00 Hier wirds ernster: Malte zeigt die monatlichen Kosten für eine Websites

11:55 WordPress Installation in einer Raidboxes-Box
https://www.websitepiloten.de/raidboxes (Affiliate-Link)

17:14 Erste Anmeldung bei WordPress (im Backend)

19:50 Cache deaktivieren, SSL aktivieren, Domain kaufen & verknüpfen

30:50 Immer Backup nach Installation!

32:20 Installation: Hello Elementor (kostenloses Theme für Elementor)

34:20 Installation und Lizenzierung Elementor Pro

39:05 Die Einführung in Kit-Libraries und die Installation eines Elementor-Kits
Zusatz: Video zum Thema Envato Elementor Kits:

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

45:07 Ab hier arbeiten wir mit unserem Kit

49:30 Der Elementor Theme Builder

50:55 Wir erstellen alle Unterseiten der Website

53:20 Seitenlayout (Wichtige Einstellung)

54:17 Import des Startseiten-Templates in einer Seite

57:05 Das macht man, wenn der Header nicht angezeigt wird.

59:07 Special 1 Design: Website-Einstellungen: Einführung in globale Farben

01:00:41 Einführung in globale Schriftart und Typografie

01:06:38 Anlegen eines Schrift-Guides (So sieht das aus: https://files1.dieberater.de/xA0Yztp)

01:15:30 Schriften Responsive machen durch Basis-Schriftgrößen-Änderungen (für mobile Geräte)

01:16:50 ACHTUNG: dieses Verhalten musst du kennen, wenn du mit Elementor arbeitest!

01:19:00 Gedanken zu Überschriften hinsichtlich SEO

01:30:00 Malte ist an einer einzigen Matheaufgabe gescheitert, die ein Drittklässler lösen kann. Er steht dazu.

01:31:00 Malte bearbeitet weiter Schriften für 21 Minuten

01:52:06 Menü festlegen

01:53:16 Logo als Schrift (Piktogramm-Logos sind eh im Trend)

01:59:30 Special 2 Import von Zeilen: Wir importieren eine Promo-Zeile
Import aus Resta-Kit: https://elements.envato.com/de/resta-restaurant-elementor-template-kit-KNE3L6B

02:13:52 Zweite Zeile importieren (Öffnungszeiten/Anfahrt) aus Fotro:
https://elements.envato.com/de/fotro-food-restaurant-elementor-template-kit-Z73C4B4

02:26:45 Top-Bar (Leiste über Menü) manuell erstellen (Mit Öffnungszeiten und Anfahrt)

02:39:57 Speisekarte einfügen und bearbeiten

02:42:00 Conversion Optimierung: Dem Viewport nicht viel Höhe geben!

02:44:40 Mobile Optimierung

02:49 Der Z-Index (CSS Special)

02:52 Ein letztes Mal: Zeilenabstand für mobile Geräte! Dann hamwas!

02:57 Weitere Tipps, was du jetzt noch machen kannst.

03:02:00 Hinweise zu Google Fonts und Datenschutz

02:53 ja, sorry, hier habe ich falsch geschnitten und auch komplett im Dunkeln geirrt. Hier war ich nach zwei Stunden Aufnahme auch schon sehr matschig in der Birne.

Und viel Erfolg mit diesem Elementor Tutorial auf Deutsch von 2022!

Durchstarterpaket findest du einen exklusiven Podcast für Marketing-Einsteiger, exklusive Checklisten für Profis und 100 weitere Marketing Videos: https://www.websitepiloten.de/start

✌️ Hast du Fragen an mich oder zu diesem Video, dann kommentiere unten oder schreib mir einfach auf Instagram👇
https://www.instagram.com/maltehelmhold

Kostenlose WordPress, SEO oder Online-Marketing Hilfe? Dann besuche uns in unserer Facebook Supportgruppe:
https://www.dieberater.de/facebook-gruppe

Malte Helmhold

Share

Comments

  1. Wenn man sich mal anschaut welchen HTML overhead viele Page Builder produzieren, ist es nur eine Frage der Zeit wann die ersten Probleme auftauchen. Viel Spaß auch wenn mal ein Wechsel ansteht. 🙂

  2. Wenn dich der Gutenberg-Editor oder der neue Widget Editor nervt kann man auch die Plugins "Classic WordPress" und "Classic Widgets" direkt von WordPress nutzen.

  3. Hier sind alle Timestamps aus diesem Video:
    00:00 Malte zeigt, was in diesem Video gebaut wird
    05:26 Malte stellt Envato Template Kits vor:
    https://elements.envato.com/de/template-kits
    (7 Tage kostenlos, kannst das Kit herunterladen und sofort kündigen!)
    10:00 Hier wirds ernster: Malte zeigt die monatlichen Kosten für eine Websites

    11:55 WordPress Installation in einer Raidboxes-Box
    https://www.websitepiloten.de/raidboxes (Affiliate-Link)

    17:14 Erste Anmeldung bei WordPress (im Backend)

    19:50 Cache deaktivieren, SSL aktivieren, Domain kaufen & verknüpfen

    30:50 Immer Backup nach Installation!

    32:20 Installation: Hello Elementor (kostenloses Theme für Elementor)

    34:20 Installation und Lizenzierung Elementor Pro

    39:05 Die Einführung in Kit-Libraries und die Installation eines Elementor-Kits
    Zusatz: Video zum Thema Envato Elementor Kits:
    https://youtu.be/upzozuDYNco

    45:07 Ab hier arbeiten wir mit unserem Kit

    49:30 Der Elementor Theme Builder

    50:55 Wir erstellen alle Unterseiten der Website

    53:20 Seitenlayout (Wichtige Einstellung)

    54:17 Import des Startseiten-Templates in einer Seite

    57:05 Das macht man, wenn der Header nicht angezeigt wird.

    59:07 Special 1 Design: Website-Einstellungen: Einführung in globale Farben

    01:00:41 Einführung in globale Schriftart und Typografie

    01:06:38 Anlegen eines Schrift-Guides (So sieht das aus: https://files1.dieberater.de/xA0Yztp)

    01:15:30 Schriften Responsive machen durch Basis-Schriftgrößen-Änderungen (für mobile Geräte)

    01:16:50 ACHTUNG: dieses Verhalten musst du kennen, wenn du mit Elementor arbeitest!

    01:19:00 Gedanken zu Überschriften hinsichtlich SEO

    01:30:00 Malte ist an einer einzigen Matheaufgabe gescheitert, die ein Drittklässler lösen kann. Er steht dazu.

    01:31:00 Malte bearbeitet weiter Schriften für 21 Minuten

    01:52:06 Menü festlegen

    01:53:16 Logo als Schrift (Piktogramm-Logos sind eh im Trend)

    01:59:30 Special 2 Import von Zeilen: Wir importieren eine Promo-Zeile
    Import aus Resta-Kit: https://elements.envato.com/de/resta-restaurant-elementor-template-kit-KNE3L6B

    02:13:52 Zweite Zeile importieren (Öffnungszeiten/Anfahrt) aus Fotro:
    https://elements.envato.com/de/fotro-food-restaurant-elementor-template-kit-Z73C4B4

    02:26:45 Top-Bar (Leiste über Menü) manuell erstellen (Mit Öffnungszeiten und Anfahrt)

    02:39:57 Speisekarte einfügen und bearbeiten

    02:42:00 Conversion Optimierung: Dem Viewport nicht viel Höhe geben!

    02:44:40 Mobile Optimierung

    02:49 Der Z-Index (CSS Special)

    02:52 Ein letztes Mal: Zeilenabstand für mobile Geräte! Dann hamwas!

    02:57 Weitere Tipps, was du jetzt noch machen kannst.

    03:02:00 Hinweise zu Google Fonts und Datenschutz

    02:53 ja, sorry, hier habe ich falsch geschnitten und auch komplett im Dunkeln geirrt. Hier war ich nach zwei Stunden Aufnahme auch schon sehr matschig in der Birne.

  4. Hallo Malte, vielen Dank für Deine Videos. Aber wie kann ich mit den Templatekits auch eine Woocommerce Shopseite und Produktseite etc. erstellen? Die Shopseite wirft immer Fehler raus oder bin ich zu blöd?

    Vielleicht kannst Du dazu auch mal ein kurzes Video machen. Danke

  5. Hallo guten Tag kann man mit dieser Art wie du es gemacht hast eine gute Webseite bauen für eine Pizzeria aber halt schön weis mit echten bildern

Comments are closed.