So erstellen Sie Flipbox-Overlays und Hover in WordPress

Das Erstellen visuell immersiver und ansprechender Abschnitte auf Ihrer WordPress-Site kann viel dazu beitragen, die Aufmerksamkeit Ihrer Besucher zu gewinnen. Im Allgemeinen besteht eine großartige Möglichkeit, Ihre Website optisch ansprechender und interaktiver zu gestalten, darin, Ihren Seiten Hover-Effekte hinzuzufügen. Aber um wirklich das Beste aus diesen Effekten herauszuholen und eine gewisse Interaktivität einzuführen, die Ihre Website-Besucher zu schätzen wissen, empfehlen wir Ihnen, dies zu tun Verwenden Sie einen sogenannten Flipbox-Overlay-Effekt.

Dieses Mal, Wir zeigen Ihnen, wie Sie ganz einfach Flipbox-Overlays und Hover-Effekte zu Ihren WordPress-Seiten erstellen und hinzufügen können über ein Plugin. Aber bevor wir anfangen, werden wir es tun Erklären Sie, was eine Flipbox eigentlich ist und wie sie Ihrer Website zugute kommen kann. Lesen Sie weiter, während wir darüber sprechen:

Was ist eine Flipbox und wie ist sie nützlich?

Wie der Name schon sagt, Eine Flipbox ist eine Box, die einen Hover-Animationseffekt hat und normalerweise mit verschiedenen Elementen gefüllt ist. Dieser Hover-Effekt lässt die Box drehen bzw. Es „dreht“ das Kästchen um, sobald Sie mit der Maus darüber fahren. Der Flipbox-Hover-Animationseffekt kann auf vielen verschiedenen Seitenelementen und Abschnitten verwendet werden und wird normalerweise zu Bildern, verschiedenen Textfeldern usw. hinzugefügt Bild und/oder andere Elemente kippen (mit welcher Geschwindigkeit, in welche Richtung usw.). Sie können unter anderem auch verschiedene Farben einstellen, zusätzliche Intro- und/oder Outro-Animationen einfügen und Elemente wie Schaltflächen und Symbole hinzufügen.

Ein Flipbox-Effekt kann besonders vorteilhaft sein, wenn Sie einer Website, die hauptsächlich statische Elemente enthält, mehr Interaktivität verleihen möchten. Es kann auch großartig sein, wenn Sie einfach die Aufmerksamkeit Ihres Publikums auf unterhaltsame und attraktive Weise auf sich ziehen und das allgemeine Benutzererlebnis verbessern möchten. Sie können beispielsweise einen Flipbox-Bildüberlagerungseffekt verwenden, um verschiedene Bilder zu präsentieren, die sich auf Ihre Marke und/oder Ihr Unternehmen beziehen. Sobald sich das Bild umdreht, kann ein anderes Bild mit verschiedenen Informationen über Ihr Unternehmen auf dem Bildschirm erscheinen. Sie können diesen Effekt auch verwenden, um Preisinformationen für bestimmte Produkte und/oder Dienstleistungen anzuzeigen, wichtige Links und/oder Call-to-Action-Schaltflächen oder andere Informationen aufzudecken, die für Ihre Besucher von Vorteil sind. Kurz gesagt, die Möglichkeiten, wie Sie diesen Effekt nutzen können, sind grenzenlos.

So können Sie ohne weiteres Flipbox-Overlays in WordPress generieren und hinzufügen.

Erstellen und Einrichten einer Flipbox in WordPress

Ein großartiges Plugin, das Sie zum Erstellen und Hinzufügen von Flipbox-Bildüberlagerungen und Hover-Effekten verwenden können, ist Flipbox – Fantastische Flipbox-Bildüberlagerung. Mit diesem Plugin können Sie fantastische Flipbox-Bildüberlagerungen in Ihre Seiten einfügen, indem Sie eine Box erstellen, die verschiedene Elemente innerhalb der Box umdreht und präsentiert. Im Wesentlichen kombiniert das Plugin die Infobox und das Call-to-Action-Element, sodass die Flipbox als normale Infobox erscheint. Sobald der Benutzer jedoch den Mauszeiger darüber bewegt, werden verschiedene Elemente angezeigt, die den Benutzer zum Handeln veranlassen. Abgesehen von Bildern können Sie Ihrer Flipbox alle möglichen Elemente hinzufügen, um Ihre Website insgesamt ansprechender und professioneller erscheinen zu lassen, einschließlich Videos, Karten, Schaltflächen, Symbole und so weiter.

