Jak zmienić wysokość i szerokość bloku w WordPress

Dokładne dopasowanie rozmiaru bloków WordPress wymagało kiedyś niestandardowego CSS lub skomplikowanych obejść.

Wiemy o tym, ponieważ spędziliśmy niezliczone godziny, pomagając użytkownikom z tym właśnie problemem. Ale dzięki ostatnim aktualizacjom WordPress, kontrolowanie wymiarów bloków stało się znacznie prostsze.

Wielu ludzi zaskakuje fakt, że istnieje kilka wbudowanych sposobów dostosowania rozmiarów bloków w WordPress. Poprzez wiele eksperymentów zidentyfikowaliśmy najbardziej niezawodne metody, które działają w różnych sytuacjach i motywach.

W tym przewodniku podzielimy się najłatwiejszymi sposobami zmiany wysokości i szerokości bloków w WordPress.

Dlaczego zmieniać wysokość i szerokość bloku w WordPress?

Chociaż edytor bloków WordPress block editor ułatwia dodawanie treści, domyślne rozmiary bloków mogą nie zawsze pasować do projektu, który masz na myśli. Dostosowanie wysokości i szerokości bloku to prosty sposób na uzyskanie większej kontroli nad wyglądem strony.

Oto kilka kluczowych powodów, dla których możesz chcieć zmienić rozmiar bloku:

• Popraw układ wizualny: Kontrolując dokładny rozmiar elementów, możesz tworzyć bardziej zrównoważone i profesjonalnie wyglądające projekty.
• Zwiększ czytelność: Dostosowanie szerokości bloków tekstowych może ułatwić czytanie treści, zwłaszcza na szerokich ekranach.
• Zapewnij responsywność: Prawidłowe rozmiarowanie bloków pomaga treściom wyglądać świetnie na wszystkich urządzeniach, od komputerów stacjonarnych po telefony komórkowe.
• Stwórz nacisk: Zwiększenie lub zmniejszenie bloku może przyciągnąć uwagę do ważnych wezwań do działania lub kluczowych informacji.

Zrozumienie rozmiarów bloków w WordPressie

Zanim przejdziesz do metod, warto zrozumieć różne sposoby, w jakie WordPress pozwala definiować wymiary bloków:

Termin	Co to oznacza	Kiedy jej używać
Piksele (px)	Jednostka stałego rozmiaru, która nie zmienia się w zależności od rozmiaru ekranu.	Używaj pikseli, gdy chcesz, aby coś pozostało dokładnie tego samego rozmiaru wszędzie.
Procenty (%)	Elastyczna jednostka, która dostosowuje się do nadrzędnego kontenera.	Używaj procentów, aby układ wyglądał dobrze na wszystkich rozmiarach ekranu.
Szeroka szerokość	Wyrównanie w WordPressie, które sprawia, że blok jest szerszy niż obszar treści, ale nie na cały ekran.	Użyj tego, aby sekcje wyróżniały się, nie rozciągając się na całą stronę.
Pełna szerokość	Wyrównanie w WordPressie, które rozciąga blok od krawędzi do krawędzi ekranu.	Wypróbuj to dla sekcji głównych, banerów lub dużych obrazów tła.
Minimalna wysokość	Określa najmniejszą wysokość, jaką może mieć blok, ale pozwala mu rosnąć w razie potrzeby.	Wybierz to, gdy chcesz, aby sekcje (takie jak bloki Okładka) zachowały stałą wysokość.

Teraz zobaczmy, jak łatwo możesz zmienić wysokość i szerokość bloku w WordPressie.

Omówimy kilka różnych metod, a Ty możesz skorzystać z poniższych szybkich linków, aby przejść do tej, której chcesz użyć:

Metoda 1: Zmień wysokość i szerokość bloku za pomocą ustawień bloku

W tej metodzie pokażemy Ci, jak zmienić wysokość i szerokość bloku za pomocą domyślnych ustawień WordPressa.

Chociaż WordPress nie oferuje dokładnie takich samych opcji zmiany rozmiaru dla każdego pojedynczego bloku, edytor bloków zapewnia kilka potężnych sposobów dostosowania wysokości i szerokości różnych bloków.

Zacznijmy od bloku Obraz w WordPress.

W przypadku bloku Obraz możesz dostosować jego szerokość za pomocą opcji wyrównania. Kliknij przycisk „Wyrównaj” na pasku narzędzi nad blokiem.

Wybranie opcji „Szeroki rozmiar” sprawi, że obraz zajmie większość obszaru treści, podczas gdy „Pełny rozmiar” rozciągnie go na całą stronę.

Możesz również dostosować rozmiar wyświetlania obrazu, przechodząc do panelu „Ustawienia bloku” po prawej stronie.

W sekcji „Ustawienia” użyj menu rozwijanego „Rozmiar obrazu”, aby wybrać spośród predefiniowanych opcji, takich jak Miniatura, Średni, Duży lub Pełny rozmiar.

Zmieni to wymiary obrazu, aby pasowały do wybranego ustawienia.

Możesz również dostosować szerokość i wysokość bloku, wpisując preferowany rozmiar w pikselach w polach „Szerokość” i „Wysokość” w sekcji „Wymiary obrazu”.

Poniżej możesz również dostosować rozmiar bloku w procentach.

Inną metodą zmiany rozmiaru bloku Obraz jest kliknięcie samego obrazu, co spowoduje wyświetlenie niebieskiej ramki z okrągłymi uchwytami.

Następnie po prostu przeciągnij te kotwice, aby zmienić wysokość i szerokość bloku obrazu.

Po zakończeniu kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać ustawienia.

Metoda 2: Zmień szerokość bloku za pomocą bloku Kolumny

Jeśli blok, który chcesz zmienić rozmiar, nie ma wbudowanych kontrolek rozmiaru, tak jak blok Akapit, ta metoda jest dla Ciebie. Działa jako obejście, umieszczając Twój blok w kontenerze, którym możesz sterować.

W tej metodzie umieścimy nasz blok wewnątrz bloku Kolumny. Jest to kontener, w którym można dodawać różne bloki w każdej kolumnie.

Następnie możesz głównie kontrolować szerokość bloków wewnątrz, dostosowując szerokość kolumn. Wysokość kolumny automatycznie dopasuje się do jej zawartości.

Najpierw kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu.

Stąd zlokalizuj i dodaj blok Kolumny do edytora Gutenberga. Następnie zostaniesz poproszony o wybranie wariantu.

Następnie układ kolumn zostanie wyświetlony na ekranie, a Ty możesz teraz dodać blok, który chcesz, klikając przycisk „Dodaj blok (+)” wewnątrz kolumny.

Po dodaniu bloku można kontrolować jego szerokość, dostosowując kolumnę, w której się znajduje.

Po prostu wybierz kolumnę, a w panelu ustawień bloku po prawej stronie możesz zmienić szerokość kolumny w sekcji „Ustawienia”. Spowoduje to zmianę rozmiaru znajdującego się w niej bloku.

Po zakończeniu po prostu kliknij przycisk „Opublikuj”, aby zapisać zmiany.

Tak wyglądały treści na naszej stronie demonstracyjnej po zmianie rozmiaru i wyrównaniu dwóch bloków akapitów w bloku dwukolumnowym.

Metoda 3: Zmień wysokość i szerokość bloku za pomocą bloku Grupa

Blok Grupa jest doskonały do organizowania wielu bloków i zarządzania ich układem oraz odstępami. Chociaż nie ustawia bezpośrednio wysokości i szerokości poszczególnych bloków wewnątrz, możesz kontrolować ogólne wymiary grupy i sposób rozmieszczenia jej zawartości.

Najpierw musisz kliknąć przycisk „Dodaj blok” (+). Następnie zlokalizuj i dodaj blok Grupa do edytora treści.

Po dodaniu blok Grupa zaoferuje opcje układu, takie jak „Grupa”, „Wiersz” lub „Stos”. W tym samouczku użyjemy domyślnego układu „Grupa”.

Po tym na ekranie pojawi się przycisk „Dodaj blok”. Możesz teraz dodać dowolny blok, który chcesz.

W tym samouczku dodamy i zmienimy rozmiar bloku nagłówka, bloku akapitu i bloku obrazu.

Aby dodać wiele bloków do Grupy, kliknij przycisk „Wybierz grupę” z paska narzędzi bloku.

Po wybraniu Grupy po prostu kliknij przycisk „Dodaj blok” (+) na dole.

