Jak zaprojektować sekcję płynnego bohatera w Divi
Opublikowany: 2021-07-26Sekcja bohaterów strony internetowej jest jednym z najlepszych kandydatów do projektowania płynów. W przeciwieństwie do tradycyjnego, responsywnego projektu, który dostosowuje się w różnych punktach przerwania, płynny projekt płynnie skaluje się z widokiem przeglądarki i zachowuje spójność projektu na dowolnym urządzeniu. W końcu sekcja bohatera jest pierwszą rzeczą, jaką użytkownicy widzą na stronie internetowej.
Być może widziałeś projekt płynów zademonstrowany w poprzednich samouczkach dotyczących typografii płynów, modułów płynów i/lub przycisków płynów. W tym samouczku pokażemy, jak stworzyć całą sekcję płynnego bohatera w Divi. Kluczem do stworzenia tego płynnego projektu jest dodanie rozmiaru czcionki fluid root do każdego z używanych modułów, a następnie uwzględnienie jednostki długości em (w stosunku do rozmiaru czcionki głównej treści) w ustawieniach modułu.
Zacznijmy!
zapowiedź
Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.
Zwróć uwagę, jak płynny projekt skaluje się płynnie wraz z szerokością rzutni przeglądarki.
Pobierz układ za DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. 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 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.
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!
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:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
- Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
- Wybierz opcję „Buduj od podstaw”.
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Jak zaprojektować sekcję płynnego bohatera w Divi
Aby zbudować sekcję płynnego bohatera, dodamy rozmiar czcionki fluid root do każdego z trzech modułów. Te moduły utworzą nagłówek, podtytuł i przycisk. Następnie użyjemy jednostki długości em w ustawieniach projektowych modułów, aby upewnić się, że elementy projektu są względem rozmiaru czcionki płynnego korzenia. Następnie ustawimy obraz po lewej stronie strony z pozycją bezwzględną i przesunięciem. Rezultatem będzie płynna sekcja bohatera, która idealnie skaluje się z szerokością widocznego obszaru, dzięki czemu projekt jest spójny na wszystkich urządzeniach.
Ustawienia sekcji
Na początek zaktualizujmy istniejące ustawienia projektowe dla sekcji. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Kolor lewego gradientu tła: #ff2000
- Prawy gradient tła: #121212
- Kierunek gradientu: 45 stopni
- Pozycja startowa: 30%
- Pozycja końcowa: 0%
Na karcie projektu zaktualizuj dopełnienie:
- Padding: 0px na górze, 0px na dole
Utwórz wiersz
Następnie dodaj do sekcji wiersz z jedną kolumną.
Ustawienia wiersza
Otwórz ustawienia wiersza i zaktualizuj następujące elementy na karcie projektu:
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 1700px
- Minimalna wysokość: 100vh (komputer), brak (tablet i telefon)
- Padding: 0px na górze, 0px na dole
Utwórz płynny tekst nagłówka z obramowaniem
Teraz, gdy sekcja i wiersz są gotowe, możemy dodać płynny tekst nagłówka do sekcji bohatera. Zamierzamy również dodać płynne obramowanie do modułu tekstowego dla kreatywnego elementu projektu.
Dodaj moduł tekstowy
Aby utworzyć tekst nagłówka i obramowanie, dodaj do kolumny nowy moduł tekstowy.
Ustawienia tekstu
Na karcie treści zaktualizuj treść treści za pomocą następującego kodu HTML:
<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>
Aby elementy projektu były płynne, najpierw musimy dodać do modułu rozmiar czcionki fluid root za pomocą funkcji CSS Clamp(). Na karcie Zaawansowane wklej następujący fragment kodu CSS:
font-size: clamp(32px, 4.1vw, 70px);
Mając ustawiony rozmiar czcionki płynnego korzenia, jesteśmy gotowi do zaktualizowania ustawień projektu. Ważne jest, aby używać jednostki długości em w całym tekście, ponieważ jednostka długości em jest zależna od głównego rozmiaru czcionki elementu.
Na karcie projekt zaktualizuj następujące ustawienia projektu tekstu nagłówka:
- Typ nagłówka: H1
- Czcionka nagłówka: Montserrat
- Grubość czcionki nagłówka: Ciężka
- Kolor tekstu nagłówka: #ffffff
- Rozmiar tekstu nagłówka: 1 em
- Odstęp między literami nagłówka: 0.1em
- Wysokość linii nagłówka: 1,2 em
Zaktualizuj również dopełnienie modułów w następujący sposób:
- Wypełnienie: 1em (góra, dół, lewo, prawo)
Aby utworzyć projekt granicy płynnej, zaktualizuj następujące elementy:
- Szerokość obramowania: 1em
- Kolor obramowania: #ffffff
- Kolor dolnej krawędzi: przezroczysty
- Lewy kolor obramowania: przezroczysty
Tworzenie obramowania akcentującego
Aby stworzyć obramowanie akcentujące, możemy powielić istniejący moduł tekstowy.
Wyjmij istniejącą zawartość korpusu i zaktualizuj ustawienia projektu w następujący sposób:
- Maksymalna szerokość: 6,5 em
- Wysokość: 3.25em
- Szerokość obramowania: 0.5em
- Kolor obramowania: #ff2000
Pamiętaj, że ten zduplikowany moduł zawiera ten sam rozmiar czcionki fluid root. Możemy więc użyć jednostki długości em, aby dostosować rozmiar i szerokość obramowania. Zapewni to dostosowanie projektu wraz z projektem modułu tekstu nagłówka.
Aby umieścić obramowanie akcentujące, dodaj pozycję bezwzględną z przesunięciem równym szerokości obramowania w module tekstu nagłówka (1em). Na karcie Zaawansowane zaktualizuj następujące opcje pozycji:
- Pozycja: bezwzględna
- Lokalizacja: w prawym górnym rogu
- Przesunięcie w pionie: 1em
- Przesunięcie w poziomie: 1em
Utwórz płynny tekst główny napisów
Pod tekstem nagłówka dodamy płynny tekst treści napisów. Ponieważ ten tekst jest mniejszy, dodamy mniejszy rozmiar czcionki fluid root.
Dodaj nowy moduł tekstowy
Aby utworzyć tekst napisów, dodaj nowy moduł tekstowy poniżej istniejącego modułu tekstowego nagłówka.
Możesz dodać kilka zdań tekstu wypełniającego w następujący sposób:
- Treść ciała: Przedsionek ac diam sit amet quam vehicula mocm sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dodaj rozmiar czcionki płynnej głównej
Następnie musimy dodać nowy płynny rozmiar czcionki, który jest bardziej odpowiedni dla mniejszego tekstu. Na karcie Zaawansowane wklej następujący fragment kodu CSS w elemencie głównym:
font-size: clamp(14px, 1.4vw, 24px);
Ustawienia projektowania tekstu
Na karcie projekt zaktualizuj następujące elementy:
- Grubość czcionki tekstu: pół pogrubiona
- Kolor tekstu: #ffffff
- Tekst Rozmiar tekstu: 1em
- Wysokość linii tekstu: 1,6 em
Następnie zaktualizuj rozmiar i odstępy w następujący sposób:
- Maksymalna szerokość: 19em
- Margines: 2em na dole, auto w lewo, 5em w prawo
Utwórz płynny przycisk
Aby utworzyć przycisk płynu, dodaj nowy moduł przycisku poniżej modułu tekstu napisów.
Następnie zaktualizuj tekst przycisku, aby brzmiał „7-dniowy bezpłatny okres próbny”.
Dodaj rozmiar czcionki płynnej głównej
Następnie musimy dodać nowy płynny rozmiar czcionki, który jest odpowiedni dla przycisku. Na karcie Zaawansowane wklej następujący fragment kodu CSS w elemencie głównym:
font-size: clamp(20px, 2.35vw, 40px);
Ustawienia projektu przycisków
Na karcie projekt zaktualizuj następujące elementy:
- Wyrównanie przycisków: w prawo
- Kolor tekstu przycisku: #ff2000
- Przycisk tła gradientu lewy kolor: przezroczysty
- Prawy kolor gradientu tła przycisku: #ffffff
- Kierunek gradientu: 45 stopni
- Pozycja startowa: 25%
- Pozycja końcowa: 0%
- Szerokość obramowania przycisku: 0px
- Promień obramowania przycisku: 0px
- Czcionka przycisku: Montserrat
- Grubość czcionki przycisku: Ciężka
- Styl czcionki przycisku: kursywa
- Ikona przycisku: strzałka w kształcie trójkąta w prawo (patrz zrzut ekranu)
- Umieszczenie ikony przycisku: w lewo
- Margines: 8em w prawo
- Wypełnienie: 0,2 em na górze, 0,2 em na dole, 1,5 em w lewo, 1 em w prawo
Utwórz obraz dla sekcji bohaterów
Mając całą zawartość sekcji bohatera w odpowiednim rozmiarze strony, jesteśmy gotowi dodać obraz sekcji bohatera po lewej stronie. Aby to zrobić, najpierw dodaj moduł obrazu pod przyciskiem.
Otwórz ustawienia obrazu i prześlij obraz.
Ustawienia projektowania obrazu
Na karcie projekt zaktualizuj następujące ustawienia:
- Wyrównanie obrazu: do lewej (komputer i tablet), do środka (telefon)
- Maksymalna szerokość: 48% (komputer i tablet), 70% (telefon)
- Wyściółka: 4% w lewo
Na koniec nadaj obrazowi pozycję bezwzględną z przesunięciem za pomocą jednostki długości vmin w następujący sposób:
- Pozycja: bezwzględna (komputer i tablet), względna (telefon)
- Lokalizacja: u góry po lewej (komputer i tablet)
- Przesunięcie w pionie 30vmin (komputer i tablet), 0px (telefon)
Ostateczny wynik
Oto wynik końcowy na aktywnej stronie.
Oto jak płynny projekt skaluje się płynnie wraz z szerokością rzutni przeglądarki.
Obsługa przeglądarki
Funkcja CSS clamp() (używana do określenia rozmiaru czcionki w tym samouczku) jest zaskakująco dobrze obsługiwana przez wszystkie główne przeglądarki z wyjątkiem IE. Istnieje dziwny błąd safari, który nie skaluje się dynamicznie podczas dostosowywania okna przeglądarki, ale wyświetla się poprawnie podczas ładowania strony. Aby to naprawić, wszystko, co pozornie musisz zrobić, to nadać każdemu z modułów minimalną wysokość 0vw.
Końcowe przemyślenia
Dodanie płynnego projektu do sekcji bohatera może być wygodnym sposobem na zapewnienie pięknego, spójnego wyglądu strony u góry we wszystkich rozmiarach przeglądarki, bez konieczności aktualizowania projektu w określonych punktach przerwania lub korzystania z zapytań o media.
Nie zapomnij zapoznać się z innymi artykułami na temat projektowania płynów, w tym jak tworzyć płynną typografię, moduły płynów i przyciski płynów.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!