Flipbox

Wenn Sie noch mehr Funktionen wünschen, wie z. B. die Möglichkeit, Farben anzupassen, Zugriff auf mehr als 20 Vorlagen, über 100 verschiedene Effekte und professionellen Support, können Sie das tun Upgrade auf die Premium-Version des Flipbox Awesome Flip Boxes Image Overlay Plugins. Die Preise für den Basic-Plan beginnen bei 19,99 $.

Sobald Sie das Plugin installiert und aktiviert haben, können Sie es geh zum Flipbox >> Einstellungen Seite um einige der grundlegenden Optionen des Plugins anzupassen.

Verwandt :  Die 6 besten Buchhaltungsdienste für Online-Unternehmen
Flipbox-Einstellungen

Dort können Sie eine Benutzerrolle auswählen, die das Plugin bearbeiten kann (Administrator, Editor, Autor usw.), und auswählen, ob Sie die Unterstützung von Font Awesome, Google Font und PreLoader aktivieren möchten. Wenn Sie eine oder mehrere dieser Optionen deaktivieren, können Sie Ihre Flipboxen schneller laden. Wenn Sie also einige davon nicht benötigen, empfehlen wir Ihnen, sie zu deaktivieren.

Allgemeine Flipbox-Einstellungen

Schlagen Sie die Erstelle neu Registerkarte, um mit dem Erstellen Ihrer Flipbox zu beginnen.

Sie werden sehen, dass Sie standardmäßig aus fünf verschiedenen Stilen wählen können. Klicke auf Stil erstellen um mit Ihrer Vorlagenanpassung zu beginnen.

Flipbox Neu erstellen

Es erscheint ein neues Feld mit den Optionen, eines der drei verfügbaren Layouts auszuwählen (pro Stil können drei verschiedene Layouts verwendet werden) und den Namen Ihrer Flipbox einzugeben (dies ist der Name Ihres Shortcodes). Sie sollten beachten, dass der Stil Ihrer Flipbox der von Ihnen gewählten Vorlage am nächsten kommt, also stellen Sie sicher, dass Sie diejenige auswählen, die am besten zu Ihrer Vorstellung passt.

Neuer Flipbox-Name und -Layout

Schlagen Sie die Speichern Taste, wenn Sie fertig sind.

Wenn Sie auf weitere Stile zugreifen möchten, können Sie mit der kostenlosen Version des Plugins auch die verwenden Vorlagen importieren Option und importieren Sie einen von fünf zusätzlichen Vorlagenstilen.

Flipbox-Importvorlagen

Gestalten Sie die Vorder- und Rückseite Ihrer Flipbox

Jetzt können Sie mit der kostenlosen Version des Flipbox Awesome Flip Boxes Image Overlay-Plugins verwenden drei verschiedene Registerkarten – Allgemein, Vorderseiteund Backend.

Allgemeines Front- und Backend

Die anderen beiden Registerkarten – Benutzerdefinierte CSS und Unterstützung – wird verfügbar, wenn Sie auf die Premium-Version des Plugins upgraden.

Zurück zum Allgemein Registerkarte – Wenn Sie möchten, können Sie hier die Optionen für den Flip-Typ und die Flip-Effekte ändern. Diese Optionen bestimmen, wie Ihre Flipbox beim Schweben umkippt. Sie können auch die Anzahl der Elemente pro Reihe festlegen (Sie können bis zu sechs Elemente haben) und die Breite, Höhe und Polsterung Ihrer Flipbox anpassen.

Wenn Sie das Aussehen Ihrer Flipbox auf eine andere Ebene heben möchten, können Sie außerdem aus vielen verfügbaren Eingangs- und/oder Ausgangsanimationen wählen.

