Tworzenie sekcji bohatera polaroidu z opcjami transformacji Divi

Kreatywne sekcje bohaterów sprawiają, że strony internetowe zapadają w pamięć i są wyjątkowe. Ta sekcja bohatera polaroida przywołuje poczucie vintage'owej wędrówki. Korzystając z opcji transformacji kolumn, polaroidy można ułożyć w dowolny sposób, tak jakby były rozłożone na stole.

Możesz odtworzyć ten projekt sekcji bohatera polaroidu za pomocą własnych kwadratowych obrazów. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Pulpit

mobilny

Pobierz projekt sekcji Polaroid Hero ZA DARMO

Aby położyć ręce na bezpłatnym projekcie sekcji bohatera polaroidu, 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!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać

Dodaj nową sekcję

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz.

Dolny rozdzielacz

Dodaj miętową zieloną przegrodę dolną.

• Umieszczenie dzielnika: dół
• Styl dzielnika: #12
• Kolor dzielnika: Miętowa zieleń #d2f2d0
• Wysokość dzielnika: 23vw

Rozstaw

Dostosuj odstępy sekcji.

• Górny margines: 7vw
• Margines dolny: 0px
• Wyściółka górna i dolna: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do swojej sekcji. Wybierz następującą strukturę kolumn:

Rozmiary

Teraz dostosuj rozmiar wiersza.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 90vw
• Maksymalna szerokość: 100%

Rozstaw

Następnie dostosuj górną i dolną wyściółkę w ustawieniach odstępów.

• Wyściółka górna i dolna: 0px

Wyświetlacz

Dodaj jeden wiersz kodu CSS do głównego elementu wiersza, aby kolumny znajdowały się obok siebie na mniejszych ekranach.

• Niestandardowy CSS – Główny Element: display: flex;

display: flex;

Dodaj moduł obrazu do kolumny 1

Prześlij obraz kwadratowy

Dodaj moduł obrazu do kolumny 1 i prześlij obraz kwadratowy.

Wyrównanie

Teraz dostosuj wyrównanie modułu.

• Wyrównanie modułu: Środek

Rozmiary

Następnie utwórz moduł o pełnej szerokości.

• Wymuś pełną szerokość: tak

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Dodaj moduł tekstowy i wstaw trochę treści. Użyjemy słowa „polaroid”.

Tekst

Stylizuj czcionkę tekstu.

• Czcionka tekstu: Advent Pro
• Wyrównanie tekstu: do środka
• Kolor tekstu: bardzo ciemnoszary #474747
• Rozmiar czcionki:
  • Pulpit: 1vw
  • Tablet + telefon: 2vw
• Odstępy między literami tekstu: 0,1vw
• Wysokość linii tekstu: 1,8 em

Rozmiary

Użyj „100%” jako szerokości w ustawieniach rozmiaru.

• Szerokość: 100%

Rozstaw

Teraz dostosuj odstępy.

• Górny margines: 1vw

Klonuj moduły dwukrotnie i umieść duplikaty w pozostałych kolumnach

Zmień obraz i kopię duplikatów

Zmień obrazy w każdym zduplikowanym module obrazu. Jeśli Twój projekt tego wymaga, zmień również treść tekstu.

Ustawienia kolumny 1

Tło

Kontynuuj, otwierając ustawienia kolumny 1 wiersza. Ustaw białe tło, aby uzyskać efekt polaroidu.

• Kolor tła: biały #ffffff

Rozstaw

Dodaj dolną wyściółkę, aby stworzyć szerszą dolną granicę polaroidu.

• Dolna wyściółka: 2vw

Granica

Dodaj ramkę, aby zakończyć wizualizację polaroidu.

• Szerokość obramowania z 4 stron: 1vw
• Szerokość górnej granicy: 2vw
• Szerokość prawej krawędzi: 2vw
• Szerokość dolnej granicy: 1vw
• Szerokość lewej krawędzi: 2vw
• Kolor obramowania: biały #ffffff

