So entwerfen Sie Visitenkarten mit Flip-Animation beim Klicken, um Ihr Team in Divi . zu präsentieren

Das Entwerfen von Visitenkarten, die auf Klick umgedreht werden, kann eine kreative Ergänzung für jeden Bereich oder jede Seite Ihrer Teammitglieder auf Ihrer Website sein. Visitenkarten sind bereits eine bekannte und intuitive Methode, um prägnante Informationen über eine Person zu liefern, die für ein Unternehmen arbeitet. Es ist also sinnvoll, dasselbe Design im Web anzubieten. Außerdem können die auf jeder Karte bereitgestellten Informationen noch dynamischer und interaktiver werden, sodass der Benutzer Informationen kopieren und/oder auf Links innerhalb der Visitenkarte klicken kann.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi eine einzigartige Visitenkarte entwerfen, die auch die Funktion hat, sich beim Klicken umzudrehen, um die Informationen über die Person anzuzeigen, genau wie eine echte Visitenkarte.

Lass uns einsteigen und loslegen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Entwerfen einer Visitenkarte, die beim Klicken in Divi . umgedreht wird

Die Zeilen- und Spalteneinstellungen

Erstellen Sie zunächst eine einspaltige Zeile zum regulären Abschnitt.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Spaltenhöhen ausgleichen: JA
• Breite: 90%
• Maximale Breite: 1200px

Öffnen Sie die Einstellungen für die Spalte und füllen Sie sie wie folgt auf:

• Polsterung (Desktop und Tablet): 30 Pixel oben, 30 Pixel unten, 50 Pixel links, 50 Pixel rechts
• Polsterung (Telefon): 15 Pixel oben, 15 Pixel unten, 15 Pixel links, 15 Pixel rechts

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse zur Spalte hinzu:

• CSS-Klasse: card-column

Diese Klasse dient in unserem Code als Ziel, um das Click-Ereignis auszulösen, das später die Flip-Animation auslöst.

Spalte duplizieren

Nachdem wir nun eine Spalte eingerichtet haben, duplizieren Sie die Spalte, sodass wir ein zweispaltiges Layout haben, wobei jede Spalte die gleiche Auffüllung und CSS-Klasse hat.

Aufbau der Rückenkarte

Das erste Element des Visitenkartendesigns ist das, was wir die Rückseitenkarte nennen werden, die als Visitenkartenhintergrund mit den Karteninformationen dient. Um die Frontkarte zu erstellen, fügen Sie eine Trennlinie zu Spalte 1 hinzu.

Öffnen Sie die Trennereinstellungen und klicken Sie auf , um den Trenner NICHT sichtbar zu machen. Wir verwenden den Teiler nur für ein Hintergrundbild für die Visitenkarte.

Aktualisieren Sie dann die folgenden Optionen:

Hintergrundfarbe

• Hintergrundfarbe: #322b3f

Hintergrundverlauf

• Hintergrundfarbe links: rgba(50,43,63,0.72)
• Hintergrund mit Farbverlauf rechts: #322b3f
• Verlaufstyp: Radial
• Endposition: 34%
• Farbverlauf über dem Hintergrundbild platzieren: JA

Hintergrundbild

• Hintergrundbild: [Bild oder Porträt des Teammitglieds hochladen]
• Hintergrundbildgröße: fit
• Position des Hintergrundbilds: Mitte

Größe

• Breite: 100%
• Mindesthöhe: 300px
• Höhe: 100%

Box Schatten

• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 50px

CSS-Klasse und absolute Position

Als nächstes fügen Sie dem Teiler die folgende CSS-Klasse hinzu:

• CSS-Klasse: back-card

Und aktualisieren Sie die Position auf absolut:

• Position: Absolut

Erstellen des Backcard-Logos

Wenn die hintere Karte (Teiler) vorhanden ist, können wir mit dem Hinzufügen unserer Karteninfo-Elemente beginnen. Zu Beginn fügen wir ein Logo in die obere linke Ecke ein.

Fügen Sie ein Bildmodul unter dem Teiler-/Rückkartenmodul hinzu.

Laden Sie dann ein Logobild hoch, das etwa 60 x 60 Pixel groß ist.

Aktualisieren Sie dann das Bild mit einer CSS-Klasse und einer absoluten Position wie folgt:

CSS-Klasse

• CSS-Klasse: card-content

Position

• Position: Absolut
• Vertikaler Versatz: 30 Pixel (Desktop und Tablet), 15 Pixel (Telefon)
• Horizontaler Versatz: 50 Pixel (Desktop und Tablet), 10 Pixel (Telefon)

Der Name

Um den Namen für die Visitenkarte zu erstellen, fügen Sie unter dem Logobild einen neuen Textbaustein hinzu.

Aktualisieren Sie den Nachrichtentext mit dem Namen der Person, die auf der Visitenkarte erscheinen soll.

Aktualisieren Sie auf der Registerkarte „Design“ die Optionen für den Absatztextstil wie folgt:

• Textschriftart: Poppins
• Text Textfarbe: #ffffff
• Text Textgröße: 28px (Desktop und Tablet), 22px (Telefon)
• Buchstabenabstand: 1px
• Textausrichtung: Rechts

Die Jobposition (oder Rolle)

Um die Position (oder Rolle) der Person auf der Karte hinzuzufügen, duplizieren Sie das vorherige Textmodul mit dem Namen.

Aktualisieren Sie dann den Inhalt des Hauptteils mit der Position (oder Rolle) der Person.

Aktualisieren Sie anschließend die Designeinstellungen für das Positionstextmodul wie folgt:

• Textschriftart: TT
• Text Textgröße: 16px (Desktop und Tablet), 14px (Telefon)
• Rand: 15px unten

Das Unternehmen

Um der Visitenkarte den Firmennamen hinzuzufügen, duplizieren Sie den vorherigen (Positions-) Textbaustein.

Aktualisieren Sie dann den Hauptteilinhalt mit dem Namen des Unternehmens.

Aktualisieren Sie dann die Firmentexteinstellungen wie folgt:

• Schriftstärke des Textes: Leicht
• Textschriftart: Standard
• Text Textgröße: 22px (Desktop und Tablet), 18px (Telefon)
• Textausrichtung: Links

Die Telefonnummer

Um die Telefonnummer für die Visitenkarte zu erstellen, fügen Sie ein Klappenmodul unter dem (Firmen-)Textmodul hinzu.

Aktualisieren Sie den Inhalt des (Telefon-)Klapptexts mit der Telefonnummer, die auf der Karte angezeigt werden soll.

Klicken Sie hier, um ein Telefonsymbol für den Klappentext zu verwenden.

Aktualisieren Sie in den Designeinstellungen Folgendes:

• Symbolfarbe: rgba(162.71,232,0.6)
• Bild-/Symbolplatzierung: Links
• Symbol Schriftgröße verwenden: JA
• Symbolschriftgröße: 20px
• Körperschriftart: Poppins
• Textkörperfarbe: #ffffff
• Körpertextgröße: 16px
• Rand: 10px unten

Die E-Mail Adresse

Um die E-Mail-Adresse auf der Karte anzuzeigen, duplizieren Sie das Klappenmodul (Telefon) und aktualisieren Sie den Nachrichtentext mit der E-Mail-Adresse.

Aktualisieren Sie dann das Symbol zu einem Umschlagsymbol.

Die Webseite

Um die Website auf der Karte zu präsentieren, duplizieren Sie das Klappenmodul (Telefon) und aktualisieren Sie den Hauptinhalt mit der Website.

Aktualisieren Sie dann das Symbol mit einem geeigneteren Symbol.

Die Social Media Follow Icons

Für unseren letzten Karteninhalt werden wir der Karte Social Media Follow-Symbole hinzufügen. Fügen Sie dazu ein Social Media Follow-Modul unter dem Klappentext (Website) hinzu.

Aktualisieren Sie im Modal „Einstellungen für soziale Medien folgen“ jedes der sozialen Netzwerke mit einem transparenten Hintergrund.

(Sie können die Link-URLs auch später nach Bedarf hinzufügen)

Geben Sie dann dem Modul eine richtige Ausrichtung.

Fügen Sie allen Karteninhaltsmodulen dieselbe CSS-Klasse hinzu

Nachdem wir alle Karteninhaltsmodule für die Visitenkarte erstellt haben, müssen wir all diesen Modulen dieselbe CSS-Klasse zuweisen. Verwenden Sie dazu die Mehrfachauswahlfunktion, um alle Karteninhaltsmodule (Logo, Name, Position, Telefon, E-Mail, Website und Social Media-Symbole) auszuwählen, öffnen Sie dann die Elementeinstellungen und fügen Sie die folgende Klasse hinzu:

• CSS-Klasse: card-content

Wir werden diese Klasse auf unseren benutzerdefinierten CSS-Code abzielen, um den Inhalt vor und nach der Animation zum Umdrehen der vorderen Karte auszublenden und anzuzeigen.

Die Frontkarte

Jetzt, da unsere Rückseite mit dem gesamten Karteninhalt fertig ist, können wir die Vorderseite erstellen, die auf der Rückseite und dem Inhalt der Rückseite platziert wird. Dazu gestalten wir die Frontkarte mit einem Bildmodul in Spalte 2. Dann verschieben wir sie so, dass sie auf der Rückseite in Spalte 1 sitzt.

