Pobierz 10 DARMOWYCH obrazów tła sekcji płynnej dla Divi

Jeśli chcesz odświeżyć wygląd swoich sekcji, może to być idealny post dla Ciebie. Stworzyliśmy 10 różnych obrazów tła z płynnymi sekcjami, które można pobrać bezpłatnie i używać na dowolnej tworzonej stronie internetowej. Ponadto pokażemy również, jak połączyć te obrazy tła z płynnymi sekcjami z wbudowanymi opcjami Divi. Będziesz mógł przypisać dowolne tło gradientowe do płynnego obrazu tła i połączyć je z tłem gradientowym wierszy, aby upewnić się, że zawartość również pozostanie czytelna.

Weźmy się za to!

Zapowiedź

Zacznijmy od przyjrzenia się 10 różnym obrazom tła sekcji płynnych, które będzie można pobrać w dalszej części postu. Połączyliśmy obrazy z gradientowym tłem, aby uzyskać wyjątkowe rezultaty. W tym poście podzielimy się każdą z kombinacji gradientów, ale zachęcamy do eksperymentowania z różnymi kolorami, aby osiągnąć pożądany efekt końcowy.

Pobierz obrazy tła sekcji płynnej ZA DARMO

Aby położyć ręce na darmowych obrazach tła sekcji płynów, najpierw musisz je 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!

Odtwórz sekcję

Dodaj nową zwykłą sekcję

Rozstaw

Po pobraniu wszystkich plików graficznych przejdź do witryny WordPress i otwórz nową lub istniejącą stronę. Następnie, korzystając z programu Divi's Visual Builder, dodaj nową zwykłą sekcję. Otwórz jego ustawienia i zmień wartości odstępów.

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

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i wprowadź zmiany w ustawieniach rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Dodaj również kilka wartości dopełnienia do ustawień odstępów.

• Górna wyściółka: 312px
• Dolna wyściółka: 312px
• Dopełnienie lewej kolumny: 50px
• Dopełnienie prawej kolumny: 50px

Dodaj moduł tekstowy

Dodaj zawartość

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł tekstowy. Śmiało i dodaj trochę treści do pola treści, najlepiej tytuł H2 i akapit.

Ustawienia tekstu H2

Przejdź do ustawień tekstu H2 i zastosuj następujące zmiany:

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: Ultra Bold
• Kolor tekstu nagłówka 2: #FFFFFF
• Rozmiar tekstu nagłówka 2: 82px (komputer), 60px (tablet), 40px (telefon)
• Nagłówek 2 Wysokość linii: 1.4em

Ustawienia tekstu

Zmień również ogólne ustawienia tekstu.

• Kolor tekstu: #FFFFFF
• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 1,9 em
• Orientacja tekstu: Środek

Rozmiary

Kontynuuj, zmniejszając szerokość tego modułu na pulpicie.

• Szerokość: 58% (komputer stacjonarny), 100% (tablet i telefon)
• Wyrównanie modułu: Środek

Dodaj moduł przycisku

Dodaj kopię

Drugim i ostatnim modułem, którego potrzebujemy, jest moduł przycisku. Po dodaniu modułu poniżej modułu tekstowego dodaj kopię.

Wyrównanie przycisków

Następnie zmień Wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Następnie przejdź do ustawień przycisku i wprowadź zmiany.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 18px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #FFFFFF
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: -1px
• Czcionka przycisku: Montserrat
• Grubość czcionki: Ultra Bold
• Styl czcionki: wielkie litery

Rozstaw

Na koniec dodaj trochę przestrzeni między poprzednim modułem a tym, dodając górny margines.

• Górny margines: 25px

Tło sekcji płynnej #1

Tło gradientowe sekcji

Użyj następującego tła gradientowego dla swojej sekcji:

• Kolor 1: #000000
• Kolor 2: #2d5b9b
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-1.png ”, który możesz znaleźć w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek

Wiersz Gradientowe Tło

Aby to uzupełnić, dodaj gradient wiersza na górze tła sekcji. Dzięki temu tekst będzie bardziej czytelny. Pomoże Ci to również dodać trochę głębi do Twojej strony.

• Kolor 1: rgba(0,0,0,0,67)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Sekcja płynów — tło #2 i #3

Tło gradientowe sekcji

Drugi i trzeci obraz tła sekcji płynnej wykorzystuje następujące tło gradientowe sekcji:

