Ihre eigene Website erstellen von A-Z

Suche

Beiträge Widgets gratis

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

Widget - Bildkarussell

Das Bildkarussell-Widget in Elementor ist ein hervorragendes Werkzeug, um mehrere Bilder in einem rotierenden Format anzuzeigen. Es ermöglicht Ihnen, eine ansprechende Galerie zu erstellen, die den Besuchern Ihrer Website eine dynamische Möglichkeit bietet, Ihre Bilder zu betrachten.

Das Karussell kann sowohl für Produktbilder, Portfolio-Elemente als auch für allgemeine Bildpräsentationen verwendet werden.

Mit dem Bildkarussell-Widget können Sie die Anzeige Ihrer Bilder anpassen, indem Sie verschiedene Einstellungen für Inhalt, Stil und erweiterte Optionen nutzen. Dies sorgt dafür, dass das Karussell gut in das Design Ihrer Website integriert ist.

 

Einstellungen des Bildkarussell-Widgets

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

Inhalt

  • Bilder hinzufügen: Wählen Sie Bilder aus Ihrer Mediathek aus oder laden Sie neue Bilder hoch.
  • Link hinzufügen: Fügen Sie Links zu den Bildern hinzu, wenn diese klickbar sein sollen.
  • Bildbeschreibungen: Geben Sie optionale Beschreibungen für jedes Bild ein, um den Kontext zu verdeutlichen.

Stil

  • Bildgröße: Passen Sie die Größe der Bilder an, um sicherzustellen, dass sie gut sichtbar sind.
  • Abstand: Steuern Sie den Innen- und Außenabstand (Padding und Margin) der Bilder im Karussell.
  • Hintergrundfarbe: Wählen Sie eine Hintergrundfarbe für das Karussell, um es visuell hervorzuheben.
  • Navigation: Passen Sie die Navigationselemente (Pfeile, Punkte) an, um das Karussell benutzerfreundlicher zu gestalten.

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.
  • Z-Index: Bestimmen Sie die Stapelreihenfolge des Karussells, wenn es mit anderen Elementen überlappt.

 

Beispiel 1:
Produktbilder im Karussell

Um Ihre Produkte ansprechend darzustellen, können Sie das Bildkarussell-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Produktseite, die Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Bildkarussell-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Bildkarussell-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Bilder hinzufügen:
    • Klicken Sie auf das Karussell, um Bilder aus Ihrer Mediathek auszuwählen oder neue Bilder hochzuladen.
  4. Links und Beschreibungen hinzufügen:
    • Fügen Sie Links zu den Produktbildern hinzu, wenn diese klickbar sein sollen, und geben Sie optionale Beschreibungen ein.
  5. Stil anpassen:
    • Passen Sie die Bildgröße an und wählen Sie eine Hintergrundfarbe, die gut zu Ihrem Produktdesign passt.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 2: Portfolio-Präsentation

Das Bildkarussell-Widget eignet sich hervorragend, um Ihr Portfolio an Arbeiten oder Projekten zu präsentieren.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Portfolio-Seite, die Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Bildkarussell-Widget hinzufügen:
    • Suchen Sie nach dem Bildkarussell-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Bilder hinzufügen:
    • Wählen Sie Bilder Ihrer abgeschlossenen Projekte aus Ihrer Mediathek aus.
  4. Links und Beschreibungen hinzufügen:
    • Fügen Sie Links zu den Projektseiten hinzu und geben Sie kurze Beschreibungen für jedes Projekt ein.
  5. Stil anpassen:
    • Passen Sie die Größe der Bilder an und wählen Sie eine Farbe für die Navigationselemente, die gut sichtbar ist.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

 

Beispiel 3: Event-Fotos im Karussell

