Przełącz menu

Jak używać Beaver Builder, aby WordPress był responsywny (4 kroki)

Opublikowany: 2023-06-16

25% zniżki na wszystkie produkty Beaver Builder... Pośpiesz się, wyprzedaż wkrótce się skończy! Dowiedz się więcej

Beaver-Builder-Blog-1500-x-844
  • Budowniczy bobrów

Jak używać Beaver Builder, aby WordPress był responsywny (4 kroki)

Obecnie większość przeglądania Internetu odbywa się na urządzeniach przenośnych, takich jak smartfony i tablety. Oznacza to, że bardzo ważne jest, abyś wiedział, jak używać Beaver Builder, aby WordPress był responsywny.

Responsywna strona internetowa to taka, która dopasowuje się do wielkości urządzenia, na którym jest przeglądana, dzięki czemu Twoja witryna będzie wyglądać świetnie i będzie łatwa w obsłudze na każdym urządzeniu, niezależnie od tego, czy jest małe, czy duże.

Beaver Builder może pomóc Ci sprawić, że WordPress będzie responsywny dzięki responsywnym narzędziom do edycji. Kreator stron daje Ci pełną kontrolę nad wyglądem Twojej witryny, niezależnie od tego, z jakiego urządzenia korzystają odwiedzający.

W tym artykule omówimy znaczenie responsywnych stron internetowych. Następnie pokażemy Ci, jak używać Beaver Builder, aby WordPress był responsywny w czterech krokach. Przejdźmy do tego!

Spis treści:

  • Dlaczego potrzebujesz responsywnej strony internetowej
  • Jak używać Beaver Builder, aby WordPress był responsywny (4 kroki)
    1. Krok 1: Użyj szablonów Beaver Builder
    2. Krok 2: Użyj responsywnego trybu edycji
    3. Krok 3: Spraw, aby poszczególne elementy były responsywne
    4. Krok 4: Ustaw responsywne domyślne style tekstu
  • Wniosek
  • Powiązane pytania

Dlaczego potrzebujesz responsywnej strony internetowej

Koncepcja responsywnej strony internetowej jest prosta. Jest to witryna, która powinna wyglądać i działać bezbłędnie (lub możliwie jak najbliżej) na szerokiej gamie urządzeń, w tym mobilnych.

Im mniejszy ekran, tym trudniej jest stworzyć projekt łatwy w obsłudze i dobrze wyglądający:

Tworzenie responsywnej strony internetowej przy użyciu Beaver Builder

Jak wspomnieliśmy wcześniej, większość użytkowników przegląda strony internetowe przede wszystkim za pomocą urządzeń mobilnych. Oznacza to, że jeśli witryna nie będzie działać prawidłowo na małym ekranie lub będzie zapewniać użytkownikom nieodpowiednie doświadczenia, nie będzie popularna. Innymi słowy, uzyskasz mniejszy ruch, wyższy współczynnik odrzuceń i mniej konwersji.

Nowoczesne strony responsywne w dużej mierze opierają się na tak zwanych „punktach przerwania”. Możesz skonfigurować elementy na stronie, aby modyfikować ich styl i funkcjonalność w zależności od rozdzielczości, w jakiej są przeglądane, a także ustawić wiele punktów przerwania. Dzięki temu można tworzyć projekty, które działają dla większej liczby typów urządzeń.

Robienie tego ręcznie wymaga dużej biegłości w projektowaniu i tworzeniu stron internetowych. Dobra wiadomość jest taka, że ​​Beaver Builder zawiera responsywny tryb edytora, który znacznie ułatwia ten proces.

Jak używać Beaver Builder, aby WordPress był responsywny (4 kroki)

Jedną z najlepszych cech używania Beaver Builder do tworzenia witryn WordPress jest to, że dołączone szablony są dość responsywne i nie wymagają wykonywania dużej ilości dodatkowej pracy. Jednak nadal zalecamy przetestowanie każdego projektu i modułu, aby zobaczyć, jak wygląda na różnych urządzeniach przed opublikowaniem pliku .

W kolejnych sekcjach pokażemy, jak przetestować projekty Beaver Builder pod kątem responsywności. Najpierw porozmawiajmy o układach responsywnych.

Krok 1: Użyj szablonów Beaver Builder

Najłatwiejszym sposobem, aby WordPress był responsywny za pomocą Beaver Builder, jest użycie jednego z naszych wstępnie ustawionych układów. Beaver Builder zawiera szeroką gamę szablonów stron, których możesz używać w swojej witrynie. Obejmuje to opcje dla stron docelowych , stron z treścią i mikrostron :

Szablony stron docelowych Beaver Builder

Układy te są w pełni konfigurowalne i dostępne są opcje dla prawie każdego typu strony. Możesz użyć szablonu przypominającego typ projektu, którego chcesz użyć. Następnie możesz dostosować układ, modyfikując moduły, zmieniając ich układ lub dodając nowe elementy do strony.

Podstawową zaletą korzystania z szablonów Beaver Builder jest to, że są one w pełni responsywne. Oznacza to, że są skonfigurowane tak, aby świetnie wyglądać na wszystkich typach urządzeń i rozdzielczościach ekranów.

