Erstellung eines Pop-ups mit Kontaktformular,
das auf einen Button verlinkt ist

Mit Elementor Pro können Sie ein Popup erstellen, das ein Kontaktformular enthält und durch das Klicken auf einen Button ausgelöst wird. Hier erkläre ich Ihnen Schritt für Schritt, wie Sie dies umsetzen können, und gebe Ihnen drei konkrete Beispiele mit einer grafischen Darstellung.

1. Schritt: Kontaktformular erstellen

1. Kontaktformular-Widget hinzufügen:
   • Öffnen Sie den Elementor-Editor für eine beliebige Seite.
   • Ziehen Sie das Formular-Widget in den Arbeitsbereich.
   • Gestalten Sie das Formular mit den gewünschten Feldern (z. B. Name, E-Mail, Nachricht).
2. Formular-Einstellungen anpassen:
   • Gehen Sie zu den Inhaltseinstellungen des Formulars.
   • Legen Sie fest, wohin die Formulardaten gesendet werden sollen (z. B. E-Mail-Adresse).
   • Optional: Fügen Sie eine Erfolgsmeldung hinzu, die nach dem Absenden angezeigt wird.
3. Speichern:
   • Speichern Sie das Formular als Vorlage, damit Sie es später im Popup verwenden können.

2. Schritt: Popup erstellen

1. Neues Popup erstellen:
   • Gehen Sie im WordPress-Dashboard zu Templates > Popups.
   • Klicken Sie auf Neu hinzufügen, geben Sie dem Popup einen Namen (z. B. „Kontaktformular-Popup“) und starten Sie den Elementor-Editor.
2. Popup-Design gestalten:
   • Wählen Sie ein leeres Popup oder eine Vorlage aus.
   • Ziehen Sie das Formular-Widget in das Popup und wählen Sie das zuvor erstellte Kontaktformular aus.
   • Passen Sie das Design des Popups an (z. B. Hintergrundfarbe, Rahmen, Abstände).
3. Schließen-Button hinzufügen:
   • Elementor fügt standardmäßig einen Schließen-Button hinzu. Sie können diesen anpassen oder verschieben (z. B. in die obere rechte Ecke).
4. Popup-Einstellungen konfigurieren:
   • Klicken Sie unten links auf das Zahnradsymbol (Popup-Einstellungen).
   • Legen Sie die Breite, Höhe und Animation des Popups fest.
   • Aktivieren Sie die Option „Klick außerhalb des Popups schließt es“, falls gewünscht.

3. Schritt: Trigger und Bedingungen festlegen

1. Trigger deaktivieren:
   • Da das Popup nur durch einen Button ausgelöst werden soll, deaktivieren Sie alle Trigger (z. B. „Beim Laden der Seite“ oder „Beim Scrollen“).
2. Bedingungen festlegen:
   • Wählen Sie aus, auf welchen Seiten das Popup verfügbar sein soll (z. B. auf der gesamten Website oder nur auf bestimmten Seiten).
3. Speichern und veröffentlichen:
   • Speichern Sie das Popup und veröffentlichen Sie es.

4. Schritt: Button mit Popup verlinken

1. Button hinzufügen:
   • Gehen Sie zu der Seite, auf der der Button erscheinen soll.
   • Ziehen Sie das Button-Widget in den Arbeitsbereich.
2. Popup mit Button verknüpfen:
   • Wählen Sie den Button aus und gehen Sie zu den Link-Einstellungen.
   • Geben Sie im Feld „Link“ den Befehl popup ein und wählen Sie das zuvor erstellte Popup aus der Liste aus.
3. Button-Design anpassen:
   • Gestalten Sie den Button (z. B. Farbe, Größe, Text) passend zum Design Ihrer Website.
4. Speichern und testen:
   • Speichern Sie die Seite und testen Sie, ob das Popup korrekt angezeigt wird, wenn der Button geklickt wird.

Drei Beispiele für Pop-ups mit Kontaktformular

Beispiel 1: Allgemeines Kontaktformular

