Jak zmienić rozmiar bloków w WordPressie

Gutenberg Block Editor, wprowadzony oficjalnie w WordPress 5.0, daje użytkownikom możliwość pełnego dostosowania treści i witryn WordPress. Nie jest już ograniczony koniecznością tworzenia w narzędziu WYSIWYG, takim jak TinyMCE Classic Editor, Gutenberg zapewnia indywidualne bloki dla każdego elementu treści postu lub strony. Mając kontrolę nad ustawieniami dla każdego konkretnego bloku, użytkownicy mogą projektować treści WordPress łatwiej niż kiedykolwiek wcześniej. A jednym z najprostszych sposobów wyróżnienia projektów jest przeniesienie ich poza domyślne ustawienia. Przyjrzymy się więc, jak zmienić rozmiar bloków w WordPressie, abyś mógł zacząć myśleć (i projektować) nieszablonowo.

Większość zmian rozmiaru w edytorze bloków jest nadal ograniczona do obszaru zawartości witryny ze względu na responsywny charakter bloków. Jeśli ustawiłeś obszar zawartości strony na pełną szerokość, będziesz pracować w tej przestrzeni. Jeśli masz obszar treści posta ustawiony na przykład na 580 lub 1200 pikseli, będziesz tam pracować. Wszystkie metody, których używamy, aby nauczyć Cię, jak zmieniać rozmiar bloków w WordPressie, opierają się na założeniu, że pozostaniesz w granicach kontenera konkretnego bloku.

Jak zmienić rozmiar bloków w edytorze

Niektóre – ale nie wszystkie – bloki mają wbudowane opcje zmiany rozmiaru. Są to najłatwiejsze do zmiany rozmiaru z oczywistych powodów. Jednak w zależności od bloku opcje zmiany rozmiaru będą znajdować się w różnych miejscach.

Przykład #1: Blok obrazu

Kliknięcie bloku spowoduje wyświetlenie menu kontekstowego, a opcje zmiany rozmiaru są w rzeczywistości opcjami odstępów. Jednak wyrównania szerokości i pełnej szerokości zmienią rozmiar bloku obrazu na szerokość kontenera (szeroki) lub szerokość całej strony (pełna).

Możesz także zmienić rozmiar bloku obrazu, korzystając z ustawień bloku na prawym pasku bocznym. Trafnie nazwana sekcja Rozmiar obrazu zawiera wiele opcji, za pomocą których można zmienić rozmiar bloku.

WordPress ma menu rozwijane do szybkiej zmiany rozmiaru i możesz wybrać ustawienia wstępne z miniatury , średniego , dużego i pełnego rozmiaru. Wybór pełnego rozmiaru będzie się różnić w zależności od motywu, niezależnie od tego, czy faktycznie jest wyświetlany w całości, czy pasuje do obszaru zawartości.

Możesz także dostosować szerokość i wysokość za pomocą pikseli. Poniżej możesz dostosować procentowo. Procent jest oparty na wartości liczbowej w polach szerokości i wysokości . Nie jest to wstępnie ustawiony rozmiar obrazu wybrany z menu rozwijanego.

Na koniec możesz kliknąć sam obraz, aby wyświetlić niebieską ramkę z białymi, okrągłymi kotwicami . Możesz je przeciągnąć, aby zmienić rozmiar bloku.

Wystarczy kliknąć i przeciągnąć dowolną kotwicę, aby przeskalować obraz. Spowoduje to dostosowanie rozmiaru w polach wysokości i szerokości w menu ustawień bloku.

Przykład #2: Blok wydarzeń

W przypadku Bloku Zdarzeń ustawienia zmiany rozmiaru znajdują się wyłącznie w menu kontekstowym w samym edytorze. (Blok zdarzeń to osobna wtyczka firmy Automattic, którą zainstalujesz, i nie jest częścią podstawowego edytora Gutenberga.)

Podobnie jak niektóre opcje bloku obrazu, opcje zmiany rozmiaru są tutaj technicznie opcjami odstępów. Ale dwie opcje to Wyrównaj do środka i Szeroka szerokość. Możesz wybrać, aby był wyśrodkowany w kontenerze lub na całej szerokości ekranu.

Regulacja wysokości bloku w samym edytorze jest trochę dziwaczna, ale działa. Jeśli po prostu naciśniesz enter/return w polu pustego bloku, możesz zwiększyć wysokość, wstawiając dodatkowe, puste bloki akapitu.

To mniej niż idealne rozwiązanie. Ale jest szybki i działa w mgnieniu oka — zwłaszcza biorąc pod uwagę brak prawdziwej opcji regulacji wysokości dla Bloku Zdarzeń.

Przykład 3#: Używanie kolumn do zmiany rozmiaru bloków w WordPress

Jeśli blok, którego rozmiar chcesz zmienić, nie zawiera opcji zmiany rozmiaru w panelu ustawień lub menu kontekstowym, użycie kolumn edytora bloków to kolejny sposób na zmianę rozmiaru dowolnego bloku. Po prostu wyszukaj blok Kolumny , naciskając dowolny przycisk +, aby dodać nowy blok.

W bloku Kolumna możesz dodać dowolne inne bloki. W opcjach wyszukiwania pojawia się również edytor bloków Wzorce. Są to szablony, które możesz wstawić do swojego posta lub strony z zawartością już zwymiarowaną i umieszczoną, czekając, aż treść zastąpi symbol zastępczy.

