Jak dodać kolorowe i gradientowe nakładki do Divi Parallax i tła wideo?

Kolorowe i gradientowe nakładki to doskonałe elementy projektu, które mogą przyciągnąć uwagę odbiorców i wyróżnić Twoje treści. Świetnie sprawdzają się w przypadku obrazów tła. Dodaj obraz tła do sekcji, wiersza lub kolumny, dodaj kolor lub nakładkę gradientową, a następnie umieść na nim swoją zawartość. Jednym z problemów jest jednak to, że nakładki kolorowe i gradientowe domyślnie nie działają z paralaksą i tłem wideo w Divi.

W tym samouczku pokażemy, jak dodawać kolorowe i gradientowe nakładki do tła z obrazem w paralaksie lub wideo za pomocą wtyczki innej firmy z naszego marketplace. Zobaczymy również nakładki działające z przegrodami sekcji. Normalnie wymagałoby to kodu, ale z odpowiednimi narzędziami nie jest to trudne do zaimplementowania.

Zacznijmy.

zapowiedź

Oto spojrzenie na to, co zbudujemy w tym samouczku.

Tworzę layout z tłem paralaksy w jednej sekcji i tłem wideo w drugiej. Tło paralaksy będzie miało gradient, a tło wideo będzie miało jednokolorową nakładkę. Zaprojektujemy również dzielniki sekcji. Używam strony docelowej z pakietu Pizzeria Layout Pack, ponieważ, cóż, pizza. Tak to wygląda na pulpicie.

Tak ten sam projekt wygląda na telefonie.

Standardowa paralaksa Divi i tła wideo

Standardowe narzędzia Divi umożliwiają dodawanie obrazów tła i filmów do sekcji, wierszy i kolumn, ale ich nakładki są ograniczone. W przypadku obrazów tła można dodać nakładkę gradientową, ale nie nakładkę dla jednolitego koloru. Opcje wideo nie obejmują nakładek.

Opcje obrazów tła obejmują paralaksę, ale jeśli włączysz paralaksę dla obrazu tła, nakładka nie będzie już wyświetlana nad obrazem. Jest wyłączony, mimo że wybrano go do wyświetlania nakładki.

Jak dodać kolorowe i gradientowe nakładki do Divi Parallax i tła wideo?

Dodamy kolorowe i gradientowe nakładki do paralaksy i tła wideo za pomocą wtyczki innej firmy o nazwie Divi Background Plus. Zobaczymy również, jak stylizować dzielniki sekcji za pomocą tej wtyczki.

Zainstaluj Divi Tło Plus

Divi Background Plus jest dostępny w Divi Marketplace. Zobaczmy, jak zacząć. Najpierw kup i pobierz Divi Background Plus na swój komputer.

W panelu WordPress przejdź do Wtyczki i wybierz Dodaj nowy . Kliknij Prześlij wtyczkę u góry ekranu.

Wybierz Wybierz plik , przejdź do spakowanego pliku na komputerze, wybierz plik i kliknij Zainstaluj teraz .

Po przesłaniu pliku kliknij Aktywuj wtyczkę . Żadna inna konfiguracja nie jest potrzebna. Wtyczka jest teraz gotowa do użycia.

Do Divi Buildera dodano nowy moduł o nazwie Divi Background Plus. Wykorzystamy ten moduł do tworzenia naszych nakładek gradientowych i kolorowych dla tła wideo w reklamie paralaksy. Ta wtyczka i tła w sekcjach to wszystko, czego potrzebujemy do tego samouczka.

Dodaj nakładki gradientowe do tła paralaksy Divi

Otwórz ustawienia sekcji, do której prześlesz obraz tła. W tym przykładzie używam obrazu tła z pierwszą sekcją w pakiecie układu Pizzeria, ale możesz go przesłać do dowolnej sekcji, wiersza lub kolumny.

Otwórz kartę obrazu w ustawieniach treści. Włącz opcję Użyj efektu paralaksy . Używam True Parallax, która jest ustawieniem domyślnym. CSS Parallax też działa.

Włączenie efektu paralaksy wyłącza gradient, ale ustawienia gradientu są nadal aktualne. Zamiast używać gradientu w ustawieniach sekcji, dodamy gradient w ustawieniach w module Divi Background Plus.

Jeśli chcesz użyć tego samego gradientu, który jest już używany w tej sekcji (tak jak ja), wybierz kartę Gradient i kliknij prawym przyciskiem myszy gdzieś gradient. Kliknij opcję Kopiuj kolory gradientu tła .

Wybierz , aby dodać nowy moduł do sekcji z obrazem tła i wybierz Divi Background Plus .

W ustawieniach układu na karcie Treść wybierz zastosowanie ustawień do sekcji, wiersza lub kolumny. Wybieram sekcję .

Otwórz ustawienia tła i wybierz kartę Gradient. Domyślny gradient jest stosowany automatycznie. Możesz dostosować krycie, aby prześwitowało tło, stworzyć własny gradient lub użyć gradientu z układu.

