Jak stworzyć projekt tła z matowego szkła w Divi

Dodanie tła z matowego szkła do witryny może być świeżym elementem projektu, który sprawi, że tło i tekst będą się wyróżniać w wyjątkowy sposób. Sztuczka do stworzenia efektu tła z matowego szkła polega na rozmyciu tła za elementem docelowym. Innymi słowy, chcemy połączyć dwa elementy w taki sposób, aby docelowe tło wyglądało jak matowe szkło, które ukazuje rozmytą wersję tła za elementem.

W tym samouczku pokażemy Ci trzy metody tworzenia projektu tła z matowego szkła w Divi. Najpierw przedstawimy potężną właściwość CSS backdrop-filter, która utworzy matowe tła za pomocą jednej linii CSS. Następnie pokażemy dwie inne metody, które obejmują nakładanie elementów Divi (ze stylami tła i filtrami), aby stworzyć piękne, matowe projekty tła.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz je pobrać za pomocą poniższego przycisku. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Subskrybuj nasz kanał YouTube

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

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.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Jak tworzyć wzory tła z matowego szkła w Divi

Metoda 1: Tworzenie tła z matowego szkła za pomocą właściwości CSS Backdrop-Filter`

W tym pierwszym przykładzie zademonstrujemy najłatwiejszą metodę tworzenia projektu matowego szklanego tła przy użyciu właściwości CSS backdrop-filter. Jest to łatwe, ponieważ potrzebujemy tylko linii CSS, aby uzyskać pożądany wynik. Minusem jest to, że obecnie istnieje kilka przeglądarek, które nie obsługują filtrowania tła (IE i Firefox).

Celem projektu matowego tła nie jest po prostu rozmycie tła elementu docelowego, ale także rozmycie tła za elementem. Właściwość backdrop-filter może to zrobić, stosując efekt filtra rozmycia do elementu poniżej (lub za) elementem docelowym.

Oto jak to zrobić.

Dodawanie obrazu tła sekcji

Najpierw dodaj jednokolumnowy wiersz do sekcji.

Otwórz ustawienia sekcji i nadaj mu obraz tła.

Dodawanie koloru tła wiersza i filtra tła

Następnie otwórz ustawienia wiersza i dodaj półprzezroczysty biały kolor tła w następujący sposób:

• Kolor tła: rgba (255,255,255,0.3)

Na karcie projektu zaktualizuj rozmiar i odstępy między wierszami w następujący sposób:

• Szerokość: 90%
• Maksymalna szerokość: 900px
• Wypełnienie: 5% góra, 5% dół, 5% lewo, 5% prawo

W zakładce Zaawansowane dodaj następujący kod CSS do głównego elementu:

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);

To doda filtr rozmycia 10px do tła elementu. Zwróć uwagę, jak obraz tła sekcji jest rozmyty przez efekt, mimo że CSS został zastosowany do wiersza. Możesz zwiększyć lub zmniejszyć stopień rozmycia, zmieniając wartość piksela w CSS.

Dodawanie treści za pomocą modułu tekstowego

Aby zapewnić trochę treści dla naszego matowego tła, dodaj moduł tekstowy do kolumny wiersza.

Następnie wklej następujący kod HTML do treści pod zakładką tekst:

<h2>Frosted Glass Background</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Aby dopracować projekt, zaktualizujmy style tekstu w następujący sposób:

• Grubość czcionki tekstu: pół pogrubiona
• Kolor tekstu: #33345b
• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 2em
• Czcionka nagłówka 2: Poppins
• Grubość czcionki nagłówka 2: pogrubiona
• Styl czcionki nagłówka 2: TT
• Wyrównanie tekstu nagłówka 2: do lewej
• Kolor tekstu nagłówka 2: #33345b
• Rozmiar tekstu nagłówka 2: 70px (komputer), 40px (tablet), 25px (telefon)
• Nagłówek 2 Odstępy między literami: 2px
• Nagłówek 2 Wysokość linii: 1,3 em

Wynik

Oto ostateczny wynik. Mówiłem, że to będzie łatwe!

Metoda 2: Tworzenie tła z matowego szkła za pomocą paralaksy i modułów warstwowych

W tej następnej metodzie będziemy trochę kreatywni, tworząc efekt tła z matowego szkła w Divi. Chociaż nie jest to tak łatwe do stworzenia, plusem jest to, że projekt jest obsługiwany we wszystkich przeglądarkach. Tak więc, jeśli szukasz godnego zaufania rozwiązania zastępczego dla filtra tła, to powinno zadziałać.

Oto jak to zrobić.

Dodawanie sekcji z obrazem tła paralaksy

Najpierw utwórz nową zwykłą sekcję pod tą, którą właśnie utworzyliśmy.

Następnie dodaj do sekcji wiersz z jedną kolumną.

Nadaj sekcji obraz tła z efektem paralaksy za pomocą metody CSS:

• Użyj efektu paralaksy: TAK
• Metoda paralaksy: CSS

Dodawanie tej samej treści co poprzedni moduł tekstowy

Następnie skopiuj moduł tekstowy z pierwszej sekcji/przykładu powyżej i wklej go w wierszu nowej sekcji.

Ustawienia kolumny

Następnie otwórz ustawienia kolumny zawierającej nasz zduplikowany moduł tekstowy i zaktualizuj dopełnienie w następujący sposób:

• Wypełnienie: 10% góra, 10% dół, 10% lewo, 10% prawo

Na karcie Zaawansowane zaktualizuj widoczność przepełnienia w następujący sposób:

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj niewyraźną warstwę obrazu tła za pomocą modułu tekstowego

Teraz, gdy mamy już nasz obraz paralaksy treści i tła sekcji, musimy dodać nasz pierwszy z dwóch modułów tekstowych (lub warstw), które utworzą matowe tło za naszą treścią.

Najpierw dodamy moduł tekstowy, który będzie służył jako rozmyta warstwa obrazu.

Śmiało i dodaj nowy moduł tekstowy pod istniejącym modułem tekstowym.

Przenieś moduł tekstowy nad moduł tekstowy zawierający treść tekstową.

Następnie wyjmij zawartość ciała, aby pozostała pusta. Będziemy potrzebować tego modułu tylko do obrazu tła.

Następnie dodaj ten sam obraz tła do modułu tekstowego, używając tego samego efektu paralaksy CSS:

• Użyj efektu paralaksy: TAK
• Metoda paralaksy: CSS

Ponieważ używamy tego samego efektu paralaksy CSS na obrazie tła, nie zauważysz tła obrazu, ponieważ pokazuje on ten sam obraz w tej samej stałej pozycji tła sekcji.

W zakładce projekt dodaj następujący filtr do modułu tekstowego:

• Rozmycie: 10px

Teraz mamy rozmytą wersję obrazu tła paralaksy.

Następnie nadaj modułowi tekstowemu pozycję bezwzględną:

• Pozycja: bezwzględna

Teraz, gdy moduł znajduje się w pozycji bezwzględnej, możemy zaktualizować stylizację rozmiaru tak, aby moduł obejmował całą szerokość i wysokość kolumny.

• Szerokość: 100%
• Wzrost: 100%

Teraz zamazany obraz jest na swoim miejscu i widzimy, jak zaczyna działać efekt matowego szkła.

Dodawanie zamazanej nakładki obrazu z innym modułem tekstowym

Następnym krokiem jest dodanie kolejnego modułu tekstowego na górze modułu tekstowego z rozmytym obrazem, który służy jako lekka nakładka dopełniająca projekt.

Aby utworzyć nakładkę, zduplikuj moduł tekstowy z zamazanym obrazem.

Otwórz ustawienia zduplikowanego modułu tekstowego i usuń obraz tła.

Następnie dodaj następujący kolor tła:

• Kolor tła: rgba (255,255,255,0,5)

W zakładce projekt przywróć filtr rozmycia do 0px.

Teraz sprawdź efekt końcowy.

Metoda 3: Tworzenie tła z matowego szkła przy użyciu rzeczywistych rozmiarów obrazu i modułów warstwowych

Efekt paralaksy z matowym tłem jest fajny, ale możesz nie chcieć ograniczać się do efektu paralaksy do utworzonych matowych teł. Ten sam efekt można uzyskać, używając obrazów tła w ich rzeczywistym rozmiarze.

W tej ostatniej metodzie stworzymy projekty matowego tła na poziomie kolumny, używając obrazów w ich rzeczywistym rozmiarze. Proces jest podobny do metody 2 powyżej. Zaletą jest to, że możesz użyć tej metody do tworzenia matowego tła na wielu kolumnach rzędu Divi.

Powiel poprzednią sekcję

Aby przyspieszyć projektowanie, zduplikuj drugą sekcję zawierającą nasz drugi przykład.

Zaktualizuj tło sekcji

Otwórz ustawienia sekcji, usuń obraz tła i dodaj następujący kolor tła:

• Kolor tła: #33345b

Zaktualizuj tło kolumny i wypełnienie

Następnie otwórz ustawienia kolumny i dodaj ten sam obraz tła, który był używany w poprzednim przykładzie. Tylko tym razem upewnij się, że rozmiar obrazu tła jest ustawiony na Rzeczywisty rozmiar:

• Obraz tła: rzeczywisty rozmiar

Następnie zaktualizuj ustawienia kolumn o nowe dopełnienie w następujący sposób:

• Wypełnienie: 10% góra, 10% dół, 15% lewo, 15% prawo

Zaktualizuj obraz modułu tekstowego zamazanego obrazu

Następnie otwórz ustawienia modułu tekstowego z rozmytym obrazem i dodaj ten sam obraz, który został użyty jako tło kolumny, upewniając się, że rozmiar obrazu tła jest ustawiony na rzeczywisty rozmiar:

• Użyj efektu paralaksy: NIE
• Rozmiar obrazu tła: rzeczywisty rozmiar

Zmień rozmiar i położenie rozmazanego obrazu i modułów tekstu nakładki

Aby utworzyć wymagane odstępy wokół modułu tekstowego z rozmytym obrazem tła i modułu tekstowego nakładki, użyj opcji wielokrotnego wyboru, aby wybrać oba moduły i zaktualizuj opcje zmiany rozmiaru w następujący sposób:

• Szerokość: 80%
• Wzrost: 80%

Następnie zaktualizuj położenie pozycji bezwzględnej na wyśrodkowane:

• Lokalizacja: wyśrodkowana

Oto ostateczny wynik.

Twórz układy wielu kolumn z drobnymi korektami

Możesz nawet powielić kolumnę w układzie dwukolumnowym. Będziesz musiał dostosować rozmiar tekstu nagłówka i wypełnienie kolumn, aby upewnić się, że matowe tło znajduje się za treścią. W razie potrzeby możesz przełączać obrazy tła używane w kolumnie i moduł tekstowy z rozmytym obrazem.

Oto przykład układu dwukolumnowego.

Ostateczny wynik

Oto ostateczny wynik wszystkich przykładów.

Końcowe przemyślenia

W tym samouczku pokazaliśmy trzy metody tworzenia projektów matowego tła w Divi. Niektórym z was może być łatwiej najpierw dostosować obrazy w Photoshopie do tego typu rzeczy. Ale w przypadku Divi nie jest to konieczne. Pierwsza metoda wykorzystuje właściwość CSS backdrop-filter i jest zdecydowanie najłatwiejszym i najpotężniejszym rozwiązaniem. Ale dopóki ta właściwość nie zostanie przyjęta przez wszystkie przeglądarki, możesz użyć dwóch pozostałych metod w tym samouczku, które używają konstruktora Divi. Podsumowując, efekt matowego tła może naprawdę wyglądać niesamowicie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!