W każdym razie nigdy nie powinieneś publikować strony przed samodzielnym sprawdzeniem jej responsywności. Beaver Builder umożliwia to za pomocą responsywnego narzędzia do edycji.

Krok 2: Użyj responsywnego trybu edycji

Kiedy używasz Beaver Builder, możesz dokładnie zobaczyć, jak strona będzie wyglądać w interfejsie podczas jej edycji. Jednak domyślnie edytor Beaver Builder pokazuje tylko, jak strony będą wyglądać na pełnym ekranie w sporej rozdzielczości:

Edytor Beaver Builder

Jeśli chcesz zobaczyć, jak układ będzie wyglądał na ekranach o różnej wielkości, musisz skorzystać z responsywnego trybu edycji Beaver Builder. Dostęp do tego trybu można uzyskać z menu Narzędzia w lewym górnym rogu ekranu lub naciskając klawisz R.

Po otwarciu trybu edycji responsywnej zobaczysz cztery unikalne punkty przerwania dla projektowanego układu. Każdy punkt przerwania ma ustawioną rozdzielczość. Na przykład mały punkt przerwania jest domyślnie wyzwalany dla ekranów o rozdzielczości poniżej 360 x 1131:

Korzystanie z responsywnego trybu edycji Beaver Builder

Możesz zmienić punkty przerwania dla różnych układów, które chcesz zaprojektować. Edytor Beaver Builder działa tak samo niezależnie od rozdzielczości, w której pracujesz. Jedyna różnica polega na tym, że sam układ ulegnie zmianie, ponieważ pracujesz na mniejszej przestrzeni.

Beaver Builder zawiera cztery punkty przerwania, dzięki czemu masz większą kontrolę nad tym, jak Twoje strony wyglądają na urządzeniach każdej wielkości.:

  • Bardzo duży: ten punkt przerwania dotyczy urządzeń o szerokości ekranu 1200 pikseli lub większej.
  • Duży: ten punkt przerwania jest przeznaczony dla urządzeń o szerokości ekranu od 993 do 1200 pikseli.
  • Średni: ten punkt przerwania jest przeznaczony dla urządzeń o szerokości ekranu od 769 do 992 pikseli.
  • Mały: ten punkt przerwania jest przeznaczony dla urządzeń o szerokości ekranu 768 pikseli lub mniejszej.

Każdy punkt przerwania może wyglądać zupełnie inaczej w zależności od dokonanych wyborów projektowych. Aby zobaczyć, jak to działa, przyjrzyjmy się, jak sprawić, by poszczególne elementy były responsywne za pomocą Beaver Builder.

Krok 3: Spraw, aby poszczególne elementy były responsywne

Jak już wspomnieliśmy, głównym sposobem, w jaki Beaver Builder umożliwia responsywność WordPressa, jest użycie zestawu punktów przerwania. Każdy punkt przerwania reprezentuje wygląd strony w zależności od rozdzielczości używanej do jej przeglądania.

Oprócz punktów przerwania Beaver Builder umożliwia także modyfikowanie kolejności lub „układania” elementów i kolumn w różnych rozdzielczościach. We wcześniejszym przykładzie pokazaliśmy stronę O nas , która zawierała zdjęcie głowy pracownika w połowie ekranu. Jeśli dostosowujemy układ tej strony do mniejszych rozdzielczości, możemy przesunąć ten obraz w górę, tak aby ułożenie kolumn odwróciło kolejność na urządzeniach mobilnych:

Zmiana układu responsywnej strony internetowej w Beaver Builder

Kolejność układania dla jednego punktu przerwania nie ma wpływu na pozostałe. Oznacza to, że ta sama strona może wyglądać zupełnie inaczej, zarówno pod względem wyglądu, jak i funkcjonalności dla odwiedzających o różnych rozdzielczościach.

W praktyce nie jest to najlepszy pomysł. Twoja witryna powinna wyglądać spójnie na wszystkich urządzeniach. Możesz jednak zmienić rozmieszczenie elementów, jeśli uważasz, że poprawi to komfort korzystania z urządzenia mobilnego. Możesz na przykład zdecydować się na wcześniejsze wyświetlanie wezwań do działania w mniejszych rozdzielczościach, aby użytkownicy nie musieli przewijać strony w dół, aby podjąć działanie.

Jeśli spojrzysz na ekran ustawień poszczególnych kolumn lub modułów, możesz także skonfigurować ich widoczność. Ustawienia widoczności umożliwiają pomijanie elementów z określonych punktów przerwania, co może być przydatne podczas pracy z mniejszymi rozdzielczościami:

Konfigurowanie ustawień widoczności w Beaver Builder

Ponadto możesz skonfigurować elementy tak, aby były wyświetlane wszystkim lub użytkownikom zalogowanym lub niezalogowanym. Jednak te funkcje widoczności są przeznaczone dla witryn członkowskich, więc prawdopodobnie możesz je zignorować, jeśli chodzi o zwiększenie responsywności Twoich projektów.

Krok 4: Ustaw responsywne domyślne style tekstu

