Jeśli chodzi o maski tła, użytkownicy zwykle używają oprogramowania do edycji obrazów oprócz Divi, a następnie prześlij obraz do Witryna internetowa które tworzą. Chociaż jest to bardzo przydatny sposób na dostosowanie Witryna internetowa, niekoniecznie jest to jedyne rozwiązanie. Możesz także tworzyć maski tła w Divi, łącząc w kreatywny sposób różne elementy projektu i opcje filtrów. Właśnie to zamierzamy zrobić w tym poście! Zamieniamy duże postacie w maski tła, które świetnie wyglądają na każdym ekranie. Mamy nadzieję, że ten samouczek zainspiruje Cię do tworzenia własnych projektów przy użyciu dużych znaków i wbudowanych opcji Divi.
Chodźmy!
Przykładowy podgląd
Zanim przejdziemy do samouczka, oto rodzaje tła, które można uzyskać za pomocą tej techniki.
Koncepcja
Rozpoczniemy projekt od utworzenia czarnego tła z literą, która ma obraz jako tło.
Dodaj nową sekcję
Kolor tła
Zacznijmy od pierwszego przykładu! Dodaj nową zwykłą sekcję do nowej lub istniejącej strony i dodaj tło do tej sekcji:
- Kolor tła: #000000
rozstaw
Następnie przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne wypełnienie.
- Top Padding: 0px
- Dolne wypełnienie: 0px
przelewowy
Przejdź do zakładki Zaawansowane i ukryj przepełnienia sekcji. Stanie się to ważne w dalszej części tego samouczka, kiedy zmienimy położenie modułu tekstowego zawierającego znak ponadwymiarowy.
- Przelew poziomy: ukryty
- Przelew pionowy: ukryty
Dodaj wiersz 1
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
Kolor tła kolumny 1
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj kolor tła do pierwszej kolumny.
- Kolumna 1 Kolor tła: #848484
Kolumna 1 Obraz tła
Dodaj także kolor tła. Aby połączyć kolor tła i obraz, zastosujemy tryb mieszania.
- Mieszanie obrazu tła kolumny: Pomnóż
zaklejania
Przejdź do karty Projekt i pozwól, aby wiersz wypełnił całą szerokość ekranu, stosując następujące ustawienia rozmiaru:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Pozbywamy się również wszystkich niestandardowych wypełnień w górę i w dół w rzędzie.
- Top Padding: 0px
- Dolne wypełnienie: 0px
Dodaj moduł tekstowy do kolumny
Dodaj znak do obszaru zawartości
Czas dodać moduł tekstowy zawierający zbyt duży znak. Wpisz literę „o” w ramce treść.
Kolor tła
Kontynuuj, przechodząc do ustawień tła i dodaj czarny kolor tła.
- Kolor tła: #000000
Ustawienia tekstu
Przejdź do zakładki Projekt i zmień ustawienia tekstu. Zwróć uwagę, jak używamy wysokiej wartości rozmiaru tekstu.
- Czcionka tekstu: Poppins
- Rozmiar tekstu: 100vw
- Orientacja tekstu: Centrum
rozstaw
Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości marginesów i wypełnień.
- Górny margines: -6vw
- Najlepsze wypełnienie: 15vw
- Wyściółka u dołu: 49vw
Filtry
Czas na magię! Uzyskaj dostęp do ustawień filtra modułu i odpowiednio zmień tryb scalania:
- Tryb mieszania: pomnóż
- Jasność: możesz zmienić tę wartość według własnych upodobań
Dodaj linię 2
Struktura kolumny
Po dodaniu do projektu swojej przewymiarowanej postaci możesz kontynuować, dodając pozostałe moduły, które chcesz wyświetlić w sekcji, najlepiej dodając nową linię:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól mu zajmować całą szerokość ekranu.
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Usuń także wszystkie domyślne wypełnienia w górę i w dół
- Top Padding: 0px
- Dolne wypełnienie: 0px
Dodaj moduł tekstowy # 1 do kolumny
Dodaj zawartość H1
W tej nowej linii możesz dodać wybrane moduły. Aby odtworzyć dokładny przykład udostępniony w podglądzie tego wpisu, zacznij od dodania modułu tekstowego zawierającego treść H1.
Ustawienia tekstu H1
Przejdź do zakładki Projekt i zmień ustawienia tekstu H1.
- Czcionka tytułu: Wyświetlacz Playfair
- Waga czcionki: Bold
- Tytuł Wyrównanie tekstu: Środek
- Kolor tekstu tytułu: #ffffff
- Tytuł tekstu Rozmiar: 6vw
rozstaw
Kontynuuj, przechodząc do ustawień odstępów i pozwól, aby moduł tekstowy nakładał się na ponadwymiarowy znak, dodając ujemny górny margines. Zapewniamy również, że jest miejsce po lewej i prawej stronie modułu, aby zapewnić responsywność.
- Górny margines: -47vw
- Lewy margines: 1vw
- Prawy margines: 1vw
Dodaj moduł podziału do kolumny
widoczność
Następny potrzebny nam moduł to moduł podziału. Upewnij się, że opcja „Pokaż separator” jest włączona.
- Pokaż dzielnik: Tak
Kolor
Przejdź do zakładki projekt i zmień kolor separatora.
- Kolor: #ffffff
zaklejania
Zmień także parametry rozmiaru.
- Waga dzielnika: 13px
- Szerokość: 16%
- Wyrównanie modułu: centrum
rozstaw
Dodaj także górny margines, aby utworzyć odstęp między modułem tekstowym a modułem podziału.
- Górny margines: 16vw
Dodaj moduł tekstowy # 2 do kolumny
Dodaj treść
Następnym modułem, którego potrzebujemy, jest moduł tekstowy z rozszerzeniem treść ust.
Ustawienia tekstu
Uzyskaj dostęp do ustawień tekstu i wprowadź następujące zmiany:
- Czcionka tekstu: Open Sans
- Kolor tekstu: #ffffff
- Rozmiar tekstu: 1vw (komputer stacjonarny), 2vw (tablet), 2.5vw (telefon)
- Wysokość linii tekstu: 1.9em
- Orientacja tekstu: Centrum
rozstaw
Dodaj także niestandardowe wartości odstępów.
- Górny margines: 3vw
- Dolny margines: 3vw (komputer stacjonarny), 10vw (tablet i telefon)
- Lewy margines: 27vw (komputer stacjonarny), 10vw (tablet), 8vw (telefon)
- Prawy margines: 27vw (komputer stacjonarny), 10vw (tablet), 8vw (telefon)
Dodaj moduł przycisku do kolumny
Dodaj kopię
Na kolejnym i ostatnim module, czyli module przycisków. Wprowadź wybraną kopię.
wyrównanie
Kontynuuj, zmieniając wyrównanie przycisku na karcie Projekt.
- Wyrównanie przycisków: środek
Ustawienia przycisków
Przejdź do ustawień przycisków i dostosuj przycisk zgodnie z potrzebami.
- Użyj niestandardowych stylów przycisku: Tak
- Rozmiar tekstu przycisku: 1vw (komputer stacjonarny), 2.5vw (tablet), 3vw (telefon)
- Kolor tekstu przycisku: #ffffff
- Szerokość obramowania przycisku: 1px
- Promień granicy przycisku: 0px
- Czcionka przycisku: Open Sans
- Masa czcionki: Ultra Bold
- Styl czcionki: wielkie litery
rozstaw
Na koniec dodajemy również niestandardowe wartości marginesów i wypełnienia, aby uzyskać pożądany wynik.
- Dolny margines: 10vw
- Wypełnienie: 15px
- Dolne wypełnienie: 15px
- Lewe dopełnienie: 50px
- Tapicerka z prawej: 50px
Ostateczny wynik
Tak wygląda to, co do tej pory zbudowaliśmy.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak używać dużych postaci do tworzenia niesamowitych masek w tle za pomocą Divi. To świetny sposób na tworzenie niestandardowych projektów internetowych bez konieczności korzystania z oprogramowania do edycji obrazów. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej!
