Ihre eigene Website erstellen von A-Z

Suche

Beiträge Elementor-PLUS Widgets

  1. Elementor
  2. Widgets -PLUS-
  3. Widgets Elementor Plus 1
  4. Widgets gratis 2
  5. Widgets gratis 3

Widget - Warnung

Das Warnungs-Widget in Elementor ist ein nützliches Werkzeug, um wichtige Informationen oder Hinweise auf Ihrer Website hervorzuheben.

Es eignet sich hervorragend, um Benutzer auf kritische Informationen aufmerksam zu machen, wie z. B. Sicherheitswarnungen, wichtige Ankündigungen oder Hinweise zu besonderen Angeboten.

Mit diesem Widget können Sie sicherstellen, dass Ihre Besucher die wichtigsten Informationen nicht übersehen.

Das Warnungs-Widget bietet Ihnen die Möglichkeit, den Inhalt, das Design und die Darstellung der Warnungen individuell anzupassen, um sie optimal in das Layout Ihrer Website zu integrieren.

Einstellungen des Warnung-Widgets

Das Warnung-Widget bietet eine Vielzahl von Anpassungsmöglichkeiten, die in die Bereiche Inhalt, Stil und Erweitert unterteilt sind.

Inhalt

  • Warnungstext: Geben Sie den Text ein, der in der Warnung angezeigt werden soll.
  • Warnungstyp: Wählen Sie den Typ der Warnung aus, z. B. "Info", "Erfolg", "Warnung" oder "Gefahr".
  • Icon: Fügen Sie optional ein Icon hinzu, um die Warnung visuell zu unterstreichen.

Stil

  • Typografie: Passen Sie die Schriftart, -größe und -farbe des Warnungstextes an.
  • Hintergrundfarbe: Wählen Sie eine Hintergrundfarbe für die Warnung, um sie hervorzuheben.
  • Rahmen: Fügen Sie einen Rahmen um die Warnung hinzu, um sie optisch abzugrenzen.
  • Abstand: Steuern Sie den Innen- und Außenabstand (Padding und Margin) der Warnung.

Erweitert

  • CSS-ID und Klassen: Fügen Sie benutzerdefinierte CSS-IDs oder Klassen hinzu, um spezifische Stile anzuwenden.
  • Responsive Einstellungen: Passen Sie die Sichtbarkeit und die Abstände für verschiedene Geräte (Desktop, Tablet, Mobil) an.
  • Animationen: Wählen Sie Animationseffekte aus, um die Warnung beim Laden der Seite dynamisch darzustellen.

 

Beispiel 1: Wichtige Informationen hervorheben

Um wichtige Informationen auf Ihrer Website hervorzuheben, können Sie das Warnung-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, auf der Sie die Warnung platzieren möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten".
  2. Warnung-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Warnung-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Warnungstext eingeben:
    • Geben Sie den Text ein, den Sie in der Warnung anzeigen möchten (z. B. "Bitte beachten Sie, dass die Lieferzeiten aufgrund von Verzögerungen länger sein können.").
  4. Warnungstyp auswählen:
    • Wählen Sie den Typ der Warnung aus, z. B. "Warnung".
  5. Icon hinzufügen:
    • Fügen Sie optional ein passendes Icon hinzu, um die Warnung visuell zu unterstreichen.
  6. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um die Warnung hervorzuheben.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren", um Ihre Änderungen zu speichern.

 

Beispiel 2: Erfolgreiche Aktion bestätigen

Um eine erfolgreiche Aktion auf Ihrer Website zu bestätigen, können Sie das Warnung-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, auf der Sie die Bestätigung anzeigen möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten".
  2. Warnung-Widget hinzufügen:
    • Suchen Sie nach dem Warnung-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Warnungstext eingeben:
    • Geben Sie den Text ein, der die erfolgreiche Aktion bestätigt (z. B. "Ihre Bestellung wurde erfolgreich abgeschlossen.").
  4. Warnungstyp auswählen:
    • Wählen Sie den Typ "Erfolg" aus, um eine positive Rückmeldung zu geben.
  5. Icon hinzufügen:
    • Fügen Sie optional ein passendes Icon hinzu, um die Bestätigung visuell zu unterstreichen.
  6. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um die Warnung hervorzuheben.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren", um Ihre Änderungen zu speichern.

 

