Korzystanie z nowych opcji wysokości i szerokości Divi do tworzenia responsywnych projektów

Chociaż zwykle nie są one pierwszą rzeczą, jaką odwiedzający zauważają w Twojej witrynie, właściwości CSS szerokości i wysokości pomagają utrzymać Twoją witrynę razem i wyglądać niesamowicie. A teraz, dzięki nowym opcjom zmiany rozmiaru Divi, które można przeciągać, możesz dosłownie kontrolować szerokość każdego elementu, maksymalną szerokość, minimalną wysokość, wysokość i maksymalną wysokość w samym kreatorze. Daje to swobodę tworzenia witryn internetowych, które są bardzo responsywne na różnych rozmiarach ekranu.

Wszystko to brzmi świetnie, ale jak to się praktycznie przekłada na piękną stronę internetową? Dokładnie o tym porozmawiamy w tym poście. Zaczniemy od wyjaśnienia różnicy między wszystkimi właściwościami wysokości i szerokości dostępnymi w ustawieniach Divi, a następnie użyjemy ich w różnych scenariuszach, aby nasze projekty stron zachowywały się dokładnie tak, jak chcemy.

Weźmy się za to!

Subskrybuj nasz kanał YouTube

Zrozumienie różnicy między właściwościami

Przed użyciem szerokości i maksymalnej szerokości w naszych codziennych procesach projektowania ważne jest, aby zrozumieć, co robią. Oto wyjaśnienie teoretyczne:

Szerokość — rzeczywista szerokość elementu projektu. Jeśli jest to 100%, jest tak szeroki, jak pozwala na to pojemnik. Szerokość jest zwykle wyrażana w %. Im niższy procent szerokości, tym węższy będzie element projektu.

Maksymalna szerokość — maksymalna szerokość ma moc nad szerokością. Jeśli szerokość modułu jest ustawiona na 100%, będzie on przestrzegał tej wartości, o ile pozostanie poniżej wartości maksymalnej szerokości. Po osiągnięciu maksymalnej szerokości nie przekroczy jej.

Ale jak to się przekłada na responsywny design? Aby pomóc wyjaśnić różnicę, stworzymy wizualne porównanie, włączając Visual Builder na zupełnie nowej stronie. Dodamy sekcję z jednokolumnowym wierszem. Następnie wstaw moduł tekstowy z pewną zawartością, kolorem tła i niestandardowym wypełnieniem.

Zmiana szerokości

Gdy zmienisz szerokość modułu tekstowego na 80%, zobaczysz, że moduł tekstowy zmniejszy się. Pojawia się również możliwość dostosowania modułu w dowolny sposób.

Zmiana maksymalnej szerokości

Gdy zmienisz maksymalną szerokość, przypisana wartość zacznie obowiązywać dopiero od momentu, gdy rzeczywista szerokość przekroczy maksymalną wartość szerokości. Zademonstrujmy to naprawdę szybko:

Nie przekroczono

Przekroczono

Oprócz szerokości i maksymalnej szerokości możesz również znaleźć minimalną wysokość, wysokość i maksymalną wysokość w ustawieniach rozmiaru każdego elementu. Oto, co teoretycznie możesz zrozumieć z tych terminów:

Minimalna wysokość — minimalna wysokość, którą chcesz przypisać do elementu. Jeśli ta wartość jest większa niż wprowadzona wysokość, dominować będzie wartość minimalna.

Wysokość — definiuje rzeczywistą wysokość, którą chcesz przypisać do elementu.

Maksymalna wysokość — ta wartość staje się nową wysokością, gdy wysokość przekroczy wartość przypisaną do wysokości.

Zmiana minimalnej wysokości

Jeśli zmienisz minimalną wysokość elementu, ta wartość stanie się normą. Podczas testowania automatycznie zobaczysz, jak wysokość modułu tekstowego zmienia się w czasie rzeczywistym.

Zmiana wysokości

Jeśli łączysz wysokość minimalną i wysokość, musisz upewnić się, że wysokość jest większa niż wysokość minimalna. Jeśli nie, wysokość zostanie zignorowana. W dwóch poniższych plikach GIF zobaczysz różnicę w czasie rzeczywistym.

Nie przekracza

Przekracza

Zmiana maksymalnej wysokości

Maksymalna wysokość przejmuje, jeśli przekracza wysokość minimalną, ale jest mniejsza niż wysokość. Jeśli, na przykład, przypisałbyś wyższą wartość wysokości minimalnej niż wysokości maksymalnej, wysokość minimalna będzie dominować.

Zmiana maksymalnej szerokości rzędów

Jedną z najlepszych praktyk w projektowaniu stron internetowych jest określenie jednej konkretnej maksymalnej szerokości dla całej witryny. Dzięki temu wszystko wygląda responsywnie na różnych rozmiarach ekranu. Pomaga również projektantom tworzyć dokładne makiety.

Zmiana globalnej maksymalnej szerokości

Możesz, ale nie musisz wiedzieć, że możesz ustawić domyślną maksymalną szerokość dla swojej zawartości w Konfiguratorze motywów, przechodząc do Ustawień ogólnych i przechodząc do Ustawień układu. Utrzymanie stałej maksymalnej szerokości pomaga zwiększyć responsywność.

Zmień maksymalną szerokość dla jednego rzędu w szczególności

Dzięki nowej aktualizacji rozmiaru z możliwością przeciągania masz również możliwość indywidualnego zdefiniowania maksymalnej szerokości rzędów. Jest to świetne rozwiązanie w przypadku wyjątków, w których rozsądniej jest wybrać wyższą maksymalną szerokość.

Nadawanie modułom tej samej wysokości

Kolejna technika, o której należy pamiętać, skupia się na nadaniu podobnym elementom tej samej wysokości. Jest to estetycznie przyjemne dla oka i ułatwia odwiedzającym wyszukiwanie treści. Istnieją dwa popularne sposoby podejścia do tego:

Korzystanie z korektora kolumn

Pierwsza metoda to ta, która jest z Divi od dawna. Jeśli chcesz utworzyć taką samą wysokość dla każdej kolumny w wierszu, możesz włączyć korektor kolumn w ustawieniach rozmiaru wiersza. Jeśli używasz kolorów tła kolumn, szybko zauważysz różnicę.

Przypisywanie wysokości do każdego modułu

Innym sposobem podejścia do tego jest przypisanie predefiniowanej wysokości do dodawanych modułów.

Dopasowywanie treści w module

Po przypisaniu wysokości wszystkim modułom możesz również bawić się wyrównaniem treści. Aby to zrobić, możesz użyć niestandardowego dopełnienia, aby ręcznie określić odstęp w module lub użyć kilku wierszy kodu CSS, aby automatycznie wyrównać zawartość.

display: flex;
flex-wrap: wrap;
align-content: center;

Wybór wysokości lub szerokości elementu projektu i zamiana przepełnienia na przewijanie

Kolejną fajną rzeczą, którą możesz zrobić dzięki nowym opcjom zmiany rozmiaru, które można przeciągać, jest przekształcenie przepełnienia w przewijanie. Pomoże to z łatwością zaoszczędzić miejsce na stronach i dodać dodatkową interakcję. Są do tego dwa kroki; ustawienia wysokości elementu i zmianę przepełnienia w ustawieniach widoczności. Zacznij od zmiany wysokości swojego elementu.

Następnie przejdź do ustawień widoczności swojego elementu i zmień przepełnienie pionowe w scroll.

Tworzenie pełnoekranowej sekcji bohatera dla wszystkich rozmiarów ekranu

Do następnej i ostatniej wskazówki! Chcesz stworzyć pełnoekranową sekcję bohaterów? Otwórz sekcję bohatera na swojej stronie, przejdź do ustawień rozmiaru i zmień wysokość. W tym celu ważne jest, aby użyć jednostki rzutu wysokości, aby mieć pewność, że wszystko pozostaje responsywne na wszystkich rozmiarach ekranu.

• Wysokość: 100vh

Chcesz centralnie wyrównać zawartość w swojej pełnoekranowej sekcji bohaterów? Dodaj również następujące niestandardowe wiersze kodu CSS do głównego elementu sekcji:

display: flex;
flex-wrap: wrap;
align-content: center;

Końcowe przemyślenia

W tym poście omówiliśmy nowe opcje szerokości i wysokości, które są dostarczane z aktualizacją rozmiaru przeciągania Divi. Pokazaliśmy Ci, jak działają i jak możesz ich używać do tworzenia responsywnych projektów stron dla każdego rodzaju witryny, którą tworzysz. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.