Um die besten Momente eines Events zu zeigen, können Sie das Bildkarussell-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-Fotos präsentieren soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Bildkarussell-Widget hinzufügen:
    • Suchen Sie nach dem Bildkarussell-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Bilder hinzufügen:
    • Wählen Sie die besten Fotos des Events aus Ihrer Mediathek aus.
  4. Links und Beschreibungen hinzufügen:
    • Fügen Sie optionale Links zu den Event-Seiten hinzu und geben Sie kurze Beschreibungen für die Bilder ein.
  5. Stil anpassen:
    • Passen Sie die Bildgröße an und wählen Sie eine Hintergrundfarbe, die die Fotos gut zur Geltung bringt.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Widget - Basisgalerie

Das Basisgalerie-Widget in Elementor ist ein einfaches und effektives Werkzeug, um mehrere Bilder in einer ansprechenden Galerie darzustellen.

Es eignet sich hervorragend für Fotografen, Künstler und Unternehmen, die ihre Arbeiten oder Produkte visuell präsentieren möchten.

Mit der Basisgalerie können Sie Bilder in einem Rasterformat anordnen, was eine klare und übersichtliche Darstellung ermöglicht.

Das Widget bietet Ihnen die Möglichkeit, Bilder auszuwählen, die Anordnung zu steuern und grundlegende Stiloptionen anzupassen, um sicherzustellen, dass die Galerie gut in das Design Ihrer Website integriert ist.

 

Einstellungen des Basisgalerie-Widgets

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

Inhalt

  • Bilder hinzufügen: Wählen Sie Bilder aus Ihrer Mediathek aus oder laden Sie neue Bilder hoch.
  • Bildanordnung: Bestimmen Sie die Anzahl der Spalten, in denen die Bilder angezeigt werden sollen.
  • Link zu Bildern: Fügen Sie Links hinzu, wenn die Bilder klickbar sein sollen, um sie in voller Größe anzuzeigen.

Stil

  • Bildgröße: Passen Sie die Größe der Bilder an, um sicherzustellen, dass sie gut sichtbar sind.
  • Abstand: Steuern Sie den Innen- und Außenabstand (Padding und Margin) der Bilder in der Galerie.
  • Hintergrundfarbe: Wählen Sie eine Hintergrundfarbe für die Galerie, um sie visuell hervorzuheben.
  • Rahmen: Fügen Sie optionale Rahmen um die Bilder hinzu, um sie hervorzuheben.

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.
  • Z-Index: Bestimmen Sie die Stapelreihenfolge der Galerie, wenn sie mit anderen Elementen überlappt.

 

Beispiel 1: Fotografien präsentieren

Um Ihre Fotografien ansprechend darzustellen, können Sie das Basisgalerie-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 Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Basisgalerie-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Basisgalerie-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Bilder hinzufügen:
    • Klicken Sie auf das Galerie-Feld, um Bilder aus Ihrer Mediathek auszuwählen oder neue Bilder hochzuladen.
  4. Bildanordnung festlegen:
    • Bestimmen Sie die Anzahl der Spalten (z. B. 3 Spalten), um die Bilder anzuzeigen.
  5. Stil anpassen:
    • Passen Sie die Bildgröße an und wählen Sie eine Hintergrundfarbe, die gut zu Ihrem Portfolio passt.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 2: Produkte in einer Galerie zeigen

Das Basisgalerie-Widget eignet sich hervorragend, um Ihre Produkte in einer ansprechenden Galerie darzustellen.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Produktseite, die Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Basisgalerie-Widget hinzufügen:
    • Suchen Sie nach dem Basisgalerie-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Bilder hinzufügen:
    • Wählen Sie Bilder Ihrer Produkte aus Ihrer Mediathek aus.
  4. Links hinzufügen:
    • Fügen Sie Links zu den Produktseiten hinzu, damit Besucher mehr Informationen erhalten können.
  5. Stil anpassen:
    • Passen Sie die Größe der Bilder an und wählen Sie eine Farbe für den Hintergrund, die die Produkte hervorhebt.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 3: Event-Fotos in einer Galerie

