Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Domyślnie WordPress ułatwia tworzenie 111111 pięknych układów treści dla twoich wpisów i stron za pomocą bloków. Czasami jednak możesz chcieć zmienić rozmiar tych bloków, aby wyglądały lepiej.

Niezależnie od tego, czy chodzi o dopracowanie wyglądu strony, czy zapewnienie spójności na różnych urządzeniach, nauka dostosowywania wymiarów bloków może poprawić estetykę i użyteczność witryny.

W WPBeginner używamy edytora bloków od kilku lat i napotkaliśmy sytuacje, w których musieliśmy dostosować rozmiary bloków, aby nasza strona wyglądała atrakcyjnie wizualnie. Po drodze poznaliśmy różne wskazówki i sztuczki ułatwiające zmianę rozmiaru bloków, pomagając nam zachować spójny i atrakcyjny wygląd.

W tym artykule pokażemy, jak łatwo zmienić wysokość i szerokość bloku w WordPress.

How to change block height and width in WordPress

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

Edytor bloków umożliwia dodawanie treści do witryny WordPress przy użyciu różnych bloków, w tym nagłówków, akapitów, obrazów, filmów, audio i innych.

Czasami jednak możesz chcieć zmienić szerokość lub wysokość określonego bloku, aby poprawić jego wygląd lub układ całej treści.

Dostosowanie rozmiarów bloków może również zapewnić, że twoja treść jest responsywna i wyświetla się poprawnie na wszystkich urządzeniach, w tym telefonach, tabletach i laptopach.

Na przykład, mogłeś załadować obrazek w edytorze treści, ale jest on zbyt duży i sprawia, że strona główna wygląda nieatrakcyjnie na front-endzie.

Preview of an image

Można również zmienić rozmiar bloku nagłówka, aby lepiej dopasować go do treści.

Dostosowując szerokość i wysokość bloków, możesz sprawić, że twoje wpisy i strony będą wyglądać bardziej estetycznie.

W związku z tym zobaczmy, jak łatwo zmienić wysokość i szerokość bloku w WordPress. Omówimy kilka różnych metod i możesz skorzystać z poniższych odnośników, aby przejść do tej, której chcesz użyć:

Metoda 1: Zmiana wysokości i szerokości bloku przy użyciu ustawień bloku

W tej metodzie pokażemy, jak zmienić wysokość i szerokość bloku przy użyciu domyślnych ustawień WordPress.

Obecnie WordPress nie oferuje takich samych opcji zmiany rozmiaru dla wszystkich bloków. Jednak edytor bloków zapewnia wiele sposobów zmiany wysokości i szerokości różnych bloków.

Zacznijmy od bloku Image w WordPressie.

Po pierwsze, możesz zmienić wyrównanie bloku z obrazkiem, klikając przycisk „Wyrównaj” na pasku narzędzi nad blokiem.

W tym przypadku wybranie opcji „Szeroka szerokość” spowoduje, że blok będzie miał taką samą szerokość jak kontener. Z kolei opcja wyrównania „Pełna szerokość” sprawi, że blok będzie zajmował całą szerokość strony.

Use alignment settings to resize an image

Rozmiar bloku można również zmienić, przechodząc do panelu „Ustawienia bloku” po prawej stronie i przewijając w dół do sekcji „Ustawienia”. W tym miejscu można zmienić rozmiar bloku z menu rozwijanego „Rozmiar obrazka”.

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

Poniżej można również dostosować rozmiar bloku za pomocą wartości procentowej.

Resize an image using block panel settings

Innym sposobem zmiany rozmiaru bloku Obrazek jest kliknięcie samego obrazka, co spowoduje wyświetlenie niebieskiej ramki z okrągłymi kotwicami.

Następnie wystarczy przeciągnąć te kotwice, aby zmienić wysokość i szerokość bloku obrazka.

Resize Image block using anchors

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

Metoda 2: Zmiana wysokości i szerokości bloku przy użyciu bloku kolumn

