Spraw, aby Twoja witryna Elementor była bardziej responsywna i dostosowana do urządzeń mobilnych

Witryna responsywna na urządzenia mobilne jest istotną częścią każdego biznesu internetowego.

Google używa szybkości ładowania strony mobilnej jako kluczowego wyznacznika rankingu wyszukiwania dowolnej witryny. Dzieje się tak głównie dlatego, że ponad połowa globalnego ruchu internetowego pochodzi z ruchu mobilnego.

Dlatego responsywna witryna mobilna jest nieunikniona zarówno dla kondycji Twojej witryny, jak i lepszej pozycji w wyszukiwarce Google. W tym artykule skupimy się na tym, jak możemy stworzyć responsywną witrynę mobilną za pomocą Elementor.

• Czym jest responsywny projekt strony internetowej Elementor
• Jak dostosować ustawienia telefonu komórkowego, komputera i karty
• Dostosuj nagłówek na ekranie telefonu komórkowego
• Dostosuj dopełnienie lub marginesy dla telefonów komórkowych
• Utwórz każdą kolumnę poziomo, a będzie ona cudownie dopasowywać się do wszystkich urządzeń
• Zmień obraz tła zgodnie z widokiem mobilnym / stacjonarnym
• Zmień widoczność dowolnej sekcji w widoku na komputery / urządzenia mobilne
• Zmień kolejność kolumn
• Utwórz alternatywną sekcję
• Dostosuj szerokość kolumny
• Wniosek

Czym jest responsywny projekt strony internetowej Elementor

Responsywny układ działa innowacyjnie, automatycznie skalując całą zawartość zgodnie z każdym rozmiarem ekranu. Automatycznie zmienia rozmiar obrazów i treści na ekranie urządzenia mobilnego, aby Twoi widzowie mogli oglądać Twoje treści bez żadnego wysiłku.

Większość z nas kupuje motyw, który twierdzi, że jest również responsywny dla urządzeń mobilnych; Jednak sytuacja może być frustrująca, gdy projekt szablonu całkowicie się zepsuje na ekranie telefonu komórkowego.

Aby przezwyciężyć takie sytuacje, opracowaliśmy mobilne rozwiązanie responsywne, w którym możesz zbudować projekt witryny od podstaw za pomocą responsywnych narzędzi do Elementor Za pomocą tych responsywnych narzędzi mobilnych możesz dostosować dowolny zakątek układu witryny, w szczególności typografię, dopełnienie oraz wyrównanie marginesów i urządzeń mobilnych. Będziesz także mógł zmienić ustawienia kolumn i kolejność na urządzeniu mobilnym.

Teraz możesz edytować ustawienia mobilne swojej strony, przełączając się do trybu widoku mobilnego i sprawdź następujące opcje, aby dostosować je do układu mobilnego.

1. Sprawdź, czy jakikolwiek nagłówek nie wygląda na zbyt duży na ekranie telefonu komórkowego.
2. Sprawdź dopełnienie treści lub spację po bokach treści
3. Sprawdź wyrównanie kolumn strony, jak to wygląda idealnie; wyśrodkowany, w prawo lub w lewo
4. Sprawdź kolejność kolumn, czy pojawiają się we właściwej kolejności lub musisz ją zmienić.

Teraz zajrzyjmy głębiej i dowiedzmy się, jak wszystko potoczy się z narzędziem do tworzenia stron Elementor.

Jak dostosować ustawienia telefonu komórkowego, komputera i karty

Prawie wszystkie edytowalne funkcje mają opcję dostosowania ustawień telefonu komórkowego, komputera i karty. jeśli klikniesz tryb responsywny u dołu menu

Dostosuj nagłówek na ekranie telefonu komórkowego

Czasami potrzebujemy pogrubionego i dobrze widocznego nagłówka w naszej witrynie na komputery stacjonarne i wygląda on doskonale na ekranie komputera, ale po włączeniu widoku mobilnego nagłówek zajmuje cały ekran i nie wygląda na pasujący.

Możesz dostosować rozmiar tekstu dowolnego elementu tekstowego na karcie i telefonie komórkowym. Możesz także ustawić różne rozmiary tekstu dla nagłówków telefonów komórkowych, które świetnie wyglądają na ekranie telefonu komórkowego i lepiej pasują do ekranu. Na tej stronie demonstracyjnej utworzyłem Nagłówek, który świetnie wygląda w witrynie na komputery, podczas gdy na ekranie mobilnym zajmuje cały ekran.

Jeśli kliknę opcję edycji kolumny nagłówka, mogę przejść do sekcji typografii, w której mogę dostosować rozmiar nagłówka, który wygląda dobrze na komputerze, a także na ekranie telefonu komórkowego. Mogę kontrolować oba osobno. W widoku witryny na komputery rozmiar nagłówka wynosi 49 pikseli, ale w widoku mobilnym nie pasuje

Aby zmienić ustawienia, kliknę mobilny tryb responsywny> styl> typografia> dostosuję rozmiar w pikselach do 30, co z łatwością mieści się na ekranie telefonu komórkowego.

