Wszystko, co musisz wiedzieć o konfigurowalnych punktach przerwania Divi 5

Przygotuj się na drastyczną poprawę sposobu budowania stron internetowych. Divi 5 ma ekscytującą nową funkcję, konfigurowalne punkty przerwania, co daje niesamowitą kontrolę nad reakcją Twojej witryny. Dzięki nowym konfigurowalnym punktom przerwania Divi 5 możesz stworzyć płynne wrażenia na wszystkich urządzeniach. Niezależnie od tego, czy projektujesz masywny wyświetlacz stacjonarny, czy najmniejszy ekran mobilny, Divi 5 pomaga zapewnić, że Twoja witryna wygląda na piksel za każdym razem.

W tym poście omówimy wszystko, co musisz wiedzieć o tej nowej funkcji i pokażemy, jak z niej korzystać!

Sprawdź poniższy film, aby zobaczyć nową funkcję w akcji.

Pobierz Divi 5 z konfigurowalnymi punktami przerwania

Dzięki konfigurowalnym punktom przerwania możesz teraz dostosować reakcję swojej witryny, aby lepiej pasować do różnych rozmiarów ekranu. Niezależnie od tego, czy projektujesz ultra całe komputery stacjonarne, czy szerokie ekrany mobilne, Divi 5 umieszcza kontrolę w rękach.

Czy mogę już użyć Divi 5 na mojej stronie internetowej?

Możesz użyć Divi 5 na swojej stronie internetowej, ale jej dostępność zależy od konkretnego przypadku użycia. Divi 5 znajduje się obecnie w fazie publicznej alfa, co oznacza, że ​​wciąż jest aktywnie rozwijany i udoskonalany. Chociaż nie jest to jeszcze zalecane we wszystkich środowiskach produkcyjnych, istnieją określone scenariusze, w których możesz zacząć używać go bez problemów.

Użyj Divi 5 w lokalnych i inscenizacji

Divi 5 jest obecnie dostępny dla środowisk lokalnych i inscenizacji, umożliwiając użytkownikom bezpieczne testowanie swoich nowych funkcji bez wpływu na ich witryny na żywo. Ponieważ Divi 5 jest nadal w fazie publicznej alfa, takie podejście zapewnia, że ​​użytkownicy mogą eksperymentować z ulepszeniami Divi 5, zgłaszać błędy i zapewniać informacje zwrotne przy jednoczesnym zachowaniu stabilności swoich witryn produkcyjnych.

Możesz bezpiecznie użyć Divi 5 na nowych stronach produkcyjnych

Divi 5 jest stabilny i gotowy do uruchomienia zupełnie nowych stron internetowych. Jeśli zaczynasz od zera, możesz w pełni skorzystać z jego szybkiej wydajności, modułowej struktury i przyszłościowej technologii, nie martwiąc się o problemy z kompatybilnością wsteczną. Jednak dokładna faza testowa jest niezbędna dla istniejących miejsc, które opierają się na rozległych integracji stron trzecich przed migracją. W tym momencie nadal nie zalecamy przekształcenia istniejących stron internetowych na Divi 5.

Zrozumienie konfigurowalnych punktów przerwania Divi

Punkty przerwania są podstawowym aspektem responsywnego projektowania. Działają jako progi, w których treść Twojej witryny reorganizuje się, aby zapewnić optymalne wrażenia użytkownika, niezależnie od tego, czy ktoś przegląda smartfon, tablet lub pulpit.

Punkty przerwania Divi 5 zostały znacznie ulepszone, oferując większą elastyczność i kontrolę niż poprzednie wersje Divi. Dostosowywanie do siedmiu punktów przerwania pozwala dostosować reakcję witryny, aby pomieścić szerszą gamę urządzeń i rozmiarów ekranu.

Co to jest punkt przerwania?

Punkt przerwania to specyficzna szerokość ekranu, w której projekt Twojej witryny dostosowuje się do optymalnego przeglądania na różnych urządzeniach. Punkty przerwania pomagają zapewnić, że treść pozostanie czytelna, atrakcyjna wizualnie i łatwa w nawigacji, niezależnie od wielkości ekranu.

Responsywne strony internetowe są zaprojektowane przy użyciu zapytań CSS Media, które pozwalają zastosować różne style, gdy ekran osiągnie określoną szerokość. Gdy rozmiar ekranu odwiedzającego przecina zdefiniowany punkt przerwania, strona internetowa automatycznie dostosowuje układ, czcionki, odstępy lub inne elementy projektowe, aby utrzymać użyteczność.

