Przejdź do głównej treści

Jak łączyć obrazy, aby utworzyć niestandardowy projekt tła w Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Scalanie wielu obrazów może być przydatne do tworzenia profesjonalnych środowisk dla Twojej witryny. Chodzi o zrobienie dwóch lub trzech osobnych zdjęć i nałożenie ich. Następnie użyj trybu mieszania, aby zmieszać warstwy, aby stworzyć jednolity, harmonijny projekt.

Każdy element Divi Builder ma wbudowany tryb scalania i opcje filtrów, które ułatwiają scalanie elementów w konstruktorze 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 dość łatwe. Gdy znajdziesz obrazy we właściwym miejscu, możesz je mieszać za pomocą kilku kliknięć. Oczywiście dysponujesz arsenałem opcji Divi, które nadają najnowszy akcent i nadają nowy wymiar kreatywności projektowi.

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:

  1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj zainstalowany motyw Divi (lub wtyczkę Divi Builder, jeśli nie używasz motywu Divi).
  2. Utwórz nową stronę w WordPress i użyj Divi Builder do edycji strony w interfejsie (konstruktor wizualny).
  3. Pobierz niektóre fikcyjne obrazy z biblioteki multimediów, aby wykorzystać je w samouczku. Używam obrazów 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.

Pobierz obraz o wymiarach około 500 pikseli na 700 pikseli. Używam jednego z pakietu układów Eye Doctor.

Po pobraniu obrazu nadaj mu maksymalną szerokość przy użyciu długości jednostki vw, aby dobrze pasował do innych zdjęć, które chcemy 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 dodaliśmy do linii po prawej stronie tego obrazu. Musimy 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.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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 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 trochę poprawić te zdjęcia, ale na razie przejdźmy do ustawień tej sekcji.

Ustawienia sekcji

Otwórz ustawienia sekcji i dodaj obraz tła i gradient w następujący sposób:

  • Obraz w tle: [pobierz obraz o 1920px przez 1280px]
  • Gradient po lewej stronie Kolor: rgba (1,16,63,0.64)
  • Gradient prawego tła Kolor: rgba (12,113,195,0.82)
  • Umieść gradient na obrazie tła: TAK

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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 obejmować cały dół sekcji. Pozwoli nam to dodać tryb mieszania do linii w celu scalenia dwóch zdjęć z tłem sekcji. Aby to zrobić, dodaj następujący tryb scalania.

  • Tryb syntezy: mnożyć

Dlaczego pomnażać się?

Tryb Multiply Blend mnoży bieżącą warstwę / wiersz (w tym zawarte w nim obrazy) z warstwą poniżej (tło sekcji). Łatwym sposobem na zastanowienie się nad efektem jest wyobrażenie sobie dwóch slajdów w projektorze slajdów ustawionych jeden za drugim. Jeśli wyświetlisz oba obrazy na ekranie, uzyskasz połączenie obu nieco ciemniejszych.

Wyśrodkuj obrazy pionowo

Nie jest to konieczne, ale jeśli chcesz się upewnić, że oba obrazy w linii pozostają wyśrodkowane w pionie, możesz dodać fragment kodu CSS do kolumny. Aby to zrobić, otwórz ustawienia linii, a następnie kliknij ustawienia kolumny. 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 zdjęcia dobrze się pobierają, ale mogą użyć drobnych poprawek, aby uczynić go bardziej profesjonalnym. Możemy użyć cienia białego pola, aby zmiękczyć krawędzie obrazów i użyć polecenia Przekształć, aby ustawić 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ść cienia pudełka: 6vw
  • Kolor cienia: #ffffff
  • Transformator Przetłumacz: 5vw (oś X), 11vw (oś Y)

Zdjęcie # Klucze końcowe 2

Po zakończeniu manipulacji obrazem # 1 po lewej stronie otwórz ustawienia obrazu # 2 po prawej stronie 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 zawiera trzy pięknie pomieszane obrazy, możemy dodać naszą treść na górze sekcji. Aby to zrobić, dodaj nową sekcję pod bieżącą sekcją.

Następnie dodaj wiersz kolumny do zwykłej sekcji.

Następnie dodaj moduł tekstowy do linii.

Treść

Zaktualizuj zawartość modułu tekstowego o następującą treść:

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

<h1> Zarezerwuj badanie wzroku </ h1> Twoja treść trafia tutaj. Edytuj lub usuń ten tekst w ustawieniach treści modułu. Możesz także użyć tej ikony w module Ustawienia zaawansowane i ustawienia

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 i opcje filtrowania Divi oferują wszystko, czego potrzebujesz do miksowania zdjęć w celu stworzenia profesjonalnych środowisk. Sztuką jest ustawienie obrazów za pomocą jednostek długości vw, aby projekt tła był również reaktywny na urządzeniach mobilnych. Ale kiedy obrazy są już na swoim miejscu, możemy eksperymentować ze wszystkimi rodzajami trybów mieszania i niezliczonymi innymi opcjami projektowania, aby stworzyć niezwykle harmonijne projekty.

Mam nadzieję, że ten artykuł dał ci trochę inspiracji i mam nadzieję, że usłyszę od ciebie w komentarzach.

Do twojego zdrowia!

Ten artykuł zawiera 1 komentarz

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
2 akcji
udział2
ćwierkanie
Enregistrer