Wydano nową ważną aktualizację Elementora. Przeszliśmy z wersji 2.x do wersji 3.0 . Ta nowa wersja zawiera nowy sposób tworzenia stron internetowych za pomocą WordPressa i Elementora. Spróbujemy przekonwertować te nowe funkcje.
Jakie są główne dodatki w Elementorze 3.0?
Elementor 3.0 jest wyposażony w 3 główne dodatki, którymi są: funkcje systemu projektowania, nowe narzędzie do tworzenia motywów i znaczące ulepszenia wydajności.
Funkcje systemu projektowania
Czy kiedykolwiek zastanawiałeś się, jak duże firmy robią tak dobrze, bez względu na platformę, na której się znajdują? Wszystko, co tworzą, wygląda spójnie i ma ten sam design. Jest to możliwe dzięki temu, co nazywa się „ Systemem projektowania ”. Według UnxDesign.cc system projektowania to:
Jedno źródło prawdy, które grupuje wszystkie elementy, które pozwolą zespołom projektować, realizować i rozwijać produkt. Tak więc Design System nie jest rezultatem, ale zbiorem rezultatów. Będzie stale ewoluować wraz z produktem, narzędziami i nowymi technologiami.
UX Collective
Wdrażając system projektowania, zachowaj spójność całego zespołu wokół jednego języka projektowania, a także zrewolucjonizuj sposób pracy zespołu i zapewnij szybszy przepływ pracy.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć terazFunkcje systemu projektowania Elementora 3.0 obejmują:
- Globalne kolory
- Nowy panel Ustawienia witryny
- Czcionki globalne
Zobaczmy dogłębnie, jak to pomoże Ci zbudować lepsze profesjonalne strony internetowe.
Globalne kolory
Elementor 3.0 dodaje nowy sposób pracy z kolorami witryny. Ta nowa metoda nosi nazwę Global Colors.
Globalne kolory pomagają zmienić kolor z jednego miejsca i aktualizować ten kolor wszędzie, gdzie jest używany.
Zaczniesz wybierać podstawowe kolory globalne dla swojej witryny. Następnie przejdź do dowolnego stylu kolorów w Elementorze i zdefiniuj go jako jeden z czterech kolorów. Pamiętaj, że możesz dodać dowolną liczbę kolorów niestandardowych na liście globalnej .
Teraz wchodzą zmienne CSS. Wróć do Global Colors i zmień jeden z kolorów. Schemat kolorów całej witryny zmienia się zgodnie z nowym Global Color. Czy kiedykolwiek doświadczyłeś czegoś łatwiejszego?
Będziesz także mógł zaprojektować inny kolor globalny z wejścia kontrolnego lub utworzyć nowy kolor globalny, używając tego samego próbnika kolorów wewnątrz wejścia kontrolnego.
Ustawienia witryny
Stworzenie pierwszych ustawień projektowych dla strony internetowej zajmuje dużo czasu. Będziesz musiał żonglować między kodem motywu, Customizer, functions.php. To wystarczająco dużo powodów, aby usprawiedliwić twoje bóle głowy.
Nowe ustawienia witryny zawierają różne narzędzia konfiguracyjne. W ten sposób będziesz wykonywać wszystkie te zadania z jednego miejsca.
Aby rozpocząć, na dowolnej stronie, którą edytujesz za pomocą Elementora, na lewym panelu bocznym kliknij lewą górną ikonę. To sprawi, że przejdziesz do panelu Ustawienia globalne.
W tym panelu Ustawienia globalne znajdziesz:
- Układ: Â konfiguracja domyślnych ustawień układu Elementora, takich jak domyślna szerokość treści lub domyślny układ strony.
- Tożsamość witryny: Dostosuj swoje tożsamości między witrynami, takie jak logo, tytuł, slogan, a nawet favicon.
- Styl motywu: Dostosuj elementy HTML niezwiązane z Elementorem (zwykle ustawiane przez motyw) dla typografii, przycisków i pól formularzy.
- Lightbox:Â Definiowanie domyślnego stylu elementów lightbox Elementor
- Globalne kolory i czcionki: Pozwala skonfigurować globalne kolory i czcionki, które mają zastosowanie do Twojej witryny.
Czcionki globalne
Kolory i typografia są częścią składową każdej strony internetowej. Wykorzystując tę samą logikę, co funkcja Kolory globalne, jest to nowa metoda pracy ze stylami tekstu w witrynie.
Dzięki czcionkom globalnym wszystkie ustawienia typografii mogą być stosowane globalnie. Możesz teraz globalnie skonfigurować wszystkie ustawienia typografii witryny, w tym rodzinę czcionek, rozmiar i skalę czcionki, grubość czcionki, przekształcanie czcionki, styl czcionki, dekorację czcionki, wysokość linii, odstępy między literami, a nawet ustawienia responsywne. Będziesz także mógł ustawić te ustawienia dla każdego widżetu zawierającego tekst i dostosować własne globalne czcionki.
Po prawidłowym zaprojektowaniu typografii będziesz mógł zastosować te zmiany globalnie.
Cała witryna zwizualizowana i zorganizowana w jednym miejscu
Podczas gdy dobrze znany Theme Builder stał się liderem w branży pod względem pełnego przeglądu projektu strony internetowej, ten nowy interfejs użytkownika idzie jeszcze dalej. Nowy Theme Builder zapewnia teraz przegląd całej witryny w bardzo intuicyjny sposób.
Ten Theme Builder zapewnia przegląd witryny, w tym wszystkie jej części: nagłówek, stopkę, globalny szablon strony, globalny szablon postu i inne. Każdą część witryny można podejrzeć, co znacznie ułatwia zaprojektowanie całej witryny.
Ulepszenia w wydajności
Podczas gdy aplikacja rośnie, oczywiste jest, że deweloper powinien dbać o wydajność. Aktualizacje wprowadzone w Elementorze 3.0 mają na celu zapewnienie ładnej infrastruktury kodu, która zaowocowała niezwykłą poprawą wydajności.
Nastąpiło wiele czyszczenia elementów DOM, co przyspiesza renderowanie Elementora. Powinno to zdecydowanie poprawić rankingi szybkości strony i ogólne wrażenia użytkowników w Twojej witrynie.
Konkretnie, co się zmieniło pod względem szybkości strony?
Elementor 3.0 zapewnia znaczne ulepszenia procesów renderowania po stronie serwera oraz sposobu, w jaki Elementor renderuje dynamiczne wartości CSS. Pozwala to na włączenie dynamicznych elementów i wartości w całej witrynie. Na przykład możesz utworzyć szablon dla postów w witrynie i zdecydować, że chcesz wyświetlać wyróżniony obraz każdego posta jako tło za tytułem posta.
W tle, gdy Elementor przygotowuje post do wysłania do przeglądarki, analizuje go pod kątem wartości dynamicznych, pobiera je, a jeśli zawierają jakiekolwiek wartości CSS, drukuje ten CSS.
Dzięki Elementor 3.0 czas poświęcony na ten proces został znacznie skrócony. Dzięki dynamicznym wartościom, które są przechowywane dla każdego z Twoich postów. Po zapisaniu tej listy, za każdym razem, gdy ktoś odwiedza post, Elementor przechodzi bezpośrednio do tej listy, co przyspiesza proces. Wartości dynamiczne, na które wpływa ta optymalizacja, obejmują obrazy tła, kolory i wiele innych. To ulepszenie przynosi zauważalne zmniejszenie obciążenia serwera.
Podsumowanie aktualizacji Elementora 3.0
Jak wspomnieliśmy powyżej, ta wersja zawiera ciekawe gadżety, które powinny naprawdę wpłynąć na Twoją codzienną pracę. Przeszliśmy przez:
Design System Features, który pomaga pracować bardziej konsekwentnie i wydajnie.
Nowy Theme Builder to potężne narzędzie wizualne do zarządzania każdą częścią witryny z jednego miejsca.
Ulepszenia wydajności  dla lepszego doświadczenia użytkownika.
Elementor 3.0 z pewnością przeniesie Cię na krawędź jako profesjonalny twórca stron internetowych. Jeśli jeszcze tego nie zrobiłeś, uaktualnij teraz do Elementor Pro . Powinieneś również rozważyć przeczytanie naszego postu wyjaśniającego, dlaczego Elementor jest z pewnością najlepszym darmowym Kreatorem Stron na WordPressie .