• Kolor 1: #4f009e
• Kolor 2: #fa00ff
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-2.png ” lub „ fluid-style-3.png ”, który można znaleźć w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek

Wiersz Gradientowe Tło

Dodaj również subtelne tło gradientu wierszy:

• Kolor 1: rgba (255,48,75,0.13)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Tło sekcji płynnej #4

Tło gradientowe sekcji

Użyj następującego tła gradientowego dla swojej sekcji:

• Kolor 1: #00245e
• Kolor 2: #ffee00
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-4.png ”, który możesz znaleźć w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek

Wiersz Gradientowe Tło

Aby zakończyć, dodaj tło gradientowe wiersza, korzystając z następujących ustawień:

• Kolor 1: rgba(0,0,0,0.37)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Tło sekcji płynnej #5

Tło gradientowe sekcji

Dodaj następujące tło gradientowe do swojej sekcji:

• Kolor 1: #04000f
• Kolor 2: #00436d
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Następnie prześlij plik „ fluid-style-5.png ”, który znajdziesz w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek

Wiersz Gradientowe Tło

Uzupełnij swój projekt, używając następującego tła gradientowego wiersza:

• Kolor 1: rgba(0,0,0,0.58)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Tło sekcji płynnej #6

Tło gradientowe sekcji

Użyj następującej oszałamiającej kombinacji gradientowego tła przekroju:

• Kolor 1: #4800ff
• Kolor 2: #c854ff
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-6.png ”, który możesz znaleźć w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek

Wiersz Gradientowe Tło

Na koniec dodaj nakładkę tła z gradientem wiersza.

• Kolor 1: rgba(0,0,0,0.51)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Tło sekcji płynnej #7

Tło gradientowe sekcji

Zastosuj do sekcji następujące ustawienia gradientu tła:

• Kolor 1: #ff8300
• Kolor 2: #52006b
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-7.png ”, który możesz znaleźć w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: u góry po prawej

Wiersz Gradientowe Tło

Na koniec dodaj tło gradientowe wiersza na górze swojej sekcji.

• Kolor 1: rgba (106,0,198,0,34)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Tło sekcji płynnej #8

Tło gradientowe sekcji

Zastosuj do sekcji następujące niebieskie tło gradientowe:

• Kolor 1: #0b43dd
• Kolor 2: #09f9ed
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-8.png ”, który możesz znaleźć w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: górny lewy

Wiersz Gradientowe Tło

Uzupełnij swój projekt, stosując tło gradientowe wierszy.

• Kolor 1: rgba(0,7,119,0,57)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: liniowy
• Kierunek promieniowy: Środek

Tło sekcji płynnej #9

Tło gradientowe sekcji

Dodaj następujące tło gradientowe do swojej sekcji:

• Kolor 1: #051f89
• Kolor 2: #6d0272
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-9.png ”, który możesz znaleźć w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek

Wiersz Gradientowe Tło

Na koniec zwiększ czytelność treści, używając tła z gradientem wierszy.

• Kolor 1: rgba(0,0,0,0.59)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Tło sekcji płynnej #10

Tło gradientowe sekcji

Ostatni przykład wymaga następującego tła gradientowego sekcji:

• Kolor 1: #051f89
• Kolor 2: #6d0272
• Typ gradientu: liniowy
• Kierunek gradientu: 137 stopni
• Pozycja startowa: 48%

Obraz tła sekcji

Prześlij plik „ fluid-style-10a.png ”, który znajdziesz w folderze pobierania i połącz go z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: górny lewy

Wiersz Gradientowe Tło

Dodaj następnie tło gradientowe wiersza.

• Kolor 1: rgba(0,0,0,0.59)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek

Obraz tła wiersza

Dodaj również obraz tła do swojego wiersza. Znajdź plik „ fluid-style-10b.png ” w folderze pobierania, prześlij go i połącz z następującymi ustawieniami tła:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: dolny prawy

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi.

Końcowe przemyślenia

W tym poście udostępniliśmy 10 różnych i unikalnych obrazów tła sekcji płynnych, których możesz używać na swoich stronach bez żadnych ograniczeń. Co więcej, udostępniliśmy Ci również oszałamiające tła gradientowe, które możesz łączyć z płynnymi obrazami tła, korzystając tylko z wbudowanych opcji Divi. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej i daj nam znać, który z płynnych obrazów tła sekcji najbardziej Ci się podoba!