Dostosuj dopełnienie lub marginesy dla telefonów komórkowych

Podczas dostosowywania wypełnień zaleca się, aby nie używać wartości w pikselach zamiast ustawionych wartości w EM lub procentach, ponieważ zachowa to rozmiar w stosunku do całkowitego rozmiaru ekranu.

Możesz zobaczyć, że użyliśmy dopełnienia 70 pikseli po prawej i lewej stronie, co wygląda dobrze w witrynie na komputery; Jednak widok mobilny dla tego ustawienia to kompletny bałagan.

Możemy dostosować dopełnienie do 17 pikseli z każdej strony, wtedy okazuje się, że jest w porządku.

Alternatywnie, możesz ustawić całe kolumny na 750 pikseli, gdzie zawartość będzie wyświetlana w ramce bez konieczności dostosowywania ekranu zarówno w widoku stacjonarnym, jak i mobilnym; automatycznie dostosuje zawartość w polu.

Utwórz każdą kolumnę poziomo, a będzie ona cudownie dopasowywać się do wszystkich urządzeń

Po utworzeniu kolumny poziomo, co projektanci preferują najbardziej, możesz powielić sekcje i zaoszczędzić czas. Twórz jedną sekcję na raz, a następnie używaj jej ponownie, jeśli pójdzie dobrze, aby zaoszczędzić czas.

Zmień obraz tła zgodnie z widokiem mobilnym / stacjonarnym

Niektóre obrazy tła wyglądają dobrze w widoku pulpitu, ale istnieje możliwość, że obraz nie będzie wyglądał tak dobrze, jak na ekranie telefonu komórkowego. Pomyśl więc kreatywnie i wybierz inny obraz na ekranie telefonu komórkowego. Aby wybrać inny widok mobilny, kliknij sekcję> zakładka stylu> kliknij ikonę urządzenia i wybierz widok mobilny. Teraz, niezależnie od tego, który obraz wybierzesz, pojawi się on tylko w widoku mobilnym.

Zmień widoczność dowolnej sekcji w widoku na komputery / urządzenia mobilne

Możesz także kontrolować widoczność dowolnej sekcji lub kolumny w zależności od urządzenia.

Czasami wyświetlamy nasze treści lub obrazy w dwóch lub trzech sekcjach lub w różnych kolumnach, ale nie lubimy wyświetlać ich na urządzeniach mobilnych. Dlatego Elementor może ukryć sekcję, której nie chcesz wyświetlać w widoku mobilnym.

Idź do> ustawienia sekcji> zaawansowane> responsywne Tam zobaczysz różne możliwości lub preferencje wizualne; możesz ukryć sekcję na pulpicie, ukryć na karcie lub ukryć na telefonie komórkowym, w zależności od preferencji.

Zmień kolejność kolumn

Możesz także zmienić kolejność kolumn w sekcji ustawień. Iść do; ustawienia sekcji> Zaawansowane> Responsywne> Odwróć kolumnę i kliknij tak.

Utwórz alternatywną sekcję

Twórz alternatywne sekcje w widoku mobilnym i stacjonarnym. Czasami sekcja suwaka nie wygląda tak dobrze na urządzeniu mobilnym, jak na komputerze stacjonarnym, więc możesz użyć dowolnej innej sekcji zamiast sekcji suwaka. Możesz to zrobić, przechodząc do zakładki Zaawansowane> włącz / wyłącz widoczność sekcji, której nie chcesz wyświetlać i dodaj do niej alternatywny obraz.

Dostosuj szerokość kolumny

Wszystkie sekcje kolumn mają 100% szerokości, gdy wyświetlasz je w widoku mobilnym. Jednak szerokość można zmienić zgodnie z szerokością kolumny na urządzeniach mobilnych. Jeśli masz dwie kolumny, możesz ustawić maksymalną szerokość każdej sekcji na 50%.

Wniosek

Elementor jest wyposażony we wszystkie zaawansowane funkcje, które pozwalają kontrolować responsywny układ kolumn na wszystkich rozmiarach ekranu. Pozwala na ponowne dostosowanie każdej sekcji zgodnie z wyborem trybu widoku. Utrzymanie witryny przyjaznej dla urządzeń mobilnych jest nieuniknione, ponieważ algorytm Google w największym stopniu uwzględnia ranking witryn przyjaznych dla urządzeń mobilnych. Responsywne strony internetowe są niezbędne nie tylko do lepszego pozycjonowania, ale także do uzyskania większego ruchu, ponieważ ponad 80% ruchu pochodzi z wyświetleń mobilnych.

Teraz kreator stron Elementor jest wyposażony w ekskluzywne funkcje, które pozwalają użytkownikom stworzyć witrynę przyjazną dla urządzeń mobilnych bez większego wysiłku. Mam nadzieję, że mój artykuł okaże się przydatny i uzyskałeś wszystkie odpowiedzi na temat tworzenia responsywnej witryny internetowej za pomocą Elementora.