Cień Pudełka

Uzupełnij ustawienia kolumny 1, dodając subtelny cień pudełka.

• Cień pudełka: #1

Rozszerz ustawienia kolumny 1

Użyj opcji rozszerzenia stylów, aby rozszerzyć ustawienia kolumn.

• Wróć do głównego okna ustawień wiersza i kliknij trzy kropki po prawej stronie pierwszej karty kolumny.
• Wybierz „rozszerz style elementów” i wybierz „w całym tym wierszu”.

Style transformacji kolumny 1

Teraz dostosuj ustawienia transformacji w pierwszej kolumnie.

• Transform Translacja: oś x -11vw, oś y -6vw
• Transformacja Obrót: 341 stopni, pierwsza opcja

Style transformacji kolumny 2

Następnie dostosuj ustawienia transformacji dla drugiej kolumny.

• Transform Translacja: oś x -22w, oś y 0vw
• Transformacja Obrót: 10 stopni, pierwsza opcja

Kolumna 3 Style transformacji

Na koniec dostosuj ustawienia transformacji dla kolumny trzeciej.

• Skala transformacji: 68% w obu osiach
• Transform Translacja: oś x -46w, oś y 12vw
• Transformacja Obrót: 31 stopni, pierwsza opcja

Dodaj nową sekcję

Tło

Dodaj nową sekcję i zastosuj miętowozielone tło do sekcji.

• Kolor tła: miętowa zieleń #d2f2d0

Dolny rozdzielacz

Daj sekcji dolną przegrodę.

• Umieszczenie dzielnika: dół
• Styl dzielnika: #12
• Kolor dzielnika: biały #ffffff
• Wysokość dzielnika: 23vw

Rozstaw

Usuń domyślną górną wyściółkę.

• Górna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz z 3 kolumnami.

Kopiuj i wklej style wierszy

Korzystając z widoku szkieletowego, skopiuj i wklej style wierszy z pierwszej sekcji

• Najpierw kliknij trzy kropki po prawej stronie menu wiersza w pierwszej sekcji. Wybierz „Kopiuj style wierszy”.
• Następnie kliknij trzy kropki po prawej stronie menu wiersza w drugiej sekcji. Wybierz „wklej style wierszy”.

Kopiuj i wklej ustawienia kolumny

Teraz skopiuj ustawienia kolumn z pierwszego wiersza i wklej je do kolumn 1 i 2 w nowym wierszu.

• Najpierw otwórz ustawienia wiersza w pierwszym wierszu.
• Po drugie, kliknij trzy kropki po prawej stronie pierwszej karty kolumny i wybierz „Kopiuj style elementów”.
• Następnie przewiń w dół do nowego wiersza i otwórz kartę ustawień.
• Na koniec kliknij trzy kropki po prawej stronie pierwszej kolumny i wybierz opcję „wklej style elementów”.

Style transformacji kolumny 1

Teraz dostosuj style transformacji w kolumnie 1.

• Skala transformacji: 75% obu osi
• Transform Translacja: oś x -8w, oś y -14vw
• Transformacja Obrót: 35 stopni pierwsza opcja

Style transformacji kolumny 2

Następnie zmodyfikuj style transformacji w kolumnie 2.

• Transform Translacja: oś x -17w, oś y 2vw
• Transformacja Obrót: 346 stopni 1 opcja

Dodaj moduły obrazu

Powiel i przeciągnij moduły obrazu

Teraz wróć do widoku szkieletowego, aby powielić i przeciągnąć dwa moduły obrazu.

• Najpierw dwukrotnie zduplikuj pierwszy moduł obrazu z pierwszej sekcji.
• Następnie przeciągnij je do pierwszej i drugiej kolumny drugiej sekcji.
• Zmień obraz w każdym module na nowy kwadratowy obraz.

Dodaj moduły tekstowe

Powiel i przeciągnij moduły tekstowe