• Ziel: Nutzer können schnell eine Nachricht senden.
• Design: Minimalistisches Popup mit einem weißen Hintergrund und einem einfachen Formular.
• Button-Text: „Kontaktieren Sie uns“.

Beispiel 2: Terminvereinbarung

• Ziel: Nutzer können einen Termin anfragen.
• Design: Popup mit einem Kalender-Widget und einem Formular.
• Button-Text: „Termin vereinbaren“.

Beispiel 3: Feedback-Formular

• Ziel: Nutzer können Feedback zur Website oder zum Service geben.
• Design: Popup mit einem Bewertungsfeld (z. B. Sternebewertung) und einem Textfeld.
• Button-Text: „Feedback geben“.

Zusammenfassung

Mit Elementor Pro können Sie Pop-ups mit Kontaktformularen erstellen, die durch Buttons ausgelöst werden. Diese Pop-ups sind ideal für Kontaktanfragen, Terminvereinbarungen oder Feedback. Durch die flexible Gestaltung und einfache Verknüpfung mit Buttons können Sie die Nutzererfahrung auf Ihrer Website erheblich verbessern.

---

---

Erstellung eines seitlichen Login-Pop-ups mit Elementor Pro

Ein seitliches Login-Popup (auch „Slide-In Popup“ genannt) ist eine elegante Möglichkeit, Nutzern den Zugriff auf ein Login-Formular zu ermöglichen, ohne sie von der aktuellen Seite wegzuführen. Mit Elementor Pro können Sie ein solches Popup einfach erstellen und anpassen. Hier ist eine detaillierte Schritt-für-Schritt-Anleitung:

1. Voraussetzungen

• Elementor Pro: Der Popup Builder ist nur in der Pro-Version verfügbar.
• Login-Widget: Elementor Pro enthält ein spezielles Login-Widget, das für diese Aufgabe verwendet wird.

2. Popup erstellen

1. Neues Popup erstellen:
   • Gehen Sie in Ihrem WordPress-Dashboard zu Templates > Popups.
   • Klicken Sie auf Neu hinzufügen, geben Sie dem Popup einen Namen (z. B. „Seitliches Login-Popup“), und starten Sie den Elementor-Editor.
2. Popup-Typ auswählen:
   • Wählen Sie im Popup-Editor den Popup-Typ „Fly-In“ aus, um ein seitlich einfahrendes Popup zu erstellen.
   • Gehen Sie zu den Popup-Einstellungen (Zahnradsymbol unten links) und passen Sie die Ausrichtung an:
     • Position: Wählen Sie „Rechts“ oder „Links“, je nachdem, von welcher Seite das Popup erscheinen soll.
     • Breite: Stellen Sie die Breite des Popups ein (z. B. 400px für ein kompaktes Design).

3. Login-Formular hinzufügen

1. Login-Widget einfügen:
   • Ziehen Sie das Login-Widget von Elementor in das Popup.
   • Das Widget enthält standardmäßig Felder für Benutzername/E-Mail und Passwort sowie einen Login-Button.
2. Login-Formular anpassen:
   • Felder:
     • Aktivieren oder deaktivieren Sie die Option „Passwort anzeigen“.
     • Fügen Sie eine Checkbox für „Angemeldet bleiben“ hinzu.
   • Weiterleitung nach Login:
     • Unter den Inhaltseinstellungen können Sie eine Weiterleitungs-URL angeben (z. B. zur Benutzer-Dashboard-Seite).
   • Fehlermeldungen:
     • Passen Sie die Fehlermeldungen an, um sie benutzerfreundlicher zu gestalten.
3. Design des Formulars:
   • Gehen Sie zu den Stil-Einstellungen des Login-Widgets:
     • Hintergrundfarbe: Wählen Sie eine neutrale oder markenkonforme Farbe.
     • Button-Stil: Gestalten Sie den Login-Button auffällig (z. B. mit einer Hover-Farbe).
     • Abstände: Stellen Sie sicher, dass die Felder und der Button ausreichend Platz haben.