Beispiel 3: Gefahr oder Risiko anzeigen

Um eine Gefahr oder ein Risiko auf Ihrer Website anzuzeigen, können Sie das Warnung-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, auf der Sie die Warnung anzeigen möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten".
  2. Warnung-Widget hinzufügen:
    • Suchen Sie nach dem Warnung-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Warnungstext eingeben:
    • Geben Sie den Text ein, der die Gefahr oder das Risiko beschreibt (z. B. "Achtung: Dieser Inhalt ist nur für Erwachsene geeignet.").
  4. Warnungstyp auswählen:
    • Wählen Sie den Typ "Gefahr" aus, um eine dringende Warnung zu geben.
  5. Icon hinzufügen:
    • Fügen Sie optional ein passendes Icon hinzu, um die Warnung visuell zu unterstreichen.
  6. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um die Warnung hervorzuheben.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren", um Ihre Änderungen zu speichern.

 

Widget - Menü Anker

Das Menü Anker-Widget in Elementor ist ein nützliches Werkzeug, das es Ihnen ermöglicht, Ankerlinks auf Ihrer Website zu erstellen.

Diese Ankerlinks ermöglichen es Benutzern, schnell zu bestimmten Abschnitten einer Seite zu navigieren, indem sie auf einen Link klicken.

Dies ist besonders hilfreich für lange Seiten, wie z. B. Landing Pages oder FAQs, wo Benutzer möglicherweise schnell zu den gewünschten Informationen gelangen möchten.

Mit dem Menü Anker-Widget können Sie eine nahtlose Benutzererfahrung schaffen, indem Sie das Scrollen innerhalb der Seite erleichtern.

 

Einstellungen des Menü Anker-Widgets

Das Menü Anker-Widget bietet eine Vielzahl von Anpassungsmöglichkeiten, die in die Bereiche Inhalt, Stil und Erweitert unterteilt sind.

Inhalt

  • Ankername: Geben Sie einen eindeutigen Namen für den Anker ein. Dieser Name wird verwendet, um den Ankerlink zu erstellen (z. B. „kontakt“ für einen Kontaktbereich).
  • Link: Der Link, der auf den Anker verweist, wird automatisch generiert, basierend auf dem Ankernamen.

Stil

  • Hintergrundfarbe: Passen Sie die Hintergrundfarbe des Ankerbereichs an, um ihn hervorzuheben.
  • Abstand: Stellen Sie den Innen- und Außenabstand (Padding und Margin) des Ankerbereichs ein.
  • Rahmen: Fügen Sie einen Rahmen hinzu, um den Ankerbereich visuell abzugrenzen.

Erweitert

  • CSS-ID und Klassen: Fügen Sie benutzerdefinierte CSS-IDs oder Klassen hinzu, um spezifische Stile anzuwenden.
  • Responsive Einstellungen: Passen Sie die Sichtbarkeit und die Abstände für verschiedene Geräte (Desktop, Tablet, Mobil) an.
  • Animationen: Wählen Sie Animationseffekte aus, um den Ankerbereich beim Laden der Seite dynamisch darzustellen.

 

Beispiel 1: Kontaktbereich verlinken

Um einen Kontaktbereich auf Ihrer Seite zu verlinken, können Sie das Menü Anker-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die den Kontaktbereich enthält.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Anker-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Menü Anker-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite, wo der Kontaktbereich beginnt.
  3. Ankername eingeben:
    • Geben Sie „kontakt“ als Ankername ein.
  4. Stil anpassen:
    • Passen Sie die Hintergrundfarbe und den Abstand an, um den Ankerbereich hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.
  6. Link erstellen:
    • Erstellen Sie einen Link in Ihrem Menü oder an anderer Stelle auf der Seite, der auf „#kontakt“ verweist.

 

