Jak projektować wizytówki za pomocą animacji odwracania po kliknięciu, aby zaprezentować swój zespół w Divi

Projektowanie wizytówek, które odwracają się po kliknięciu, może być kreatywnym dodatkiem do dowolnej sekcji lub strony członka zespołu w Twojej witrynie. Wizytówki są już znanym i intuicyjnym sposobem dostarczania zwięzłych informacji o osobie pracującej w firmie. Dlatego warto oferować ten sam projekt w Internecie. Ponadto informacje zawarte na każdej karcie mogą stać się jeszcze bardziej dynamiczne i interaktywne, umożliwiając użytkownikowi kopiowanie informacji i/lub klikanie linków na wizytówce.

W tym samouczku pokażemy, jak zaprojektować unikalną wizytówkę w Divi, która ma również funkcję odwracania po kliknięciu, aby ujawnić informacje o osobie, tak jak prawdziwa wizytówka.

Wskoczmy i zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Projektowanie wizytówki, która odwraca się po kliknięciu w Divi

Ustawienia wierszy i kolumn

Aby rozpocząć, utwórz jednokolumnowy wiersz w zwykłej sekcji.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

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

Otwórz ustawienia kolumny i nadaj jej wypełnienie w następujący sposób:

• Padding (komputer stacjonarny i tablet): 30 pikseli na górze, 30 pikseli na dole, 50 pikseli w lewo, 50 pikseli w prawo
• Padding (telefon): 15px góra, 15px dół, 15px lewo, 15px prawo

Na karcie Zaawansowane dodaj do kolumny następującą klasę CSS:

• Klasa CSS: karta-kolumna

Ta klasa będzie służyć jako cel w naszym kodzie, aby wyzwolić zdarzenie kliknięcia, które spowoduje później animację odwrócenia.

Zduplikowana kolumna

Teraz, gdy mamy konfigurację jednej kolumny, zduplikuj kolumnę, aby uzyskać układ dwukolumnowy, w którym każda kolumna ma to samo dopełnienie i klasę CSS.

Budowanie tylnej karty

Pierwszym elementem projektu wizytówki jest to, co nazwiemy odwrotną wizytówką, która posłuży jako tło wizytówki z informacjami o karcie. Aby utworzyć przednią kartę, dodaj przegrodę do kolumny 1.

Otwórz ustawienia przegrody i kliknij, aby przegroda NIE była widoczna. Używamy dzielnika tylko jako obrazu tła dla wizytówki.

Następnie zaktualizuj następujące opcje:

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 CSS i pozycja bezwzględna

Następnie dodaj następującą klasę CSS do dzielnika:

• Klasa CSS: tylna karta

I zaktualizuj pozycję na bezwzględną:

• Pozycja: bezwzględna

Tworzenie logo tylnej karty

Gdy tylna karta (dzielnik) jest na miejscu, możemy rozpocząć dodawanie elementów informacji o naszej karcie. Na początek dodamy logo w lewym górnym rogu.

Dodaj moduł obrazu pod modułem rozdzielającym/tylną kartą.

Następnie prześlij obraz logo o wymiarach około 60 na 60 pikseli.

Następnie zaktualizuj obraz za pomocą klasy CSS i pozycji bezwzględnej w następujący sposób:

Klasa CSS

• Klasa CSS: zawartość karty

Pozycja

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

Imię

Aby stworzyć nazwę dla wizytówki, dodaj nowy moduł tekstowy pod obrazem logo.

Zaktualizuj treść treści o imię i nazwisko osoby, którą chcesz umieścić na wizytówce.

Na karcie Projekt zaktualizuj opcje stylu tekstu akapitowego w następujący sposób:

• 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

Stanowisko pracy (lub rola)

Aby dodać pozycję (lub rolę) osoby na karcie, zduplikuj poprzedni moduł tekstowy z imieniem i nazwiskiem.

Następnie zaktualizuj treść treści o pozycję (lub rolę) osoby.

Następnie zaktualizuj ustawienia projektowe dla modułu tekstu pozycji w następujący sposób:

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

Przedsiębiorstwo

Aby dodać nazwę firmy do wizytówki należy zduplikować poprzedni (stanowisko) moduł tekstowy.

Następnie zaktualizuj treść treści o nazwę firmy.

Następnie zaktualizuj ustawienia tekstu firmy w następujący sposób:

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

Numer telefonu

Aby utworzyć numer telefonu do wizytówki, dodaj moduł notki pod modułem tekstowym (firmowym).

Zaktualizuj treść notki (telefonu) o numer telefonu, który chcesz umieścić na karcie.

Kliknij, aby w notce użyć ikony telefonu.

W ustawieniach projektu zaktualizuj następujące elementy:

• Kolor ikony: rgba (162,71,232,0.6)
• Umieszczenie obrazu/ikony: po lewej
• Użyj ikony Rozmiar czcionki: TAK
• Rozmiar czcionki ikony: 20px
• Czcionka ciała: Poppins
• Kolor tekstu ciała: #ffffff
• Rozmiar tekstu ciała: 16px
• Margines: 10px dół

Adres e-mail

Aby wyświetlić adres e-mail na karcie, zduplikuj moduł notki (telefonu) i zaktualizuj treść treści o adres e-mail.

Następnie zaktualizuj ikonę do ikony koperty.

Strona internetowa

Aby wyróżnić witrynę na karcie, zduplikuj moduł notki (telefonu) i zaktualizuj treść treści na stronie internetowej.