4. Schließen-Button hinzufügen

1. Schließen-Button aktivieren:
   • Elementor fügt standardmäßig einen Schließen-Button hinzu. Sie können diesen in den Popup-Einstellungen anpassen.
   • Position: Platzieren Sie den Button oben rechts oder oben links im Popup.
   • Stil: Ändern Sie die Farbe und Größe des Buttons, damit er gut sichtbar ist.
2. Zusätzliche Schließoptionen:
   • Aktivieren Sie in den Popup-Einstellungen die Option „Klick außerhalb des Popups schließt es“.
   • Optional: Ermöglichen Sie das Schließen des Popups durch Drücken der ESC-Taste.

5. Trigger und Bedingungen festlegen

1. Trigger (Popup-Auslöser):
   • Wählen Sie „Beim Klicken auf ein Element“ als Trigger aus.
   • Dies bedeutet, dass das Popup nur angezeigt wird, wenn ein Nutzer auf einen bestimmten Button oder Link klickt.
2. Button mit Popup verknüpfen:
   • Fügen Sie auf Ihrer Website einen Button oder Link hinzu (z. B. „Login“).
   • Verknüpfen Sie den Button mit dem Popup:
     • Wählen Sie den Button aus, gehen Sie zu den Link-Einstellungen, und geben Sie den Befehl popup ein.
     • Wählen Sie das zuvor erstellte Popup aus der Liste aus.
3. Bedingungen (Wo wird das Popup angezeigt?):
   • Legen Sie fest, auf welchen Seiten das Popup verfügbar sein soll (z. B. auf der gesamten Website oder nur auf bestimmten Seiten).
   • Optional: Zeigen Sie das Popup nur für nicht eingeloggte Benutzer an.

6. Testen und Veröffentlichen

1. Testen:
   • Speichern Sie das Popup und testen Sie es auf Ihrer Website.
   • Klicken Sie auf den Button, um sicherzustellen, dass das Popup korrekt angezeigt wird.
   • Testen Sie auch die Login-Funktion und die Weiterleitung nach dem Login.
2. Veröffentlichen:
   • Sobald alles funktioniert, veröffentlichen Sie das Popup und den verknüpften Button.

 

Alles über Popups mit Elementor und Elementor Pro

Elementor und Elementor Pro bieten eine leistungsstarke Möglichkeit, Popups zu erstellen, die auf Ihrer Website vielseitig eingesetzt werden können. Mit dem Pop-up Builder von Elementor Pro können Sie pixelgenaue, ansprechende und funktionale Popups gestalten, die auf bestimmte Aktionen oder Bedingungen reagieren. Im Folgenden erkläre ich Ihnen Schritt für Schritt, wie Sie Popups erstellen, welche Funktionen sie bieten und gebe Ihnen drei konkrete Beispiele.

Was sind Popups in Elementor?

Popups sind modale Fenster, die sich über den Inhalt einer Webseite legen. Sie können durch bestimmte Trigger (z. B. Klicks, Scrollen, Zeitverzögerung) ausgelöst werden und dienen dazu, die Aufmerksamkeit der Besucher auf bestimmte Inhalte zu lenken. Beispiele für den Einsatz von Popups sind:

• Newsletter-Anmeldungen
• Rabattaktionen
• Benachrichtigungen oder wichtige Informationen

Mit Elementor Pro können Sie Popups vollständig anpassen und in Ihre Website-Strategie integrieren.

Funktionen und Vorteile des Elementor Pop-up Builders

• Pixelgenaue Gestaltung:
  Sie können jedes Detail des Popups anpassen, um es perfekt an Ihre Marke anzupassen.
• Vielseitige Trigger und Bedingungen:
  Sie haben volle Kontrolle darüber, wann und wo das Popup erscheint.
• Integration mit anderen Elementor-Widgets:
  Sie können Formulare, Countdown-Timer, Bilder und mehr direkt in das Popup einfügen.
• Mobile Optimierung:
  Popups können für mobile Geräte optimiert werden, um eine bessere Benutzererfahrung zu gewährleisten.