Wraz z wprowadzeniem większej liczby punktów przerwania w Divi 5 możesz ograniczyć potrzebę, aby zapytania o media CSS zdefiniować punkty przerwania dla innych urządzeń.

Ile punktów przerwania powinienem użyć?

Liczba punktów przerwania zależy od użycia urządzenia odbiorców. Użytkownicy uzyskują dostęp do stron internetowych na różnych rozmiarach, od małych smartfonów po ultra całe ekrany stacjonarne. Tradycyjnie projektanci stron internetowych używali trzech standardowych punktów przerwania - komputera stacjonarnego, tabletu i mobilnego - ale Divi 5 rozszerza tę funkcję, umożliwiając do 7 konfigurowalnych punktów przerwania dla większej elastyczności.

Czy włączenie większej liczby punktów przerwania spowolni moją witrynę?

Nie, włączenie większej liczby punktów przerwania w Divi 5 nie spowolni twoich stron internetowych. W przeciwieństwie do starszych metod obsługi responsywnego projektowania, nowe ramy Divi 5 są zoptymalizowane pod kątem wydajności, zapewniając, że dodatkowe punkty przerwania nie dodają niepotrzebnego obciążenia do Twojej witryny.

Czy punkty przerwania są włączone na poziomie witryny lub strony?

Punkty przerwania w Divi 5 są włączone i stosowane na poziomie strony internetowej, a nie na stronie. Po włączeniu i dostosowaniu punktów przerwania wpłyną one na całą stronę internetową, zapewniając spójny, responsywny projekt na wszystkich stronach. Wszelkie zmiany, które dokonasz w punktach przerwania, powszechnie dostosują sposób, w jaki witryna reaguje na różne rozmiary ekranu, a nie ograniczanie się do poszczególnych stron.

Jak konfigurowalne punkty przerwania działają w Divi

Bardzo elastyczny i intuicyjny system Divi 5 jest idealny do zarządzania punktami przerwania, co daje większą kontrolę nad responsywnym projektem witryny. W przeciwieństwie do poprzednich wersji, Divi 5 pozwala dostosowywać do 7 punktów przerwania, zapewniając idealne miejsce na każdym urządzeniu. Ten system został zaprojektowany tak, aby był przyjazny dla użytkownika, jednocześnie oferując zaawansowane opcje dla tych, którzy ich potrzebują.

Gdzie znaleźć punkty przerwania

W Divi 5 punkty przerwania są zintegrowane z ustawieniami strony, dzięki czemu są łatwe do zlokalizowania i dostosowywania. Możesz uzyskać do nich dostęp bezpośrednio w ramach budowniczego wizualnego, zapewniając usprawniony przepływ pracy.

Jak włączyć punkty przerwania

Otwórz stronę, którą chcesz edytować i aktywować Builder Visual, klikając Edytuj z Divi .

Kliknij menu Elipsis (trzy kropki) znajdujące się na głównym pasku zadań nad budowniczym.

Wewnątrz ustawień znajdziesz serię przełączników przełączających, które umożliwiają włączenie lub wyłączenie punktów przerwania w razie potrzeby.

Po aktywacji każdy punkt przerwania będzie widoczny na pasku zadań, umożliwiając wprowadzanie zmian w całym projekcie bez klikania responsywnych kontroli w poszczególnych rzędach lub modułach w celu dostosowania ustawień.

Czy powinieneś używać standardowych punktów przerwania czy własnych?

Standardowe punkty przerwania Divi 5 są zaprojektowane do pokrycia najczęstszych rozmiarów ekranu, w tym telefonów, tabletów i komputerów stacjonarnych. Te predefiniowane punkty przerwania są więcej niż wystarczające dla wielu projektantów, ponieważ zaspokajają większość użytkowników i urządzeń.

Istnieją jednak scenariusze, w których tworzenie niestandardowych punktów przerwania może być korzystne. Na przykład, jeśli chcesz pomieścić ultra całą monitory, składane smartfony lub mniejsze tablety, niestandardowe punkty przerwania mogą pomóc zmienić projekt dla tych przypadków użycia.

Korzystanie z niestandardowych punktów przerwania w Divi 5

