Używanie nowych ustawień filtra kolumn Divi do tworzenia oszałamiających efektów mieszania

Nowe ustawienia filtra kolumn Divi można wykorzystać na wiele kreatywnych sposobów. W tym poście pokażemy, jak połączyć obraz tła głównego wiersza z zawartością kolumny. Dodamy do modułów różne gradienty kolorów i tryb mieszania „ekranu” kolumn, aby stworzyć oszałamiający efekt. Mamy nadzieję, że ten projekt zainspiruje Cię do użycia trybów mieszania kolumn w następnym projekcie Divi. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Pobierz układ trybów mieszania kolumn ZA DARMO

Aby położyć ręce na układzie trybów mieszania wolnych kolumn, 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!

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję z 3-kolumnowym rzędem

Rozpocznij projektowanie, dodając nową sekcję z rzędem trzech kolumn.

Odstępy między sekcjami

Otwórz ustawienia przekroju i dostosuj odstępy.

• Lewy i prawy margines: 3vw
• Wyściółka górna i dolna: 84px

Ustawienia wiersza

Tło

Przed dodaniem jakichkolwiek modułów zmodyfikujemy ustawienia wierszy. Zacznij od dodania koloru tła.

• Kolor tła: średni szary #c4c4c4

Następnie prześlij obraz tła i zmieszaj kolor tła z obrazem w trybie mieszania.

• Mieszanie obrazu tła: mnożenie

Rozmiary

Dostosuj ustawienia rozmiaru następnego wiersza.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokość kolumny: tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń również domyślne dopełnienie wiersza.

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

Cień Pudełka

Kontynuuj, dodając prosty cień do wiersza.

• Cień pudełka: pierwsza opcja

Widoczność

Dostosuj indeks Z na karcie widoczności.

• Indeks Z: 1

Kolumna stylu 1

Wprowadź ustawienia pierwszej kolumny.

Filtry

Zastosuj tryb mieszania ekranu do kolumny na karcie filtrów.

• Tryb mieszania: ekran

Skala przekształcenia najechania

Wejdź do grupy opcji transformacji i zmodyfikuj ustawienia skali transformacji po najechaniu.

• Skala transformacji: 105% na obu osiach x i y

Widoczność

Wejdź na kartę widoczności kolumny i dostosuj ustawienia przepełnienia.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Przejścia

Przejdź do zakładki przejść i dostosuj czas trwania przejścia, aby uzyskać płynne przejście.

• Czas trwania przejścia: 500 ms

Dodaj moduł tekstowy do kolumny 1

Każda kolumna zawiera trzy moduły tekstowe. Dodaj pierwszy moduł tekstowy do kolumny 1 z wybraną zawartością H2 i dostosuj ustawienia w następujący sposób.

Tło

Stylizuj tło za pomocą gradientu kolorów.

• Tło: Gradient
• Gradient kolor jeden: #5498ff
• Drugi kolor gradientu: #16fff3
• Kierunek gradientu: 235 stopni
• Pozycja startowa: 37%

Rozstaw

Następnie dodaj kilka niestandardowych wartości odstępów.

• Wyściółka górna i dolna: 6vw
• Wyściółka lewa i prawa: 3vw

Tekst nagłówka

Wprowadź ustawienia tekstu nagłówka i odpowiednio dostosuj ustawienia tekstu H2:

• Grubość czcionki nagłówka 2: Ultra Bold
• Styl czcionki nagłówka 2: TT
• Kolor tekstu nagłówka 2: Czarny #oooooo
• Rozmiar tekstu nagłówka 2:
  • Pulpit: 5vw
  • Tablet: 11vw
  • Telefon: 13vw
• Wysokość linii nagłówka 2:
  • Komputer stacjonarny: 4.3vw
  • Tablet: 9vw
  • Telefon: 10,5vw

Filtry

Przejdź do ustawień filtrów i dodaj tryb mieszania ekranu.

• Tryb mieszania: ekran

Dodaj drugi moduł tekstowy do kolumny 1

Kontynuuj, dodając drugi moduł tekstowy do kolumny 1 z wybraną zawartością akapitu.

Dostosuj moduł tekstowy w następujący sposób:

Tło

Dodaj biały kolor tła.

• Kolor tła: biały #fffffff

Tekst

Wejdź w zakładkę projektu i odpowiednio dostosuj tekst:

• Czcionka tekstu: Montserrat
• Wyrównanie tekstu: wyjustowane
• Kolor tekstu: Ciemnoszary #333333
• Rozmiar czcionki:
  • Komputer stacjonarny: 0,8vw
  • Tablet: 2vw
  • Telefon: 2.5vw
• Odstępy między literami tekstu: -0,04vw
• Wysokość wiersza tekstu:
  • Komputer stacjonarny: 2,7vw
  • Tablet: 5,5vw
  • Telefon: 6vw

Rozstaw

Dostosuj ustawienia odstępów, aby utworzyć pustą przestrzeń wokół tekstu.

• Margines górny i dolny: 0,5vw
• Wyściółka górna i dolna:
  • Pulpit: 5vw
  • Tablet + telefon: 15vw
• Lewa wyściółka: 5vw
• Prawa wyściółka:
  • Pulpit: 5vw
  • Tablet + telefon: 25vw

Filtry

Na koniec zastosuj tryb mieszania ekranu na karcie filtrów.

• Tryb mieszania: ekran

Dodaj trzeci moduł tekstowy do kolumny 1

Aby ukończyć projekt kolumny, dodaj trzeci moduł tekstowy z kopią CTA. Używamy całego tego modułu jako przycisku.

Styl modułu w następujący sposób:

Dodaj link

Dodaj wybrany link w ustawieniach linku. Gdy tylko ktoś kliknie w dowolnym miejscu modułu, zostanie przekierowany w inne miejsce.

Tło

Styl gradientu tła, aby pasował do pierwszego modułu tekstowego.

• Tło: Gradient
• Kolor gradientu tła jeden: #5498ff
• Drugi kolor gradientu tła: #16fff3
• Kierunek gradientu: 235 stopni

Tekst

Wejdź na zakładkę projektu i stylizuj tekst w następujący sposób:

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ciężka
• Styl czcionki tekstu: podkreślony
• Kolor podkreślenia tekstu: biały #ffffff
• Kolor tekstu: Czarny #000000
• Rozmiar czcionki:
  • Komputer stacjonarny: 1,5vw
  • Tablet: 3,3vw
  • Telefon: 4vw
• Wysokość linii tekstu: 1em

Rozstaw

Dostosuj ustawienia odstępów, aby tekst lepiej pasował do modułu.

• Wyściółka górna i dolna:
  • Komputer stacjonarny: 2vw
  • Tablet: 6vw
  • Telefon: 9vw
• Lewa wyściółka: 3vw

Zduplikuj pierwszą kolumnę dwa razy

Po wypełnieniu pierwszej kolumny otwórz ustawienia wiersza i usuń drugą i trzecią kolumnę. Następnie dwukrotnie zduplikuj pierwszą kolumnę. Oczywiście będziemy musieli wprowadzić pewne zmiany w modułach w kolumnach 2 i 3.

Kolumna 2 / Tło modułu tekstowego 1

• Kolor gradientu tła jeden: #c870ff
• Drugi kolor gradientu tła: #ff355a

Kolumna 2 / Moduł tekstowy 2 Box Shadow

• Cień pudełka: szósta opcja
• Siła rozmycia cieni w pudełku: 20px
• Siła rozprzestrzeniania się cieni w pudełku: 17px
• Kolor cienia pudełka: rgba (225,33,255,0,06)

Kolumna 2 / Moduł tekstowy 3 Tło

Dostosuj gradient tła trzeciego modułu tekstowego, aby pasował do pierwszego modułu.

• Kolor gradientu tła jeden: #c870ff
• Drugi kolor gradientu tła: #ff355a

Kolumna 3 / Tło modułu tekstowego 1

Do trzeciej kolumny! Zmień odpowiednio tło gradientowe modułu tekstowego 1:

• Kolor gradientu tła jeden: #ff4800
• Drugi kolor gradientu tła: #fc9a2a

Kolumna 2 / Moduł tekstowy 3 Tło

• Kolor gradientu tła jeden: #ff4800
• Drugi kolor gradientu tła: #fc9a2a

Zapowiedź

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

Pulpit

mobilny

To okład

W tym poście pokazaliśmy, jak stworzyć trzykolumnowy projekt z oszałamiającym efektem mieszania przy użyciu ustawień kolumn Divi. Połączyliśmy ustawienia modułów, kolumn i wierszy, aby uzyskać piękny efekt, który możesz wykorzystać na dowolnej tworzonej stronie internetowej. Mamy nadzieję, że ten samouczek zainspiruje Cię również do stworzenia własnych alternatywnych projektów. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!