Czy chcesz zmienić wysokość i szerokość bloku w WordPressie?
Domyślnie WordPress ułatwia tworzenie pięknych układów treści dla twoich postów i stron za pomocą bloków. Jednak czasami możesz chcieć zmienić rozmiar bloków, aby wyglądały lepiej.
W tym artykule pokażemy Ci, jak łatwo zmienić wysokość i szerokość bloku w WordPressie.
Dlaczego warto zmienić wysokość i szerokość bloku w WordPressie?
Edytor bloków umożliwia dodawanie treści do witryny WordPress za pomocą 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ść konkretnego 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ę prawidłowo na wszystkich urządzeniach, w tym telefonach, tabletach i laptopach.
Na przykład, być może przesłałeś obraz w edytorze treści, ale jest on zbyt duży i sprawia, że strona wygląda nieatrakcyjnie.
Możesz też zmienić rozmiar bloku nagłówków, 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.
To powiedziawszy, letâs zobaczyć, jak można łatwo zmienić wysokość i szerokość bloku w WordPress.
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ń oferowanych przez WordPress.
Obecnie WordPress nie oferuje tych samych opcji zmiany rozmiaru dla wszystkich bloków. Jednak edytor bloków oferuje wiele sposobów na zmianę wysokości i szerokości różnych bloków.
Letâs zacząć od bloku Image w WordPressie.
Po pierwsze, możesz zmienić wyrównanie bloku Image, klikając przycisk âAlignâ na pasku narzędzi nad blokiem.
Tutaj wybranie opcji âWide Widthâ sprawi, że blok będzie miał taką samą szerokość jak kontener.
Lub, opcja wyrównania âFull Widthâ sprawi, że blok będzie miał całą szerokość strony.
Możesz również zmienić rozmiar bloku, przechodząc do panelu âBlock Settingsâ po prawej stronie i przewijając w dół do sekcji âSettingsâ. Z tego miejsca możesz zmienić rozmiar bloku z rozwijanego menu âImage Sizeâ.
Możesz również dostosować szerokość i wysokość bloku, wpisując preferowany rozmiar pikseli w pola âWidthâ i âHeightâ w sekcji âImage dimensionsâ.
Poniżej możesz również dostosować rozmiar bloku za pomocą wartości procentowej.
Innym sposobem na zmianę rozmiaru bloku Image jest kliknięcie na sam obrazek, aby wywołać niebieskie obramowanie z okrągłymi kotwicami.
Następnie wystarczy przeciągnąć te kotwice, aby zmienić wysokość i szerokość bloku obrazu.
Po zakończeniu kliknij przycisk âUpdateâ lub âPublishâ, aby zapisać swoje ustawienia.
Metoda 2: Zmiana wysokości i szerokości bloku za pomocą bloku kolumn
Jeśli blok, którego rozmiar chcesz zmienić, nie posiada przycisków wyrównania lub ustawień zmiany rozmiaru, to ta metoda jest dla ciebie.
W tej metodzie umieścimy nasz blok wewnątrz bloku Columns. Działa on jako kontener, w którym możesz dodawać bloki w każdej kolumnie. Następnie, możesz zmienić rozmiar tych bloków poprzez dostosowanie wysokości i szerokości kolumn.
Najpierw musisz kliknąć na przycisk âAdd Blockâ(+) w lewym górnym rogu ekranu.
Stąd wystarczy zlokalizować i dodać blok Columns do edytora treści. Następnie zostaniesz poproszony o wybranie wariantu.
Po tym na ekranie pojawi się układ kolumn, a teraz możesz dodać żądany blok, klikając przycisk âAdd Block (+)â wewnątrz kolumny.
Po dodaniu bloku możesz zmienić jego rozmiar, korzystając z âUstawień kolumnyâ znajdujących się w prawym panelu.
Kiedy skończysz, po prostu kliknij przycisk âPublishâ, aby zapisać swoje zmiany.
Tak wyglądała treść na naszej stronie demonstracyjnej po zmianie rozmiaru i wyrównaniu dwóch bloków akapitowych wewnątrz bloku dwukolumnowego.
Metoda 3: Zmiana wysokości i szerokości bloku za pomocą bloku grupy
Możesz również dostosować szerokość i wysokość bloków za pomocą bloku Grupa. Pozwala on na grupowanie różnych bloków i stylizowanie ich razem.
Najpierw musisz kliknąć na przycisk âAdd Blockâ (+) u góry. Następnie musisz zlokalizować i dodać blok Group do edytora treści.
Gdy to zrobisz, blok Grupa wyświetli trzy różne opcje układu, które możesz wybrać. W przypadku tego samouczka użyjemy układu âGroupâ.
Po tym na ekranie pojawi się przycisk âAdd Blockâ. Możesz teraz dodać dowolny blok, który chcesz.
W tym poradniku będziemy dodawać i zmieniać rozmiar bloku Nagłówek, bloku Akapit i bloku Obraz.
Aby dodać wiele bloków do grupy, musisz kliknąć przycisk âWybierz grupęâ z paska narzędzi bloku.
Po wybraniu grupy, wystarczy kliknąć przycisk âAdd Blockâ (+) na dole.
Kliknięcie przycisku âSelect Groupâ otwiera również ustawienia bloku w prawej kolumnie. Stąd 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. Możesz skonfigurować te ustawienia, aż będziesz zadowolony z rezultatu.
Gdy skończysz, kliknij przycisk âUpdateâ lub âPublishâ, aby zapisać swoje ustawienia.
Tak wyglądał blok Grupa na naszej stronie demo.
Metoda 4: Zmiana wysokości bloku za pomocą bloku Cover
Ta metoda zmiany rozmiaru jest dla Ciebie, jeśli chcesz użyć bloku Cover. Umożliwia on wyświetlanie tekstu i innych treści na górze obrazu lub wideo.
Najpierw będziesz musiał kliknąć przycisk âAdd Blockâ (+) u góry i znaleźć blok Cover.
Gdy już to zrobisz, zostaniesz poproszony o wybranie koloru lub przesłanie obrazu z biblioteki mediów WordPress. Ten obraz lub kolor będzie używany jako tło dla bloku Cover.
Następnie po prostu przeciągnij i upuść dowolny blok, który chcesz do bloku Cover.
Po tym musisz kliknąć na blok Cover, aby otworzyć jego ustawienia bloku w prawej kolumnie.
Stąd przewiń w dół do panelu âDimensionsâ, gdzie możesz dostosować wysokość bloku Cover za pomocą pikseli.
Na koniec nie zapomnij kliknąć przycisku âSave Changesâ, aby zapisać swoje ustawienia.
Aby uzyskać bardziej szczegółowe instrukcje dotyczące korzystania z bloku Cover, możesz zobaczyć nasz przewodnik dla początkującychâs na Cover Image vs. Featured Image w edytorze bloków WordPress.
Bonus: Tworzenie pięknych stron za pomocą zaawansowanych bloków w SeedProd
Możesz łatwo stworzyće piękne i estetyczne strony za pomocą wtyczki SeedProd.
Jest to najlepszy na rynku konstruktor stron WordPress, który pozwala tworzyć strony docelowe za pomocą bloków. Te bloki są również super łatwe do dostosowania i zmiany rozmiaru w zależności od potrzeb.
Najpierw będziesz musiał zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej szczegółów, możesz przeczytać nasz przewodnik o tym, jak zainstalować wtyczkę WordPress.
Uwaga: SeedProd oferuje również darmową wersję, ale w tym tutorialu będziemy używać wersji premium.
Po aktywacji musisz przejść do strony SeedProd ” Ustawienia z pulpitu nawigacyjnego WordPress i wprowadzić klucz licencyjny w polu „Klucz licencyjny”.
Możesz znaleźć klucz licencyjny na stronie swojego konta na stronie SeedProd.
Następnie musisz odwiedzić ekran SeedProd ” Landing Pages z paska bocznego administratora, aby rozpocząć tworzenie strony docelowej.
Z tego miejsca wystarczy kliknąć przycisk „Dodaj nowy Landing Page”.
Zostaniesz teraz przeniesiony do strony „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 dla Twojej strony docelowej.
Po dodaniu tych danych kliknij na przycisk „Zapisz i zacznij edytować stronę”, aby kontynuować.
W ten sposób uruchomisz kreator stron SeedProd metodą „przeciągnij i upuść”, gdzie możesz rozpocząć edycję swojej strony.
Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat tworzenia strony docelowej za pomocą WordPressa.
W tym tutorialu będziemy dodawać i zmieniać rozmiar bloku Image i bloku Button.
Najpierw musisz przeciągnąć blok Image z panelu bloków po lewej stronie i upuścić go w dowolnym miejscu na stronie.
Następnie kliknij na blok Image, aby otworzyć jego ustawienia w lewej kolumnie. Stąd możesz przesłać obraz ze swojej biblioteki multimediów.
Następnie możesz zmienić wysokość i szerokość bloku za pomocą pikseli lub procentów.
Możesz również dostosować rozmiar i położenie obrazu, przechodząc do zakładki „Zaawansowane” w górnej części panelu ustawień.
Następnie wystarczy kliknąć na panel Spacing, aby rozwinąć jego ustawienia.
Tutaj po prostu dodaj wartości, aby dostosować margines i padding bloku do swoich potrzeb.
Możesz dostosować margines i padding 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ę miejsca.
Najpierw musisz zlokalizować i dodać blok 'Spacer’ z lewej kolumny. Następnie kliknij na niego, aby otworzyć jego ustawienia.
Teraz możesz kontrolować wysokość odstępu za pomocą suwaka 'Wysokość’.
Blok dystansowy może pomóc Ci stworzyć stronę bez bałaganu.
Możesz również zmienić szerokość i wysokość innych bloków w ten sam sposób, w tym bloków Video, Heading i Button.
Po prostu znajdź blok Button w lewej kolumnie i przeciągnij go na swoją stronę.
Następnie musisz kliknąć na Przycisk, aby otworzyć ustawienia jego bloku.
Z tego miejsca przełącz się na zakładkę 'Zaawansowane’ od góry. Możesz zmienić wysokość bloku przeciągając suwak 'Vertical Padding’.
Aby zmienić szerokość, przeciągnij suwak 'Horizontal Padding’ w lewej kolumnie.
Po zakończeniu, don’nie zapomnij kliknąć na przycisk „Zapisz”.
Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się, jak zmienić szerokość i wysokość bloku w WordPress. Możesz także zobaczyć nasz artykuł o tym, jak dodawać i wyrównywać obrazy w edytorze bloków WordPress i nasze top picki dla niezbędnych wtyczek WordPress, aby rozwijać swoją witrynę.
Jeśli podobał Ci się ten artykuł, to zasubskrybuj nasz kanał YouTube dla tutoriali wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
