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

Strona internetowa responsywna dla urządzeń mobilnych jest istotną częścią każdego biznesu internetowego.

Google wykorzystuje szybkość ładowania stron mobilnych jako kluczowy czynnik wpływający na ranking wyszukiwania dowolnej witryny. Dzieje się tak głównie dlatego, że ponad połowa światowego ruchu w sieci pochodzi z ruchu mobilnego.

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

• Czym jest responsywny projekt strony internetowej Elementor
• Jak dostosować ustawienia urządzeń mobilnych, komputerów stacjonarnych i kart
• Dostosuj nagłówek na wyświetlaczu telefonu komórkowego
• Dostosuj dopełnienie lub marginesy dla urządzeń mobilnych
• Utwórz każdą kolumnę poziomo, a będzie ona doskonale dopasowywana na wszystkich urządzeniach
• Zmień obraz tła zgodnie z widokiem mobilnym/komputerowym
• Zmień widoczność dowolnej sekcji w widoku stacjonarnym/mobilnym
• 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ść do każdego rozmiaru ekranu. Automatycznie zmienia rozmiar obrazów i treści na ekranie telefonu komórkowego, dzięki czemu widzowie mogą 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 motywu całkowicie się psuje na ekranie urządzenia mobilnego.

Aby przezwyciężyć takie sytuacje, opracowaliśmy rozwiązanie responsywne dla urządzeń mobilnych, w którym możesz zbudować projekt witryny od podstaw, korzystając z stron Elementor . Za pomocą tych narzędzi responsywnych dla urządzeń mobilnych możesz dostosować dowolny zakątek układu swojej witryny, zwłaszcza typografię, dopełnienie oraz wyrównanie marginesów i urządzeń mobilnych. Będziesz także mógł zmienić ustawienia kolumn i złożyć zamówienie na urządzeniu mobilnym.

Teraz możesz edytować ustawienia mobilne swojej strony, przełączając się na tryb widoku mobilnego i zaznaczając poniższe opcje, aby dostosować je do układu mobilnego.

1. Sprawdź, czy któryś nagłówek nie wydaje się zbyt duży na ekranie urządzenia mobilnego.
2. Sprawdź dopełnienie treści lub przestrzeń po bokach treści
3. Sprawdź wyrównanie kolumn strony, jak to wygląda idealnie; wyśrodkowany, prawy lub lewy
4. Sprawdź kolejność kolumn, czy występują w prawidłowej kolejności lub musisz ją zmienić.

Teraz spójrzmy głębiej i dowiedzmy się, jak wszystko będzie działać z narzędziem do tworzenia stron Elementor.

Jak dostosować ustawienia urządzeń mobilnych, komputerów stacjonarnych i kart

Prawie wszystkie edytowalne funkcje mają opcję dostosowania ustawień urządzeń mobilnych, komputerów stacjonarnych i kart. jeśli klikniesz tryb responsywny na dole menu

Dostosuj nagłówek na wyświetlaczu telefonu komórkowego

Czasami potrzebujemy odważnego i widocznego nagłówka w naszej witrynie na komputery stacjonarne, który wygląda doskonale na ekranie komputera, ale po włączeniu widoku mobilnego nagłówek zajmuje cały ekran i nie wygląda, jakby pasował.

Możesz dostosować rozmiar tekstu dowolnego elementu tekstowego na karcie i urządzeniu mobilnym. Możesz także ustawić różne rozmiary tekstu dla nagłówków mobilnych, które będą świetnie wyglądać na ekranie telefonu komórkowego i lepiej dopasowują się do ekranu. Na tej stronie demonstracyjnej stworzyłem nagłówek, który wygląda świetnie na stronie na komputery stacjonarne, podczas gdy na ekranie mobilnym zajmuje cały ekran.

Jeśli kliknę opcję edycji kolumny nagłówka, mogę przejść do sekcji typografii, gdzie mogę dostosować rozmiar nagłówka, który będzie dobrze wyglądał zarówno na komputerze stacjonarnym, jak i na ekranie telefonu komórkowego. Mogę sterować obydwoma oddzielnie. W widoku witryny na komputery stacjonarne rozmiar nagłówka wynosi 49 pikseli, ale w widoku mobilnym nie mieści się

