Czy chciałbyś stworzyć sekcję Bohaterów w Divi który jest płynny zamiast tradycyjnego responsywnego?
Sekcja Bohatera Witryna internetowa jest jednym z najlepszych kandydatów do projektowania płynów. W przeciwieństwie do tradycyjnego, responsywnego projektu, który dostosowuje się do różnych punktów przerwania, płynny projekt płynnie dostosowuje się do widoku przeglądarki i zachowuje spójność projektu na każdym urządzeniu. W końcu sekcja Hero jest pierwszą rzeczą, którą użytkownicy widzą na Witryna internetowa.
W tym samouczku pokażemy Ci, jak stworzyć całą sekcję płynnego bohatera w Divi. Kluczem do stworzenia tego płynnego projektu jest dodanie rozmiaru czcionki płynnego korzenia do każdego z używanych modułów, a następnie uwzględnienie jednostki długości em (kto jest w stosunku do głównego rozmiaru czcionki w treści ) w ustawieniach modułu.
Zacznijmy!
badanie
Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.
Zwróć uwagę, jak płynny projekt płynnie dostosowuje się do szerokości okna przeglądarki.
Utwórz nową stronę za pomocą Divi Builder
Aby rozpocząć, musisz wykonać następujące czynności:
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Zastosowanie Divi Budowniczy
Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Czytaj także: Divi: Jak utworzyć sekcję Hero za pomocą modułu nagłówka o pełnej szerokości
Jak zaprojektować sekcję płynnego bohatera w Divi
Ustawienia sekcji
Na początek zaktualizujmy istniejące ustawienia projektowe dla sekcji. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Gradient zatrzymuje się:
- 30%: #ff2000
- 30%: #121212
- Kierunek gradientu: 45 stopni
Pod zakładką Wnętrze, zaktualizuj dopełnienie:
- Padding: 0px na górze, 0px na dole
Utwórz linię
Następnie dodaj do sekcji wiersz z jedną kolumną.
Ustawienia linii
Otwórz ustawienia linii i zaktualizuj poniższe w zakładce Wnętrze :
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 1px
- Minimalna wysokość: 100 vh (komputer stacjonarny), brak (tablet i telefon)
- Wypełnienie: 0px (góra i dół)
Utwórz płynny tekst nagłówka z obramowaniem
Teraz, gdy sekcja i linia są gotowe, możemy dodać płynny tekst nagłówka do sekcji Hero. Dodamy również płynne obramowanie do modułu Tekst dla kreatywnego elementu projektu.
Dodaj moduł tekstowy
Aby utworzyć tekst tytułu i obramowanie, dodaj do kolumny nowy moduł Tekst.
Ustawienia tekstu
Pod zakładką Treść, Zaktualizuj to treść treści za pomocą następującego kodu HTML:
<h1>Fluid Fullscreen Page Design<spanstyle="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().
Pod zakładką Zaawansowane, wklej następujący fragment kodu CSS:
font-size: clamp(32px, 4.1vw, 70px);
Pod zakładką Wnętrze, zaktualizuj następujące ustawienia projektu tekstu nagłówka:
- Tekst nagłówka:
- Typ: H1
- Czcionka: Montserrat
- Grubość czcionki: Ciężka
- Kolor: #ffffff
- Rozmiar: 1em
- Odstępy między literami: 0,1em
- Wysokość linii: 1,2 em
Zaktualizuj również dopełnienie modów w następujący sposób:
- Wyściółka: 1. (góra, dół, lewo i prawo)
Aby utworzyć projekt granicy płynnej, zaktualizuj następujące elementy:
- Szerokość obramowania: 1em
- Kolor obramowania: #ffffff
- Kolor dolnej granicy: przezroczysty
- Lewy kolor obramowania: przezroczysty
Tworzenie obramowania akcentującego
Aby utworzyć obramowanie akcentu, możemy powielić istniejący moduł Tekst.
Usuń to treść istniejącej bryły i zaktualizować parametry projektowe w następujący sposób:
- Maksymalna szerokość: 6,5 cm
- Wysokość: 3,25 em
- Szerokość obramowania: 0,5em
- Kolor obramowania: #ff2000
Aby umieścić obramowanie akcentujące, dodaj pozycję bezwzględną z przesunięciem równym szerokości obramowania w module Tekst nagłówka (1em).
Pod zakładką 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 tekst napisów
Pod tekstem tytułu dodamy płynny tekst napisów. Ponieważ ten tekst jest mniejszy, dodamy mniejszy rozmiar czcionki płynu głównego.
Dodaj nowy moduł tekstowy
Aby utworzyć tekst podpisu, dodaj nowy moduł Tekst poniżej istniejącego modułu Tekst nagłówka.
Możesz dodać kilka zdań wypełniających tekst w następujący sposób:
- Treść: Przedsionek ac diam sit amet quam vehicula sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dodaj płynny główny rozmiar czcionki
Następnie musimy dodać nowy płynny rozmiar czcionki, który działa lepiej w przypadku małego tekstu. Na karcie Zaawansowane wklej następujący fragment kodu CSS pod głównym elementem:
font-size: clamp(14px, 1.4vw, 24px);
Ustawienia projektowania tekstu
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Tekst:
- Grubość czcionki: pół pogrubiona
- Kolor: #ffffff
- Rozmiar: 1em
- Wysokość: 1,6 em
Następnie zaktualizuj rozmiar i odstępy w następujący sposób:
- Maksymalna szerokość: 19 cm
- Margines: 2 em (dolny), automatyczny (lewy), 5 em (prawy)
Utwórz płynny przycisk
Aby utworzyć przycisk płynny, dodaj nowy moduł przycisku poniżej modułu Tekst napisów.
Następnie zaktualizuj tekst przycisku, aby brzmiał „7 Day Free Tral”.
Dodaj płynny główny rozmiar czcionki
Następnie musimy dodać nowy płynny rozmiar czcionki odpowiedni dla przycisku.
Pod zakładką Zaawansowane, wklej następujący fragment kodu CSS pod głównym elementem:
font-size: clamp(20px, 2.35vw, 40px);
Ustawienia projektu przycisku
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Wyrównanie przycisków: w prawo
- Użyj niestandardowego rozmiaru przycisku: TAK
- Kolor tekstu przycisku: #ff2000
- Gradient zatrzymuje się:
- Kolor 1 25%: przezroczysty
- Kolor 2 25%: #ffffff
- Kierunek gradientu: 45 stopni
- Przycisk:
- Szerokość obramowania: 0 pikseli
- Promień obramowania: 0 pikseli
- Czcionka: Montserrat
- Waga czcionki: gruba
- Styl: kursywa
- Pokaż ikonę przycisku: TAK
- Ikona: strzałka w kształcie trójkąta po prawej stronie (patrz zrzut ekranu)
- Umieszczenie ikony: w prawo
- Margines: 8em (prawy)
- Wypełnienie: 0,2 em (góra i dół), 1,5 em (lewo), 1 em (prawo)
Utwórz obraz dla sekcji Bohater
Ze wszystkimi treść sekcji Bohater do odpowiedniego rozmiaru strony, jesteśmy gotowi, aby dodać obraz sekcji Bohater po lewej stronie. Aby to zrobić, najpierw dodaj moduł Obraz pod przyciskiem.
Otwórz ustawienia obrazu i prześlij obraz.
Ustawienia projektu obrazu
Pod zakładką Wnętrze, zaktualizuj następujące ustawienia:
- Wyrównanie obrazu: lewy (komputer stacjonarny i tablet), środek (telefon)
- Maksymalna szerokość: 48% (komputer stacjonarny i tablet), 70% (telefon)
- Wyściółka: 4% (po lewej)
Na koniec nadaj obrazowi pozycję bezwzględną z przesunięciem przy użyciu 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 stacjonarny i tablet), 0px (telefon)
Ostateczny wynik
Oto wynik końcowy na aktywnej stronie.
Zobacz też: Divi: Jak używać masek i wzorów tła w sekcji bohaterów
W ten sposób płynny projekt płynnie dostosowuje się do szerokości okna przeglądarki.
Pobierz DIVI teraz !!!
Wnioski
Dodanie płynnego projektu do sekcji Hero może być wygodnym sposobem na zapewnienie spójnej górnej części strony we wszystkich rozmiarach przeglądarki, bez konieczności aktualizowania projektu w określonych punktach lub korzystania z zapytań o media.
Mam nadzieję, że ta technika doda kolejną przydatną umiejętność projektowania do przyszłych projektów.
Mamy również 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 swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat 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.
...