Um die besten Momente eines Events zu zeigen, können Sie das Basisgalerie-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-Fotos präsentieren soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Basisgalerie-Widget hinzufügen:
    • Suchen Sie nach dem Basisgalerie-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Bilder hinzufügen:
    • Wählen Sie die besten Fotos des Events aus Ihrer Mediathek aus.
  4. Links und Beschreibungen hinzufügen:
    • Fügen Sie optionale Links zu den Event-Seiten hinzu, um mehr Informationen zu bieten.
  5. Stil anpassen:
    • Passen Sie die Bildgröße an und wählen Sie eine Hintergrundfarbe, die die Fotos gut zur Geltung bringt.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

Widget - Sternebewertung

Das Sternebewertung-Widget in Elementor ist ein nützliches Werkzeug, um Bewertungen oder Feedback visuell darzustellen. Es ermöglicht Ihnen, eine Bewertung in Form von Sternen anzuzeigen, was besonders hilfreich ist, um die Qualität von Produkten, Dienstleistungen oder Inhalten auf Ihrer Website hervorzuheben.

Die Sternebewertung kann sowohl für Kundenbewertungen als auch für interne Bewertungen verwendet werden und trägt dazu bei, das Vertrauen der Besucher zu gewinnen.

Mit dem Sternebewertung-Widget können Sie die Anzahl der Sterne, die Farbe und das Layout anpassen, um sicherzustellen, dass es gut in das Design Ihrer Website integriert ist.

 

Einstellungen des Sternebewertung-Widgets

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

Inhalt

  • Anzahl der Sterne: Legen Sie die maximale Anzahl der Sterne fest, die angezeigt werden sollen (typischerweise 5).
  • Bewertung: Geben Sie die Bewertung ein, die Sie anzeigen möchten (z. B. 4 von 5 Sternen).
  • Zusätzlicher Text: Fügen Sie optional einen Text hinzu, der die Bewertung näher erläutert (z. B. „Sehr gut“ oder „Ausgezeichnet“).

Stil

  • Sternfarbe: Wählen Sie die Farbe der Sterne aus, um sie an das Design Ihrer Website anzupassen.
  • Größe der Sterne: Passen Sie die Größe der Sterne an, um sicherzustellen, dass sie gut sichtbar sind.
  • Abstand: Steuern Sie den Innen- und Außenabstand (Padding und Margin) der Sterne.
  • Typografie: Passen Sie die Schriftart, -größe und -farbe des zusätzlichen Textes an.

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.
  • Z-Index: Bestimmen Sie die Stapelreihenfolge der Sternebewertung, wenn sie mit anderen Elementen überlappt.

 

Beispiel 1: Produktbewertung anzeigen

Um die Bewertung eines Produkts ansprechend darzustellen, können Sie das Sternebewertung-Widget verwenden.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Produktseite, die Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Sternebewertung-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Sternebewertung-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Anzahl der Sterne festlegen:
    • Stellen Sie die maximale Anzahl der Sterne auf 5 ein.
  4. Bewertung eingeben:
    • Geben Sie die Bewertung ein (z. B. 4,5 von 5).
  5. Zusätzlichen Text hinzufügen:
    • Fügen Sie einen erläuternden Text hinzu, wie „Sehr gut“ oder „Kundenliebling“.
  6. Stil anpassen:
    • Wählen Sie eine Sternfarbe, die gut zu Ihrem Produktdesign passt, und passen Sie die Größe der Sterne an.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 2: Dienstleistungsbewertung präsentieren