Beispiel 2: Über uns-Bereich verlinken

Um den „Über uns“-Bereich auf Ihrer Seite zu verlinken, können Sie das Menü Anker-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die den „Über uns“-Bereich enthält.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Anker-Widget hinzufügen:
    • Suchen Sie nach dem Menü Anker-Widget und ziehen Sie es in den gewünschten Abschnitt, wo der „Über uns“-Bereich beginnt.
  3. Ankername eingeben:
    • Geben Sie „ueber-uns“ als Ankername ein.
  4. Stil anpassen:
    • Passen Sie die Hintergrundfarbe und den Abstand an, um den Ankerbereich hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.
  6. Link erstellen:
    • Erstellen Sie einen Link in Ihrem Menü oder an anderer Stelle auf der Seite, der auf „#ueber-uns“ verweist.

 

Beispiel 3: Dienstleistungen verlinken

Um den Bereich mit Ihren Dienstleistungen auf der Seite zu verlinken, können Sie das Menü Anker-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die Ihre Dienstleistungen präsentiert.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Anker-Widget hinzufügen:
    • Suchen Sie nach dem Menü Anker-Widget und ziehen Sie es in den gewünschten Abschnitt, wo der Dienstleistungsbereich beginnt.
  3. Ankername eingeben:
    • Geben Sie „dienstleistungen“ als Ankername ein.
  4. Stil anpassen:
    • Passen Sie die Hintergrundfarbe und den Abstand an, um den Ankerbereich hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.
  6. Link erstellen:
    • Erstellen Sie einen Link in Ihrem Menü oder an anderer Stelle auf der Seite, der auf „#dienstleistungen“ verweist.

 

Widget - Textpfad

Das Menü Textpfad-Widget in Elementor ist ein kreatives Werkzeug, das es Ihnen ermöglicht, einen dynamischen und ansprechenden Textpfad zu erstellen, der die Navigation auf Ihrer Website unterstützt.

Mit diesem Widget können Sie Text entlang einer benutzerdefinierten Kurve oder Linie anordnen, was nicht nur die visuelle Attraktivität Ihrer Seite erhöht, sondern auch die Benutzererfahrung verbessert.

Es ist ideal für kreative Designs, die sich von traditionellen Menüs abheben möchten.

 

Einstellungen des Menü Textpfad-Widgets

Das Menü Textpfad-Widget bietet eine Vielzahl von Anpassungsmöglichkeiten, die in die Bereiche Inhalt, Stil und Erweitert unterteilt sind.

Inhalt

  • Textinhalt: Geben Sie den Text ein, der entlang des Pfades angezeigt werden soll. Dies kann eine Navigation oder eine andere Art von Information sein.
  • Link: Fügen Sie Links zu den einzelnen Textteilen hinzu, um die Navigation zu ermöglichen.
  • Textpfad-Form: Wählen Sie die Form des Textpfades aus (z. B. gerade, kurvig), um das Layout anzupassen.

Stil

  • Typografie: Passen Sie die Schriftart, -größe und -farbe des Textes an, um sicherzustellen, dass er gut lesbar und ansprechend ist.
  • Textausrichtung: Bestimmen Sie die Ausrichtung des Textes (links, zentriert, rechts).
  • Hintergrundfarbe: Fügen Sie eine Hintergrundfarbe hinzu, um den Textpfad hervorzuheben.
  • Abstand: Stellen Sie den Innen- und Außenabstand (Padding und Margin) des Textpfades ein.

Erweitert

  • CSS-ID und Klassen: Fügen Sie benutzerdefinierte CSS-IDs oder Klassen hinzu, um spezifische Stile anzuwenden.
  • Responsive Einstellungen: Passen Sie die Sichtbarkeit und die Abstände für verschiedene Geräte (Desktop, Tablet, Mobil) an.
  • Animationen: Wählen Sie Animationseffekte aus, um den Textpfad beim Laden der Seite dynamisch darzustellen.

 

