Ihre eigene Website erstellen von A-Z

Suche

Beiträge - Mega-Menü

Beiträge - Mega-Menü mit KI

  1. Elementor
  2. MEGA-MENÜ
  3. Mega-Menü 1
  4. Mega-Menü 2
  5. Mega-Menü mit KI

Mega-Menü - Website mit KI

In diesem Leitfaden erstellen wir eine WordPress-Website mit Elementor Pro, einem kostenlosen Template und Plugins, die KI nutzen können. 
Der Fokus liegt auf einem Mega-Menü, das auf der ersten Menüebene horizontale Einträge hat und beim Anklicken der Haupteinträge eine zweite Menüleiste zeigt.Beiträge aus den Untermenüs werden in einer dynamischen Sidebar angezeigt. Wir verwenden dabei kostenlose Ressourcen, wo möglich.

1. Installation der Grundkomponenten

  1. WordPress installieren: Richten Sie eine WordPress-Installation ein.
  2. Kostenloses Astra-Theme aktivieren: Gehen Sie zu „Design > Themes“ und wählen Sie Astra als Basislayout.
  3. Plugins installieren:
    • Elementor und Elementor Pro für die Gestaltung.
    • Max Mega Menu für das Mega-Menü.
    • Kostenloses KI-Plugin wie „AI Content Generator“ für die automatische Inhaltsverwaltung.

2. Erstellung des Mega-Menüs (Erste und Zweite Ebene)

Menü der 1. Ebene (Hauptmenüpunkte)

  1. Zu Design > Menüs navigieren:
    • Erstellen Sie ein Hauptmenü mit den Einträgen: Blog, Tiervermittlung, Nachrichten, Medien, Katzen-Infos, Tier-Infos, Tierschutz, Gesundheit, Bücher.
  2. Max Mega Menu aktivieren:
    • Aktivieren Sie das Mega-Menü unter den Menüeinstellungen für dieses Menü.

Menü der 2. Ebene (Untermenüpunkte für „Tiervermittlung“)

  1. Untermenüpunkte hinzufügen:
    • Fügen Sie die Untermenüpunkte hinzu: Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle, Hunde.
  2. Mega-Menü anpassen (Widget-basiert):
    • Gehen Sie zu „Mega Menu > Menü-Themes“ und gestalten Sie die Untermenüpunkte horizontal, sodass sie sichtbar werden, wenn Tiervermittlung angeklickt wird. 

3. Sidebar für die Beiträge der Kategorien

  1. Benutzerdefinierte Sidebars erstellen:
    • Installieren Sie das Plugin „Custom Sidebars“.
    • Erstellen Sie für jede Kategorie (z. B. „Einzelkatzen“, „Katzenpaare“) eine eigene Sidebar.
  2. Widgets zur Sidebar hinzufügen:
    • Ziehen Sie Widgets wie „Beiträge“ oder „Beitragskategorien“ in die Sidebar, um die Beiträge der jeweiligen Kategorie anzuzeigen.
  3. Sidebar zuweisen:
    • Weisen Sie die Sidebars den entsprechenden Kategorien zu.

4. Medienbereich mit eigenem Menü

  1. Medien-Menü erstellen:
    • Erstellen Sie ein separates Menü für den Punkt Medien mit Unterpunkten: Mediatheken, YouTube.
  2. Mediatheken-Seite gestalten:
    • Fügen Sie eine Galerie mit Elementor hinzu, die Bilder und Videos anzeigt.
    • Nutzen Sie das Elementor-Widget „Video“ für YouTube-Inhalte. 

5. Aufbau der Seiten mit Elementor (Container & Widgets)

Erste Ebene: Hauptmenü (Horizontal)

  • Container: Ein horizontaler Header-Container.
  • Widget: Max Mega Menu Widget für das Hauptmenü.

Zweite Ebene: Untermenü (Horizontal für jeden Hauptpunkt)

  • Container: Ein zweiter horizontaler Container unterhalb des Hauptmenüs.
  • Widget: Mega-Menü-Widget mit dynamischen Untermenüpunkten (z. B. „Einzelkatzen“, „Katzenkinder“).

Sidebar (Links)

  • Container: Vertikaler Container links auf der Seite.
  • Widget: „Beiträge“-Widget von Elementor, das Beiträge der jeweiligen Kategorie dynamisch anzeigt.

Hauptinhalt-Bereich

  • Container: Haupt-Container für den dynamischen Inhalt.
  • Widget: Elementor-Widgets wie „Beiträge“, „Bild“, „Texteditor“ für Informationen.

6. Fertigstellung und Fein-Tuning

  1. Responsivität testen:
    • Überprüfen Sie die Website auf Desktop, Tablet und Mobilgeräten mit dem Elementor-Customizer.
  2. KI-Inhalte hinzufügen:
    • Nutzen Sie das „AI Content Generator“-Plugin, um automatisch Texte für Kategorien oder Beiträge wie „Katzenkinder“ oder „Gesundheit“ zu generieren.
  3. SEO optimieren:
    • Installieren Sie ein SEO-Plugin wie RankMath, um die Website für Suchmaschinen zu optimieren.

 

 

WordPress installieren

Um WordPress auf Deutsch zu installieren, folgen Sie diesen einfachen Schritten:

Webhosting und Domain:
Zuerst benötigen Sie einen Webhosting-Anbieter und eine Domain. Viele Anbieter bieten spezielle Pakete für WordPress an, die die Installation erleichtern.

WordPress herunterladen:
Gehen Sie auf die offizielle WordPress-Website und laden Sie die neueste Version von WordPress herunter.

Dateien hochladen:
Entpacken Sie die heruntergeladene ZIP-Datei und laden Sie die Dateien über FTP auf Ihren Webserver hoch. Achten Sie darauf, dass Sie die Dateien im Hauptverzeichnis Ihrer Domain platzieren.

Datenbank einrichten:
Erstellen Sie eine MySQL-Datenbank und einen Benutzer mit allen Rechten für diese Datenbank. Die Zugangsdaten benötigen Sie später während der Installation.

Installation starten:
Rufen Sie Ihre Domain im Browser auf. Sie werden automatisch zum Installationsassistenten von WordPress weitergeleitet. Wählen Sie die Sprache (Deutsch) und geben Sie die Datenbankinformationen ein.

Website konfigurieren:
Folgen Sie den Anweisungen des Installationsassistenten, um Ihre Website zu konfigurieren. Sie können den Titel der Website, den Benutzernamen und das Passwort festlegen.

Fertigstellen:
Nach Abschluss der Installation können Sie sich im WordPress-Dashboard anmelden und mit dem Erstellen Ihrer Website beginnen.


 

Mega-Menü - Website ohne KI

Aufbau eines Programms mit WordPress und Elementor Pro mit einem Mega-Menü und dynamischer Sidebar

In dieser Anleitung erkläre ich Ihnen Schritt für Schritt, wie Sie ein Mega-Menü mit Elementor Pro erstellen, das eine zweite Menüebene horizontal anzeigt, und wie Sie eine dynamische Sidebar einrichten, die Beiträge aus den entsprechenden Kategorien anzeigt. Dabei gehe ich detailliert auf die benötigten Container, Widgets und die Platzierung ein.

1. Voraussetzungen

WordPress Installation bei All-Inkl