Aby użyć tego z układu, kliknij prawym przyciskiem myszy i wybierz opcję Wklej kolory gradientu tła . Spowoduje to zastosowanie nie tylko kolorów, ale także ustawień typu gradientu, kierunku, pozycji początkowej, pozycji końcowej i umieszczenia gradientu nad obrazem tła.

Oto wynik. Mam teraz wersję oryginału, która zawiera ten sam obraz i nakładkę, ale teraz wyświetla tło w prawdziwej paralaksie.

Oto jak ten sam układ wygląda na telefonie.

Dodaj kolorową nakładkę do tła wideo Divi

Dodaj nową zwykłą sekcję pod pierwszą sekcją. Do tej sekcji dodamy wideo w tle, moduł Divi Background Plus dla nakładki i dodamy moduły tekstowe do wyświetlania wiadomości, informacji kontaktowych i CTA w nakładce.

Planuję wykorzystać tekst z sekcji Call to Action. Jest to łatwe dzięki narzędziom Divi's Layer. Aby to zrobić, kliknij prawym przyciskiem myszy sekcję, którą chcesz skopiować i wybierz Przejdź do warstwy .

Kliknij prawym przyciskiem myszy wiersze, które chcesz skopiować i wybierz opcję Kopiuj wiersz .

Następnie wybierz sekcję, w której chcesz umieścić wiersz, kliknij prawym przyciskiem myszy i wybierz opcję Wklej wiersz . Robię to dla obu wierszy, które chcę skopiować z tej sekcji. Alternatywnie mogłem skopiować tę sekcję i dodać do niej moduł Divi Background Plus.

Mam teraz nową sekcję z Divi Background Plus, kilkoma modułami tekstowymi i CTA.

Następnie dodaj wideo do tła sekcji. Kolory w filmie dobrze współgrają z kolorami w tekście, ale chcę dodać nakładkę, aby nieco bardziej się wyróżniały. Do mojego filmu w tle używam darmowego filmu Tima Miroshnichenko Mixed Toppings over a Pizza z Pexels.

Otwórz ustawienia Divi Background Plus i wybierz Sekcja dla układu.

Przewiń w dół do zakładki Tło i wybierz opcję koloru. Oczywiście kolory będą się różnić w zależności od filmu. Chciałem nadać filmowi czerwony odcień. Użyłem:

• rgba(150,0,0,0.15)

Oto, jak wideo w tle z moją czerwoną nakładką wygląda na pulpicie.

Oto ten sam układ na telefonie.

Kilka innych przykładów jest tutaj ze standardowym fioletowym tłem z 30% kryciem.

Jest to standardowa pomarańcza z 80% kryciem.

Nadaj styl dzielnikowi sekcji

Nakładki działają również z przegrodami na sekcje. Aby dodać rozdzielacz sekcji, otwórz ustawienia sekcji.

Przejdź do karty Projekt, wybierz Przegrody , a następnie wybierz Góra lub Dół , w zależności od tego, gdzie chcesz dodać przegrodę. Przekładkę dodaję tylko na dole. Kliknij menu rozwijane oznaczone Styl dzielnika, aby wybrać dzielnik.

Wybierz odpowiedni styl dzielnika. Wybieram piąty styl, który tworzy kąt z dwoma kolorami.

Wybierz ikonę edycji, aby dodać niestandardowy kolor. To jest kolor, który pojawia się w tej sekcji, w której nie widać separatora. Domyślnym kolorem jest biały, jak widać w poprzednim przykładzie. Dodaj kolor jako kod szesnastkowy lub wybierz kolor z próbnika kolorów. Dodaję kolor #0d0d0d, który jest jednym z kolorów w sekcji pod filmem.

• Kolor #0d0d0d

Film ma teraz stylizowaną przegrodę na dole tej sekcji. Możesz zobaczyć wideo prześwitujące przez przezroczyste części przegrody i dobrze komponuje się z obiema sekcjami.

Wynik

Przyjrzyjmy się, jak układ wygląda na komputerach i urządzeniach mobilnych.

Oto spojrzenie na wersję komputerową. Ma prawdziwe tło paralaksy z nakładką gradientową w pierwszej sekcji. Druga sekcja zawiera obraz tła z kolorową nakładką i separatorem sekcji, który oddziela go od następnej sekcji.

Oto jak układ wygląda na telefonie. Wszystkie elementy działają dobrze na urządzeniach mobilnych.

Końcowe myśli

Oto nasze spojrzenie na to, jak dodać kolorowe i gradientowe nakładki do paralaksy Divi i tła wideo. Divi Background Plus sprawia, że ​​są łatwe do zbudowania i użytkowania. Działa z sekcjami, wierszami i kolumnami, a wybór między nimi jest łatwy. Wszystkie dostosowania są standardowymi narzędziami i ustawieniami Divi, więc są znajome.

Teraz Twoje tła mogą zawierać kolorowe i gradientowe nakładki bez konieczności wyłączania paralaksy i filmów!

Chcemy usłyszeć od Ciebie. Czy stworzyłeś kolorowe i gradientowe nakładki dla swoich obrazów i filmów paralaksy za pomocą Divi Background Plus? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem Lauritta / shutterstock.com