Wenn Sie auf der Suche nach einer Anleitung sind, wie Sie Flipboxen in WordPress erstellen können, haben wir einen umfassenden Leitfaden für Sie.
Sie müssen nur wissen, wie Sie eine von Grund auf neu erstellen können. Aber vorher wollen wir noch ein paar Details über Flipboxen erfahren.
Was ist eine Flip-Box in WordPress?
A Klappbox in WordPress ist ein interaktives Inhaltselement, das Text und Bildmaterial mit einem umspringenden Animationseffekt kombiniert.
Sie hat in der Regel zwei Seiten. Es wird häufig verwendet, um Text auf kreative Weise in Kombination mit einem faszinierenden Flip-Effekt zu präsentieren.
Man fügt Flipboxen ein, weil sie ein ansprechendes und interaktives Element sind, das die Aufmerksamkeit der Besucher sofort auf sich zieht.
Betrachten wir nun einige andere Szenarien für Flip-Boxen.
Schöne Tische erstellen
Mit Block-Editor
Warum Flip-Boxen in WordPress-Websites verwenden?
Flipboxen sind ein leistungsstarkes Designelement, das Ihre WordPress-Inhalte auf verschiedene Weise aufwerten kann. Hier erfahren Sie, warum es sich lohnt, sie zu verwenden:
- Aufmerksamkeit erregen: Flipboxen ziehen die Aufmerksamkeit der Besucher wie ein Magnet auf sich und wecken ihre Neugierde, so dass sie zu weiteren Erkundungen angeregt werden.
- Wichtige Informationen hervorheben: Mit Flipboxen können Sie wichtige Details auf der Vorderseite präzise darstellen und auf der Rückseite Erklärungen oder weitere Details anbieten, wodurch der Inhalt umfassender wird.
- Elegant präsentieren: Conent: Mit Flipboxen können Sie Ihre Inhalte auf elegante Weise präsentieren. Anstelle von einfachem Text oder statischen Boxen bieten Flipboxen eine elegante Möglichkeit, Dienstleistungen, Teamprofile, CTAs usw. zu präsentieren.
Nachdem Sie nun einige Vorteile der Verwendung von Flipboxen auf Ihrer Website kennengelernt haben, gehen wir zu unserem Haupttutorial über.
Wie man Flip-Boxen in WordPress erstellt
Da WordPress keinen Kernblock zur Erstellung einer Flipbox hat, werden wir ein Plugin eines Drittanbieters namens Flipbox.
Flipbox verfügt über eine Sammlung von coolen CSS3-Plugin-Effekten, die Flipboxen noch attraktiver machen. Es funktioniert mit jedem Page Builder und ist standardmäßig responsive.
Schritt 1: Installieren Sie die Flipbox
Der erste Schritt besteht darin, das Flipbox-Plugin zu installieren, indem Sie sich in das Dashboard Ihrer Website einloggen. Navigieren Sie dann zu Plugins (1) > Neues Plugin hinzufügen (2). Suche Flipbox (3) und das Plugin installieren (4).
Vergessen Sie nicht, das Plugin nach der Installation zu aktivieren.
Schritt 2: Erstellen Sie Ihre Flip-Boxen
Klicken Sie nun auf Flip Box (1) und Neu erstellen daraufhin (2).
Wählen Sie einen beliebigen Stil auf der Seite aus und klicken Sie auf "Stil erstellen". Wenn Sie nach unten scrollen, können Sie zahlreiche Stile sehen.
Geben Sie eine Name zu Ihrer Flipbox (1), und wählen Sie die Layout-Nummer. Die Layouts sind in der Stile die Sie bereits gesehen haben (Jeder Stil hat drei Layouts). Klicken Sie abschließend auf die Schaltfläche Speichern Sie Taste (3).
Schritt 3: Passen Sie Ihre Flip-Box an
Alle Optionen dienen der individuellen Anpassung. Passen Sie sie nach Ihren Bedürfnissen an. Die Vorschau wird unten auf der gleichen Seite angezeigt.
Wählen Sie den "Flip-Boxen öffnen von" um Ihren Inhalt einzufügen.
Geben Sie die Vorderseite Titel (1) und Front-Symbol (2)und klicken Sie schließlich auf Bild hochladen um ein Bild für die Vorderseite hochzuladen (3).
Scrollen Sie auf derselben Seite nach unten und geben Sie die Backend-Informationen oder ausführlicher Text des Inhalts (1) und die Backend Schaltfläche Text (2). Sie können auch die Button-Link wenn Sie möchten (3). Danach müssen Sie ein Bild für das Backend-Hintergrundbild festlegen, indem Sie auf die Schaltfläche "Bild hochladen” (4).
Nachdem Sie alles eingerichtet haben, drücken Sie die Taste "Einreichen" Schaltfläche (1).
Sie können weitere Flipboxen hinzufügen, wenn Sie möchten. Folgen Sie die "Schritt 3"-Leitlinien wiederholt um weitere Flipboxen zur aktuellen Flipbox hinzuzufügen.
Sie können auch bearbeiten oder löschen auch Ihre Flipboxen. Sie können die Optionen sehen, indem Sie mit dem Cursor auf die Flipboxen gehen.
Nach dem Bearbeiten und Anpassen klicken Sie auf "Position pro Zeile” (1) um festzulegen, wie viele Flipboxen Sie pro Zeile anzeigen möchten. Ich habe drei Elemente ausgewählt, da ich drei Elemente pro Zeile anzeigen möchte. Drücken Sie nun die Taste Einreichen Taste (2).
Danach müssen Sie Ihre Flip Box speichern. Klicken Sie einfach auf die Schaltfläche Speichern (1).
Schritt 4: Einfügen des Flip Box Shortcodes
Gehe zu Flip Box (1) und Kopieren Sie den Shortcode (2).
Gehen Sie zu Ihren Beiträgen oder Seiten, auf denen Sie die Flipbox anzeigen möchten. Navigieren Sie dazu zu Beiträge (1) > Alle Beiträge (2) und diesen Beitrag oder diese Seite bearbeiten (3). N.B.. Dasselbe gilt für die Bearbeitung einer Seite, aber Sie müssen zu Seiten > Alle Seiten Erstens.
Um die Flipbox einzufügen, müssen Sie die Shortcode-Blockklicken Sie auf das "+"-Symbol (Block hinzufügen) im Editor (1), und geben Sie "Kurzcode" im Suchfeld (2). Klicken Sie auf das "Shortcode" um sie in den Editor einzufügen(3).
Fügen Sie nun den Shortcode ein (1) und speichern oder veröffentlichen Sie Ihren Beitrag oder Ihre Seite.
Hier ist die untenstehende Demo.
Schlussgedanken!
Die Erstellung von Flipboxen in WordPress ist eine einfache Möglichkeit, das Design Ihrer Website zu verbessern und das Engagement zu steigern. Flipboxen sind eine einfache Ergänzung, die einen bleibenden Eindruck bei Ihrem Publikum hinterlassen kann.
Wenn Sie diese Schritte befolgen, können Sie ganz einfach dynamische und visuell ansprechende Elemente integrieren, die professionell aussehen und die Interaktion der Besucher mit Ihren Inhalten verbessern.
Ich hoffe, die Leitlinien waren leicht zu befolgen. Wenn Sie jedoch auf Schwierigkeiten gestoßen sind, lassen Sie es mich im Kommentarbereich unten wissen. Ich würde Ihnen gerne helfen.
Vergessen Sie auch nicht, das Tutorial über die sozialen Medien mit Ihren Freunden zu teilen.
Mehr lesen
- Wie man eine Review Box zu WordPress Posts/Seiten auf 2 einfache Arten hinzufügt
- Wie man eine Tabellenüberschrift in WordPress anheftet (3 einfache Schritte)
- Ändern der Farbe von Schaltflächenübergängen in WordPress in 3 einfachen Schritten
- Wie man eine responsive Tabelle in WordPress erstellt
- Hinzufügen einer Umschalttaste zu Ihrer WordPress-Website