Następnie zaktualizuj ikonę bardziej odpowiednią ikoną.

Media społecznościowe śledzą ikony

W przypadku naszego ostatniego fragmentu zawartości karty dodamy do karty ikony śledzenia w mediach społecznościowych. Aby to zrobić, dodaj moduł śledzenia w mediach społecznościowych pod notatką (strona internetowa).

W module Ustawienia śledzenia mediów społecznościowych zaktualizuj każdą z sieci społecznościowych za pomocą przezroczystego tła.

(możesz również dodać adresy URL linków w razie potrzeby później)

Następnie nadaj modułowi odpowiednie wyrównanie.

Dodaj tę samą klasę CSS do wszystkich modułów zawartości karty

Gdy skończymy tworzyć wszystkie moduły zawartości karty dla wizytówki, musimy nadać wszystkim tym modułom tę samą klasę CSS. Aby to zrobić, użyj funkcji wielokrotnego wyboru, aby wybrać wszystkie moduły zawartości karty (logo, imię i nazwisko, pozycja, telefon, e-mail, strona internetowa i ikony mediów społecznościowych), a następnie otwórz ustawienia elementu i dodaj następującą klasę:

• Klasa CSS: zawartość karty

Zamierzamy skierować tę klasę na nasz niestandardowy kod CSS, aby ukryć i pokazać zawartość przed i po animacji odwracania przedniej karty.

Przednia karta

Teraz, gdy nasza tylna karta jest gotowa z całą zawartością karty, jesteśmy gotowi do stworzenia przedniej karty, która będzie znajdować się na wierzchu tylnej karty i zawartości tylnej karty. Aby to zrobić, zaprojektujemy przednią kartę za pomocą modułu obrazu w kolumnie 2. Następnie przesuniemy ją tak, aby usiadła na wierzchu tylnej karty w kolumnie 1.

Najpierw dodaj moduł obrazu do kolumny 2.

Prześlij ten sam obraz logo (60 na 60 pikseli), który został użyty jako obraz z logo tylnej karty.

Następnie otwórz ustawienia modułu tylnej karty (dzielnika) i skopiuj projekt tła.

Następnie otwórz ustawienia obrazu dla projektowanej przez nas karty przedniej i wklej projekt tła do opcji tła modułu obrazu.

Na karcie 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

W zakładce Zaawansowane nadaj obrazowi następującą klasę CSS:

• Klasa CSS: przednia karta

Dodaj następujący niestandardowy kod CSS do elementu głównego:

[/css]
wzrost: 100%;
szerokość: 100%;
[/css]

Aktualizacja opcji pozycji:

• Pozycja bezwzględna
• Indeks Z: 13

Niestandardowa wysokość i szerokość (w połączeniu z pozycją bezwzględną) sprawia, że ​​moduł zawierający obraz (lub logo) obejmuje pełną wysokość i szerokość kolumny nadrzędnej. Tak więc, mimo że jest to jeden moduł obrazu, używamy go do wyświetlania dwóch warstwowych obrazów (logo i obrazu tła) jako ładnej przedniej wizytówki do naszego projektu wizytówki.

Nie zapomnij zmienić obrazu tła na nowy. W tym przypadku używam innego portretu tej samej osoby.

Po zakończeniu przeciągnij moduł obrazu przedniej karty do kolumny 1. Powinien całkowicie zakryć tylną kartę.

Kod niestandardowy

Ostatnim krokiem jest dodanie niestandardowego CSS i JQuery, aby uzyskać pełną funkcjonalność tworzenia animacji odwracania wizytówki po kliknięciu.

Aby dodać kod, dodaj moduł kodu poniżej modułu śledzenia mediów społecznościowych w kolumnie 1.

Niestandardowy CSS

Wklej następujący kod CSS między tagami stylu :

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

JQuery

W CSS wklej następujące JQuery między tagami skryptu

(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 dodatkowych wizytówek

Aby stworzyć dodatkowe wizytówki, wystarczy zduplikować kolumnę zawierającą wszystkie moduły, których użyliśmy do jej budowy. Po zduplikowaniu kolumny będziesz musiał usunąć dodatkowy moduł kodu. Posiadanie dwóch modułów kodu ze zduplikowanym kodem nie zadziała.

Po zduplikowaniu kolumny/karty po prostu zaktualizuj obrazy tła i zawartość karty, korzystając z modułów wymaganych dla nowej wizytówki.

Ostateczny wynik

Oto efekt końcowy projektu wizytówki z animacją odwracania po kliknięciu. Kiedy klikniesz obraz przedniej karty, odwróci się i zniknie, a przegroda na tylnej karcie również się odwróci, ale pozostanie widoczna. Informacje o karcie znikają po zakończeniu animacji odwracania. Aby odwrócić kartę, wystarczy kliknąć poza kolumną zawierającą kartę. Nie chciałem ponownie odwracać karty po kliknięciu karty (jak przełącznik), aby użytkownik mógł klikać elementy na karcie.

Końcowe przemyślenia

Mamy nadzieję, że ten interaktywny projekt wizytówki pomoże Ci zwiększyć kreatywność w sposobie wyświetlania sekcji lub stron członków zespołu w Twojej witrynie. W rzeczywistości ta technika nie ogranicza się do wizytówek. Możesz go użyć do prawie wszystkich informacji, które chcesz wyświetlić. Wypróbuj i sprawdź, czy pasuje do Twojego następnego projektu.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!