---

---

Schritt-für-Schritt-Anleitung:
So erstellen Sie ein Pop-up mit Elementor Pro

Voraussetzungen

• Elementor Pro:
  Der Pop-up Builder ist nur in der Pro-Version verfügbar.
• Eine aktive WordPress-Website
  mit installiertem Elementor.

2. Pop-up erstellen

1. Gehen Sie zu Elementor Templates:
   • Navigieren Sie im WordPress-Dashboard zu Templates > Popups.
   • Klicken Sie auf Pop-up hinzufügen
     
     
   • Geben Sie Ihrem Pop-up einen Namen.
     

---

---

Vorlage auswählen oder von Grund auf neu erstellen:

• Elementor bietet viele vorgefertigte Pop-up-Designs, die Sie anpassen können.
• Alternativ können Sie ein komplett neues Pop-up erstellen.
  
  

---

 

---

Pop-up Container konfigurieren

• Es handelt sich hier um einen Container, den Sie ganz normal anpassen könne
• Verwenden Sie den Elementor-Editor, um das Layout, die Farben, Schriftarten und Inhalte des Popups zu gestalten.
• Sie können Widgets wie Bilder, Texte, Buttons oder Formulare hinzufügen.

Container bearbeiten / Layout

Im Layout-Tab konfigurieren Sie die grundlegenden Eigenschaften des Papp-Containers, wie Größe, Position und Verhalten.

Wichtige Einstellungen im Layout-Tab:

• Breite und Höhe:
  • Sie können die Breite und Höhe des Popups in Pixeln, Prozent oder Viewport-Einheiten (VW/VH) festlegen.
  • Beispiel: Ein schmaler Newsletter-Pop-up mit einer Breite von 400px und einer automatischen Höhe.
• Positionierung:
  • Legen Sie fest, wo das Pop-up auf der### Konfiguration des Pop-up Containers in Elementor Pro

• Breite und Höhe:
  • Definieren Sie die exakten Dimensionen Ihres Popups
  • Wählen Sie zwischen festen Pixelwerten oder prozentualen Angaben
  • Beispiel:
    Ein Newsletter-Pop-up könnte 500px breit und 400px hoch sein
• Ausrichtung:
  • Zentrieren Sie das Pop-up horizontal und vertikal
  • Passen Sie die Abstände und Ränder präzise an
  • Beispiel:
    Zentriertes Pop-up mit 20px Abstand von allen Seiten
• Responsive Einstellungen:
  • Separate Größen für Desktop, Tablet und Mobile
  • Beispiel: Auf mobilen Geräten wird das Pop-up breiter und niedriger

---

---

Container bearbeiten / Stil

Visuelle Gestaltung

• Hintergrund:
  • Farbauswahl oder Hintergrundbild
  • Farbverlauf oder Transparenz möglich
  • Beispiel:
    Weißer Hintergrund mit subtiler Schatten-Überlagerung
• Rahmen und Ecken:
  • Abrundung der Ecken
  • Rahmenfarbe und -stärke
  • Beispiel:
    Abgerundete Ecken mit 10px Radius und dunkelgrauem Rahmen
• Schatten und Effekte:
  • Schatten-Einstellungen für Tiefenwirkung
  • Hover Effekte
  • Beispiel:
    Leichter Schatten mit 20% Deckkraft

---

---

Container bearbeiten / Erweitert

• Animationen:
  • Eingangs- und Ausgangsanimationen
  • Geschwindigkeit und Timing
  • Beispiel:
    Sanftes Einblenden von unten mit 0,5 Sekunden Dauer
• Schließ-Optionen:
  • Verhalten des Schließ-Buttons
  • Möglichkeiten zum Schließen des Popups
  • Beispiel:
    Schließen durch Klick außerhalb des Popups oder ESC-Taste
• Zugänglichkeit:
  • Tastatur-Navigation
  • Screen Reader-Kompatibilität
  • Beispiel:
    Klare Beschriftungen für Screenreader

---

---