Die Installation von WordPress bei All-Inkl ist ein einfacher Prozess, den Sie in wenigen Schritten durchführen können. Hier ist eine detaillierte Anleitung:

Zugang zum KAS:

Melden Sie sich im Kundenadministrationssystem (KAS) von All-Inkl an. Ihre Zugangsdaten finden Sie in der Willkommens-E-Mail oder im Kundenbereich.
Die URL dafür ist: All-Inkl KAS.

Technische Verwaltung:

Nach dem Einloggen gehen Sie zur Technischen Verwaltung. Dort finden Sie die Option für die Software-Installation.

WordPress auswählen:

Um die deutsche Version von WordPress herunterzuladen, können Sie den folgenden Link verwenden: WordPress Deutsch herunterladen
Auf dieser Seite finden Sie immer die aktuelle Version von WordPress in deutscher Sprache, die Sie für Ihre Website verwenden können.

Installation WordPress abschließen:

Zugriff auf WordPress:

Nach der Installation können Sie sich mit Ihrem Benutzernamen und Passwort in der WordPress-Administrationsoberfläche anmelden und mit der Gestaltung I

 

Elementor installieren

  1. WordPress-Dashboard öffnen:
  2. Plugin suchen:
    • Gehen Sie im Menü auf Plugins > Installieren.
    • Geben Sie im Suchfeld oben rechts „Elementor“ ein.
  3. Elementor installieren:
    • Klicken Sie bei „Elementor Website Builder“ auf Jetzt installieren und anschließend auf Aktivieren. Elementor ist nun auf Ihrer Website installiert und einsatzbereit.

 

Elementor PRO installieren

  1. Zurück ins WordPress-Dashboard:
    • Gehen Sie erneut in den Bereich Plugins > Installieren.
  2. Plugin hochladen:
    • Klicken Sie oben auf Plugin hochladen und wählen Sie die zuvor heruntergeladene .zip-Datei von Elementor Pro aus.
    • Klicken Sie auf Jetzt installieren und anschließend auf Aktivieren.

Elementor Pro aktivieren

  1. Lizenzschlüssel eingeben:
    • Nach der Aktivierung werden Sie aufgefordert, Ihre Elementor Pro-Lizenz zu aktivieren.
    • Gehen Sie zu Elementor > Lizenz im WordPress-Dashboard.
  2. Lizenz verbinden:
    • Klicken Sie auf Mit Ihrem Konto verbinden. Sie werden zur Elementor-Website weitergeleitet.
    • Melden Sie sich mit Ihrem Elementor-Konto an, und die Lizenz wird automatisch aktiviert .

 

Elementor und Elementor Pro einsatzbereit machen

  • Nach der Aktivierung können Sie Elementor und Elementor Pro verwenden, um Ihre Website zu gestalten.
  • Sie finden den Elementor-Editor, indem Sie eine Seite oder einen Beitrag bearbeiten und auf Mit Elementor bearbeiten klicken.

     

Kategorien + Beiträge

Kategorien in WordPress anlegen

  1. WordPress-Dashboard öffnen:
  2. Zum Kategorien-Menü navigieren:
    • Gehen Sie im linken Menü zu Beiträge > Kategorien.
  3. Neue Kategorie hinzufügen:
    • Auf der rechten Seite sehen Sie ein Formular mit der Überschrift Neue Kategorie hinzufügen.
    • Geben Sie den Namen der Kategorie ein, z. B. Einzelkatzen.
    • Optional: Geben Sie einen Slug ein (dies ist die URL der Kategorie, z. B. einzelkatzen). Wenn Sie nichts eingeben, wird der Slug automatisch aus dem Namen generiert.
    • Sie können auch eine übergeordnete Kategorie auswählen, falls Sie eine Unterkategorie erstellen möchten (z. B. könnte Katzenkinder eine Unterkategorie von Katzen sein).
    • Fügen Sie eine Beschreibung hinzu, wenn Sie möchten (diese wird je nach Theme angezeigt).
    • Klicken Sie auf Neue Kategorie hinzufügen, um die Kategorie zu speichern.
  4. Wiederholen Sie den Vorgang für weitere Kategorien:
    • Legen Sie auf die gleiche Weise Kategorien wie Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle und Hunde an.

 

2. Beiträge erstellen und Kategorien zuweisen

  1. Neuen Beitrag erstellen:
    • Gehen Sie im WordPress-Dashboard zu Beiträge > Erstellen.
  2. Titel und Inhalt hinzufügen:
    • Geben Sie einen Titel für Ihren Beitrag ein, z. B. „Luna sucht ein Zuhause“.
    • Schreiben Sie den Inhalt des Beitrags, z. B. eine Beschreibung der Katze, Fotos und Kontaktinformationen.
  3. Kategorie auswählen:
    • Auf der rechten Seite des Editors finden Sie den Bereich Kategorien.
    • Wählen Sie die passende Kategorie aus, z. B. Einzelkatzen.
    • Sie können auch mehrere Kategorien auswählen, falls der Beitrag zu mehreren Themen passt (z. B. Einzelkatzen und Notfälle).
  4. Beitrag veröffentlichen:
    • Klicken Sie auf Veröffentlichen, um den Beitrag live zu schalten.
  5. Weitere Beiträge hinzufügen:
    • Wiederholen Sie den Vorgang für weitere Beiträge, z. B.:
      • „Max und Moritz suchen ein Zuhause“ (Kategorie: Katzenpaare)
      • „Kleine Mia sucht eine Familie“ (Kategorie: Katzenkinder)
      • „Felix – ein tapferer Kämpfer“ (Kategorie: Handicap-Katzen)
      • „Patenschaft für Bella übernehmen“ (Kategorie: Patenschaft)
      • „Pflegestelle für Sammy gesucht“ (Kategorie: Pflegestellen)
      • „Dringender Notfall: Lucky braucht Hilfe“ (Kategorie: Notfälle)
      • „Bello sucht ein neues Zuhause“ (Kategorie: Hunde).

 

3. Kategorien auf Ihrer Website anzeigen

  1. Menüeinträge hinzufügen:
    • Gehen Sie zu Design > Menüs.
    • Wählen Sie die gewünschten Kategorien aus der Liste aus und fügen Sie sie Ihrem Menü hinzu.
    • Speichern Sie das Menü, damit die Kategorien in der Navigation Ihrer Website erscheinen.
  2. Kategorien-Widget verwenden:
    • Gehen Sie zu Design > Widgets.
    • Fügen Sie das Kategorien-Widget zu einer Sidebar oder einem Footer-Bereich hinzu.
    • Besucher können dann direkt auf die Kategorien klicken, um die entsprechenden Beiträge zu sehen.

4. Beispiele für Kategorien und Beiträge

  • Kategorie: Einzelkatzen
    • Beitrag: „Luna sucht ein Zuhause“
  • Kategorie: Katzenpaare
    • Beitrag: „Max und Moritz suchen ein Zuhause“
  • Kategorie: Katzenkinder
    • Beitrag: „Kleine Mia sucht eine Familie“
  • Kategorie: Handicap-Katzen
    • Beitrag: „Felix – ein tapferer Kämpfer“
  • Kategorie: Patenschaft
    • Beitrag: „Patenschaft für Bella übernehmen“
  • Kategorie: Pflegestellen
    • Beitrag: „Pflegestelle für Sammy gesucht“
  • Kategorie: Notfälle
    • Beitrag: „Dringender Notfall: Lucky braucht Hilfe“
  • Kategorie: Hunde
    • Beitrag: „Bello sucht ein neues Zuhause“

