Preistabelle-Widget (englisch: Price Table Widget)

Das Preistabelle-Widget (englisch: Price Table Widget) in Elementor Pro ist ein hervorragendes Tool, um Preise für verschiedene Produkte oder Dienstleistungen in einer übersichtlichen und ansprechenden Tabelle darzustellen. Es hilft den Besuchern, die verschiedenen Optionen schnell zu vergleichen und die richtige Wahl zu treffen. 

Verwendungszweck des Preistabelle-Widgets

Das Preistabelle-Widget wird verwendet, um eine klare und strukturierte Übersicht über Preise und Angebote zu bieten. Es ist ideal für:

• E-Commerce-Websites:
  Um verschiedene Produkte mit Preisen und Beschreibungen zu präsentieren.
• Dienstleistungsanbieter:
  Um verschiedene Dienstleistungen und deren Kosten klar darzustellen.
• Abonnements oder Mitgliedschaften:
  Um verschiedene Preispläne und deren Vorteile zu vergleichen.

Eine gut gestaltete Preistabelle kann die Entscheidungsfindung der Kunden erleichtern und die Benutzererfahrung verbessern.

---

 

---

1. Inhalt

Im Bereich Inhalt legen Sie fest, welche Elemente in der Preistabelle angezeigt werden.

• Preistabelle hinzufügen:
  • Element hinzufügen:
    Klicken Sie auf „Neues Element hinzufügen“, um einen neuen Preisblock zu erstellen. Sie können mehrere Preisblöcke hinzufügen, um verschiedene Produkte oder Dienstleistungen darzustellen.
• Titel:
  • Produkt- oder Dienstleistungsname:
    Geben Sie den Namen des Produkts oder der Dienstleistung ein, die Sie anbieten.
• Preis:
  • Preis:
    Geben Sie den Preis für das Produkt oder die Dienstleistung ein. Sie können auch Währungen hinzufügen, um die Preise klar zu kennzeichnen.
• Beschreibung:
  • Details:
    Fügen Sie eine kurze Beschreibung hinzu, die zusätzliche Informationen über das Produkt oder die Dienstleistung bietet.
• Features:
  • Merkmale:
    Fügen Sie eine Liste von Merkmalen oder Vorteilen hinzu, die das Produkt oder die Dienstleistung bietet. Dies hilft den Besuchern, die Vorteile schnell zu erfassen.
• Call-to-Action:
  • Button-Text:
    Geben Sie den Text für den Call-to-Action-Button ein, z. B. „Jetzt kaufen“ oder „Mehr erfahren“.
  • Link:
    Geben Sie eine URL ein, auf die Benutzer klicken können, um mehr Informationen zu erhalten oder das Produkt zu kaufen.

---

 

---

2. Stil

Im Bereich Stil können Sie das Aussehen der Preistabelle anpassen.

• Preiselemente:
  • Textfarbe:
    Passen Sie die Farbe der Titel und Preise an, um sicherzustellen, dass sie gut lesbar sind und sich vom Hintergrund abheben.
  • Schriftart:
    Wählen Sie die Schriftart, Größe und Gewicht für die Titel und Preise, um den gewünschten Stil zu erreichen.
• Hintergrund:
  • Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für die Preistabelle oder für einzelne Preisblöcke, um sie hervorzuheben.
  • Abstände:
    Stellen Sie die Innen- und Außenabstände der Preisblöcke ein, um ein sauberes Layout zu gewährleisten.
• Button-Stil:
  • Button-Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für den Call-to-Action-Button.
  • Button-Textfarbe:
    Passen Sie die Textfarbe des Buttons an, um sicherzustellen, dass er gut sichtbar ist.

---

 

---

3. Erweitert

Im Bereich Erweitert können Sie zusätzliche Anpassungen vornehmen.

• CSS-Klasse:
  • Hier können Sie eine benutzerdefinierte CSS-Klasse hinzufügen. Dies ist nützlich, wenn Sie spezifische Stile anwenden möchten, die nicht in den Standardoptionen verfügbar sind.