Um die Änderungen in Ihrer Flipbox zu speichern, müssen Sie drücke den Einreichen Taste.

Allgemeine Optionen Senden

Wenn Sie Ihre Änderungen in der Vorschau anzeigen möchten, müssen Sie nur die finden Vorschau Abschnitt befindet sich am Ende der Seite.

Abschnitt Vorschau

So sieht beispielsweise unsere Flipbox-Vorschau aus, wenn wir die Animation „rotateInUpLeft“ auswählen:

Flipbox-Animation

Wir haben auch den Flip-Typ „Flip Bottom to Top“ gewählt und den Effekt namens „easing_easeOutBack“ ausgewählt. So sieht es aus:

Flipbox-Animation von unten nach oben

Natürlich können Sie all diese Einstellungen nach Ihren eigenen Vorlieben anpassen.

In dem Vorderseite Registerkarte können Sie alle Einstellungen in Bezug auf das Erscheinungsbild Ihrer Flipbox anpassen, wenn Sie nicht mit der Maus darüber fahren.

Frontoptionen Senden

Hier finden Sie die Optionen dazu Bildhöhe, Polsterung, Rahmenfarbe und -größe ändern und einstellen, Symbol anpassen (Größe, Breite und Randradius), und Kurseinstellungen (in Bezug auf Ihren Text, dh Schriftgröße, Schriftstil, Schriftstärke usw.).

Einige der Optionen hier werden nur in der Pro-Version des Plugins verfügbar sein, wie z. B. die Möglichkeit, Hintergrund- und Rahmenfarben, Symbolfarbe und Symbolhintergrund zu ändern und die Titelfarbe und Schriftfamilie auszuwählen.

Noch einmal müssen Sie die treffen Einreichen Schaltfläche, damit die Änderungen wirksam werden.

Backend-Optionen Senden

Das Backend Registerkarte können Sie Legen Sie die Optionen fest, die sich darauf beziehen, wie Ihre Flop-Box aussieht, wenn Sie mit der Maus darüber fahren. Auf dieser Registerkarte können Sie also die Polsterung und die Randgröße ändern, die Schriftgröße, den Stil, das Gewicht usw. ändern sowie die Schaltflächeneinstellungen im Detail anpassen.

Verwandt :  Alles, was Sie über Pingbacks und Trackbacks wissen müssen

Auch hier sind einige der Anpassungsoptionen (Hintergrund- und Rahmenfarben, Schaltflächen- und Textfarben usw.) nur mit der Pro-Version verfügbar.

Bearbeiten des Inhalts Ihrer Flipbox

Um nun Dinge wie Hintergrundbild, Symbol und benutzerdefinierten Text Ihrer Flipbox (auf beiden Seiten) zu ändern, müssen Sie auf klicken Bearbeiten Schaltfläche befindet sich in der Vorschau Sektion. Du wirst finde die Bearbeiten Schaltfläche, wenn Sie mit der Maus über die Flipbox-Vorschau selbst fahren:

Vorschauabschnitt bearbeiten

Dadurch öffnen Sie ein neues Fenster, in dem Sie Ihren Vorder- und Rückseitentext eingeben, Ihr Hintergrundbild ändern können usw.

Fronteinstellungen

In dem Fronteinstellungen Abschnitt können Sie die ändern Vorderer Titel, Front-Symbolund laden Sie Ihre hoch Vorderes Bild. Das Backend-Einstellungen Im Abschnitt können Sie den Inhalt bearbeiten, der aktiviert wird, sobald Ihre Flipbox „umkippt“. Hier finden Sie die Optionen zum Einfügen Ihrer Backend-Info, Backend-Button-Text, Verknüpfung (Ihrer Schaltfläche) und Backend-Hintergrundbild.

Backend-Einstellungen

Stellen Sie einfach sicher, dass Sie die treffen Einreichen Taste, wenn Sie fertig sind.

Wenn Sie mehr als eine Flipbox erstellen möchten, müssen Sie dies einfach tun Wählen Sie das „+“-Symbol im aufgerufenen Meta-Feld Fügen Sie neue Flipboxen hinzu (zur Rechten).

