Jak stworzyć responsywny moduł Divi Fluid

Aby jeszcze bardziej uprościć proces wdrażania spójnego responsywnego projektu dla modułu Divi, możemy zastosować praktyki płynnego projektowania stron internetowych. W przeciwieństwie do bardziej tradycyjnych metod projektowania responsywnego, projektowanie stron internetowych Fluid nie przerywa się ani nie przeskakuje nagle do innego rozmiaru/stylu w różnych punktach przerwania. Zawiera responsywne jednostki długości zależne od szerokości rzutni, dzięki czemu projekt dostosowuje się (lub skaluje) płynnie, zachowując spójność projektu na wszystkich urządzeniach.

W tym samouczku pokażemy, jak stworzyć płynny moduł Divi. Korzystając z podobnych praktyk projektowania płynów do tworzenia płynnej typografii i/lub płynnych przycisków, stworzymy płynny moduł Divi, który będzie się bezproblemowo skalować z widokiem przeglądarki. Jak się dowiemy, tajną kombinacją jest dodanie do modułu głównego rozmiaru czcionki z jednostką długości względnej (lub płynnej), a następnie włączenie jednostki długości em (która jest względna do rozmiaru czcionki w treści głównej) w całym module ustawienia w razie potrzeby.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

A oto kod pen, który demonstruje funkcjonalność tego modułu płynów.

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 pliki

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.

POBIERANIE

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:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Jak stworzyć responsywny moduł Divi Fluid

Rząd

Aby rozpocząć, utwórz nowy jednokolumnowy wiersz w domyślnej zwykłej sekcji.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość: auto
• Maksymalna szerokość: 100%
• Wyściółka: góra 5vw, dół 5vw

Projektowanie modułu płynnego wezwania do działania

Chociaż te same techniki projektowania płynów można dodać do niemal każdego modułu Divi, w tym samouczku przejdziemy do jednego z modułów Divi z wezwaniem do działania.

Dodaj nowe wezwanie do modułu akcji w kolumnie/wierszu.

Ustawienia zawartości

W ustawieniach treści dodaj adres URL fałszywego linku przycisku i zaktualizuj kolor tła w następujący sposób:

• URL linku przycisku: #
• Kolor tła: #5e6472

Dodawanie rozmiaru czcionki Fluid Root do modułu

Projektując moduł fluid, musimy dodać do modułu rozmiar czcionki fluid root. Po dodaniu do modułu, ten główny rozmiar czcionki zostanie dynamicznie włączony w pozostałe ustawienia naszego projektu modułu przy użyciu jednostki długości em.

Aby dodać rozmiar czcionki fluid root do modułu, przejdź do zakładki zaawansowane i dodaj następujący niestandardowy kod CSS do elementu głównego:

font-size: clamp(16px, 2vw, 24px);

Dla tego rozmiaru czcionki używamy funkcji CSS Clamp(), aby ustawić minimalny rozmiar czcionki, płynny rozmiar czcionki (w razie potrzeby) i maksymalny rozmiar czcionki.

Zastępowanie dowolnych elementów z domyślnymi odstępami za pomocą wartości jednostek długości em

Chociaż nie jest to absolutnie konieczne, aby uzyskać prawdziwy płynny projekt modułu, musimy nadpisać wszelkie domyślne (za kulisami) odstępy, których obecnie używa moduł, wartością jednostki długości em dla tej właściwości. Możesz je zidentyfikować, sprawdzając swój element za pomocą narzędzi programistycznych przeglądarek. W tym przypadku moduł wezwania do działania ma dolne wypełnienie zarówno w opisie promocji, jak i elemencie tytułu promocji. Ponieważ dolna właściwość dopełnienia używa jednostki długości w pikselach (px), musimy zastąpić każdą jednostkę długością em, która będzie zawierała rozmiar czcionki głównej treści, który właśnie dodaliśmy do głównego elementu.

Aktualizacja projektu za pomocą jednostek długości em

Teraz, gdy nasz rozmiar czcionki fluid root dla modułu jest już na miejscu, wszystko, co musimy zrobić, to zaktualizować projekt modułu za pomocą jednostek długości em. Ponieważ jednostka długości em jest zależna od głównego rozmiaru czcionki, każdy projekt używający jednostki długości em odziedziczy płynność rozmiaru czcionki i będzie płynnie skalowany wraz z rozmiarem czcionki w razie potrzeby.

Tekst główny

Niestandardowy główny rozmiar czcionki, który dodaliśmy wcześniej, jest celowo tworzony z myślą o tekście głównym. Dlatego możemy przypisać tekstowi głównemu wartość 1em, która dziedziczy dokładną wartość głównego rozmiaru czcionki. Możemy również dodać wysokość linii ciała. Aby to zrobić, zaktualizuj następujące elementy:

• Rozmiar tekstu ciała: 1 em
• Wysokość linii ciała: 1,8 em

Tekst tytułu

Dla tytułowego elementu tekstowego modułu możemy nadać mu większy rozmiar za pomocą jednostki długości em. Zaktualizuj następujące elementy:

• Rozmiar tekstu tytułu: 1.7em
• Wysokość wiersza tytułu: 1,3 em

Aby zorientować się, jaki będzie rzeczywisty rozmiar tekstu tytułu, po prostu mnożymy wartość długości em przez wartość czcionki głównej. Pamiętaj, że główny rozmiar czcionki używa clamp() do ustalenia minimalnego (16px), płynnego (2vw) i maksymalnego (24px) rozmiaru czcionki. W związku z tym minimalny rozmiar tekstu tytułu będzie wynosił 1,7 razy 16 pikseli, czyli blisko 27,2 pikseli. Rozmiar czcionki płynnej wyniesie 1,7 razy 2vw (2% szerokości widocznego obszaru). A maksymalny rozmiar czcionki to 1,7 razy 24 piksele, czyli blisko 69,36 piksela.

Projekt przycisku

Trzecim elementem modułu jest przycisk. Możemy zaktualizować ustawienia projektu przycisku za pomocą wartości jednostek długości em, aby uwzględnić również projekt płynu.
Zaktualizuj następujące ustawienia przycisków:

• Rozmiar tekstu przycisku: 1,3 em
• Szerokość obramowania przycisku: 0,12 em
• Promień obramowania przycisku: 1,5 em
• Odstępy między literami przycisków: 0.1 em
• Wypełnienie przycisków: 0.1 em na górze, 0.1 em na dole, 2 em w lewo, 2 em w prawo

Rozmiar i odstępy

Aby upewnić się, że moduł ma wielkość płynu i odstępy płynów, musimy również użyć jednostek długości em dla tych wartości.

Zaktualizuj następujące ustawienia rozmiaru i odstępów:

• Maksymalna szerokość: 40em
• Minimalna wysokość: 0vw
• Margines: 0,5 em góra, 0,5 em dół, auto w lewo, auto w prawo
• Wypełnienie: 2,5 em góra, 2,5 em dół, 2 em po lewej, 2 em w prawo

Wynik

Zobaczmy teraz, jak działa nasz moduł fluid podczas dostosowywania szerokości przeglądarki na aktywnej stronie.

Dodawanie wielu modułów płynu w jednym rzędzie za pomocą siatki CSS

Aby dodać wiele sąsiednich modułów płynów do rzędu, musimy upewnić się, że nasz projekt modułu płynów nie jest ograniczony ani zatrzymywany przez żadną szerokość kontenera nadrzędnego. Innymi słowy, chcemy, aby kontener nadrzędny naszych modułów (kolumna) był ustawiony na auto, aby skalował się z rozmiarem modułu. Możemy to zrobić za pomocą CSS Grid na poziomie kolumny, aby ustawić każdy z modułów w siatce, przy czym każda kolumna ma automatyczną szerokość.

Dostosuj rozmiar i odstępy modułu

Zanim utworzymy siatkę CSS dla modułów, musimy dostosować maksymalną szerokość i margines dla naszego modułu do rozmiaru bardziej pasującego do układu dwukolumnowego z dwoma modułami.

Otwórz ustawienia modułu i zaktualizuj następujące elementy:

• Wyrównanie tekstu: do lewej
• Maksymalna szerokość: 24em
• Margines: 0.5em w lewo, 0.5em w prawo

Powiel moduł

Teraz zduplikuj moduł, aby utworzyć inny w tej samej kolumnie.

Dodaj siatkę CSS do kolumny

Teraz możemy dodać niestandardowy CSS do kolumny, aby utworzyć siatkę CSS dla modułów.

Na karcie Zaawansowane dodaj następujący kod CSS do głównego elementu w widoku na komputery:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Następnie dodaj następujący kod CSS do głównego elementu w widoku telefonu:

display:grid;
grid-template-columns: auto;
justify-content:center;

Spowoduje to ustawienie dwóch modułów w siatce dwukolumnowej (każdy ma automatyczną szerokość) na pulpicie. Następnie na telefonie moduły powrócą do siatki z jedną kolumną (automatyczna szerokość).

Wynik

Teraz sprawdź wynik.

Ostateczne rezultaty

Gdy moduły płynów są gotowe, możesz zaktualizować style modułów za pomocą wbudowanych ustawień projektu, aby nadać mu niestandardowe czcionki, kolory itp.

Oto efekt końcowy przy użyciu innej czcionki, koloru czcionki, koloru przycisku i koloru tła.

Końcowe przemyślenia

Jak widzieliśmy w tym samouczku, włączenie płynnego projektu do modułu Divi może być wygodnym sposobem na zapewnienie, że moduł wygląda pięknie i spójnie we wszystkich rozmiarach przeglądarki, bez kłopotów z aktualizacją projektu w określonych punktach przerwania.

Nie zapomnij zapoznać się z naszymi innymi artykułami na temat projektowania płynów, w tym z naszym przewodnikiem po tworzeniu płynnej typografii i płynnych przycisków Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!