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.

Przykładowy model do budowy divi

To, czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

  1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj Motyw Divi zainstalowany (lub wtyczka Divi Builder, jeśli nie używasz Motyw Divi).
  2. Utwórz nową stronę w WordPress i użyj Divi Builder do edycji strony w interfejsie (konstruktor wizualny).
  3. 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.

Dodaj sekcję divi

Dodawanie obrazów za pomocą modułu obrazu

Zdjęcie nr 1

Po zdefiniowaniu wiersza i kolumny dodaj moduł obrazu do wiersza.

Dodaj moduł obrazu divi

Prześlij obraz o wymiarach około 500 na 700 pikseli. Używam jednego z pakietu Eye Doctor Layout Pack.

Ustawienia obrazu DiviPo 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

Modyfikacja wyrównania obrazu modułu DiviChcemy, 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;

Dodaj kod divi css

Zdjęcie nr 2

Następnie dodaj nowy moduł obrazu pod bieżącym obrazem.

Dodaj obrazek poniżej divi

Następnie pobierz nowy obraz, którego wymiary są zbliżone do pikseli 1000 przez piksele 667.

Wstaw obraz modułu Divi 2

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.

Modyfikacja obrazu Divi

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:

  • Obraz tła: [pobierz obraz około 1920 na 1280 pikseli]
    Dodaj obraz tła sekcji divi
  • 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

Dodaj zdegradowany efekt

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

Skonfiguruj dopełnienie diviUstawienia 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

Ustawienie modułu Divi Line

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ć

Tryb scalania linii Divi

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;

Parametr linii divi

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
    Moduł obrazu divi konfiguracji cienia
  • Transformator Przetłumacz: 5vw (oś X), 11vw (oś Y)

Transformacja osi modułu obrazu Divi

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

Modyfikacja drugiego obrazu divi

Możemy nawet dodać kilka filtrów, aby obraz był ostrzejszy.

  • Nasycenie: 30%
  • Krycie: 60%

Konfiguracja filtra modułu obrazu Divi

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.

Dodaj nową sekcję na diviNastępnie dodaj wiersz kolumny do zwykłej sekcji.

Wybierz układ divi

Następnie dodaj moduł tekstowy do linii.

Wstaw moduł tekstowy do drugiej sekcji divi

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

Zarezerwuj egzamin na moduł Divi

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ół

Dostosowywanie czcionki dla modułu Divi Text

Ostateczny projekt

Oto ostateczny projekt.

Ostateczna książka projektowa konsultacja

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!