Uzyskaj natychmiastowy hosting z elementem ELEMENTORem i ELEMENTOR PRO

Z CDN, SSL i kopią zapasami.

Zacznij dzisiaj

Jak zaprojektować atrakcyjne wizytówki z animacją odwracania na Divi

Rifat Divi Tutorials Oct 20, 2021

Wizytówki są popularnym sposobem na przedstawienie osoby korporacyjnej osobie. Zawiera wszystkie niezbędne informacje o tej osobie i dostarcza jej przydatne dane kontaktowe. Co powiesz na wirtualną wizytówkę na stronie internetowej, która odwraca się i wykonuje tę samą pracę? Na pewno będzie bardziej dynamiczna, a do niej zostaną dołączone linki społecznościowe, aby każdy mógł łatwo skontaktować się z daną osobą. Cóż, to brzmi naprawdę interesująco i będziemy dowiedz się o tym projekcie już dziś, na Divi ! Więc zacznijmy.

Podgląd projektu

Dziś zbudujemy ten projekt. Wygląda interesująco, co?

Część 1: Projekt wizytówki, która odwraca się po kliknięciu

Dodaj: rząd 1

Zacznij od dodania jednokolumnowego wiersza do zwykłej sekcji.

Zaktualizuj następujące ustawienia.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz
  • Wyrównaj wysokości kolumn: TAK
  • Szerokość: 90%
  • Maksymalna szerokość: 1200 pikseli

Otwórz ustawienie kolumny i dodaj do niego dopełnienie.

Wyściółka

  • Pulpit - 30px na górze i na dole, 50px po lewej i prawej stronie.
  • Tablet - 30px na górze i na dole, 50px po lewej i prawej stronie.
  • Telefon - 15px na górze i na dole, 15px po lewej i prawej

Dodaj następującą klasę CSS z karty zaawansowane. Ten kod będzie działał jako wyzwalacz do kliknięcia naszej animacji odwracania.

  • Klasa CSS: karta-kolumna

Klonowanie kolumn

Teraz zduplikowana poprzednia kolumna. Teraz mamy układ do kolumn i każdy z nich ma takie samo dopełnienie i klasę CSS.

Budowanie tylnej karty

Najpierw utworzymy wizytówkę, która zazwyczaj będzie znajdować się na odwrocie i po kliknięciu wyjdzie na wierzch. Tutaj umieścimy wszystkie informacje o osobie. Odwołamy to kartą. Aby to stworzyć, dołączymy dzielnik w kolumnie 1. Następnie wyłączymy widoczność dzielnika z ustawienia dzielnika, ponieważ użyjemy dzielnika tylko do dołączenia obrazu do karty.

Kolor tła

  • Kolor tła: #322b3f

Gradient tła

  • Kolor lewego gradientu tła: rgba (50,43,63,0.72)
  • Prawy gradient tła: #322b3f
  • Typ gradientu: Promieniowy
  • Pozycja końcowa: 34%
  • Umieść gradient nad obrazem tła: TAK

Zdjęcie w tle

  • Obraz tła: [prześlij obraz lub portret członka zespołu]
  • Rozmiar obrazu tła: fit
  • Pozycja obrazu tła: środek

Rozmiary

  • Szerokość: 100%
  • Minimalna wysokość: 300px
  • Wzrost: 100%

Cień Pudełka

  • Cień pudełka: patrz zrzut ekranu
  • Pozycja pionowa cienia pudełka: 0px
  • Siła rozmycia cieni w pudełku: 50px

Klasa i pozycja CSS

Teraz dodaj klasę CSS do dzielnika i zaktualizuj pozycję.

  • Klasa CSS: tylna karta
  • Pozycja: bezwzględna

Dodaj: Logo na odwrocie karty

Mamy już naszą tylną kartę, teraz dodamy do niej logo.

Teraz prześlij logo. Rozmiar powinien wynosić około 60px*60px.

Klasa CSS

  • Klasa CSS: zawartość karty

Pozycja

  • Pozycja: bezwzględna
  • Przesunięcie w pionie: 30px (komputer i tablet), 15px (telefon)
  • Przesunięcie w poziomie: 50px (komputer i tablet), 10px (telefon)

Dodaj: imię i nazwisko posiadacza karty

Teraz dodaj moduł tekstowy pod modułem logo do karty dla nazwy. I zaktualizuj nazwisko osoby, którą chcesz wyróżnić.

Dokonaj następujących zmian na karcie projektu.

  • Czcionka tekstu: Poppins
  • Kolor tekstu: #ffffff
  • Tekst Rozmiar tekstu: 28px (komputer i tablet), 22px (telefon)
  • Odstępy między literami: 1px
  • Wyrównanie tekstu: do prawej

Dodaj: Stanowisko pracy

Powiel poprzedni moduł tekstowy, aby dodać stanowisko. Edytować zawartość treści i wprowadzać poprawki na karcie projektu.

  • Styl czcionki tekstu: TT
  • Tekst Rozmiar tekstu: 16px (komputer i tablet), 14px (telefon)
  • Margines: dolny 15px

Dodaj: Nazwa firmy

Aby dodać nazwę firmy, zduplikuj poprzedni moduł tekstowy i zmień treść treści.

  • Grubość czcionki tekstu: Lekka
  • Styl czcionki tekstu: domyślny
  • Tekst Rozmiar tekstu: 22px (komputer i tablet), 18px (telefon)
  • Wyrównanie tekstu: do lewej

