Jak tworzyć projekty obramowania obrazu tła w Divi
Opublikowany: 2019-08-18Ramki i obrazy tła nadal są popularnymi zasobami projektowymi podczas tworzenia witryn internetowych. Korzystanie z odpowiednich obrazów tła może nadać Twojej witrynie osobowość i styl bez konieczności poświęcania czasu i pieniędzy na niestandardową grafikę. A obramowania są pomocne w dodawaniu struktury do treści.
Dzisiaj zamierzamy połączyć te dwa atuty, projektując obrazy tła jako obramowania. Divi ma przydatny zestaw opcji dostosowywania obrazów tła, co ułatwia projektowanie obrazów tła dla unikalnych projektów obramowań. Pozwala nam to łączyć kolory, gradienty, cienie pudełkowe i tryby mieszania na wiele kreatywnych sposobów.
Zacznijmy.
zapowiedź
Oto projekty obramowań obrazu tła, które wspólnie zbudujemy.
Pobierz układ za DARMO
Aby położyć swoje ręce na projektach z tego samouczka, 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 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!
Subskrybuj nasz kanał YouTube
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Obrazy, które mają być wykorzystane do pozorowanych treści
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Ogólne wskazówki dotyczące tworzenia wzorów obramowania obrazu tła
Zanim zaczniemy budować, oto kilka ogólnych wskazówek, o których należy pamiętać podczas tworzenia projektów obramowań obrazu tła.
#1 Wybierz obrazy z dużą ilością tekstury
Przez większość czasu będziesz chciał, aby twoje granice były bardziej węższe. Oznacza to, że nie będziesz w stanie zobaczyć dużej części obrazu. Dlatego warto używać obrazów, które mają dużo tekstury. Na przykład możesz użyć zdjęcia krajobrazu, bukietu kwiatów lub miejskiego wieżowca. Oto kilka obrazów, których używam w tym samouczku.
#2 Użyj gradientów i przezroczystości z obramowaniem obrazu tła
Obrazy tła mogą czasami stanowić samodzielną ramkę dla treści. Ale przez większość czasu będziesz chciał dodać nakładki do obrazu tła, aby uzyskać jakiś kolor lub aby tło było ciemniejsze lub jaśniejsze. Gradienty tła to świetny sposób na dodawanie nakładek do obrazów tła i tworzenie niepowtarzalnych projektów obramowań.
#3 Użyj trybów mieszania
Korzystanie z trybów mieszania na obrazach tła może zaimplementować unikalne kolory i tekstury do projektów obramowań. Wszystko, co musisz zrobić, to dodać kolor lub gradient tła wraz z obrazem tła, a następnie wybrać tryb mieszania dla obrazu tła. Niektóre świetne tryby mieszania dla obramowań obrazu tła to kolor, jasność, mnożenie i ekran.
Użyj opcji zaokrąglonych narożników, aby uzyskać unikalne kształty
Nie wszystkie obramowania muszą mieć proste krawędzie. Pomieszaj trochę! Opcje zaokrąglonych narożników Divi pozwalają na kreatywne kształtowanie tych narożników.
Użyj obrazów tła paralaksy jako obramowań
Wspaniałą rzeczą w paralaksie jest to, że ożywia projekt ruchem. Dodatkowo, jeśli użyjesz obrazów tła z paralaksą w projektach obramowań, możesz stworzyć subtelny ruch, który się wyróżnia i sprawia, że treść się wyróżnia.
Projektowanie obramowań obrazu tła w Divi
Teraz, gdy rozumiemy ogólną ideę tworzenia projektów obramowań obrazu tła, zaprojektujmy kilka razem. Zbudujemy 4 różne projekty. Każda z nich będzie miała podstawowy moduł notki, który będzie służył jako próbna treść. I użyjemy ustawień kolumny, aby dodać obramowanie obrazu tła dla modułu.
Zacznijmy od naszego pierwszego projektu.
Projekt obramowania obrazu tła # 1
Ten pierwszy projekt ma wąską ramkę obrazu tła, która ma cień pudełka, aby wyglądał bardziej jak ramka dla treści.
Oto jak to zaprojektować.
Najpierw dodaj wiersz z dwiema kolumnami do zwykłej sekcji.
Dodaj moduł Blurb
Następnie dodaj moduł notki do lewej kolumny.
Gdy notatka jest na miejscu, otwórz ustawienia notatek i usuń domyślny obraz, aby widoczna była tylko zawartość tytułu i treści.
Następnie nadaj swojemu notatce biały kolor tła.
Następnie zaktualizuj ustawienia projektu notki w następujący sposób:
- Czcionka tytułu: Oswald
- Czcionka ciała: Lato
- Margines 5% góra, 5% dół, 5% lewy, 5% prawy
- Wypełnienie: 7% u góry, 7% u dołu, 10% w lewo, 10% w prawo
- Zaokrąglone rogi: 20px w prawym górnym rogu, 20px w lewym dolnym rogu
- Cień pudełka: patrz zrzut ekranu
Dodaj obraz tła do kolumny
To zajmuje się naszym modułem notek. Teraz dodajmy nasze obramowanie obrazu tła. Aby to zrobić, dodamy obraz tła do kolumny zawierającej moduł blurb. Otwórz ustawienia wiersza, a następnie otwórz ustawienia dla kolumny 1 i dodaj następujące tło:
- Obraz tła: [prześlij wybrany obraz]
- Kolor tła: #303a7a
- Mieszanie obrazu tła: Jasność
Następnie zaktualizuj zaokrąglone rogi i cień w następujący sposób:
- Zaokrąglone rogi: 20px w prawym górnym rogu, 20px w lewym dolnym rogu
- Cień pudełka: patrz zrzut ekranu
Ostateczny wynik
Teraz sprawdź ostateczny projekt.
Projekt obramowania obrazu tła #2
Ten następny projekt pokazuje, jak użycie obrazów z dużą ilością tekstur może naprawdę stworzyć piękne obramowania, zwłaszcza gdy połączysz je z trybami mieszania obrazów.
Oto jak to zaprojektować.
Dodaj moduł Blurb
Aby stworzyć projekt, dodamy notkę do kolumny 2 tego samego wiersza, który zawiera projekt #1. Śmiało skopiuj moduł notki z projektu nr 1 i wklej go do kolumny 2. Następnie zaktualizuj ustawienia modułu noty w następujący sposób:
- Zaokrąglone rogi: przywróć domyślne
- Margines: 10% góra, 10% dół, 10% lewy, 10% prawy
- Wypełnienie: 15% góra, 15% dół, 10% lewo, 10% prawo
- Szerokość obramowania: 1px
- Kolor obramowania: #ffffff
Dodaj obraz tła do kolumny
Po zainstalowaniu naszego modułu otwórz ustawienia wiersza i dodaj gradient tła do kolumny 2.
- Kolor lewego gradientu tła: #f7e0a5
- Prawy gradient tła: rgba (237,240,0,0,79)
- Kierunek gradientu: 90 stopni
- Pozycja startowa: 50%
- Pozycja końcowa: 0%
Następnie dodaj obraz tła z ładnym efektem mieszania kolorów.
- Obraz tła: [prześlij obraz]
- Mieszanie obrazu tła: kolor
Jak widać, tryb mieszania kolorów zachowuje jasność dwóch kolorów gradientu za obrazem, tworząc ładne obramowanie obrazu z delikatnymi kolorami.
Ostateczny wynik
Sprawdź efekt końcowy projektu.
Projekt obramowania obrazu tła #3
Ten kolejny projekt podkreśla użycie obrazów paralaksy w projekcie obramowania. Użyjemy również sztuczki z cieniami do tworzenia kolorów, aby stworzyć kolorową nakładkę dla obrazu paralaksy.
Oto jak to zaprojektować.
Na początek dodaj nowy wiersz z dwiema kolumnami poniżej pierwszego wiersza i skopiuj moduł noty z noty w kolumnie 1 w górnym wierszu i wklej go w kolumnie 1 nowego wiersza.
Następnie zaktualizuj moduł notki w następujący sposób.
- Kolor tła: #333344
- Kolor tekstu: jasny
- Margines: 10% góra, 10% dół, 10% lewy, 10% prawy
- Wyściółka: 10% na górze, 10% na dole
- Zaokrąglone rogi: 20px
- Cień pudełka: brak
Gdy notatka jest na miejscu, otwórz ustawienia wiersza i zaktualizuj ustawienia dla kolumny 1 w następujący sposób:
- Obraz tła: [prześlij obraz]
- Użyj efektu paralaksy: TAK
- Metoda paralaksy: prawdziwa paralaksa
- Zaokrąglone rogi: 20px
- Cień pudełka: patrz zrzut ekranu
W tej chwili obramowanie obrazu tła z paralaksą jest domyślnie nieco przytłaczające i może odwracać uwagę od treści.
Aby obraz tła z paralaksą był jaśniejszy, możemy dodać do blurbu cień pudełkowy, który posłuży jako nakładka świetlna.
Otwórz ponownie ustawienia notki i dodaj następujące elementy:
- Cień pudełka: patrz zrzut ekranu
- Siła rozmycia cieni w pudełku: 0px
- Siła rozprzestrzeniania się cieni w pudełku: 200px
- Kolor cienia: #ffffff
Ostateczny projekt
Sprawdźmy teraz ostateczny projekt.
Projekt obramowania obrazu tła #4
W tym następnym projekcie połączymy obraz tła z gradientami, aby służyły jako górna i dolna granica treści blurb.
Dodaj moduł Blurb
Aby rozpocząć, skopiuj moduł notki w kolumnie 2 górnego rzędu i wklej go w kolumnie 2 drugiego rzędu.
Po zakończeniu zaktualizuj ustawienia modułu notki w następujący sposób:
- Obramowanie: [Wyjmij obramowanie, przywracając domyślne ustawienia obramowania]
- Cień pudełka: brak
- Margines: 5% góra, 5% dół, 0% lewy, 0% prawy
Dodaj obramowanie obrazu tła
Aby dodać obramowanie obrazu tła dla tego projektu, otwórz ustawienia wiersza i zaktualizuj ustawienia kolumny 2 w następujący sposób:
- Obraz tła: [prześlij obraz]
- Kolor gradientu tła po lewej stronie: #141777
- Kolor gradientu tła w prawo: #ffb7eb
- Kierunek gradientu: 90 stopni
- Pozycja startowa: 50%
- Pozycja końcowa: 0%
- Obraz tła: [prześlij obraz]
- Mieszanie obrazu tła: jasność
Ostateczny projekt
Sprawdź ostateczny projekt.
Końcowe przemyślenia
Tworzenie obramowań obrazu tła za pomocą Divi to prosty sposób na dodanie piękna i osobowości do projektu. Projekty przedstawione w tym samouczku mają na celu zaprezentowanie kluczowych opcji dostępnych w Divi do tworzenia unikalnych projektów obramowań. Jednak przy wszystkich dostępnych kombinacjach kolorów i trybach mieszania jedynym ograniczeniem jest wyobraźnia. Więc chwyć kilka własnych obrazów i odkryj nowe, ekscytujące projekty obramowań do następnego projektu.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!