So erstellen Sie Flip Cards mit einem beliebigen Modul in Divi ohne Plugin

Flip Cards sind eine unterhaltsame Möglichkeit für Benutzer, mit Ihrer Website zu interagieren. Es bietet nicht nur eine coole Flip-Animation, sondern ermöglicht es Ihnen auch, zusätzliche Informationen an einem kompakten Ort anzubieten. In diesem Tutorial zeige ich Ihnen, wie Sie Divi-Module ohne Plugin in Flip Cards verwandeln! Mit dieser Methode können Sie ein Divi-Modul als Vorderseite einer Karte und ein weiteres Divi-Modul als Rückseite einer Karte verwenden. Mit dem divi Builder können Sie sogar jedes Modul (Vorder- und Rückseite) nach Belieben gestalten. Die Funktionalität wird durch nur wenige CSS-Schnipsel (kein Jquery) erreicht.

Ich denke, Sie werden überrascht sein, wie einfach und unterhaltsam das Erstellen dieser Karten sein kann.

Tauchen wir ein!

Schleichspitze

Hier ist ein kleiner Vorgeschmack auf das Design, das wir heute erstellen werden.

Abonnieren Sie unseren Youtube-Kanal

Was Sie für dieses Tutorial benötigen

Alles, was Sie für dieses Tutorial benötigen, ist Divi! Kein Plugin erforderlich. Wir werden auch das App Developer Layout Pack verwenden, das KOSTENLOS und im Divi Builder verfügbar ist.

Die Grundidee erklärt

Die Inspiration für dieses Konzept kam eigentlich von diesem grundlegenden Beispiel für die Gestaltung von Flip Cards. Alles, was es brauchte, war ein kleines Re-Engineering, um die div-Klassen den Divi-Zeilen, -Spalten und -Modulen zuzuweisen und dann das CSS ein wenig aufzuräumen.

Das Divi-Layout besteht aus einem regulären Abschnitt mit vier einspaltigen Zeilen. In jeder Reihe habe ich zwei übereinander gestapelte Klappenmodule hinzugefügt (obwohl jedes Divi-Modul auch funktionieren würde). Der obere Klappentext dient als Vorderseite der Klappkarte und der untere Klappentext als Rückseite der Klappkarte. Durch Anwenden von „display:flex“ auf den Abschnitt werden die Zeilen horizontal wie Spalten strukturiert. Dadurch können die Karten in vier Spalten nebeneinander ausgerichtet werden.

So sieht das Setup aus, bevor wir das benutzerdefinierte CSS hinzufügen.

Dann habe ich das benutzerdefinierte CSS zu den Seiteneinstellungen hinzugefügt und die entsprechenden CSS-Klassen zu jeder Zeile, Spalte und jedem Modul hinzugefügt.

Das ist es!

Erstellen von Divi Flip Cards mit einem vorgefertigten Layout

Hinzufügen des vorgefertigten Layouts zu Ihrer Seite

Um die Dinge ins Rollen zu bringen, erstellen Sie eine neue Seite, geben Sie der Seite einen Titel und klicken Sie dann, um den Divi Builder zu verwenden. Wählen Sie die Option „Wählen Sie ein vorgefertigtes Layout“. Wählen Sie im Popup Aus Bibliothek laden das App Developer Layout Pack aus und klicken Sie dann auf , um das App Developer Landing Page-Layout zu verwenden.

Sobald das Layout auf die Seite geladen ist, veröffentlichen Sie Ihre Seite und klicken Sie dann auf die Schaltfläche „Im Frontend erstellen“. Jetzt können Sie mit der Erstellung der Flip Cards beginnen.

Abschnitt, Zeilen und Module einrichten

Fügen Sie unter dem ersten Abschnitt des Layouts einen neuen regulären Abschnitt mit einer einspaltigen Zeile hinzu. Fügen Sie noch keine Module hinzu. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierter Rand: 20 Pixel unten
Benutzerdefiniertes Padding: 0px oben, 0px unten

Einstellungen speichern.

Dann duplizieren Sie die Zeile dreimal, sodass Sie insgesamt vier Zeilen im Abschnitt haben.

Öffnen Sie nun die Abschnittseinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;

Dadurch werden die Zeilen horizontal angezeigt, wodurch unsere Zeilen im Grunde in vier Spalten umgewandelt werden, obwohl sie technisch immer noch Divi-Zeilen mit jeweils einer Spalte sind.

Hinzufügen der Module zu den Zeilen

Hier kommt unser vorgefertigtes Layout für dieses Tutorial zum Einsatz. Wir werden die vier Klappenmodule im oberen Bereich des Layouts verwenden, um das Design unserer Flip-Karten zu starten. Kopieren Sie die vorgefertigten Module mit den Rechtsklickoptionen oder den Tastenkombinationen Strg+c und Strg+v (Windows) und cmd+c cmd+v (Mac) und fügen Sie sie in jede der gerade erstellten Zeilen ein. Stellen Sie sicher, dass jede Zeile doppelte Versionen desselben Moduls enthält.

Jetzt sollte Ihr Abschnitt so aussehen.

Entwerfen der vorderen und hinteren Flip-Card-Module

