Jak tworzyć nakładające się kolumny za pomocą opcji kolumny i transformacji Divi

W jednej z najnowszych aktualizacji Divi dodaliśmy kilka niesamowitych elementów sterujących do kolumn w kreatorze. Tworzenie nakładających się kolumn jest teraz łatwiejsze niż kiedykolwiek. W tym samouczku pokażemy, jak utworzyć sekcję referencji z trzema nakładającymi się kolumnami, używając ustawień kolumny Divi i transformacji.

W tym projekcie użyjemy trzech kolorów, intensywnego pomarańczowego #ff8300, ciepłego żółtego #ffd400 i wyróżniającego się niebieskiego gradientu #0c99c1. Możesz zastosować ten nakładający się projekt kolumny do projektu witryny internetowej w mgnieniu oka.

Zacznijmy.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

1. Utwórz nową zwykłą sekcję + trzykolumnowy wiersz

Pierwszą rzeczą, którą musisz zrobić, to utworzyć zwykłą sekcję z rzędem trzech kolumn.

Dostosuj odstępy sekcji

Zwiększ górną i dolną wyściółkę sekcji.

• Górna wyściółka: 4vw
• Dolna wyściółka: 16vw

Dostosuj rozmiar i odstępy między wierszami

Otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

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

Następnie zmodyfikuj ustawienia odstępów:

• Dolna wyściółka: 0px
• Lewa wyściółka: 11vw
• Prawa wyściółka: 8vw

Dodaj tło gradientowe

Następnie dodaj gradientowe tło:

• Styl tła: Gradient
• Pierwszy kolor: biały #ffffff
• Drugi kolor: pomarańczowy #ff8300
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 35%
• Pozycja końcowa: 35%

2. Kolumny stylu

Przed dodaniem modułów do kolumn zmienimy stylizację, odstępy i ustawienia transformacji każdej kolumny z osobna.

Kolumna 1

Pierwszym etapem stylizacji kolumny są zaokrąglone rogi i cień pudełka:

• Ramka: 20px na wszystkich zaokrąglonych rogach
• Cień pudełka: opcja pierwszego cienia pudełka
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)
• Pozycja cienia pudełka: zewnętrzna

* Przed dodaniem jakichkolwiek ustawień transformacji skopiujemy i wkleimy te style elementów do kolumny drugiej i trzeciej.

Otwórz ponownie ustawienia kolumny 1 i przejdź do karty projektu. Użyjemy ustawień transformacji, aby pierwsza kolumna nakładała się na drugą. Na wypadek, gdybyś zapomniał, oś x jest pozioma, a oś y jest pionowa.

• Przekształć Tłumacz:
  • Pulpit: oś x = 3vw. oś y = 14,2vw
  • Tablet i telefon: oś x = -14vw. oś y = 16vw
• Widoczność: Indeks Z 10

Kolumna 2

Do drugiej kolumny! Przejdź do pola cienia (który dodałeś w jednym z poprzednich kroków) i zwiększ siłę rozmycia pola.

• Siła rozmycia cieni w pudełku: 50px

Kontynuuj, dodając kilka niestandardowych wartości odstępów do kolumny 2.

• Górna wyściółka:
  • Pulpit = 3vw
  • Tablet + telefon = 5vw
• Dolna wyściółka:
  • Pulpit = 5vw
  • Tablet + telefon = 7vw
• Lewa wyściółka:
  • Pulpit = 2vw
  • Tablet + telefon = 4vw
• Prawa wyściółka:
  • Pulpit = 2vw
  • Tablet + telefon = 4vw

Czas na przekształcenie drugiej kolumny! Druga kolumna pozostaje na swoim miejscu na pulpicie, ale musimy zastosować niestandardowe ustawienia transformacji na mniejszych ekranach. Śmiało i dostosuj kartę tłumaczenia transformacji. Dodatkowo zwiększymy indeks Z do 9.

• Przekształć Tłumacz:
  • Tablet i telefon: oś x = 9vw. oś y = 13vw
• Widoczność: indeks Z 9

Kolumna 3

Do trzeciej kolumny! Zwiększ siłę rozmycia cienia już istniejącego.

• Siła rozmycia cieni w pudełku: 50px

Następnie otwórz ustawienia tła i dodaj niebieskie tło gradientowe.

• Tło: Gradient
• Kolor gradientu jeden: #0c99c1
• Drugi kolor gradientu: rgba(5,0,78,0.72)
• Typ gradientu: liniowy
• Kierunek gradientu: 220 stopni
• Pozycja startowa: 0%
• Pozycja końcowa: 100%

Teraz dodajmy odstępy.

• Górna wyściółka:
  • Pulpit = 3vw
  • Tablet + telefon = 10vw
• Dolna wyściółka:
  • Pulpit = 3vw
  • Tablet + telefon = 7vw
• Lewa wyściółka:
  • Pulpit = 1,5vw
  • Tablet + telefon = 10vw
• Prawa wyściółka:
  • Pulpit = 1,5vw
  • Tablet + telefon = 10vw