• Animation:
  • Erscheinungsanimation:
    Wählen Sie eine Animation für das Erscheinen der Preistabelle, wie z. B. „Fade“ oder „Slide“. Dies kann helfen, die Preistabelle ansprechender zu gestalten, wenn sie auf der Seite erscheint.
• Responsive Einstellungen:
  • Sichtbarkeit:
    Passen Sie an, ob die Preistabelle auf mobilen Geräten sichtbar sein soll. Sie können die Preistabelle für bestimmte Bildschirmgrößen ausblenden.
  • Layout-Anpassungen:
    Stellen Sie sicher, dass die Preistabelle auf verschiedenen Bildschirmgrößen gut aussieht, indem Sie die Größe der Elemente und den Abstand anpassen.
• Z-Index:
  • Der Z-Index bestimmt die Schichtung von Elementen auf Ihrer Seite. Wenn Sie mehrere überlappende Elemente haben, können Sie den Z-Index anpassen, um sicherzustellen, dass die Preistabelle immer im Vordergrund bleibt und gut sichtbar ist.

---

Vorschau-Widget (englisch: Preview Widget) 

Das Vorschau-Widget (englisch: Preview Widget) in Elementor Pro ist ein nützliches Tool, um Inhalte oder Produkte in einer ansprechenden und interaktiven Weise darzustellen. Es ermöglicht Ihnen, eine Vorschau von Inhalten anzuzeigen, die Benutzer ansprechen und zum Handeln anregen. 

Verwendungszweck des Vorschau-Widgets

Das Vorschau-Widget wird verwendet, um eine visuelle Vorschau von Inhalten oder Produkten zu präsentieren. Es ist ideal für:

• Produktvorschauen:
  Um Produkte mit Bildern, Beschreibungen und Preisen anzuzeigen.
• Blogbeiträge:
  Um eine kurze Vorschau auf Artikel zu geben, die die Leser anregen, mehr zu erfahren.
• Portfolio-Elemente:
  Um Arbeiten oder Projekte in einem ansprechenden Format zu präsentieren.

Eine gut gestaltete Vorschau kann die Benutzererfahrung verbessern und die Interaktion mit den Inhalten erhöhen.

---

 

---

1. Inhalt

Im Bereich Inhalt legen Sie fest, welche Elemente in der Vorschau angezeigt werden.

• Vorschau-Element hinzufügen:
  • Element hinzufügen:
    Klicken Sie auf „Neues Element hinzufügen“, um einen neuen Vorschau-Block zu erstellen. Sie können mehrere Vorschau-Elemente hinzufügen, um verschiedene Produkte oder Inhalte darzustellen.
• Bild:
  • Bild auswählen:
    Wählen Sie ein Bild aus Ihrer Mediathek oder laden Sie ein neues Bild hoch, das in der Vorschau angezeigt werden soll.
• Titel:
  • Produkt- oder Artikelname:
    Geben Sie den Namen des Produkts oder des Artikels ein, den Sie präsentieren möchten.
• Beschreibung:
  • Kurze Beschreibung:
    Fügen Sie eine kurze Beschreibung hinzu, die zusätzliche Informationen über das Produkt oder den Artikel bietet.
• Preis:
  • Preis:
    Geben Sie den Preis für das Produkt ein, falls zutreffend.
• Call-to-Action:
  • Button-Text:
    Geben Sie den Text für den Call-to-Action-Button ein, z. B. „Jetzt kaufen“ oder „Mehr erfahren“.
  • Link:
    Geben Sie eine URL ein, auf die Benutzer klicken können, um mehr Informationen zu erhalten oder das Produkt zu kaufen.

---

 

---

2. Stil

Im Bereich Stil können Sie das Aussehen der Vorschau anpassen.

