Jak zoptymalizować układ witryny za pomocą Elementora

Chcesz wiedzieć, jak zoptymalizować układ swojej witryny za pomocą Elementor ?

Optymalizacja wydajności strony internetowej jest jednym z najważniejszych jej aspektów doświadczenie użytkownika. Wolno ładująca się strona internetowa może frustrować każdego użytkownika, często skutkując Współczynnik odrzuceń wysokie, które mogą negatywnie wpłynąć na powodzenie naszej działalności.

Na wydajność witryny może mieć wpływ wiele czynników, między innymi: duże rozmiary obrazów, konfiguracje serwerów, zbyt duża liczba wtyczek.

Wydajność strony internetowej to jedna z naszych najmocniejszych wartości jako twórców stron internetowych. Dlatego stworzyliśmy ten kurs w 5 częściach.

Teraz możesz dowiedzieć się, jak tworzyć układy i posty przy użyciu optymalnych technik. Ta wiedza zapewni, że Twoje witryny nie będą zawierać zbędnych sekcji, kolumn lub widżetów, które po prostu nie są potrzebne. Przyjrzymy się również niektórym wbudowanym funkcjom widżetów, które skrócą czas ładowania.

Pod koniec tego samouczka będziesz w pełni gotowy do optymalizacji wydajności każdej strony internetowej Elementor tworzysz i natychmiast zbierasz nagrody.

Lekcja 1: Najlepsze praktyki dotyczące optymalizacji układu

Podczas naszej pierwszej lekcji omówimy najskuteczniejszy sposób tworzenia stron i postów w edytorze Elementor. Często widzimy użycie zbyt wielu sekcji, kolumn, sekcji wewnętrznych i widżetów, podczas gdy ten sam układ można było osiągnąć przy użyciu znacznie mniejszej liczby elementów.

Używanie nadmiernej ilości elementów spowalnia działanie Twojej witryny, więc zanurkujmy i nauczmy się tworzyć strony internetowe z Elementorem w najbardziej efektywny sposób.

Omówimy następujące tematy:

• Bliższe spojrzenie na strukturę prawidłowej strony
• Przeglądanie i testowanie wydajności Twojej witryny
• Optymalizacja nagłówka, stopki i zawartości strony
• Przykłady dobrych i złych praktyk układu strony internetowej
• Prawidłowe korzystanie z widżetów, pozycjonowania i globalnych stylów
• Wskazówki, jak uniknąć opóźnień w ładowaniu, ulepszyć SEO i wydłuż czas ładowania
• Optymalizacja dostępności
• Zmniejszenie ilości elementów DOM
• I wiele więcej !

Aby lepiej zrozumieć optymalne układy w Elementorze, przyjrzymy się szablonowi Elementora, który pokazuje typowe nadużycia sekcji, kolumn i widżetów. Pod koniec tej lekcji całkowicie przebudujemy całą tę stronę, zmniejszając liczbę kolumn i widżetów. Nasza strona początkowa składa się z dziewięciu sekcji, 31 kolumn, pięciu sekcji wewnętrznych i 44 widżetów.

Pod koniec samouczka nasza zoptymalizowana strona zostanie zredukowana do sześciu sekcji, siedmiu kolumn i 16 widżetów.

Skorzystamy z darmowego, lekkiego Witam motywa my odtworzymy każdą sekcję szablonu i poprawimy ogólną wydajność witryny, korzystając z najlepszych praktyk.

Testowanie pod kątem złych praktyk

Zanim zagłębimy się w optymalizację układu witryny, przeprowadźmy test na naszej stronie, aby w pełni zrozumieć, co się dzieje, gdy ktoś odwiedza naszą witrynę. Po wykonaniu wszystkich optymalizacji powtórzymy test i porównamy wyniki.

Krok 1: Zweryfikuj swoją witrynę w oknie incognito

• Otwórz nowe okno w „trybie incognito” i wpisz adres URL testowanej strony internetowej.

