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?

Edytor bloków umożliwia dodawanie treści do Twojej strony WordPress za pomocą różnych bloków, w tym nagłówków, akapitów, obrazów, filmów, dźwięku i innych.

Czasami jednak może być konieczna zmiana szerokości lub wysokości konkretnego bloku w celu poprawy jego wyglądu lub ogólnego układu treści.

Dostosowanie rozmiarów bloków może również zapewnić, że Twoje treści będą responsywne i będą poprawnie wyświetlane na wszystkich urządzeniach, w tym na telefonach, tabletach i laptopach.

Na przykład, mogłeś przesłać obraz w edytorze treści, ale jest on zbyt duży i sprawia, że strona wygląda nieatrakcyjnie na froncie.

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

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

Mając to na uwadze, zobaczmy, jak łatwo można 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
• Metoda 2: Zmień wysokość i szerokość bloku za pomocą bloku Kolumny
• Metoda 3: Zmień wysokość i szerokość bloku za pomocą bloku Grupa
• Metoda 4: Zmień wysokość bloku za pomocą bloku Okładka
• Bonus: Twórz piękne strony za pomocą zaawansowanych bloków w SeedProd

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.

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 Obraz w WordPress.

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

Tutaj wybranie opcji „Szeroki rozmiar” sprawi, że blok będzie miał taką samą szerokość jak kontener. Lub opcja wyrównania „Pełna szerokość” sprawi, że blok zajmie całą szerokość strony.

Możesz również zmienić rozmiar bloku, przechodząc do panelu „Ustawienia bloku” po prawej stronie i przewijając w dół do sekcji „Ustawienia”. Stąd możesz zmienić rozmiar bloku z menu rozwijanego „Rozmiar obrazu”.

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ń wysokość i szerokość bloku za pomocą bloku Kolumny

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

W tej metodzie umieścimy nasz blok wewnątrz bloku Kolumny. Działa on jako kontener, w którym można dodawać różne bloki w każdej kolumnie. Następnie można zmieniać 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 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żesz zmienić jego rozmiar, korzystając z „Ustawień kolumny” znajdujących się w prawym panelu.

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

Możesz również dostosować szerokość i wysokość bloków za pomocą bloku Grupa. Pozwala on na grupowanie wybranych bloków i stylizowanie ich razem.

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

Po wykonaniu tej czynności blok Grupa wyświetli trzy różne opcje układu. W tym samouczku użyjemy 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.

Zmiana układu zmieni również różne rozmiary bloków. Możesz skonfigurować 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. Umożliwia wyświetlanie tekstu i innych treści na obrazie lub wideo.

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 Obraz okładki a obraz wyróżniony 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.

Wiele naszych marek partnerskich użyło tego narzędzia do zaprojektowania całej swojej strony internetowej, a ich użytkownicy pokochali świeży, nowoczesny wygląd. Aby dowiedzieć się więcej, zapoznaj się z naszą recenzją SeedProd.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej szczegółów, możesz przeczytać nasz poradnik 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.

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ć.

Spowoduje to uruchomienie konstruktora stron metodą przeciągnij i upuść SeedProd, gdzie możesz teraz zacząć edytować swoją stronę. Szczegółowe instrukcje znajdziesz w naszym przewodniku jak stworzyć stronę docelową 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ż dostosować rozmiar i pozycję obrazu, przełączając się na kartę „Zaawansowane” u góry panelu ustawień.

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

Tutaj po prostu dodaj wartości, aby dostosować margines i wypełnienie bloku zgodnie z Twoimi potrzebami.

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

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.

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 przełącz się na zakładkę „Zaawansowane” u góry. Możesz zmienić wysokość bloku, przeciągając suwak „Wypełnienie pionowe”.

Aby zmienić szerokość, przeciągnij suwak „Wypełnienie poziome” w lewej kolumnie.

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

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak zmieniać szerokość i wysokość bloków 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 najlepszych motywów WordPress przyjaznych Gutenbergowi.

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.