Jedną rzeczą, którą możesz zauważyć podczas korzystania z edycji responsywnej, jest to, że rozmiary i style tekstu nie zmieniają się w punktach przerwania. Może to być prawidłowy wybór projektu, ponieważ duży tekst jest łatwiejszy do odczytania na mniejszych urządzeniach. Jeśli jednak chcesz dostosować wygląd tekstu w różnych rozdzielczościach, możesz to zrobić w wierszach, kolumnach lub modułach Beaver Builder. Alternatywnie, jeśli masz zainstalowany motyw Beaver Builder, możesz skonfigurować style tekstu w dostosowywaniu.

W tym drugim przypadku przejdź do Wygląd> Dostosuj w panelu WordPress, a następnie przejdź do karty Ustawienia wstępne. Stamtąd możesz skonfigurować ustawienia zarówno dla nagłówków, jak i tekstu ogólnego.

Na początek przejdź do Ogólne > Nagłówki i wybierz opcję Wszystkie nagłówki . Poniższe menu umożliwia skonfigurowanie rodziny czcionek, grubości i formatu, których chcesz używać w nagłówkach od H1 do H6:

Zmiana stylów tekstu nagłówka w Beaver Builder

Jeśli spojrzysz na lewy dolny róg ekranu, zobaczysz, że możesz przełączyć konfigurację z komputera stacjonarnego na tablety i urządzenia mobilne. Oznacza to, że możesz ustawić różne style tekstu nagłówka dla wszystkich trzech punktów przerwania.

Aby zmienić styl tekstu ogólnego, wróć do menu Ogólne i przejdź do ekranu Tekst . Tutaj możesz skonfigurować rodzinę czcionek, grubość, rozmiar i wysokość linii dla tekstu ogólnego:

Konfiguracja tekstu responsywnego w Beaver Builder

Podobnie jak w przypadku nagłówków, możesz skonfigurować style tekstu dla dużych ekranów, tabletów i urządzeń mobilnych. Ustawienia, które tu zastosujesz, pojawią się w edytorze Beaver Builder, gdy będziesz korzystać z trybu responsywnego. Pamiętaj, aby przetestować wszelkie zmiany wprowadzone w stylach tekstu, aby zobaczyć, jak wpływają one na czytelność, i kontynuuj ich ulepszanie, aż będziesz zadowolony z wyników.

Wniosek

Istnieje wiele sposobów, aby nowoczesne strony internetowe były responsywne. Jeśli korzystasz z WordPressa i Beaver Builder, proces jest znacznie prostszy. Większość projektów Beaver Builder jest responsywna od razu po wyjęciu z pudełka. Co więcej, zyskujesz dostęp do narzędzi, które dają Ci pełną kontrolę nad tym, jak Twoja witryna wygląda w różnych rozdzielczościach. Oznacza to, że jeśli chodzi o wygodę użytkownika mobilnego, nie pozostawiasz niczego przypadkowi.

Jeśli dopiero zaczynasz korzystać z Beaver Builder, możesz nie wiedzieć, jak go używać do projektowania responsywnych witryn WordPress:

  1. Użyj układów Beaver Builder.
  2. Użyj responsywnego trybu edycji.
  3. Spraw, aby poszczególne elementy były responsywne.
  4. Ustaw responsywne domyślne style tekstu.

Powiązane pytania

Czy WordPress jest domyślnie responsywny?

To, czy Twoja witryna WordPress jest responsywna, czy nie, będzie w dużej mierze zależeć od motywu, którego wybierzesz. Bez motywu WordPress jest w zasadzie pustą kartą. Oznacza to, że musisz upewnić się, że wybierasz motyw, który jest zarówno responsywny, jak i wysoce konfigurowalny.

Dlaczego moja witryna WordPress nie jest responsywna?

Jeśli Twoja witryna WordPress nie wygląda dobrze na urządzeniach mobilnych, być może nie używasz responsywnego motywu. Korzystanie z motywu o responsywnym wyglądzie powinno zapewnić użytkownikom znacznie lepsze wrażenia i wymagać mniej dostosowywania z Twojej strony. Możesz także użyć narzędzi do tworzenia stron, takich jak Beaver Builder, aby WordPress był responsywny.

Czy Beaver Builder jest przyjazny dla urządzeń mobilnych?

Beaver Builder oferuje różnorodne narzędzia i funkcje, dzięki którym jest przyjaznym dla urządzeń mobilnych narzędziem do tworzenia stron WordPress. Możesz użyć edycji responsywnej, aby zmienić wygląd stron w różnych rozdzielczościach. Narzędzie do tworzenia stron zawiera także w pełni responsywne szablony stron, których możesz użyć do szybkiego rozpoczęcia projektów.

O Willu Morrisie

Will Morris jest autorem w WordCandy. Kiedy nie pisze o WordPressie, lubi wystawiać swój stand-up w mediach lokalnych.

Nasz biuletyn

Nasz biuletyn jest pisany osobiście i wysyłany mniej więcej raz w miesiącu. Nie jest to ani trochę irytujące ani spamerskie.
Obiecujemy.

Dołącz do Newslettera

Wypróbuj Beaver Builder już dziś

Beaver Builder