Obrazy obramowań i tła w dalszym ciągu są popularnymi elementami projektów przy tworzeniu stron internetowych. Użycie odpowiednich obrazów tła może dodać charakteru i stylu Twojej witrynie bez konieczności marnowania czasu i pieniędzy na niestandardową grafikę. A obramowania są przydatne do dodawania struktury do Twojego treść.
Dzisiaj zamierzamy połączyć te dwa elementy, projektując obrazy tła jako obramowania. Divi zawiera zestaw przydatnych 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.
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, potrzebujesz:
- Le Motyw Divi zainstalowany i aktywny
- Nowa strona stworzona do tworzenia od zera w interfejsie użytkownika (konstruktor wizualny)
- Obrazy do wykorzystania treść fikcyjny
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Ogólne wskazówki dotyczące tworzenia wzorów obramowań obrazów tła
Zanim zaczniesz budować, oto kilka ogólnych wskazówek, o których należy pamiętać przy tworzeniu wzorów obramowania obrazu tła.
# 1 Wybierz zdjęcia z dużą ilością tekstur
W większości przypadków będziesz chciał, aby twoje granice były 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. Możesz na przykład użyć zdjęcia krajobrazu, bukietu kwiatów lub wysokiej wieży. Oto kilka obrazów, których używam w tym samouczku.
# 2 użyj gradientów i przezroczystości z granicami obrazu tła
Obrazy tła mogą czasami same w sobie stanowić świetną ramkę treść. Jednak w większości przypadków będziesz chciał dodać nakładki do obrazu tła, aby uzyskać kolor lub przyciemnić lub rozjaśnić tło. Gradienty tła to świetny sposób na nakładanie warstw na obrazy tła i tworzenie unikalnych projektów obramowań.
# 3 Użyj trybów scalania
Korzystanie z trybów mieszania na obrazach tła pozwala zastosować niepowtarzalne kolory i tekstury do wzorów obramowań. Wszystko, co musisz zrobić, to dodać kolor tła lub gradient do obrazu tła, a następnie wybrać tryb mieszania dla obrazu tła. Kolor, Jasność, Mnożenie i Ekran to świetne tryby mieszania dla obramowań obrazu tła.
Użyj opcji zaokrąglonego rogu, aby uzyskać unikalne kształty
Nie wszystkie obramowania muszą mieć proste krawędzie. Pomieszaj trochę! Opcje zaokrąglonych narożników Divi pozwalają kreatywnie kształtować te narożniki.
Użyj obrazów tła paralaksy jako obramowań
Wspaniałą rzeczą w paralaksie jest to, że ożywia projekt za pomocą ruchu. Ponadto, jeśli używasz obrazów tła z paralaksą do projektów obramowań, możesz stworzyć subtelny ruch, który wyróżnia się i wyróżnia zawartość.
Projekt obramowania obrazu tła w Divi
Teraz, gdy rozumiemy ogólną ideę leżącą u podstaw tworzenia wzorów obramowania obrazu tła, wyobraźmy sobie kilka razem. Zbudujemy różne modele 2. Każdy będzie miał podstawowy moduł prezentacji służący jako fikcyjna treść. I użyjemy parametrów kolumny, aby dodać obramowanie obrazu tła modułu.
Zacznijmy od naszego pierwszego projektu.
#1 obramowanie obrazu tła
Ten pierwszy projekt zawiera wąskie obramowanie obrazu tła z cieniem obszaru, aby wyglądał bardziej jak ramka dla treści.
Oto jak go zaprojektować.
Najpierw dodaj rząd dwóch kolumn do zwykłej sekcji.
Dodaj moduł podsumowania
Następnie dodaj moduł blurb w lewej kolumnie.
Po umieszczeniu notki otwórz ustawienia notatek i wyodrębnij domyślny obraz, tak aby widoczny był tylko tytuł i treść.
Następnie nadaj tekstowi białe tło.
Następnie zaktualizuj parametry projektu prezentacji w następujący sposób:
- Tytuł tekstu: Oswald
- Body Police: Lato
- Margines 5% u góry, 5% u dołu, 5% po lewej stronie, 5% po prawej stronie
- Tapicerka: 7% u góry, 7% u dołu, 10% po lewej stronie, 10% po prawej stronie
- Zaokrąglone rogi: 20px w prawym górnym rogu, 20px w lewym dolnym rogu
- Box Shadow: patrz zrzut ekranu
Dodaj obraz tła do kolumny
Dba o nasz moduł prezentacji. Teraz dodajmy obramowanie obrazu tła. Aby to zrobić, dodamy obraz tła do kolumny zawierającej moduł Blurb. Otwórz ustawienia wiersza, a następnie ustawienia kolumny 1 i dodaj następujące tło:
- Obraz tła: [prześlij wybrany przez siebie obraz]
- Kolor tła: #303a7a
- Obraz tła mieszanki: Jasność
Następnie zaktualizuj zaokrąglone rogi i cień pola w następujący sposób:
- Zaokrąglone rogi: 20px w prawym górnym rogu, 20px w lewym dolnym rogu
- Box Shadow: patrz zrzut ekranu
Ostateczny wynik
Teraz sprawdź ostateczny projekt.
Obramowanie obrazu tła # 2
Ten następny projekt podkreśla fakt, że użycie wysoce teksturowanych obrazów może tworzyć piękne obramowania, szczególnie w połączeniu z trybami mieszania obrazu.
Oto jak go zaprojektować.
Dodaj moduł Blurb
Aby stworzyć projekt, dodamy tekst notki do kolumny 2 tego samego wiersza, który zawiera projekt nr 1. Śmiało, skopiuj moduł układu projektu nr 1 i wklej go do kolumny 2. Następnie, zaktualizuj ustawienia modułu prezentacji w następujący sposób:
- Zaokrąglone rogi: przywróć ustawienia domyślne
- Margines: 10% u góry, 10% u dołu, 10% po lewej stronie, 10% po prawej stronie
- Tapicerka: 15% u góry, 15% u dołu, 10% po lewej stronie, 10% po prawej stronie
- Szerokość obramowania: 1px
- Kolor obramowania: #ffffff
Dodaj obraz tła do kolumny
Po zainstalowaniu naszego modułu otwórz ustawienia linii i dodaj gradient tła do kolumny 2.
- Gradient w lewym tle: #f7e0a5
- Gradient prawego tła Kolor: rgba (237,240,0,0.79)
- Gradient Direction: 90deg
- Pozycja początkowa: 50%
- Końcowa pozycja: 0%
Następnie dodaj obraz tła z ładnym efektem gradientu.
- Obraz tła: [pobierz obraz]
- Mix obrazów tła: kolor
Jak widać, tryb mieszania kolorów zachowuje jasność dwóch gradientów kolorów znajdujących się za obrazem, tworząc ładny wzór obramowania obrazu z delikatnymi kolorami.
Ostateczny wynik
Odkryj końcowy wynik projektu.
Najnowsze myśli
Tworzenie ramek ze zdjęciami to łatwy sposób na dodanie piękna i osobowości do projektu. Projekt wyróżniony w tym samouczku ma na celu podkreślenie możliwości dostępnych w Divi w projektowaniu unikalnych granic. Dlatego przy różnych kombinacjach kolorów projekty są nieograniczone. Więc zdobądź kilka obrazów i poznaj więcej projektowania obramowań z obrazami w Divi.
Do twojego zdrowia
