Przedstawiamy Elementor 3.13 – Twórz oszczędne i elastyczne układy stron internetowych za pomocą CSS Grid

Opublikowany: 2023-05-17

Zwiększ swoje możliwości projektowania i ciesz się nowymi sposobami stylizowania swojej witryny za pomocą Elementora 3.13, aby uzyskać unikalne projekty, które utrzymają zainteresowanie odwiedzających witrynę. Ta wersja zawiera nową opcję układu w kontenerach – CSS Grid, świetny sposób na projektowanie wyrafinowanych i lekkich układów stron internetowych, przy jednoczesnym zachowaniu wysokiego poziomu spójności. Ponadto ta aktualizacja wprowadza więcej opcji stylizacji w widgecie menu i dodaje nowe możliwości do nowego górnego paska.

Nowość – CSS Grid Container – projektowanie lekkich, responsywnych i profesjonalnych układów

Teraz, kiedy dodajesz kontener, możesz wybrać pomiędzy kontenerami Flexbox lub Grid. Korzystanie z kontenerów siatki jest idealne w przypadku układów przypominających siatkę, pomaga zachować wyrównanie elementów w kontenerze i zmniejsza krzywą uczenia się związaną z przejściem z układu sekcja-kolumna do układu kontenera.

Dzięki kontenerom siatki możesz wybrać liczbę wierszy i kolumn, z których chcesz utworzyć siatkę, określić odległość między kolumnami i wierszami za pomocą kontrolki Odstępy oraz wybrać, czy Auto-Flow ma działać na podstawie kolumny czy wiersza. Możesz także wyrównywać i wyrównywać zawartość i elementy, podobnie jak w przypadku kontenera Flexbox.

Każda komórka w siatce może przyjąć jeden element, który można stylizować i edytować w normalny sposób. Aby osiągnąć wyższy poziom zaawansowania, możesz umieścić kontener Flexbox wewnątrz komórki siatki i umieścić w nim dowolną liczbę elementów.

Aby korzystać z Container Grid, włącz funkcje Flexbox Container i Grid Container w WordPress Dashboard → Elementor → Settings → Features.

[Pro] Nowe możliwości stylizacji w widgecie menu

W poprzedniej wersji Elementor wprowadził nowy widżet Menu, który pozwala tworzyć proste, jednopoziomowe menu i wyrafinowane menu rozwijane z zawartością zagnieżdżoną. Ten widżet zmienia zasady gry w tworzeniu witryn internetowych, umożliwiając projektowanie pięknych i funkcjonalnych menu dla witryn internetowych.

Elementor Pro 3.13 wprowadza dwie nowe możliwości, które są teraz dostępne w widgecie Menu:

  • Ikony na najwyższym poziomie menu — ta nowa funkcja stylizacji pozwala ulepszyć projekt menu, dodając przyciągające wzrok ikony, które przyciągają uwagę odwiedzających. Dzięki różnorodnym ikonom do wyboru w bibliotece ikon lub możliwości przesłania dowolnego pliku SVG, możesz dostosować swoje menu do stylu swojej witryny i wyróżnić je.

Aktywny stan linków zakotwiczonych – wskaż odwiedzającym witrynę, którą część strony przewinęli lub kliknęli, gdy w menu znajdują się zakotwiczenia. W ten sposób możesz poprawić wrażenia odwiedzających, pomagając im poruszać się po Twojej witrynie.

Ulepszenia górnego paska – Kontynuacja przebudowy interfejsu użytkownika Elementora

W Elementorze 3.12 rozpoczęliśmy stopniowe wdrażanie nadchodzących zmian w interfejsie Elementora. Zmiany te są zapisywane w React, co poprawia wydajność i pozwala na przyszły rozwój i skalę produktu. Ponadto zmiany te promują najlepsze praktyki Elementora, co skutkuje lepszym i usprawnionym doświadczeniem użytkownika.

Jedną z największych zmian jest nowy pasek górny, wprowadzony jako eksperyment, który można aktywować na stronie funkcji Elementora w WordPress (Elementor → Ustawienia → Funkcje → Górny pasek edytora). W tej wersji górny pasek zawiera dwie aktualizacje:

  1. Zapisz Opcje w Przycisku Publikacji – chociaż nie jest to nowa funkcja, ta funkcja nie była dostępna w pierwszej wersji Górnego Paska. Teraz masz dostęp do wszystkich opcji zapisywania dostępnych w Edytorze — Zapisz jako wersję roboczą, Zapisz jako szablon i Wyświetl warunki (jeśli dotyczy). Oznacza to również, że górny pasek zawiera teraz wszystkie funkcje dostępne wcześniej w starszym interfejsie edytora.
  2. Page Navigation – nowa funkcja, która usprawni przepływ pracy i sprawi, że przejście między różnymi stronami i częściami motywu będzie płynniejsze. Kliknięcie oznaczenia strony na środku górnego paska spowoduje otwarcie listy rozwijanej zawierającej pięć ostatnich stron/postów/części motywu, nad którymi pracowałeś, i umożliwi przekierowanie do dowolnej z nich jednym kliknięciem, bez konieczności cofania się do pulpitu nawigacyjnego WordPress.