Beispiel 1: Kreatives Navigationsmenü

Um ein kreatives Navigationsmenü zu erstellen, können Sie das Menü Textpfad-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die das Navigationsmenü enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Textpfad-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Menü Textpfad-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Textinhalt eingeben:
    • Geben Sie die Menüelemente ein, z. B. „Startseite“, „Über uns“, „Dienstleistungen“, „Kontakt“.
  4. Links hinzufügen:
    • Fügen Sie die entsprechenden Links zu jedem Menüelement hinzu.
  5. Textpfad-Form wählen:
    • Wählen Sie eine kurvige Form für den Textpfad, um ein ansprechendes Design zu erzielen.
  6. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um das Menü hervorzuheben.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 2: Event-Ankündigung

Um eine Event-Ankündigung kreativ zu gestalten, können Sie das Menü Textpfad-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die die Event-Ankündigung enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Textpfad-Widget hinzufügen:
    • Suchen Sie nach dem Menü Textpfad-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Textinhalt eingeben:
    • Geben Sie den Event-Titel ein, z. B. „Sommerfest 2025“.
  4. Links hinzufügen:
    • Fügen Sie Links zu weiteren Informationen oder zur Anmeldung hinzu.
  5. Textpfad-Form wählen:
    • Wählen Sie eine gerade Form für den Textpfad, um eine klare Lesbarkeit zu gewährleisten.
  6. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um die Ankündigung hervorzuheben.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 3: Portfolio-Präsentation

Um Ihr Portfolio kreativ zu präsentieren, können Sie das Menü Textpfad-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Portfolio-Seite.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Textpfad-Widget hinzufügen:
    • Suchen Sie nach dem Menü Textpfad-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Textinhalt eingeben:
    • Geben Sie die Titel Ihrer Projekte ein, z. B. „Projekt A“, „Projekt B“, „Projekt C“.
  4. Links hinzufügen:
    • Fügen Sie Links zu den jeweiligen Projektseiten hinzu.
  5. Textpfad-Form wählen:
    • Wählen Sie eine kurvige Form für den Textpfad, um eine dynamische Präsentation zu erzielen.
  6. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um das Portfolio hervorzuheben.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

Widget - Shortcode

Das Menü Shortcode-Widget in Elementor ist ein vielseitiges Werkzeug, das es Ihnen ermöglicht, Shortcodes in Ihre Seiten einzufügen.

Shortcodes sind spezielle Codes, die in WordPress verwendet werden, um bestimmte Funktionen oder Inhalte anzuzeigen, ohne dass Sie dafür Programmierkenntnisse benötigen.

Mit diesem Widget können Sie beispielsweise Menüs, Formulare oder andere dynamische Inhalte, die durch Shortcodes generiert werden, einfach in Ihre Seiten integrieren.

Das Menü Shortcode-Widget ist besonders nützlich, wenn Sie bereits vorhandene Shortcodes von Plugins oder Themes verwenden möchten, um Ihre Website anzupassen und zu erweitern.

 

Einstellungen des Menü Shortcode-Widgets

Das Menü Shortcode-Widget bietet eine Vielzahl von Anpassungsmöglichkeiten, die in die Bereiche Inhalt, Stil und Erweitert unterteilt sind.

Inhalt

  • Shortcode: Geben Sie den gewünschten Shortcode in das Textfeld ein. Dies kann ein Menü-Shortcode oder ein anderer Shortcode sein, der von einem Plugin oder Theme bereitgestellt wird.
  • Voransicht: Sie können eine Vorschau des Shortcodes im Elementor-Editor sehen, um sicherzustellen, dass er korrekt funktioniert.

Stil

  • Typografie: Passen Sie die Schriftart, -größe und -farbe des Textes an, um sicherzustellen, dass er gut lesbar und ansprechend ist.
  • Hintergrundfarbe: Fügen Sie eine Hintergrundfarbe hinzu, um den Shortcode-Bereich hervorzuheben.
  • Abstand: Stellen Sie den Innen- und Außenabstand (Padding und Margin) des Shortcode-Bereichs ein.

