Czy chcesz utworzyć suwak pełnoekranowy za pomocą Divi ?
Suwak pełnoekranowy może działać bardzo dobrze jako nagłówek Twojej strony głównej. Witryna internetowa.
Aspekt pełnoekranowy systematycznie utrzymuje treść ważne nad zakładką. Funkcja suwaka pozwala użytkownikom zobaczyć treść dodatkowe bez konieczności przewijania strony.
Utwórz suwak pełnoekranowy za pomocą Divi jest zaskakująco łatwe. Kluczem jest nadanie suwakowi wysokości względem wysokości przeglądarki, a następnie pozbycie się wszelkich dodatkowych ograniczeń dotyczących marginesów i szerokości w wierszu lub sekcji nadrzędnej.
W ciągu zaledwie kilku minut możesz utworzyć pełnoekranowy suwak, który po wczytaniu strony wypełnia cały ekran i świetnie wygląda na wszystkich urządzeniach.
Zacznijmy.
badanie
Oto krótki przegląd suwaka, który stworzymy w tym samouczku.
Utwórz nową stronę za pomocą Divi Builder
W panelu WordPress przejdź do Strony> Dodaj nowy
Podaj tytuł, który jest dla Ciebie odpowiedni i kliknij 'Zastosowanie Divi Budowniczy"
Na koniec kliknij „Rozpocznij budowę”
Następnie będziesz mieć pustą stronę, aby rozpocząć projektowanie w Divi.
Utwórz suwak pełnego ekranu w Divi
Konfiguracja sekcji i linii
Aby rozpocząć, dodaj do sekcji wiersz z jedną kolumną.
margines sekcji
Przed dodaniem modułu otwórz ustawienia sekcji, przejdź do zakładki Wnętrze, rozwiń opcję Rozstaw i zmień ustawienia w następujący sposób:
- Dopełnienie (góra i dół): 0px
Ustawienia linii
Następnie otwórz ustawienia linii i zaktualizuj następujące w zakładce Wnętrze :
- Szerokość: 100%
- Maksymalna szerokość: 100%
- Dopełnienie (góra i dół): 0px
Mając wszystkie te ustawienia, możemy teraz przejść do tworzenia rzeczywistego Slidera.
Tworzenie suwaka pełnoekranowego
Aby utworzyć suwak pełnoekranowy, dodaj nowy moduł suwaka do wiersza.
Dodaj obrazy do każdego slajdu
Przed aktualizacją ogólnych ustawień slajdu otwórz domyślne ustawienia pierwszego slajdu
Dodaj obraz i obraz tła do slajdu. W tym przykładzie używamy tego samego obrazu dla obrazu slajdu i obrazu tła (około 1920 na 1500 pikseli).
Następnie otwórz ustawienia drugiego slajdu
Dodaj do slajdu inny obraz i obraz tła niż poprzedni.
Pamiętaj, że możesz dodać tyle slajdów, ile chcesz.
Zaktualizuj ustawienia suwaka
Teraz, gdy każdy pojedynczy slajd ma unikalny obraz i obraz tła, jesteśmy gotowi do ogólnej aktualizacji ustawień suwaka.
Wróć do ustawień suwaka i zaktualizuj następujące elementy w zakładce Wnętrze :
Overlay
- Użyj nakładki tła: TAK
- Kolor nakładki tła: rgba (27,18,38,0.74)
Cień Pudełka
- Styl Cienia Pudełka: Zobacz Przechwytywanie (1)
- Box Shadow (poziomo i pionowo) Pozycja: -8vw
- Siła rozprzestrzeniania się cienia pudełka: -6,5 vw
- Kolor cienia: #cf1259
Tekst tytułu
Edytuj ustawienia tytułu
- Czcionka tytułu: Montserrat
- Grubość czcionki tytułu: Ultra Bold
- Rozmiar tekstu: 5vw (komputer), 40px (tablet i telefon)
tekst treści
Edytuj ustawienia tekstu opisu w następujący sposób:
- Grubość czcionki ciała: pół pogrubiona
- Rozmiar tekstu ciała: 16px
- Wysokość linii: 1.8 em
Style przycisków
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu przycisku: 16px
- Tło: #cf1259
- Szerokość obramowania: 0px
- Promień graniczny: 0px
- Waga czcionki: pogrubiona
- Styl czcionki: TT
- Dopełnienie (góra i dół): 15px
- Dopełnienie (lewy i prawy): 30px
Wysokość suwaka i szerokość treści
- Maksymalna szerokość treści: 90%
- Minimalna wysokość: 100vh
Nadanie suwakowi minimalnej wysokości 100vh zapewni, że suwak obejmie pełną wysokość okna przeglądarki. To jest klucz do stworzenia pełnoekranowego Slidera.
Suwak zajmie już całą szerokość okna przeglądarki, ponieważ szerokość linii wynosi 100%.
Strzałki suwaka
Na karcie Zaawansowane zaktualizuj rozmiar i położenie strzałek suwaka, dodając następujący niestandardowy kod CSS do obszaru CSS Strzałki ślizgowe :
font-size: 8vw !important;
margin-top: -4vw;
Spowoduje to powiększenie strzałek suwaka na dużych ekranach i zmniejszenie ich do mniejszego rozmiaru na urządzeniach mobilnych.
Odejmij wysokość nagłówka od wysokości suwaka
Jeśli masz nagłówek na stronie, suwak pełnoekranowy w rzeczywistości rozszerzy się nieco poniżej okna przeglądarki.
Dzieje się tak, ponieważ wysokość nagłówka obniża Suwak, który obecnie ma wysokość 100vh (100% wysokości okna/przeglądarki). Aby zapobiec przesunięciu suwaka poniżej okna przeglądarki, możesz dodać funkcję CSS oblicz() aby odjąć wysokość nagłówka od wysokości suwaka.
Aby to zadziałało, musisz znać wysokość nagłówka (komputer stacjonarny i mobilny). Jeśli używasz domyślnego nagłówka Divi, wysokość nagłówka będzie wynosić 80 pikseli. Zatem wysokość suwaka musi wynosić 100vh – 80px.
Aby dodać niestandardową wysokość, otwórz ustawienia suwaka i dodaj następujący niestandardowy CSS do głównego elementu suwaka, a także dla każdego slajdu:
min-height: calc(100vh - 80px)!important;
Ostateczny wynik
Oto wynik końcowy.
Pobierz DIVI teraz !!!
I tak projekt wygląda na tablecie i telefonie.
Wnioski
Kluczowe kroki w celu utworzenia suwaka pełnoekranowego w Divi to skonfigurowanie sekcji i wiersza tak, aby obejmowały całą szerokość przeglądarki, a następnie nadanie suwakowi minimalnej wysokości 100vh.
Jeśli używasz nagłówka, możesz dodać niestandardowy fragment kodu CSS, który odejmie wysokość nagłówka, aby suwak trybu pełnoekranowego nie wyszedł poza dół przeglądarki.
Dzięki tym kluczowym krokom możesz dalej dostosowywać suwak (i slajdy), jak chcesz, korzystając ze wszystkich zaawansowanych funkcji zawartych w Divi Builder.
Użyj go, aby stworzyć piękne i efektowne suwaki, które wypełnią dowolny ekran na dowolnym urządzeniu.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
