Jak zaprojektować niestandardowe układy stron pełnoekranowych w Divi

Układy stron pełnoekranowych mogą się naprawdę przydać w świecie projektowania stron internetowych. Jedną z głównych zalet pełnoekranowego układu strony jest widoczność. W przypadku stron pełnoekranowych cała zawartość strony pozostaje w oknie przeglądarki. W świecie, w którym użytkownicy szybko się przewijają, umieszczenie wszystkich treści w widocznym obszarze przeglądarki od samego początku może być odświeżające dla widza i może również pomóc w konwersjach.

Jeśli znasz Divi, powinieneś już wiedzieć o module nagłówka o pełnej szerokości, który ma wbudowaną funkcję pełnoekranową. Jest to wspaniałe rozwiązanie do tworzenia pełnoekranowych stron z minimalną zawartością. Ale jeśli chcesz skorzystać z budowania pełnoekranowego układu strony za pomocą zwykłej sekcji z wieloma wierszami i modułami, to jest to post dla Ciebie. Pokażę Ci kilka prostych sztuczek, aby upewnić się, że zawartość strony (nawet pasek nagłówka i stopki) mieści się w oknie przeglądarki, a następnie ładnie skaluje się w różnych rozmiarach przeglądarki.

Zacznijmy.

zapowiedź

Oto zapowiedź ostatecznego układu strony pełnoekranowej, który będziemy tworzyć w tym samouczku.

Zwróć uwagę, jak wysokość strony dostosowuje się do wysokości okna przeglądarki, aby wszystko pozostało na swoim miejscu.

Czego potrzebujesz

W tym samouczku wszystko, czego naprawdę potrzebujesz, to Divi. Będę również korzystał z pakietu Fitness Gym Layout, który jest dostępny w Divi Builder.

Subskrybuj nasz kanał YouTube

Jak zrobić niestandardową stronę pełnoekranową w Divi

Zanim przejdę do głównego projektu tego samouczka, pomyślałem, że pokażę ci podstawową ideę tworzenia strony pełnoekranowej w Divi. W końcu możesz być zaskoczony, jak proste może to być.

Wyjaśnienie podstawowej idei

Na nowej stronie wybierz szablon pustej strony. Spowoduje to zatrzymanie wyświetlania głównego nagłówka i dolnej stopki na stronie (później pokażę, jak je uwzględnić).

Teraz wdróż Divi Builder na interfejsie, aby zbudować swoją stronę od podstaw. Następnie dodaj jedną zwykłą sekcję z jednym wierszem kolumny.

Następnie dodaj moduł licznika czasu (lub dowolny moduł) do wiersza jednej kolumny.

Aby ułatwić wzrok, usuń kolor tła w minutniku i dodaj kolor tła do sekcji, abyśmy mogli lepiej rozpoznać wysokość sekcji na stronie. Obecnie wysokość sekcji jest zależna od wysokości zawartej w niej treści. W tym przypadku jedyną treścią, jaką mamy, jest pojedynczy wiersz z modułem sing.

Teraz otwórz ustawienia sekcji i przejdź do zakładki zaawansowane i dodaj następujący niestandardowy CSS do głównego elementu:

min-height: 100vh;
display: flex;
flex-direction: column;

Ustawienie minimalnej wysokości sekcji na 100vh (100% wysokości widocznego obszaru) zapewni, że sekcja będzie obejmowała całe okno przeglądarki (lub widoczny obszar). Właściwość „display:flex” to szybki i łatwy sposób na pionowe wyśrodkowanie zawartości sekcji.

Sprawdź ten pomocny przewodnik, aby uzyskać więcej informacji na temat jednostki długości vh.

Wyświetl swoją stronę na żywo w przeglądarce incognito, aby zobaczyć wynik, ponieważ jeśli jesteś zalogowany do WordPress, górny pasek administratora nieznacznie zrzuci wysokość przeglądarki.

Cóż, proszę bardzo. To podstawowa idea tworzenia niestandardowego układu strony pełnoekranowej w Divi.

Włączenie nagłówka i stopki do strony pełnoekranowej.

Jeśli chcesz, aby pasek nagłówka i stopki był zawarty na stronie pełnoekranowej, musisz dokonać jednej małej korekty. Najpierw zmień szablon strony z powrotem na szablon domyślny na zapleczu edytora stron.