Po wykonaniu tej czynności otworzy się pasek boczny ustawień bloku po prawej stronie. Stąd możesz łatwo dostosować układ, wyrównanie i orientację wszystkich bloków.

Dostosowanie tych ustawień układu wpłynie na sposób rozmieszczenia bloków i ilość zajmowanego przez nie miejsca w grupie. Możesz konfigurować te ustawienia, dopóki nie będziesz zadowolony z wyniku.

Po zakończeniu kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać ustawienia.

Tak wyglądał blok Grupa na naszej stronie demonstracyjnej.

Metoda 4: Zmień wysokość bloku za pomocą bloku Okładka

Ta metoda zmiany rozmiaru jest dla Ciebie, jeśli chcesz użyć bloku Okładka i ustawić określoną minimalną wysokość dla sekcji. Jest idealna do tworzenia pełnoekranowych banerów lub obrazów nagłówkowych z tekstem i innymi treściami na wierzchu.

Najpierw kliknij przycisk „Dodaj blok” (+) na górze i znajdź blok Okładka.

Po wykonaniu tej czynności zostaniesz poproszony o wybranie koloru lub przesłanie obrazu z biblioteki multimediów WordPress. Ten obraz lub kolor zostanie użyty jako tło dla bloku Okładka.

Następnie po prostu przeciągnij i upuść dowolny blok, który chcesz, do bloku Pokrywa.

Następnie musisz kliknąć blok Okładka, aby otworzyć jego ustawienia w prawej kolumnie.

Stąd przewiń w dół do panelu „Wymiary”, gdzie możesz dostosować wysokość bloku Obraz tła za pomocą pikseli.

Na koniec nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować swoje ustawienia.

Aby uzyskać bardziej szczegółowe instrukcje dotyczące korzystania z bloku Okładka, zapoznaj się z naszym przewodnikiem dla początkujących na temat Obrazek okładki a obrazek wyróżniający w edytorze bloków WordPress.

Bonus: Twórz piękne strony za pomocą zaawansowanych bloków w SeedProd

Możesz łatwo tworzyć piękne i estetyczne strony za pomocą wtyczki SeedProd.

Jest to najlepszy kreator stron WordPress na rynku, który pozwala tworzyć strony docelowe za pomocą bloków, które są bardzo łatwe do dostosowania i zmiany rozmiaru zgodnie z Twoimi potrzebami.

Kilka naszych marek partnerskich użyło tego narzędzia do zaprojektowania całych swoich stron internetowych, a ich użytkownicy pokochali świeży, nowoczesny wygląd. Aby dowiedzieć się więcej, zapoznaj się z naszą recenzją SeedProd.

Krok 1: Zainstaluj i aktywuj SeedProd

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej szczegółów, możesz przeczytać nasz przewodnik na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do strony SeedProd » Ustawienia ze swojego panelu WordPress i wprowadzić klucz licencyjny w polu „Klucz licencyjny”.

Klucz licencyjny znajdziesz na stronie swojego konta w witrynie SeedProd.

Krok 2: Utwórz nową stronę docelową

Następnie przejdź do ekranu SeedProd » Strony docelowe z paska bocznego administratora, aby rozpocząć tworzenie strony docelowej.

Stąd po prostu kliknij przycisk „Dodaj nową stronę docelową”.

Zostaniesz teraz przeniesiony do ekranu „Wybierz nowy szablon strony”. SeedProd oferuje wiele gotowych szablonów, z których możesz wybierać.

Po wybraniu szablonu zostaniesz poproszony o podanie nazwy i adresu URL swojej strony docelowej.

Po dodaniu tych szczegółów, po prostu kliknij przycisk „Zapisz i zacznij edytować stronę”, aby kontynuować.

Krok 3: Zmień wymiary bloku obrazu

Spowoduje to uruchomienie kreatora stron metodą przeciągnij i upuść SeedProd, gdzie możesz teraz rozpocząć edycję swojej strony. Szczegółowe instrukcje znajdziesz w naszym przewodniku na temat tworzenia strony docelowej w WordPress.

W tym samouczku dodamy i zmienimy rozmiar bloku Obraz i bloku Przycisk.

Najpierw musisz przeciągnąć blok Obraz z panelu bloków po lewej stronie i upuścić go w dowolnym miejscu na stronie.