Die beiden in jeder Reihe gestapelten Module werden als Vorder- und Rückseite der Flip-Karten verwendet. Das oberste Modul in jeder Reihe dient als Vorderseite und das untere Modul als Rückseite. Da die Gestaltung der Frontkarte (oberes Modul) dank unseres vorgefertigten Layouts bereits erfolgt ist, müssen wir nur noch das Design und den Inhalt der rückseitigen Karte (unteres Modul) anpassen.

Wählen Sie mit der Divi-Mehrfachauswahlfunktion alle unteren Module in jeder Reihe aus und öffnen Sie dann die Elementeinstellungen, um alle vier Module gleichzeitig anzupassen.

Jetzt können wir die Elementeinstellungsoptionen aktualisieren, um die Rückseitenversion unserer Flip-Karten zu gestalten. Aktualisieren Sie die Elementeinstellungen wie folgt:

Inhalt: „Dies ist eine Beschreibung.“
Hintergrundfarbe: #00a2fa
Textfarbe: Hell

Hinzufügen von benutzerdefiniertem CSS und CSS-Klassen

Jetzt ist es Zeit für das benutzerdefinierte CSS, das uns die Flip-Card-Funktionalität gibt. Öffnen Sie die Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS hinzu:

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

Beachten Sie, dass die oben genannten CSS-Klassen so benannt sind, dass Sie verstehen, was die einzelnen tun. Es ist auch ein hilfreicher Indikator dafür, wo wir diese CSS-Klassen zu unseren Divi-Elementen hinzufügen müssen. Die Klasse „flip-box-row“ soll beispielsweise jede der vier Zeilen formatieren; Daher muss jede Zeile diese CSS-Klasse haben.

Hinzufügen von CSS-Klassen zu den Divi-Elementen

Wählen Sie mit Multiselect alle vier oberen Module (Frontkarten) in jeder der Reihen aus. Fügen Sie dann die folgende CSS-Klasse hinzu:

CSS-Klasse: flip-box-front

Verwenden Sie dann Multiselect, um alle vier unteren Module (Rückseiten) in jeder der Zeilen auszuwählen und fügen Sie diesen Modulen die folgende CSS-Klasse hinzu:

CSS-Klasse: Flip-Box-Back

Verwenden Sie schließlich Multiselect, um alle vier Zeilen auszuwählen und ihnen die folgenden CSS-Klassen zuzuweisen:

CSS-Klasse: flip-box-row
Spalten-CSS-Klasse: flip-box-column

Endgültiges Design auf dem Desktop

Mit all unseren CSS-Klassen sind unsere Flip Cards voll funktionsfähig. Sehen Sie sich das endgültige Design auf dem Desktop an.

Anpassen des Designs für Mobilgeräte

Im benutzerdefinierten CSS-Code, den wir bereits zu den Seiteneinstellungen hinzugefügt haben, gibt es eine Medienabfrage, die die Flip-Card-Funktionalität nur auf den Desktop beschränkt. Wir müssen jedoch weiterhin die Frontversionen unserer Flipcards auf Tablet und Smartphone ausblenden und sicherstellen, dass unsere Zeilen beim Anpassen der Browserbreiten gut gestapelt werden.

Um unsere Frontkarten-Blurb-Module auszublenden, verwenden Sie Multiselect, um alle oberen Module (Frontkarten) in jeder Reihe auszuwählen (dies ist im Drahtmodellansichtsmodus einfacher, da sich die Dinge im Frontend-Builder bewegen) und aktualisieren Sie Folgendes:

Deaktivieren auf: Telefon und Smartphone

Öffnen Sie dann die Abschnittseinstellungen und fügen Sie dem Hauptelement eine weitere CSS-Zeile zusätzlich zu der zuvor hinzugefügten hinzu:

flex-wrap:wrap;

Dadurch wird sichergestellt, dass die Zeilen auf Mobilgeräten gestapelt werden.

Schauen wir uns nun das endgültige Design auf Tablet und Smartphone an.

Bonusoption: Vertikale Flip Cards!

Wenn Sie möchten, dass Ihre Flip-Karten vertikal statt horizontal umgedreht werden, müssen Sie im benutzerdefinierten CSS nur zwei Buchstaben (wörtlich) ändern. Öffnen Sie die Seiteneinstellungen und suchen Sie die beiden Stellen, an denen „transform: rotationY(180deg)“ verwendet wird. Dann ersetzen Sie das „Y“ durch „X“. Wenn Sie es noch nicht erraten haben, ändert dies die Drehung auf die X-Achse anstelle der Y-Achse.

Ziemlich cooles Zeug! Sehen Sie sich das Ergebnis an.

Abschließende Gedanken

Sie müssen nicht auf ein Plugin zurückgreifen, um in Divi großartig aussehende Flip Cards zu erstellen. Mit diesem Tutorial haben Sie einen Rahmen, um unzählige Designs und Kombinationen von Flip-Card-Inhalten zu erstellen. Vergessen Sie nicht, dass Sie zwei beliebige Module auswählen können, die als Vorder- und Rückseite Ihrer Karten dienen. Seien Sie also frei, kreativ zu werden!

Ich hoffe, dies war hilfreich und ich freue mich, von Ihnen in den Kommentaren unten zu hören.

Danke schön!