Jak zaprojektować responsywny pięciokolumnowy układ „Prezentacja” za pomocą Divi

Zaprojektowanie pięciokolumnowego układu z wystarczającą ilością miejsca na treść może być wyzwaniem. Nie wspominając o większym wyzwaniu, jakim jest upewnienie się, że skaluje się ładnie we wszystkich rozmiarach przeglądarek. W tym samouczku pokażę, jak zmaksymalizować przestrzeń potrzebną do zmieszczenia treści w pięciokolumnowym układzie bez uszczerbku dla projektu na mniejszych ekranach (takich jak tablet i smartfon). Ten projekt jest idealny do prezentacji produktów, usług i projektów. Wrzucę nawet kilka dodatkowych funkcji projektowych, aby uzyskać trochę inspiracji.

Zacznijmy.

zapowiedź

Zastosowane techniki responsywne

Użyj niestandardowej szerokości wiersza i szerokości rynny

Kluczem do stworzenia responsywnego układu pięciokolumnowego jest zapewnienie kolumnom wystarczającej ilości miejsca do przechowywania treści. W projekcie tego samouczka zamierzam nadać wierszowi zawierającemu pięć kolumn niestandardową szerokość do 89%. Następnie stworzę jeszcze więcej miejsca, ustawiając szerokość rynny na 1, co w zasadzie oznacza usunięcie marginesu między kolumnami. W przypadku tego projektu ważne jest, aby użyć niestandardowej szerokości 89% zamiast ustawiać wiersz na pełną szerokość, ponieważ możesz ustawić szerokość rynny na 1 i nadal zachować margines z każdej strony wiersza. Zobaczysz, o co mi chodzi.

Użyj jednostek długości vw dla odstępów i tekstu nagłówka

Innym kluczem do zachowania responsywności w pięciokolumnowym układzie jest rozmieszczenie treści za pomocą jednostek długości vw. I ważne jest, aby być konsekwentnym w używaniu vw we wszystkich odstępach. Zapewni to spójne skalowanie we wszystkich rozmiarach przeglądarki bez przerywania lub przeskakiwania elementów podczas dostosowywania szerokości okna. Użycie jednostki długości vw dla tekstu nagłówka będzie również kluczowe, aby tekst nie przebił się do nowej linii w mniejszych oknach przeglądarki. Jednak w przypadku tekstu nagłówka będziemy musieli przypisać jednostkę px do tabletu i smartfona, aby uwzględnić zbyt duże zmniejszenie tekstu.

Część 1: Pierwsze kroki

Wszystko, czego potrzebujesz do tego samouczka, to motyw Divi. Będziemy używać Visual Buildera wraz z układem strony głównej firmy architektonicznej.

Aby rozpocząć, utwórz nową stronę, nadaj jej tytuł i wdróż program Visual Builder. Wybierz opcję „Wybierz gotowy układ”. W wyskakującym okienku ładowania z biblioteki wybierz pakiet układu Projekt wnętrz, a następnie załaduj układ strony głównej firmy architektonicznej na swoją stronę.

Część 2: Tworzenie sekcji tytułowej

Na początek skopiuj drugą sekcję zawierającą trzy notki.

Do tego projektu potrzebne są dwie sekcje, ponieważ górna sekcja będzie służyć dwóm celom. Po pierwsze, będzie to tytuł naszej sekcji poniżej. A po drugie, pozwoli nam na dodanie unikalnego projektu za pomocą przegrody sekcyjnej.

Kontynuujmy.

W oryginalnej sekcji (nie w duplikacie) usuń trzy notki i zmień strukturę kolumn wiersza na jedną kolumnę.

Następnie przewiń w dół układu do ostatniej sekcji i skopiuj moduł tekstowy w lewej kolumnie.

Następnie wklej go w jednym wierszu kolumny, który właśnie utworzyłeś i usuń całą zawartość tekstową pod nagłówkiem h2, tak aby pozostało tylko „Zbudujmy coś”.

Część 3: Dostosowywanie plamek do układu pięciu kolumn

Teraz nadszedł czas, aby odwiedzić sekcję, którą zduplikowaliśmy, z naszymi oryginalnymi trzema notatkami w rzędzie z trzema kolumnami. Najpierw zmieńmy strukturę wierszy na układ pięciokolumnowy.

Otwórz ustawienia notatek modułu notatek w pierwszej kolumnie, a następnie usuń obraz używany jako ikona.

Następnie zduplikuj moduł notki w pierwszej kolumnie. W tym projekcie użyjemy dwóch notatek na kolumnę, ponieważ do umieszczenia obrazu tła potrzebujemy notki na górze.

Otwórz ustawienia notki u góry w pierwszej kolumnie i usuń tekst główny w polu treści.

Dodaj obraz tła i gradient do górnego modułu Blurb

Następnie nadaj tej samej notatce obraz tła i dodaj gradient, aby nałożyć obraz w następujący sposób:

Dodaj obraz tła
Kolor lewego gradientu tła: rgba (255,255,255,0)
Prawy gradient tła: rgba (18,18,18,0.65)
Pozycja startowa: 50%
Umieść gradient nad obrazem tła: TAK

Gradient jest niezbędny, aby tekst tytułu stał się bardziej czytelny przy jaśniejszych obrazach tła.

Użyj jednostek VW dla tekstu tytułu i odstępów

Następnie zaktualizuj ustawienia karty projektu w następujący sposób:

Tekst tytułu Rozmiar: 2.7vw (komputer), 46px (tablet), 36px (smartfon)
Odstępy między literami tytułu: -3px
Margines niestandardowy: 1,5vw lewy, 1,5vw prawy
Niestandardowe wypełnienie: 35vw góra, 2vw dół, 1vw lewo, 1vw prawo

Zapisz ustawienia.

Niestandardowa górna wyściółka 35vw jest tym, co tworzy unikalny, długi, pionowy obraz. Tekst tytułu ma wartość 2,7vw, aby zachować spójność skalowania tekstu w różnych szerokościach przeglądarki. Reszta odstępów będzie miała sens, gdy później dodamy więcej odstępów do naszego wiersza.

Dostosowywanie dolnej notki

Następnie otwórz ustawienia drugiego modułu notki poniżej w pierwszej kolumnie i usuń tekst tytułu. Następnie zaktualizuj następujące elementy:

Wyrównanie tekstu podstawowego: do lewej
Kolor tekstu ciała: #666666
Niestandardowe wypełnienie: 2vw góra, 2vw dół, 2vw lewo, 2vw prawo

Teraz, gdy mamy nasze dwie notki zaprojektowane w naszej pierwszej kolumnie. Skopiuj oba i wklej je w każdej z pozostałych kolumn. Najpierw musisz usunąć oryginalne moduły notatek w kolumnach 2 i 3. Teraz twój projekt powinien wyglądać tak.

Część 4: Dostosowywanie ustawień sekcji

Teraz zaktualizujmy nasze ustawienia sekcji, aby mieć białe tło i cień pola na dole, który stworzy miejsce na nakładanie się naszego wiersza.

Kolor tła: #ffffff
Niestandardowe wypełnienie: domyślna góra, domyślna 5vw, domyślna lewa, domyślna prawa
Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: -200px
Siła rozmycia cieni w pudełku: 0px
Kolor cienia: #121212

Część 5: Dostosowywanie ustawień wierszy

Wróćmy teraz do naszego wiersza i zaktualizujmy ustawienia w następujący sposób:

Obraz tła: #ffffff
Wyrównanie wierszy: Środek
Szerokość niestandardowa: 89%
Szerokość rynny: 1
Margines niestandardowy: -10vw
Niestandardowe wypełnienie: 3vw góra, 3vw dół, 1,5vw lewo, 1,5vw prawo
Cień pudełka: patrz zrzut ekranu
Siła rozmycia cieni w pudełku: 80px

Jak wspomniano wcześniej w samouczku, niestandardowa szerokość i szerokość rynny są niezbędne do tworzenia przestrzeni treści potrzebnej do układu pięciokolumnowego.

W tym momencie podstawowa struktura projektu jest zakończona. Oto jak wygląda projekt do tej pory.

Część 6: Dodawanie ostatnich szlifów

Teraz możemy dodać kilka dodatkowych poprawek projektowych, aby to zakończyć.

Oszałamiające Blurbs

Najpierw zmieńmy wysokość obrazów tła blurb, zmniejszając dopełnienie kilku. Otwórz ustawienia górnego modułu notatek w drugim rzędzie i zaktualizuj dopełnienie w następujący sposób:

Niestandardowa wyściółka: 28vw Top

A dla górnej notki w trzeciej kolumnie, zmień górne dopełnienie na 30vw.

Dodaj dzielnik sekcji, aby dodać teksturę do 5-kolumnowego rzędu

Jedną z fajnych technik projektowania jest dodanie przegrody górnej sekcji do sekcji bezpośrednio nad sekcją za pomocą naszych pięciu kolumn. Tło dzielnika będzie wyświetlane na tle rzędu pięciu kolumn, nawet jeśli zachodzi na powyższą sekcję. Aby to zrobić, przejdź do sekcji zawierającej tytuł „Zbudujmy coś” i nadaj jej podział w następujący sposób:

Ponieważ kolor przegrody jest taki sam jak tło sekcji z kryciem 15%, przegroda nie jest widoczna w górnej sekcji, ale staje się widoczna w sekcji poniżej oraz w nakładającym się rzędzie. A ponieważ nadaliśmy rzędowi cień w kształcie pudełka, tworzy to wyjątkowy projekt.

Zaktualizowałem kilka obrazów tła, aby uzyskać lepsze wyobrażenie o tym, jak projekt będzie wyglądał z różnymi obrazami.

Oto ostateczny projekt.

Jedną z największych zalet układu pięciokolumnowego jest to, że na tablecie otrzymujesz ładny układ dwukolumnowy.

A oto jak to wygląda na smartfonie.

Końcowe przemyślenia

Uwielbiam odkrywać moc Divi w tworzeniu responsywnych układów. Wyzwaniem związanym z pięciokolumnowym układem jest to, że tak naprawdę nie ma zbyt wiele miejsca na zawartość, chyba że użyjesz odpowiednich technik, aby odpowiednio rozmieścić zawartość, aby ładnie skalować się we wszystkich rozmiarach przeglądarki. Mam nadzieję, że ten projekt był pomocny, aby wprowadzić pewne możliwości wykorzystania układu pięciokolumnowego w kolejnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!