Jak tworzyć przerzucane karty z dowolnym modułem w Divi bez wtyczki?

Odwróć karty to świetny sposób na interakcję użytkowników z Twoją witryną. Nie tylko zapewnia fajną animację odwracania, ale także pozwala zaoferować dodatkowe informacje w jednym zwięzłym miejscu. W tym samouczku pokażę, jak zamienić moduły Divi w karty bez użycia wtyczki! Dzięki tej metodzie będziesz mógł użyć jednego modułu Divi jako przedniej strony karty, a innego modułu Divi jako tylnej strony karty. Możesz nawet zaprojektować każdy moduł (przód i tył), jak chcesz, korzystając z kreatora divi. Funkcjonalność jest realizowana za pomocą zaledwie kilku fragmentów CSS (bez jquery).

Myślę, że będziesz zaskoczony, jak proste i przyjemne może być budowanie tych kart.

Zanurzmy się!

Zapowiedź

Oto zajawka projektu, który dziś będziemy budować.

Subskrybuj nasz kanał YouTube

Czego potrzebujesz do tego samouczka

Wszystko, czego potrzebujesz do tego samouczka, to Divi! Nie jest potrzebna żadna wtyczka. Będziemy również korzystać z pakietu App Developer Layout Pack, który jest BEZPŁATNY i dostępny w Divi Builder.

Wyjaśnienie podstawowej idei

Inspiracja dla tego pomysłu pochodziła z tego podstawowego przykładu projektowania kart z klapką. Wystarczyło trochę przeprojektować, aby przypisać klasy div do wierszy, kolumn i modułów Divi, a następnie trochę wyczyścić CSS.

Układ Divi składa się ze zwykłej sekcji z czterema jednokolumnowymi rzędami. W każdym rzędzie dodałem dwa moduły notatek ułożone jeden na drugim (chociaż każdy moduł Divi również działałby). Notatka górna służy jako awers karty, a notatka dolna służy jako rewers karty. Stosując „display:flex” do sekcji, wiersze mają strukturę poziomą jak kolumny. Pozwala to na ułożenie kart obok siebie w czterech kolumnach.

Oto jak wygląda konfiguracja przed dodaniem niestandardowego CSS.

Następnie dodałem niestandardowy CSS do ustawień strony i dodałem odpowiednie klasy CSS do każdego wiersza, kolumny i modułu.

Otóż ​​to!

Tworzenie kartek Divi Flip przy użyciu gotowego układu

Dodawanie gotowego układu do Twojej strony

Aby zacząć działać, utwórz nową stronę, nadaj jej tytuł, a następnie kliknij, aby użyć Divi Builder. Wybierz opcję „Wybierz gotowy układ”. W wyskakującym okienku Wczytaj z biblioteki wybierz pakiet układu dewelopera aplikacji, a następnie kliknij, aby użyć układu strony docelowej dewelopera aplikacji.

Po załadowaniu układu na stronę opublikuj swoją stronę, a następnie kliknij przycisk „Buduj w interfejsie”. Teraz jesteś gotowy do rozpoczęcia tworzenia kartek typu Flip Card.

Konfigurowanie sekcji, wierszy i modułów

W pierwszej sekcji układu dodaj nową zwykłą sekcję z jednokolumnowym wierszem. Nie dodawaj jeszcze żadnych modułów. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Margines niestandardowy: dolny 20 pikseli
Niestandardowe wypełnienie: 0px na górze, 0px na dole

Zapisz ustawienia.

Następnie zduplikuj wiersz trzy razy, aby w sekcji były łącznie cztery wiersze.

Teraz otwórz ustawienia sekcji i dodaj następujący niestandardowy CSS do głównego elementu:

display:flex;

Zmienia to wiersze tak, aby były wyświetlane poziomo, co w zasadzie konwertuje nasze wiersze na cztery kolumny, mimo że technicznie nadal są to wiersze Divi, z których każdy ma jedną kolumnę.

Dodawanie modułów do wierszy

W tym miejscu przydaje się nasz gotowy układ w tym samouczku. Użyjemy czterech modułów notatek w górnej części układu, aby przyspieszyć projektowanie naszych kart z klapką. Korzystając z opcji kliknięcia prawym przyciskiem lub skrótów klawiszowych ctrl+c i ctrl+v (windows) i cmd+c cmd+v (mac), skopiuj i wklej gotowe moduły do ​​każdego z właśnie utworzonych wierszy. Upewnij się, że każdy wiersz zawiera zduplikowane wersje tego samego modułu.

Teraz twoja sekcja powinna wyglądać tak.

Projektowanie modułów przedniej i tylnej karty z klapką