Fügen Sie neue Flipboxen hinzu

Sobald Sie dies getan haben, öffnen Sie ein neues Popup mit Anpassungsoptionen, die mit den oben erwähnten identisch sind.

Hinzufügen einer Flipbox zu Ihrer WordPress-Site

Sobald Sie mit dem Anpassen der Einstellungen Ihrer Flipbox fertig sind, können Sie damit fortfahren, sie in Ihre WordPress-Site einzufügen.

Sie können dies tun, indem Sie einfach den auf der rechten Seite Ihres Einstellungsbildschirms generierten Shortcode verwenden. Den Shortcode finden Sie unter der Kurzwahl Metabox:

Flipbox-Shortcode

Sie sollten diesen Shortcode kopieren. Gehen Sie dann zu der Seite/dem Beitrag Ihrer Wahl und fügen Sie den Shortcode mit dem Shortcode-Block ein. Dazu einfach Klicken Sie in Ihrem Editor auf das Symbol (+) oder „Block hinzufügen“ und suchen Sie den Shortcode-Block und fügen Sie ihn hinzu.

Shortcode-Block hinzufügen

Fügen Sie den Shortcode in den Block ein, drücken Sie die Veröffentlichen/Aktualisieren Knopf, und schon sind Sie fertig.

Shortcode hinzufügen und veröffentlichen

Sie können auf die klicken Vorschau Schaltfläche, um zu sehen, wie Ihre Flipbox live auf Ihrer Seite/Ihrem Beitrag aussehen wird. Außerdem können Sie die verwenden Tablette und Handy, Mobiltelefon Registerkarten, um anzuzeigen, wie Ihre Seite auf Mobilgeräten und Tablet-Bildschirmen aussieht.

Flipbox-Animation live

Wenn Sie möchten, können Sie auch ein Flipbox-Widget in einen beliebigen Widget-Bereich Ihrer Wahl einfügen (natürlich, wenn dieser Widget-Bereich in dem von Ihnen verwendeten Thema verfügbar ist).

Gehen Sie zu Aussehen >> Widgets und fügen Sie das Block-Widget namens Flipbox – Awesome Flip Boxes Image Overlay hinzu. Ziehen Sie das Widget einfach per Drag & Drop in den gewünschten Widget-Bereich.

Flipbox-Widget

Sie müssen dann die Stil-ID einfügen, die Sie auf der Plugin-Seite finden können (Flip-Box Tab).

Flipbox-Widget-Einstellungen

Schlagen Sie die Aktualisieren Knopf und das wars. Sie können Ihr Flipbox-Widget in Aktion sehen, sobald Sie auf den Widget-Bereich zugreifen, zu dem Sie Ihre Flipbox hinzugefügt haben.

Um alles über die Verwendung von Block-Widgets in WordPress zu erfahren, empfehlen wir Ihnen, unseren Artikel zum gleichen Thema zu lesen.

Dinge einpacken

Flipboxen sind ziemlich praktische und visuell immersive Elemente, die Sie Ihrer WordPress-Site hinzufügen können, um das allgemeine Benutzererlebnis Ihrer Besucher zu verbessern. Wir empfehlen die Verwendung des Plugins Flipbox – Awesome Flip Boxes Image Overlay, da es recht einfach einzurichten ist und alle Funktionen enthält, die erforderlich sind, um das Aussehen Ihrer Flipbox vollständig an Ihre Bedürfnisse anzupassen und zu stilisieren. Dazu gehören die Verwendung verschiedener Flip-Effekte, die Verwendung einiger zusätzlicher animierter Effekte für den zusätzlichen Schwung, die Festlegung des Stils von Schriftarten, Schaltflächen und Symbolen und vieles mehr. Wir empfehlen Ihnen, weiterzumachen und Flipboxen zu erstellen, die am besten zu Ihrer Markenidentität und Vision passen, um die Interaktivität Ihrer WordPress-Site wirklich zu bereichern.

Moyens Staff
Moyens I/O-Personal. motivierte Sie und gab Ratschläge zu Technologie, persönlicher Entwicklung, Lebensstil und Strategien, die Ihnen helfen werden.