Dołączenie nagłówka i dolnej stopki doda dodatkową wysokość do okna przeglądarki, dzięki czemu sekcja nie będzie już idealnie pasować, jak kiedyś. Dzieje się tak, ponieważ Twoja strona składa się teraz z wysokości sekcji, która stanowi 100% wysokości widocznego obszaru PLUS wysokość paska nagłówka i dolnej stopki. To za dużo. Aby to naprawić, musimy dostosować niestandardowy CSS w naszej sekcji do następującego:

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

Jedyną różnicą jest wartość min-wysokości. Teraz jest obliczenie, które uwzględnia dodatkową wysokość (w pikselach) zbiorczo paska nagłówka i dolnej stopki.

132px jest oparty na sumie domyślnej wysokości nagłówka (80px) i domyślnej wysokości dolnego paska stopki (53px).

Teraz, gdy mamy podstawową wiedzę na temat tworzenia niestandardowej strony pełnoekranowej w Divi, przejdźmy do bardziej złożonego projektu.

Tworzenie kompletnego projektu strony pełnoekranowej

Aby rozpocząć ten projekt, utwórz nową stronę, nadaj jej tytuł i wdróż Divi Builder. Wybierz opcję Wybierz gotowy układ i z wyskakującego okna Wczytaj z biblioteki wybierz stronę Układ siłowni fitness. Następnie kliknij, aby użyć strony cenowej.

Po załadowaniu układu do konstruktora kliknij przycisk, aby skompilować w interfejsie (The Visual Builder) i możesz zacząć.

Tworzenie nowej sekcji

Gotowy układ ma pomóc w rozpoczęciu projektowania. Będziemy używać tych elementów projektu układu po drodze i usuwać resztę układu po zakończeniu. Aby utworzyć główną sekcję dla naszego układu pełnoekranowego, stwórz nową zwykłą sekcję i przeciągnij ją na samą górę strony. Następnie dodaj do wiersza jedną czwartą, jedną czwartą, pół-kolumnową strukturę. To będzie podstawa naszej pełnoekranowej strony.

Dodawanie modułów do kolumn

Używając Multiselect (przytrzymaj ctrl/cmd i kliknij), zaznacz wszystkie moduły w pierwszych dwóch wierszach w pierwszej sekcji układu i przeciągnij je do pierwszej kolumny nowej sekcji u góry strony.

Następnie użyj funkcji wielokrotnego wyboru, aby skopiować wszystkie moduły z trzeciego wiersza tej samej pierwszej sekcji układu i wklej je do drugiej kolumny nowej sekcji u góry strony.

Tekst zostanie ukryty z powodu białego tła, ale kolor tła zmienimy później.

W trzeciej kolumnie dodaj moduł suwaka. Ten suwak w końcu obejmie całą wysokość ekranu, ale na razie skonfigurujmy zawartość. W ustawieniach suwaka usuń jeden z dwóch domyślnych slajdów, które są tam domyślnie, a następnie kliknij, aby otworzyć ustawienia pojedynczego slajdu.

W ustawieniach slajdów dodaj obraz tła, upewniając się, że jest wystarczająco duży, aby obejmował całą wysokość przeglądarki.

To zajmuje się wszystkimi naszymi modułami, których na razie potrzebujemy. Później wrócimy do ustawień projektu, ale na razie dostosujmy nasz wiersz.

Dostosowywanie ustawień wiersza

Otwórz ustawienia wiersza i zacznij od dodania koloru tła do kolumny 2:

Kolor tła kolumny 2: #2a2e40

Przejdź do karty projektu i zaktualizuj następujące elementy:

Ustaw pełną szerokość tego wiersza: TAK
Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK
Niestandardowe dopełnienie: 0px góra, 0px dół

Dostosowywanie ustawień sekcji

Jedyną rzeczą niezbędną w tym momencie dla naszych ustawień sekcji jest usunięcie domyślnego dopełnienia, ale pomyślałem, że fajnie byłoby dodać rozdzielacz sekcji, który obramowuje górę pierwszej kolumny. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Styl Top Divider: patrz zrzut ekranu
Kolor górnego rozdzielacza: #2a2e40
Wysokość górnego dzielnika: 8vw
Powtarzanie poziome górnego dzielnika: 0,8x
Top Divider Flip: pionowy i poziomy

Niestandardowe wypełnienie: 0px na górze, 0px na dole