Krok 2: Sprawdź, czy używasz bezpośredniej ścieżki adresu URL

Jeśli nie masz pewności co do linku do swojej strony, możesz go łatwo znaleźć, przechodząc do pulpitu nawigacyjnego WP:

• Kliknij „Strony”, aby zobaczyć wszystkie strony w Twojej witrynie.
• Najedź kursorem na swoją stronę i kliknij opcję „Wyświetl”. Spowoduje to przejście bezpośrednio do Twojej strony.
• Skopiuj i wklej ten adres URL do okna incognito, a po załadowaniu strony możesz ją przetestować!

Testowanie i przeglądanie wyników wydajności

Krok 1: Przetestuj wyniki wydajności

Być może w przeszłości korzystałeś z Narzędzi dla programistów Chrome.

Jeśli nie, w celu sprawdzenia i wyświetlenia treści HTML i CSS Twojej strony:

• Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz „Sprawdź”. Zobaczysz kilka zakładek, na których możesz przeczytać swój kod HTML i CSS, znaleźć błędy, uzyskać wyniki SEO i przeprowadzić różne testy.
• Wybierz kartę Sieć i naciśnij przyciski cmd lub ctrl + R, aby załadować wyniki.

Jak widać, nasz obecny układ ładuje się w 2,88 sekundy i wykonuje 81 żądań.

Krok 2: Wyświetl wyniki wydajności

• Przejdź do zakładki Lighthouse, gdzie na naszej stronie możemy uruchomić raport z audytu.

Dzięki temu uzyskamy więcej informacji na temat aktualnej wydajności strony.

• Wybierz „Generuj raport”. Po kilku chwilach pojawi się Twój raport.

Obecnie otrzymujemy ocenę wydajności 73/100, nad którą z pewnością możemy popracować.

Idealnie chcielibyśmy, aby wszystkie te liczby były zielone. Przejdźmy teraz do optymalizacji naszej strony i ulepszania naszej statystyka.

Należy pamiętać, że po każdym kroku optymalizacji, który wykonujemy, możemy zastosować sprawdzone metody ze zmian i pamiętać o nich w przyszłych tworzonych przez nas witrynach internetowych.

Optymalizacja elementów strony

Krok 1: Zoptymalizuj nagłówek

Zacznijmy od chodnikowiec.

Jak widać w tym projekcie, nagłówek składał się z trzech kolumn.

W pierwszej kolumnie nasze logo składa się z dwóch widżetów:

1. Un Widżet obrazu który wyświetla plik graficzny .png naszego logo
2. Widżet tytułu.

W drugiej kolumnie menu nagłówka składa się z naszego widżetu menu nawigacyjnego.

Trzecia kolumna zawiera:

1. Wewnętrzny widżet sekcji (który kontroluje pozycję widżetu ikon).
2. Nasze dane kontaktowe dla Nagłówka

Zobaczmy, jak możemy tutaj zminimalizować liczbę sekcji, widżetów i sekcji.

Krok 2: Utwórz nowy nagłówek

Kolumna 1:

• Utwórz 1 sekcję z tylko 1 kolumną.
• Dodaj Widżet Logo strony internetowej i przeciągnij go do sekcji.

Najlepsze praktyki dotyczące obrazów:

• Nadaj każdemu plikowi graficznemu w swojej witrynie odpowiedni tytuł i tekst alternatywny w bibliotece multimediów.

Poprawi to dostępność Twojej strony i pozycję w wyszukiwarce. W logo, którego pierwotnie użyliśmy, tytuł nie ma związku z rzeczywistym obrazem i nie ma tekstu alternatywnego.

• Zdefiniuj wymiary obrazu wewnątrz widżetu.

Pozwala to na rozplanowanie strony z odpowiednią przestrzenią przed załadowaniem obrazów, unikając opóźnień w układzie (czynnik mierzony przez przeglądarki).

W przykładzie, nad którym wspólnie pracujemy, rozwiąż ten problem, przechodząc do zakładki Styl i ustawiając szerokość obrazu na 200px.

Kolumna 2

Wróć do panelu widżetów:

• Przeciągnij i upuść widżet menu nawigacyjnego pod logo
• Ustaw wskaźnik na „Brak”
• Przejdź do zakładki „Styl” i dodaj preferowaną czcionkę (tak, aby pasowała do naszego poprzedniego projektu)

Najlepsze praktyki dotyczące ogólnego stylu:

• Unikaj używania więcej niż 2 różnych czcionek o różnych grubościach (Czcionki globalne).
• Unikaj wybierania różnych kolorów dla każdego elementu za pomocą selektora kolorów (Globalne kolory).
• Popraw szybkość ładowania swojej witryny, generując mniej zapytań (ogólnych czcionek).
• Powtórz niepotrzebny kod dwukrotnie (kolory globalne).
• Zachowaj spójność i kontrolę nad swoim modelem (ogólny styl).

Czcionki globalne:

Można to zrobić za pomocą funkcji Global Fonts:

• Przejdź do zakładki „Styl” i dodaj preferowaną czcionkę (tak, aby pasowała do naszego poprzedniego projektu), wybierając jedną, dokonaj małej zmiany i najedź na ikonę plusa.
• Kliknij ikonę plusa i wybierz potrzebną rodzinę czcionek
• Zapisz style, których użyjesz w szablonie jako czcionki globalne

Możesz następnie użyć tego stylu w każdym widżecie, który tworzysz.

Kolory globalne:

Tę samą metodę można zastosować do ogólnych kolorów:

• Kliknij „Globalny”
• Najedź kursorem na próbnik kolorów i kliknij na niego
• Wybierz kolor i wskaż ikonę plusa
• Kliknij „Globalny” >> wybierz „Zleceniodawca”

Gdy to zrobisz, kolor zostanie zapisany w palecie kolorów szablonu, dzięki czemu możesz go wybrać z listy kolorów globalnych, gdy będziesz go potrzebować dla elementu lub widżetu.

Zanim przejdziemy do naszego nagłówka, ustawmy dopełnienie pionowe na zero.

Krok 3: Edytuj nagłówek

Kolumna 3

• Przejdź do panelu „Widżety”
• Przeciągnij widżet Lista ikon pod menu.
• Usuń dodatkowe pozycje z listy
• Dodaj swój tekst
• Wybierz wybraną ikonę
• Przejdź do zakładki „Styl”
• Zdefiniuj ogólne kolory i czcionki do wyboru

Teraz musimy naprawić jeszcze jedną rzecz - trzy elementy nagłówka są obecnie ułożone w stos i nie są wyrównane ze sobą. Możemy rozwiązać ten problem, zmieniając szerokość każdego elementu na jego rzeczywisty rozmiar, tak aby nie zajmował całego miejsca w kolumnie.

Aby rozwiązać ten problem:

• Wybierz widżet Logo witryny >> karta „Zaawansowane”
• Wybierz „Pozycjonowanie” i ustaw jego szerokość na „Inline”

Powtórz ten krok dokładnie dla widżetu Menu nawigacji i widżetu Lista ikon.

Teraz, gdy wszystkie elementy nagłówka są w jednej linii, jedyne, co pozostaje, to ich prawidłowe ustawienie.

Definiowanie położenia słupa za pomocą elementów inline

• Wybierz swoją kolumnę >> przejdź do zakładki "Układ"
• W "Wyrównanie w pionie" wybierz "Dół"
• „W wyrównaniu w poziomie” wybierz „Odstęp między”

Wybranie wyrównania „Odstęp między” umieszcza pierwszy i ostatni widżet na obu końcach, zapewniając równe odstępy między wszystkimi innymi widżetami.

Jednak pierwszy i ostatni widżet mają różne szerokości, więc taka sama przestrzeń może nie zawsze wyśrodkować nasz wewnętrzny widżet.