Beispiel: Rabatt Pop-up

Komplette Konfiguration:

• Layout:
  • Breite: 600px
  • Höhe: Automatisch
  • Zentriert
• Stil:
  • Hintergrund: Hellgrau mit 10% Transparenz
  • Ecken: 15px Radius
  • Rahmen: 2px solider dunkelgrauer Rahmen
• Erweitert:
  • Animation: Einfahren von rechts
  • Schließen: Durch Klick-Button und Klick außerhalb
  • Trigger: Nach 5 Sekunden Seitenaufenthalt

---

 

---

Trigger festlegen (Wann wird das Pop-up angezeigt?)

Ein Trigger ist ein Auslöser, der bestimmt, wann ein Pop-up angezeigt wird. Elementor Pro bietet verschiedene Trigger-Optionen, die Sie individuell anpassen können.

Mögliche Trigger in Elementor Pro

1. Beim Laden der Seite:
   • Das Pop-up wird direkt nach dem Laden der Seite angezeigt.
   • Sie können eine Verzögerung in Sekunden einstellen, bevor das Popup erscheint.
   • Beispiel 1:
     Ein Willkommen Pop-up, das nach 5 Sekunden auf der Startseite erscheint, um neue Besucher zu begrüßen.
   • Beispiel 2:
     Ein Pop-up mit einer Rabattaktion, das sofort nach dem Laden einer Produktseite angezeigt wird.
2. Beim Scrollen:
   • Das Pop-up wird angezeigt, wenn der Nutzer eine bestimmte Scroll-Tiefe erreicht hat (z. B. 50 % der Seite).
   • Beispiel 1:
     Ein Newsletter-Pop-up, das erscheint, wenn der Nutzer die Hälfte eines Blogartikels gelesen hat.
   • Beispiel 2:
     Ein Pop-up mit einer Empfehlung für verwandte Produkte, das angezeigt wird, wenn der Nutzer das Ende einer Produktseite erreicht.
3. Beim Verlassen der Seite (Exit-Intent):
   • Das Pop-up wird angezeigt, wenn der Nutzer den Mauszeiger in Richtung des Schließen-Buttons oder der Adressleiste bewegt.
   • Beispiel 1:
     Ein Pop-up mit einem Rabattcode, das erscheint, wenn der Nutzer die Seite verlassen möchte.
   • Beispiel 2:
     Ein Pop-up mit einer Umfrage, das angezeigt wird, bevor der Nutzer die Seite verlässt.
4. Beim Klicken auf ein Element:
   • Das Pop-up wird ausgelöst, wenn der Nutzer auf ein bestimmtes Element (z. B. einen Button oder Link) klickt.
   • Beispiel 1:
     Ein Pop-up mit einem Kontaktformular, das erscheint, wenn der Nutzer auf „Kontaktieren Sie uns“ klickt.
   • Beispiel 2:
     Ein Pop-up mit einer Produktvorschau, das angezeigt wird, wenn der Nutzer auf „Mehr erfahren“ klickt.
5. Nach Inaktivität:
   • Das Pop-up wird angezeigt, wenn der Nutzer für eine bestimmte Zeit inaktiv war.
   • Beispiel 1:
     Ein Pop-up mit einer Nachricht wie „Sind Sie noch da?“, das nach 30 Sekunden Inaktivität erscheint.
   • Beispiel 2:
     Ein Pop-up mit einem Sonderangebot, das nach 1 Minute Inaktivität angezeigt wird.

---

---

Bedingungen festlegen - Wo wird das Pop-up angezeigt?

Die Bedingungen bestimmen, auf welchen Seiten oder für welche Zielgruppen das Popup angezeigt wird. Elementor Pro bietet eine Vielzahl von Optionen, um die Anzeige des Popups gezielt zu steuern.

Mögliche Bedingungen in Elementor Pro

