W kontekście Elementora 3.3 mógłbym napisać w zasadzie tylko o jednej jego nowości, na którą czeka zdecydowana większość twórców stron wykorzystujących w swojej pracy tego buildera. To coś, co powinno pojawić się już dawno temu! Ale lepiej późno niż wcale 🙂 Tę nowość zostawiam na sam koniec, a tymczasem napiszę o kilku innych, ponieważ każda z nich jest ważna czy to ze względu na większy komfort pracy czy wydajność stron. Zaczynamy!

Elementor 3.3 i Biblioteka Elementor Kit

Wiemy doskonale jak wygodny jest import całej witryny startowej i jak mocno przyspiesza dalszą pracę ze stroną. Znamy to z wielu motywów WordPress, np. Astra, Kadence, Blocksy i wielu, wielu innych. Elementor do tej pory pozwala nam zaimportować pojedynczy szablon, np. dla strony głównej. Potem trzeba szukać czegoś podobnego stylistycznie i importować szablon dla strony kontakt i pozostałych… Mało komfortowe. Z pomocą przychodzą dodatki takie jak Envato Elements, gdzie znajdziesz całe zestawy szablonów zaprojektowane spójnie pod kątem konkretnej tematyki.

Elementor 3.3 również zostanie teraz wzbogacony o taką funkcjonalność 🙂

Jak to będzie działać?

  • Upewnij się, że eksperyment Import / Export Kit jest aktywny
  • Kliknij sekcję Elementor Templates i wybierz Kit Library
  • Otworzy się biblioteka z kilkoma (na razie) zestawami
  • Sprawdź demo wybranego zestawu, aby ocenić co jest w środku i czy może być dla Ciebie przydatne
  • Następnie wybierz swój zestaw i go zainstaluj. Po drodze będziesz miał możliwość zdecydowania o tym co chcesz importować: czy wszystko co jest w zestawie czy tylko wybrane elementy.

Szybsze wczytywanie stron dzięki warunkowemu ładowaniu CSS inline

W tej wersji Elementora twórcy skupili się na osiągnięciu szybszego ładowania stron poprzez zmniejszenie ilości nieużywanego CSS. Z wersji na wersję zbliżamy się do coraz lepszych wyników!

Warunkowe ładowanie CSS

Do wersji Core 3.3 , cały CSS był ładowany w tym samym pliku: frontend.css. Oznacza to, że zasoby CSS, które nie są używane, są ładowane tak czy inaczej, co szkodzi wynikowi strony i generuje proces blokowania renderowania.

W tej wersji, kiedy aktywujesz eksperyment z ulepszonym ładowaniem CSS, Elementor 3.3 załaduje tylko te arkusze styli widżetów, które są faktycznie użyte na stronie. W niektórych projektach ta zmiana może wyraźnie wpłynąć na wyniki Core Web Vitals (oczywiście pozytywnie).

Ładowanie CSS inline

Dodatkowo, aby uniknąć wielokrotnych zapytań do serwera, Elementor 3.3 załaduje teraz pliki CSS jako znaczniki stylu inline, co jeszcze mocniej zredukuje procesy blokujące renderowanie i powinno poprawić ogólną wydajność witryny.

Jeśli widżet jest używany więcej niż jeden raz, nie będzie dodatkowego żądania. Mechanizm identyfikacji rozmiaru pliku CSS będzie miał miejsce raz dla danego widżetu.

Warunkowe ładowanie biblioteki animacji

Zostało dodane usprawnienie ładowania zasobów animations.css. Ta biblioteka będzie wczytywana tylko wtedy, gdy faktycznie zostanie użyta na stronie, co pomoże jeszcze skuteczniej zredukować ładowanie nieużywanych zasobów.

Odczytaj paletę kolorów z dowolnego obrazka

I to nie wychodząc z Elementora! Funkcjonalność, którą łatwo można przeoczyć, bo to tylko maleńka dodatkowa ikonka wstawiona do pickera kolorów, ale jest to coś, co powinno spodobać się projektantom stron. Klikając na dowolnym obrazku otrzymujesz podgląd jego palety kolorów. Wystarczy wybrać dowolny, aby wykorzystać go na innym obiekcie, np. na przycisku. Zobacz jak to działa:

Własne Breakpointy

Na koniec zostawiłem nowość, której wyczekiwałem z utęsknieniem i w końcu jest! Jeśli pracujesz z Elementorem, to doskonale wiesz, że domyślnie dostosowanie wyglądu strony pod kątem urządzeń mobilnych, to tylko trzy podstawowe breakpointy: Desktop, Tablet, Smartfon. Niestety już od dawna to zdecydowanie za mało. Często moi kursanci na PoznajWP pytają mnie dlaczego u nich strona się rozjeżdża, a na innym komputerze nie. Zazwyczaj jest to efekt różnych szerokości ekranu i braku odpowiedniego dostosowania układu strony pod tym kątem. Teraz to się zmieni, w każdym razie będzie lepiej, ponieważ można będzie dostosować wygląd aż do 7 szerokości ekranu! Woow, w końcu! 🙂

Szybki rzut oka na breakpointy:

Podsumowanie

Biblioteka gotowych zestawów graficznych dla strony, kolejne kroki w kierunku lepszej optymalizacji wydajności, wybór kolorów z dowolnego obrazka i możliwość skonfigurowania 7 breakpointów, to najważniejsze nowości jakie wkrótce pojawią się w Elementorze 3.3

Nie wiem, która z nich będzie Twoją ulubioną zmianą, możesz wspomnieć o tym w komentarzach, ale moją już znasz. Breakpointy przy tej ilości pozwolą lepiej dostosować wygląd stron pod kątem większej ilości szerokości ekranów. Nareszcie orientacja horyzontalna dla smartfonów czy tabletów nie będzie problematyczna. Nie mogę się doczekać wydania wersji produkcyjnej 🙂

Udostępnij

Zobacz również

Oxygen

Oxygen kreator stron dla WordPressa

Oxygen to projekt z kilkuletnią historią. Jeśli dobrze pamiętam pierwsza odsłona pojawiła się w 2016 roku. Pomimo wielu zalet nie jest to tak popularne narzędzie

Elementor 3.1

Elementor 3.1 – co nowego?

Nadchodząca wersja Elementora oznaczona numerem 3.1 przyniesie kilka nowości. Wśród nich sekcję pozwalającą na zarządzanie stronami lądowania. Brzmi nieźle, prawda? Owszem, aczkolwiek z mojego punktu

Bezpłatne informacje o nowościach JZS

Zapraszam Cię do grona Subskrybentów! Tysiące Czytelników już subskrybuje wiadomości z JZS.

W każdej chwili możesz zrezygnować z subskrypcji. Twój adres jest tu bezpieczny.

Polecane Oferty LifeTime!

Consolto

Aplikacja do spotkań online i obsługi Klienta. Ogrom możliwości i...

Labrika

Optymalizacja treści w oparciu o konkurencję w TOP10, monitoring pozycji,...

pcloud lifetime
pCloud

Dysk w chmurze z dostępem dożywotnim. Zapisuj swoje pliki i...

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *