Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

Elementor bietet regelmäßig Themen an, mit denen Sie daraus eine vollständige Website erstellen können. Jeden Monat veröffentlichen wir neue Themen, die sich um eine bestimmte Nische drehen und dennoch so flexibel sind, dass Sie sie endlich an Ihre eigenen Bedürfnisse anpassen können.

In Kombination mit Elementor Pro helfen Ihnen diese Themen dabei, schnell mit jedem Teil Ihrer Website zu beginnen, einschließlich:

die pstatisches Alter, wie die Homepage,

  • der Header
  • die Fußzeile
  • Seite 404
  • der Archivbereich 
  • der Blog
  • Popups und andere

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem visuellen Seitenersteller von Elementor eine vollständige Website erstellen.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

So erstellen Sie eine vollständige Website mit Elementor-Themen

In diesem Tutorial lernen Sie, wie Sie ein Thema als Grundlage für alle wichtigen Teile Ihrer Website verwenden und dann alles zusammenfügen, um eine zusammenhängende Website zu erstellen.

Genauer gesagt das Thema digital-Agentur.

Ihre Website enthält eine Reihe grundlegender Seiten, z. B. Seiten:

  • Home
  • Über die
  • Services
  • Kunden
  • Blog
  • Kontakt

Außerdem bietet es Abschnitte, die sich auch dynamischen Inhalten widmen. Beispielsweise stimmen Ihre Blogpost-Archive und Post-Vorlagen automatisch mit Ihren eigenständigen Seiten überein. Sie können auch Kopf- und Fußzeile sowie ändern Seiten 404

So erstellen Sie eine vollständige Website oder einen Blogpascher 1

So erstellen Sie eine Website mit einem Elementor-Thema:

1. Installieren und aktivieren Sie das Elementor Hello-Design 

Da Sie Elementor und eine Designvorlage zum Erstellen Ihrer gesamten Website verwenden, müssen Sie nicht nach anderen Elementen suchen.

Stattdessen benötigen Sie nur eine leichte, leistungsoptimierte Website, die das Elementor Hello-Thema bietet.

Um zu beginnen, gehen Sie zu Aussehen → Themen → Hinzufügen und suchen " Hallo Elementor". Installieren und aktivieren Sie dann das Thema. 

2. Konfigurieren Sie die grundlegenden statischen Seiten Ihrer Website

Dann gehen Sie zum Menü Seiten → Hinzufügen um die Basisseiten Ihrer Website zu erstellen.

Erstellen Sie zunächst eine Seite mit dem Namen " Home "Und klicken Sie auf die Schaltfläche Bearbeiten mit Elementor um Elementor zu starten.

Klicken Sie auf Einstellungen zu öffnen Seiteneinstellungen und ändern Sie das Layout, um gleich zu sein Element oder volle Breite.

Öffnen Sie dann die Elementor-Vorlagenbibliothek und suchen Sie unter nach "Digital Agency" Seiten :

Sie sollten eine Liste der Seitenvorlagen dieses Themas sehen. Vorlage einfügen Startseite aus der Liste der Modelle.

Jetzt sollten Sie eine vollständige Homepage sehen. Der Header sieht vorerst etwas langweilig aus - aber keine Sorge, das werden wir bald beheben.

Fügen Sie als Nächstes eine weitere Seite hinzu, die Sie für Ihre " Über die".

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

Erstellen Sie wie zuvor eine Seite und ändern Sie das Layout in Element oder volle Breite. Öffnen Sie dann die Vorlagenbibliothek und fügen Sie die Vorlage ein Über Uns des Digital Agency-Themas.

Wiederholen Sie jetzt einfach den gleichen Vorgang, um alle anderen Seiten zu erstellen, einschließlich: Dienstleistungen, Kunden und Kontakt.

Mach dir noch keine Sorgen um die Blog-Seite. Diese Seite ist nicht statisch wie die anderen. Aus diesem Grund erstellen Sie es dort mit einer anderen Methode (die wir später in diesem Tutorial behandeln werden).

Um die Einrichtung Ihrer statischen Seiten abzuschließen, müssen Sie Ihre WordPress-Installation anweisen, eine statische Homepage zu verwenden. Um dies zu tun…

  • gehe zu Einstellungen → Wiedergabe
  • Wählen  Eine statische Seite (unten auswählen) unter Ihren Homepage-Einstellungen 
  • Wählen Sie die Seite aus, die die Homepage-Vorlage des Themas enthält

3. Erstellen Sie die anderen Teile Ihrer Website

Jetzt können Sie die anderen Teile Ihrer Website mit Elementor erstellen. Mit Elementor können Sie über das Erstellen statischer Seiten hinausgehen (wie Sie es oben getan haben).

Mit Elementor können Sie auch Abschnitte entwerfen wie: en-Kopf; die Fußzeile, etc ...