Po obrazach zrób to samo z modułami tekstowymi. Powiel z pierwszej sekcji i przeciągnij do drugiej sekcji.

• W widoku szkieletowym dwukrotnie zduplikuj moduł tekstowy z pierwszej kolumny w pierwszej sekcji.
• Teraz przeciągnij nowe moduły tekstowe do kolumn 1 i 2 w drugiej sekcji.
• Jeśli chcesz zmienić treść, zrób to teraz.

Dodaj moduł tekstowy do kolumny 3

Dodaj zawartość

Kliknij symbol plusa w trzeciej kolumnie i dodaj moduł tekstowy. Wstaw trochę treści H2 i akapitu.

Tekst

Stylizuj tekst w następujący sposób.

• Czcionka tekstu: Advent Pro
• Wyrównanie tekstu: do środka
• Kolor tekstu: ciemnoszary #848484
• Rozmiar czcionki:
  • Pulpit: 1vw
  • Tablet + telefon: 1.9vw
• Odstępy między literami tekstu: 0,1vw
• Wysokość wiersza tekstu:
  • Pulpit: 1,2 em
  • Tablet + telefon: 1,3 em

Tekst nagłówka

Teraz nadaj styl tekstowi H2.

• Nagłówek: H2
• Czcionka H2: Adamina
• Grubość czcionki H2: pogrubiona
• Kolor czcionki H2: bardzo ciemnoszary #444444
• Rozmiar czcionki H2:
  • Komputer stacjonarny: 2vw
  • Tablet + telefon: 3vw
• Odstępy między literami H2: 4px
• Wysokość linii H2:
  • Komputer stacjonarny: 1,7vw
  • Tablet + telefon: 1,5vw

Rozmiary

Następnie dostosuj rozmiar.

• Szerokość:
  • Komputer stacjonarny: 60%
  • Tablet: 91%
  • Telefon: 100%
• Wyrównanie modułu: Środek

Rozstaw

Na koniec dostosuj odstępy.

• Górny margines: -12vw

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

Kliknij symbol plusa pod tekstem i dodaj moduł przycisku. Dodaj kopię do przycisku.

Wyrównanie

Zmień wyrównanie przycisku.

• Wyrównanie: Środek

Niestandardowe style przycisków

Nadaj odpowiedni styl przyciskowi.

• Rozmiar tekstu przycisku:
  • Pulpit: 1vw
  • Tablet: 2.4vw
  • Telefon: 2.3vw
• Szerokość obramowania przycisku: 0px
• Kolor tekstu przycisku: czarny #000000
• Odstępy między przyciskami: 4px
• Czcionka przycisku: Advent Pro
• Waga czcionki przycisku: pogrubiona

Rozstaw

Zastosuj wartość górnego marginesu.

• Górny margines: 2vw

Dodaj moduł rozdzielający do kolumny 3

Widoczność

Poniżej przycisku dodaj przegrodę i stylizuj w następujący sposób.

• Widoczność: Tak

Linia

Daj dzielnikowi jasnozielony kolor.

• Kolor linii: #55f252

Rozmiary

Zmień ustawienia rozmiaru dzielnika i gotowe!

• Waga rozdzielacza
  • Pulpit: 7px
  • Tablet + telefon: 4px
• Szerokość:
  • Pulpit: 10%
  • Tablet + telefon: 30%
• Wyrównanie modułu: Środek

Zapowiedź

Przyjrzyjmy się ponownie ukończonemu projektowi sekcji bohatera polaroidu na różnych rozmiarach ekranu.

Pulpit

mobilny

To okład!

W tym poście pokazaliśmy, jak odtworzyć sekcję bohatera polaroidu za pomocą opcji transformacji Divi. To świetny sposób na zaprezentowanie wielu obrazów w sekcji bohatera strony. Mamy nadzieję, że ten projekt zainspiruje Twoje kreatywne projekty sekcji bohaterów! Jeśli masz jakieś pytania, koniecznie zostaw komentarz w sekcji komentarzy poniżej.