Następnie kliknij blok Obraz, aby otworzyć jego ustawienia w lewej kolumnie. Stąd możesz przesłać obraz z biblioteki multimediów.

Następnie możesz zmienić wysokość i szerokość bloku, używając pikseli lub procentów.

Możesz również dopracować odstępy wokół i wewnątrz bloku obrazu, przełączając się na kartę „Zaawansowane” u góry panelu ustawień.

Następnie kliknij panel „Odstępy”, aby rozwinąć jego ustawienia.

Tutaj możesz dodać wartości, aby dostosować margines bloku (przestrzeń na zewnątrz bloku) i dopełnienie (przestrzeń wewnątrz bloku) zgodnie z Twoimi potrzebami.

Możesz dostosować margines i dopełnienie dla górnego, dolnego, lewego i prawego obszaru bloku.

Krok 4: Dostosuj wysokość bloku separatora

Dzięki Seedprod możesz również dodać blok Spacer między dwoma różnymi blokami, aby umieścić między nimi trochę przestrzeni.

Najpierw musisz zlokalizować i dodać blok „Separator” z lewej kolumny. Następnie kliknij go, aby otworzyć jego ustawienia.

Teraz możesz kontrolować wysokość separatora za pomocą suwaka „Wysokość”.

Blok separatora może pomóc w stworzeniu przejrzystej strony internetowej.

Krok 5: Skonfiguruj dopełnienie bloku przycisku

Możesz również zmienić szerokość i wysokość innych bloków w ten sam sposób, w tym bloków Wideo, Nagłówek i Przycisk.

Po prostu znajdź blok Przycisk w lewej kolumnie i przeciągnij go na swoją stronę.

Następnie musisz kliknąć przycisk, aby otworzyć jego ustawienia bloku.

Stąd przejdź do karty „Zaawansowane” u góry. Możesz zwiększyć pionowy rozmiar przycisku, przesuwając suwak „Dopełnienie pionowe”, który dodaje przestrzeń nad i pod tekstem przycisku.

Aby zwiększyć jego poziomy rozmiar, przesuń suwak „Dopełnienie poziome”, dodając przestrzeń po lewej i prawej stronie tekstu.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz”.

Często zadawane pytania dotyczące zmiany szerokości i wysokości bloku

Oto kilka pytań, które nasi czytelnicy często zadawali na temat zmiany szerokości i wysokości bloków w WordPressie:

Jak zmniejszyć rozmiar bloku w WordPressie?

Możesz zmniejszyć rozmiar bloku w WordPressie, dostosowując jego szerokość, dopełnienie lub rozmiar czcionki w ustawieniach bloku. Zacznij od wybrania bloku i zmniejszenia wymiarów lub odstępów, aż będzie wyglądać odpowiednio.

Jak zmienić rozmiar bloku tekstowego w WordPressie?

Możesz zmienić rozmiar bloku tekstowego w WordPressie, zmieniając rozmiar czcionki w ustawieniach typografii. Możesz również dostosować wysokość linii lub odstępy, jeśli tekst nadal wydaje się zbyt duży.

Jak dostosować odstępy między blokami w WordPressie?

Możesz dostosować odstępy między blokami w WordPressie, edytując ustawienia marginesów i dopełnienia. Zalecamy najpierw zmniejszenie dopełnienia, jeśli wewnątrz bloku jest zbyt dużo miejsca.

Jak zmienić rozmiar strony internetowej w WordPressie?

Możesz zmienić rozmiar strony internetowej w WordPressie, zmieniając ustawienia układu w swoim motywie lub kreatorze stron. Możesz spróbować przełączać się między układami pudełkowymi a pełnoekranowymi, w zależności od pożądanego projektu.

Jak zmniejszyć rozmiar strony internetowej w WordPressie?

Rozmiar strony internetowej w WordPress można zmniejszyć, redukując rozmiary czcionek, odstępy i szerokości kontenerów. Zacznij od wprowadzania drobnych korekt w różnych elementach, zamiast zmieniać wszystko naraz.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak zmienić szerokość i wysokość bloku w WordPress. Możesz również zapoznać się z naszym artykułem na temat dodawania i wyrównywania obrazów w edytorze bloków WordPress oraz naszymi najlepszymi wyborami dla najlepszych motywów WordPress przyjaznych dla Gutenberga.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.