Dank des Elementor-Themas können Sie Vorlagen für alle Abschnitte importieren, die sich bereits auf den statischen Seiten befinden, die Sie im vorherigen Schritt erstellt haben.

Um auf den Visual Builder von Elementor zuzugreifen, gehen Sie zu Vorlagen → Theme Builder. Sie müssen Elementor Pro installieren, um darauf zugreifen zu können.

Jetzt ist es Zeit, Ihre Abschnitte zu erstellen

Kopfzeile

Gehen Sie zunächst zur Registerkarte Kopfzeile Klicken Sie dann in der Visual Builder-Oberfläche auf Neu hinzufügen. Auf dem nächsten Bildschirm sehen Sie eine Auswahl an Vorlagen in der Elementor-Bibliothek. Suchen Sie wie bei statischen Seiten nach „Digital Agency“ und fügen Sie dann Folgendes ein:

Elementor - Header-Vorlage einfügen

Jetzt sollten Sie eine visuelle Vorschau Ihrer Kopfzeile sowie ein Navigationsmenü aus der von Ihnen eingefügten Vorlage sehen.

Wenn Sie es ändern möchten

  • gehe zu  Aussehen → Menüs in Ihrem WordPress-Dashboard
  • Erstellen Sie ein neues Menü

Nachdem Sie ein Menü erstellt haben, können Sie die in Schritt 2 erstellten Seiten zu Ihrem Navigationsmenü hinzufügen.

Lesen Sie auch: 10 Automatisierungstools für das Marketing von Kleinunternehmen

Wenn Sie mit dem Hinzufügen von Menüelementen fertig sind, speichern Sie Ihr Menü und kehren Sie zu Ihrer Kopfzeilenvorlage in der Elementor-Oberfläche zurück.

ensuite, veröffentlichen Ihren Header und verwenden Sie Anzeigebedingungen, um Ihre Header-Vorlage auf Ihrer gesamten Website anzuzeigen. Wenn Sie möchten, können Sie auch Anzeigebedingungen verwenden, um verschiedene Kopfzeilen für verschiedene Arten von Inhalten zu erstellen:

Dann drücken Speichern und schließen

Fußzeile

Jetzt ist es Zeit, Ihre Website-Fußzeile zu erstellen:

  • Kehren Sie zur Oberfläche des visuellen Seitenerstellers zurück
  • Klicken Sie auf die Registerkarte Fußzeile 
  • Klicken Sie auf die Schaltfläche zu Neue Fußzeile hinzufügen
  • Geben Sie im Popup Ihrer Fußzeile einen Namen und klicken Sie auf Vorlage erstellen

Jetzt sollten Sie eine Liste mit Fußzeilenvorlagen sehen, genau wie Sie es mit Ihrer Kopfzeile getan haben. Suchen Sie nach "Digital Agency" und fügen Sie die Fußzeilenvorlage ein.

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

Sobald Sie die Fußzeilenvorlage eingefügt haben, sollte eine Vorschau Ihrer Fußzeile angezeigt werden:

ensuite, veröffentlichen Ihre Fußzeilenvorlage und verwenden Sie die Anzeigebegriffe, um sie auf Ihrer gesamten Website anzuzeigen.

Blog-Seite

Im Gegensatz zu den statischen Seiten, die Sie in Schritt 2 erstellt haben, ist die Blog-Seite Ihrer Website ein " Archiv ". Im Grunde bedeutet dies, dass die neuesten Inhalte Ihrer Website dynamisch angezeigt werden.

Wenn ein Benutzer auf ein bestimmtes Element auf der Blog-Seite klickt, wird er zu einer Seite weitergeleitet, die den Inhalt dieses Elements anzeigt. Dies wird als "einzelne" Seite bezeichnet. Ihr einzigartiges Design stellt sicher, dass alle Ihre Inhalte gleich aussehen – das einzige, was sich ändert, ist der eigentliche Inhalt (wie Beitragstitel, Text, Beitragsbild usw.).

Entdecken So fügen Sie mit Elementor ein Inhaltsverzeichnis in WordPress hinzu

Um Archivseiten und eindeutige Seitenvorlagen zu erstellen, sollten Sie den Elementor Visual Builder verwenden - keine Zonen Seite ou Artikel WordPress Standard.

Beginnen…

  • Öffnen Sie die Theme Builder-Oberfläche
  • Gehen Sie zur Registerkarte Archiv
  • Klicken Sie auf Neu hinzufügen
  • Geben Sie ihm einen Namen und klicken Sie auf Vorlage erstellen

Wie bei Ihrer Kopf- und Fußzeile wird eine Liste der Archivseitenvorlagen angezeigt. Suchen Sie nach der Vorlage „Digital Agency“ und fügen Sie sie ein.