Ponieważ separator jest ustawiony tak, aby wyświetlał się pod zawartością sekcji, ukryje się za suwakiem w kolumnie 3 i nie będzie wyświetlany w kolumnie 2, ponieważ pasuje do koloru tła kolumn. Tworzy to ładny element projektu obramowania dla kolumny 1.

Usuń resztę gotowego układu

W tym momencie nasza górna sekcja zawiera wszystko dla naszego układu strony pełnoekranowej, dzięki czemu możemy usunąć wszystkie pozostałe sekcje, które zostały dostarczone z gotowym układem. Tak powinna wyglądać Twoja strona do tej pory.

Teraz jesteśmy gotowi, aby zacząć dostosowywać naszą stronę do pełnego ekranu.

Dodawanie niestandardowego kodu CSS, aby strona była na pełnym ekranie

W podstawowym przykładzie na początku tego artykułu dodałem niestandardowy css bezpośrednio do sekcji. Aby jednak upewnić się, że nasza pełnoekranowa funkcjonalność dotyczy tylko komputerów stacjonarnych (i ucieka się do domyślnej stylizacji na urządzeniach mobilnych), dodam ją do CSS w ustawieniach strony. Umożliwi mi to dodanie zewnętrznego CSS, który ma zastosowanie tylko do tej strony, ale także da mi możliwość dodania zapytania o media, które ogranicza stylizację tylko do pulpitu.

W menu ustawień u dołu narzędzia do tworzenia frontonu otwórz ustawienia strony. Na karcie Zaawansowane wprowadź następujący niestandardowy kod CSS:

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

Dla tych, którzy nie są zaznajomieni z CSS, zauważ, że kod jest otoczony zapytaniem o media, które stosuje styl, gdy przeglądarka ma co najmniej 980 pikseli szerokości. W nawiasach pierwszy fragment zawiera identyfikator CSS o nazwie „fullsection”, po którym następuje identyfikator CSS o nazwie „fulslide”. Te dwa identyfikatory CSS są ważne do zapamiętania, ponieważ będziemy musieli dodać je do naszej sekcji i naszego suwaka. Gdy to zrobimy, css „height: calce(100vh – 133px)” zostanie zastosowany, dzięki czemu oba będą pełnoekranowe (obejmujące pełną wysokość okna przeglądarki).

Drugi fragment kodu zastosuje właściwość display flex do sekcji, dzięki czemu cała zawartość sekcji zostanie wyśrodkowana w pionie. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym postem na temat pionowego wyrównania treści w Divi.

Trzeci fragment jest całkowicie opcjonalny. To po prostu sprawia, że ​​dolny pasek stopki ma pełną szerokość, aby nieco lepiej pasował do projektu, a także pasował do stylu nagłówka o pełnej szerokości, który dodamy.

Teraz, gdy masz już zewnętrzny CSS, możemy dodać nasze identyfikatory CSS do naszej sekcji i naszego suwaka. Przejdź do ustawień sekcji i dodaj następujący identyfikator CSS:

Identyfikator CSS: pełna sekcja

Teraz otwórz ustawienia modułu suwaka dla suwaka w kolumnie 3 i dodaj następujący identyfikator CSS:

Identyfikator CSS: pełny slajd

Ostatnie poprawki

W tym momencie funkcjonalność strony pełnoekranowej jest na miejscu i powinna działać. Możesz to sprawdzić w przeglądarce incognito, aby mieć pewność. Pozostało tylko kilka ostatnich szlifów.

Dodaj odstępy do naszych kolumn

Otwórz ustawienia wiersza, aby dodać dopełnienie na górze kolumny 1 i kolumny 2 w następujący sposób:

Kolumna 1 Niestandardowe wypełnienie: 12vh u góry, 1vw w lewo, 1vw w prawo
Kolumna 2 Niestandardowe wypełnienie: 12vh u góry, 1vw w lewo, 1vw w prawo

Zauważ, że użyłem jednostki długości vh dla moich najwyższych wartości dopełnienia. Umożliwi to skalowanie dopełnienia wraz z wysokością rzutni, tworząc więcej dopełnienia, gdy okno przeglądarki staje się wyższe i tworząc mniej dopełnienia, gdy przeglądarka staje się krótsza. Użyłem jednostki długości vw (szerokość widoku) dla moich wartości dopełnienia lewego i prawego, aby dopełnienie było skalowane zgodnie z szerokością przeglądarki.