Aby ponownie dostosować, kliknę tryb responsywny na urządzenia mobilne > styl > typografia > dostosuj rozmiar w pikselach do 30, który z łatwością mieści się na ekranie urządzenia mobilnego.

Dostosuj dopełnienie lub marginesy dla urządzeń mobilnych

Podczas dostosowywania dopełnienia zaleca się, aby nie używać wartości w pikselach zamiast ustawiać 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 dobrze wygląda na stronie na komputery stacjonarne; jednak widok mobilny dla tego ustawienia to kompletny bałagan.

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

Alternatywnie możesz ustawić ustawienie całych kolumn na 750 pikseli, dzięki czemu Twoja treść będzie wyświetlana w ramce bez konieczności dostosowywania ekranu zarówno w widoku stacjonarnym, jak i mobilnym; automatycznie dostosuje zawartość pudełka.

Utwórz każdą kolumnę poziomo, a będzie ona doskonale dopasowywana na wszystkich urządzeniach

Gdy utworzysz kolumnę poziomo, co projektanci preferują najbardziej, możesz powielić sekcje i zaoszczędzić czas. Twórz po jednej sekcji na raz, a następnie używaj jej ponownie, jeśli wszystko pójdzie dobrze, aby zaoszczędzić czas.

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

Niektóre obrazy tła wyglądają dobrze w widoku na komputerze, ale istnieje możliwość, że obraz nie będzie wyglądał tak ładnie jak na ekranie urządzenia mobilnego. Pomyśl więc kreatywnie i wybierz inny obraz na ekranie mobilnym. Aby wybrać inny widok mobilny, kliknij sekcję > zakładka Styl > 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 stacjonarnym/mobilnym

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

Czasami wyświetlamy naszą treść lub obrazy w dwóch lub trzech sekcjach lub 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.

Przejdź do > ustawienia sekcji > zaawansowane > responsywne Tam zobaczysz różne możliwości lub preferencje wizualne; możesz ukryć sekcję na komputerze, na karcie lub na urządzeniu mobilnym, w zależności od preferencji.

Zmień kolejność kolumn

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

Utwórz alternatywną sekcję

Utwórz alternatywne sekcje w widoku mobilnym i stacjonarnym. Czasami sekcja suwaka nie wygląda tak użyteczna na urządzeniu mobilnym, jak na komputerze, więc możesz użyć dowolnej innej sekcji zamiast korzystać z 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 uzyskują 100% szerokości podczas przeglądania ich w widoku mobilnym. Jednakże szerokość można zmienić w zależności od szerokości kolumny w telefonie komórkowym. Jeśli masz dwie kolumny, możesz ustawić maksymalną szerokość każdej sekcji na 50%.

Wniosek

Elementor zawiera wszystkie zaawansowane funkcje umożliwiające kontrolowanie responsywnego układu kolumn dla wszystkich rozmiarów ekranu. Umożliwia ponowne dostosowanie każdej sekcji zgodnie z wyborem trybu widoku. Utrzymanie witryny przyjaznej dla urządzeń mobilnych jest nieuniknione, ponieważ algorytm Google najbardziej uwzględnia ranking witryn dostosowanych do urządzeń mobilnych. Responsywne strony internetowe są nie tylko niezbędne do uzyskania lepszego SEO, ale także do uzyskania większego ruchu, ponieważ ponad 80% ruchu pochodzi z wyświetleń mobilnych.

Teraz narzędzie do tworzenia stron Elementor ma ekskluzywne funkcje, które pozwalają użytkownikom tworzyć witryny przyjazne dla urządzeń mobilnych bez większego wysiłku. Mamy nadzieję, że mój artykuł okaże się przydatny i znajdziesz wszystkie odpowiedzi na temat tworzenia responsywnej witryny internetowej za pomocą Elementora.