Dodaj: numer kontaktowy

Aby dodać numer kontaktowy osoby. dodać moduł notki pod modułem tekstowym firmy. zaktualizuj zawartość ciała o numer telefonu i dodaj ikonę.

W ustawieniach projektu zaktualizuj następujące elementy:

  • Kolor ikony: #20BFAC
  • Umieszczenie obrazu/ikony: po lewej
  • Użyj ikony Rozmiar czcionki: TAK
  • Rozmiar czcionki ikony: 20px
  • Czcionka ciała: Poppins
  • Kolor tekstu: #ffffff
  • Rozmiar tekstu ciała: 16px
  • Margines: 10px dół

Dodaj adres e-mail

Zduplikuj poprzedni moduł notki i zaktualizuj treść treści jako adres e-mail. Następnie zaktualizuj ikonę jako kopertę.

Dodaj: Strona internetowa

Zrób to samo, co zrobiliśmy dla sekcji e-mail. Skopiuj poprzedni moduł notki i zmień zawartość.

Dodaj: Ikony mediów społecznościowych

Ostatnim modułem, który dodamy na tylnej karcie, jest moduł śledzenia w mediach społecznościowych. Dodaj ten moduł pod ostatnim modułem notki.

W ustawieniach spraw, aby każda ikona społecznościowa była przezroczysta i dodaj adres URL, jeśli tego potrzebujesz. Aby wszystkie ikony były przezroczyste, otwórz każdy moduł mediów społecznościowych i przeciągnij biały zaznaczony pasek w dół. To zmieni pracę.

Ponadto na karcie projektowania wyrównaj ikony śledzenia mediów społecznościowych w prawo.

Dodaj: ta sama klasa do wszystkich modułów

Ponieważ umieszczanie i dostosowywanie wszystkich naszych modułów zostało zakończone, teraz wybierzemy je za pomocą funkcji wielokrotnego wyboru Divi i dodamy wspólną klasę CSS. Zgodnie z tą klasą CSS, dodamy kod CSS, który pokaże zawartość przed kartą poprzez animację odwracania.

  • Klasa CSS: zawartość karty

Przytrzymaj „Cmd” lub „Ctrl” i kliknij elementy, aby je wybrać. Następnie kliknij na ustawienia z dowolnego modułu i dokonaj regulacji.

Budowanie przedniej karty

Nasza tylna karta jest skończona i teraz będziemy pracować nad przednią kartą, która zajmie miejsce tylnej i ukryje jej zawartość z tyłu. Przednią kartę zaprojektujemy za pomocą modułu obrazu w kolumnie 2, który zastąpi kartę w kolumnie 1. Najpierw dodamy moduł obrazu w kolumnie 2 i dodamy logo (60px*60px) na module.

Teraz otwórz ustawienia modułu dzielnika z tylnej karty i skopiuj tło.

Teraz otwórz ustawienia obrazu dla przedniej karty i wklej ją.

W sekcji projektu zaktualizuj odstępy obrazu w następujący sposób:

  • Padding (komputer i tablet): 30px u góry, 50px w lewo
  • Padding (telefon): 15px u góry, 10px w lewo

Zaawansowane ustawienia

Na karcie Zaawansowane nadaj temu obrazowi klasę CSS.

  • Klasa CSS: przednia karta

Dodaj niestandardowy CSS na głównym elemencie.

height: 100%;
width: 100%;

Zaktualizuj także ustawienia pozycji.

  • Pozycja bezwzględna
  • Indeks Z: 13

Teraz, gdy skończysz z przednią kartą, przeciągnij ją na moduł tylnej karty w kolumnie 1.

Część 2: Dodawanie niestandardowego kodu

Na koniec dodamy niestandardowy kod CSS i JQuery, aby wprowadzić animację odwracania do naszego projektu wizytówki. W tym celu dodaj moduł kodu poniżej kolumny 1.

Dodaj: kod CSS

Teraz dodaj poniższy kod w module kodu. Upewnij się, że trzymasz je w tagu Style .

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

Dodaj: kod JQuery

Dodaj następujący kod JQuery poniżej kodu CSS. Nie zapomnij trzymać ich wewnątrz tagów Script .

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

Tworzenie większej liczby wizytówek

Aby dodać więcej wizytówek twoich kolegów z drużyny, musimy sklonować kolumnę tyle razy, ile potrzebujesz. Ale upewnij się, że usunąłeś moduły kodu ze sklonowanych kart, ponieważ posiadanie dwóch modułów kodu zepsuje projekt.

Teraz zmodyfikuj każdą kartę zgodnie z każdą osobą, którą chcesz tu wyróżnić.

Widok końcowy

Po całej pracy, którą wykonaliśmy, nasz projekt wygląda tak. Kliknij każdą kartę, a odwróci się i pokaże informacje o osobie. Następnie kliknij na zewnątrz, a wróci do poprzedniej pozycji.

Wniosek

Interaktywna wizytówka to świetny sposób na zaprezentowanie kolegów z drużyny na stronie. Możesz użyć tego, aby pokazać informacje o naszych projektach, dzielić się pomysłami i wiele więcej! Hit udostępnij, jeśli uznasz ten samouczek za przydatny i jeśli masz jakieś pytania lub pytania, możesz skomentować poniżej.