Mit dem Flip-Box-Widget können Sie animierte Boxen erstellen, die sich auf die andere Seite drehen, sobald Benutzer eine Aktion ausführen. Sie können eine Elementor-Flip-Box erstellen, indem Sie beides anklicken und mit der Maus darüber bewegen. Mit diesem Widget können Sie beide Seiten der Flipbox anpassen.

So fügen Sie die Flipbox mit ElementsKit zur WordPress-Site hinzu #

Befolgen Sie die unten beschriebenen Schritte, um mit ElementsKit und ganz einfach eine Flipbox zu Ihrer WordPress-Site hinzuzufügen Elementor:

Schritt 1: Aktivieren Sie das Flipbox-Widget #

Navigieren Sie zu ElementsKit ⇒ Widgets ⇒ Flipbox-Widget, Schalten Sie das Widget ein, Und Klicken Sie auf Änderungen speichern.

Schritt 2: Ziehen Sie das Widget per Drag & Drop  #

Bearbeiten Sie die Seite mit der Option „Mit Elementor bearbeiten“. Dann suchen für das Flip-Box-Widget mit dem Ekit-Symbol und einfach Ziehen Sie das Widget per Drag & Drop auf der Seite.

Schritt 3. Passen Sie die Einstellungen an  #

Erweitern Sie das Flip-Box-Menü, um die folgenden Einstellungen zu ändern:

• Umdrehen: Für das Umdrehen stehen Ihnen vier Optionen zur Verfügung: Hineindrehen, Vergrößern, Hineinschieben und 3D.
• Umkehrrichtung: Für die Umkehrrichtung stehen mehrere Optionen zur Verfügung. Die Option wird jedoch basierend auf dem Wert angezeigt, den Sie für die Option „Flip“ auswählen.
• Flip-Trigger: Hier können Sie die Option auswählen, die den Flip auslöst. Es stehen drei Optionen zur Verfügung: Hover, Box Click und Button Click.
• Flip-Box-Höhe: Mit dieser Option können Sie die Höhe der Flipbox anpassen.

Unter Flip-Box-Höhe finden Sie zwei Registerkarten VORNE und RÜCKSEITE. Wählen Sie eine der Optionen aus, um die Elemente der Flipbox für jede Seite anzupassen. Sie finden für beide Seiten die gleiche Option. 

Zu den Optionen, die Sie für jede Flip-Box-Seite anpassen können, gehören: 

• Medientyp: Sie können ein Symbol oder ein Bild auswählen. Sie können auch die Option „Keine“ wählen, wenn Sie keine Mediendateien hinzufügen möchten.
• Symbol/Datei auswählen: Abhängig von der Option, die Sie für den Medientyp wählen, können Sie hier das Symbol/Bild auswählen. 
• Titel: Geben Sie einen Titel an.
• Untertitel: Hier können Sie einen Untertitel hinzufügen.
• Flip-Beschreibung: Verfassen Sie mit dieser Option eine relevante Beschreibung.
• Ausrichtung: Sie können die Ausrichtung auf links, mittig oder rechts einstellen.

Nachdem Sie den Inhalt für beide Seiten Ihrer Flip-Box vorbereitet haben, ist es an der Zeit, den Stil zu ändern. 

Schritt 4: Gestalten Sie Ihre Flipbox #

Wechseln Sie nun zur Registerkarte „Stil“ und erweitern Sie die einzelnen Abschnitte, um die zugehörigen Stiloptionen zu ändern:

Verpackung: Unter dem Wrapper können Sie Hintergrundtyp, Farbe, Position, zweite Farbe, Position, Typ, Winkel usw. anpassen. Sie können die Optionen sowohl für die Vorder- als auch für die Rückseite der Flipbox anpassen.

Symbol: Wenn Sie diese Option erweitern, können Sie Farbe, Hintergrundtyp, Boxschatten, Rahmentyp usw. sowohl für die Normal- als auch für die Hover-Ansicht ändern. Sie können den Symbolstil sowohl für die Vorder- als auch für die Rückseite der Flipbox anpassen.

Titel: Hier können Sie die Typografie, die Titelfarbe und den Rand des Titels für beide Seiten der Flipbox anpassen.

Untertitel: Erweitern Sie diese Option, um Typografie, Titelfarbe und Rand des Untertitels für beide Seiten der Flipbox anzupassen.

Beschreibung: Hier können Sie die Typografie, die Beschreibungsfarbe und den Rand der Beschreibung für beide Seiten der Flipbox anpassen.

Taste: Erweitern Sie den Schaltflächenbereich, um Textfarbe, Hintergrundfarbe, Rahmentyp, Rahmenradius, Rahmenrahmen und viele weitere Optionen anzupassen. Sie können die Schaltfläche sowohl für die normale als auch für die Hover-Ansicht formatieren.

Klicken Sie abschließend auf „Veröffentlichen/Aktualisieren“, um die Änderungen zu speichern und eine Vorschau Ihrer Elementor-Flipbox anzuzeigen: