Tworzenie układu pełnoekranowego z paralaksowymi przejściami obrazu tła w Divi

Tworzenie strony internetowej z sekcjami pełnoekranowymi to świetny sposób na poprawę komfortu użytkownika dzięki płynnym przejściom i czystym układom sekcji, które obejmują całą szerokość i wysokość przeglądarki. Zazwyczaj działa to dobrze w przypadku prezentowania produktów lub usług w jednej sekcji na raz, umożliwiając użytkownikowi łatwe skupienie się na każdej z nich podczas przewijania strony. Ten rodzaj projektu działa również bardzo dobrze z obrazami tła, które przemawiają do treści i zapewniają piękny akcent projektowy. A jeśli chcesz być trochę kreatywny, możesz dodać funkcję paralaksy do obrazów tła, aby stworzyć całkiem unikalne przejścia podczas przewijania z jednej sekcji pełnoekranowej do drugiej.

W tym samouczku pokażę, jak dodać paralaksy przejścia obrazu tła do pełnoekranowego układu strony w Divi. Proces jest prosty i dzięki niemu możesz stworzyć potężne rezultaty.

zapowiedź

Zobacz niektóre projekty, które wspólnie zbudujemy.

Pierwsze kroki

Subskrybuj nasz kanał YouTube

W tym samouczku potrzebujesz tylko Divi i kolekcji obrazów do wykorzystania w przypadku różnych obrazów produktów i obrazów tła. Używam obrazów z naszego pakietu układów sklepu z sokami. Możesz pobrać plik zip z tymi obrazami na dole wpisu na blogu zawierającego ten pakiet układów. Wystarczy kliknąć przycisk „Pobierz zasoby obrazu w pełnej rozdzielczości”.

Przygotowanie nowej strony

Gdy masz już gotowe obrazy. Utwórz nową stronę i nadaj jej tytuł. Następnie wdróż Divi Builder i wybierz „Buduj od podstaw”. Następnie kliknij przycisk, aby zbudować na przednim końcu.

Teraz jesteś gotowy do akcji!

Podstawowa idea

Podstawowa idea tej koncepcji polega na ułożeniu w stos wielu sekcji o pełnej szerokości, z których każda ma moduł nagłówka o pełnej szerokości. Każdy moduł nagłówka otrzymuje niestandardową szerokość, którą można wyrównać do lewej, wyśrodkować lub do prawej podczas eksponowania tła sekcji. Następnie każda sekcja otrzymuje obraz tła z określoną metodą paralaksy. Tworzy to różne efekty przejścia obrazu tła podczas przewijania strony.

Oto jak to zrobić.

Tworzenie sekcji nagłówka o pełnej szerokości

Najpierw musisz utworzyć nową sekcję o pełnej szerokości, a następnie dodać do niej moduł nagłówka o pełnej szerokości.

Zaktualizuj ustawienia nagłówka o pełnej szerokości za pomocą niektórych treści w następujący sposób:

Tytuł: „Sok pomidorowy”
Tekst linku przycisku nr 1: „Zobacz przepis”
Treść: „Tutaj trafiają Twoje treści. Edytuj lub usuń ten tekst w tekście lub w ustawieniach treści modułu”.
Obraz logo: [patrz zrzut ekranu] (Obraz ma wymiary 240 na 300 pikseli)

Teraz kontynuuj aktualizację projektu nagłówka w następujący sposób:

Kolor tła: rgba (255,255,255,0.92)

Ustaw pełny ekran: TAK

Pokaż przycisk przewijania w dół: TAK
Ikona: zobacz zrzut ekranu
Kolor ikony przewijania w dół: #222222

Kolor tekstu: ciemny

Poziom nagłówka tytułu: H2
Czcionka tytułu: Raleway
Rozmiar tekstu tytułu: 50px

Czcionka ciała: Lato
Rozmiar tekstu ciała: 16px
Odstępy między literami: 1px

Rozmiar tekstu przycisku jeden: 16px
Przycisk fOne Kolor tekstu: #ffffff
Przycisk jeden kolor tła: #222222
Promień obramowania jednego przycisku: 50px
Odstęp między przyciskami jednej litery: 2px
Styl czcionki przycisku pierwszego: TT

Szerokość: 45% (komputer), 60% (tablet), 100% (smartfon)

Zapisz ustawienia.

Główne kluczowe elementy projektu to opcja „Utwórz pełny ekran” i „Szerokość: 45%”. Dzięki temu sekcja będzie zawsze obejmować całą szerokość i wysokość okna przeglądarki. A niestandardowa szerokość zmniejsza moduł nagłówka, aby odsłonić tło sekcji, które dodamy w następnej kolejności.

Dodawanie tła sekcji

Teraz, gdy mamy już zaprojektowany nasz moduł nagłówka, możemy dodać obraz tła naszej sekcji. Przejdź do ustawień sekcji pełnej szerokości i dodaj obraz tła. Upewnij się, że jest wystarczająco duży, aby obejmował całą szerokość i wysokość okna przeglądarki. Następnie wybierz metodę paralaksy CSS.

Powielanie sekcji

Ponieważ w każdej sekcji będzie wyświetlana nowa treść, musimy zduplikować naszą sekcję o pełnej szerokości trzy razy, aby mieć łącznie cztery sekcje na swojej stronie, każda z modułem nagłówka.

Tworzenie statycznego obrazu tła przy użyciu tego samego obrazu tła sekcji z paralaksą CSS

Teraz, gdy mamy cztery identyczne sekcje, możemy zaktualizować zawartość nagłówka o pełnej szerokości za pomocą nowych obrazów logo i tytułów, aby lepiej zrozumieć projekt. Jeśli jednak zachowamy ten sam obraz tła za pomocą paralaksy CSS dla wszystkich czterech sekcji, w wyniku otrzymasz statyczny obraz tła, który pozostanie na swoim miejscu podczas przewijania do różnych sekcji pełnoekranowych. A ponieważ używamy przycisku przewijania w dół na każdym nagłówku, użytkownicy mają możliwość kliknięcia strzałki, aby przewinąć czysto do każdej nowej sekcji.

Sprawdź wynik.

Używanie różnych obrazów tła z przejściami paralaksy CSS

Użycie innego obrazu tła (z paralaksą CSS) dla każdej sekcji zmieni wygląd projektu podczas przewijania. Ponieważ mamy już włączoną paralaksę CSS dla naszych czterech obrazów tła sekcji, wszystko, co musimy zrobić, to zmienić każdy z obrazów na coś innego. W tym przypadku dodaję po prostu dużą wersję produktu jako obraz tła dla każdej sekcji.

Gdy masz inny obraz tła (z paralaksą CSS) dla każdej z czterech sekcji, sprawdź wynik.

Używanie różnych obrazów tła z prawdziwymi przejściami paralaksy

Jeśli chcesz zmienić efekt przejścia obrazu tła, możesz zmienić metodę paralaksy z CSS na True Parallax dla wszystkich czterech obrazów tła sekcji.

Otwórz jedno z ustawień sekcji i zmień metodę CSS na „True Parallax”.

Następnie musisz zrobić to samo dla pozostałych trzech sekcji. Możesz też po prostu kliknąć prawym przyciskiem myszy opcję Parallax Method i wybrać „Rozszerz metodę paralaksy” do wszystkich modułów nagłówka o pełnej szerokości na stronie.

Po zakończeniu sprawdź efekt przejścia obrazu tła.

Poznawanie różnych wyrównań modułów

Zmiana wyrównania modułu nagłówka o pełnej szerokości to pestka. Ponieważ nasz moduł nagłówka o pełnej szerokości ma niestandardową szerokość 45%, możesz łatwo dostosować wyrównanie modułu do lewej, do środka lub do prawej, aby uzyskać inny układ. Szczególnie podoba mi się wyśrodkowane wyrównanie ze statycznym tłem.

Aby wyśrodkować moduł, otwórz ustawienia nagłówka o pełnej szerokości i zaktualizuj Wyrównanie modułu na Wyśrodkowany .

Aby wyrównać moduł do prawej strony, po prostu zaktualizuj wyrównanie modułu na wyrównane do prawej.

Po ustaleniu wyrównania możesz po prostu rozszerzyć styl „wyrównanie modułu” na pozostałe moduły nagłówka na stronie.

Oto przykład wyśrodkowanego wyrównania ze statycznym tłem (ten sam obraz tła dla każdego z paralaksą CSS).

Oto przykład wyśrodkowanego wyrównania z różnymi obrazami tła przy użyciu metody CSS Parallax.

Oto przykład wyśrodkowanego wyrównania z różnymi obrazami tła przy użyciu metody True Parallax.

Oto przykład prawidłowego wyrównania z różnymi obrazami tła przy użyciu kombinacji CSS i prawdziwej paralaksy.

Końcowe przemyślenia

Te przejścia obrazu tła naprawdę wyglądają świetnie, gdy są używane w połączeniu z sekcjami pełnoekranowymi i niestandardowymi modułami nagłówków. Funkcjonalność jest czysta, a design subtelny i niepowtarzalny. Jeśli już, jest to szybki i łatwy sposób na tworzenie statycznego tła dla treści. Zapraszam do odkrywania bardziej zaawansowanych projektów za pomocą gradientów tła, czcionek i obrazów!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!