Możemy rozwiązać ten problem, dostosowując marże:

• Wybierz widżet Menu nawigacji >> zakładka „Zaawansowane”
• Rozgrupuj margines i usuń odstępy z wartością ujemną

Krok 4: Spraw, aby nagłówek był responsywny

Zobaczmy teraz, jak wygląda aktualna wersja naszej strony na urządzeniach mobilnych.

Najlepsze praktyki dotyczące responsywności mobilnej:

• Uprość swój projekt i zastanów się, jak sprawić, by te same sekcje były responsywne, aby uniknąć podwójnej ilości kodu, która wpłynie na szybkość Twojej strony.

Tak jak widać w tym nagłówku — często zdarza się, że ta sama sekcja została przeprojektowana specjalnie pod kątem tabletów i urządzeń mobilnych. Oto, co widzimy tutaj: powstały dwie wersje projektu: jedna wersja na komputery stacjonarne i jedna na urządzenia mobilne.

Zamiast tego, gdy Twój projekt i kod są responsywne, szybkość Twojej strony poprawia się, ponieważ zużyje mniej kodu.

Zobaczmy, jak możemy to osiągnąć, korzystając z ustawienia „Szerokość niestandardowa” dla naszych widżetów i elementów.

Ustawianie niestandardowej szerokości tabletu

• Kliknij „Menu nawigacyjne” >> zakładka „Zaawansowane”
• Wybierz „Pozycjonowanie” >> ustaw szerokość na „Niestandardowa”.
• Wybierz "%" >> nadaj widżetowi tę samą szerokość (w procentach) pustej przestrzeni wokół niego.
• Kliknij zakładkę „Treść” >> „Przełącz wyrównanie” >> wybierz „W prawo”.

Pozwala to wyrównać menu przełączania w dowolnym miejscu na szerokości widżetu.

Zakończmy teraz dostosowywanie menu przełączania.

• „Zawartość” >> Kliknij przełącznik „Pełna szerokość” i ustaw go na „Tak”.
• „Styl” >> Usuń tło, przeciągając pasek „Kolor” do końca w lewo.

Zobaczmy teraz, jak wyglądają rzeczy na ekranie telefonu komórkowego.

Definiowanie niestandardowej szerokości dla urządzeń mobilnych

W tym scenariuszu zachowamy trzy widżety nagłówka w oknie roboczym. Pamiętaj jednak, że w przypadku niektórych witryn bardziej sensowne może być pominięcie niektórych elementów w nagłówku podczas przeglądania na telefonie komórkowym lub tablecie.

W tym przypadku to, co dzieje się z naszym nagłówkiem wyświetlanym na urządzeniu mobilnym, polega na tym, że widżety Menu nawigacyjne i Logo nie mieszczą się w jednym wierszu.

Aby rozwiązać ten problem:

Pozycjonowanie menu nawigacyjnego

• Kliknij „Menu nawigacyjne” >> zakładka „Zaawansowane”
• Wybierz „Pozycjonowanie” >> ustaw szerokość na „Niestandardowa”
• Wybierz „%” >> Nadaj widżetowi szerokość 30%, aby pasował do naszego logo

Pozycjonowanie listy ikon

• Kliknij „Lista ikon” >> „Zaawansowane” karta
• Wybierz „Wypełnij” >> Rozgrupuj wartości
• Dodaj dopełnienie 12px do „TOP”

Czy możesz w to uwierzyć?

Nasz nagłówek pierwotnie używany 2 sekcje, 12 widżetów i 10 kolumn. Teraz nasz nagłówek używa 1 sekcja, 3 widżety i 1 kolumna.

A wynik jest taki sam!

Krok 5: Zoptymalizuj sekcję Bohater

Przejdźmy do następnej sekcji naszej strony internetowej: sekcji bohaterów

Najlepsze praktyki dla sekcji bohaterów:

• Upewnij się, że tekst sekcji bohatera jest dobrze widoczny, zwłaszcza jeśli ma obraz tła.

Kontrolowanie pozycji widżetu w kolumnie

Częstym błędem popełnianym w edytorze Elementor jest używanie dodatkowych kolumn i spacji do kontrolowania położenia widżetu.

W naszym przykładowym modelu nasz obraz bohatera składa się z sekcji z obrazem tła. Tytuł i tekst są umieszczone poziomo, w dwóch kolumnach. Wewnątrz sekcji znajduje się również przekładka, która pozwala na rozmieszczenie elementów w pionie.

Zobaczmy, jak możemy stworzyć ten sam projekt z tylko jedną sekcją:

• Usuń dodatkową kolumnę po prawej stronie tekstu.
• Usuń przekładkę.

Zamiast tego, aby umieścić nasz tekst główny tam, gdzie chcemy, użyjemy opcji wyrównania kolumn:

• Wybierz kolumnę.
• Ustaw „Wyrównanie w pionie” na „Środek”.
• Przejdź do zakładki „Zaawansowane”.
• Wybierz „Wypełnij” >> Rozgrupuj wartości
• Ustaw prawe dopełnienie na 50%.

• Wybierz sekcję.
• Wybierz „Minimalna wysokość” >> ustaw ją na 80.

Naprawiono kontrast między tekstami a tłem

Ważne jest, aby każda strona internetowa miała dobry kontrast między tekstem a tłem. Nieczytelne informacje wpływają na wyniki Twojej witryny i mogą również odstraszać odwiedzających. Tak czy inaczej, tekst powinien być zawsze czytelny.

Istnieje kilka sposobów na poprawę przejrzystości sekcji, której tłem jest kolorowy obraz (jak widzimy w tym szablonie):

• Kliknij swój nagłówek.
• Przejdź do zakładki "Styl" >> Wybierz "Cień tekstu".

Poprawi to czytelność tekstu, wyróżniając go z obrazu tła.

Innym sposobem na zwiększenie przejrzystości tekstu jest użycie nakładek.

• Wybierz sekcję >> karta „Styl” >> „Nakładka w tle”
• Wybierz jeden ze swoich ogólnych kolorów i baw się kryciem, aż uzyskasz pożądany efekt

Krok 6: Zoptymalizuj sekcję za pomocą pól ikon

Przejdźmy teraz do naszej następnej sekcji, gdzie obecnie mamy wewnętrzną sekcję z czterema kolumnami. Obecnie każda kolumna ma trzy widżety: Widżet obrazu, Widżet tytułu i Widżet edytora tekstu.

Zobaczmy, jak możemy uprościć tę sekcję, aby poprawić jej wydajność.

Zawartość obszaru ikon

• Wybierz przycisk »Pudełko z ikonami widżetów« w menu widżetów i przeciągnij go do kolumny
• Wybierz „Pole ikon”
• Wskaż obraz ikony
• Wybierz „Pobierz SVG” **
• Wstaw swoją niestandardową ikonę

** Uwaga: plakietki to pliki SVG. Jeśli nie, przejdź do pulpitu nawigacyjnego WordPress, a następnie przejdź do Elementora >> Ustawienia. Musisz włączyć opcję Włącz niefiltrowane pobieranie plików.

• Wpisz swój „tytuł”
• Wpisz swój „Opis”
• Wybierz „Styl” >> Wybierz ogólny kolor
• Wybierz „Rozmiar” i przeciągnij pasek do wybranego rozmiaru
• Wybierz „Padding” i przeciągnij pasek na wybrany przez siebie numer

Krok 8: Zoptymalizuj sekcję „Usługi”

Zamierzamy teraz przebudować sekcję „Usługi”, która obecnie używa dwóch kolumn, dwóch obrazów, widżetu tytułu i widżetu edytora tekstu.

Stwórzmy ten sam projekt w nowej sekcji, ale tylko z jedną kolumną.