Zusammenfassung der benötigten Container und Widgets

Für das Mega-Menü:

  • Container:
    • Ein Hauptcontainer für den Header.
    • Ein zusätzlicher Container für die zweite Menüebene (horizontal).
  • Widgets:
    • Nav Menu Widget: Für die Hauptmenüstruktur.
    • Text-Widget oder Icon-Box-Widget: Für die Untermenüpunkte.

Für die Sidebar:

  • Container:
    • Ein Container für die Sidebar.
  • Widgets:
    • Posts Widget: Zeigt Beiträge aus der aktuellen Kategorie an.
    • Kategorien-Widget: Zeigt eine Liste aller Kategorien an.
    • Text-Widget: Für Beschreibungen oder zusätzliche Informationen.

 

Schritt 1
Menü in WordPress erstellen

  1. Gehen Sie zu Design > Menüs.
  2. Erstellen Sie ein neues Menü (z. B. "Hauptmenü").
  3. Fügen Sie die Hauptmenüpunkte der ersten Ebene hinzu:
    • Blog
    • Tiervermittlung
    • Nachrichten
    • Medien
    • Katzen-Infos
    • Tier-Infos
    • Tierschutz
    • Gesundheit
    • Bücher
  4. Fügen Sie Untermenüpunkte Tiervermittlung hinzu:
    • Einzelkatzen
    • Katzenpaare
    • Katzenkinder
    • Handicap-Katzen
    • Patenschaft
    • Pflegestellen
    • Notfälle
    • Hunde

Weitere Hauptmenüpunkte hinzufügen

  1. Wiederhole den Vorgang für andere Hauptmenüpunkte, z. B. Medien:
    • Füge die Untermenüpunkte hinzu:
      • Mediatheken
      • YouTube
  2. Füge auch für die anderen Hauptmenüpunkte wie Katzen-Infos, Tier-Infos, Tierschutz, Gesundheit und Bücher entsprechende Untermenüpunkte hinzu.




Schritt 2
Max-Mega-Menü aktivieren

Mega-Menü mit Max Mega Menu (kostenlos)
URL für Max Mega Menu Plugin: Max Mega Menu auf WordPress.org.

  1. Max Mega Menu Plugin installieren:
    • Gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Installieren.
    • Suchen Sie nach „Max Mega Menu“.
    • Klicken Sie auf Jetzt installieren und anschließend auf Aktivieren.
  2. Mega-Menü aktivieren:
    • Gehen Sie zu Design > Menüs.
    • Wählen Sie das Menü aus, das Sie bearbeiten möchten, oder erstellen Sie ein neues Menü.
    • Aktivieren Sie die Checkbox Max Mega Menu aktivieren für das Menü, das Sie verwenden möchten.
  3. Mega-Menü konfigurieren:
    • Klicken Sie auf den blauen Button Mega Menu Settings, der nach der Aktivierung erscheint.
    • Hier können Sie:
      • Spalten hinzufügen: Erstellen Sie mehrere Spalten für Ihre Menüstruktur.
      • Widgets einfügen: Ziehen Sie Widgets wie Text, Bilder oder Links in die Spalten.
      • Design anpassen: Ändern Sie Farben, Schriftarten und Layouts, um das Menü an Ihr Design anzupassen.
  4. Menü speichern:
    • Speichern Sie Ihre Änderungen und überprüfen Sie das Menü auf Ihrer Website.

 

Mega-Menü mit Elementor Pro

URL für Elementor Mega-Menü Anleitung: Elementor Mega Menu erstellen.

  1. Elementor Pro installieren:
    • Stellen Sie sicher, dass Elementor Pro auf Ihrer Website installiert und aktiviert ist. Sie können Elementor Pro hier erwerben: Elementor Pro.
  2. Neues Menü erstellen:
    • Gehen Sie zu Design > Menüs und erstellen Sie ein neues Menü oder bearbeiten Sie ein bestehendes Menü.
    • Fügen Sie die gewünschten Menüelemente hinzu, z. B. „Einzelkatzen“, „Katzenpaare“, „Katzenkinder“ usw.
  3. Mega-Menü mit dem Elementor-Editor erstellen:
    • Öffnen Sie den Elementor-Editor und ziehen Sie das Menü-Widget (verfügbar in Elementor Pro) in den Header-Bereich Ihrer Seite.
    • Klicken Sie auf das Menü-Widget, um die Einstellungen zu öffnen.
  4. Mega-Menü aktivieren:
    • Aktivieren Sie die Mega-Menü-Funktion im Menü-Widget.
    • Fügen Sie Inhalte wie Bilder, Videos oder Widgets in die Dropdown-Bereiche ein. Sie können mehrere Spalten erstellen und diese individuell gestalten.
  5. Design anpassen:
    • Verwenden Sie die Elementor-Designoptionen, um Farben, Schriftarten und Layouts anzupassen.
    • Sie können auch Animationen oder Hover-Effekte hinzufügen, um das Menü interaktiver zu gestalten.
  6. Speichern und veröffentlichen:
    • Speichern Sie Ihre Änderungen und veröffentlichen Sie die Seite.


Welches Widget für Elementor Pro Mega-Menü verwenden?

  • Verwenden Sie das Menü-Widget von Elementor Pro, das speziell für die Erstellung von Mega-Menüs entwickelt wurde. Es ermöglicht Ihnen:
    • Mehrspaltige Layouts.
    • Einfügen von Widgets wie Bilder, Videos oder Text.
    • Anpassung des Dropdown-Verhaltens (z. B. Hover oder Klick).

Schritt 3
Mega-Menü mit Elementor Pro gestalten

  1. Öffnen Sie den Elementor-Editor und fügen Sie einen Container für den Header hinzu.
  2. Platzieren Sie das Nav Menu Widget in den Container.
  3. Wählen Sie das zuvor erstellte Menü (Hauptmenü) aus.
  4. Aktivieren Sie die Mega-Menü-Funktion:
    • Klicken Sie auf einen Hauptmenüpunkt (z. B. "Tiervermittlung").
    • Aktivieren Sie die Option Mega-Menü.
    • Fügen Sie einen neuen Container für die zweite Ebene hinzu.
    • Platzieren Sie die Untermenüpunkte (z. B. "Einzelkatzen", "Katzenpaare") in horizontalen Spalten.

Schritt 4
Layout und Design anpassen

  1. Verwenden Sie Spalten-Widgets, um die Untermenüpunkte in einer horizontalen Struktur anzuordnen.
  2. Fügen Sie Text-Widgets oder Icon-Boxen hinzu, um die Untermenüpunkte visuell ansprechender zu gestalten.
  3. Passen Sie Farben, Schriftarten und Abstände an, um das Menü an das Design Ihrer Website anzupassen.

Schritt 5
Styling des Mega-Menüs

  1. Öffne den Elementor-Editor und wähle das Mega-Menü-Widget aus.
  2. Passe das Design an, indem du Farben, Schriftarten und Abstände einstellst, um sicherzustellen, dass das Menü gut zur Website passt.
  3. Füge Hover-Effekte hinzu, um die Benutzererfahrung zu verbessern.