Jetzt sollten Sie das grundlegende Design Ihrer Artikelseite sehen.

Es sollte beachtet werden, dass es normal ist, wenn Sie nur einen Artikel sehen, da WordPress nur mit einem Standardbeispiel geliefert wird, das „Hello World! ".

Im Moment müssen Sie nur noch etwas tun veröffentlichen Ihre Archivseite und stellen Sie sie so ein, dass sie in allen Archiven angezeigt wird.

Lesen Sie unseren Leitfaden weiter So migrieren Sie eine WordPress-Website manuell

Dann können Sie in Ihrem Dashboard zum Posts-Menü gehen und neue Blog-Posts erstellen. Ordnen Sie jeden Artikel einer Kategorie namens „News".

Wenn Sie jetzt zu Ihrer Blog-Seite gehen, sollten Sie automatisch alle diese neuen Posts sehen:

Erstellung der Blogpost-Vorlagenseite

An diesem Punkt sieht Ihre Blog-Seite ziemlich benutzerfreundlich aus. Wenn Sie jedoch auf einen bestimmten Blog-Beitrag klicken, stimmt das Layout nicht mit dem Rest Ihrer Website überein.

Um dieses Problem zu lösen, müssen Sie mit Elementor eine "eindeutige" Vorlage erstellen:

  • Öffnen Sie Elementor Visual Builder
  • Gehen Sie zur Registerkarte alleinstehend Posten
  • Klicken Sie auf Neu hinzufügen

Im Popup Neue Vorlage :

  • Geben Sie ihm einen Namen
  • wählen Posten in der Dropdown-Liste Wählen Sie Post Type. Dies teilt Elementor mit, dass Sie diese Vorlage für Ihre Blog-Posts verwenden möchten (im Gegensatz zu Pages oder einem anderen benutzerdefinierten Post-Typ, den Sie verwenden könnten).

Wieder sehen Sie die Elementor-Vorlagenbibliothek. Suchen Sie die eindeutige Artikelvorlage der Vorlage "Digital Agency" und fügen Sie sie ein.

Lesen Sie auch Wartungsmodus unter WordPress: Erläuterung und Konfiguration

Wenn Sie möchten, können Sie die vielen Widgets für dynamische Veröffentlichungsdaten verwenden, um das Erscheinungsbild Ihrer Seite zu steuern.

Zum Beispiel, wenn Sie das Widget ändern  Beitragsinfokönnen Sie die Metadatenelemente steuern, die wie in der Veröffentlichung angezeigt werden ...

  • Autor
  • Erscheinungsdatum
  • Bemerkungen
  • Usw.

Wenn Sie mit Ihrem Artikelmodell zufrieden sind, klicken Sie auf veröffentlichen. Anschließend können Sie die Anzeigeoptionen verwenden, sodass diese eindeutige Vorlage nur für Beiträge in der Kategorie "Jenseits von Nachrichten" gilt:

  • Wählen Sie aus der catégorie
  • Wählen Sie die Kategorie News

Dann drücken Speichern & schließen.

Jetzt sollten alle Ihre Blog-Beiträge ein Design haben, das zum Rest Ihrer Website passt.

Um die Sache zu beenden, gehen Sie zu Aussehen → Menüs und fügen Sie Ihre Blog-Seite zu Ihrem Navigationsmenü hinzu. Dazu können Sie im Abschnitt einen Link zur Kategorie „Neuigkeiten“ hinzufügen Kategorien.

Seite 404

Schließlich müssen Sie die 404-Seite Ihrer Website erstellen. Auf der 404-Seite Ihrer Website sehen Besucher, ob sie einem fehlerhaften Link folgen oder versuchen, eine nicht vorhandene Seite zu besuchen.

Entdecken Sie auch unsere 5 Wordpress-Plugins, um eine bessere Fehler zu verwalten 404

Um Ihre 404-Seite zu erstellen, verwenden Sie den visuellen Builder von Elementor, um eine weitere einzigartige Vorlage hinzuzufügen.

  • Öffnen Sie Elementor Visual Builder
  • Gehen Sie zur Registerkarte Fehler 404
  • Klicken Sie auf Neu hinzufügen
  • Fügen Sie die Vorlage für die digitale Agentur von der 404-Seite ein
404-Seite - Erstellen Sie eine komplette Website

Veröffentlichen Sie als Nächstes Ihre Vorlage, um Ihre Website fertigzustellen.

Holen Sie sich jetzt Elementor Pro!

Fazit

Hier ist ! In diesem Handbuch erfahren Sie Schritt für Schritt, wie Sie mit Elementor eine vollständige Website erstellen. wenn Sie Kommentare oder Vorschläge, zögern Sie nicht, uns im reservierten Bereich zu informieren.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken

...

0 Aktien
Aktie
tweet
Registrieren