• Utwórz nową sekcję z kolumną
• W „Układzie” >> ustaw „Szerokość treści” na „Pełna szerokość”
• Wybierz "Okno obrazu widżetu" w panelu widżetów i przeciągnij go do kolumny

(Będziemy mogli zintegrować wszystkie zasoby sekcji z tym widżetem)

• Wpisz tytuł
• Wpisz opis

W przypadku obrazu zachowamy obecny projekt, którego użyliśmy do naszych obrazów.

• Wstaw ten sam obraz z biblioteki multimediów
• Przejdź do zakładki „Treść” >> Ustaw „Pozycję obrazu” na „Prawo”

• Przejdź do zakładki „Styl”
• Zwiększ odstępy między elementami
• Zwiększ „Szerokość” obrazu
• Rozwiń sekcję „Treść”
• Wybierz wyrównanie „do środka”
• Ustaw „Wyrównanie w pionie” na „Środek”
• Zdefiniuj ogólne kolory i czcionki do wyboru
• Przejdź do zakładki „Zaawansowane”
• Dodaj 10% wypełnienia do widżetu

Teraz sekcja Usługi ma ten sam wygląd, ale ma mniej zasobów.

Krok 9: Zoptymalizuj sekcję wezwania do działania

Sprawdzone metody dotyczące linków wezwania do działania:

• Upewnij się, że wszystkie linki do mediów społecznościowych działają poprawnie, a przycisk zawiera link.
• Kiedy dodajesz link do innej witryny, dołącz ten atrybut: "rel | noopener"

(Możesz to zrobić, klikając ikonę koła zębatego i wpisując atrybut w „Atrybuty niestandardowe”). Spowoduje to otwarcie linku w nowej karcie przeglądarki i zwiększenie wyniku wydajności.

Poniższa sekcja przedstawia wezwanie do działania dla naszych usług.

Sekcja ma obecnie dwie kolumny, które zawierają:

1. Obraz tła z przekładką
2. Dwa nagłówki, sekcja wewnętrzna, edytor tekstu i przycisk

Stwórzmy ten sam projekt w nowej sekcji, ale tylko z jedną kolumną.

• Przejdź do zakładki „Układ” >> ustaw „Szerokość treści” na „Pełna szerokość”
• Przejdź do zakładki „Zaawansowane” >> Usuń wszelkie dodatkowe wypełnienie

• Wybierz „Wezwania do działania Widget” w panelu widżetów i przeciągnij go do kolumny
• Ustaw „Pozycję obrazu” na „Lewo”
• Wybierz swój obraz z biblioteki multimediów
• Rozwiń sekcję „Treść”
• Wpisz nagłówek
• Wpisz opis
• Wpisz tekst przycisku

• Przejdź do zakładki „Styl”
• Dodaj „Padding” między elementami
• Dostosuj szerokość obrazu
• Rozwiń sekcję „Treść”
• Wybierz globalną czcionkę dla swojego tytułu
• Zwiększ odstęp między opisem a przyciskiem
• Wybierz globalne kolory odpowiednie dla każdego zasobu
• Rozwiń sekcję „Przycisk”
• Ustaw jego rozmiar na „Duży”
• Dostosuj go do swoich potrzeb, takich jak kolor tła i promień obramowania

Do tej pory była to sekcja 2-kolumnowa z 6 widżetami. Teraz jest to sekcja z 1 kolumną i tylko 1 widżetem!

Krok 10: Zoptymalizuj karuzelę obrazów

Obecny projekt naszej sekcji karuzeli obrazów zawiera powszechny błąd w sposobie wyświetlania wielu obrazów.

Ten projekt składa się z 5 kolumn, co jest praktyką, którą wielu użytkowników stosuje, aby kontrolować rozmiar swoich obrazów.

Przyjrzyjmy się prostszemu sposobowi, który zoptymalizuje również wydajność Twojej witryny.