1. Auf bestimmten Seiten:
   • Sie können festlegen, ob das Popup auf der gesamten Website, nur auf bestimmten Seiten oder nur auf bestimmten Seitentypen (z. B. Blogartikel, Produktseiten) angezeigt wird.
   • Beispiel 1: Ein Popup mit einem Rabattcode, das nur auf Produktseiten angezeigt wird.
   • Beispiel 2: Ein Popup mit einer Newsletter-Anmeldung, das nur auf der Startseite erscheint.
2. Für bestimmte Benutzerrollen:
   • Sie können festlegen, ob das Popup nur für bestimmte Benutzerrollen (z. B. Administratoren, Abonnenten, Gäste) angezeigt wird.
   • Beispiel 1: Ein Popup mit einer exklusiven Aktion, das nur für eingeloggte Benutzer sichtbar ist.
   • Beispiel 2: Ein Popup mit einer Aufforderung zur Registrierung, das nur für Gäste angezeigt wird.
3. Auf bestimmten Geräten:
   • Sie können festlegen, ob das Popup nur auf Desktop, Tablet oder Mobilgeräten angezeigt wird.
   • Beispiel 1: Ein Popup mit einer mobilen App-Werbung, das nur auf Mobilgeräten erscheint.
   • Beispiel 2: Ein Popup mit einem großen Bildbanner, das nur auf Desktop-Geräten angezeigt wird.
4. Nach Standort:
   • Sie können das Popup basierend auf dem geografischen Standort des Nutzers anzeigen.
   • Beispiel 1: Ein Popup mit einer Nachricht wie „Kostenloser Versand in Deutschland“, das nur für Nutzer in Deutschland angezeigt wird.
   • Beispiel 2: Ein Popup mit einer regionalen Veranstaltungseinladung, das nur für Nutzer in einer bestimmten Stadt erscheint.
5. Nach Häufigkeit:
   • Sie können festlegen, wie oft ein Popup einem Nutzer angezeigt wird (z. B. nur einmal pro Sitzung oder einmal pro Tag).
   • Beispiel 1: Ein Popup mit einer Rabattaktion, das nur einmal pro Nutzer angezeigt wird.
   • Beispiel 2: Ein Popup mit einer Umfrage, das nur einmal pro Woche erscheint.

---

 

---

Veröffentlichung: Conditions - Trigger - Erweiterte Regeln

 

Popup veröffentlichen

• Sobald Sie das Design, die Trigger und die Bedingungen festgelegt haben, klicken Sie auf Veröffentlichen.
• Testen Sie das Popup, um sicherzustellen, dass es wie gewünscht funktioniert.

---

 

---

Beispiel: 1. Newsletter-Anmeldung

Drei Beispiele für Popups mit Elementor

1. Newsletter-Anmeldung

• Ziel: Besucher dazu bringen, sich für Ihren Newsletter anzumelden.
• Design: Ein einfaches Popup mit einem Formularfeld für die E-Mail-Adresse und einem Call-to-Action-Button („Jetzt anmelden“).
• Trigger: Erscheint nach 10 Sekunden auf der Seite.
• Bedingung: Nur auf der Startseite.
  

---

---

2. Rabattaktion

• Ziel: Kunden einen Rabattcode anbieten, um den Verkauf zu fördern.
• Design: Ein auffälliges Pop-up mit einem Rabattcode und einem Button, der zur Produktseite führt.
• Trigger: Erscheint, wenn der Nutzer 50 % der Seite gescrollt hat.
• Bedingung: Nur auf Produktseiten.
  

---

---

3. Exit-Intent Pop-up

• Ziel: Nutzer davon abhalten, die Seite zu verlassen, ohne eine Aktion auszuführen.
• Design: Ein Pop-up mit einer Nachricht wie „Warten Sie! Möchten Sie 10 % Rabatt erhalten?“ und einem Formular zur Eingabe der E-Mail-Adresse.
• Trigger: Erscheint, wenn der Nutzer den Mauszeiger in Richtung des Schließen-Buttons bewegt.
• Bedingung: Auf allen Seiten der Website.
  

Zusammenfassung

Mit Elementor Pro können Sie hochgradig anpassbare Popups erstellen, die Ihre Website-Besucher ansprechen und Ihre Ziele unterstützen. Der Pop-up Builder bietet Ihnen die Möglichkeit, Design, Trigger und Bedingungen genau auf Ihre Bedürfnisse abzustimmen. Egal, ob Sie Newsletter-Abonnenten gewinnen, Verkäufe steigern oder wichtige Informationen teilen möchten – Elementor Popups sind ein vielseitiges Werkzeug, das Ihnen dabei hilft, Ihre Website effektiver zu gestalten.

---

 

---

Ansicht Pop-up im Frontend

Zusätzliche Widgets für den Theme-Builder

Ein paar Widgets, die ganz spezifisch für den Theme-Builder gedacht sind, bzw. für die Elemente Ihrer Webseite, die Sie damit erstellen. Diese finden Sie unter

• Website
• Single

---

---

Beispiel Site-Logo im Astra Customizer erstellen

Sie haben ein Logo mit dem Namen „R&K Webdesign.png“ im Astra Customizer hochgeladen. Anschließend erstellen Sie im Elementor Theme Builder eine neue Header-Vorlage und fügen das Site-Logo dynamisch oben links ein. Wenn Sie später das Logo im Astra Customizer ändern, wird es automatisch auch in Ihrem Header aktualisiert. 

1. Customizer öffnen
   • Gehen Sie in Ihrem WordPress-Dashboard zu Design > Customizer.
2. Website-Identität auswählen
   • Navigieren Sie im Customizer zu Allgemeine-Einstellungen > Website-Identität (im Astra Theme auch als „Site Identity“ bezeichnet) 1.
3. Logo hochladen
   • Klicken Sie auf die Option „Logo auswählen“ und laden Sie Ihr gewünschtes Logo hoch.
   • Beispiel: Laden Sie ein PNG-Logo mit transparentem Hintergrund hoch, z. B. „R&K Webdesign.png“.
4. Logo anpassen
   • Passen Sie die Größe des Logos an, indem Sie den Schieberegler für die Logo-Breite verwenden.
   • Beispiel: Stellen Sie die Breite auf 150px ein, damit das Logo gut sichtbar ist.
5. Änderungen speichern
   • Klicken Sie auf „Veröffentlichen“, um das Logo zu speichern und es auf Ihrer Website verfügbar zu machen.

---

 

---

Logo dynamisch im Elementor Theme Builder einfügen

1. Theme Builder öffnen

   • Gehen Sie in Ihrem WordPress-Dashboard zu Templates > Theme Builder und erstellen Sie eine neue Vorlage
     (z. B. für den Header oder eine leere Seite).

2. Leere Seite erstellen

   • Zahnrad Symbol / Wählen Sie "Elementor Canvas" = „Leere Seite“ als Basislayout, um eine neue Seite ohne vorgefertigte Inhalte zu starten. Canvas ist eine total leere Seite
     
     
     

3. Site-Logo Widget hinzufügen

   • Fügen Sie einen Container ein, zwei Bereiche und das Widget in den linken Container.
   • Ziehen Sie im Elementor-Editor das Widget „Site-Logo“ in den Arbeitsbereich. Dieses Widget zeigt das Logo an, das Sie im Astra Customizer hochgeladen haben.
   • Beispiel: Platzieren Sie das Site-Logo oben links auf der Seite im linken Container
     
     
     