• Vorschau-Elemente:
  • Textfarbe:
    Passen Sie die Farbe der Titel und Beschreibungen an, um sicherzustellen, dass sie gut lesbar sind und sich vom Hintergrund abheben.
  • Schriftart:
    Wählen Sie die Schriftart, Größe und Gewicht für die Titel und Beschreibungen, um den gewünschten Stil zu erreichen.
• Hintergrund:
  • Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für die Vorschau oder für einzelne Vorschau-Elemente, um sie hervorzuheben.
  • Abstände:
    Stellen Sie die Innen- und Außenabstände der Vorschau-Elemente ein, um ein sauberes Layout zu gewährleisten.
• Button-Stil:
  • Button-Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für den Call-to-Action-Button.
  • Button-Textfarbe:
    Passen Sie die Textfarbe des Buttons an, um sicherzustellen, dass er gut sichtbar ist.

---

 

---

3. Erweitert

Im Bereich Erweitert können Sie zusätzliche Anpassungen vornehmen.

• CSS-Klasse:
  • Hier können Sie eine benutzerdefinierte CSS-Klasse hinzufügen. Dies ist nützlich, wenn Sie spezifische Stile anwenden möchten, die nicht in den Standardoptionen verfügbar sind.
• Animation:
  • Erscheinungsanimation:
    Wählen Sie eine Animation für das Erscheinen der Vorschau, wie z. B. „Fade“ oder „Slide“. Dies kann helfen, die Vorschau ansprechender zu gestalten, wenn sie auf der Seite erscheint.
• Responsive Einstellungen:
  • Sichtbarkeit:
    Passen Sie an, ob die Vorschau auf mobilen Geräten sichtbar sein soll. Sie können die Vorschau für bestimmte Bildschirmgrößen ausblenden.
  • Layout-Anpassungen:
    Stellen Sie sicher, dass die Vorschau auf verschiedenen Bildschirmgrößen gut aussieht, indem Sie die Größe der Elemente und den Abstand anpassen.
• Z-Index:
  • Der Z-Index bestimmt die Schichtung von Elementen auf Ihrer Seite. Wenn Sie mehrere überlappende Elemente haben, können Sie den Z-Index anpassen, um sicherzustellen, dass die Vorschau immer im Vordergrund bleibt und gut sichtbar ist.

---

Flipbox-Widget (englisch: Flip Box Widget)

Das Flipbox-Widget (englisch: Flip Box Widget) in Elementor Pro ist ein interaktives Element, das es ermöglicht, Inhalte auf ansprechende Weise darzustellen. Es zeigt eine Box, die beim Überfahren mit der Maus oder beim Klicken umgedreht wird, um zusätzliche Informationen anzuzeigen. Dies ist besonders nützlich, um Features, Dienstleistungen oder Produkte hervorzuheben. 

Verwendungszweck des Flipbox-Widgets

Das Flipbox-Widget wird verwendet, um Informationen auf eine dynamische und visuell ansprechende Weise zu präsentieren. Es ist ideal für:

• Produktpräsentationen

  Um verschiedene Produkteigenschaften oder -vorteile hervorzuheben.

• Dienstleistungsangebote:

  Um verschiedene Dienstleistungen und deren Vorteile darzustellen.

• Portfolio-Elemente:

  Um kreative Arbeiten oder Projekte in einem interaktiven Format zu präsentieren.

Eine gut gestaltete Flipbox kann die Benutzererfahrung verbessern und die Interaktivität auf der Website erhöhen.

---

---

1. Inhalt

Im Bereich Inhalt legen Sie fest, welche Informationen in der Flipbox angezeigt werden.

• Vorderseite:

  • Titel:
    Geben Sie den Titel ein, der auf der Vorderseite der Flipbox angezeigt wird.
  • Beschreibung:
    Fügen Sie eine kurze Beschreibung hinzu, die den Inhalt der Vorderseite erklärt.
  • Bild oder Icon:
    Wählen Sie ein Bild oder ein Icon aus, das auf der Vorderseite angezeigt werden soll.