Dodaj jednostki długości vh do dużego tekstu, aby zmaksymalizować przestrzeń wyświetlania

Jak widać, istnieje kilka modułów z naprawdę dużym tekstem, które w ogóle nie skalują się w oknie przeglądarki. Aby to naprawić, możemy ustawić rozmiar tekstu na jednostkę długości vh. Umożliwi to zmniejszenie tekstu na krótszych ekranach przeglądarki.

Otwórz ustawienia modułu tekstowego u góry kolumny 1 i zaktualizuj rozmiar tekstu nagłówka h1 do 7vh (nie vw).

Następnie otwórz ustawienia modułu tekstowego u góry kolumny 2 i zaktualizuj rozmiar tekstu nagłówka 2 do 6vh.

Zaktualizuj projekt suwaka

Aby zakończyć projekt, możesz skopiować projekt przycisku z kolumny 2 i wkleić go do stylów przycisków suwaka. Aby to zrobić, otwórz ustawienia przycisków dla przycisku w kolumnie 2 i kliknij prawym przyciskiem myszy kategorię opcji przycisku i kliknij „kopiuj style przycisków”.

Następnie otwórz ustawienia suwaka i wklej style przycisków do kategorii opcji przycisków suwaka.

Możesz także dodać nakładkę tła do poszczególnych slajdów.

Regulacje paska nagłówka i dolnej stopki

Być może pamiętasz, że dodaliśmy już mały fragment niestandardowego kodu CSS, który rozszerzył naszą stopkę do pełnej szerokości. To było w oczekiwaniu na pełną szerokość naszego głównego paska menu. Aby uzyskać pełną szerokość głównego paska menu, przejdź do pulpitu WordPress i przejdź do Divi > Theme Customizer > Nagłówek i nawigacja > Główny pasek menu. Następnie zaznacz opcję Utwórz pełną szerokość.

Ponieważ wyświetlamy nasz dolny pasek stopki na naszej stronie pełnoekranowej, możemy zaktualizować kolor tła paska dolnego, aby pasował do projektu. Pozostań w konfiguratorze motywów i przejdź do Stopka> Dolny pasek. Następnie ustaw kolor tła na #2a2e40.

Następnie opublikuj swoje zmiany.

Wynik końcowy

Oto ostateczny projekt. Zwróć uwagę, jak wszystko ładnie mieści się w oknie przeglądarki.

I sprawdź, jak to wygląda po dostosowaniu przeglądarki do różnych rozmiarów.

I nie zapomnij, ponieważ zastosowaliśmy nasz niestandardowy CSS tylko do przeglądarek o szerokości większej niż 980 pikseli, projekt powróci do normy na urządzeniach mobilnych.

Tutaj jest na tablecie i smartfonie.

Końcowe przemyślenia

Tworzenie niestandardowego układu strony pełnoekranowej w Divi nie jest tak przytłaczające, gdy zrozumiesz, jak prawidłowo dostosować wysokość sekcji do wysokości przeglądarki za pomocą kilku fragmentów kodu CSS. Ale kiedy już to zrobisz, możesz tworzyć niezliczone projekty stron pełnoekranowych w Divi Builder. Tylko uważaj, aby ograniczyć zawartość do minimum, jeśli planujesz, aby wszystko było widoczne w oknie przeglądarki.

Ten rodzaj projektu sprawdza się dobrze w przypadku witryn osobistych, ofert promocyjnych i wszelkiego rodzaju stron docelowych. Jest to również świetne rozwiązanie dla stron, które mają mało treści i chcesz uniknąć wyświetlania paska dolnej stopki w połowie strony.

I nie zapomnij o opcji korzystania z modułu nagłówka o pełnej szerokości Divi. Chociaż nie będziesz mieć takiej elastyczności, jak metoda zastosowana w tym poście, jest idealna dla stron o minimalnej zawartości.

Oto kilka innych postów, które mogą Ci się spodobać na temat stron pełnoekranowych.

• Jak tworzyć sekcje pełnoekranowe z górnymi i dolnymi linkami przewijania za pomocą Divi
• Zaprojektuj unikalny układ Divi na pełnym ekranie za pomocą animowanego przycisku przewijania
• i więcej

Czekam na kontakt z Państwem w komentarzach poniżej.

Pozdrawiam!