Przedstawiamy Elementor Pro 3.1: niestandardowy kod, ulepszenia wydajności i nie tylko!

5 kwietnia 2021

Blog

20 / 100

W najnowszej wersji Elementor Pro 3.1 dodaliśmy nowe funkcje, poprawiliśmy wydajność i dodaliśmy dodatkowe funkcje do jednego z naszych najpopularniejszych widżetów.

Dzięki niestandardowemu kodowi firmy Elementor dodawanie kodu do strony lub obszaru w witrynie jest dziecinnie proste! 🥧Ćwierkać

Pomaganie w tworzeniu profesjonalnych witryn jest naszym największym priorytetem, a to oznacza zapewnienie narzędzi potrzebnych do zaoszczędzenia czasu i skupienia się na pracy, która jest dla Ciebie najważniejsza. Aby usprawnić pracę i zmniejszyć zależność od innych wtyczek, dodaliśmy możliwość dołączenia kodu niestandardowego do witryny i zarządzania wszystkimi fragmentami kodu z jednego miejsca w Elementorze.

Do tej pory dodanie kodu niestandardowego w Elementorze nie było możliwe bez użycia wtyczki innej firmy lub skomplikowanych korekt kodu w plikach motywów. Wszystko to się dziś zmienia.

Dzięki nowej funkcji kodu niestandardowego będziesz mógł dołączać metatagi kodów śledzenia (Google Analytics, Facebook Pixel itp.) Oraz inne usługi zewnętrzne w różnych obszarach strony, takich jak tag head i body.

Cały ten piękny kod niestandardowy będzie dostępny w jednym miejscu – Elementorze. Ponadto będziesz w stanie dokładnie zdecydować, który kod działa na poszczególnych stronach.

ŁATWO UMIEŚĆ KOD

Jak działa kod niestandardowy

Kod niestandardowy można teraz łatwo dodać i zarządzać nim w menu Elementor na pulpicie nawigacyjnym WordPress. Po dodaniu kodu będziesz mógł wybrać lokalizację (głowa, początek ciała, koniec ciała) i ustawić priorytet. Jeśli zarejestrujesz dwa skrypty w tej samej lokalizacji, jak Google Analytics dla Facebook Pixel, będziesz mógł ustawić priorytet, aby określić, który z nich zostanie załadowany jako pierwszy. Jeśli chcesz, aby Twoje skrypty Google Analytics ładowały się jako pierwsze, możesz ustawić priorytet na 1.

Możesz edytować swój kod za pomocą edytora kodu z wszechstronnym autouzupełnianiem i skonfigurować warunki wyświetlania tak samo, jak w przypadku każdej części witryny Elementor (nagłówek, stopka itp.). Po zakończeniu opublikuj kod, a będzie on dostępny w Twojej witrynie. Możesz zarządzać wszystkimi fragmentami kodu i organizować je w sekcji Kod niestandardowy na karcie Elementor.Jak używać kodu niestandardowego

ULEPSZONE ŁADOWANIE ZASOBÓW

Uzyskaj krótsze czasy wczytywania strony

Niedawno dodaliśmy ulepszony eksperyment wczytywania zasobów, który koncentruje się na optymalizacji szybkości witryny i punktacji. Ulepszone ładowanie zasobów optymalizuje wydajność w interfejsie użytkownika, oszczędzając czas ładowania każdej strony, ładując kod JS widżetów tylko wtedy, gdy jest potrzebny na stronie, co może spowodować zmniejszenie rozmiaru plików JS nawet o ~ 100 KB.

Zasadniczo załadujemy określone widżety tylko wtedy, gdy są używane na stronie. Brak widżetów Pro = brak plików JS widżetów Pro.

Aby doświadczyć tej poprawy wydajności, musisz ręcznie aktywować eksperyment Ulepszone ładowanie zasobów, który znajduje się na karcie Eksperymenty.

Planujemy wprowadzić znacznie więcej ulepszeń wydajności w przyszłych wersjach. W międzyczasie, aby dowiedzieć się więcej o tym, jak ten eksperyment działa  tutaj .

