Erstellen Sie schöne WordPress-Websites mit Divi und Divi Builder

So entwerfen Sie attraktive Visitenkarten mit einer Flammanimation auf Divi

Rifat Divi Tutorials May 11, 2021

Visitenkarten sind ein beliebter Weg, um einer Person einen Unternehmen einzelnen einzuführen. Es trägt alle notwendigen Informationen über diese Person und liefert seine nützlichen Kontaktinformationen. Wie wäre es mit einer virtuellen Visitenkarte auf einer Website, die flippt und denselben Job tut? "Es wird definitiv dynamischer sein, und soziale Links werden daran befestigt, so dass jeder das Individuum leicht kontaktieren kann. Nun, das klingt wirklich interessant und wir werden es wirklich interessant Erfahren Sie heute über dieses Design, auf Zwei! Also. Lass uns anfangen.

Design-Vorschau

Heute werden wir dieses Design bauen. sieht interessant aus, huh?

Teil 1: Entwurf der Visitenkarte, die auf Klick flascht

Hinzufügen: Zeile 1

Beginnen Sie mit dem Hinzufügen einer One-Salten-Zeile in den regulären Abschnitt.

Aktualisieren Sie die folgenden Einstellungen.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen
  • Säulenhöhen ausgleichen: Ja
  • Breite: 90%
  • Max Breite: 1200px

Öffnen Sie die Säuleneinstellung und fügen Sie diese Fülle hinzu.

Polsterung

  • Desktop - 30px oben und unten, 50px links und rechts.
  • Tablet - 30px oben und unten, 50px links und rechts.
  • Telefon - 15px oben und unten, 15px links und rechts

Fügen Sie die folgende CSS-Klasse von Advanced Tab hinzu. Dieser Code funktioniert als Auslöser, um auf unsere Flip-Animation zu klicken.

  • CSS-Klasse: Kartenspalte

Spaltenklonierung

Jetzt duplizierte vorherige Spalte. Jetzt haben wir ein TO-Säulen-Layout und jeder von ihnen hat gleiche Polster- und CSS-Klasse.

Die hintere Karte erstellen

Erstens erstellen wir die Visitenkarte, die normalerweise auf der Rückseite befindet und an der Vorderseite kommt, wenn er klicktiert ist. Hier setzen wir alle Informationen über eine Person ein. Wir nennen es zurück. Um dies zu erstellen, werden wir einen Teiler in Spalte anhängen 1. Dann schalten wir die Sichtbarkeit der Teiler aus der Teilereinstellung aus, da wir den Teiler nur verwenden, um das Bild an der Karte anzuhängen.

Hintergrundfarbe

  • Hintergrundfarbe: # 322b3f

Hintergrundgradient.

  • Hintergrundgradient links Farbe: RGBA (50,43,63,0,72)
  • Hintergrundgradient Recht Farbe: # 322B3F
  • Gradient Typ: radial
  • Endposition: 34%
  • Platz Gradient über Hintergrundbild: Ja

Hintergrundbild

  • Hintergrundbild: [Bild- oder Porträt des Teammitglieds hochladen]
  • Hintergrundbild Größe: Fit
  • Hintergrundbild-Position: Zentrum

Frischgröße

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

Box Schatten

  • Box Shadow: Siehe Screenshot
  • Schattenschatten Vertikale Position: 0px
  • Box Shadow Unschärfe Stärke: 50px

Fügen Sie nun die CSS-Klasse dem Teiler hinzu und aktualisieren Sie die Position.

  • CSS-Klasse: Back-Card
  • Position: absolut

Hinzufügen: Logo auf der Backkarte

Wir haben unsere hintere Karte an Ort und Stelle, wir werden jetzt ein Logo hinzufügen.

Laden Sie nun das Logo hoch. Größe sollte etwa 60px * 60px sein.

CSS-Klasse.

  • CSS-Klasse: Karteninhalt

Position

  • Position: absolut
  • Vertikaler Offset: 30px (Desktop und Tablet), 15px (Telefon)
  • Horizontaler Offset: 50px (Desktop und Tablet), 10px (Telefon)

Hinzufügen: Name des Karteninhabers

Fügen Sie nun ein Textmodul unter einem Logo-Modul hinzu, um die Karte für den Namen zu erhalten. und aktualisieren Sie den Namen der Person, die Sie anzeigen möchten.

Machen Sie diese Folgendes auf der Registerkarte Design geändert.

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

Hinzufügen: Die Jobposition

Duplizieren Sie das vorherige Textmodul, um die Jobposition hinzuzufügen. Ein Bearbeiten des Körperinhalts und Anpassungen auf der Registerkarte Design.

  • Textart Stil: TT
  • Texttextgröße: 16px (Desktop und Tablet), 14px (Telefon)
  • Marge: 15px unten

Hinzufügen: Firmenname

Um den Firmennamen hinzuzufügen, duplizieren Sie das vorherige Textmodul und ändern Sie den Körperinhalt.

  • Textart Gewicht: Licht
  • Textart Stil: Standard
  • Text Textgröße: 22px (Desktop und Tablet), 18px (Telefon)
  • Textausrichtung: links

Hinzufügen: Kontaktnummer

Um die Kontaktnummer des Einzelnen hinzuzufügen. Fügen Sie ein Blurb Burb-Modul unter dem Firmentextmodul hinzu. Aktualisieren Sie den Körperinhalt mit der Telefonnummer und fügen Sie ein Symbol hinzu.

Aktualisieren Sie unter den Entwurfseinstellungen Folgendes:

  • Symbolfarbe: # 20bfac
  • Bild- / Symbolplatzierung: links
  • Verwenden Sie die Symbolschrift Schriftgröße: Ja
  • Symbol Schriftgröße: 20px
  • Körperschriftart: POPPINS
  • Körpertext Farbe: #FFFFFF
  • Körpertextgröße: 16px
  • Marge: 10px unten

E-Mail-Adresse hinzufügen

Duplizieren Sie das vorherige Blurb-Modul und aktualisieren Sie den Körperinhalt als E-Mail-Adresse. Aktualisieren Sie dann das Symbol als Umschlag.

Hinzufügen: Die Website

Machen Sie dasselbe wie wir für den E-Mail-Bereich. Kopieren Sie das vorherige Blurb-Modul und ändern Sie den Inhalt.

Hinzufügen: Social Media-Symbole

Das letzte Modul, wir werden auf der Backkarte hinzufügen, ist das Social-Media-Follow-Modul. Fügen Sie dieses Modul unter dem letzten Blurb-Modul hinzu.

Machen Sie in den Einstellungen jedes soziale Symbol transparent und fügen Sie eine URL hinzu, wenn Sie ihn benötigen. Um alle Symbole transparent zu machen, öffnen Sie jedes Social-Media-Modul und ziehen Sie den weißen markierten Bar nach unten. Es wird die Arbeit ändern.

Auch aus der Registerkarte Design richten Sie die sozialen Medien aus, folgen Sie den Icons in Right.

Hinzufügen: Gleiche Klasse an alle Module

Da die Platzierung und Anpassung aller unserer Module durchgeführt wird, wählen wir sie nun mit der Multi-Select-Funktion von Zwei aus und fügen Sie eine gemeinsame CSS-Klasse hinzu. In Einklang mit dieser CSS-Klasse fügen wir CSS-Code hinzu, der den Inhalt der Karte durch die Flip-Animation vor dem Card zeigt.

  • CSS-Klasse: Karteninhalt

Halten Sie "cmd" oder "ctrl" und klicken Sie auf Elemente, um sie auszuwählen. Klicken Sie dann auf eine Einstellung von einem beliebigen Modul und nehmen Sie die Anpassung vor.

Bau der Frontkarte

Unsere Back-Karte ist fertig und jetzt werden wir an der Frontkarte arbeiten, die an der Stelle der hinteren Karte sitzen und seinen Inhalt in den Rücken verstecken. Wir entwerfen die Frontkarte durch ein Bildmodul in Spalte 2, das die Karte in Spalte ersetzt.

Öffnen Sie nun die Divider-Moduleinstellungen von Back Card und kopieren Hintergrund.

Öffnen Sie nun die Bildeinstellungen für die Frontkarte und fügen Sie sie ein.

Aktualisieren Sie im Abschnitt Design den Abstand des Bildes wie folgt:

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

Erweiterte Einstellungen

Geben Sie dieses Bild auf der Registerkarte Erweitert ein CSS-Klasse an.

  • CSS-Klasse: Front-Card

Fügen Sie die benutzerdefinierten CSS am Hauptelement hinzu.

height: 100%;
width: 100%;

Aktualisieren Sie auch die Positionseinstellungen.

  • Positionsabsolut
  • Z Index: 13

Wenn Sie mit der Frontkarte fertig sind, ziehen Sie es in der Spalte 1 über das Back-Kartenmodul.

Teil 2: Benutzerdefinierter Code hinzufügen

Schließlich fügen wir ein paar kundenspezifische CSS- und JQuery-Code hinzu, um die Flip-Animation auf unseren Visitenkarten-Design zu bringen. Fügen Sie dazu ein Codemodul unter Spalten 1 hinzu.

Hinzufügen: CSS-Code

Fügen Sie nun den untenstehenden Code im Code-Modul hinzu. Achten Sie darauf, dann in einem Style-Tag zu behalten.

.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;
}

Hinzufügen: JQuery-Code

Fügen Sie den folgenden JQuery-Code unter dem CSS-Code hinzu. Vergessen Sie nicht, sie in Skript-Tags zu halten.

(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);

Erstellen von mehr Visitenkarten

Um weitere Visitenkarten Ihrer Teamkollegen hinzuzufügen, müssen wir die Spalte so oft so oft klonen, wie Sie benötigen. Stellen Sie jedoch sicher, dass Sie die Codemodule von klonierten Karten gelöscht haben, da zwei Codemodule mit zwei Codemodulen das Design brechen.

Ändern Sie nun jede Karte nach jeder Person, die Sie hier verwenden möchten.

Endgültige Sicht

Nach all der Arbeit, die wir getan haben, sieht unser Design so aus. Klicken Sie auf jede Karte, und es werden Informationen über das Individuum umdrehen und zeigen. Klicken Sie dann nach draußen und es geht in die vorherige Position zurück.

Fazit

Die interaktive Visitenkarte ist eine großartige Möglichkeit, Ihre Teamkollegen auf der Website anzuzeigen. Sie können dies verwenden, um Informationen zu unseren Projekten, gemeinsamen Ideen und vielen mehr anzuzeigen! Teilen Sie Anteil, wenn Sie dieses Tutorial nützlich halten, und wenn Sie Fragen oder Fragen haben, können Sie unten kommentieren.