Schritt: 6
Testen des Mega-Menüs

  1. Besuche die Website und klicke auf die Hauptmenüpunkte, um sicherzustellen, dass die Untermenüs korrekt angezeigt werden.
  2. Überprüfe, ob die Sidebar die richtigen Inhalte anzeigt, wenn du auf die verschiedenen Untermenüpunkte klickst.

Dynamische Sidebar – Benötigte Container und Widgets

Für das Mega-Menü:

  • Container:
    • Ein Hauptcontainer für den Header.
    • Ein zusätzlicher Container für die zweite Menüebene (horizontal).
  • Widgets:
    • Nav Menu Widget: Für die Hauptmenüstruktur.
    • Text-Widget oder Icon-Box-Widget: Für die Untermenüpunkte.

Für die Sidebar:

  • Container:
    • Ein Container für die Sidebar.
  • Widgets:
    • Posts Widget: Zeigt Beiträge aus der aktuellen Kategorie an.
    • Kategorien-Widget: Zeigt eine Liste aller Kategorien an.
    • Text-Widget: Für Beschreibungen oder zusätzliche Informationen.

Sidebar für die jeweiligen Kategorien einrichten

  1. Gehe zu Design > Widgets oder öffne die Sidebar-Vorlage in Elementor.
  2. Füge ein Kategorien-Widget oder ein Beiträge-Widget hinzu, um die entsprechenden Inhalte anzuzeigen.
  3. Konfiguriere das Widget so, dass es die Beiträge aus der aktuellen Kategorie anzeigt.

 

Dynamische Sidebar für Kategorien einrichten

Schritt 1: Kategorien erstellen

  1. Gehen Sie zu Beiträge > Kategorien.
  2. Erstellen Sie Kategorien wie:
    • Einzelkatzen
    • Katzenpaare
    • Katzenkinder
    • Handicap-Katzen
  3. Ordnen Sie Beiträge den entsprechenden Kategorien zu.

Schritt 2: Sidebar mit Elementor Pro erstellen

  1. Elementor Theme Builder verwenden:
    • Gehen Sie in Ihrem WordPress-Dashboard zu Templates > Theme Builder.
    • Wählen Sie Single Post, Archive oder eine andere Vorlage, in der Sie eine Sidebar hinzufügen möchten.
    • Klicken Sie auf Neu hinzufügen, um eine neue Vorlage zu erstellen.
  2. Container für die Sidebar erstellen:
    • Ziehen Sie im Elementor-Editor einen Container (Flexbox-Container) oder eine Spalte in den Bereich, in dem die Sidebar erscheinen soll.
    • Teilen Sie den Bereich in zwei Spalten: Eine größere Spalte für den Hauptinhalt und eine kleinere Spalte für die Sidebar.
  3. Widgets in die Sidebar einfügen:
    • Ziehen Sie Widgets wie das Beiträge-Widget, Kategorien-Widget oder Text-Widget in die Sidebar-Spalte.

Sidebar auf Seiten zuweisen

  1. Gehen Sie zu Templates > Theme Builder und bearbeiten Sie die Sidebar-Vorlage.
  2. Klicken Sie auf Display Conditions und wählen Sie:
    • Include > Kategorien > Einzelkatzen (oder eine andere Kategorie).
  3. Wiederholen Sie diesen Schritt für jede Kategorie, indem Sie separate Sidebars für jede Kategorie erstellen.

Sidebar Inhalte anpassen

  1. Gehe zu Design > Widgets oder öffne die Sidebar-Vorlage in Elementor.
  2. Füge spezifische Widgets hinzu, die für die jeweilige Kategorie relevant sind:
    • Text-Widget: Füge eine kurze Beschreibung der Kategorie hinzu.
    • Kategorien-Widget: Zeige verwandte Kategorien an.
    • Beiträge-Widget: Zeige die neuesten Beiträge aus der aktuellen Kategorie an.

Schritt 3 Beiträge in die Sidebar einfügen

  1. Beiträge-Widget hinzufügen:
    • Ziehen Sie das Beiträge-Widget (Posts Widget) in die Sidebar.
    • Dieses Widget zeigt eine Liste von Beiträgen an, die Sie nach Kategorien, Tags oder anderen Kriterien filtern können.
  2. Query-Einstellungen (Source und Filter):
    • Source (Quelle):
      • Wählen Sie aus, welche Beiträge angezeigt werden sollen. Optionen sind:
        • Posts (Standard-WordPress-Beiträge)
        • Pages (Seiten)
        • Custom Post Types (benutzerdefinierte Beitragstypen, falls vorhanden)
      • Beispiel: Wählen Sie Posts, um Blog-Beiträge anzuzeigen.
    • Filter:
      • Include By: Wählen Sie, welche Beiträge eingeschlossen werden sollen, z. B. nach Kategorie, Tag oder Autor.
      • Exclude By: Schließen Sie bestimmte Beiträge aus, z. B. nach ID oder Kategorie.
      • Order By: Sortieren Sie die Beiträge nach Datum, Titel oder einer anderen Reihenfolge.
      • Beispiel: Zeigen Sie nur Beiträge aus der Kategorie „Katzenkinder“ an, indem Sie unter Include By die Kategorie Katzenkinder auswählen.

Schritt 3 Kategorien in die Sidebar einfügen

  1. Kategorie-Widget hinzufügen:
    • Ziehen Sie das Kategorien-Widget in die Sidebar.
    • Dieses Widget zeigt eine Liste aller Kategorien Ihrer Website an.
  2. Einstellungen des Kategorie-Widgets:
    • Hierarchie anzeigen: Aktivieren Sie diese Option, um Unterkategorien einzublenden.
    • Beitragsanzahl anzeigen: Zeigen Sie die Anzahl der Beiträge in jeder Kategorie an.
    • Dropdown-Menü: Aktivieren Sie ein Dropdown-Menü, wenn Sie viele Kategorien haben.
    • Beispiel: Zeigen Sie die Kategorien Einzelkatzen, Katzenpaare, Katzenkinder und Notfälle an, damit Besucher schnell zu den entsprechenden Beiträgen navigieren können.
  3. Design anpassen:
    • Verwenden Sie die Elementor-Styling-Optionen, um Schriftarten, Farben und Abstände anzupassen.

Schritt 3 Text-Widget in die Sidebar einfügen

  1. Text-Widget hinzufügen:
    • Ziehen Sie das Text-Widget in die Sidebar.
    • Dieses Widget ermöglicht es Ihnen, beliebigen Text oder HTML-Code hinzuzufügen.
  2. Beispiel für das Text-Widget:
    • Fügen Sie einen Begrüßungstext oder eine kurze Beschreibung hinzu, z. B.:

javascript

Willkommen auf unserer Website! Hier finden Sie Informationen zu unseren Katzen, die ein Zuhause suchen.

    • Sie können auch Links zu wichtigen Seiten oder Kategorien hinzufügen.
  1. Design anpassen:
    • Verwenden Sie die Styling-Optionen, um den Text hervorzuheben, z. B. durch größere Schriftarten oder farbige Hintergründe.

Schritt 4 Design anpassen

  • Passen Sie das Layout der Beiträge an, z. B. Raster, Liste oder Karussell.
  • Beispiel: Zeigen Sie die Beiträge in einer Liste mit einem kleinen Vorschaubild und Titel an.

Sidebar-Inhalte anpassen

  1. Gehe zu Design > Widgets oder öffne die Sidebar-Vorlage in Elementor.
  2. Füge spezifische Widgets hinzu, die für die jeweilige Kategorie relevant sind:
    • Text-Widget: Füge eine kurze Beschreibung der Kategorie hinzu.
    • Kategorien-Widget: Zeige verwandte Kategorien an.
    • Beiträge-Widget: Zeige die neuesten Beiträge aus der aktuellen Kategorie an.

Schritt 5 Sidebar speichern und veröffentlichen

  1. Speichern:
    • Klicken Sie auf Veröffentlichen, um die Sidebar zu speichern.
    • Wählen Sie die Bedingungen aus, unter denen die Sidebar angezeigt werden soll (z. B. nur auf Blog-Seiten oder Beiträgen).
  2. Überprüfen:
    • Besuchen Sie Ihre Website, um sicherzustellen, dass die Sidebar korrekt angezeigt wird.


Styling der Sidebar

Verwende Elementor, um das Design der Sidebar anzupassen:

  • Wähle Farben, Schriftarten und Abstände, die zur Gesamtgestaltung der Website passen.
  • Füge Bilder oder Icons hinzu, um die Sidebar visuell ansprechender zu gestalten.

Sidebar auf Seiten testen

  1. Besuche verschiedene Seiten und Kategorien auf deiner Website.
  2. Überprüfe, ob die Sidebar die richtigen Inhalte anzeigt, die den jeweiligen Kategorien entsprechen. 

Anpassungen und Optimierungen

  1. Analysiere das Nutzerverhalten mithilfe von Tools wie Google Analytics, um zu sehen, welche Inhalte in der Sidebar am meisten angeklickt werden.
  2. Passe die Sidebar-Inhalte regelmäßig an, um sicherzustellen, dass sie aktuell und relevant bleiben.

Feedback einholen

  1. Bitte Benutzer oder Teammitglieder um Feedback zur Benutzererfahrung der Sidebar.
  2. Berücksichtige das Feedback, um weitere Verbesserungen vorzunehmen.

Wartung der Sidebar

  1. Halte die Sidebar-Inhalte aktuell, indem du regelmäßig neue Beiträge hinzufügst und alte Inhalte entfernst.
  2. Überprüfe die Sidebar nach WordPress-Updates oder Theme-Änderungen, um sicherzustellen, dass alles weiterhin korrekt funktioniert.

Beispiele für die Sidebar

  • Beiträge-Widget:
    • Zeigt die neuesten Beiträge aus der Kategorie „Katzenkinder“ an.
  • Kategorie-Widget:
    • Listet die Kategorien Einzelkatzen, Katzenpaare, Katzenkinder und Notfälle auf.
  • Text-Widget:
    • Zeigt den Text „Willkommen auf unserer Website! Hier finden Sie Informationen zu unseren Katzen, die ein Zuhause suchen.“

 

Beispiele für dynamische Sidebars

Beispiel 1: Sidebar für "Einzelkatzen"

  • Inhalt: Beiträge aus der Kategorie "Einzelkatzen".
  • Widgets: Beiträge-Widget, Text-Widget mit einer Beschreibung der Kategorie.

Beispiel 2: Sidebar für "Katzenpaare"

  • Inhalt: Beiträge aus der Kategorie "Katzenpaare".
  • Widgets: Kategorien-Widget, Bild-Widget mit einem Banner.

Beispiel 3: Sidebar für "Handicap-Katzen"

  • Inhalt: Beiträge aus der Kategorie "Handicap-Katzen".
  • Widgets: Beiträge-Widget, Call-to-Action-Widget ("Jetzt spenden").

Beispiel 4: Sidebar für "Medien"

  • Inhalt: Links zu Mediatheken und YouTube.
  • Widgets: Text-Widget, Icon-Widget für Social Media.

Beispiel 5: Sidebar für "Tierschutz"

  • Inhalt: Beiträge über Tierschutzprojekte.
  • Widgets: Beiträge-Widget, Liste der unterstützten Projekte.

Vorteile einer dynamischen Sidebar

  • Relevante Inhalte: Besucher sehen nur die Inhalte, die für die aktuelle Kategorie oder Seite relevant sind.
  • Bessere Benutzererfahrung: Die Navigation wird intuitiver und übersichtlicher .

Flexibilität: Sie können verschiedene Sidebars für unterschiedliche Kategorien oder Seiten erstellen.

 

 

Aufbau einer Website mit WordPress,
Elementor (kostenlos) und Mega-Menü
für einen Tierschutzverein

Hier erkläre ich Ihnen den Aufbau der Website Schritt für Schritt. Dabei wird ein Mega-Menü erstellt, das horizontal ausgerichtet ist, und für jeden Menüpunkt der Ersten Ebene dynamisch eine spezifische, zweite Menüleiste anzeigt. Kostenlose Plugins und Widgets werden verwendet.

 