UPIĘKSZ SWOJE SKRZYNKI Z KODAMI

Przywitaj się z naszym nowym widżetem podświetlania kodu

Widget
Desktop 3
Code Highlight Editor

W Elementorze uwielbiamy edukować i inspirować przykładami kodowania i stylizacji (to prawda, jesteśmy maniakami i jesteśmy z tego dumni! 🤓). Wielu naszych projektantów i programistów prosiło o to samo i dlatego opracowaliśmy nowy widżet Podświetlanie kodu .

Używanie podświetlania kodu lub podświetlania składni jest szczególnie korzystne dla tych z Was, którzy mają bloga programistycznego lub często używają przykładów kodu w swoich treściach. Jeśli szukasz sposobów na uczynienie kodu bardziej czytelnym i wizualnie spójnym z witryną bez potrzeby stosowania dodatkowej wtyczki, skorzystaj z naszego nowego Widżetu Podświetlania kodu.

Jest wiele rzeczy, które możesz zrobić za pomocą nowego widżetu podświetlenia kodu. Na początek możesz wybrać składnię (język kodowania), aby zoptymalizować podświetlony kod. Możesz także jednym kliknięciem skopiować kod do schowka i dostosować projekt. Wybierz jeden z sześciu różnych motywów projektowych i znajdź styl pasujący do Twojej witryny. Wyświetlaj wizualizację kolorów w kodzie (w obsługiwanych językach, takich jak CSS) i zaznacz konkretne wiersze, na które chcesz zwrócić uwagę w swoim kodzie.Jak korzystać z podświetlania kodu

ANIMOWANY NAGŁÓWEK

Twórz bardziej angażujące nagłówki dzięki odtwarzaniu w pętli sterowania, synchronizacji i nie tylko

Screen Shot 2021 02 11 at 13.02.11 1

Nawet wydając nowe funkcje, nie zapominamy o aktualizowaniu naszych istniejących, popularnych widżetów. Jakiś czas temu uruchomiliśmy animowany widżet nagłówka, który umożliwia tworzenie animowanych i wyróżnionych nagłówków, które mogą dodatkowo przyciągnąć uwagę odwiedzających.

Dzisiaj przedstawiamy kilka ulepszeń, na które czekałeś:

  • Opcje czasu – daliśmy Ci większą kontrolę, umożliwiając ustawienie czasu trwania animacji i opóźnienia między każdą pętlą animacji.
  • Opcja pętli – wielu z Was prosiło nas o pozwolenie na „zatrzymanie” animacji po zakończeniu jej pętli. Teraz możesz ustawić widżet tak, aby był odtwarzany tylko raz, podkreślić konkretny komunikat (przykład – efekt podkreślenia) i zachować go w ten sposób, aby odwiedzający zobaczyli animację tylko raz.
  • Ustaw wybrany kolor dla efektu pisania – dostosuj i kontroluj efekty pisania, zmieniając kolor / kolor tła oraz mieszając i dopasowując kolory, aby osiągnąć pożądany efekt. 
  • Dynamiczna zawartość dla efektu rotacji – Stwórz piękny szablon pojedynczego posta, który pokaże Twoje dynamiczne wiadomości z animowanymi możliwościami.

Jak korzystać z animowanego nagłówka

Mamy nadzieję, że spodobają Ci się wszystkie aktualizacje, które oferuje Elementor Pro 3.1! Nie jesteś jeszcze członkiem Elementor Pro? Zarejestruj się teraz, aby rozpocząć. 

Wypełnij brief strony WWW a w ciągu 24h otrzymasz darmową wycenę!

Zamów darmową wycenę
budowy strony internetowej


Opisz nam w kilku słowach wizję swojej strony, jak miałaby wyglądać i jakie funkcje mieć wbudowane. Pozwoli to nam już na wstępie przedstawić zakres cenowy wykonania takiej strony.

Zapytanie można do nas przesłać również bezpośrednio
na poniższy adres e-mail: biuro@seobit.pl