• Rückseite:

  • Titel:
    Geben Sie den Titel ein, der auf der Rückseite der Flipbox angezeigt wird.
  • Beschreibung:
    Fügen Sie eine detaillierte Beschreibung hinzu, die zusätzliche Informationen bietet.
  • Link:
    Optional können Sie einen Link hinzufügen, der auf eine andere Seite oder ein Produkt verweist.

• Animationseinstellungen:

  • Flip-Richtung:
    Wählen Sie die Richtung, in die die Flipbox umgedreht werden soll (z. B. horizontal oder vertikal).

---

 

---

2. Stil

Im Bereich Stil können Sie das Aussehen der Flipbox anpassen.

• Vorderseite:

  • Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für die Vorderseite der Flipbox.
  • Textfarbe:
    Passen Sie die Farbe des Titels und der Beschreibung an, um sicherzustellen, dass sie gut lesbar sind.
  • Schriftart:
    Wählen Sie die Schriftart, Größe und Gewicht für den Text auf der Vorderseite.

• Rückseite:

  • Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für die Rückseite der Flipbox.
  • Textfarbe:
    Passen Sie die Farbe des Titels und der Beschreibung auf der Rückseite an.
  • Schriftart:
    Wählen Sie die Schriftart und Größe für den Text auf der Rückseite.

• Abstände:

  • Innenabstände:
    Stellen Sie die Innenabstände der Flipbox ein, um den Abstand zwischen Text und Rand zu steuern.
  • Außenabstände:
    Passen Sie die Abstände zwischen der Flipbox und anderen Elementen auf der Seite an.

---

 

---

3. Erweitert

Im Bereich Erweitert können Sie zusätzliche Anpassungen vornehmen.

• CSS-Klasse:

  • Hier können Sie eine benutzerdefinierte CSS-Klasse hinzufügen. Dies ist nützlich, wenn Sie spezifische Stile anwenden möchten, die nicht in den Standardoptionen verfügbar sind.

• Animation:

  • Erscheinungsanimation:
    Wählen Sie eine Animation für das Erscheinen der Flipbox, wie z. B. „Fade“ oder „Slide“. Dies kann helfen, die Flipbox ansprechender zu gestalten, wenn sie auf der Seite erscheint.

• Responsive Einstellungen:

  • Sichtbarkeit:
    Passen Sie an, ob die Flipbox auf mobilen Geräten sichtbar sein soll. Sie können die Flipbox für bestimmte Bildschirmgrößen ausblenden.
  • Layout-Anpassungen:
    Stellen Sie sicher, dass die Flipbox auf verschiedenen Bildschirmgrößen gut aussieht, indem Sie die Größe der Elemente und den Abstand anpassen.

• Z-Index:

  • Der Z-Index bestimmt die Schichtung von Elementen auf Ihrer Seite. Wenn Sie mehrere überlappende Elemente haben, können Sie den Z-Index anpassen, um sicherzustellen, dass die Flipbox immer im Vordergrund bleibt und gut sichtbar ist.

---

 

 

Call to Action-Widget 
(englisch: Call to Action Widget)

Das Call to Action-Widget (englisch: Call to Action Widget) in Elementor Pro ist ein wichtiges Tool, um Besucher zu einer bestimmten Handlung aufzufordern. Es wird häufig verwendet, um die Benutzerinteraktion zu erhöhen, sei es durch das Anmelden für einen Newsletter, das Kaufen eines Produkts oder das Anfordern weiterer Informationen. 

---

 

---

Verwendungszweck des Call to Action-Widgets

Das Call to Action-Widget wird verwendet, um eine klare und ansprechende Aufforderung an die Benutzer zu formulieren. Es ist ideal für:

• Marketing-Kampagnen:
  Um Benutzer zu ermutigen, sich für einen Newsletter anzumelden oder ein Angebot zu nutzen.