Jeśli blok, którego rozmiar chcesz zmienić, nie zawiera przycisków wyrównania ani ustawień zmiany rozmiaru, ta metoda jest dla Ciebie.

W tej metodzie umieścimy nasz blok wewnątrz bloku Columns. Działa on jako kontener, do którego można dodawać różne bloki w każdej kolumnie. Następnie można zmienić rozmiar tych bloków, dostosowując wysokość i szerokość kolumn.

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

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

Choose the column block

Następnie na ekranie zostanie wyświetlony układ kolumn i można teraz dodać żądany blok, klikając przycisk „Dodaj blok (+)” wewnątrz kolumny.

Po dodaniu bloku można zmienić jego rozmiar za pomocą „Ustawień kolumny” znajdujących się w prawym panelu.

Add Block using column

Gdy skończysz, po prostu kliknij przycisk „Opublikuj”, aby zapisać twoje zmiany.

Tak wyglądała treść na naszej demonstracyjnej witrynie internetowej po zmianie rozmiaru i wyrównaniu dwóch bloków akapitów wewnątrz bloku dwukolumnowego.

Column block preview

Metoda 3: Zmiana wysokości i szerokości bloku przy użyciu bloku grupy

Można również dostosować szerokość i wysokość bloków za pomocą bloku Group. Umożliwia on grupowanie twoich pożądanych bloków i stylizowanie ich razem.

Najpierw należy kliknąć przycisk „Dodaj blok” (+) u góry. Następnie należy zlokalizować i dodać blok Grupa do edytora treści.

Gdy to zrobisz, blok Grupa wyświetli trzy różne opcje układu. W tym poradniku użyjemy układu „Grupa”.

Choose the Group block and select a layout

Następnie na ekranie zostanie wyświetlony przycisk „Dodaj blok”. Możesz teraz dodać dowolny blok.

W tym poradniku dodamy i zmienimy rozmiar bloku nagłówka, bloku akapitu i bloku obrazka.

Add a heading block to the Group block

Aby dodać wiele bloków do grupy, kliknij przycisk „Wybierz grupę” na pasku narzędzi bloku.

Po wybraniu grupy wystarczy kliknąć przycisk „Dodaj blok” (+) u dołu.

Add multiple blocks in Group

Gdy to zrobisz, otworzy się panel boczny ustawień bloków po prawej stronie. Z tego miejsca można łatwo dostosować układ, justowanie i orientację wszystkich bloków.

Zmiana układu spowoduje również zmianę różnych rozmiarów bloków. Ustawienia te można konfigurować do momentu uzyskania zadowalającego efektu.

Configure the block settings of the Group block

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

Tak wyglądał blok Grupy na naszej demonstracyjnej witrynie internetowej.

Group block preview

Metoda 4: Zmiana wysokości bloku przy użyciu bloku pokrywy

Ta metoda zmiany rozmiaru jest przeznaczona dla osób, które chcą korzystać z bloku Cover. Włącza on wyświetlanie tekstu i innych treści na wierzchu obrazka lub filmu.

Najpierw kliknij przycisk „Dodaj blok” (+) u góry i znajdź blok okładki.

Gdy to zrobisz, zostaniesz poproszony o wybranie koloru lub przesłanie obrazka z biblioteki multimediów WordPress. Ten obrazek lub kolor zostanie użyty jako tło bloku Okładka.

Add the Cover block

Następnie przeciągnij i upuść dowolny blok na blok okładki.

Następnie należy kliknąć blok okładki, aby otworzyć ustawienia bloku w prawej kolumnie.

Z tego miejsca przewiń w dół do panelu „Wymiary”, w którym możesz dostosować wysokość bloku okładki za pomocą pikseli.

Change the Cover block height

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

Aby uzyskać bardziej szczegółowe instrukcje dotyczące korzystania z bloku Cover, warto zapoznać się z naszym przewodnikiem dla początkujących na temat Cover Image vs. Featured Image w edytorze bloków WordPress.

Bonus: Tworzenie 111111 pięknych stron przy użyciu zaawansowanych bloków w SeedProd