Installation der notwendigen Komponenten

  1. WordPress einrichten:
    Installieren Sie WordPress auf Ihrem Webserver
  2. Astra Theme aktivieren:
    Gehen Sie zu „Design > Themes“ und installieren Sie das kostenlose Astra-Theme (Quelle: https://wpastra.com/).
  3. Plugins installieren:

 

Erstellung des Mega-Menüs mit Max Mega Menu

Hauptmenü erstellen:

  • Gehen Sie zu „Design > Menüs“ und erstellen Sie ein Hauptmenü.
  • Fügen Sie folgende Menüpunkte der  Ebenehinzu: 
    Blog, Tiervermittlung, Nachrichten, Medien, Katzen-Infos, Tier-Infos, Tierschutz, Gesundheit, Bücher.
  • Aktivieren Sie die Max Mega Menu-Option für dieses Menü.
  • Quelle: https://www.megamenu.com/documentation/

Untermenüs für „Tiervermittlung“ (2. Ebene):

  • Fügen Sie Untermenüpunkte hinzu: 
    Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle, Hunde.
  • Gehen Sie zu „Mega Menu > Menü-Themes“ und konfigurieren Sie, dass die Untermenüpunkte horizontal angezeigt werden, wenn „Tiervermittlung“ ausgewählt wird. (siehe nächste Seite)

 

 

Mega Menu > Menü-Themes konfigurieren,
um Untermenüpunkte horizontal anzuzeigen

 

Schritt 1: Navigiere zu den Menü-Einstellungen

  1. Melde dich in deinem CMS (z. B. WordPress) an.
  2. Gehe zu Design > Menüs oder Mega Menu > Menü-Themes (je nach Plugin oder Theme, das du verwendest).

Schritt 2: Wähle das Hauptmenü aus

  1. Wähle das Menü aus, in dem sich der Punkt „Tiervermittlung“ befindet.
  2. Stelle sicher, dass „Tiervermittlung“ als Hauptmenüpunkt definiert ist und Untermenüpunkte hat.

Schritt 3: Aktiviere die Mega Menu-Funktion

  1. Klicke auf den Menüpunkt „Tiervermittlung“.
  2. Aktiviere die Option „Mega Menu“ (oft gibt es eine Checkbox oder ein Dropdown-Menü, um dies zu aktivieren).
  3. Wähle die Layout-Option „Horizontal“ oder „Reihen“ aus, um die Untermenüpunkte horizontal anzuzeigen.

Schritt 4: Konfiguriere das Layout

  1. Öffne die Layout-Einstellungen für das Mega Menu.
  2. Stelle sicher, dass die Untermenüpunkte in einer horizontalen Reihe angezeigt werden. Dies kann durch die Auswahl eines Layouts wie „1 Zeile, mehrere Spalten“ erfolgen.
  3. Passe die Breite des Mega Menus an, damit alle Untermenüpunkte sichtbar sind.

Schritt 5: Speichere die Änderungen

  1. Speichere die Änderungen im Menü-Editor.
  2. Überprüfe die Vorschau, um sicherzustellen, dass die Untermenüpunkte korrekt angezeigt werden.

Dynamische Sidebars für die 2. Ebene

Neue Sidebars erstellen:

  • Installieren Sie das Plugin „Custom Sidebars“.

    Das Plugin „Custom Sidebars“ ermöglicht es Ihnen, individuelle Sidebars für verschiedene Seiten, Beiträge oder Kategorien zu erstellen. Es ist besonders nützlich, wenn Sie für spezifische Inhalte unterschiedliche Widgets oder Informationen in der Seitenleiste anzeigen möchten. Dieses Plugin ist eine einfache Lösung, wenn Ihr WordPress-Theme standardmäßig nicht genügend Flexibilität bietet.
  • Erstellen Sie für jeden Menüpunkt der 2. Ebene
    (z. B. „Einzelkatzen“, „Katzenpaare“) eine eigene Sidebar.
  • Quelle: https://wordpress.org/plugins/custom-sidebars/

 

Beitrags-Widgets hinzufügen:

Ziehen Sie das „Beiträge“-Widget in die entsprechende Sidebar und filtern Sie die Beiträge nach Kategorie (z. B. „Einzelkatzen“ zeigt nur Beiträge der Kategorie „Einzelkatzen“ an).

Suchen Sie in der Widget-Liste nach dem Widget „Beiträge“ oder „Neueste Beiträge“. Ziehen Sie das Widget in die Custom-Sidebar „Einzelkatzen Sidebar“.

Sobald das Widget in der Sidebar platziert ist, öffnet sich ein Konfigurationsfenster.

 

Beiträge nach Kategorie filtern

Im Konfigurationsfenster des Widgets sehen Sie eine Option, um die Kategorie auszuwählen.

Wählen Sie die Kategorie „Einzelkatzen“ aus der Dropdown-Liste aus.

Falls keine Dropdown-Liste vorhanden ist, können Sie ein Plugin wie „Category Posts Widget“ verwenden, das diese Funktionalität bietet.

Legen Sie fest, wie viele Beiträge angezeigt werden sollen (z. B. 5 Beiträge).

Optional: Aktivieren Sie die Anzeige von Beitragsdaten wie Titel, Veröffentlichungsdatum oder Auszug.

Schritt 4: Speichern und überprüfen

Klicken Sie auf Speichern, um die Änderungen zu übernehmen.

Gehen Sie auf Ihre Website und navigieren Sie zur Seite, die mit der Sidebar „Einzelkatzen Sidebar“ verknüpft ist.

Überprüfen Sie, ob in der Sidebar nur Beiträge aus der Kategorie „Einzelkatzen“ angezeigt werden.

Beispiel: Kategorie „Einzelkatzen“

Angenommen, Sie haben folgende Beiträge in Ihrer WordPress-Website:

Beitrag 1: „Luna sucht ein Zuhause“ (Kategorie: Einzelkatzen)

Beitrag 2: „Max und Moritz suchen gemeinsam“ (Kategorie: Katzenpaare)

Beitrag 3: „Mia – eine Einzelkatze mit Herz“ (Kategorie: Einzelkatzen)

Nach der Konfiguration des Widgets wird in der Sidebar „Einzelkatzen Sidebar“ nur Folgendes angezeigt:

Luna sucht ein Zuhause

Mia – eine Einzelkatze mit Herz

Beiträge aus anderen Kategorien (z. B. „Katzenpaare“) werden nicht angezeigt.

Zusätzliche Tipps

Styling: Sie können das Erscheinungsbild des Widgets mit CSS anpassen, um es optisch ansprechender zu gestalten.

Erweiterte Funktionen: Wenn Sie mehr Kontrolle über die Anzeige der Beiträge benötigen (z. B. nach Schlagworten filtern), können Sie Plugins wie „Category Posts Widget“ oder „Recent Posts Widget Extended“ verwenden.

Mehrere Kategorien: Falls Sie Beiträge aus mehreren Kategorien anzeigen möchten, können Sie mehrere Kategorien im Widget auswählen (falls unterstützt).

 

Weisen Sie spezifische Sidebars den jeweiligen Kategorien oder Seiten zu, sodass sie dynamisch erscheinen

Hier erkläre ich Ihnen Schritt für Schritt, wie Sie in WordPress spezifische Sidebars den jeweiligen Kategorien oder Seiten zuweisen können, sodass sie dynamisch erscheinen. Dynamische Sidebars passen sich automatisch an den Kontext der Seite oder Kategorie an, die der Benutzer besucht. Dies ist besonders nützlich, um relevante Inhalte anzuzeigen und die Benutzererfahrung zu verbessern.

Was sind dynamische Sidebars?

Dynamische Sidebars sind Seitenleisten, die sich je nach der angezeigten Seite, Kategorie oder Beitrag ändern. Sie ermöglichen es Ihnen, Inhalte gezielt anzuzeigen, die für den Besucher relevant sind. Zum Beispiel könnte eine Sidebar für die Kategorie „Einzelkatzen“ nur Beiträge und Widgets anzeigen, die mit Einzelkatzen zu tun haben.

Voraussetzungen

  • WordPress ist installiert.
  • Das Plugin Custom Sidebars ist aktiviert.
  • Sie haben bereits spezifische Sidebars erstellt (z. B. „Einzelkatzen Sidebar“, „Katzenpaare Sidebar“).
  • Kategorien und Seiten sind in Ihrer Website eingerichtet.

 

Schritt-für-Schritt-Anleitung

Schritt 1: Navigieren Sie zu den Sidebar-Einstellungen

  1. Melden Sie sich in Ihrem WordPress-Dashboard an.
  2. Gehen Sie zu Design > Widgets.
  3. Stellen Sie sicher, dass Sie die spezifischen Sidebars bereits erstellt haben (z. B. „Einzelkatzen Sidebar“, „Katzenpaare Sidebar“).

Schritt 2: Aktivieren Sie die dynamische Zuweisung

  1. Öffnen Sie die Einstellungen des Plugins Custom Sidebars.
  2. Gehen Sie zu Design > Custom Sidebars (oder einem ähnlichen Menüpunkt, je nach Plugin-Version).
  3. Wählen Sie die Sidebar aus, die Sie dynamisch zuweisen möchten (z. B. „Einzelkatzen Sidebar“). 

Schritt 3: Sidebar einer Kategorie zuweisen

  1. Klicken Sie auf die Option Sidebar zuweisen oder Assign Sidebar.
  2. Wählen Sie die Kategorie aus, der die Sidebar zugeordnet werden soll (z. B. „Einzelkatzen“).
  3. Speichern Sie die Änderungen.

Beispiel:

  • Wenn ein Besucher die Kategorie „Einzelkatzen“ aufruft, wird automatisch die „Einzelkatzen Sidebar“ angezeigt. Diese Sidebar könnte Widgets enthalten wie:
    • Eine Liste der neuesten Beiträge aus der Kategorie „Einzelkatzen“.
    • Ein Bild-Widget mit einem Banner für Einzelkatzen.
    • Ein Text-Widget mit einer Beschreibung der Kategorie.

Schritt 4: Sidebar einer Seite zuweisen

  1. Gehen Sie zu Seiten > Alle Seiten.
  2. Bearbeiten Sie die Seite, die Sie mit einer spezifischen Sidebar verknüpfen möchten (z. B. die Seite „Einzelkatzen“).
  3. Scrollen Sie nach unten, bis Sie die Option Sidebar-Einstellungen oder Custom Sidebar sehen.
  4. Wählen Sie die Sidebar aus, die auf dieser Seite angezeigt werden soll (z. B. „Einzelkatzen Sidebar“).
  5. Speichern Sie die Änderungen.

Beispiel:

  • Wenn ein Besucher die Seite „Einzelkatzen“ aufruft, wird die „Einzelkatzen Sidebar“ angezeigt. Diese Sidebar könnte Widgets enthalten wie:
    • Ein Text-Widget mit der Beschreibung: „Hier finden Sie alle Einzelkatzen, die ein Zuhause suchen.“
    • Ein Kategorien-Widget, das nur Beiträge aus der Kategorie „Einzelkatzen“ anzeigt.

Schritt 5: Testen Sie die dynamischen Sidebars

  1. Gehen Sie auf Ihre Website und navigieren Sie zu einer Kategorie (z. B. „Einzelkatzen“) oder Seite (z. B. „Einzelkatzen“).
  2. Überprüfen Sie, ob die richtige Sidebar angezeigt wird.
  3. Wiederholen Sie den Vorgang für andere Kategorien oder Seiten (z. B. „Katzenpaare“).

 

Beispiel: Dynamische Sidebars für Kategorien und Seiten

Angenommen, Sie haben folgende Kategorien und Seiten:

  • Kategorie: Einzelkatzen
  • Kategorie: Katzenpaare
  • Seite: Einzelkatzen
  • Seite: Katzenpaare

Zuweisung der Sidebars:

Einzelkatzen Sidebar:

    • Wird der Kategorie „Einzelkatzen“ und der Seite „Einzelkatzen“ zugewiesen.
    • Enthält Widgets wie:
      • Neueste Beiträge aus der Kategorie „Einzelkatzen“.
      • Ein Bild-Widget mit einem Banner für Einzelkatzen.
      • Ein Text-Widget mit einer Beschreibung der Kategorie.

Katzenpaare Sidebar:

    • Wird der Kategorie „Katzenpaare“ und der Seite „Katzenpaare“ zugewiesen.
    • Enthält Widgets wie:
      • Neueste Beiträge aus der Kategorie „Katzenpaare“.
      • Ein Bild-Widget mit einem Banner für Katzenpaare.
      • Ein Text-Widget mit einer Beschreibung der Kategorie.

 

Vorteile dynamischer Sidebars

  • Relevanz: 
    Besucher sehen nur Inhalte, die für sie relevant sind.
  • Flexibilität: 
    Sie können für jede Kategorie oder Seite eine eigene Sidebar erstellen.
  • Benutzerfreundlichkeit: 

Medienbereich gestalten

Eigene Menüstruktur für „Medien“:

Erstellen Sie ein separates Menü, das nur für „Medien“ gilt, mit den Unterpunkten Mediatheken, YouTube.

Erstellen Sie ein separates Menü für „Medien“

Schritt 1: Navigieren Sie zu den Menüs

  1. Melden Sie sich in Ihrem WordPress-Dashboard an.
  2. Gehen Sie zu Design > Menüs.
  3. Klicken Sie auf Neues Menü erstellen.

Schritt 2: Menü "Medien" erstellen

  1. Geben Sie dem Menü einen Namen, z. B. „Medien-Menü“.
  2. Klicken Sie auf Menü erstellen.

Schritt 3: Menüeinträge hinzufügen

  1. Fügen Sie die gewünschten Seiten oder benutzerdefinierten Links als Menüeinträge hinzu. Für unser Beispiel:
    • Mediatheken: Link zur Seite „Mediatheken“.
    • YouTube: Link zur Seite „YouTube“ oder direkt zu einem YouTube-Kanal.
  2. Klicken Sie auf Menü speichern, um die Änderungen zu sichern.

 

Beispiel-Menüstruktur:

Medien-Menü:

    • Mediatheken (verlinkt zu /mediatheken)
    • YouTube (verlinkt zu /youtube oder einem YouTube-Kanal)
  • Fügen Sie dieses Menü in den Content-Bereich der Medien-Seite ein.

Widgets für Inhalte:

  • Nutzen Sie das Elementor „Galerie“-Widget für Mediatheken.
  • Verwenden Sie das „Video“-Widget, um YouTube-Videos einzubetten.

Aufbau der Seiten mit Elementor

Hauptmenü (1. Ebene)

  • Container:
    Horizontaler Header-Container.
  • Widget:
    Max Mega Menu Widget.

Untermenü (2. Ebene für Tiervermittlung)

  • Container:
    Horizontaler Container direkt unter dem Hauptmenü.
  • Widget:
    Dynamisches Max Mega Menu Widget, das nur bei Auswahl von „Tiervermittlung“ angezeigt wird.

Schritt-für-Schritt-Anleitung
Beiträge“-Widget, das dynamisch die Beiträge einer Kategorie anzeigt
(z. B. „Einzelkatzen“)

Schritt 1: Seite mit Elementor bearbeiten

  1. Melden Sie sich in Ihrem WordPress-Dashboard an.
  2. Gehen Sie zu Seiten > Alle Seiten.
  3. Suchen Sie die Seite, auf der die Beiträge angezeigt werden sollen (z. B. „Einzelkatzen“) und klicken Sie auf Bearbeiten mit Elementor.

Schritt 2: Elementor „Beiträge“-Widget hinzufügen

  1. Ziehen Sie das „Beiträge“-Widget aus der Elementor-Widget-Liste in den gewünschten Bereich der Seite.
  2. Das Widget zeigt standardmäßig alle Beiträge Ihrer Website an.

Schritt 3: Beiträge nach Kategorie filtern

  1. Klicken Sie auf das Widget, um die Einstellungen im linken Bereich zu öffnen.
  2. Gehen Sie zum Tab Abfrage (Query).
  3. Unter Quelle (Source) wählen Sie Beiträge aus.
  4. Scrollen Sie nach unten zu Inkludieren nach (Include by) und wählen Sie Kategorien.
  5. Wählen Sie die gewünschte Kategorie aus, z. B. „Einzelkatzen“.

Jetzt zeigt das Widget nur Beiträge an, die der Kategorie „Einzelkatzen“ zugeordnet sind. 

Schritt 4: Layout und Design anpassen

  1. Gehen Sie zum Tab Layout:
    • Skin: Wählen Sie ein Layout wie „Klassisch“, „Karten“ oder „Karussell“.
    • Spalten: Legen Sie fest, wie viele Beiträge pro Zeile angezeigt werden sollen (z. B. 3 Spalten).
    • Beiträge pro Seite: Bestimmen Sie, wie viele Beiträge insgesamt angezeigt werden sollen (z. B. 6 Beiträge).
  2. Gehen Sie zum Tab Stil:
    • Titel: Passen Sie die Schriftart, Farbe und Größe der Beitragstitel an.
    • Abstände: Stellen Sie die Abstände zwischen den Beiträgen ein.
    • Bilder: Legen Sie fest, wie groß die Vorschaubilder der Beiträge sein sollen.

Schritt 5: Speichern und veröffentlichen

  1. Klicken Sie auf Aktualisieren, um die Änderungen zu speichern.
  2. Besuchen Sie die Seite, um sicherzustellen, dass die Beiträge korrekt angezeigt werden.

 

Beispiel: Dynamische Beiträge für die Kategorie „Einzelkatzen“

Ausgangssituation:

  • Sie haben folgende Beiträge erstellt:
    • Beitrag 1: „Luna sucht ein Zuhause“ (Kategorie: Einzelkatzen)
    • Beitrag 2: „Max und Moritz suchen gemeinsam“ (Kategorie: Katzenpaare)
    • Beitrag 3: „Mia – eine Einzelkatze mit Herz“ (Kategorie: Einzelkatzen)

Ergebnis:

  • Auf der Seite „Einzelkatzen“ wird das Elementor „Beiträge“-Widget eingefügt und so konfiguriert, dass nur Beiträge aus der Kategorie „Einzelkatzen“ angezeigt werden.
  • Das Widget zeigt dynamisch die folgenden Beiträge an:
    • Luna sucht ein Zuhause
    • Mia – eine Einzelkatze mit Herz

Layout-Beispiel:

  • Skin: Karten-Layout
  • Spalten: 2 Spalten
  • Beiträge pro Seite: 4 Beiträge
  • Design: Die Titel der Beiträge sind in einer großen, fettgedruckten Schriftart, und die Vorschaubilder haben abgerundete Ecken. 

 

Sidebar (links)

  • Container:
    Vertikaler Container links.

Inhaltsbereich

  • Container:
    Haupt-Container für den Seiteninhalt.
  • Widget:
    Elementor-Widgets wie „Texteditor“, „Galerie“, „Video“..

 

Beispiel: Seite „Tiervermittlung“

Menüstruktur:

  • Hauptmenü zeigt „Tiervermittlung“ als Menüpunkt der 1. Ebene.
  • „Tiervermittlung“ öffnet eine horizontale Menüleiste mit: Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen

Sidebar für „Einzelkatzen“:

  • Zeigt nur Beiträge mit der Kategorie „Einzelkatzen“ an.
  • Widget: Elementor „Beiträge“-Widget mit Kategorie-Filter.

Hauptinhalt:

  • Zeigt eine Galerie von Einzelkatzen, die zur Adoption bereitstehen.

 

Hauptmenü mit „Tiervermittlung“ als Menüpunkt der 1. Ebene und horizontaler Menüleiste für Unterpunkte (z. B. Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen)

 

Schritt 1: Hauptmenü erstellen

  1. Melden Sie sich in Ihrem WordPress-Dashboard an.
  2. Gehen Sie zu Design > Menüs.
  3. Klicken Sie auf Neues Menü erstellen.
  4. Geben Sie dem Menü einen Namen, z. B. „Hauptmenü“.
  5. Klicken Sie auf Menü erstellen.

Schritt 2: Menüpunkt „Tiervermittlung“ hinzufügen

  1. Unter Menüeinträge hinzufügen wählen Sie Benutzerdefinierter Link.
  2. Geben Sie die URL der Hauptseite für „Tiervermittlung“ ein
    (z. B. /tiervermittlung) oder lassen Sie das Feld leer, wenn es nur als Platzhalter dienen soll.
  3. Geben Sie als Linktext „Tiervermittlung“ ein.
  4. Klicken Sie auf Zum Menü hinzufügen.

Schritt 3: Unterpunkte hinzufügen

  1. Fügen Sie die Unterpunkte (z. B. „Einzelkatzen“, „Katzenpaare“, „Katzenkinder“, „Handicap-Katzen“) hinzu:
    • Wählen Sie Seiten oder Kategorien aus der Liste aus.
    • Klicken Sie auf Zum Menü hinzufügen.
  2. Ziehen Sie die Unterpunkte unter den Menüpunkt „Tiervermittlung“ und rücken Sie sie leicht nach rechts ein, um sie als Unterpunkte zu definieren.

Beispiel-Menüstruktur:

  • Tiervermittlung (Hauptmenüpunkt)
    • Einzelkatzen (Unterpunkt)
    • Katzenpaare (Unterpunkt)
    • Katzenkinder (Unterpunkt)
    • Handicap-Katzen (Unterpunkt)

Schritt 4: Menü speichern und zuweisen

  1. Klicken Sie auf Menü speichern.
  2. Gehen Sie zu Design > Menüs > Menü-Einstellungen.
  3. Wählen Sie das Menü als Primäres Menü aus, damit es auf Ihrer Website angezeigt wird.

Fertigstellung

Design anpassen:

  • Mit Elementor gestalten Sie Schriftarten, Farben und Abstände.

Website testen:

  • Überprüfen Sie die Funktionalität auf Desktop, Tablet und Mobilgeräten.

Veröffentlichung:

  • Sobald alles fertig ist, veröffentlichen Sie die Website.

Astra-Theme Wellness Coach
für Tierschutzverein installieren

WordPress-Dashboard öffnen: Melden Sie sich in Ihrem WordPress-Adminbereich an.

Zu Design > Themes navigieren:
Klicken Sie im Menü auf der linken Seite auf „Design“ und dann auf „Themes“.

Astra suchen:
Klicken Sie auf „Neues hinzufügen“ und geben Sie „Astra“ in die Suchleiste ein.

Theme installieren:
Wenn das Astra-Theme angezeigt wird, klicken Sie auf „Installieren“ und anschließend auf „Aktivieren“, um es auf Ihrer Website zu verwenden.

Starter Sites importieren:
Astra bietet viele vorgefertigte Starter Sites, die speziell für Wellness Coaches geeignet sind. Gehen Sie zu „Astra Options“ und wählen Sie eine Starter Site aus, die zu Ihrem Wellness-Coaching passt. Diese Vorlagen sind ansprechend gestaltet und helfen Ihnen, sofort eine professionelle Website zu erstellen.

Anpassungen vornehmen:
Nutzen Sie die Anpassungsoptionen im WordPress-Customizer, um Farben, Schriftarten und Layouts nach Ihren Wünschen zu gestalten. Astra ist sehr benutzerfreundlich und ermöglicht es Ihnen, Ihre Website intuitiv zu konfigurieren. Sie können Bereiche anpassen, um Ihre Dienstleistungen, Testimonials und Kontaktinformationen hervorzuheben.

Inhalte hinzufügen:
Fügen Sie Ihre Inhalte hinzu, einschließlich Informationen über Ihre Coaching-Dienstleistungen, Blogbeiträge über Gesundheit und Wellness sowie Kontaktformulare, um potenzielle Kunden zu erreichen.

Website veröffentlichen:
Überprüfen Sie Ihre Website auf Fehler und stellen Sie sicher, dass alles gut aussieht. Wenn Sie zufrieden sind, veröffentlichen Sie Ihre Website, damit sie für die Öffentlichkeit zugänglich ist.


 

  1. Elementor und Elementor Pro installieren
  2. Max Mega Menu (kostenlos) + KI-Plugins
  3. Plugins installieren
  4. Hauptmenü erstellen

Seite 1 von 2