• Produktverkäufe:
  Um den Kauf eines Produkts zu fördern.
• Lead-Generierung:
  Um Interessenten dazu zu bringen, Kontaktinformationen zu hinterlassen oder eine Anfrage zu stellen.

Eine gut gestaltete Call to Action kann die Conversion-Rate Ihrer Website erheblich steigern.

---

 

---

1. Inhalt

Im Bereich Inhalt legen Sie fest, welche Informationen und Elemente in der Call to Action angezeigt werden.

• Titel:
  • Haupttitel:
    Geben Sie einen prägnanten und ansprechenden Titel ein, der die Aufmerksamkeit der Benutzer auf sich zieht.
• Beschreibung:
  • Untertitel:
    Fügen Sie eine kurze Beschreibung hinzu, die den Titel ergänzt und weitere Informationen bietet, um das Interesse der Benutzer zu wecken.
• Button:
  • Button-Text:
    Geben Sie den Text für den Call-to-Action-Button ein, z. B. „Jetzt kaufen“, „Mehr erfahren“ oder „Anmelden“.
  • Link:
    Geben Sie die URL ein, auf die der Button verlinken soll, um die Benutzer zu der gewünschten Aktion zu führen.
• Bild oder Icon:
  • Bild:
    Optional können Sie ein Bild oder ein Icon hinzufügen, um die Call to Action visuell zu unterstützen.

---

 

---

2. Stil

Im Bereich Stil können Sie das Aussehen der Call to Action anpassen.

• Textstil:
  • Textfarbe:
    Passen Sie die Farbe des Haupttitels und der Beschreibung an, um sicherzustellen, dass sie gut lesbar sind.
  • Schriftart:
    Wählen Sie die Schriftart, Größe und Gewicht für den Titel und die Beschreibung, um den gewünschten Stil zu erreichen.
• Button-Stil:
  • Button-Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für den Call-to-Action-Button, die sich vom Rest der Seite abhebt.
  • Button-Textfarbe:
    Passen Sie die Textfarbe des Buttons an, um sicherzustellen, dass er gut sichtbar ist.
  • Button-Rundung:
    Stellen Sie die Ecken des Buttons ein, um ihn abgerundet oder eckig zu gestalten.
• Hintergrund:
  • Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für den gesamten Call to Action-Bereich.
  • Abstände:
    Stellen Sie die Innen- und Außenabstände des Call to Action-Bereichs ein, um ein sauberes Layout zu gewährleisten.

---

 

---

3. Erweitert

Im Bereich Erweitert können Sie zusätzliche Anpassungen vornehmen.

• CSS-Klasse:
  • Hier können Sie eine benutzerdefinierte CSS-Klasse hinzufügen. Dies ist nützlich, wenn Sie spezifische Stile anwenden möchten, die nicht in den Standardoptionen verfügbar sind.
• Animation:
  • Erscheinungsanimation:
    Wählen Sie eine Animation für das Erscheinen der Call to Action, wie z. B. „Fade“ oder „Slide“. Dies kann helfen, die Call to Action ansprechender zu gestalten, wenn sie auf der Seite erscheint.
• Responsive Einstellungen:
  • Sichtbarkeit:
    Passen Sie an, ob die Call to Action auf mobilen Geräten sichtbar sein soll. Sie können die Call to Action für bestimmte Bildschirmgrößen ausblenden.
  • Layout-Anpassungen:
    Stellen Sie sicher, dass die Call to Action auf verschiedenen Bildschirmgrößen gut aussieht, indem Sie die Größe der Elemente und den Abstand anpassen.
• Z-Index:
  • Der Z-Index bestimmt die Schichtung von Elementen auf Ihrer Seite. Wenn Sie mehrere überlappende Elemente haben, können Sie den Z-Index anpassen, um sicherzustellen, dass die Call to Action immer im Vordergrund bleibt und gut sichtbar ist.