Pobierz 6 DARMOWYCH powtarzających się wzorów tła dla Divi

Opublikowany: 2018-09-06

Poświęcenie swojej witrynie dodatkowej uwagi na szczegóły może wpłynąć na ogólny styl projektowania stron internetowych bardziej niż myślisz. To zwykle drobne szczegóły pomagają odróżnić szablon witryny od niestandardowej.

Istnieje kilka sposobów na osiągnięcie wzniosłych projektów. Jedną z rzeczy, które możesz zrobić, jest użycie subtelnych wzorów powtarzania tła dla dowolnego elementu projektu na stronie. Pomaga to nie tylko zmniejszyć rozmiary obrazu tła, ale także pomaga wypełnić puste tła bez ich przytłaczania.

W tym poście będziesz mógł pobrać 6 podstawowych, ale wszechstronnych wzorów tła, których możesz użyć podczas tworzenia dowolnej strony internetowej za pomocą Divi. Te wzory świetnie nadają się do trzymania z tyłu kieszeni, gdy chcesz urozmaicić swój projekt strony internetowej.

Zapowiedź

Rzućmy okiem na rodzaj wyniku, jaki możesz osiągnąć na swojej stronie, korzystając z tych wzorów tła:

wzór powtarzania tła

Pobierz wzory tła ZA DARMO

Aby położyć ręce na darmowych wzorach tła, 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 i piątek! 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

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.

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!

Zbliżać się

  • Po pobraniu folderu i rozpakowaniu go znajdziesz 5 różnych folderów
  • Każdy z tych folderów reprezentuje inny zestaw wymiarów: 1000×1000, 500×500, 100×100, 50×50 i 25×25
  • Chociaż technicznie są to te same wzorce, efekt końcowy na Twojej stronie będzie wyglądał inaczej w zależności od zestawu wymiarów, który zdecydujesz się użyć
  • Łączymy te wzory z opcjami tła Divi, aby stworzyć efekt powtarzania tła
  • Dzięki temu nie tylko zachowasz spójny obraz tła, ale także zmniejszy się zapotrzebowanie na obrazy tła w wysokiej rozdzielczości

Jak to działa

Wybierz sekcję na swojej stronie

Możesz zastosować te wzory tła do dowolnego elementu projektu na swojej stronie. Zademonstrujemy to, dodając jako tło sekcji. Możesz jednak dodać te same wzory do innych elementów projektu, takich jak wiersze, kolumny i moduły. Im mniejszy element projektu, tym mniejszy będziesz musiał dopasować do wymiaru wzoru, w zależności od tego, jak chcesz, aby wyglądał i działał.

Wybierz preferowane wymiary

Wzór 1: 1000 × 1000

powtarzające się wzory w tle

Ustawienia tła

Aby osiągnąć wynik, który udostępniliśmy powyżej, zlokalizuj wzór nr 1 w folderze 1000×1000 w pobranym pliku. Następnie prześlij go do ustawień tła sekcji i użyj wraz z nim następujących ustawień:

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: środek
  • Powtórzenie obrazu tła: powtórz

wzór powtarzania tła

Z nakładką gradientową

Chcesz połączyć wzór za pomocą tła gradientowego? Ty też możesz to zrobić. W poniższym przykładzie użyliśmy jednego jednolitego koloru i jednego półprzezroczystego w połączeniu z umieszczeniem gradientu nad obrazem tła, aby stworzyć efekt mieszania.

  • Kolor 1: #E2E2E2
  • Kolor 2: rgba (255,255,255,0,37)
  • Typ gradientu: liniowy
  • Kierunek gradientu: 181 stopni
  • Pozycja startowa: 7%
  • Pozycja końcowa: 35%

wzór powtarzania tła

Wzór nr 1 : 500 × 500

powtarzające się wzory w tle

Ustawienia tła

Możesz także sprawić, by wzór pojawiał się tylko w poziomie lub w pionie, korzystając z wbudowanych opcji tła Divi. W powyższym przykładzie użyliśmy pliku obrazu wzorca nr 1 o wymiarach 500×500. Po przesłaniu połącz go z następującymi ustawieniami tła:

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: górny środek
  • Powtórzenie obrazu tła: Powtórz X (w poziomie)

wzór powtarzania tła

Wzór nr 2 : 500 × 500

powtarzające się wzory w tle

Ustawienia tła

Zrobiliśmy to samo, używając drugiego wzoru w twoim folderze 500×500.

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: górny środek
  • Powtórzenie obrazu tła: Powtórz X (w poziomie)

wzór powtarzania tła

Wzór #3 : 100×100

powtarzające się wzory w tle

Ustawienia tła

W następnym przykładzie zlokalizuj wzór nr 3 w folderze wymiarów 100×100 i połącz go z następującymi opcjami tła, które sprawią, że wzór zajmie całą sekcję:

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: środek
  • Powtórzenie obrazu tła: powtórz

wzór powtarzania tła

Wzór #4 : 50×50

powtarzające się wzory w tle

Ustawienia tła

Im mniejsze wymiary, tym wyższa częstotliwość wzoru. Zlokalizuj tło nr 4 w folderze wymiarów 50×50 i połącz je z następującymi ustawieniami tła:

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: górny środek
  • Powtórzenie obrazu tła: powtórz

wzór powtarzania tła

Wzór #5 : 100×100

powtarzające się wzory w tle

Ustawienia tła

Piąty wzór daje oszałamiający i subtelny wygląd, gdy używasz zestawu wymiarów 100×100 z następującymi ustawieniami tła:

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: górny środek
  • Powtórzenie obrazu tła: powtórz

wzór powtarzania tła

Wzór #6 : 25×25

powtarzające się wzory w tle

Ustawienia tła

Na koniec znajdź wzór nr 6 w folderze wymiarów 25×25 i prześlij go do tła sekcji wraz z następującymi ustawieniami tła:

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: górny środek
  • Powtórzenie obrazu tła: powtórz

wzór powtarzania tła

Użyj również wzorców dla tła wierszy, kolumn i modułów

Przykłady, które omówiliśmy powyżej, to tylko kilka z dostępnych opcji. Jeśli poeksperymentujesz z różnymi zawartymi w nim wymiarami, uzyskasz inny wynik dla każdego wzoru. Ponadto możesz również użyć opcji tła Divi, aby uzyskać różne wyniki. Nie jesteś ograniczony do używania tych wzorów tła tylko dla sekcji. Możesz ich użyć dla każdego elementu projektu w Visual Builder Divi. Rozmiar twojego wzoru musi pasować do rozmiaru twojego elementu. Użyj wzorów tła wierszy, kolumn i modułów, aby stworzyć spersonalizowane i niepowtarzalne projekty.

powtarzające się wzory w tle

Zapowiedź

Teraz, gdy mamy do czynienia z kilkoma różnymi wynikami końcowymi, które można uzyskać za pomocą wzorów tła, przyjrzyjmy się końcowemu wynikowi:

wzór powtarzania tła

Końcowe przemyślenia

W projektowaniu stron internetowych ważne jest, aby zwracać uwagę na szczegóły. Jest na to wiele sposobów, ale w tym poście specjalnie zajęliśmy się używaniem wzorów tła, aby uzyskać subtelne tła dla elementów projektu za pomocą Divi. Udostępniliśmy Ci 6 różnych wzorów, które możesz pobrać i używać za darmo. Dla każdego z wzorów zapewniliśmy również inne wymiary, które po zastosowaniu na stronie prowadzą do różnych wyników. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!