Na koniec sprawimy, że trzecia kolumna będzie nakładać się na drugą, zmieniając ustawienia translacji transformacji.

• Przekształć Tłumacz:
  • Pulpit: oś x = -10vw. oś y = 14,2vw
  • Tablet: oś x = -14vw. oś y = 9vw
  • Telefon: oś x = -14vw. oś y = 11vw
• Widoczność: indeks Z 9

Oto podgląd naszych kolumn przed dodaniem modułów.

3. Dodaj moduły do ​​kolumn i stylizuj je

Teraz dodajmy moduły do ​​każdej kolumny!

Kolumna 1

W pierwszej kolumnie wstawimy moduł obrazu i moduł tekstowy. Najpierw dodaj moduł obrazu.

1. Dodaj moduł obrazu

Wstaw zdjęcie swojego klienta i wystylizuj je w następujący sposób:

• Wyrównanie: w lewo
• Wymuś pełną szerokość: tak

Dodaj również dolną ramkę do obrazu.

• Kolor dolnej krawędzi: żółty #ffd400
• Szerokość dolnej krawędzi: 9px
• Styl obramowania: Solidny

2. Dodaj moduł tekstowy

Dodaj nowy moduł tekstowy tuż pod modułem obrazu i wstaw nazwę i pozycję klienta.

• Nazwa: Nagłówek 4
• Pozycja: akapit

Po dodaniu treści zmienimy styl ustawień tekstu:

• Czcionka tekstu: Nunito Sans
• Grubość czcionki tekstu: Regularna
• Wyrównanie tekstu: do środka
• Kolor tekstu: Czarny #000000
• Rozmiar czcionki:
  • Komputer stacjonarny = 0,8vw
  • Tablet = 1,8vw
  • Telefon = 2,8vw

Przejdź do ustawień tekstu nagłówka i zastosuj następujące zmiany:

• Tekst nagłówka: H4
• Czcionka nagłówka 4: Poppins
• Grubość czcionki nagłówka 4: pogrubiona
• Kolor tekstu nagłówka 4: Czarny #000000
• Rozmiar tekstu nagłówka 4:
  • Pulpit = 1vw
  • Tablet = 3vw
  • Telefon = 4vw

Zmienimy też ustawienia odstępów:

• Górny margines:
  • Pulpit = 1,5vw
  • Tablet = 3vw
  • Telefon = 7vw
• Margines dolny:
  • Pulpit = 1,5vw
  • Tablet = 3vw
  • Telefon = 7vw

Twoja kolumna powinna wyglądać tak po ukończeniu obu modułów:

Kolumna 2

W kolumnie 2 potrzebujemy tekstu, notki i modułu rozdzielającego. Pierwszy moduł tekstowy to taki, który wygląda jak ustawiony pod kątem baner w prawym górnym rogu kolumny. Aby osiągnąć ten efekt, użyjemy opcji transformacji.

1. Dodaj moduł tekstowy.

Dodaj nowy moduł tekstowy i dodaj słowo „Referencja” do pola treści.

Dodaj żółte tło do modułu.

• Kolor tła: żółty #ffd400

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu i odstępów:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: pogrubiona
• Wyrównanie tekstu: do środka
• Kolor tekstu: biały #ffffff
• Rozmiar tekstu: 23px
• Prawy margines: -50px
• Lewy margines: -50px
• Górna wyściółka: 15px
• Dolna wyściółka: 15px

Na koniec dostosujemy ustawienia transformacji w następujący sposób:

• Przekształć Tłumacz:
  • Pulpit = 17vw na osi x
  • Tablet = 24vw na osi x, 1vw na osi y
  • Telefon = 20vw na osi x, 1vw na osi y
• Transformacja Obrót: 32 stopnie na pierwszej osi

2. Dodaj moduł Blurb.

Po ukończeniu pierwszego modułu nadszedł czas, aby dodać moduł notki.

Moduł notki to miejsce, w którym wyświetlane są referencje klienta. Najpierw kliknij ikonę +, aby dodać moduł i wybierz notkę.

Następnie wstaw zawartość, wybierz ikonę i stylizuj ikonę w następujący sposób:

• Użyj ikony: tak, gwiazda
• Kolor ikony: żółty #ffd400
• Umieszczenie ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak, 48px

Kontynuuj, stylizując tekst tytułu na poziomie H4

• Tekst tytułu: H4
• Czcionka tytułu: Poppins
• Grubość czcionki tytułu: pogrubiona
• Kolor czcionki tytułu: czarny #ffffff

• Rozmiar tekstu tytułu:
  • Pulpit = 1.2vw
  • Tablet = 2,3vw
  • Telefon = 3.3vw
• Wysokość wiersza tytułu:
  • Pulpit = 2vw
  • Tablet = 3,4vw
  • Telefon = 4,6vw

Dostosuj odpowiednio ustawienia tekstu podstawowego:

• Czcionka tekstu głównego: Nunito Sans
• Grubość tekstu głównego: pół pogrubienie
• Kolor tekstu ciała: czarny #000000
• Rozmiar tekstu treści:
  • Komputer stacjonarny = 0,7 vw
  • Tablet = 1,6vw
  • Telefon = 2.4vw
• Wysokość linii ciała:
  • Pulpit = 1,6vw
  • Tablet = 4vw
  • Telefon = 5vw

Chcemy, aby notka była mniej szeroka niż jej kolumna, aby to osiągnąć, dostosujemy szerokość, marginesy i wartości dopełnienia.

Najpierw dostosujemy szerokość notki:

• Szerokość treści: 100%
• Szerokość:
  • Komputer stacjonarny = 58,4%
  • Tablet + telefon = 90%

A potem ustawienia odstępów:

• Górny margines: 3vw
• Dolny margines: 3vw
• Prawy margines: -24vw
• Lewa wyściółka: 0px
• Prawe wypełnienie: 4px

3. Dodaj dzielnik

Ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł dzielnika. Zastosuj następujące zmiany do dzielnika:

• Zobacz dzielnik: Tak
• Kolor dzielnika: czarny #oooooo
• Waga dzielnika: 1px

Prawie jesteśmy na miejscu! Tak wygląda nasz wynik do tej pory:

Kolumna 3

Do trzeciej i ostatniej kolumny! Używamy tej kolumny do wyświetlania wezwania do działania. Używamy trzech modułów; moduł tekstowy, moduł rozdzielający i moduł przycisku.

1. Dodaj moduł tekstowy

Pierwszą rzeczą, którą dodamy do tej kolumny, jest moduł tekstowy.

Dodamy tytuł w H3 i fragment tekstu akapitu do pola treści.

Śmiało i odpowiednio dostosuj ustawienia tekstu:

• Czcionka tekstu: Nunito Sans
• Grubość czcionki tekstu: Regularna
• Kolor czcionki tekstu: biały #ffffff
• Rozmiar czcionki tekstu:
  • Komputer stacjonarny = 0,8vw
  • Tablet = - 2vw
  • Telefon = 2.6vw
• Wysokość wiersza tekstu:
  • Pulpit = 1,5vw
  • Tablet = 4vw
  • Telefon = 5vw

Uzupełnij moduł tekstowy, stylizując ustawienia tekstu nagłówka.

• Tekst nagłówka: H3
• Czcionka nagłówka 3: Poppins
• Grubość czcionki nagłówka 3: pogrubiona
• Kolor tekstu nagłówka 3: Biały #ffffff
• Rozmiar tekstu nagłówka 3:
  • Pulpit = 1,1vw
  • Tablet = 3vw
  • Telefon = 4vw
• Nagłówek 3 Wysokość linii:
  • Pulpit = 1,5vw
  • Tablet = 3vw
  • Telefon = 4.5vw

2. Dodaj moduł dzielnika

Kontynuuj, dodając moduł dzielnika do kolumny 3. Aby wystylizować dzielnik, skopiuj i wklej style dzielnika z tego, który znajdziesz w kolumnie 2.

Otwórz ustawienia dzielnika i zmień kolor z czarnego na biały. Dodaj również górną i dolną wyściółkę.

• Kolor dzielnika: biały #ffffff
• Górna wyściółka: 40px
• Dolna wyściółka: 20px

3. Dodaj moduł przycisku

Przejdźmy do ostatniego modułu, który jest modułem przycisków. Dodaj wybraną kopię.

Przejdź do zakładki projektu i stylizuj przycisk w następujący sposób:

• Użyj niestandardowego stylu dla przycisku: Tak
• Rozmiar tekstu przycisku:
  • Komputer stacjonarny = 0,8vw
  • Tablet = 2,4vw
  • Telefon = 3vw
• Kolor tekstu przycisku: biały #ffffff

• Kolor tła przycisku: Gradient
• Gradient kolor jeden: żółty #ffd400
• Drugi kolor gradientu: Pomarańczowy #ff8300
• Typ gradientu: liniowy
• Kierunek gradientu: 202 stopni.

• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 1px
• Czcionka przycisku: Nunito Sans
• Grubość czcionki przycisku: Ciężka
• Styl czcionki przycisku: TT

Aby przycisk wyglądał dobrze na wszystkich rozmiarach ekranu, dostosujemy wypełnienie przycisku w następujący sposób:

Pulpit

• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw
• Prawa wyściółka: 3vw
• Lewa wyściółka: 3vw

Tablet

• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw
• Prawa wyściółka: 6vw
• Lewa wyściółka: 6vw

Telefon

• Górna wyściółka: 3vw
• Dolna wyściółka: 3vw
• Prawa wyściółka: 8vw
• Lewa wyściółka: 8vw

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Zawijanie

Ta nakładająca się, trzykolumnowa konstrukcja wygląda świetnie jako referencja, ale jesteśmy pewni, że możesz ją zaimplementować do innych niesamowitych rzeczy. Mamy nadzieję, że zainspiruje Cię to do korzystania z opcji przekształcania kolumn i nakładania się w przyszłych projektach. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!