Das Sternebewertung-Widget kann auch verwendet werden, um die Qualität Ihrer Dienstleistungen zu zeigen.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Dienstleistungsseite, die Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Sternebewertung-Widget hinzufügen:
    • Suchen Sie nach dem Sternebewertung-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Anzahl der Sterne festlegen:
    • Stellen Sie die maximale Anzahl der Sterne auf 5 ein.
  4. Bewertung eingeben:
    • Geben Sie die Bewertung ein (z. B. 4 von 5).
  5. Zusätzlichen Text hinzufügen:
    • Fügen Sie einen erläuternden Text hinzu, wie „Hervorragende Dienstleistung“.
  6. Stil anpassen:
    • Passen Sie die Sternfarbe an und wählen Sie eine Größe, die gut sichtbar ist.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 3: Kundenfeedback hervorheben

Um Kundenfeedback zu präsentieren, können Sie das Sternebewertung-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 Kundenfeedback präsentieren soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Sternebewertung-Widget hinzufügen:
    • Suchen Sie nach dem Sternebewertung-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Anzahl der Sterne festlegen:
    • Stellen Sie die maximale Anzahl der Sterne auf 5 ein.
  4. Bewertung eingeben:
    • Geben Sie die Bewertung ein (z. B. 5 von 5).
  5. Zusätzlichen Text hinzufügen:
    • Fügen Sie einen erläuternden Text hinzu, wie „Ausgezeichnete Erfahrung!“.
  6. Stil anpassen:
    • Wählen Sie eine Sternfarbe, die gut zu Ihrem Branding passt, und passen Sie die Größe der Sterne an.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Widget - Zähler

Das Zähler-Widget in Elementor ist ein effektives Werkzeug, um Zahlen und Statistiken auf Ihrer Website ansprechend darzustellen.

Es eignet sich hervorragend, um wichtige Kennzahlen wie die Anzahl der Kunden, abgeschlossenen Projekte oder erreichten Meilensteine visuell hervorzuheben.

Mit dem Zähler-Widget können Sie dynamische Zahlen anzeigen, die beim Laden der Seite animiert werden, was die Aufmerksamkeit der Besucher auf sich zieht.

Das Widget bietet Ihnen die Möglichkeit, die Zählerwerte, das Design und die Animationen anzupassen, um sicherzustellen, dass sie gut in das Gesamtbild Ihrer Website passen.

 

Einstellungen des Zähler-Widgets

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

Inhalt

  • Zählerwert: Geben Sie den Wert ein, den Sie anzeigen möchten (z. B. 1500).
  • Zählertext: Fügen Sie einen erläuternden Text hinzu, der den Zählerwert beschreibt (z. B. „Zufriedene Kunden“).
  • Animation: Wählen Sie die Art der Animation aus, die beim Laden der Seite angezeigt werden soll (z. B. von 0 bis zum Zählerwert).
  • Zählergeschwindigkeit: Passen Sie die Geschwindigkeit der Animation an, um den Zählerwert anzuzeigen.

Stil

  • Typografie: Passen Sie die Schriftart, -größe und -farbe des Zählerwerts und des Zählertexts an.
  • Hintergrundfarbe: Wählen Sie eine Hintergrundfarbe für den Zähler, um ihn hervorzuheben.
  • Abstand: Steuern Sie den Innen- und Außenabstand (Padding und Margin) des Zählers.
  • Rahmen: Fügen Sie optionale Rahmen um den Zähler hinzu, um ihn 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.
  • Z-Index: Bestimmen Sie die Stapelreihenfolge des Zählers, wenn er mit anderen Elementen überlappt.

 

Beispiel 1: Kundenstatistik anzeigen

Um die Anzahl Ihrer zufriedenen Kunden ansprechend darzustellen, können Sie das Zähler-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 Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Zähler-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Zähler-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Zählerwert eingeben:
    • Geben Sie den Wert ein (z. B. 1500).
  4. Zählertext hinzufügen:
    • Fügen Sie einen erläuternden Text hinzu, wie „Zufriedene Kunden“.
  5. Animation und Geschwindigkeit einstellen:
    • Wählen Sie eine Animation aus und passen Sie die Geschwindigkeit an (z. B. 2000 ms).
  6. Stil anpassen:
    • Passen Sie die Typografie an und wählen Sie eine Hintergrundfarbe, die gut zu Ihrem Branding passt.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 2: Projekte präsentieren