Od samego początku blok Kolumny pozwala wybrać rozmiar samej kolumny. Jest podzielony na 6 różnych orientacji, z których każda ma inny procent strony używany w poszczególnych kolumnach.

To nie jedyne konfiguracje, których możesz użyć. Możesz użyć niebieskiego przycisku + wewnątrz bloku, aby w dowolnym momencie dodać nową kolumnę. Każda pojedyncza kolumna ma swój własny panel ustawień, w którym możesz dostosować jej szerokość w procentach.

Uzyskanie odpowiedniego rozmiaru dla twojego projektu może wymagać trochę eksperymentów. Jednak po zakończeniu możesz mieć dobrze zaprojektowaną i dobrze rozmieszczoną treść na swojej stronie głównej. Pamiętaj, że wszelkie puste kolumny, które masz w edytorze bloków, będą również wyświetlane jako puste w interfejsie użytkownika.

Dostosowując szerokość, rozmieszczenie i liczbę różnych kolumn, Twoje bloki można zmieniać i umieszczać w prawie dowolny sposób.

Potrzebujesz więcej opcji rozmiaru? Rozważ bardziej zaawansowany kreator stron

Zdajemy sobie sprawę, że niektóre z tych metod zmiany rozmiaru bloków mogą wydawać się ograniczające. Jeśli okaże się, że są dla Ciebie zbyt ograniczające, być może nadszedł czas, aby przyjrzeć się bardziej zaawansowanemu narzędziu do tworzenia stron.

Na przykład nasz własny Divi ma opcje rozmiaru i transformacji dla każdego modułu (bloku), które zapewniają znacznie większą kontrolę nad kształtem, rozmiarem i odstępami niż jest to możliwe w Gutenbergu. Większość zaawansowanych kreatorów stron też to robi, więc jeśli okaże się, że opcje Gutenberga są zbyt ograniczone, najlepszym następnym krokiem może być sprawdzenie czegoś takiego jak Divi.

Jak zmienić rozmiar bloków w WordPress za pomocą CSS

Każdy blok ma sekcję CSS w panelu ustawień w Ustawieniach zaawansowanych . Oprócz innych ustawień zaawansowanych specyficznych dla bloku, każde z nich ma pole dla dodatkowych klas CSS . Możesz przypisać dowolne selektory do tego pojedynczego bloku, niezależnie od tego, czy istnieją już w Twojej witrynie, czy też utworzysz je specjalnie dla tego bloku.

Zwykle sugerujemy używanie identyfikatorów CSS zamiast klas dla poszczególnych bloków, ale nie jest to obsługiwane przez edytor bloków (przynajmniej domyślnie). Więc będziesz chciał po prostu użyć wielu klas, aby nadążyć za pojedynczymi blokami, a nie identyfikatorami. Klasy tak naprawdę mają obejmować duże kategorie typów elementów, podczas gdy identyfikatory są przeznaczone dla poszczególnych elementów. W takim przypadku sugerujemy użycie jasnej konwencji nazewnictwa, aby zachować porządek w kodzie.

Niezależnie od tego, po prostu wprowadzisz klasę do pola tekstowego. Nie umieszczaj kropki/kropki przed nazwą klasy w tym polu .

Teraz powinieneś przejść do Wygląd - Dostosuj i znaleźć sekcję Dodatkowy CSS na samym dole. Napisz lub wklej kod CSS, aby zmienić rozmiar bloku według własnych upodobań.

Sugerujemy unikanie pomiarów w pikselach (px), ponieważ są one bezwzględne. Najlepiej użyć vw (szerokość widoku) , vh (wysokość widoku) lub % (procent), aby dostosować blok. Każdy z nich będzie skalowany w odniesieniu do urządzenia i/lub innych treści wokół niego.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Pamiętaj, że % i vw/vh też się różnią, chociaż działają podobnie. Wszystkie działają w oparciu o wartości procentowe, ale te odnoszą się do różnych kotwic.

Pomiar procentowy odnosi się do pojemnika, w którym trzymany jest element. Jeśli więc sekcja lub wiersz, w którym znajduje się element, nie dochodzi do krawędzi ekranu, nawet ustawienie width:100% nie osiągnie granic.

Korzystanie z vh/vw będzie jednak dotyczyło widoku samego urządzenia, a nie elementów witryny. Używając height:80vh , zawsze możesz upewnić się, że ten blok zajmuje 80% wysokości ekranu, niezależnie od tego, czy wyświetla się na urządzeniu mobilnym, komputerze stacjonarnym czy tablecie.

Wniosek

Edytor bloków w WordPress daje użytkownikom ogromną liczbę opcji dostosowywania, które były wcześniej niedostępne (w samym edytorze). Umiejętność zmiany rozmiaru bloków w WordPressie jest niezbędna, aby móc w pełni wykorzystać edytor bloków. A dzięki edycji całego serwisu w swoim repertuarze jest to jedna z umiejętności, która z czasem będzie bardziej użyteczna.

Jakie są wskazówki i porady dotyczące zmiany rozmiaru bloków w WordPressie, którymi możesz się podzielić?

Artykuł wyróżniony obrazem autorstwa 3rieart / shutterstock.com