Scalanie wielu obrazów może być przydatne do tworzenia profesjonalnego tła dla Twojego Witryna internetowa. Pomysł polega na zrobieniu dwóch lub trzech oddzielnych obrazów i nałożeniu ich na siebie. Następnie użyj trybu mieszania, aby połączyć warstwy, aby stworzyć jednolity, jednolity projekt.
Każdy element w Divi Builder ma wbudowany tryb scalania i opcje filtrów, które ułatwiają łączenie elementów w kreatorze Divi. Oczywiście możesz mieszać obrazy w Photoshopie (lub innym edytorze zdjęć), ale dla tych, którzy szukają praktycznego rozwiązania Divi, ten samouczek powinien ci pomóc, ponieważ z Divi jest to całkiem łatwe. Gdy masz już obrazy we właściwym miejscu, możesz je pomieszać kilkoma kliknięciami. I oczywiście masz arsenał opcji Divi, które wprowadzają ostatnie poprawki i nadają projektowi nowy kreatywny wymiar.
Zacznijmy.
badanie
Oto przegląd projektu, który wspólnie zbudujemy.
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, musisz wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj Motyw Divi zainstalowany (lub wtyczka Divi Builder, jeśli nie używasz Motyw Divi).
- Utwórz nową stronę w WordPress i użyj Divi Builder do edycji strony w interfejsie (konstruktor wizualny).
- Prześlij kilka fikcyjnych obrazów do biblioteki multimediów, aby wykorzystać je w samouczku. Używam obrazów z Pakiet układu Eye Doctor .
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Jak mieszać wiele obrazów, aby stworzyć niestandardowy projekt tła w Divi
Zacznijmy od sekcji i linii
Aby załatwić sprawę, dodaj wiersz kolumny do zwykłej sekcji.
Dodawanie obrazów za pomocą modułu obrazu
Zdjęcie nr 1
Po zdefiniowaniu wiersza i kolumny dodaj moduł obrazu do wiersza.
Prześlij obraz o wymiarach około 500 na 700 pikseli. Używam jednego z pakietu Eye Doctor Layout Pack.
Po przesłaniu obrazu ustaw maksymalną szerokość obrazu za pomocą jednostki długości vw, aby dobrze pasowała do innych obrazów, które zamierzamy scalić, a następnie wyrównaj go w lewo w następujący sposób :
- Maksymalna szerokość: 33vw
- Wyrównanie modułu: lewo
Chcemy, aby następny obraz, który dodamy, był wyrównany do prawej strony tego obrazu. Musimy więc przesunąć ten obraz w lewo. Aby to zrobić, dodaj następujący CSS do głównego elementu:
pływaka: lewej;
Zdjęcie nr 2
Następnie dodaj nowy moduł obrazu pod bieżącym obrazem.
Następnie pobierz nowy obraz, którego wymiary są zbliżone do pikseli 1000 przez piksele 667.
Następnie nadaj obrazowi nową szerokość i nowe maksymalne wyrównanie.
- Maksymalna szerokość: 40vw
- Ustawienie modułu: w prawo
Ponieważ pierwszy obraz unosi się w lewo, drugi obraz musi teraz przylegać do prawej.
Wrócimy, aby dopracować te obrazy, ale na razie przejdźmy do sekcji ustawień.
Ustawienia sekcji
Otwórz ustawienia sekcji i dodaj obraz tła i gradient w następujący sposób:
- Gradient po lewej stronie Kolor: rgba (1,16,63,0.64)
- Gradient prawego tła Kolor: rgba (12,113,195,0.82)
- Umieść gradient nad obrazem tła: TAK
Następnie dostosuj nieco wypełnienie.
- Tapicerka (biuro): 0px u góry, 0px u dołu
- Wypełnienie (telefon): 0px u góry, 10vw u dołu
Ustawienia linii
Po zakończeniu sekcji otwórz ustawienia linii i zaktualizuj następujące elementy:
- Szerokość: 100%;
- Maksymalna szerokość: 100%;
- Tapicerka: 0px u góry, 0px u dołu
Dodaj tryb scalania do linii
Teraz linia powinna pokrywać całe dno sekcji. Pozwoli nam to dodać tryb scalania do linii, aby połączyć dwa obrazy z tłem sekcji. Aby to zrobić, dodaj następujący tryb mieszania.
- Tryb syntezy: mnożyć
Dlaczego pomnażać się?
Tryb mieszania mnożenia mnoży bieżącą warstwę / wiersz (łącznie ze wszystkimi znajdującymi się w nim obrazami) przez warstwę pod nią (tło sekcji). Łatwym sposobem myślenia o efekcie jest wyobrażenie sobie dwóch slajdów w rzutniku slajdów, ustawionych jeden za drugim. Jeśli wyświetlisz dwa obrazy na ekranie, uzyskasz nieco ciemniejszą mieszankę tych dwóch.
Wyśrodkuj obrazy pionowo
Nie musisz, ale jeśli chcesz mieć pewność, że oba obrazy w wierszu pozostają wyśrodkowane w pionie, możesz dodać do kolumny fragment kodu CSS. Aby to zrobić, otwórz ustawienia wiersza, a następnie kliknij ustawienia kolumn. Następnie dodaj następujący kod CSS do głównego elementu.
wyświetlacz: flex; elementy wyrównujące: środek;
Ostatni szlif dwóch najlepszych zdjęć
W tej chwili nasze dwa najlepsze obrazy dobrze się łączą, ale mogą wprowadzić kilka zmian w projekcie, aby wyglądały bardziej profesjonalnie. Możemy użyć białego cienia, aby zmiękczyć krawędzie obrazów i użyć polecenia Przekształć, aby umieścić je dokładnie tam, gdzie chcemy, aby pozostały.
Zdjęcie # Klucze końcowe 1
Otwórz ustawienia modułu obrazu po lewej stronie i zaktualizuj następujące elementy:
- Box Shadow: patrz zrzut ekranu
- Pole Shadow Blur Force: 6vw
- Grubość klosza: 6vw
- Kolor cienia: #ffffff
- Transformator Przetłumacz: 5vw (oś X), 11vw (oś Y)
Zdjęcie # Klucze końcowe 2
Gdy skończysz manipulować obrazem nr 1 po lewej, otwórz ustawienia dla obrazu nr 2 po prawej i wprowadź następujące zmiany:
- Box Shadow: patrz zrzut ekranu
- Pole Shadow Blur Force: 3vw
- Siła rozpraszania cieni w pudełku: 3vw
- Kolor cienia: #ffffff
Możemy nawet dodać kilka filtrów, aby obraz był ostrzejszy.
- Nasycenie: 30%
- Krycie: 60%
Dodaj treść tekstu
Teraz, gdy nasza sekcja jest już kompletna i zawiera trzy ładnie połączone obrazy, możemy dodać nasze treść u góry sekcji. Aby to zrobić, dodaj nową sekcję poniżej bieżącej sekcji.
Następnie dodaj wiersz kolumny do zwykłej sekcji.
Następnie dodaj moduł tekstowy do linii.
Treść
Zaktualizuj treść modułu tekstowego z treść następującego organu:
Zarezerwuj badanie wzroku Twoja zawartość jest tutaj. Edytuj lub usuń ten tekst w tekście lub w ustawieniach zawartości modułu. Możesz również stylizować każdy aspekt tej zawartości w module Ustawienia projektu, a nawet zastosować niestandardowy CSS do tego tekstu w module Ustawienia zaawansowane
Formatowanie tekstu
Po umieszczeniu zawartości korpusu zaktualizuj parametry projektu w następujący sposób:
- Kolor tekstu tekstowego: #ffffff
- Czcionka: Poppins
- Kolor tekstu tytułu: #ffffff
- Tytuł tekstu Rozmiar: 5vw
- Szerokość: 60vw (komputer stacjonarny), 100% (telefon)
- Margines (na pulpicie): -35% w górę, 35% w dół
- Margines (telefon): -70% w górę, 70% w dół
Ostateczny projekt
Oto ostateczny projekt.
końcowe przemyślenia
Tryb mieszania Divi i opcje filtrów zapewniają wszystko, czego potrzebujesz, aby połączyć obrazy w celu stworzenia profesjonalnego tła. Sztuczka polega na tym, aby ustawić obrazy za pomocą jednostek długości vw, aby projekt tła był również responsywny na urządzeniach mobilnych. Ale gdy obrazy są już na miejscu, możemy eksperymentować z różnymi rodzajami trybów mieszania i niezliczonymi innymi opcjami projektowymi, aby stworzyć niezwykle harmonijne projekty.
Mam nadzieję, że ten artykuł dostarczył Ci inspiracji i mam nadzieję, że usłyszysz od Ciebie w komentarzach.
Do twojego zdrowia!
bardzo słabo przystosowujące się do innych obrazów, które są trudne do wdrożenia, ale i tak dziękuję
Dziękuję Ci !! 🙂