Erweitert

  • CSS-ID und Klassen: Fügen Sie benutzerdefinierte CSS-IDs oder Klassen hinzu, um spezifische Stile anzuwenden.
  • Responsive Einstellungen: Passen Sie die Sichtbarkeit und die Abstände für verschiedene Geräte (Desktop, Tablet, Mobil) an.
  • Animationen: Wählen Sie Animationseffekte aus, um den Shortcode-Bereich beim Laden der Seite dynamisch darzustellen.

 

Beispiel 1: Navigationsmenü einfügen

Um ein bereits erstelltes Navigationsmenü in Ihre Seite einzufügen, können Sie das Menü Shortcode-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die das Navigationsmenü enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Shortcode-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Menü Shortcode-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Shortcode eingeben:
    • Geben Sie den Shortcode für Ihr Menü ein, z. B. [your_menu_shortcode].
  4. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um das Menü hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 2: Kontaktformular einfügen

Um ein Kontaktformular, das durch einen Shortcode bereitgestellt wird, in Ihre Seite einzufügen, können Sie das Menü Shortcode-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die das Kontaktformular enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Shortcode-Widget hinzufügen:
    • Suchen Sie nach dem Menü Shortcode-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Shortcode eingeben:
    • Geben Sie den Shortcode für Ihr Kontaktformular ein, z. B. [contact_form_shortcode].
  4. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um das Formular hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 3: Galerie einfügen

Um eine Galerie, die durch einen Shortcode bereitgestellt wird, in Ihre Seite einzufügen, können Sie das Menü Shortcode-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die die Galerie enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü Shortcode-Widget hinzufügen:
    • Suchen Sie nach dem Menü Shortcode-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Shortcode eingeben:
    • Geben Sie den Shortcode für Ihre Galerie ein, z. B. [gallery_shortcode].
  4. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um die Galerie hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Widget - HTML

Das Menü HTML-Widget in Elementor ist ein flexibles Werkzeug, das es Ihnen ermöglicht, benutzerdefinierten HTML-Code in Ihre Seiten einzufügen.

Mit diesem Widget können Sie nicht nur einfache HTML-Elemente, sondern auch komplexe Strukturen wie Menüs, Tabellen oder andere Inhalte erstellen, die nicht standardmäßig in Elementor verfügbar sind.

Dies ist besonders nützlich, wenn Sie spezifische Anforderungen haben oder Inhalte von Drittanbieter-Plugins oder -Diensten integrieren möchten.

Das Menü HTML-Widget bietet Ihnen die Freiheit, Ihre Inhalte genau so zu gestalten, wie Sie es wünschen, und ermöglicht es Ihnen, die volle Kontrolle über das Layout und das Design zu behalten.

 

Einstellungen des Menü HTML-Widgets

Das Menü HTML-Widget bietet eine Vielzahl von Anpassungsmöglichkeiten, die in die Bereiche Inhalt, Stil und Erweitert unterteilt sind.

Inhalt

  • HTML-Code: Geben Sie den gewünschten HTML-Code in das Textfeld ein. Dies kann ein einfaches Menü, ein Formular oder jede andere HTML-Struktur sein.
  • Vorschau: Sie können eine Vorschau des eingegebenen HTML-Codes im Elementor-Editor sehen, um sicherzustellen, dass er korrekt angezeigt wird.

Stil

  • Typografie: Passen Sie die Schriftart, -größe und -farbe des Textes an, um sicherzustellen, dass er gut lesbar und ansprechend ist.
  • Hintergrundfarbe: Fügen Sie eine Hintergrundfarbe hinzu, um den HTML-Bereich hervorzuheben.
  • Abstand: Stellen Sie den Innen- und Außenabstand (Padding und Margin) des HTML-Bereichs ein.
  • Rahmen: Fügen Sie einen Rahmen hinzu, um den HTML-Bereich visuell abzugrenzen.