Dostosowywanie responsywnych punktów przerwania jest przydatne do rozwiązywania problemów związanych z projektowaniem lub wyświetlaniem treści na mniej popularnych urządzeniach lub rozdzielczościach ekranu. Mogą również pomóc poprawić wydajność witryny, ładując tylko niezbędne style dla danego rozmiaru ekranu, skracając czas ładowania strony.

Na szczęście Divi 5 sprawia, że ​​niezwykle łatwo jest dostosować te responsywne punkty przerwania za pomocą kilku kliknięć.

Po otwarciu responsywnych ustawień urządzenia ustaw punkt przerwania telefonu na żądaną szerokość, a następnie powtórz kroki dla innych urządzeń. Ponieważ chcemy, aby witryna była dostępna dla mniejszych urządzeń, ustawimy numer na 360px dla telefonów. Po dodaniu żądanych pikseli kliknij przycisk Zapisz , aby kontynuować.

Divi 5 da ci znać, że zamierzasz dostosować punkty przerwania witryny. Kliknij przycisk aktualizacji, aby potwierdzić zmianę.

Dodamy następujące punkty przerwania dla pozostałych rozmiarów ekranu:

Te punkty przerwania obejmują szereg urządzeń, aby zapewnić, że witryna obejmuje większość rozmiarów ekranu i przypadków użycia:

• Telefon: 767px obejmuje większość rozmiarów ekranu smartfonów, w tym starsze modele, takie jak iPhone 8 lub Samsung G7.
• Telefon szeroki: 860px obejmuje większość ekranów telefonicznych w trybie krajobrazu, w tym iPhone 14 Pro (i powyżej) i nowoczesne urządzenia z Androidem.
• Tablet: 980px jest dobry dla większości ekranów tabletów w trybie portretowym, w tym wszystkich iPadów.
• Tablet szeroki: 1024px jest standardem dla widoku krajobrazu w większości iPadów i tabletów Samsung.
• WIDESCREEN: 1280PX to dobra szerokość dla większości mniejszych laptopów (Windows lub MacOS), w tym MacBook Air, MacBook Pro 13 ″ i porównywalne urządzenia Windows.
• Ultrawide: 2560px obejmuje większe ekrany komputerów stacjonarnych, takie jak laptopy MacBook Pro 15 ″ i 16 ″, IMAC i standardowe monitory o wysokiej rozdzielczości.

Dostosowywanie responsywnych projektów wewnętrznych wstępnych

Jednym z najpotężniejszych aspektów Divi 5 jest sposób, w jaki jego konfigurowalne punkty przerwania integrują bezproblemowo z ustawieniami wstępnymi. Pozwala to stworzyć naprawdę responsywny projekt na całej witrynie z minimalnym wysiłkiem. Doskonałym przykładem jest modyfikowanie ustawienia H1 miejsca startowego, aby zapewnić, że wszystkie H1 wyglądają idealnie w każdym rozmiarze ekranu.

Zacznij od kliknięcia w dowolnym miejscu w sekcji H1 w sekcji Bohater, aby wyświetlić jego ustawienia.

Następnie kliknij pole wstępne nagłówki w nagłówku modułu.

Pojawi się wstępna lista. Znajdź ustawienie wstępne, które ma obok niego niebieski znak wyboru.

Włóż nad aktywnym ustawieniem, aby ujawnić jego ustawienia. Kliknij ikonę Ustawienia, aby ją edytować.

Kliknij kartę Projekt , a następnie dostosuj rozmiar tekstu nagłówka do żądanego rozmiaru.

Utrzymuj ustawienia wstępne otwarte i kliknij następny rozmiar ekranu na pasku zadań Divi 5, aby dostosować rozmiar nagłówka.

Powtórz powyższe kroki, aby dostosować ustawienia wstępne dla pozostałych rozmiarów ekranu. Po ukończeniu tego kliknij przycisk Zapisz wstępne .

Po zamianie punktów przerwania zmiany rozmiaru zostaną odzwierciedlone w ustawieniach nagłówka.

Responsywna edycja w Divi 4 vs Divi 5

Divi zawsze był liderem w responsywnym projektowaniu, ale Divi 5 przenosi go na zupełnie nowy poziom. Podczas gdy Divi 4 stanowiło solidne podstawy do tworzenia responsywnych stron internetowych, Divi 5 przedstawia funkcje, które sprawiają, że responsywna edycja bardziej intuicyjna, elastyczna i potężna niż kiedykolwiek wcześniej. Oto bliższe spojrzenie na to, jak Divi 5 poprawia możliwości Divi 4.