Za pomocą wtyczki SeedProd można łatwo tworzyć piękne i estetyczne strony.

Jest to najlepszy kreator stron WordPress na rynku. Umożliwia tworzenie stron docelowych za pomocą bloków, które są bardzo łatwe do dostosowania i zmiany rozmiaru zgodnie z twoimi potrzebami.

Najpierw należy zainstalować i włączyć wtyczkę SeedProd. Aby uzyskać więcej szczegółów, możesz przeczytać nasz przewodnik na temat instalacji wtyczki WordPress.

Uwaga: SeedProd oferuje również darmową wersję, ale w tym poradniku będziemy korzystać z wersji premium.

Po włączaniu należy przejść do strony SeedProd ” Ustawienia z twojego kokpitu WordPress i wpisz klucz licencyjny w polu „Klucz licencyjny”.

Klucz licencyjny można znaleźć na stronie Twojego konta w witrynie internetowej SeedProd.

Paste license key in field

Następnie przejdź na ekran SeedProd ” Landing Pages z panelu bocznego administratora, aby rozpocząć tworzenie strony docelowej.

W tym miejscu wystarczy kliknąć przycisk „Utwórz nową stronę docelową”.

Click the Add New Landing Page button

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

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

Po dodaniu tych danych wystarczy kliknąć przycisk „Zapisz i rozpocznij edycję strony”, aby kontynuować.

Enter your page details

Spowoduje to uruchomienie kreatora stron SeedProd typu „przeciągnij i upuść”, w którym możesz teraz rozpocząć edycję swojej strony. Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat tworzenia strony docelowej za pomocą WordPressa.

W tym poradniku dodamy i zmienimy rozmiar bloku z obrazkiem i bloku z przyciskiem.

Najpierw należy przeciągnąć blok Image z panelu bloków po lewej stronie i upuścić go w dowolnym miejscu na stronie.

Choose the image block in the SeedProd

Następnie kliknij blok Imagely, aby otworzyć ustawienia bloku w lewej kolumnie. W tym miejscu możesz przesłać obrazek z twojej biblioteki multimediów.

Następnie można zmienić wysokość i szerokość bloku za pomocą pikseli lub wartości procentowych.

Change the block size in SeedProd

Można również dostosować rozmiar i położenie obrazka, przechodząc do karty „Zaawansowane” w górnej części panelu ustawień.

Następnie wystarczy kliknąć panel Odstępy, aby rozwinąć jego ustawienia.

Visit the Spacing panel by switching to the Advanced tab

Tutaj wystarczy dodać wartości, aby dostosować margines i wypełnienie bloku zgodnie z własnymi potrzebami.

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

Ajust the margin and padding of the block

W SeedProd można również dodać blok Spacer pomiędzy dwoma różnymi blokami, aby umieścić między nimi trochę przestrzeni.

Najpierw należy zlokalizować i dodać blok „Spacer” z lewej kolumny. Następnie kliknij go, aby otworzyć jego ustawienia.

Add the Spacer block

Teraz można kontrolować wysokość elementu dystansowego za pomocą pokazu slajdów „Wysokość”.

Blok dystansowy może pomóc w stworzeniu witryny internetowej wolnej od bałaganu.

Use the height slider to adjust Spacer block

W ten sam sposób można również zmieniać szerokość i wysokość innych bloków, w tym bloków filmu, nagłówków i przycisków.

Wystarczy znaleźć blok Button w lewej kolumnie i przeciągnąć go na twoją stronę.

Add the Button block to the website

Następnie należy kliknąć przycisk, aby otworzyć jego ustawienia blokowania.

Z tego miejsca przełącz się na kartę „Zaawansowane” od góry. Możesz zmienić wysokość bloku, przeciągając suwak „Dopełnienie pionowe”.

Changing height of the button block

Aby zmienić szerokość, przeciągnij pokaz slajdów „Poziome dopełnienie” w lewej kolumnie.

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

Change width of the button block

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 z naszymi najlepszymi motywami WordPress przyjaznymi dla Gutenberga.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

Jeden komentarzZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.