Fügen Sie zunächst ein Bildmodul zu Spalte 2 hinzu.

Laden Sie dasselbe Logobild (60 x 60 Pixel) hoch, das für das Logo auf der Rückseite verwendet wird, das als Bild verwendet werden soll.

Öffnen Sie dann die Einstellungen für das Rückkartenmodul (Teiler) und kopieren Sie das Hintergrunddesign.

Öffnen Sie dann die Bildeinstellungen für die von uns entworfene Frontkarte und fügen Sie das Hintergrunddesign in die Option Hintergrund des Bildmoduls ein.

Aktualisieren Sie auf der Registerkarte Design den Abstand des Bildes wie folgt:

• Polsterung (Desktop und Tablet): 30 Pixel oben, 50 Pixel links
• Polsterung (Telefon): 15 Pixel oben, 10 Pixel links

Erweiterte Einstellungen

Geben Sie dem Bild auf der Registerkarte "Erweitert" die folgende CSS-Klasse:

• CSS-Klasse: front-card

Fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:

[/css]
Höhe: 100%;
Breite: 100 %;
[/css]

Die Positionsoptionen aktualisieren:

• Position absolut
• Z-Index: 13

Die benutzerdefinierte Höhe und Breite (in Kombination mit der absoluten Position) bewirkt, dass das Modul, das das Bild (oder Logo) enthält, die gesamte Höhe und Breite der übergeordneten Spalte umfasst. Obwohl es sich also um ein Bildmodul handelt, verwenden wir es, um zwei überlagerte Bilder (das Logo und das Hintergrundbild) als schöne Vorderseite für unser Visitenkartendesign anzuzeigen.

Vergessen Sie nicht, das Hintergrundbild durch ein neues zu ersetzen. In diesem Fall verwende ich ein anderes Porträt derselben Person.

Wenn Sie fertig sind, ziehen Sie das Bildmodul der Vorderseitenkarte in Spalte 1. Es sollte die Rückseitenkarte vollständig bedecken.

Der benutzerdefinierte Code

Der letzte Schritt besteht darin, benutzerdefiniertes CSS und JQuery hinzuzufügen, um die Funktionalität des tatsächlichen Erstellens der Visitenkarten-Flip-Animation beim Klicken zu vervollständigen.

Um den Code hinzuzufügen, fügen Sie ein Codemodul unterhalb des Social Media Follow-Moduls in Spalte 1 hinzu.

Das benutzerdefinierte CSS

Fügen Sie den folgenden CSS-Code zwischen den style- Tags ein:

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

Die JQuery

Fügen Sie unter dem CSS die folgende JQuery zwischen den script- Tags ein

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

Zusätzliche Visitenkarten erstellen

Um zusätzliche Visitenkarten zu erstellen, müssen Sie nur die Spalte mit allen Modulen duplizieren, die wir zum Erstellen verwendet haben. Nachdem Sie die Spalte dupliziert haben, müssen Sie das Typenzusatzmodul löschen. Zwei Codemodule mit doppeltem Code zu haben, funktioniert nicht.

Sobald die Spalte/Karte dupliziert ist, aktualisieren Sie einfach die Hintergrundbilder und den Karteninhalt mit den Modulen nach Bedarf für eine neue Visitenkarte.

Endergebnis

Hier ist das Endergebnis des Visitenkarten-Designs mit der Flip-Animation beim Klicken. Wenn Sie auf das vordere Kartenbild klicken, wird es umgedreht und ausgeblendet, der hintere Kartenteiler wird ebenfalls umgedreht, bleibt jedoch sichtbar. Die Karteninformationen werden eingeblendet, nachdem die Flip-Animation abgeschlossen ist. Um die Karte wieder umzudrehen, müssen Sie nur außerhalb der Spalte mit der Karte klicken. Ich wollte nicht, dass die Karte beim Klicken auf die Karte erneut umgedreht wird (wie bei einem Umschalter), damit der Benutzer auf Elemente innerhalb der Karte klicken kann.

Abschließende Gedanken

Hoffentlich hilft Ihnen dieses interaktive Visitenkartendesign dabei, kreativer zu werden, wie Sie den Bereich oder die Seiten Ihres Teammitglieds auf Ihrer Website anzeigen. Tatsächlich ist diese Technik nicht auf Visitenkarten beschränkt. Sie können es für fast alle Informationen verwenden, die Sie anzeigen möchten. Probieren Sie es aus und sehen Sie, ob es für Ihr nächstes Projekt geeignet ist.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!