Bez wysiłku przejście między punktami przerwania

W Divi 4 przełączanie między punktami przerwania jest dość proste, ale wymaga więcej czasu i nie jest tak płynne, jak przejście, które można znaleźć w Divi 5.

Divi 5 poprawia ten przepływ pracy dzięki gładszego, bardziej intuicyjnego interfejsu. Teraz możesz natychmiast przejść między punktami przerwania, podglądając swój projekt podczas regulacji, bez opóźnienia. Ta nowa wersja Divi umożliwia wprowadzanie zmian projektowych w muchie na podstawie tego, który przeglądasz punkt przerwania. Nie ma już przełączania między trybami ani ciągłego przełączania. To bezproblemowe wrażenia oszczędza czas i zapewnia bardziej spójny i wypolerowany projekt w każdym punkcie przerwy.

Od 3 do 7 punktów przerwania

Divi 4 obsługuje 3 różne punkty przerwania; Można je również znaleźć w Divi 5.

• Desiktop: 981px i powyżej
• Tablet: <980px
• Mobile: <767px

Podczas gdy te punkty przerwania obejmują podstawy, czasami nie są one zakwestionowane, gdy dostosowują się do różnorodności urządzeń i rozmiarów ekranów używanych przez współczesną publiczność. Projektanci mogą czasem potrzebować zapytań multimedialnych CSS, aby ukierunkować różne rozmiary ekranu, szczególnie w przypadku bardzo szerokich monitorów lub mniejszych urządzeń mobilnych.

Divi 5 zajął się tym ograniczeniem, rozszerzając liczbę punktów przerwania do 7 opcji konfigurowalnych, ułatwiając ukierunkowanie większej liczby urządzeń.

• Telefon: <767px
• Telefon szeroki: < 860px
• Tablet: <980px
• Tablet szeroki: < 1024px
• Desktop: > 981px
• Widescreen: > 1280px
• Ultra szeroka: > 1440px

Ta zwiększona elastyczność pozwala dostosować swój projekt do szerszej gamy urządzeń, zapewniając idealne miejsce na wszystkim, od kompaktowych smartfonów po duże monitory o wysokiej rozdzielczości. Na przykład możesz teraz utworzyć dedykowany punkt przerwania tabletu w trybie krajobrazu lub zoptymalizować swoją witrynę pod kątem ultra szerokich ekranów używanych w profesjonalnych ustawieniach.

Skalowanie na płótnie dla pełnej kontroli

Jedną z najbardziej ekscytujących nowych funkcji Divi 5 jest Skalowanie na płótnie, które zapewnia projektantom niespotykaną kontrolę nad tym, jak ich strona internetowa pojawia się w różnych rezolucjach.

Tak wygląda na skalowanie płótna w Divi 4:

Funkcja przeskalowania na płótnie Divi 5 sprawia, że ​​całe doświadczenie jest jeszcze bardziej intuicyjne. Zaledwie kilkoma kliknięciami możesz skalować płótno projektowe, aby dopasować określone rozdzielczości ekranu, pokazując dokładnie, jak Twoja strona będzie pojawiać się na różnych urządzeniach. Ta funkcja jest przydatna do testowania mniejszych ekranów mobilnych lub ultra całego komputera stacjonarnego, zapewniając, że projekt jest bezbłędny-wyznaczona tablica.

Divi 5 jest na zawsze włączony do członkostwa w życiu Divi

Divi 5 konfigurowalne punkty przerwania umożliwiają projektantom do tworzenia responsywnych stron z większą precyzją. Niezależnie od tego, czy udoskonalasz istniejący układ, czy budujesz witrynę od zera, te nowe narzędzia dają elastyczność w tworzeniu idealnych wrażeń dla każdego rozmiaru ekranu.

Jedną z najlepszych części Divi 5 jest to, że na zawsze zostanie ono uwzględnione w członkostwie Divi (bez dodatkowych kosztów). Jeśli zaktualizujesz dziś członkostwo w życiu Divi, uzyskasz dostęp (i aktualizacje) do Divi 5 za jednorazową opłatę i skorzystasz z tego rozwijającego się produktu przez wiele lat.