• Utwórz nową sekcję z 1 kolumną
• Przejdź do zakładki „Układ” >> ustaw „Szerokość treści” na „Pełna szerokość”
• Wybierz przycisk »Widżet karuzeli obrazów« z panelu widżetów i przeciągnij go do kolumny
• Dodaj żądane obrazy z biblioteki multimediów

• Przejdź do zakładki „Treść”
• Ustaw „Rozmiar obrazu” na „Średni – 300 x 300”
• Dostosuj „Slajdy do wyświetlenia”, „Slajdy do przewijania” i „Nawigacja” zgodnie ze swoimi preferencjami

• Przejdź do zakładki „Styl”
• Ustaw „Wyrównanie w pionie” na „Środek”
• Dostosuj „Odstępy”

• Przejdź do zakładki „Zaawansowane”
• Dodaj niezbędne wypełnienie

To, co kiedyś było sekcją z 5 kolumnami, teraz jest tylko 1 kolumną.

Przejdźmy do następnej sekcji, w której możemy zoptymalizować filmy na naszej stronie.

Krok 11: Zoptymalizuj sekcję wideo

Najlepsze praktyki dotyczące treści wideo:

• Używaj Lazy Load, gdy tylko jest to możliwe, aby skrócić czas ładowania swoich stron internetowych.

Co się stanie, gdy zastosujemy opcję „Lazy Load”?

Z technicznego punktu widzenia kod osadzania wideo został zastąpiony statycznym obrazem. W ten sposób wideo ładuje się tylko wtedy, gdy użytkownik kliknie obraz - co naprawdę pomaga w ładowaniu naszej strony.

To, co zamierzamy teraz zrobić, to zmienić sposób, w jaki korzystamy z Widgetu Wideo, aby nie opóźniał on szybkości naszej strony ani wydajności witryny.

• Wybierz „Widget wideo”
• Przejdź do zakładki „Styl”
• Wybierz „Leniwe ładowanie”

Krok 12: Zoptymalizuj stopkę i aktualizuj ją

Częstym błędem na wielu stronach internetowych jest to, że ich stopka zawiera wiele nagłówków dla daty i opisu, a także ikonę dla symbolu praw autorskich.

Zobaczmy, jak zoptymalizować stopkę i upewnić się, że zawsze jest aktualna.

Skonfigurujemy ten ciągły proces aktualizacji za pomocą Tagi dynamiczne. W ten sposób nie będziemy musieli co roku zmieniać treści nagłówka, ponieważ tagi dynamiczne zostaną automatycznie zaktualizowane do bieżącego roku.

Aby to zrobić, postępujemy w następujący sposób:

• Usuń dodatkowe widżety, pozostawiając tylko widżet Tytuł
• Wybierz widżet Tytuł
• Kliknij symbol „Znaczniki dynamiczne” po prawej stronie pola „Tytuł” ​​(znany również jako „Przycisk nadrzędny”

• Z menu rozwijanego wybierz pozycję menu „Aktualna data i godzina”
• Kliknij ikonę rodzica klucza
• Kliknij kartę „Format daty” i wybierz element menu „Niestandardowy”
• Usuń to, co znajduje się obecnie w polu „Format niestandardowy”, z wyjątkiem „Y”
• Wybierz zakładkę „Zaawansowane”
• Zaznacz pole „Naprzód” i przytrzymaj jednocześnie klawisze „opcja” i „G” (lub „kontrola”, alt „i” jednocześnie), aby wpisać symbol „ © ”.
• Dodaj spację po „©”

• Wybierz pole „Po”
• Wpisz spację i wpisz tekst, który ma się pojawić po roku, np. „Wszelkie prawa zastrzeżone”

Możesz zauważyć, że w przykładowej witrynie w tym samouczku każdy widżet ma swoją własną sekcję. Zrobiliśmy to, aby samouczek był bardziej przejrzysty i łatwiejszy do naśladowania.

Idealnie, im mniej masz sekcji, tym mniej będziesz miał dodatkowego KODU HTML.

Możesz scalić niektóre widżety w tej samej sekcji, przeciągając je i upuszczając w powyższej sekcji, a następnie usuwając pustą sekcję.

I to wszystko, Twój układ jest zoptymalizowany!

Nowa ocena wydajności strony internetowej

Sprawdzimy wyniki w oknie DevTools (Inspektor):

• Wybierz zakładkę „Sieć”:

Jest tu kilka fajnych i pozytywnych zmian:

• Strona ładuje się teraz w 568 milisekund
• Z 81 próśb przeszliśmy do 46
• Wybierz zakładkę „Latarnia morska”, gdzie zobaczysz, że nasz wynik wydajności wzrósł z 73 do 98

Pamiętaj, że zoptymalizowaliśmy naszą wydajność bez używania wtyczek innych firm. Wystarczyły proste poprawki i najlepsze praktyki.

Krok 13: Przetestuj wyniki za pomocą efektów ruchu

Chcemy, aby nasza witryna była bardziej interaktywna i przyjemna, ale jak wpłynie to na nasze wyniki? Zobaczmy, co możemy zrobić.

Ustaw nagłówek jako „stały” element:

• Wybierz nagłówek
• Przejdź do zakładki „Zaawansowane”
• Rozwiń zakładkę „Efekty ruchu”
• Ustaw opcję „Przyklejony” na „Góra”

Ustaw sekcję bohatera jako „stały” element:

• Wybierz sekcję bohatera
• Przejdź do zakładki „Styl”
• Wybierz listę rozwijaną „Załącznik” i wybierz „Naprawiono”

Użyj a Animacja wejścia za tekst bohatera (nagłówek):

• Wybierz widżet nagłówka
• Przejdź do zakładki „Zaawansowane”
• Rozwiń zakładkę „Efekty ruchu”
• Wybierz Animację wejścia i ustaw ją na „Zanikanie”

Użyj animacji wprowadzania tekstu opisu bohatera (widżet Edytor tekstu):

• Wybierz widżet Edytor tekstu
• Przejdź do zakładki „Zaawansowane”
• Rozwiń zakładkę „Efekty ruchu”
• Wybierz „Animacja wejścia” i ustaw ją na „Zanikanie”

Zrób to samo dla widżetów, które pojawiają się później, aby uzyskać subtelne efekty podczas ładowania strony.

Przeprowadźmy teraz ponownie test wydajności, aby zobaczyć, jak efekty ruchu wpłynęły na nasz wynik:

• Wróć do okna „Inspektor”
• Wybierz zakładkę „Latarnia morska”
• Kliknij „Wygeneruj raport”

Teraz widzimy, że nasz wynik wydajności został obniżony do 97 - to zdecydowanie nie jest duża różnica i sprawia, że ​​strona jest ciekawsza i przyjemniejsza.

Czy możesz uwierzyć w nasz nowy wynik wydajności?

Cieszymy się, że jesteś teraz w pełni wyposażony, aby zwiększyć swój wynik wydajności z każdej tworzonej witryny Elementor. Będzie to miało duży wpływ na cele związane z budowaniem witryny i sukces Twojej firmy.

Sugerujemy dodanie zakładki do tego samouczka, aby móc z niego skorzystać w przyszłości, aby móc zbadać wydajność stron internetowych i zastosować najlepsze praktyki w celu optymalizacji układu.

A to dopiero początek - kolejna część tego kursu obejmujeoptymalizacja obrazu.

W samouczku omówimy każdy obraz w przykładowej witrynie i dowiemy się, jak je ulepszyć, aby uzyskać jeszcze bardziej efektywne czasy ładowania.

Pobierz Elementor Pro teraz!

Wnioski

Więc ! To tyle w tym artykule, który pokazuje, jak zoptymalizować układ witryny za pomocą Elementora. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...