Erweitert

  • CSS-ID und Klassen: Fügen Sie benutzerdefinierte CSS-IDs oder Klassen hinzu, um spezifische Stile anzuwenden.
  • Responsive Einstellungen: Passen Sie die Sichtbarkeit und die Abstände für verschiedene Geräte (Desktop, Tablet, Mobil) an.
  • Animationen: Wählen Sie Animationseffekte aus, um den HTML-Bereich beim Laden der Seite dynamisch darzustellen.

 

Beispiel 1: Benutzerdefiniertes Navigationsmenü

Um ein benutzerdefiniertes Navigationsmenü zu erstellen, können Sie das Menü HTML-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die das Navigationsmenü enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü HTML-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Menü HTML-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. HTML-Code eingeben:
    • Geben Sie den HTML-Code für Ihr Menü ein, z. B.:html
    • <nav> <ul> <li><a href="#home">Startseite</a></li> <li><a href="#about">Über uns</a></li> <li><a href="#services">Dienstleistungen</a></li> <li><a href="#contact">Kontakt</a></li> </ul> </nav>
  4. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um das Menü hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 2: Kontaktformular einfügen

Um ein einfaches Kontaktformular mit HTML zu erstellen, können Sie das Menü HTML-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die das Kontaktformular enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü HTML-Widget hinzufügen:
    • Suchen Sie nach dem Menü HTML-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. HTML-Code eingeben:
    • Geben Sie den HTML-Code für Ihr Kontaktformular ein, z. B.:html
    • <form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">E-Mail:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Absenden"> </form>
  4. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um das Formular hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 3: Informationsbox erstellen

Um eine Informationsbox mit HTML zu erstellen, können Sie das Menü HTML-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Seite, die die Informationsbox enthalten soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Menü HTML-Widget hinzufügen:
    • Suchen Sie nach dem Menü HTML-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. HTML-Code eingeben:
    • Geben Sie den HTML-Code für Ihre Informationsbox ein, z. B.:html
    • <div class="info-box"> <h2>Wichtige Informationen</h2> <p>Hier finden Sie alle wichtigen Informationen zu unseren Dienstleistungen.</p> </div>
  4. Stil anpassen:
    • Passen Sie die Typografie und die Hintergrundfarbe an, um die Informationsbox hervorzuheben.
  5. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

HTML-Widget - YouTube Video einfügen

  1. Elementor Editor öffnen:
    • Öffnen Sie die Seite im Elementor-Editor.
  2. HTML Widget hinzufügen:
    • Ziehen Sie das HTML Widget in den gewünschten Bereich Ihrer Seite.
  3. YouTube-Embed-Code einfügen:
    • Gehen Sie zu YouTube, klicken Sie auf das Video, das Sie einfügen möchten, und wählen Sie "Teilen" und dann "Einbetten". Kopieren Sie den Embed-Code.
    • Fügen Sie den Embed-Code in das HTML Widget ein.
  4. Änderungen speichern:
    • Klicken Sie auf "Aktualisieren", um Ihre Änderungen zu speichern.

Vorteile:

  • Flexibilität:
    Sie können den Embed-Code anpassen, um zusätzliche Funktionen hinzuzufügen, wie z.B. benutzerdefinierte Größen oder Parameter.
  • Erweiterte Funktionen:
    Sie haben die Möglichkeit, zusätzliche HTML-Elemente oder Skripte hinzuzufügen.

Nachteile:

  • Technisches Wissen erforderlich:
    Es erfordert ein gewisses Maß an technischem Wissen, um den Embed-Code korrekt zu verwenden.
  • Weniger benutzerfreundlich:
    Für Anfänger kann es komplizierter sein als das Video Widget.

 

YouTube Video per HTML-Code einbetten

Widgets free 02

 

 

 

 

 

 

 

 

 

 

 

 
Der HTML-Code von YouTube zum Einbetten des Videos 

Widgets free 01

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Seite 3 von 3