Dwa moduły ułożone w każdym rzędzie będą używane jako przód i tył odwracanych kart. Górny moduł w każdym rzędzie będzie służył jako przód, a dolny jako tył. Ponieważ projekt przedniej karty (górny moduł) jest już wykonany dzięki naszemu gotowemu układowi, wszystko, co musimy zrobić, to dostosować projekt i zawartość tylnej karty (moduł dolny).

Korzystając z funkcji Divi multiselect, wybierz wszystkie dolne moduły w każdym rzędzie, a następnie otwórz ustawienia elementów, aby dostosować wszystkie cztery moduły jednocześnie.

Teraz możemy zaktualizować opcje ustawień elementów, aby stylizować tylną wersję naszych odwracanych kart. Zaktualizuj ustawienia elementu w następujący sposób:

Treść: „To jest opis”.
Kolor tła: #00a2fa
Kolor tekstu: jasny

Dodawanie niestandardowych klas CSS i CSS

Teraz nadszedł czas na niestandardowy CSS, który zapewni nam funkcjonalność flip-card. Otwórz ustawienia strony i dodaj następujący niestandardowy CSS:

@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);
}
}

Zauważ, że powyższe klasy CSS są nazwane w sposób, który powinien pomóc Ci zrozumieć, co każda z nich robi. Jest to również pomocny wskaźnik, gdzie musimy dodać te klasy CSS do naszych elementów Divi. Na przykład klasa „flip-box-row” ma stylizować każdy z czterech wierszy; dlatego każdy wiersz musi mieć tę klasę CSS.

Dodawanie klas CSS do elementów Divi

Używając Multiselect, wybierz wszystkie cztery górne moduły (przednie karty) w każdym z rzędów. Następnie dodaj następującą klasę CSS:

Klasa CSS: flip-box-front

Następnie użyj multiselect, aby wybrać wszystkie cztery dolne moduły (tylne karty) w każdym z wierszy i dodaj następującą klasę CSS do tych modułów:

Klasa CSS: flip-box-back

Na koniec użyj opcji wielokrotnego wyboru, aby zaznaczyć wszystkie cztery wiersze i nadać im następujące klasy CSS:

Klasa CSS: flip-box-row
Klasa CSS kolumny: flip-box-column

Ostateczny projekt na pulpicie

Po dodaniu wszystkich naszych klas CSS nasze flip-karty są w pełni funkcjonalne. Sprawdź ostateczny projekt na komputerze.

Dostosowywanie projektu do urządzeń mobilnych

W niestandardowym kodzie CSS, który już dodaliśmy do ustawień strony, znajduje się zapytanie o media, które ogranicza funkcjonalność flip-card tylko do pulpitu. Jednak nadal musimy ukrywać przednie wersje naszych odwracanych kart na tablecie i smartfonie, a także upewnić się, że nasze wiersze ładnie się układają podczas dostosowywania szerokości przeglądarki.

Aby ukryć nasze moduły opisów na przedniej stronie, użyj multiselect, aby wybrać wszystkie górne moduły (karty z przodu) w każdym rzędzie (będzie to łatwiejsze w trybie widoku szkieletowego, ponieważ elementy będą się poruszać w kreatorze interfejsu) i zaktualizuj następujące elementy:

Wyłącz na: telefonie i smartfonie

Następnie otwórz ustawienia sekcji i dodaj jeszcze jedną linię CSS do głównego elementu oprócz tej dodanej wcześniej:

flex-wrap:wrap;

Dzięki temu wiersze będą się układać w stos na urządzeniu mobilnym.

Sprawdźmy teraz ostateczny projekt na tablecie i smartfonie.

Opcja bonusowa: Odwracanie kart w pionie!

Jeśli chcesz, aby twoje karty odwracały się w pionie zamiast w poziomie, wystarczy zmienić dwie litery (dosłownie) w niestandardowym CSS. Otwórz ustawienia strony i zlokalizuj dwa miejsca, w których używane jest „transform: rotateY(180deg)”. Następnie zamień „Y” na „X”. Jeśli jeszcze nie zgadłeś, spowoduje to zmianę obrotu na oś X zamiast na osi Y.

Całkiem fajne rzeczy! Sprawdź wynik.

Końcowe przemyślenia

Nie musisz uciekać się do wtyczki, aby tworzyć świetnie wyglądające karty Flip Card w Divi. Dzięki temu samouczkowi masz strukturę do tworzenia niezliczonych projektów i kombinacji zawartości kart z klapką. Nie zapominaj, że możesz wybrać dowolne dwa moduły, które będą służyć jako przód i tył twoich kart. Więc nie krępuj się, bądź kreatywny!

Mam nadzieję, że było to pomocne i czekam na wiadomość od Ciebie w komentarzach poniżej.

Pozdrawiam!