[Pro] Dynamicznie wypełniaj fragment swojego posta treścią swojego posta

Wcześniej korzystanie z widżetu Fragment wpisu lub tagu dynamicznego w WordPressie oznaczało, że treść była automatycznie wypełniana z ręcznie wstawionego fragmentu niestandardowego w WordPressie. Jednak w Elementorze 3.13 masz teraz możliwość wyboru, czy chcesz, aby treść była automatycznie wypełniana z kilku pierwszych znaków Twojego posta, czy z niestandardowego fragmentu w WordPress. Ta aktualizacja rozwiązuje jedno z najczęstszych żądań od czasu wprowadzenia Kreatora pętli, a zwłaszcza od czasu dodania widżetu Fragment posta do elementu pętli.

Nowość: Wykorzystaj sztuczną inteligencję Elementora, idealnie dopasowaną do Elementora

Elementor 3.13 zawiera również elementor AI, który jest natywnie zintegrowany z edytorem i zmieni sposób tworzenia stron internetowych. Ta wersja wprowadza pierwszą fazę Elementor AI, która umożliwia tworzenie tekstu i kodu z mocą sztucznej inteligencji. Możesz go używać do tworzenia treści od podstaw, ulepszania istniejących treści w swojej witrynie, tłumaczenia ich na dowolną witrynę i nie tylko. Dodatkowo możesz użyć Elementor AI do napisania kodu dla niestandardowego CSS lub kodu niestandardowego (wymaga Elementor Pro lub Hosting) lub fragmentów kodu HTML. Możesz przeczytać więcej o tym, co możesz zrobić z Elementor AI tutaj.

Ulepszenia w wydajności

W poprzednich wersjach usprawnienia wydajności koncentrowały się na najczęściej spotykanych widżetach na stronach głównych. W Elementorze 3.13 skupiono się na widżetach używanych głównie na stronach wewnętrznych, na których odwiedzający często spędzają większość czasu.

Widżety Pole autora, Informacje o wpisie i Cennik wyświetlają obrazy i zdjęcia profilowe użytkownika. Obrazy te mają teraz leniwe ładowanie. Ta zmiana powinna poprawić początkowe ładowanie stron wewnętrznych.

Ponadto, ponieważ nagłówek pojawia się nad zakładką, powinien zawsze ładować się natychmiast po załadowaniu strony. W związku z tym leniwe ładowanie zostało usunięte z nagłówków, aby poprawić wrażenia odwiedzających podczas korzystania z eksperymentu Leniwe ładowanie obrazów tła.

Ulepszenia dostępności

Elementor 3.13 jest pełen ulepszeń i poprawek, które poprawiają dostępność Twojej witryny, a także Edytora. W tej wersji skupiliśmy się na nawigacji za pomocą klawiatury, zaimplementowaniu dodatkowych tagów ARIA, naprawieniu istniejących problemów ze zgodnością ARIA i zastosowaniu znaczników semantycznych.

Więcej informacji na temat tych ulepszeń ułatwień dostępu można znaleźć na blogu programistów.

Korzystaj z większej liczby opcji stylizacyjnych i projektowych, aby uzyskać atrakcyjne i markowe witryny internetowe

Ulepsz projekt swojej witryny i odblokuj nowe możliwości stylizacji w celu dostosowania witryny za pomocą Elementora 3.13. Dzięki CSS Grid Containers możesz bezproblemowo tworzyć lekkie, elastyczne układy przypominające siatkę, a dzięki nowym funkcjom stylizacji w widżecie menu możesz tworzyć charakterystyczne projekty, które urzekają i utrzymują zainteresowanie odwiedzających Twoją witrynę.

Ta wersja zawiera również nowe możliwości funkcji Top Bar, co oznacza, że ​​wszystkie możliwości dostępne wcześniej w Edytorze są teraz dostępne podczas korzystania z eksperymentu Top Bar.

Elementor 3.13 zawiera również bezpłatną wersję próbną Elementor AI, która zmieni sposób tworzenia stron internetowych, umożliwiając natychmiastowe tworzenie oryginalnego tekstu, ulepszanie istniejącego tekstu i kodu w celu ulepszenia witryny i jej wyglądu.

Wypróbuj nowe funkcje Elementora 3.13 i daj nam znać, co o nich myślisz w komentarzach poniżej.