Das Zähler-Widget kann auch verwendet werden, um die Anzahl der abgeschlossenen Projekte zu zeigen.

Schritt-für-Schritt-Anleitung:

  1. Elementor-Editor öffnen:
    • Melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie zu der Projektseite, die Sie bearbeiten möchten.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Zähler-Widget hinzufügen:
    • Suchen Sie nach dem Zähler-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Zählerwert eingeben:
    • Geben Sie den Wert ein (z. B. 300).
  4. Zählertext hinzufügen:
    • Fügen Sie einen erläuternden Text hinzu, wie „Abgeschlossene Projekte“.
  5. Animation und Geschwindigkeit einstellen:
    • Wählen Sie eine Animation aus und passen Sie die Geschwindigkeit an (z. B. 1500 ms).
  6. Stil anpassen:
    • Passen Sie die Typografie an und wählen Sie eine Hintergrundfarbe, die die Projekte hervorhebt.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Beispiel 3: Social Media Follower anzeigen

Um die Anzahl Ihrer Social Media Follower zu präsentieren, können Sie das Zähler-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 Social Media Statistiken präsentieren soll.
    • Klicken Sie auf „Mit Elementor bearbeiten“.
  2. Zähler-Widget hinzufügen:
    • Suchen Sie nach dem Zähler-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Zählerwert eingeben:
    • Geben Sie den Wert ein (z. B. 5000).
  4. Zählertext hinzufügen:
    • Fügen Sie einen erläuternden Text hinzu, wie „Follower auf Instagram“.
  5. Animation und Geschwindigkeit einstellen:
    • Wählen Sie eine Animation aus und passen Sie die Geschwindigkeit an (z. B. 2500 ms).
  6. Stil anpassen:
    • Passen Sie die Typografie an und wählen Sie eine Hintergrundfarbe, die gut zu Ihrem Social Media Branding passt.
  7. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern.

 

Widget - Fortschrittsbalken

Das Fortschrittsbalken-Widget in Elementor ist ein nützliches Werkzeug, um visuelle Darstellungen von Fortschritten, Leistungen oder Statistiken auf Ihrer Website zu präsentieren.

Mit diesem Widget können Sie ansprechende Fortschrittsbalken erstellen, die den Besuchern einen schnellen Überblick über Ihre Ergebnisse, Ziele oder Fähigkeiten geben.

Das Fortschrittsbalken-Widget bietet Ihnen die Möglichkeit, den Wert des Fortschrittsbalkens, die Farbe, die Größe und andere visuelle Aspekte anzupassen, um sicherzustellen, dass er gut in das Design Ihrer Website passt.<web>

Laut einer Quelle bietet Elementor Optionen zum Hinzufügen von Animationen zu Ihren Widgets, einschließlich Fortschrittsbalken. Über die Registerkarte „Erweitert" können Sie Animationseffekte anwenden. </web>

 

Einstellungen des Fortschrittsbalken-Widgets

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

Inhalt

  • Fortschrittswert: Geben Sie den Wert des Fortschrittsbalkens ein (z. B. 75%).
  • Titel: Fügen Sie einen Titel hinzu, der den Fortschrittsbalken beschreibt (z. B. „Projektfortschritt").
  • Prozentsatz anzeigen: Wählen Sie, ob der Fortschrittswert als Prozentsatz angezeigt werden soll.

Stil

  • Barfarbe: Wählen Sie die Farbe des Fortschrittsbalkens aus, um sie an Ihr Design anzupassen.
  • Hintergrundfarbe: Legen Sie die Farbe des Hintergrunds des Fortschrittsbalkens fest.
  • Größe: Passen Sie die Höhe und Breite des Fortschrittsbalkens an.
  • Typografie: Steuern Sie die Schriftart, -größe und -farbe des Titels und des Prozentsatzes.

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 aus verschiedenen Animationseffekten aus, um den Fortschrittsbalken beim Laden der Seite dynamisch darzustellen.

<web> Eine Quelle [[1]](https://de.blogpascher.com/Elementor/So-erstellen-Sie-einen-verschlechterten-Fortschrittsbalken-in-Elementor) erwähnt, dass Elementor Optionen zum Hinzufügen von Animationen zu Ihren Widgets, einschließlich Fortschrittsbalken, bietet. Über die Registerkarte „Erweitert" können Sie Animationseffekte anwenden. </web>

 

Beispiel 1: Projektfortschritt anzeigen

Um den Fortschritt eines Projekts auf Ihrer Website darzustellen, können Sie das Fortschrittsbalken-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 Projektfortschritt präsentieren soll.
    • Klicken Sie auf „Mit Elementor bearbeiten".
  2. Fortschrittsbalken-Widget hinzufügen:
    • Suchen Sie in der linken Seitenleiste nach dem Fortschrittsbalken-Widget und ziehen Sie es in den gewünschten Abschnitt Ihrer Seite.
  3. Fortschrittswert eingeben:
    • Geben Sie den aktuellen Fortschrittsstand ein (z. B. 75%).
  4. Titel hinzufügen:
    • Fügen Sie einen Titel hinzu, der den Fortschrittsbalken beschreibt (z. B. „Projektfortschritt").
  5. Stil anpassen:
    • Wählen Sie eine Barfarbe aus, die gut zu Ihrem Projektdesign passt, und passen Sie die Größe an.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren", um Ihre Änderungen zu speichern.

 

Beispiel 2: Fähigkeiten visualisieren

Das Fortschrittsbalken-Widget eignet sich hervorragend, um Ihre Fähigkeiten oder Kompetenzen auf Ihrer Website darzustellen.

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 Fähigkeiten präsentieren soll.
    • Klicken Sie auf „Mit Elementor bearbeiten".
  2. Fortschrittsbalken-Widget hinzufügen:
    • Suchen Sie nach dem Fortschrittsbalken-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Fortschrittswert eingeben:
    • Geben Sie den Wert für Ihre Fähigkeit ein (z. B. 90%).
  4. Titel hinzufügen:
    • Fügen Sie einen Titel hinzu, der die Fähigkeit beschreibt (z. B. „Grafikdesign").
  5. Stil anpassen:
    • Wählen Sie eine Barfarbe aus, die gut zu Ihrem Branding passt, und passen Sie die Größe an.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren", um Ihre Änderungen zu speichern.

 

 

Beispiel 3: Kundenzufriedenheit darstellen

Um die Kundenzufriedenheit auf Ihrer Website zu präsentieren, können Sie das Fortschrittsbalken-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 Kundenzufriedenheit zeigen soll.
    • Klicken Sie auf „Mit Elementor bearbeiten".
  2. Fortschrittsbalken-Widget hinzufügen:
    • Suchen Sie nach dem Fortschrittsbalken-Widget und ziehen Sie es in den gewünschten Abschnitt.
  3. Fortschrittswert eingeben:
    • Geben Sie den Wert für die Kundenzufriedenheit ein (z. B. 95%).
  4. Titel hinzufügen:
    • Fügen Sie einen Titel hinzu, der die Kundenzufriedenheit beschreibt (z. B. „Kundenzufriedenheit").
  5. Stil anpassen:
    • Wählen Sie eine Barfarbe aus, die gut zu Ihrem Branding passt, und passen Sie die Größe an.
  6. Änderungen speichern:
    • Klicken Sie auf „Aktualisieren", um Ihre Änderungen zu speichern.

 

  1. Widget - Empfehlung
  2. Widget - Tabs
  3. Widget - Akkordeon
  4. Widget - Umschalter

Seite 2 von 3