4. Dynamische Verbindung überprüfen

   • Stellen Sie sicher, dass das Widget dynamisch mit dem Astra Customizer verbunden ist. Das bedeutet, dass Änderungen am Logo im Customizer automatisch hier übernommen werden. Damit das Site-Logo-Widget automatisch Änderungen im Astra Customizer übernimmt, müssen Sie sicherstellen, dass es dynamisch mit dem Customizer verbunden ist.
     
     

     1. Prüfen, ob das Widget dynamisch ist:

        • Klicken Sie auf das Site-Logo-Widget, nachdem Sie es in den Container gezogen haben.
        • In der linken Sidebar von Elementor sollten Sie sehen, dass das Widget automatisch das Logo aus dem WordPress-Customizer verwendet.
        • Es wird eine Notiz angezeigt wie „Widget ist verknüpft mit“. Wenn diese Notiz nicht sichtbar ist, überprüfen Sie die Einstellung im nächsten Schritt.
          
          

        • Verknüpfung mit dem Astra Customizer sicherstellen

          Gehen Sie in WordPress zu Design > Customizer > Header > Logo.
        • Laden Sie hier Ihr Logo hoch oder wählen Sie es aus der Mediathek aus.
        • Das im Customizer festgelegte Logo sollte jetzt automatisch im Site-Logo-Widget angezeigt werden.
          
          

          Testen Sie die dynamische Verbindung

              Ändern Sie im Astra Customizer das Logo-Bild und prüfen Sie dann, ob das Bild auf der Canvas Seite geändert wurde. Es ist nicht sicher, daß eine                        Notiz über die dynamische Verbindung angezeigt wird.

1. Design anpassen

   • Verwenden Sie die Elementor-Optionen, um das Logo weiter anzupassen (z. B. Größe, Abstände oder Rahmen).
   • Beispiel: Fügen Sie einen Schatteneffekt hinzu, um das Logo hervorzuheben.
     
     

2. Änderungen speichern und veröffentlichen

   • Klicken Sie auf „Veröffentlichen“, um die Seite oder den Header live zu schalten.

 

Theme-Builder - Header-Template erstellen

Theme-Builder aufrufen

Templates / Theme-Builder / Header / Neu hinzufügen

 

---

 

---

Theme-Builder - Bibliothek wird angezeigt

Sie könnten hier eine Vorlage wählen, wir erstellen jedoch den Header von Anfang an. Klicken Sie auf das X.

---

---

 Flexbox-Container (horizontal) hinzufügen

 

horizontal, da in der Kopfzeile Logo - Menü und Suchfunktion nebeneinander angezeigt werden sollen.

---

---

Container Layout konfigurieren

Container bearbeiten / Layout / Elemente

Richtung: Reihe horizontal
Inhalt ausrichten: Ende
Elemente ausrichten: Zentriert

Container Hintergrundfarbe hellgrau

Container bearbeiten / Stil / Hintergrund / Klassisch / Farbe

Farbe : #EBE8E8F1

Container Padding oben + unten

Container bearbeiten / Erweitert / Layout / Innenabstand (Padding)

Abstand oben + unten: 15 px

 

---

---

Widget Suchen in den rechten Container einfügen

Da Inhalt ausrichten auf ans Ende ausgewählt war, rutscht das Widget ganz nach rechts

Widget Search konfigurieren

Search bearbeiten / Inhalt / Suchfeld

Schalter in der gleichen Farbe wie der Hintergrund

Search bearbeiten / Stil / Search Field / 

Hintergrundfarbe: #EBE8E8F1
Textfarbe: Schwarz

---

---

WordPress-Menü einfügen

WordPress Menü bearbeiten / Inhalt / Layout / Menü: MainMenu

links neben dem Suchen-Widget positionieren

---

---

Site-Logo einfügen - ganz links

Site Logo bearbeiten / Inhalt / Site Logo

Logo links ausrichten + Breite: 70%

Logo ganz nach links an den Rand

Site Logo bearbeiten / Erweitert / Größe / Grow

Das vorerst fertige Logo

---

---

Header responsiv machen

für Notebook (Mobil)

Hamburger-Menü erhält gleiche Hintergrundfarbe #EBE8E8F1

Search bearbeiten / Stil / Search Field / Background | Textcolor | Iconcolor

---

---

Header als Template festlegen

Rechte Maustaste bei Veröffentlichen / Als Template speichern / Namen vergeben / Speichern

Template einen Namen geben

Anzeigebedingungen

Klicken Sie wieder auf das Speichern Feld

Display Conditions

Anzeige-Optionen festlegen

Header für die gesamte Website

---

---

Weitere Einstellmöglichkeiten

Save and Close